mtrl 0.2.6 → 0.2.8

package/src/styles/main.scss

@@ -1,32 +1,17 @@
 // src/styles/main.scss
 
+// Import Sass modules
+@use 'sass:map';
+@use 'sass:list' as sasslist;
+@use 'sass:math';
+
 // Abstract layer
 @use 'abstract/base';
-@use 'abstract/variables';
-@use 'abstract/functions';
-@use 'abstract/mixins';
-@use 'abstract/theme';
-
-// Themes
-@use 'themes/index';
+@use 'abstract/variables' as v;
+@use 'abstract/functions' as f;
+@use 'abstract/mixins' as m;
+@use 'abstract/theme' as t;
 
-// Reset
-@use 'base/reset';
-@use 'base/typography';
-
-// Components
-@use '../components/button/styles';
-@use '../components/checkbox/styles';
-@use '../components/container/styles';
-@use '../components/list/styles';
-@use '../components/menu/styles';
-@use '../components/navigation/styles';
-@use '../components/snackbar/styles';
-@use '../components/switch/styles';
-@use '../components/textfield/styles';
-
-
-@use '../core/build/ripple/ripple';
 
 // Utilities
 @use 'utilities/spacing';
@@ -35,41 +20,105 @@
 @use 'utilities/flexbox';
 @use 'utilities/typography';
 
