Accessibility options added and Purge css implemented

assets/core/scss/components/_select.scss

@@ -287,6 +287,10 @@
       background: $tutor-surface-l2;
     }
 
+    &[data-selected='true'] {
+      background: $tutor-surface-l2;
+    }
+
     &[data-disabled='true'] {
       color: $tutor-text-subdued;
       cursor: not-allowed;

assets/core/scss/main.scss

@@ -66,43 +66,63 @@ body {
   display: none !important;
 }
 
-// View Transitions for Theme Toggle
-::view-transition-group(root) {
-  animation-duration: 0.7s;
-  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-}
-
 ::view-transition-new(root) {
-  animation-name: tutor-theme-reveal-light;
-  animation-fill-mode: both;
+  animation: tutor-theme-fade-in 220ms ease-out both;
 }
 
-::view-transition-old(root),
-[data-tutor-theme="dark"]::view-transition-old(root) {
-  animation: none;
-  animation-fill-mode: both;
-  z-index: -1;
+::view-transition-old(root) {
+  animation: tutor-theme-fade-out 220ms ease-out both;
 }
 
-[data-tutor-theme="dark"]::view-transition-new(root) {
-  animation-name: tutor-theme-reveal-dark;
-  animation-fill-mode: both;
-}
-
-@keyframes tutor-theme-reveal-dark {
+@keyframes tutor-theme-fade-in {
   from {
-    clip-path: polygon(50% -71%, -50% 71%, -50% 71%, 50% -71%);
+    opacity: 0;
   }
   to {
-    clip-path: polygon(50% -71%, -50% 71%, 50% 171%, 171% 50%);
+    opacity: 1;
   }
 }
 
-@keyframes tutor-theme-reveal-light {
+@keyframes tutor-theme-fade-out {
   from {
-    clip-path: polygon(171% 50%, 50% 171%, 50% 171%, 171% 50%);
+    opacity: 1;
   }
   to {
-    clip-path: polygon(171% 50%, 50% 171%, -50% 71%, 50% -71%);
+    opacity: 0;
+  }
+}
+
+// Reduce Motion
+[data-tutor-motion='reduce'] *,
+[data-tutor-motion='reduce'] *::before,
+[data-tutor-motion='reduce'] *::after {
+  animation: none !important;
+  scroll-behavior: auto !important;
+}
+
+[data-tutor-motion='reduce'] * {
+  transition-duration: 0.1s !important;
+}
+
+[data-tutor-motion='reduce']::view-transition-new(root),
+[data-tutor-motion='reduce']::view-transition-old(root) {
+  animation: none !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-tutor-motion='auto'] *,
+  [data-tutor-motion='auto'] *::before,
+  [data-tutor-motion='auto'] *::after {
+    animation: none !important;
+    scroll-behavior: auto !important;
+  }
+
+  [data-tutor-motion='auto'] * {
+    transition-duration: 0.1s !important;
+  }
+
+  [data-tutor-motion='auto']::view-transition-new(root),
+  [data-tutor-motion='auto']::view-transition-old(root) {
+    animation: none !important;
   }
 }

assets/core/scss/mixins/_avatars.scss

@@ -8,7 +8,7 @@
   position: relative;
   border-radius: $tutor-radius-full;
   overflow: hidden;
-  background-color: $tutor-button-primary-soft;
+  background-color: $tutor-surface-brand-quaternary;
   color: $tutor-text-primary;
   flex-shrink: 0;
   user-select: none;

assets/core/scss/mixins/_badges.scss

@@ -6,7 +6,7 @@
   @include tutor-typography('tiny', 'medium', 'secondary');
   border-radius: $tutor-radius-sm;
   padding-inline: $tutor-spacing-4;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: $tutor-spacing-3;
   background-color: $tutor-actions-gray-secondary;

assets/core/scss/mixins/_buttons.scss

@@ -391,15 +391,29 @@
     position: absolute;
     left: 50%;
     top: 50%;
+    transform: translate(-50%, -50%);
     width: 16px;
     height: 16px;
     border: 2px solid currentColor;
     border-radius: 50%;
     border-top-color: transparent;
     animation: tutor-button-spin 1s linear infinite;
+
+    [data-tutor-motion='reduce'] & {
+      animation: tutor-button-pulse 1.5s ease-in-out infinite !important;
+      border-top-color: currentColor;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      [data-tutor-motion='auto'] & {
+        animation: tutor-button-pulse 1.5s ease-in-out infinite !important;
+        border-top-color: currentColor;
+      }
+    }
   }
 }
 
+// Keyframes for the standard spin
 @keyframes tutor-button-spin {
   0% {
     transform: translate(-50%, -50%) rotate(0deg);
@@ -409,6 +423,19 @@
   }
 }
 
+// Keyframes for the reduced motion "Pulse"
+@keyframes tutor-button-pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  50% {
+    opacity: 0.4;
+    transform: translate(-50%, -50%) scale(0.9);
+  }
+}
+
 @mixin tutor-button-reset {
   background: none;
   border: none;

assets/core/scss/themes/_dark.scss

@@ -9,22 +9,23 @@
   // =============================================================================
 
   --tutor-surface-base: #{$tutor-gray-900};
-  --tutor-surface-l1: #{$tutor-gray-950};
-  --tutor-surface-l1-hover: #{$tutor-gray-800};
-  --tutor-surface-l2: #{$tutor-gray-900};
+  --tutor-surface-l1: #{$tutor-gray-800};
+  --tutor-surface-l1-hover: #{$tutor-gray-750};
+  --tutor-surface-l2: #{$tutor-gray-700};
   --tutor-surface-l2-hover: #{$tutor-gray-800};
   --tutor-surface-brand-dark: #{$tutor-brand-950};
   --tutor-surface-brand-primary: #{$tutor-brand-600};
+  --tutor-surface-brand-primary-2: #{$tutor-brand-800};
   --tutor-surface-brand-secondary: #{$tutor-brand-300};
-  --tutor-surface-brand-tertiary: #{$tutor-gray-900};
+  --tutor-surface-brand-tertiary: #{$tutor-gray-750};
   --tutor-surface-brand-quaternary: #{$tutor-brand-900};
   --tutor-surface-sidebar-l1: #{$tutor-gray-950};
   --tutor-surface-exception2-secondary: #{$tutor-exception-2-tertiary};
   --tutor-surface-exception3-highlight: #{$tutor-exception-3};
   --tutor-surface-dark: #{$tutor-gray-800};
   --tutor-surface-exception6: #{$tutor-exception-6};
   --tutor-surface-exception7: #{$tutor-brand-900};
-  --tutor-surface-warning: #{$tutor-warning-950};
+  --tutor-surface-warning: #{$tutor-gray-750};
   --tutor-surface-warning-hover: #{$tutor-warning-900};
   --tutor-surface-success: #{$tutor-success-950};
   --tutor-surface-critical: #{$tutor-error-950};
@@ -33,12 +34,12 @@
   // TEXT COLORS
   // =============================================================================
 
-  --tutor-text-primary: #{$tutor-gray-1};
+  --tutor-text-primary: #{$tutor-gray-100};
   --tutor-text-primary-inverse: #{$tutor-gray-1};
   --tutor-text-secondary: #{$tutor-gray-300};
   --tutor-text-subdued: #{$tutor-gray-500};
   --tutor-text-disabled: #{$tutor-gray-600};
-  --tutor-text-brand: #{$tutor-brand-600};
+  --tutor-text-brand: #{$tutor-brand-500};
   --tutor-text-brand-hover: #{$tutor-brand-700};
   --tutor-text-brand-secondary: #{$tutor-brand-400};
   --tutor-text-light: #{$tutor-gray-25};
@@ -52,7 +53,6 @@
   --tutor-text-exception4: #{$tutor-warning-400};
   --tutor-text-exception5: #{$tutor-exception-5};
   --tutor-text-highlighted-hover: #{$tutor-gray-700};
-  --tutor-text-disabled: #{$tutor-gray-300};
 
   // =============================================================================
   // ICON COLORS
@@ -64,12 +64,13 @@
   --tutor-icon-secondary: #{$tutor-gray-500};
   --tutor-icon-subdued: #{$tutor-gray-600};
   --tutor-icon-disabled: #{$tutor-gray-600};
-  --tutor-icon-brand: #{$tutor-brand-600};
+  --tutor-icon-brand: #{$tutor-brand-500};
   --tutor-icon-brand-hover: #{$tutor-brand-700};
   --tutor-icon-brand-secondary: #{$tutor-brand-300};
   --tutor-icon-exception1: #{$tutor-exception-1};
   --tutor-icon-exception2: #{$tutor-exception-2};
-  --tutor-icon-success-primary: #{$tutor-success-600};
+  --tutor-icon-success-primary: #{$tutor-success-700};
+  --tutor-icon-success-secondary: #{$tutor-success-500};
   --tutor-icon-exception4: #{$tutor-warning-400};
   --tutor-icon-exception5: #{$tutor-exception-5};
   --tutor-icon-caution: #{$tutor-yellow-400};
@@ -86,85 +87,89 @@
   --tutor-button-primary-hover: #{$tutor-brand-700};
   --tutor-button-primary-focused: #{$tutor-brand-600};
   --tutor-button-primary-disabled: #{$tutor-brand-400};
-  --tutor-button-primary-soft: #{$tutor-brand-200};
-  --tutor-button-primary-soft-hover: #{$tutor-brand-300};
-  --tutor-button-primary-soft-focused: #{$tutor-brand-200};
+  --tutor-button-primary-soft: #{$tutor-brand-300};
+  --tutor-button-primary-soft-hover: #{$tutor-gray-700};
+  --tutor-button-primary-soft-focused: #{$tutor-brand-300};
   --tutor-button-disabled: #{$tutor-gray-750};
   --tutor-button-destructive: #{$tutor-error-600};
   --tutor-button-destructive-hover: #{$tutor-error-700};
   --tutor-button-destructive-focused: #{$tutor-error-600};
   --tutor-button-destructive-soft: #{$tutor-error-100};
   --tutor-button-destructive-soft-hover: #{$tutor-error-200};
   --tutor-button-destructive-soft-focused: #{$tutor-error-100};
-  --tutor-button-secondary: #{$tutor-gray-600};
-  --tutor-button-secondary-hover: #{$tutor-gray-700};
-  --tutor-button-secondary-focused: #{$tutor-gray-600};
+  --tutor-button-success: #{$tutor-success-500};
+  --tutor-button-success-hover: #{$tutor-success-600};
+  --tutor-button-success-focused: #{$tutor-success-500};
+  --tutor-button-secondary: #{$tutor-gray-700};
+  --tutor-button-secondary-hover: #{$tutor-gray-600};
+  --tutor-button-secondary-focused: #{$tutor-gray-700};
   --tutor-button-outline-inverse: #{$tutor-gray-950};
   --tutor-button-outline-hover: #{$tutor-gray-700};
   --tutor-button-outline-focused-inverse: #{$tutor-gray-950};
   --tutor-button-ghost-hover: #{$tutor-gray-700};
   --tutor-button-caution: #{$tutor-yellow-400};
-  --tutor-button-success: #{$tutor-success-600};
-  --tutor-button-success-hover: #{$tutor-success-700};
-  --tutor-button-success-focused: #{$tutor-success-600};
 
   // =============================================================================
   // BORDER COLORS
   // =============================================================================
 
-  --tutor-border-idle: #{$tutor-gray-800};
+  --tutor-border-idle: #{$tutor-gray-750};
   --tutor-border-hover: #{$tutor-gray-700};
+  --tutor-border-tertiary: #{$tutor-gray-600};
   --tutor-border-inverse: #{$tutor-gray-700};
   --tutor-border-brand: #{$tutor-brand-600};
   --tutor-border-brand-secondary: #{$tutor-gray-750};
-  --tutor-border-brand-tertiary: #{$tutor-gray-700};
+  --tutor-border-brand-tertiary: #{$tutor-brand-700};
   --tutor-border-dark: #{$tutor-gray-700};
   --tutor-border-success: #{$tutor-success-300};
-  --tutor-border-success-secondary: #{$tutor-success-700};
+  --tutor-border-success-secondary: #{$tutor-success-600};
   --tutor-border-warning: #{$tutor-warning-200};
   --tutor-border-warning-secondary: #{$tutor-warning-600};
   --tutor-border-warning-tertiary: #{$tutor-warning-400};
   --tutor-border-error: #{$tutor-error-300};
-  --tutor-border-error-secondary: #{$tutor-error-700};
-  --tutor-border-exception6: #{$tutor-exception-5};
+  --tutor-border-error-secondary: #{$tutor-error-600};
   --tutor-border-error-tertiary: #{$tutor-error-400};
-  --tutor-border-tertiary: #{$tutor-gray-400};
+  --tutor-border-exception6: #{$tutor-exception-5};
 
   // =============================================================================
   // TAB COLORS
   // =============================================================================
 
   --tutor-tab-sidebar-l2: #{$tutor-gray-1};
   --tutor-tab-sidebar-l2-hover: #{$tutor-gray-750};
-  --tutor-tab-sidebar-l2-active: #{$tutor-gray-900};
+  --tutor-tab-sidebar-l2-active: #{$tutor-gray-800};
   --tutor-tab-l3-active: #{$tutor-gray-900};
-  --tutor-tab-l3-active-hover: #{$tutor-gray-800};
-  --tutor-tab-l3: #{$tutor-brand-950};
+  --tutor-tab-l3-active-hover: #{$tutor-gray-750};
+  --tutor-tab-l3: #{$tutor-gray-750};
   --tutor-tab-l3-hover: #{$tutor-gray-700};
+  --tutor-tab-sidebar-l4-hover: #{$tutor-gray-750};
+  --tutor-tab-sidebar-l4-active: #{$tutor-gray-750};
 
   // =============================================================================
   // ACTION COLORS
   // =============================================================================
 
   --tutor-actions-success-primary: #{$tutor-success-600};
   --tutor-actions-success-secondary: #{$tutor-success-200};
-  --tutor-actions-success-tertiary: #{$tutor-success-950};
+  --tutor-actions-success-tertiary: #{$tutor-gray-700};
+  --tutor-actions-success-exception: #{$tutor-cyan-950};
   --tutor-actions-warning-primary: #{$tutor-warning-400};
-  --tutor-actions-warning-secondary: #{$tutor-warning-950};
+  --tutor-actions-warning-secondary: #{$tutor-gray-700};
   --tutor-actions-warning-tertiary: #{$tutor-warning-50};
-  --tutor-actions-brand-primary: #{$tutor-brand-600};
+  --tutor-actions-warning-exception: #{$tutor-orange-50};
+  --tutor-actions-brand-primary: #{$tutor-brand-500};
   --tutor-actions-brand-secondary: #{$tutor-brand-950};
   --tutor-actions-brand-tertiary: #{$tutor-brand-950};
-  --tutor-actions-gray-empty: #{$tutor-gray-750};
+  --tutor-actions-gray-empty: #{$tutor-gray-800};
   --tutor-actions-gray-secondary: #{$tutor-gray-900};
   --tutor-actions-gray-tertiary: #{$tutor-gray-800};
   --tutor-actions-critical-primary: #{$tutor-error-500};
-  --tutor-actions-critical-secondary: #{$tutor-error-950};
+  --tutor-actions-critical-secondary: #{$tutor-gray-700};
   --tutor-actions-exception3-highlight: #{$tutor-exception-3};
   --tutor-actions-caution: #{$tutor-yellow-400};
   --tutor-actions-caution-secondary: #{$tutor-yellow-100};
   --tutor-actions-inverse: #{$tutor-gray-1};
-  --tutor-actions-exception5: #{$tutor-exception-5};
+  --tutor-actions-exception5: #{$tutor-exception-6};
   --tutor-actions-exception6: #{$tutor-exception-6};
 
   // =============================================================================