mtrl 0.2.5 → 0.2.7

package/src/styles/themes/_brownbeige.scss

@@ -0,0 +1,125 @@
+// src/styles/themes/_brownbeige.scss
+@use '../abstract/base' as *;
+@use 'base-theme' as *;
+
+@include create-theme('brownbeige') {
+  // Key colors based on brown and beige combination
+  --#{$prefix}-sys-color-primary: #3E2723; // Deep brown as primary
+  --#{$prefix}-sys-color-primary-rgb: 62, 39, 35;
+  --#{$prefix}-sys-color-on-primary: #FFFFFF;
+  --#{$prefix}-sys-color-on-primary-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-primary-container: #FFDBD0;
+  --#{$prefix}-sys-color-primary-container-rgb: 255, 219, 208;
+  --#{$prefix}-sys-color-on-primary-container: #2C1512;
+  --#{$prefix}-sys-color-on-primary-container-rgb: 44, 21, 18;
+  
+  --#{$prefix}-sys-color-secondary: #D7CDB7; // Beige as secondary
+  --#{$prefix}-sys-color-secondary-rgb: 215, 205, 183;
+  --#{$prefix}-sys-color-on-secondary: #32302A;
+  --#{$prefix}-sys-color-on-secondary-rgb: 50, 48, 42;
+  --#{$prefix}-sys-color-secondary-container: #F6F0E4;
+  --#{$prefix}-sys-color-secondary-container-rgb: 246, 240, 228;
+  --#{$prefix}-sys-color-on-secondary-container: #3D3A2F;
+  --#{$prefix}-sys-color-on-secondary-container-rgb: 61, 58, 47;
+  
+  --#{$prefix}-sys-color-tertiary: #795548; // Medium brown as tertiary
+  --#{$prefix}-sys-color-tertiary-rgb: 121, 85, 72;
+  --#{$prefix}-sys-color-on-tertiary: #FFFFFF;
+  --#{$prefix}-sys-color-on-tertiary-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-tertiary-container: #FFD8C7;
+  --#{$prefix}-sys-color-tertiary-container-rgb: 255, 216, 199;
+  --#{$prefix}-sys-color-on-tertiary-container: #2E1F1A;
+  --#{$prefix}-sys-color-on-tertiary-container-rgb: 46, 31, 26;
+
+  // Neutral colors with warm undertones
+  --#{$prefix}-sys-color-surface: #FFFBF7;
+  --#{$prefix}-sys-color-surface-rgb: 255, 251, 247;
+  --#{$prefix}-sys-color-surface-dim: #EFE9E2;
+  --#{$prefix}-sys-color-surface-dim-rgb: 239, 233, 226;
+  --#{$prefix}-sys-color-surface-bright: #FFFBF7;
+  --#{$prefix}-sys-color-surface-bright-rgb: 255, 251, 247;
+  --#{$prefix}-sys-color-surface-container-lowest: #FFFFFF;
+  --#{$prefix}-sys-color-surface-container-lowest-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-surface-container-low: #FBF5EF;
+  --#{$prefix}-sys-color-surface-container-low-rgb: 251, 245, 239;
+  --#{$prefix}-sys-color-surface-container: #F5EFE9;
+  --#{$prefix}-sys-color-surface-container-rgb: 245, 239, 233;
+  --#{$prefix}-sys-color-surface-container-high: #EFE9E3;
+  --#{$prefix}-sys-color-surface-container-high-rgb: 239, 233, 227;
+  --#{$prefix}-sys-color-surface-container-highest: #E9E3DD;
+  --#{$prefix}-sys-color-surface-container-highest-rgb: 233, 227, 221;
+  
+  --#{$prefix}-sys-color-on-surface: #1F1B17;
+  --#{$prefix}-sys-color-on-surface-rgb: 31, 27, 23;
+  --#{$prefix}-sys-color-on-surface-variant: #4A443D;
+  --#{$prefix}-sys-color-on-surface-variant-rgb: 74, 68, 61;
+  
+  --#{$prefix}-sys-color-outline: #7A7267;
+  --#{$prefix}-sys-color-outline-rgb: 122, 114, 103;
+  --#{$prefix}-sys-color-outline-variant: #CBC3B8;
+  --#{$prefix}-sys-color-outline-variant-rgb: 203, 195, 184;
+
+  // Include status colors for light theme
+  @include status-colors-light();
+
+  &[data-theme-mode="dark"] {
+    // Key colors for dark mode
+    --#{$prefix}-sys-color-primary: #FFAB95; // Lighter brown
+    --#{$prefix}-sys-color-primary-rgb: 255, 171, 149;
+    --#{$prefix}-sys-color-on-primary: #4A2B23;
+    --#{$prefix}-sys-color-on-primary-rgb: 74, 43, 35;
+    --#{$prefix}-sys-color-primary-container: #653B31;
+    --#{$prefix}-sys-color-primary-container-rgb: 101, 59, 49;
+    --#{$prefix}-sys-color-on-primary-container: #FFDBD0;
+    --#{$prefix}-sys-color-on-primary-container-rgb: 255, 219, 208;
+    
+    --#{$prefix}-sys-color-secondary: #E0D6C0; // Lighter beige
+    --#{$prefix}-sys-color-secondary-rgb: 224, 214, 192;
+    --#{$prefix}-sys-color-on-secondary: #3D3A2F;
+    --#{$prefix}-sys-color-on-secondary-rgb: 61, 58, 47;
+    --#{$prefix}-sys-color-secondary-container: #554F43;
+    --#{$prefix}-sys-color-secondary-container-rgb: 85, 79, 67;
+    --#{$prefix}-sys-color-on-secondary-container: #F6F0E4;
+    --#{$prefix}-sys-color-on-secondary-container-rgb: 246, 240, 228;
+    
+    --#{$prefix}-sys-color-tertiary: #FFB59F; // Lighter medium brown
+    --#{$prefix}-sys-color-tertiary-rgb: 255, 181, 159;
+    --#{$prefix}-sys-color-on-tertiary: #4A2B1D;
+    --#{$prefix}-sys-color-on-tertiary-rgb: 74, 43, 29;
+    --#{$prefix}-sys-color-tertiary-container: #653F2F;
+    --#{$prefix}-sys-color-tertiary-container-rgb: 101, 63, 47;
+    --#{$prefix}-sys-color-on-tertiary-container: #FFD8C7;
+    --#{$prefix}-sys-color-on-tertiary-container-rgb: 255, 216, 199;
+
+    // Neutral colors for dark mode
+    --#{$prefix}-sys-color-surface: #1F1B17;
+    --#{$prefix}-sys-color-surface-rgb: 31, 27, 23;
+    --#{$prefix}-sys-color-surface-dim: #17130F;
+    --#{$prefix}-sys-color-surface-dim-rgb: 23, 19, 15;
+    --#{$prefix}-sys-color-surface-bright: #3B332E;
+    --#{$prefix}-sys-color-surface-bright-rgb: 59, 51, 46;
+    --#{$prefix}-sys-color-surface-container-lowest: #130F0A;
+    --#{$prefix}-sys-color-surface-container-lowest-rgb: 19, 15, 10;
+    --#{$prefix}-sys-color-surface-container-low: #1F1B17;
+    --#{$prefix}-sys-color-surface-container-low-rgb: 31, 27, 23;
+    --#{$prefix}-sys-color-surface-container: #241F1B;
+    --#{$prefix}-sys-color-surface-container-rgb: 36, 31, 27;
+    --#{$prefix}-sys-color-surface-container-high: #2F2925;
+    --#{$prefix}-sys-color-surface-container-high-rgb: 47, 41, 37;
+    --#{$prefix}-sys-color-surface-container-highest: #3A332F;
+    --#{$prefix}-sys-color-surface-container-highest-rgb: 58, 51, 47;
+    
+    --#{$prefix}-sys-color-on-surface: #ECE0D8;
+    --#{$prefix}-sys-color-on-surface-rgb: 236, 224, 216;
+    --#{$prefix}-sys-color-on-surface-variant: #CBC3B8;
+    --#{$prefix}-sys-color-on-surface-variant-rgb: 203, 195, 184;
+    
+    --#{$prefix}-sys-color-outline: #948B7F;
+    --#{$prefix}-sys-color-outline-rgb: 148, 139, 127;
+    --#{$prefix}-sys-color-outline-variant: #4A443D;
+    --#{$prefix}-sys-color-outline-variant-rgb: 74, 68, 61;
+
+    // Include status colors for dark theme
+    @include status-colors-dark();
+  }
+}