+// Themes
+@use 'themes/index';
+
+// Reset
+@use 'base/reset';
+//@use 'base/typography';
+
+// Components
+@use './components/textfield' as textfield;
+@use './components/badge' as badge;
+@use './components/bottom-app-bar' as bottom-app-bar;
+@use './components/menu' as menu;
+@use './components/slider' as slider;
+@use './components/switch' as switch;
+@use './components/tabs' as tabs;
+@use './components/top-app-bar' as top-app-bar;
+
+@use '../components/styles/button' as button;
+@use '../components/styles/fab' as fab;
+@use '../components/styles/extended-fab' as extended-fab;
+@use '../components/styles/segmented-button' as segmented-button;
+@use '../components/styles/card' as card;
+@use '../components/styles/carousel' as carousel;
+@use '../components/styles/checkbox' as checkbox;
+@use '../components/styles/chip' as chip;
+@use '../components/styles/datepicker' as datepicker;
+@use '../components/styles/dialog' as dialog;
+@use '../components/styles/divider' as divider;
+
+@use '../components/styles/progress' as progress;
+
+@use '../components/styles/radios' as radios;
+@use '../components/styles/timepicker' as timepicker;
+@use '../components/styles/search' as search;
+
+@use '../components/styles/snackbar' as snackbar;
+@use '../components/styles/navigation' as navigation;
+@use '../components/styles/list' as list;
+
+@use '../core/build/ripple';
+
 // Initialize theme system
 :root {
   // Apply the base theme CSS variables
-  @include theme.light-theme;
+  @include t.light-theme;
 
-  // State layer variables
-  @each $key, $value in theme.$mtrl-sys-state {
-    --#{base.$prefix}-sys-state-#{$key}: #{$value};
-  }
+  // State layer variables - accessing individual values
+  --#{base.$prefix}-sys-state-hover-state-layer-opacity: #{v.state('hover-state-layer-opacity')};
+  --#{base.$prefix}-sys-state-focus-state-layer-opacity: #{v.state('focus-state-layer-opacity')};
+  --#{base.$prefix}-sys-state-pressed-state-layer-opacity: #{v.state('pressed-state-layer-opacity')};
+  --#{base.$prefix}-sys-state-dragged-state-layer-opacity: #{v.state('dragged-state-layer-opacity')};
   
-  // Motion variables
-  @each $key, $value in theme.$mtrl-sys-motion {
-    --#{base.$prefix}-sys-motion-#{$key}: #{$value};
-  }
-
-  // Shape variables
-  @each $key, $value in theme.$mtrl-sys-shape {
-    --#{base.$prefix}-sys-shape-#{$key}: #{$value};
-  }
+  // Motion variables - accessing individual values
+  --#{base.$prefix}-sys-motion-duration-short1: #{v.motion('duration-short1')};
+  --#{base.$prefix}-sys-motion-duration-short2: #{v.motion('duration-short2')};
+  --#{base.$prefix}-sys-motion-duration-short3: #{v.motion('duration-short3')};
+  --#{base.$prefix}-sys-motion-duration-short4: #{v.motion('duration-short4')};
+  --#{base.$prefix}-sys-motion-duration-medium1: #{v.motion('duration-medium1')};
+  --#{base.$prefix}-sys-motion-duration-medium2: #{v.motion('duration-medium2')};
+  --#{base.$prefix}-sys-motion-duration-long1: #{v.motion('duration-long1')};
+  --#{base.$prefix}-sys-motion-duration-long2: #{v.motion('duration-long2')};
+  --#{base.$prefix}-sys-motion-easing-standard: #{v.motion('easing-standard')};
+  --#{base.$prefix}-sys-motion-easing-standard-accelerate: #{v.motion('easing-standard-accelerate')};
+  --#{base.$prefix}-sys-motion-easing-standard-decelerate: #{v.motion('easing-standard-decelerate')};
+  --#{base.$prefix}-sys-motion-easing-emphasized: #{v.motion('easing-emphasized')};
+  --#{base.$prefix}-sys-motion-easing-emphasized-accelerate: #{v.motion('easing-emphasized-accelerate')};
+  --#{base.$prefix}-sys-motion-easing-emphasized-decelerate: #{v.motion('easing-emphasized-decelerate')};
+
+  // Shape variables - accessing individual values
+  --#{base.$prefix}-sys-shape-none: #{v.shape('none')};
+  --#{base.$prefix}-sys-shape-extra-tiny: #{v.shape('extra-tiny')};
+  --#{base.$prefix}-sys-shape-tiny: #{v.shape('tiny')};
+  --#{base.$prefix}-sys-shape-extra-small: #{v.shape('extra-small')};
+  --#{base.$prefix}-sys-shape-small: #{v.shape('small')};
+  --#{base.$prefix}-sys-shape-medium: #{v.shape('medium')};
+  --#{base.$prefix}-sys-shape-large: #{v.shape('large')};
+  --#{base.$prefix}-sys-shape-extra-large: #{v.shape('extra-large')};
+  --#{base.$prefix}-sys-shape-full: #{v.shape('full')};
+  --#{base.$prefix}-sys-shape-pill: #{v.shape('pill')};
   
-  // Typography
-  @each $scale, $properties in variables.$typescale {
-    --#{base.$prefix}-sys-typescale-#{$scale}-font-family-name: #{nth(map-get($properties, font-family), 1)};
-    --#{base.$prefix}-sys-typescale-#{$scale}-font-family-fallback: #{if(length(map-get($properties, font-family)) > 1, nth(map-get($properties, font-family), 2), 'sans-serif')};
-    --#{base.$prefix}-sys-typescale-#{$scale}-font-size: #{map-get($properties, font-size)};
-    --#{base.$prefix}-sys-typescale-#{$scale}-line-height: #{map-get($properties, line-height)};
-    --#{base.$prefix}-sys-typescale-#{$scale}-letter-spacing: #{map-get($properties, letter-spacing)};
-    --#{base.$prefix}-sys-typescale-#{$scale}-font-weight: #{map-get($properties, font-weight)};
+  // Typography - extracting individual properties
+  @each $scale, $properties in v.$typescale {
+    $font-family: map.get($properties, 'font-family');
+    $primary-font: sasslist.nth($font-family, 1);
+    $fallback-font: if(sasslist.length($font-family) > 1, sasslist.nth($font-family, 2), 'sans-serif');
+    
+    --#{base.$prefix}-sys-typescale-#{$scale}-font-family-name: #{$primary-font};
+    --#{base.$prefix}-sys-typescale-#{$scale}-font-family-fallback: #{$fallback-font};
+    --#{base.$prefix}-sys-typescale-#{$scale}-font-size: #{map.get($properties, 'font-size')};
+    --#{base.$prefix}-sys-typescale-#{$scale}-line-height: #{map.get($properties, 'line-height')};
+    --#{base.$prefix}-sys-typescale-#{$scale}-letter-spacing: #{map.get($properties, 'letter-spacing')};
+    --#{base.$prefix}-sys-typescale-#{$scale}-font-weight: #{map.get($properties, 'font-weight')};
   }
 }
 
 // Dark mode support
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    @include theme.dark-theme;
+    @include t.dark-theme;
   }
 }
 
