mtrl 0.2.6 → 0.2.7

package/src/styles/themes/_material.scss

@@ -0,0 +1,125 @@
+// src/styles/themes/_material.scss
+@use '../abstract/base' as *;
+@use 'base-theme' as *;
+
+@include create-theme('material') {
+  // Key colors
+  --#{$prefix}-sys-color-primary: #6750A4;
+  --#{$prefix}-sys-color-primary-rgb: 100, 66, 214;
+  --#{$prefix}-sys-color-on-primary: #FFFFFF;
+  --#{$prefix}-sys-color-on-primary-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-primary-container: #9f86ff;
+  --#{$prefix}-sys-color-primary-container-rgb: 159, 134, 255;
+  --#{$prefix}-sys-color-on-primary-container: #1e0060;
+  --#{$prefix}-sys-color-on-primary-container-rgb: 30, 0, 96;
+  
+  --#{$prefix}-sys-color-secondary: #5d5d74;
+  --#{$prefix}-sys-color-secondary-rgb: 93, 93, 116;
+  --#{$prefix}-sys-color-on-secondary: #FFFFFF;
+  --#{$prefix}-sys-color-on-secondary-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-secondary-container: #dcdaf5;
+  --#{$prefix}-sys-color-secondary-container-rgb: 220, 218, 245;
+  --#{$prefix}-sys-color-on-secondary-container: #21182b;
+  --#{$prefix}-sys-color-on-secondary-container-rgb: 33, 24, 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: #f1d3f9;
+  --#{$prefix}-sys-color-tertiary-container-rgb: 241, 211, 249;
+  --#{$prefix}-sys-color-on-tertiary-container: #271430;
+  --#{$prefix}-sys-color-on-tertiary-container-rgb: 39, 20, 48;
+
+  // Neutral colors
+  --#{$prefix}-sys-color-surface: #fefbff;
+  --#{$prefix}-sys-color-surface-rgb: 254, 251, 255;
+  --#{$prefix}-sys-color-surface-dim: #e8e0e8;
+  --#{$prefix}-sys-color-surface-dim-rgb: 232, 224, 232;
+  --#{$prefix}-sys-color-surface-bright: #ffffff;
+  --#{$prefix}-sys-color-surface-bright-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-surface-container-lowest: #ffffff;
+  --#{$prefix}-sys-color-surface-container-lowest-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-surface-container-low: #f8f1f6;
+  --#{$prefix}-sys-color-surface-container-low-rgb: 248, 241, 246;
+  --#{$prefix}-sys-color-surface-container: #f2ecee;
+  --#{$prefix}-sys-color-surface-container-rgb: 242, 236, 238;
+  --#{$prefix}-sys-color-surface-container-high: #ece7e9;
+  --#{$prefix}-sys-color-surface-container-high-rgb: 236, 231, 233;
+  --#{$prefix}-sys-color-surface-container-highest: #e6e1e3;
+  --#{$prefix}-sys-color-surface-container-highest-rgb: 230, 225, 227;
+  
+  --#{$prefix}-sys-color-on-surface: #1c1b1d;
+  --#{$prefix}-sys-color-on-surface-rgb: 28, 27, 29;
+  --#{$prefix}-sys-color-on-surface-variant: #4d4256;
+  --#{$prefix}-sys-color-on-surface-variant-rgb: 77, 66, 86;
+  
+  --#{$prefix}-sys-color-outline: #787579;
+  --#{$prefix}-sys-color-outline-rgb: 120, 117, 121;
+  --#{$prefix}-sys-color-outline-variant: #cac4d0;
+  --#{$prefix}-sys-color-outline-variant-rgb: 202, 196, 208;
+
+  // Include status colors for light theme
+  @include status-colors-light();
+
+  &[data-theme-mode="dark"] {
+    // Key colors
+    --#{$prefix}-sys-color-primary: #cbbeff;
+    --#{$prefix}-sys-color-primary-rgb: 203, 190, 255;
+    --#{$prefix}-sys-color-on-primary: #340098;
+    --#{$prefix}-sys-color-on-primary-rgb: 52, 0, 152;
+    --#{$prefix}-sys-color-primary-container: #4b21bd;
+    --#{$prefix}-sys-color-primary-container-rgb: 75, 33, 189;
+    --#{$prefix}-sys-color-on-primary-container: #e9ddff;
+    --#{$prefix}-sys-color-on-primary-container-rgb: 233, 221, 255;
+    
+    --#{$prefix}-sys-color-secondary: #c2c0db;
+    --#{$prefix}-sys-color-secondary-rgb: 194, 192, 219;
+    --#{$prefix}-sys-color-on-secondary: #332d41;
+    --#{$prefix}-sys-color-on-secondary-rgb: 51, 45, 65;
+    --#{$prefix}-sys-color-secondary-container: #474459;
+    --#{$prefix}-sys-color-secondary-container-rgb: 71, 68, 89;
+    --#{$prefix}-sys-color-on-secondary-container: #e9e0f9;
+    --#{$prefix}-sys-color-on-secondary-container-rgb: 233, 224, 249;
+    
+    --#{$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: #ffd9e2;
+    --#{$prefix}-sys-color-on-tertiary-container-rgb: 255, 217, 226;
+
+    // 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;
+    
+    --#{$prefix}-sys-color-outline: #948f99;
+    --#{$prefix}-sys-color-outline-rgb: 148, 143, 153;
+    --#{$prefix}-sys-color-outline-variant: #444746;
+    --#{$prefix}-sys-color-outline-variant-rgb: 68, 71, 70;
+
+    // Include status colors for dark theme
+    @include status-colors-dark();
+  }
+}