package/src/styles/themes/_browngreen.scss

@@ -0,0 +1,125 @@
+// src/styles/themes/_browngreen.scss
+@use '../abstract/base' as *;
+@use 'base-theme' as *;
+
+@include create-theme('browngreen') {
+  // Key colors based on brown and green combination
+  --#{$prefix}-sys-color-primary: #3E2723; // Deep brown as primary
+  --#{$prefix}-sys-color-primary-rgb: 62, 39, 35;
+  --#{$prefix}-sys-color-on-primary: #FFFFFF;
+  --#{$prefix}-sys-color-on-primary-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-primary-container: #FFBDAD;
+  --#{$prefix}-sys-color-primary-container-rgb: 255, 189, 173;
+  --#{$prefix}-sys-color-on-primary-container: #2C1513;
+  --#{$prefix}-sys-color-on-primary-container-rgb: 44, 21, 19;
+  
+  --#{$prefix}-sys-color-secondary: #536E4A; // Forest green as secondary
+  --#{$prefix}-sys-color-secondary-rgb: 83, 110, 74;
+  --#{$prefix}-sys-color-on-secondary: #FFFFFF;
+  --#{$prefix}-sys-color-on-secondary-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-secondary-container: #D4E8CA;
+  --#{$prefix}-sys-color-secondary-container-rgb: 212, 232, 202;
+  --#{$prefix}-sys-color-on-secondary-container: #1A2715;
+  --#{$prefix}-sys-color-on-secondary-container-rgb: 26, 39, 21;
+  
+  --#{$prefix}-sys-color-tertiary: #7D5E56; // Muted brown as tertiary
+  --#{$prefix}-sys-color-tertiary-rgb: 125, 94, 86;
+  --#{$prefix}-sys-color-on-tertiary: #FFFFFF;
+  --#{$prefix}-sys-color-on-tertiary-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-tertiary-container: #FFDBCF;
+  --#{$prefix}-sys-color-tertiary-container-rgb: 255, 219, 207;
+  --#{$prefix}-sys-color-on-tertiary-container: #321B16;
+  --#{$prefix}-sys-color-on-tertiary-container-rgb: 50, 27, 22;
+
+  // Neutral colors with earthy undertones
+  --#{$prefix}-sys-color-surface: #FAFAF5;
+  --#{$prefix}-sys-color-surface-rgb: 250, 250, 245;
+  --#{$prefix}-sys-color-surface-dim: #E6E6E0;
+  --#{$prefix}-sys-color-surface-dim-rgb: 230, 230, 224;
+  --#{$prefix}-sys-color-surface-bright: #FAFAF5;
+  --#{$prefix}-sys-color-surface-bright-rgb: 250, 250, 245;
+  --#{$prefix}-sys-color-surface-container-lowest: #FFFFFF;
+  --#{$prefix}-sys-color-surface-container-lowest-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-surface-container-low: #F4F4EF;
+  --#{$prefix}-sys-color-surface-container-low-rgb: 244, 244, 239;
+  --#{$prefix}-sys-color-surface-container: #EEEEEA;
+  --#{$prefix}-sys-color-surface-container-rgb: 238, 238, 234;
+  --#{$prefix}-sys-color-surface-container-high: #E8E8E4;
+  --#{$prefix}-sys-color-surface-container-high-rgb: 232, 232, 228;
+  --#{$prefix}-sys-color-surface-container-highest: #E2E2DE;
+  --#{$prefix}-sys-color-surface-container-highest-rgb: 226, 226, 222;
+  
+  --#{$prefix}-sys-color-on-surface: #1B1B17;
+  --#{$prefix}-sys-color-on-surface-rgb: 27, 27, 23;
+  --#{$prefix}-sys-color-on-surface-variant: #46463C;
+  --#{$prefix}-sys-color-on-surface-variant-rgb: 70, 70, 60;
+  
+  --#{$prefix}-sys-color-outline: #76766C;
+  --#{$prefix}-sys-color-outline-rgb: 118, 118, 108;
+  --#{$prefix}-sys-color-outline-variant: #C7C7BD;
+  --#{$prefix}-sys-color-outline-variant-rgb: 199, 199, 189;
+
+  // Include status colors for light theme
+  @include status-colors-light();
+
+  &[data-theme-mode="dark"] {
+    // Key colors for dark mode
+    --#{$prefix}-sys-color-primary: #FFB0A1; // Lighter brown
+    --#{$prefix}-sys-color-primary-rgb: 255, 176, 161;
+    --#{$prefix}-sys-color-on-primary: #461D18;
+    --#{$prefix}-sys-color-on-primary-rgb: 70, 29, 24;
+    --#{$prefix}-sys-color-primary-container: #62342E;
+    --#{$prefix}-sys-color-primary-container-rgb: 98, 52, 46;
+    --#{$prefix}-sys-color-on-primary-container: #FFDBCF;
+    --#{$prefix}-sys-color-on-primary-container-rgb: 255, 219, 207;
+    
+    --#{$prefix}-sys-color-secondary: #B8CCAE; // Lighter green
+    --#{$prefix}-sys-color-secondary-rgb: 184, 204, 174;
+    --#{$prefix}-sys-color-on-secondary: #283B24;
+    --#{$prefix}-sys-color-on-secondary-rgb: 40, 59, 36;
+    --#{$prefix}-sys-color-secondary-container: #3C5436;
+    --#{$prefix}-sys-color-secondary-container-rgb: 60, 84, 54;
+    --#{$prefix}-sys-color-on-secondary-container: #D4E8CA;
+    --#{$prefix}-sys-color-on-secondary-container-rgb: 212, 232, 202;
+    
+    --#{$prefix}-sys-color-tertiary: #F5B8AA; // Lighter muted brown
+    --#{$prefix}-sys-color-tertiary-rgb: 245, 184, 170;
+    --#{$prefix}-sys-color-on-tertiary: #48291F;
+    --#{$prefix}-sys-color-on-tertiary-rgb: 72, 41, 31;
+    --#{$prefix}-sys-color-tertiary-container: #634539;
+    --#{$prefix}-sys-color-tertiary-container-rgb: 99, 69, 57;
+    --#{$prefix}-sys-color-on-tertiary-container: #FFDBCF;
+    --#{$prefix}-sys-color-on-tertiary-container-rgb: 255, 219, 207;
+
+    // Neutral colors for dark mode
+    --#{$prefix}-sys-color-surface: #1B1B17;
+    --#{$prefix}-sys-color-surface-rgb: 27, 27, 23;
+    --#{$prefix}-sys-color-surface-dim: #13130F;
+    --#{$prefix}-sys-color-surface-dim-rgb: 19, 19, 15;
+    --#{$prefix}-sys-color-surface-bright: #39392F;
+    --#{$prefix}-sys-color-surface-bright-rgb: 57, 57, 47;
+    --#{$prefix}-sys-color-surface-container-lowest: #0F0F0B;
+    --#{$prefix}-sys-color-surface-container-lowest-rgb: 15, 15, 11;
+    --#{$prefix}-sys-color-surface-container-low: #1B1B17;
+    --#{$prefix}-sys-color-surface-container-low-rgb: 27, 27, 23;
+    --#{$prefix}-sys-color-surface-container: #1F1F1B;
+    --#{$prefix}-sys-color-surface-container-rgb: 31, 31, 27;
+    --#{$prefix}-sys-color-surface-container-high: #2A2A25;
+    --#{$prefix}-sys-color-surface-container-high-rgb: 42, 42, 37;
+    --#{$prefix}-sys-color-surface-container-highest: #35352F;
+    --#{$prefix}-sys-color-surface-container-highest-rgb: 53, 53, 47;
+    
+    --#{$prefix}-sys-color-on-surface: #E2E2DD;
+    --#{$prefix}-sys-color-on-surface-rgb: 226, 226, 221;
+    --#{$prefix}-sys-color-on-surface-variant: #C7C7BD;
+    --#{$prefix}-sys-color-on-surface-variant-rgb: 199, 199, 189;
+    
+    --#{$prefix}-sys-color-outline: #909087;
+    --#{$prefix}-sys-color-outline-rgb: 144, 144, 135;
+    --#{$prefix}-sys-color-outline-variant: #46463C;
+    --#{$prefix}-sys-color-outline-variant-rgb: 70, 70, 60;
+
+    // Include status colors for dark theme
+    @include status-colors-dark();
+  }
+}