@@ -86,7 +135,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   
-  @include mixins.motion-transition(background-color, color);
+  @include m.motion-transition(background-color, color);
 }
 
 // Ensure links have the correct contrast
@@ -114,7 +163,7 @@ a {
 html {
   scroll-behavior: smooth;
   
-  @include mixins.reduced-motion {
+  @include m.reduced-motion {
     scroll-behavior: auto;
   }
 }

package/src/styles/themes/_autumn.scss

@@ -40,6 +40,24 @@
   --#{$prefix}-sys-color-outline: #85736C;
   --#{$prefix}-sys-color-outline-variant: #D7C1BA;
 
+  // Success colors
+  --#{$prefix}-sys-color-success: #85CFA9;
+  --#{$prefix}-sys-color-success-rgb: 133, 207, 169;
+  --#{$prefix}-sys-color-on-success: #00392D;
+  --#{$prefix}-sys-color-on-success-rgb: 0, 57, 45;
+  
+  // Warning colors
+  --#{$prefix}-sys-color-warning: #FFB95C;
+  --#{$prefix}-sys-color-warning-rgb: 255, 185, 92;
+  --#{$prefix}-sys-color-on-warning: #3F2200;
+  --#{$prefix}-sys-color-on-warning-rgb: 63, 34, 0;
+  
+  // Info colors
+  --#{$prefix}-sys-color-info: #99CBFF;
+  --#{$prefix}-sys-color-info-rgb: 153, 203, 255;
+  --#{$prefix}-sys-color-on-info: #003060;
+  --#{$prefix}-sys-color-on-info-rgb: 0, 48, 96;
+
   &[data-theme-mode="dark"] {
     // Key colors
     --#{$prefix}-sys-color-primary: #DDB995; // Softer brown
@@ -62,6 +80,9 @@
     --#{$prefix}-sys-color-quaternary-container: #644900;
     --#{$prefix}-sys-color-on-quaternary-container: #FFDF8A;
 
+    // Include status colors for dark theme
+    @include status-colors-dark();
+
     // Neutral colors
     --#{$prefix}-sys-color-surface: #201A17;
     --#{$prefix}-sys-color-surface-dim: #17120F;

package/src/styles/themes/_base-theme.scss

@@ -8,6 +8,67 @@
   }
 }
 
+// Common status colors that should be available in all themes
+@mixin status-colors-light() {
+  // Error colors
+  --#{$prefix}-sys-color-error: #B3261E;
+  --#{$prefix}-sys-color-error-rgb: 179, 38, 30;
+  --#{$prefix}-sys-color-on-error: #FFFFFF;
+  --#{$prefix}-sys-color-on-error-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-error-container: #F9DEDC;
+  --#{$prefix}-sys-color-error-container-rgb: 249, 222, 220;
+  --#{$prefix}-sys-color-on-error-container: #410E0B;
+  --#{$prefix}-sys-color-on-error-container-rgb: 65, 14, 11;
+  
+  // Success colors
+  --#{$prefix}-sys-color-success: #007B5A;
+  --#{$prefix}-sys-color-success-rgb: 0, 123, 90;
+  --#{$prefix}-sys-color-on-success: #FFFFFF;
+  --#{$prefix}-sys-color-on-success-rgb: 255, 255, 255;
+  
+  // Warning colors
+  --#{$prefix}-sys-color-warning: #DD6D06;
+  --#{$prefix}-sys-color-warning-rgb: 221, 109, 6;
+  --#{$prefix}-sys-color-on-warning: #FFFFFF;
+  --#{$prefix}-sys-color-on-warning-rgb: 255, 255, 255;
+  
+  // Info colors
+  --#{$prefix}-sys-color-info: #0061A4;
+  --#{$prefix}-sys-color-info-rgb: 0, 97, 164;
+  --#{$prefix}-sys-color-on-info: #FFFFFF;
+  --#{$prefix}-sys-color-on-info-rgb: 255, 255, 255;
+}
+
+@mixin status-colors-dark() {
+  // Error colors
+  --#{$prefix}-sys-color-error: #F2B8B5;
+  --#{$prefix}-sys-color-error-rgb: 242, 184, 181;
+  --#{$prefix}-sys-color-on-error: #601410;
+  --#{$prefix}-sys-color-on-error-rgb: 96, 20, 16;
+  --#{$prefix}-sys-color-error-container: #8C1D18;
+  --#{$prefix}-sys-color-error-container-rgb: 140, 29, 24;
+  --#{$prefix}-sys-color-on-error-container: #F9DEDC;
+  --#{$prefix}-sys-color-on-error-container-rgb: 249, 222, 220;
+  
+  // Success colors
+  --#{$prefix}-sys-color-success: #85CFA9;
+  --#{$prefix}-sys-color-success-rgb: 133, 207, 169;
+  --#{$prefix}-sys-color-on-success: #00392D;
+  --#{$prefix}-sys-color-on-success-rgb: 0, 57, 45;
+  
+  // Warning colors
+  --#{$prefix}-sys-color-warning: #FFB95C;
+  --#{$prefix}-sys-color-warning-rgb: 255, 185, 92;
+  --#{$prefix}-sys-color-on-warning: #3F2200;
+  --#{$prefix}-sys-color-on-warning-rgb: 63, 34, 0;
+  
+  // Info colors
+  --#{$prefix}-sys-color-info: #99CBFF;
+  --#{$prefix}-sys-color-info-rgb: 153, 203, 255;
+  --#{$prefix}-sys-color-on-info: #003060;
+  --#{$prefix}-sys-color-on-info-rgb: 0, 48, 96;
+}
+
 %theme-base {
   // Common properties for all themes
   --#{$prefix}-sys-typescale-label-large-font-family-name: "Roboto";

package/src/styles/themes/_baseline.scss

@@ -6,41 +6,70 @@
 @mixin baseline-light-variables {
   // Key colors
   --#{$prefix}-sys-color-primary: #6750A4;
+  --#{$prefix}-sys-color-primary-rgb: 103, 80, 164;
   --#{$prefix}-sys-color-on-primary: #FFFFFF;
+  --#{$prefix}-sys-color-on-primary-rgb: 255, 255, 255;
   --#{$prefix}-sys-color-primary-container: #EADDFF;
+  --#{$prefix}-sys-color-primary-container-rgb: 234, 221, 255;
   --#{$prefix}-sys-color-on-primary-container: #21005D;
+  --#{$prefix}-sys-color-on-primary-container-rgb: 33, 0, 93;
   
   --#{$prefix}-sys-color-secondary: #625B71;
+  --#{$prefix}-sys-color-secondary-rgb: 98, 91, 113;
   --#{$prefix}-sys-color-on-secondary: #FFFFFF;
+  --#{$prefix}-sys-color-on-secondary-rgb: 255, 255, 255;
   --#{$prefix}-sys-color-secondary-container: #E8DEF8;
+  --#{$prefix}-sys-color-secondary-container-rgb: 232, 222, 248;
   --#{$prefix}-sys-color-on-secondary-container: #1D192B;
+  --#{$prefix}-sys-color-on-secondary-container-rgb: 29, 25, 43;
   
   --#{$prefix}-sys-color-tertiary: #7D5260;
+  --#{$prefix}-sys-color-tertiary-rgb: 125, 82, 96;
   --#{$prefix}-sys-color-on-tertiary: #FFFFFF;
+  --#{$prefix}-sys-color-on-tertiary-rgb: 255, 255, 255;
   --#{$prefix}-sys-color-tertiary-container: #FFD8E4;
+  --#{$prefix}-sys-color-tertiary-container-rgb: 255, 216, 228;
   --#{$prefix}-sys-color-on-tertiary-container: #31111D;
+  --#{$prefix}-sys-color-on-tertiary-container-rgb: 49, 17, 29;
 
   // Neutral colors
   --#{$prefix}-sys-color-surface: #FFFBFE;
+  --#{$prefix}-sys-color-surface-rgb: 255, 251, 254;
   --#{$prefix}-sys-color-surface-dim: #DED8E1;
+  --#{$prefix}-sys-color-surface-dim-rgb: 222, 216, 225;
   --#{$prefix}-sys-color-surface-bright: #FFF8F7;
+  --#{$prefix}-sys-color-surface-bright-rgb: 255, 248, 247;
   --#{$prefix}-sys-color-surface-container-lowest: #FFFFFF;
+  --#{$prefix}-sys-color-surface-container-lowest-rgb: 255, 255, 255;
   --#{$prefix}-sys-color-surface-container-low: #F7F2FA;
+  --#{$prefix}-sys-color-surface-container-low-rgb: 247, 242, 250;
   --#{$prefix}-sys-color-surface-container: #F3EDF7;
+  --#{$prefix}-sys-color-surface-container-rgb: 243, 237, 247;
   --#{$prefix}-sys-color-surface-container-high: #ECE6F0;
+  --#{$prefix}-sys-color-surface-container-high-rgb: 236, 230, 240;
   --#{$prefix}-sys-color-surface-container-highest: #E6E0E9;
+  --#{$prefix}-sys-color-surface-container-highest-rgb: 230, 224, 233;
   
   --#{$prefix}-sys-color-on-surface: #1C1B1F;
+  --#{$prefix}-sys-color-on-surface-rgb: 28, 27, 31;
   --#{$prefix}-sys-color-on-surface-variant: #49454F;
+  --#{$prefix}-sys-color-on-surface-variant-rgb: 73, 69, 79;
   
   // Additional colors
   --#{$prefix}-sys-color-outline: #79747E;
+  --#{$prefix}-sys-color-outline-rgb: 121, 116, 126;
   --#{$prefix}-sys-color-outline-variant: #CAC4D0;
+  --#{$prefix}-sys-color-outline-variant-rgb: 202, 196, 208;
   --#{$prefix}-sys-color-shadow: #000000;
+  --#{$prefix}-sys-color-shadow-rgb: 0, 0, 0;
   --#{$prefix}-sys-color-scrim: #000000;
+  --#{$prefix}-sys-color-scrim-rgb: 0, 0, 0;
   --#{$prefix}-sys-color-inverse-surface: #313033;
+  --#{$prefix}-sys-color-inverse-surface-rgb: 49, 48, 51;
   --#{$prefix}-sys-color-inverse-on-surface: #F4EFF4;
+  --#{$prefix}-sys-color-inverse-on-surface-rgb: 244, 239, 244;
   --#{$prefix}-sys-color-inverse-primary: #D0BCFF;
+  --#{$prefix}-sys-color-inverse-primary-rgb: 208, 188, 255;
 
   // State layers
   --#{$prefix}-sys-state-hover-state-layer-opacity: 0.08;
@@ -53,41 +82,70 @@
 @mixin baseline-dark-variables {
   // Key colors
   --#{$prefix}-sys-color-primary: #D0BCFF;
+  --#{$prefix}-sys-color-primary-rgb: 208, 188, 255;
   --#{$prefix}-sys-color-on-primary: #381E72;
+  --#{$prefix}-sys-color-on-primary-rgb: 56, 30, 114;
   --#{$prefix}-sys-color-primary-container: #4F378B;
+  --#{$prefix}-sys-color-primary-container-rgb: 79, 55, 139;
   --#{$prefix}-sys-color-on-primary-container: #EADDFF;
+  --#{$prefix}-sys-color-on-primary-container-rgb: 234, 221, 255;
   
   --#{$prefix}-sys-color-secondary: #CCC2DC;
+  --#{$prefix}-sys-color-secondary-rgb: 204, 194, 220;
   --#{$prefix}-sys-color-on-secondary: #332D41;
+  --#{$prefix}-sys-color-on-secondary-rgb: 51, 45, 65;
   --#{$prefix}-sys-color-secondary-container: #4A4458;
+  --#{$prefix}-sys-color-secondary-container-rgb: 74, 68, 88;
   --#{$prefix}-sys-color-on-secondary-container: #E8DEF8;
+  --#{$prefix}-sys-color-on-secondary-container-rgb: 232, 222, 248;
   
   --#{$prefix}-sys-color-tertiary: #EFB8C8;
+  --#{$prefix}-sys-color-tertiary-rgb: 239, 184, 200;
   --#{$prefix}-sys-color-on-tertiary: #492532;
+  --#{$prefix}-sys-color-on-tertiary-rgb: 73, 37, 50;
   --#{$prefix}-sys-color-tertiary-container: #633B48;
+  --#{$prefix}-sys-color-tertiary-container-rgb: 99, 59, 72;
   --#{$prefix}-sys-color-on-tertiary-container: #FFD8E4;
+  --#{$prefix}-sys-color-on-tertiary-container-rgb: 255, 216, 228;
 
   // Neutral colors
   --#{$prefix}-sys-color-surface: #1C1B1F;
+  --#{$prefix}-sys-color-surface-rgb: 28, 27, 31;
   --#{$prefix}-sys-color-surface-dim: #141218;
+  --#{$prefix}-sys-color-surface-dim-rgb: 20, 18, 24;
   --#{$prefix}-sys-color-surface-bright: #3B383D;
+  --#{$prefix}-sys-color-surface-bright-rgb: 59, 56, 61;
   --#{$prefix}-sys-color-surface-container-lowest: #0F0D13;
+  --#{$prefix}-sys-color-surface-container-lowest-rgb: 15, 13, 19;
   --#{$prefix}-sys-color-surface-container-low: #1D1B20;
+  --#{$prefix}-sys-color-surface-container-low-rgb: 29, 27, 32;
   --#{$prefix}-sys-color-surface-container: #211F26;
+  --#{$prefix}-sys-color-surface-container-rgb: 33, 31, 38;
   --#{$prefix}-sys-color-surface-container-high: #2B2930;
+  --#{$prefix}-sys-color-surface-container-high-rgb: 43, 41, 48;
   --#{$prefix}-sys-color-surface-container-highest: #36343B;
+  --#{$prefix}-sys-color-surface-container-highest-rgb: 54, 52, 59;
   
   --#{$prefix}-sys-color-on-surface: #E6E1E5;
+  --#{$prefix}-sys-color-on-surface-rgb: 230, 225, 229;
   --#{$prefix}-sys-color-on-surface-variant: #CAC4D0;
+  --#{$prefix}-sys-color-on-surface-variant-rgb: 202, 196, 208;
   
   // Additional colors
   --#{$prefix}-sys-color-outline: #938F99;
+  --#{$prefix}-sys-color-outline-rgb: 147, 143, 153;
   --#{$prefix}-sys-color-outline-variant: #444746;
+  --#{$prefix}-sys-color-outline-variant-rgb: 68, 71, 70;
   --#{$prefix}-sys-color-shadow: #000000;
+  --#{$prefix}-sys-color-shadow-rgb: 0, 0, 0;
   --#{$prefix}-sys-color-scrim: #000000;
+  --#{$prefix}-sys-color-scrim-rgb: 0, 0, 0;
   --#{$prefix}-sys-color-inverse-surface: #E6E1E5;
+  --#{$prefix}-sys-color-inverse-surface-rgb: 230, 225, 229;
   --#{$prefix}-sys-color-inverse-on-surface: #313033;
+  --#{$prefix}-sys-color-inverse-on-surface-rgb: 49, 48, 51;
   --#{$prefix}-sys-color-inverse-primary: #6750A4;
+  --#{$prefix}-sys-color-inverse-primary-rgb: 103, 80, 164;
 }
 
 // Apply baseline light theme to :root by default

package/src/styles/themes/_bluekhaki.scss

@@ -0,0 +1,125 @@
+// src/styles/themes/_bluekhaki.scss
+@use '../abstract/base' as *;
+@use 'base-theme' as *;
+
+@include create-theme('bluekhaki') {
+  // Key colors based on blue and khaki combination
+  --#{$prefix}-sys-color-primary: #29375D; // Deep blue as primary
+  --#{$prefix}-sys-color-primary-rgb: 41, 55, 93;
+  --#{$prefix}-sys-color-on-primary: #FFFFFF;
+  --#{$prefix}-sys-color-on-primary-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-primary-container: #D1E4FF;
+  --#{$prefix}-sys-color-primary-container-rgb: 209, 228, 255;
+  --#{$prefix}-sys-color-on-primary-container: #00174A;
+  --#{$prefix}-sys-color-on-primary-container-rgb: 0, 23, 74;
+  
+  --#{$prefix}-sys-color-secondary: #B5A27D; // Khaki as secondary
+  --#{$prefix}-sys-color-secondary-rgb: 181, 162, 125;
+  --#{$prefix}-sys-color-on-secondary: #FFFFFF;
+  --#{$prefix}-sys-color-on-secondary-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-secondary-container: #F7EEDD;
+  --#{$prefix}-sys-color-secondary-container-rgb: 247, 238, 221;
+  --#{$prefix}-sys-color-on-secondary-container: #3D341D;
+  --#{$prefix}-sys-color-on-secondary-container-rgb: 61, 52, 29;
+  
+  --#{$prefix}-sys-color-tertiary: #4F6E8F; // Muted blue as tertiary
+  --#{$prefix}-sys-color-tertiary-rgb: 79, 110, 143;
+  --#{$prefix}-sys-color-on-tertiary: #FFFFFF;
+  --#{$prefix}-sys-color-on-tertiary-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-tertiary-container: #D5E4F7;
+  --#{$prefix}-sys-color-tertiary-container-rgb: 213, 228, 247;
+  --#{$prefix}-sys-color-on-tertiary-container: #0D2845;
+  --#{$prefix}-sys-color-on-tertiary-container-rgb: 13, 40, 69;
+
+  // Neutral colors with subtle blue undertones
+  --#{$prefix}-sys-color-surface: #FAFCFF;
+  --#{$prefix}-sys-color-surface-rgb: 250, 252, 255;
+  --#{$prefix}-sys-color-surface-dim: #DCE3EF;
+  --#{$prefix}-sys-color-surface-dim-rgb: 220, 227, 239;
+  --#{$prefix}-sys-color-surface-bright: #FAFCFF;
+  --#{$prefix}-sys-color-surface-bright-rgb: 250, 252, 255;
+  --#{$prefix}-sys-color-surface-container-lowest: #FFFFFF;
+  --#{$prefix}-sys-color-surface-container-lowest-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-surface-container-low: #F5F7FA;
+  --#{$prefix}-sys-color-surface-container-low-rgb: 245, 247, 250;
+  --#{$prefix}-sys-color-surface-container: #EFF2F6;
+  --#{$prefix}-sys-color-surface-container-rgb: 239, 242, 246;
+  --#{$prefix}-sys-color-surface-container-high: #E9ECF0;
+  --#{$prefix}-sys-color-surface-container-high-rgb: 233, 236, 240;
+  --#{$prefix}-sys-color-surface-container-highest: #E2E6EA;
+  --#{$prefix}-sys-color-surface-container-highest-rgb: 226, 230, 234;
+  
+  --#{$prefix}-sys-color-on-surface: #191C1F;
+  --#{$prefix}-sys-color-on-surface-rgb: 25, 28, 31;
+  --#{$prefix}-sys-color-on-surface-variant: #42474E;
+  --#{$prefix}-sys-color-on-surface-variant-rgb: 66, 71, 78;
+  
+  --#{$prefix}-sys-color-outline: #73787F;
+  --#{$prefix}-sys-color-outline-rgb: 115, 120, 127;
+  --#{$prefix}-sys-color-outline-variant: #C4C8CF;
+  --#{$prefix}-sys-color-outline-variant-rgb: 196, 200, 207;
+
+  // Include status colors for light theme
+  @include status-colors-light();
+
+  &[data-theme-mode="dark"] {
+    // Key colors for dark mode
+    --#{$prefix}-sys-color-primary: #A6C8FF; // Lighter blue
+    --#{$prefix}-sys-color-primary-rgb: 166, 200, 255;
+    --#{$prefix}-sys-color-on-primary: #002E6F;
+    --#{$prefix}-sys-color-on-primary-rgb: 0, 46, 111;
+    --#{$prefix}-sys-color-primary-container: #1A4180;
+    --#{$prefix}-sys-color-primary-container-rgb: 26, 65, 128;
+    --#{$prefix}-sys-color-on-primary-container: #D1E4FF;
+    --#{$prefix}-sys-color-on-primary-container-rgb: 209, 228, 255;
+    
+    --#{$prefix}-sys-color-secondary: #DBC497; // Lighter khaki
+    --#{$prefix}-sys-color-secondary-rgb: 219, 196, 151;
+    --#{$prefix}-sys-color-on-secondary: #3D341D;
+    --#{$prefix}-sys-color-on-secondary-rgb: 61, 52, 29;
+    --#{$prefix}-sys-color-secondary-container: #554A30;
+    --#{$prefix}-sys-color-secondary-container-rgb: 85, 74, 48;
+    --#{$prefix}-sys-color-on-secondary-container: #F7EEDD;
+    --#{$prefix}-sys-color-on-secondary-container-rgb: 247, 238, 221;
+    
+    --#{$prefix}-sys-color-tertiary: #B1C8EB; // Lighter muted blue
+    --#{$prefix}-sys-color-tertiary-rgb: 177, 200, 235;
+    --#{$prefix}-sys-color-on-tertiary: #1E3651;
+    --#{$prefix}-sys-color-on-tertiary-rgb: 30, 54, 81;
+    --#{$prefix}-sys-color-tertiary-container: #354B67;
+    --#{$prefix}-sys-color-tertiary-container-rgb: 53, 75, 103;
+    --#{$prefix}-sys-color-on-tertiary-container: #D5E4F7;
+    --#{$prefix}-sys-color-on-tertiary-container-rgb: 213, 228, 247;
+
+    // Neutral colors for dark mode
+    --#{$prefix}-sys-color-surface: #121518;
+    --#{$prefix}-sys-color-surface-rgb: 18, 21, 24;
+    --#{$prefix}-sys-color-surface-dim: #0E1115;
+    --#{$prefix}-sys-color-surface-dim-rgb: 14, 17, 21;
+    --#{$prefix}-sys-color-surface-bright: #2E3237;
+    --#{$prefix}-sys-color-surface-bright-rgb: 46, 50, 55;
+    --#{$prefix}-sys-color-surface-container-lowest: #0A0D10;
+    --#{$prefix}-sys-color-surface-container-lowest-rgb: 10, 13, 16;
+    --#{$prefix}-sys-color-surface-container-low: #171A1D;
+    --#{$prefix}-sys-color-surface-container-low-rgb: 23, 26, 29;
+    --#{$prefix}-sys-color-surface-container: #1B1E21;
+    --#{$prefix}-sys-color-surface-container-rgb: 27, 30, 33;
+    --#{$prefix}-sys-color-surface-container-high: #252829;
+    --#{$prefix}-sys-color-surface-container-high-rgb: 37, 40, 41;
+    --#{$prefix}-sys-color-surface-container-highest: #303234;
+    --#{$prefix}-sys-color-surface-container-highest-rgb: 48, 50, 52;
+    
+    --#{$prefix}-sys-color-on-surface: #E2E2E5;
+    --#{$prefix}-sys-color-on-surface-rgb: 226, 226, 229;
+    --#{$prefix}-sys-color-on-surface-variant: #C3C7CD;
+    --#{$prefix}-sys-color-on-surface-variant-rgb: 195, 199, 205;
+    
+    --#{$prefix}-sys-color-outline: #8D9297;
+    --#{$prefix}-sys-color-outline-rgb: 141, 146, 151;
+    --#{$prefix}-sys-color-outline-variant: #42474E;
+    --#{$prefix}-sys-color-outline-variant-rgb: 66, 71, 78;
+
+    // Include status colors for dark theme
+    @include status-colors-dark();
+  }
+}