package/src/styles/themes/_ocean.scss

@@ -35,6 +35,9 @@
   --#{$prefix}-sys-color-outline: #71787D;
   --#{$prefix}-sys-color-outline-variant: #C1C8CD;
 
+  // Include status colors for light theme
+  @include status-colors-light();
+
   &[data-theme-mode="dark"] {
     // Key colors
     --#{$prefix}-sys-color-primary: #8DCDFF;
@@ -67,5 +70,8 @@
     
     --#{$prefix}-sys-color-outline: #8B9297;
     --#{$prefix}-sys-color-outline-variant: #41484D;
+
+    // Include status colors for dark theme
+    @include status-colors-dark();
   }
 }

package/src/styles/themes/_sageivory.scss

@@ -0,0 +1,125 @@
+// src/styles/themes/_sageivory.scss
+@use '../abstract/base' as *;
+@use 'base-theme' as *;
+
+@include create-theme('sageivory') {
+  // Key colors based on sage green and ivory combination
+  --#{$prefix}-sys-color-primary: #7D8C73; // Sage green as primary
+  --#{$prefix}-sys-color-primary-rgb: 125, 140, 115;
+  --#{$prefix}-sys-color-on-primary: #FFFFFF;
+  --#{$prefix}-sys-color-on-primary-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-primary-container: #DFE8D6;
+  --#{$prefix}-sys-color-primary-container-rgb: 223, 232, 214;
+  --#{$prefix}-sys-color-on-primary-container: #2C3526;
+  --#{$prefix}-sys-color-on-primary-container-rgb: 44, 53, 38;
+  
+  --#{$prefix}-sys-color-secondary: #F0ECD5; // Ivory as secondary
+  --#{$prefix}-sys-color-secondary-rgb: 240, 236, 213;
+  --#{$prefix}-sys-color-on-secondary: #4C4935;
+  --#{$prefix}-sys-color-on-secondary-rgb: 76, 73, 53;
+  --#{$prefix}-sys-color-secondary-container: #F8F7EB;
+  --#{$prefix}-sys-color-secondary-container-rgb: 248, 247, 235;
+  --#{$prefix}-sys-color-on-secondary-container: #504D3B;
+  --#{$prefix}-sys-color-on-secondary-container-rgb: 80, 77, 59;
+  
+  --#{$prefix}-sys-color-tertiary: #A4AE98; // Light sage as tertiary
+  --#{$prefix}-sys-color-tertiary-rgb: 164, 174, 152;
+  --#{$prefix}-sys-color-on-tertiary: #FFFFFF;
+  --#{$prefix}-sys-color-on-tertiary-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-tertiary-container: #E7EEE0;
+  --#{$prefix}-sys-color-tertiary-container-rgb: 231, 238, 224;
+  --#{$prefix}-sys-color-on-tertiary-container: #3C4633;
+  --#{$prefix}-sys-color-on-tertiary-container-rgb: 60, 70, 51;
+
+  // Neutral colors with warm undertones
+  --#{$prefix}-sys-color-surface: #FBFCF8;
+  --#{$prefix}-sys-color-surface-rgb: 251, 252, 248;
+  --#{$prefix}-sys-color-surface-dim: #EDEFEA;
+  --#{$prefix}-sys-color-surface-dim-rgb: 237, 239, 234;
+  --#{$prefix}-sys-color-surface-bright: #FBFCF8;
+  --#{$prefix}-sys-color-surface-bright-rgb: 251, 252, 248;
+  --#{$prefix}-sys-color-surface-container-lowest: #FFFFFF;
+  --#{$prefix}-sys-color-surface-container-lowest-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-surface-container-low: #F5F6F2;
+  --#{$prefix}-sys-color-surface-container-low-rgb: 245, 246, 242;
+  --#{$prefix}-sys-color-surface-container: #EFF0EC;
+  --#{$prefix}-sys-color-surface-container-rgb: 239, 240, 236;
+  --#{$prefix}-sys-color-surface-container-high: #E9EAE6;
+  --#{$prefix}-sys-color-surface-container-high-rgb: 233, 234, 230;
+  --#{$prefix}-sys-color-surface-container-highest: #E3E4E0;
+  --#{$prefix}-sys-color-surface-container-highest-rgb: 227, 228, 224;
+  
+  --#{$prefix}-sys-color-on-surface: #1A1C17;
+  --#{$prefix}-sys-color-on-surface-rgb: 26, 28, 23;
+  --#{$prefix}-sys-color-on-surface-variant: #454741;
+  --#{$prefix}-sys-color-on-surface-variant-rgb: 69, 71, 65;
+  
+  --#{$prefix}-sys-color-outline: #75776E;
+  --#{$prefix}-sys-color-outline-rgb: 117, 119, 110;
+  --#{$prefix}-sys-color-outline-variant: #C5C7BE;
+  --#{$prefix}-sys-color-outline-variant-rgb: 197, 199, 190;
+
+  // Include status colors for light theme
+  @include status-colors-light();
+
+  &[data-theme-mode="dark"] {
+    // Key colors for dark mode
+    --#{$prefix}-sys-color-primary: #C3CCBA; // Lighter sage
+    --#{$prefix}-sys-color-primary-rgb: 195, 204, 186;
+    --#{$prefix}-sys-color-on-primary: #3C4933;
+    --#{$prefix}-sys-color-on-primary-rgb: 60, 73, 51;
+    --#{$prefix}-sys-color-primary-container: #576148;
+    --#{$prefix}-sys-color-primary-container-rgb: 87, 97, 72;
+    --#{$prefix}-sys-color-on-primary-container: #DFE8D6;
+    --#{$prefix}-sys-color-on-primary-container-rgb: 223, 232, 214;
+    
+    --#{$prefix}-sys-color-secondary: #EEEBDC; // Lighter ivory
+    --#{$prefix}-sys-color-secondary-rgb: 238, 235, 220;
+    --#{$prefix}-sys-color-on-secondary: #4C4935;
+    --#{$prefix}-sys-color-on-secondary-rgb: 76, 73, 53;
+    --#{$prefix}-sys-color-secondary-container: #65624C;
+    --#{$prefix}-sys-color-secondary-container-rgb: 101, 98, 76;
+    --#{$prefix}-sys-color-on-secondary-container: #F8F7EB;
+    --#{$prefix}-sys-color-on-secondary-container-rgb: 248, 247, 235;
+    
+    --#{$prefix}-sys-color-tertiary: #CBD4C0; // Lighter light sage
+    --#{$prefix}-sys-color-tertiary-rgb: 203, 212, 192;
+    --#{$prefix}-sys-color-on-tertiary: #3E4934;
+    --#{$prefix}-sys-color-on-tertiary-rgb: 62, 73, 52;
+    --#{$prefix}-sys-color-tertiary-container: #57624A;
+    --#{$prefix}-sys-color-tertiary-container-rgb: 87, 98, 74;
+    --#{$prefix}-sys-color-on-tertiary-container: #E7EEE0;
+    --#{$prefix}-sys-color-on-tertiary-container-rgb: 231, 238, 224;
+
+    // Neutral colors for dark mode
+    --#{$prefix}-sys-color-surface: #1A1C17;
+    --#{$prefix}-sys-color-surface-rgb: 26, 28, 23;
+    --#{$prefix}-sys-color-surface-dim: #12140F;
+    --#{$prefix}-sys-color-surface-dim-rgb: 18, 20, 15;
+    --#{$prefix}-sys-color-surface-bright: #363831;
+    --#{$prefix}-sys-color-surface-bright-rgb: 54, 56, 49;
+    --#{$prefix}-sys-color-surface-container-lowest: #0F110C;
+    --#{$prefix}-sys-color-surface-container-lowest-rgb: 15, 17, 12;
+    --#{$prefix}-sys-color-surface-container-low: #1A1C17;
+    --#{$prefix}-sys-color-surface-container-low-rgb: 26, 28, 23;
+    --#{$prefix}-sys-color-surface-container: #1E201B;
+    --#{$prefix}-sys-color-surface-container-rgb: 30, 32, 27;
+    --#{$prefix}-sys-color-surface-container-high: #292B25;
+    --#{$prefix}-sys-color-surface-container-high-rgb: 41, 43, 37;
+    --#{$prefix}-sys-color-surface-container-highest: #34362F;
+    --#{$prefix}-sys-color-surface-container-highest-rgb: 52, 54, 47;
+    
+    --#{$prefix}-sys-color-on-surface: #E2E3DD;
+    --#{$prefix}-sys-color-on-surface-rgb: 226, 227, 221;
+    --#{$prefix}-sys-color-on-surface-variant: #C5C7BE;
+    --#{$prefix}-sys-color-on-surface-variant-rgb: 197, 199, 190;
+    
+    --#{$prefix}-sys-color-outline: #8F9187;
+    --#{$prefix}-sys-color-outline-rgb: 143, 145, 135;
+    --#{$prefix}-sys-color-outline-variant: #454741;
+    --#{$prefix}-sys-color-outline-variant-rgb: 69, 71, 65;
+
+    // Include status colors for dark theme
+    @include status-colors-dark();
+  }
+}

