mtrl 0.2.5 → 0.2.7

package/src/styles/abstract/_theme.scss

@@ -48,8 +48,16 @@ $mtrl-sys-shape: (
   @return var(--#{$prefix}-sys-color-#{$key}-rgb);
 }
 
+/**
+ * Creates a color with alpha transparency using RGB values
+ * This version uses string.unquote to preserve the rgba function correctly
+ * @param {String} $key - Color token name
+ * @param {Number} $opacity - Opacity value (0-1)
+ * @return {String} rgba CSS function with variable
+ */
 @function alpha($key, $opacity) {
-  @return rgba(var(--#{$prefix}-sys-color-#{$key}-rgb), $opacity);
+  // #{'...'} prevents SASS from interpreting rgba as a SASS function
+  @return #{'rgba(var(--#{$prefix}-sys-color-#{$key}-rgb), #{$opacity})'};
 }
 
 @function state($key) {
@@ -70,41 +78,93 @@ $mtrl-sys-shape: (
   --#{$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;
+
+  // Status 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;
+  
+  --#{$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;
+  
+  --#{$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;
+  
+  --#{$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;
 
   // 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-variant: #CAC4D0;
   --#{$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;
 }
 
 @mixin light-theme {
@@ -112,41 +172,93 @@ $mtrl-sys-shape: (
   --#{$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;
+
+  // Status 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;
+  
+  --#{$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;
+  
+  --#{$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;
+  
+  --#{$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;
 
   // 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-variant: #49454F;
   --#{$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;
 }
 
 // Auto dark mode based on system preference

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();
+  }
+}