mtrl 0.5.2 → 0.5.3

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/_index.scss

@@ -0,0 +1,19 @@
+// src/styles/themes/_index.scss
+@forward 'base-theme';
+@forward 'baseline';
+
+@forward 'ocean';
+@forward 'forest';
+@forward 'sunset';
+
+@forward 'spring';
+@forward 'summer';
+@forward 'autumn';
+@forward 'winter';
+
+@forward 'brownbeige';
+@forward 'browngreen';
+@forward 'sageivory';
+@forward 'tealcaramel';
+
+@forward 'material';

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

@@ -0,0 +1,77 @@
+// src/styles/themes/_ocean.scss
+@use '../abstract/base' as *;
+@use 'base-theme' as *;
+
+@include create-theme('ocean') {
+  // Key colors generated from seed color #006C9C
+  --#{$prefix}-sys-color-primary: #006493;
+  --#{$prefix}-sys-color-on-primary: #FFFFFF;
+  --#{$prefix}-sys-color-primary-container: #CCE5FF;
+  --#{$prefix}-sys-color-on-primary-container: #001E30;
+  
+  --#{$prefix}-sys-color-secondary: #4F616E;
+  --#{$prefix}-sys-color-on-secondary: #FFFFFF;
+  --#{$prefix}-sys-color-secondary-container: #D2E5F5;
+  --#{$prefix}-sys-color-on-secondary-container: #0B1D29;
+  
+  --#{$prefix}-sys-color-tertiary: #625B71;
+  --#{$prefix}-sys-color-on-tertiary: #FFFFFF;
+  --#{$prefix}-sys-color-tertiary-container: #E9DEFA;
+  --#{$prefix}-sys-color-on-tertiary-container: #1E192C;
+
+  // Neutral colors
+  --#{$prefix}-sys-color-surface: #F8FDFF;
+  --#{$prefix}-sys-color-surface-dim: #D8E5ED;
+  --#{$prefix}-sys-color-surface-bright: #F8FDFF;
+  --#{$prefix}-sys-color-surface-container-lowest: #FFFFFF;
+  --#{$prefix}-sys-color-surface-container-low: #F3F8FC;
+  --#{$prefix}-sys-color-surface-container: #EDF3F7;
+  --#{$prefix}-sys-color-surface-container-high: #E7EDF2;
+  --#{$prefix}-sys-color-surface-container-highest: #E1E7EC;
+  
+  --#{$prefix}-sys-color-on-surface: #191C1E;
+  --#{$prefix}-sys-color-on-surface-variant: #41484D;
+  
+  --#{$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;
+    --#{$prefix}-sys-color-on-primary: #003351;
+    --#{$prefix}-sys-color-primary-container: #004B74;
+    --#{$prefix}-sys-color-on-primary-container: #CCE5FF;
+    
+    --#{$prefix}-sys-color-secondary: #B6C9D8;
+    --#{$prefix}-sys-color-on-secondary: #21323E;
+    --#{$prefix}-sys-color-secondary-container: #374956;
+    --#{$prefix}-sys-color-on-secondary-container: #D2E5F5;
+    
+    --#{$prefix}-sys-color-tertiary: #CCC2DC;
+    --#{$prefix}-sys-color-on-tertiary: #332D41;
+    --#{$prefix}-sys-color-tertiary-container: #4A4458;
+    --#{$prefix}-sys-color-on-tertiary-container: #E9DEFA;
+
+    // Neutral colors
+    --#{$prefix}-sys-color-surface: #191C1E;
+    --#{$prefix}-sys-color-surface-dim: #101416;
+    --#{$prefix}-sys-color-surface-bright: #373B3D;
+    --#{$prefix}-sys-color-surface-container-lowest: #0C0E10;
+    --#{$prefix}-sys-color-surface-container-low: #191C1E;
+    --#{$prefix}-sys-color-surface-container: #1D2022;
+    --#{$prefix}-sys-color-surface-container-high: #272A2C;
+    --#{$prefix}-sys-color-surface-container-highest: #323536;
+    
+    --#{$prefix}-sys-color-on-surface: #E1E3E4;
+    --#{$prefix}-sys-color-on-surface-variant: #C1C8CD;
+    
+    --#{$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

@@ -0,0 +1,77 @@
+// src/styles/themes/_spring.scss
+@use '../abstract/base' as *;
+@use 'base-theme' as *;
+
+@include create-theme('spring') {
+  // Key colors generated from seed color #76D275 (fresh spring green)
+  --#{$prefix}-sys-color-primary: #006E2B;
+  --#{$prefix}-sys-color-on-primary: #FFFFFF;
+  --#{$prefix}-sys-color-primary-container: #95F99A;
+  --#{$prefix}-sys-color-on-primary-container: #002108;
+  
+  --#{$prefix}-sys-color-secondary: #526350;
+  --#{$prefix}-sys-color-on-secondary: #FFFFFF;
+  --#{$prefix}-sys-color-secondary-container: #D5E8CF;
+  --#{$prefix}-sys-color-on-secondary-container: #101F10;
+  
+  --#{$prefix}-sys-color-tertiary: #386667;
+  --#{$prefix}-sys-color-on-tertiary: #FFFFFF;
+  --#{$prefix}-sys-color-tertiary-container: #BBECEE;
+  --#{$prefix}-sys-color-on-tertiary-container: #002021;
+
+  // Neutral colors
+  --#{$prefix}-sys-color-surface: #F8FFF3;
+  --#{$prefix}-sys-color-surface-dim: #D9E8D3;
+  --#{$prefix}-sys-color-surface-bright: #F8FFF3;
+  --#{$prefix}-sys-color-surface-container-lowest: #FFFFFF;
+  --#{$prefix}-sys-color-surface-container-low: #F2FAED;
+  --#{$prefix}-sys-color-surface-container: #ECF4E7;
+  --#{$prefix}-sys-color-surface-container-high: #E6EEE1;
+  --#{$prefix}-sys-color-surface-container-highest: #E0E8DB;
+  
+  --#{$prefix}-sys-color-on-surface: #191D19;
+  --#{$prefix}-sys-color-on-surface-variant: #424940;
+  
+  --#{$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;
+    --#{$prefix}-sys-color-on-primary: #003914;
+    --#{$prefix}-sys-color-primary-container: #00531F;
+    --#{$prefix}-sys-color-on-primary-container: #95F99A;
+    
+    --#{$prefix}-sys-color-secondary: #B9CCB3;
+    --#{$prefix}-sys-color-on-secondary: #263424;
+    --#{$prefix}-sys-color-secondary-container: #3C4B3A;
+    --#{$prefix}-sys-color-on-secondary-container: #D5E8CF;
+    
+    --#{$prefix}-sys-color-tertiary: #A0D0D2;
+    --#{$prefix}-sys-color-on-tertiary: #003738;
+    --#{$prefix}-sys-color-tertiary-container: #1F4E4F;
+    --#{$prefix}-sys-color-on-tertiary-container: #BBECEE;
+
+    // Neutral colors
+    --#{$prefix}-sys-color-surface: #121711;
+    --#{$prefix}-sys-color-surface-dim: #0D120C;
+    --#{$prefix}-sys-color-surface-bright: #2D3229;
+    --#{$prefix}-sys-color-surface-container-lowest: #0A0F09;
+    --#{$prefix}-sys-color-surface-container-low: #121711;
+    --#{$prefix}-sys-color-surface-container: #161B15;
+    --#{$prefix}-sys-color-surface-container-high: #20251E;
+    --#{$prefix}-sys-color-surface-container-highest: #2A2F27;
+    
+    --#{$prefix}-sys-color-on-surface: #D9E3D4;
+    --#{$prefix}-sys-color-on-surface-variant: #C1C9BE;
+    
+    --#{$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

@@ -0,0 +1,87 @@
+// src/styles/themes/_summer.scss
+@use '../abstract/base' as *;
+@use 'base-theme' as *;
+
+@include create-theme('summer') {
+  // Key colors inspired by Chuck Jones' Road Runner desert palette
+  --#{$prefix}-sys-color-primary: #4196CB; // Bright desert sky blue
+  --#{$prefix}-sys-color-on-primary: #FFFFFF;
+  --#{$prefix}-sys-color-primary-container: #D1E4FF;
+  --#{$prefix}-sys-color-on-primary-container: #001D36;
+  
+  --#{$prefix}-sys-color-secondary: #F3C649; // Desert sand/yellow
+  --#{$prefix}-sys-color-on-secondary: #3E2E00;
+  --#{$prefix}-sys-color-secondary-container: #FFF4D5;
+  --#{$prefix}-sys-color-on-secondary-container: #291F00;
+  
+  --#{$prefix}-sys-color-tertiary: #A75B39; // Mesa rock orange-brown
+  --#{$prefix}-sys-color-on-tertiary: #FFFFFF;
+  --#{$prefix}-sys-color-tertiary-container: #FFDBC8;
+  --#{$prefix}-sys-color-on-tertiary-container: #3A1600;
+
+  // Accent colors for more variety
+  --#{$prefix}-sys-color-accent: #6B4596; // Road Runner purple
+  --#{$prefix}-sys-color-on-accent: #FFFFFF;
+  --#{$prefix}-sys-color-accent-container: #EBDCFF;
+  --#{$prefix}-sys-color-on-accent-container: #25005C;
+  
+  // Neutral colors with desert warmth
+  --#{$prefix}-sys-color-surface: #FFFBF8;
+  --#{$prefix}-sys-color-surface-dim: #EAE2D9;
+  --#{$prefix}-sys-color-surface-bright: #FFFBF8;
+  --#{$prefix}-sys-color-surface-container-lowest: #FFFFFF;
+  --#{$prefix}-sys-color-surface-container-low: #FEF5ED;
+  --#{$prefix}-sys-color-surface-container: #F7EFE7;
+  --#{$prefix}-sys-color-surface-container-high: #F1E9E1;
+  --#{$prefix}-sys-color-surface-container-highest: #EBE3DB;
+  
+  --#{$prefix}-sys-color-on-surface: #1F1B16;
+  --#{$prefix}-sys-color-on-surface-variant: #50453B;
+  
+  --#{$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;
+    --#{$prefix}-sys-color-on-primary: #003258;
+    --#{$prefix}-sys-color-primary-container: #00497D;
+    --#{$prefix}-sys-color-on-primary-container: #D1E4FF;
+    
+    --#{$prefix}-sys-color-secondary: #DBC054;
+    --#{$prefix}-sys-color-on-secondary: #3E2E00;
+    --#{$prefix}-sys-color-secondary-container: #584400;
+    --#{$prefix}-sys-color-on-secondary-container: #FFF4D5;
+    
+    --#{$prefix}-sys-color-tertiary: #FFB694;
+    --#{$prefix}-sys-color-on-tertiary: #5C2900;
+    --#{$prefix}-sys-color-tertiary-container: #803D15;
+    --#{$prefix}-sys-color-on-tertiary-container: #FFDBC8;
+    
+    --#{$prefix}-sys-color-accent: #D0BCFF;
+    --#{$prefix}-sys-color-on-accent: #381E72;
+    --#{$prefix}-sys-color-accent-container: #503396;
+    --#{$prefix}-sys-color-on-accent-container: #EBDCFF;
+
+    // Neutral colors
+    --#{$prefix}-sys-color-surface: #1F1B16;
+    --#{$prefix}-sys-color-surface-dim: #16130F;
+    --#{$prefix}-sys-color-surface-bright: #3B362F;
+    --#{$prefix}-sys-color-surface-container-lowest: #130F0B;
+    --#{$prefix}-sys-color-surface-container-low: #1F1B16;
+    --#{$prefix}-sys-color-surface-container: #231F19;
+    --#{$prefix}-sys-color-surface-container-high: #2D2921;
+    --#{$prefix}-sys-color-surface-container-highest: #38332B;
+    
+    --#{$prefix}-sys-color-on-surface: #EAE1D9;
+    --#{$prefix}-sys-color-on-surface-variant: #D5C8B9;
+    
+    --#{$prefix}-sys-color-outline: #9E8F80;
+    --#{$prefix}-sys-color-outline-variant: #50453B;
+    // Include status colors for dark theme
+    @include status-colors-dark();
+  }
+}