mtrl 0.5.2 → 0.5.4

package/src/styles/themes/_baseline.scss

@@ -0,0 +1,173 @@
+// src/styles/themes/_baseline.scss
+@use '../abstract/base' as *;
+@use 'base-theme' as *;
+
+// Variables for light theme (default)
+@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;
+  --#{$prefix}-sys-state-focus-state-layer-opacity: 0.12;
+  --#{$prefix}-sys-state-pressed-state-layer-opacity: 0.12;
+  --#{$prefix}-sys-state-dragged-state-layer-opacity: 0.16;
+}
+
+// Variables for dark theme
+@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
+:root {
+  @include baseline-light-variables;
+  
+  // Apply dark theme based on system preference
+  @media (prefers-color-scheme: dark) {
+    @include baseline-dark-variables;
+  }
+}
+
+// Dark theme class for manual switching
+.dark-theme {
+  @include baseline-dark-variables;
+}
+
+// Make it available as a selectable theme
+@include create-theme('baseline') {
+  @include baseline-light-variables;
+
+  &[data-theme-mode="dark"] {
+    @include baseline-dark-variables;
+  }
+}

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

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

@@ -0,0 +1,77 @@
+// src/styles/themes/_forest.scss
+@use '../abstract/base' as *;
+@use 'base-theme' as *;
+
+@include create-theme('forest') {
+  // Key colors generated from seed color #4B5D3A (earthy forest green-brown)
+  --#{$prefix}-sys-color-primary: #3F4F2F;
+  --#{$prefix}-sys-color-on-primary: #FFFFFF;
+  --#{$prefix}-sys-color-primary-container: #C1D1A8;
+  --#{$prefix}-sys-color-on-primary-container: #121D04;
+  
+  --#{$prefix}-sys-color-secondary: #5D5242;
+  --#{$prefix}-sys-color-on-secondary: #FFFFFF;
+  --#{$prefix}-sys-color-secondary-container: #E1D6C4;
+  --#{$prefix}-sys-color-on-secondary-container: #201A10;
+  
+  --#{$prefix}-sys-color-tertiary: #486446;
+  --#{$prefix}-sys-color-on-tertiary: #FFFFFF;
+  --#{$prefix}-sys-color-tertiary-container: #CAE7C3;
+  --#{$prefix}-sys-color-on-tertiary-container: #0A2010;
+
+  // Neutral colors with earthy undertones
+  --#{$prefix}-sys-color-surface: #FAF9F2;
+  --#{$prefix}-sys-color-surface-dim: #E0DFD5;
+  --#{$prefix}-sys-color-surface-bright: #FAF9F2;
+  --#{$prefix}-sys-color-surface-container-lowest: #FFFFFF;
+  --#{$prefix}-sys-color-surface-container-low: #F4F3EC;
+  --#{$prefix}-sys-color-surface-container: #EEEDDE;
+  --#{$prefix}-sys-color-surface-container-high: #E8E7D8;
+  --#{$prefix}-sys-color-surface-container-highest: #E2E1D2;
+  
+  --#{$prefix}-sys-color-on-surface: #1B1C17;
+  --#{$prefix}-sys-color-on-surface-variant: #464840;
+  
+  --#{$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;
+    --#{$prefix}-sys-color-on-primary: #213516;
+    --#{$prefix}-sys-color-primary-container: #324B23;
+    --#{$prefix}-sys-color-on-primary-container: #C1D1A8;
+    
+    --#{$prefix}-sys-color-secondary: #C5BAAB;
+    --#{$prefix}-sys-color-on-secondary: #362F21;
+    --#{$prefix}-sys-color-secondary-container: #4A4231;
+    --#{$prefix}-sys-color-on-secondary-container: #E1D6C4;
+    
+    --#{$prefix}-sys-color-tertiary: #AECBA8;
+    --#{$prefix}-sys-color-on-tertiary: #123623;
+    --#{$prefix}-sys-color-tertiary-container: #2C4D34;
+    --#{$prefix}-sys-color-on-tertiary-container: #CAE7C3;
+
+    // Neutral colors
+    --#{$prefix}-sys-color-surface: #1B1C17;
+    --#{$prefix}-sys-color-surface-dim: #13140F;
+    --#{$prefix}-sys-color-surface-bright: #383932;
+    --#{$prefix}-sys-color-surface-container-lowest: #0F100B;
+    --#{$prefix}-sys-color-surface-container-low: #1B1C17;
+    --#{$prefix}-sys-color-surface-container: #1F201B;
+    --#{$prefix}-sys-color-surface-container-high: #292A25;
+    --#{$prefix}-sys-color-surface-container-highest: #34352F;
+    
+    --#{$prefix}-sys-color-on-surface: #E3E3DC;
+    --#{$prefix}-sys-color-on-surface-variant: #C9CCB7;
+    
+    --#{$prefix}-sys-color-outline: #929688;
+    --#{$prefix}-sys-color-outline-variant: #464840;
+
+    // Include status colors for dark theme
+    @include status-colors-dark();
+  }
+}