package/src/styles/themes/_spring.scss

@@ -35,6 +35,9 @@
   --#{$prefix}-sys-color-outline: #727970;
   --#{$prefix}-sys-color-outline-variant: #C1C9BE;
 
+  // Include status colors for light theme
+  @include status-colors-light();
+
   &[data-theme-mode="dark"] {
     // Key colors
     --#{$prefix}-sys-color-primary: #79DC80;
@@ -67,5 +70,8 @@
     
     --#{$prefix}-sys-color-outline: #8B9388;
     --#{$prefix}-sys-color-outline-variant: #424940;
+
+    // Include status colors for dark theme
+    @include status-colors-dark();
   }
 }

package/src/styles/themes/_summer.scss

@@ -41,6 +41,9 @@
   --#{$prefix}-sys-color-outline: #827568;
   --#{$prefix}-sys-color-outline-variant: #D5C8B9;
 
+  // Include status colors for light theme
+  @include status-colors-light();
+
   &[data-theme-mode="dark"] {
     // Key colors - darker but still vibrant
     --#{$prefix}-sys-color-primary: #9ECAFF;
@@ -78,5 +81,7 @@
     
     --#{$prefix}-sys-color-outline: #9E8F80;
     --#{$prefix}-sys-color-outline-variant: #50453B;
+    // Include status colors for dark theme
+    @include status-colors-dark();
   }
 }