package/src/styles/themes/_forest.scss

@@ -35,6 +35,9 @@
   --#{$prefix}-sys-color-outline: #767B6F;
   --#{$prefix}-sys-color-outline-variant: #C9CCB7;
 
+  // Include status colors for light theme
+  @include status-colors-light();
+
   &[data-theme-mode="dark"] {
     // Key colors
     --#{$prefix}-sys-color-primary: #A5B58D;
@@ -67,5 +70,8 @@
     
     --#{$prefix}-sys-color-outline: #929688;
     --#{$prefix}-sys-color-outline-variant: #464840;
+
+    // Include status colors for dark theme
+    @include status-colors-dark();
   }
 }

package/src/styles/themes/_greenbeige.scss

@@ -0,0 +1,125 @@
+// src/styles/themes/_greenbeige.scss
+@use '../abstract/base' as *;
+@use 'base-theme' as *;
+
+@include create-theme('greenbeige') {
+  // Key colors based on green and beige combination
+  --#{$prefix}-sys-color-primary: #5D6E57; // Olive green as primary
+  --#{$prefix}-sys-color-primary-rgb: 93, 110, 87;
+  --#{$prefix}-sys-color-on-primary: #FFFFFF;
+  --#{$prefix}-sys-color-on-primary-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-primary-container: #D8E5D0;
+  --#{$prefix}-sys-color-primary-container-rgb: 216, 229, 208;
+  --#{$prefix}-sys-color-on-primary-container: #1D2818;
+  --#{$prefix}-sys-color-on-primary-container-rgb: 29, 40, 24;
+  
+  --#{$prefix}-sys-color-secondary: #D9CCBB; // Beige as secondary
+  --#{$prefix}-sys-color-secondary-rgb: 217, 204, 187;
+  --#{$prefix}-sys-color-on-secondary: #3A342B;
+  --#{$prefix}-sys-color-on-secondary-rgb: 58, 52, 43;
+  --#{$prefix}-sys-color-secondary-container: #F5EDE4;
+  --#{$prefix}-sys-color-secondary-container-rgb: 245, 237, 228;
+  --#{$prefix}-sys-color-on-secondary-container: #3D3628;
+  --#{$prefix}-sys-color-on-secondary-container-rgb: 61, 54, 40;
+  
+  --#{$prefix}-sys-color-tertiary: #778670; // Muted green as tertiary
+  --#{$prefix}-sys-color-tertiary-rgb: 119, 134, 112;
+  --#{$prefix}-sys-color-on-tertiary: #FFFFFF;
+  --#{$prefix}-sys-color-on-tertiary-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-tertiary-container: #DBEBD1;
+  --#{$prefix}-sys-color-tertiary-container-rgb: 219, 235, 209;
+  --#{$prefix}-sys-color-on-tertiary-container: #283420;
+  --#{$prefix}-sys-color-on-tertiary-container-rgb: 40, 52, 32;
+
+  // Neutral colors with natural earthy undertones
+  --#{$prefix}-sys-color-surface: #FAFBF7;
+  --#{$prefix}-sys-color-surface-rgb: 250, 251, 247;
+  --#{$prefix}-sys-color-surface-dim: #E8EAE4;
+  --#{$prefix}-sys-color-surface-dim-rgb: 232, 234, 228;
+  --#{$prefix}-sys-color-surface-bright: #FAFBF7;
+  --#{$prefix}-sys-color-surface-bright-rgb: 250, 251, 247;
+  --#{$prefix}-sys-color-surface-container-lowest: #FFFFFF;
+  --#{$prefix}-sys-color-surface-container-lowest-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-surface-container-low: #F4F5F1;
+  --#{$prefix}-sys-color-surface-container-low-rgb: 244, 245, 241;
+  --#{$prefix}-sys-color-surface-container: #EDEFEB;
+  --#{$prefix}-sys-color-surface-container-rgb: 237, 239, 235;
+  --#{$prefix}-sys-color-surface-container-high: #E7E9E5;
+  --#{$prefix}-sys-color-surface-container-high-rgb: 231, 233, 229;
+  --#{$prefix}-sys-color-surface-container-highest: #E1E3DF;
+  --#{$prefix}-sys-color-surface-container-highest-rgb: 225, 227, 223;
+  
+  --#{$prefix}-sys-color-on-surface: #1A1C18;
+  --#{$prefix}-sys-color-on-surface-rgb: 26, 28, 24;
+  --#{$prefix}-sys-color-on-surface-variant: #434840;
+  --#{$prefix}-sys-color-on-surface-variant-rgb: 67, 72, 64;
+  
+  --#{$prefix}-sys-color-outline: #73786D;
+  --#{$prefix}-sys-color-outline-rgb: 115, 120, 109;
+  --#{$prefix}-sys-color-outline-variant: #C3C8BC;
+  --#{$prefix}-sys-color-outline-variant-rgb: 195, 200, 188;
+
+  // Include status colors for light theme
+  @include status-colors-light();
+
+  &[data-theme-mode="dark"] {
+    // Key colors for dark mode
+    --#{$prefix}-sys-color-primary: #BCC9B5; // Lighter olive green
+    --#{$prefix}-sys-color-primary-rgb: 188, 201, 181;
+    --#{$prefix}-sys-color-on-primary: #2D3D27;
+    --#{$prefix}-sys-color-on-primary-rgb: 45, 61, 39;
+    --#{$prefix}-sys-color-primary-container: #44553C;
+    --#{$prefix}-sys-color-primary-container-rgb: 68, 85, 60;
+    --#{$prefix}-sys-color-on-primary-container: #D8E5D0;
+    --#{$prefix}-sys-color-on-primary-container-rgb: 216, 229, 208;
+    
+    --#{$prefix}-sys-color-secondary: #EAE0D1; // Lighter beige
+    --#{$prefix}-sys-color-secondary-rgb: 234, 224, 209;
+    --#{$prefix}-sys-color-on-secondary: #45392D;
+    --#{$prefix}-sys-color-on-secondary-rgb: 69, 57, 45;
+    --#{$prefix}-sys-color-secondary-container: #5D5043;
+    --#{$prefix}-sys-color-secondary-container-rgb: 93, 80, 67;
+    --#{$prefix}-sys-color-on-secondary-container: #F5EDE4;
+    --#{$prefix}-sys-color-on-secondary-container-rgb: 245, 237, 228;
+    
+    --#{$prefix}-sys-color-tertiary: #BECFB5; // Lighter muted green
+    --#{$prefix}-sys-color-tertiary-rgb: 190, 207, 181;
+    --#{$prefix}-sys-color-on-tertiary: #313F29;
+    --#{$prefix}-sys-color-on-tertiary-rgb: 49, 63, 41;
+    --#{$prefix}-sys-color-tertiary-container: #485A3F;
+    --#{$prefix}-sys-color-tertiary-container-rgb: 72, 90, 63;
+    --#{$prefix}-sys-color-on-tertiary-container: #DBEBD1;
+    --#{$prefix}-sys-color-on-tertiary-container-rgb: 219, 235, 209;
+
+    // Neutral colors for dark mode
+    --#{$prefix}-sys-color-surface: #1A1C18;
+    --#{$prefix}-sys-color-surface-rgb: 26, 28, 24;
+    --#{$prefix}-sys-color-surface-dim: #121410;
+    --#{$prefix}-sys-color-surface-dim-rgb: 18, 20, 16;
+    --#{$prefix}-sys-color-surface-bright: #353832;
+    --#{$prefix}-sys-color-surface-bright-rgb: 53, 56, 50;
+    --#{$prefix}-sys-color-surface-container-lowest: #0F110D;
+    --#{$prefix}-sys-color-surface-container-lowest-rgb: 15, 17, 13;
+    --#{$prefix}-sys-color-surface-container-low: #1A1C18;
+    --#{$prefix}-sys-color-surface-container-low-rgb: 26, 28, 24;
+    --#{$prefix}-sys-color-surface-container: #1E201C;
+    --#{$prefix}-sys-color-surface-container-rgb: 30, 32, 28;
+    --#{$prefix}-sys-color-surface-container-high: #292B26;
+    --#{$prefix}-sys-color-surface-container-high-rgb: 41, 43, 38;
+    --#{$prefix}-sys-color-surface-container-highest: #333530;
+    --#{$prefix}-sys-color-surface-container-highest-rgb: 51, 53, 48;
+    
+    --#{$prefix}-sys-color-on-surface: #E2E3DE;
+    --#{$prefix}-sys-color-on-surface-rgb: 226, 227, 222;
+    --#{$prefix}-sys-color-on-surface-variant: #C3C8BC;
+    --#{$prefix}-sys-color-on-surface-variant-rgb: 195, 200, 188;
+    
+    --#{$prefix}-sys-color-outline: #8D9287;
+    --#{$prefix}-sys-color-outline-rgb: 141, 146, 135;
+    --#{$prefix}-sys-color-outline-variant: #434840;
+    --#{$prefix}-sys-color-outline-variant-rgb: 67, 72, 64;
+
+    // Include status colors for dark theme
+    @include status-colors-dark();
+  }
+}

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