package/src/styles/themes/_sunset.scss

@@ -35,6 +35,9 @@
   --#{$prefix}-sys-color-outline: #85736D;
   --#{$prefix}-sys-color-outline-variant: #D8C2BB;
 
+  // Include status colors for light theme
+  @include status-colors-light();
+
    &[data-theme-mode="dark"] {
     --#{$prefix}-sys-color-primary: #FFB686;
     --#{$prefix}-sys-color-on-primary: #5C2800;
@@ -51,5 +54,7 @@
     --#{$prefix}-sys-color-surface-container: #2B1714;
     
     --#{$prefix}-sys-color-outline: #B89784;
+    // Include status colors for dark theme
+    @include status-colors-dark();
   }
 }

package/src/styles/themes/_tealcaramel.scss

@@ -0,0 +1,125 @@
+// src/styles/themes/_tealcaramel.scss
+@use '../abstract/base' as *;
+@use 'base-theme' as *;
+
+@include create-theme('tealcaramel') {
+  // Key colors based on teal and caramel combination
+  --#{$prefix}-sys-color-primary: #2B4D56; // Teal as primary
+  --#{$prefix}-sys-color-primary-rgb: 0, 105, 92;
+  --#{$prefix}-sys-color-on-primary: #FFFFFF;
+  --#{$prefix}-sys-color-on-primary-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-primary-container: #B2DFDB;
+  --#{$prefix}-sys-color-primary-container-rgb: 178, 223, 219;
+  --#{$prefix}-sys-color-on-primary-container: #002A25;
+  --#{$prefix}-sys-color-on-primary-container-rgb: 0, 42, 37;
+  
+  --#{$prefix}-sys-color-secondary: #9A6433; // Caramel as secondary
+  --#{$prefix}-sys-color-secondary-rgb: 198, 124, 78;
+  --#{$prefix}-sys-color-on-secondary: #FFFFFF;
+  --#{$prefix}-sys-color-on-secondary-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-secondary-container: #FFD8C2;
+  --#{$prefix}-sys-color-secondary-container-rgb: 255, 216, 194;
+  --#{$prefix}-sys-color-on-secondary-container: #3E2715;
+  --#{$prefix}-sys-color-on-secondary-container-rgb: 62, 39, 21;
+  
+  --#{$prefix}-sys-color-tertiary: #4A7C6E; // Muted teal as tertiary
+  --#{$prefix}-sys-color-tertiary-rgb: 74, 124, 110;
+  --#{$prefix}-sys-color-on-tertiary: #FFFFFF;
+  --#{$prefix}-sys-color-on-tertiary-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-tertiary-container: #CCE6DF;
+  --#{$prefix}-sys-color-tertiary-container-rgb: 204, 230, 223;
+  --#{$prefix}-sys-color-on-tertiary-container: #0E3029;
+  --#{$prefix}-sys-color-on-tertiary-container-rgb: 14, 48, 41;
+
+  // Neutral colors with subtle teal undertones
+  --#{$prefix}-sys-color-surface: #F9FCFC;
+  --#{$prefix}-sys-color-surface-rgb: 249, 252, 252;
+  --#{$prefix}-sys-color-surface-dim: #E5ECEB;
+  --#{$prefix}-sys-color-surface-dim-rgb: 229, 236, 235;
+  --#{$prefix}-sys-color-surface-bright: #F9FCFC;
+  --#{$prefix}-sys-color-surface-bright-rgb: 249, 252, 252;
+  --#{$prefix}-sys-color-surface-container-lowest: #FFFFFF;
+  --#{$prefix}-sys-color-surface-container-lowest-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-surface-container-low: #F3F7F6;
+  --#{$prefix}-sys-color-surface-container-low-rgb: 243, 247, 246;
+  --#{$prefix}-sys-color-surface-container: #EDF2F1;
+  --#{$prefix}-sys-color-surface-container-rgb: 237, 242, 241;
+  --#{$prefix}-sys-color-surface-container-high: #E7ECEB;
+  --#{$prefix}-sys-color-surface-container-high-rgb: 231, 236, 235;
+  --#{$prefix}-sys-color-surface-container-highest: #E1E6E5;
+  --#{$prefix}-sys-color-surface-container-highest-rgb: 225, 230, 229;
+  
+  --#{$prefix}-sys-color-on-surface: #191D1C;
+  --#{$prefix}-sys-color-on-surface-rgb: 25, 29, 28;
+  --#{$prefix}-sys-color-on-surface-variant: #404847;
+  --#{$prefix}-sys-color-on-surface-variant-rgb: 64, 72, 71;
+  
+  --#{$prefix}-sys-color-outline: #6E7978;
+  --#{$prefix}-sys-color-outline-rgb: 110, 121, 120;
+  --#{$prefix}-sys-color-outline-variant: #C1CCCB;
+  --#{$prefix}-sys-color-outline-variant-rgb: 193, 204, 203;
+
+  // Include status colors for light theme
+  @include status-colors-light();
+
+  &[data-theme-mode="dark"] {
+    // Key colors for dark mode
+    --#{$prefix}-sys-color-primary: #85CFC6; // Lighter teal
+    --#{$prefix}-sys-color-primary-rgb: 133, 207, 198;
+    --#{$prefix}-sys-color-on-primary: #003E36;
+    --#{$prefix}-sys-color-on-primary-rgb: 0, 62, 54;
+    --#{$prefix}-sys-color-primary-container: #005349;
+    --#{$prefix}-sys-color-primary-container-rgb: 0, 83, 73;
+    --#{$prefix}-sys-color-on-primary-container: #B2DFDB;
+    --#{$prefix}-sys-color-on-primary-container-rgb: 178, 223, 219;
+    
+    --#{$prefix}-sys-color-secondary: #FFB68D; // Lighter caramel
+    --#{$prefix}-sys-color-secondary-rgb: 255, 182, 141;
+    --#{$prefix}-sys-color-on-secondary: #5D3726;
+    --#{$prefix}-sys-color-on-secondary-rgb: 93, 55, 38;
+    --#{$prefix}-sys-color-secondary-container: #7D4F3A;
+    --#{$prefix}-sys-color-secondary-container-rgb: 125, 79, 58;
+    --#{$prefix}-sys-color-on-secondary-container: #FFD8C2;
+    --#{$prefix}-sys-color-on-secondary-container-rgb: 255, 216, 194;
+    
+    --#{$prefix}-sys-color-tertiary: #A0CCC2; // Lighter muted teal
+    --#{$prefix}-sys-color-tertiary-rgb: 160, 204, 194;
+    --#{$prefix}-sys-color-on-tertiary: #1A463E;
+    --#{$prefix}-sys-color-on-tertiary-rgb: 26, 70, 62;
+    --#{$prefix}-sys-color-tertiary-container: #315C53;
+    --#{$prefix}-sys-color-tertiary-container-rgb: 49, 92, 83;
+    --#{$prefix}-sys-color-on-tertiary-container: #CCE6DF;
+    --#{$prefix}-sys-color-on-tertiary-container-rgb: 204, 230, 223;
+
+    // Neutral colors for dark mode
+    --#{$prefix}-sys-color-surface: #191D1C;
+    --#{$prefix}-sys-color-surface-rgb: 25, 29, 28;
+    --#{$prefix}-sys-color-surface-dim: #121615;
+    --#{$prefix}-sys-color-surface-dim-rgb: 18, 22, 21;
+    --#{$prefix}-sys-color-surface-bright: #363B3A;
+    --#{$prefix}-sys-color-surface-bright-rgb: 54, 59, 58;
+    --#{$prefix}-sys-color-surface-container-lowest: #0E1211;
+    --#{$prefix}-sys-color-surface-container-lowest-rgb: 14, 18, 17;
+    --#{$prefix}-sys-color-surface-container-low: #191D1C;
+    --#{$prefix}-sys-color-surface-container-low-rgb: 25, 29, 28;
+    --#{$prefix}-sys-color-surface-container: #1E2221;
+    --#{$prefix}-sys-color-surface-container-rgb: 30, 34, 33;
+    --#{$prefix}-sys-color-surface-container-high: #282C2B;
+    --#{$prefix}-sys-color-surface-container-high-rgb: 40, 44, 43;
+    --#{$prefix}-sys-color-surface-container-highest: #333736;
+    --#{$prefix}-sys-color-surface-container-highest-rgb: 51, 55, 54;
+    
+    --#{$prefix}-sys-color-on-surface: #E1E3E3;
+    --#{$prefix}-sys-color-on-surface-rgb: 225, 227, 227;
+    --#{$prefix}-sys-color-on-surface-variant: #C1CCCB;
+    --#{$prefix}-sys-color-on-surface-variant-rgb: 193, 204, 203;
+    
+    --#{$prefix}-sys-color-outline: #8B9695;
+    --#{$prefix}-sys-color-outline-rgb: 139, 150, 149;
+    --#{$prefix}-sys-color-outline-variant: #404847;
+    --#{$prefix}-sys-color-outline-variant-rgb: 64, 72, 71;
+
+    // Include status colors for dark theme
+    @include status-colors-dark();
+  }
+}

package/src/styles/themes/_winter.scss

@@ -35,6 +35,9 @@
   --#{$prefix}-sys-color-outline: #70787D;
   --#{$prefix}-sys-color-outline-variant: #C0C8CC;
 
+  // Include status colors for light theme
+  @include status-colors-light();
+
   &[data-theme-mode="dark"] {
     // Key colors
     --#{$prefix}-sys-color-primary: #73D0EE;
@@ -67,5 +70,8 @@
     
     --#{$prefix}-sys-color-outline: #8A9297;
     --#{$prefix}-sys-color-outline-variant: #40484C;
+
+    // Include status colors for dark theme
+    @include status-colors-dark();
   }
 }

package/src/components/navigation/features/items.js

@@ -1,192 +0,0 @@
-// src/components/navigation/features/items.js
-import { createNavItem, getAllNestedItems } from '../nav-item'
-
-export const withNavItems = (config) => (component) => {
-  const items = new Map()
-  let activeItem = null
-
-  /**
-   * Recursively stores items in the items Map
-   * @param {Object} itemConfig - Item configuration
-   * @param {HTMLElement} item - Created item element
-   */
-  const storeItem = (itemConfig, item) => {
-    items.set(itemConfig.id, { element: item, config: itemConfig })
-
-    if (itemConfig.items?.length) {
-      itemConfig.items.forEach(nestedConfig => {
-        const container = item.closest(`.${config.prefix}-nav-item-container`)
-        const nestedContainer = container.querySelector(`.${config.prefix}-nav-nested-container`)
-        const nestedItem = nestedContainer.querySelector(`[data-id="${nestedConfig.id}"]`)
-        storeItem(nestedConfig, nestedItem)
-      })
-    }
-  }
-
-  // Create initial items
-  if (config.items) {
-    config.items.forEach(itemConfig => {
-      const item = createNavItem(itemConfig, component.element, config.prefix)
-      storeItem(itemConfig, item)
-
-      if (itemConfig.active) {
-        activeItem = { element: item, config: itemConfig }
-        item.classList.add(`${config.prefix}-nav-item--active`)
-        item.setAttribute('aria-selected', 'true')
-      }
-    })
-  }
-
-  // Handle item clicks
-  component.element.addEventListener('click', (event) => {
-    const item = event.target.closest(`.${config.prefix}-nav-item`)
-    if (!item || item.disabled || item.getAttribute('aria-haspopup') === 'true') return
-
-    const id = item.dataset.id
-    const itemData = items.get(id)
-    if (!itemData) return
-
-    // Store previous item before updating
-    const previousItem = activeItem
-
-    // Update active state
-    if (activeItem) {
-      activeItem.element.classList.remove(`${config.prefix}-nav-item--active`)
-      activeItem.element.setAttribute('aria-selected', 'false')
-    }
-
-    item.classList.add(`${config.prefix}-nav-item--active`)
-    item.setAttribute('aria-selected', 'true')
-    activeItem = itemData
-
-    // Emit change event with item data
-    component.emit('change', {
-      id,
-      item: itemData,
-      previousItem,
-      path: getItemPath(id)
-    })
-  })
-
-  /**
-   * Gets the path to an item (parent IDs)
-   * @param {string} id - Item ID to get path for
-   * @returns {Array<string>} Array of parent item IDs
-   */
-  const getItemPath = (id) => {
-    const path = []
-    let currentItem = items.get(id)
-
-    while (currentItem) {
-      const parentContainer = currentItem.element.closest(`.${config.prefix}-nav-nested-container`)
-      if (!parentContainer) break
-
-      const parentItem = parentContainer.previousElementSibling
-      if (!parentItem) break
-
-      const parentId = parentItem.dataset.id
-      if (!parentId) break
-
-      path.unshift(parentId)
-      currentItem = items.get(parentId)
-    }
-
-    return path
-  }
-
-  // Clean up when component is destroyed
-  if (component.lifecycle) {
-    const originalDestroy = component.lifecycle.destroy
-    component.lifecycle.destroy = () => {
-      items.clear()
-      originalDestroy?.()
-    }
-  }
-
-  return {
-    ...component,
-    items,
-
-    addItem (itemConfig) {
-      if (items.has(itemConfig.id)) return this
-
-      const item = createNavItem(itemConfig, component.element, config.prefix)
-      storeItem(itemConfig, item)
-
-      if (itemConfig.active) {
-        this.setActive(itemConfig.id)
-      }
-
-      component.emit('itemAdded', {
-        id: itemConfig.id,
-        item: { element: item, config: itemConfig }
-      })
-      return this
-    },
-
-    removeItem (id) {
-      const item = items.get(id)
-      if (!item) return this
-
-      // Remove all nested items first
-      const nestedItems = getAllNestedItems(item.element, config.prefix)
-      nestedItems.forEach(nestedItem => {
-        const nestedId = nestedItem.dataset.id
-        if (nestedId) items.delete(nestedId)
-      })
-
-      if (activeItem?.config.id === id) {
-        activeItem = null
-      }
-
-      // Remove the entire item container
-      const container = item.element.closest(`.${config.prefix}-nav-item-container`)
-      container?.remove()
-      items.delete(id)
-
-      component.emit('itemRemoved', { id, item })
-      return this
-    },
-
-    getItem: (id) => items.get(id),
-    getAllItems: () => Array.from(items.values()),
-    getActive: () => activeItem,
-    getItemPath: (id) => getItemPath(id),
-
-    setActive (id) {
-      const item = items.get(id)
-      if (!item || item.config.disabled) return this
-
-      if (activeItem) {
-        activeItem.element.classList.remove(`${config.prefix}-nav-item--active`)
-        activeItem.element.setAttribute('aria-selected', 'false')
-      }
-
-      item.element.classList.add(`${config.prefix}-nav-item--active`)
-      item.element.setAttribute('aria-selected', 'true')
-      activeItem = item
-
-      // Ensure all parent items are expanded
-      const path = getItemPath(id)
-      path.forEach(parentId => {
-        const parentItem = items.get(parentId)
-        if (parentItem) {
-          const parentButton = parentItem.element
-          const nestedContainer = parentButton.closest(`.${config.prefix}-nav-item-container`)
-            .querySelector(`.${config.prefix}-nav-nested-container`)
-
-          parentButton.setAttribute('aria-expanded', 'true')
-          nestedContainer.hidden = false
-        }
-      })
-
-      component.emit('activeChanged', {
-        id,
-        item,
-        previousItem: activeItem,
-        path: getItemPath(id)
-      })
-      return this
-    }
-  }
-}