mtrl 0.0.3 → 0.1.2

package/src/styles/main.scss

@@ -1,78 +1,125 @@
 // src/styles/main.scss
 
-// Abstract
-@import 'abstract/variables';
-@import 'abstract/functions';
-@import 'abstract/mixins';
-@import 'abstract/theme';
+// Abstract layer
+@use 'abstract/base';
+@use 'abstract/variables';
+@use 'abstract/functions';
+@use 'abstract/mixins';
+@use 'abstract/theme';
+
+// Themes
+@use 'themes/index';
+
+// Reset
+@use 'base/reset';
+@use 'base/typography';
 
 // Components
-@import '../components/button/styles';
+@use '../components/button/styles';
+@use '../components/checkbox/styles';
+@use '../components/container/styles';
+@use '../components/list/styles';
+@use '../components/menu/styles';
+@use '../components/navigation/styles';
+@use '../components/snackbar/styles';
+@use '../components/switch/styles';
+@use '../components/textfield/styles';
+
+
+@use '../core/build/ripple/ripple';
 
-// Initialize theme
+// Utilities
+@use 'utilities/spacing';
+@use 'utilities/visibility';
+@use 'utilities/colors';
+@use 'utilities/flexbox';
+@use 'utilities/typography';
+
+// Initialize theme system
 :root {
-  @each $key, $value in $mtrl-sys-state {
-    --mtrl-sys-state-#{$key}: #{$value};
+  // Apply the base theme CSS variables
+  @include theme.light-theme;
+
+  // State layer variables
+  @each $key, $value in theme.$mtrl-sys-state {
+    --#{base.$prefix}-sys-state-#{$key}: #{$value};
   }
   
-  @each $key, $value in $mtrl-sys-motion {
-    --mtrl-sys-motion-#{$key}: #{$value};
+  // Motion variables
+  @each $key, $value in theme.$mtrl-sys-motion {
+    --#{base.$prefix}-sys-motion-#{$key}: #{$value};
   }
 
-  @each $key, $value in $mtrl-sys-shape {
-    --mtrl-sys-shape-#{$key}: #{$value};
+  // Shape variables
+  @each $key, $value in theme.$mtrl-sys-shape {
+    --#{base.$prefix}-sys-shape-#{$key}: #{$value};
   }
   
-//   // Default light theme colors
-//   --mtrl-sys-color-primary: #6750A4;
-//   --mtrl-sys-color-primary-rgb: 103, 80, 164;
-//   --mtrl-sys-color-on-primary: #FFFFFF;
-//   --mtrl-sys-color-primary-container: #EADDFF;
-//   --mtrl-sys-color-on-primary-container: #21005D;
-  
-//   --mtrl-sys-color-secondary: #625B71;
-//   --mtrl-sys-color-on-secondary: #FFFFFF;
-//   --mtrl-sys-color-secondary-container: #E8DEF8;
-//   --mtrl-sys-color-on-secondary-container: #1D192B;
-  
-//   --mtrl-sys-color-surface: #FFFBFE;
-//   --mtrl-sys-color-on-surface: #1C1B1F;
-//   --mtrl-sys-color-surface-container: #F3EDF7;
-//   --mtrl-sys-color-on-surface-rgb: 28, 27, 31;
-  
-//   --mtrl-sys-color-outline: #79747E;
-// }
-
-// // Dark theme
-// [data-theme="dark"] {
-//   --mtrl-sys-color-primary: #D0BCFF;
-//   --mtrl-sys-color-primary-rgb: 208, 188, 255;
-//   --mtrl-sys-color-on-primary: #381E72;
-//   --mtrl-sys-color-primary-container: #4F378B;
-//   --mtrl-sys-color-on-primary-container: #EADDFF;
-  
-//   --mtrl-sys-color-secondary: #CCC2DC;
-//   --mtrl-sys-color-on-secondary: #332D41;
-//   --mtrl-sys-color-secondary-container: #4A4458;
-//   --mtrl-sys-color-on-secondary-container: #E8DEF8;
-  
-//   --mtrl-sys-color-surface: #1C1B1F;
-//   --mtrl-sys-color-on-surface: #E6E1E5;
-//   --mtrl-sys-color-surface-container: #211F26;
-//   --mtrl-sys-color-on-surface-rgb: 230, 225, 229;
-  
-//   --mtrl-sys-color-outline: #938F99;
-// }
+  // Typography
+  @each $scale, $properties in variables.$typescale {
+    --#{base.$prefix}-sys-typescale-#{$scale}-font-family-name: #{nth(map-get($properties, font-family), 1)};
+    --#{base.$prefix}-sys-typescale-#{$scale}-font-family-fallback: #{if(length(map-get($properties, font-family)) > 1, nth(map-get($properties, font-family), 2), 'sans-serif')};
+    --#{base.$prefix}-sys-typescale-#{$scale}-font-size: #{map-get($properties, font-size)};
+    --#{base.$prefix}-sys-typescale-#{$scale}-line-height: #{map-get($properties, line-height)};
+    --#{base.$prefix}-sys-typescale-#{$scale}-letter-spacing: #{map-get($properties, letter-spacing)};
+    --#{base.$prefix}-sys-typescale-#{$scale}-font-weight: #{map-get($properties, font-weight)};
+  }
+}
+
+// Dark mode support
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    @include theme.dark-theme;
+  }
+}
 
 // Base styles
 body {
   margin: 0;
   padding: 0;
-  background-color: var(--mtrl-sys-color-surface);
-  color: var(--mtrl-sys-color-on-surface);
-  font-family: var(--mtrl-sys-typescale-body-medium-font-family-name, 'Roboto'), sans-serif;
+  background-color: var(--#{base.$prefix}-sys-color-surface);
+  color: var(--#{base.$prefix}-sys-color-on-surface);
+  font-family: var(--#{base.$prefix}-sys-typescale-body-medium-font-family-name, 'Roboto'), 
+               var(--#{base.$prefix}-sys-typescale-body-medium-font-family-fallback, sans-serif);
+  font-size: var(--#{base.$prefix}-sys-typescale-body-medium-font-size);
+  line-height: var(--#{base.$prefix}-sys-typescale-body-medium-line-height);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   
-  @include motion-transition(background-color, color);
+  @include mixins.motion-transition(background-color, color);
+}
+
+// Ensure links have the correct contrast
+a {
+  color: var(--#{base.$prefix}-sys-color-primary);
+  text-decoration: none;
+  
+  &:hover {
+    text-decoration: underline;
+  }
+  
+  &:focus-visible {
+    outline: 2px solid var(--#{base.$prefix}-sys-color-primary);
+    outline-offset: 2px;
+  }
+}
+
+// Focus styles for keyboard navigation
+:focus-visible {
+  outline: 2px solid var(--#{base.$prefix}-sys-color-primary);
+  outline-offset: 2px;
+}
+
+// Use smooth scrolling for the page
+html {
+  scroll-behavior: smooth;
+  
+  @include mixins.reduced-motion {
+    scroll-behavior: auto;
+  }
+}
+
+// Set box-sizing for all elements
+*, *::before, *::after {
+  box-sizing: border-box;
 }

package/src/styles/themes/_autumn.scss

@@ -0,0 +1,81 @@
+// src/styles/themes/_autumn.scss
+@use '../abstract/base' as *;
+@use 'base-theme' as *;
+
+@include create-theme('autumn') {
+  // Key colors with brown as primary and red as secondary
+  --#{$prefix}-sys-color-primary: #795548; // Rich brown as primary color
+  --#{$prefix}-sys-color-on-primary: #FFFFFF;
+  --#{$prefix}-sys-color-primary-container: #FFDCC7;
+  --#{$prefix}-sys-color-on-primary-container: #2C1500;
+  
+  --#{$prefix}-sys-color-secondary: #A02A2A; // Autumn red as secondary
+  --#{$prefix}-sys-color-on-secondary: #FFFFFF;
+  --#{$prefix}-sys-color-secondary-container: #FFDAD4;
+  --#{$prefix}-sys-color-on-secondary-container: #410001;
+  
+  --#{$prefix}-sys-color-tertiary: #4D6642; // Dark green like evergreen trees
+  --#{$prefix}-sys-color-on-tertiary: #FFFFFF;
+  --#{$prefix}-sys-color-tertiary-container: #CFE9BE;
+  --#{$prefix}-sys-color-on-tertiary-container: #0A2008;
+  
+  --#{$prefix}-sys-color-quaternary: #8B6500; // Golden yellow like autumn leaves
+  --#{$prefix}-sys-color-on-quaternary: #FFFFFF;
+  --#{$prefix}-sys-color-quaternary-container: #FFDF8A;
+  --#{$prefix}-sys-color-on-quaternary-container: #2C1F00;
+
+  // Neutral colors with warm, earthy undertones
+  --#{$prefix}-sys-color-surface: #FFFBF7;
+  --#{$prefix}-sys-color-surface-dim: #EAD7CE;
+  --#{$prefix}-sys-color-surface-bright: #FFFBF7;
+  --#{$prefix}-sys-color-surface-container-lowest: #FFFFFF;
+  --#{$prefix}-sys-color-surface-container-low: #FFF0EA;
+  --#{$prefix}-sys-color-surface-container: #F5E1D7;
+  --#{$prefix}-sys-color-surface-container-high: #EFDBD1;
+  --#{$prefix}-sys-color-surface-container-highest: #E9D5CB;
+  
+  --#{$prefix}-sys-color-on-surface: #201A17;
+  --#{$prefix}-sys-color-on-surface-variant: #53433C;
+  
+  --#{$prefix}-sys-color-outline: #85736C;
+  --#{$prefix}-sys-color-outline-variant: #D7C1BA;
+
+  &[data-theme-mode="dark"] {
+    // Key colors
+    --#{$prefix}-sys-color-primary: #DDB995; // Softer brown
+    --#{$prefix}-sys-color-on-primary: #422B09;
+    --#{$prefix}-sys-color-primary-container: #5D3F1C;
+    --#{$prefix}-sys-color-on-primary-container: #FFDCC7;
+    
+    --#{$prefix}-sys-color-secondary: #FFB4AB; // Vibrant red
+    --#{$prefix}-sys-color-on-secondary: #690004;
+    --#{$prefix}-sys-color-secondary-container: #93000A;
+    --#{$prefix}-sys-color-on-secondary-container: #FFDAD4;
+    
+    --#{$prefix}-sys-color-tertiary: #B4CCA4; // Muted green
+    --#{$prefix}-sys-color-on-tertiary: #213515;
+    --#{$prefix}-sys-color-tertiary-container: #384F2B;
+    --#{$prefix}-sys-color-on-tertiary-container: #CFE9BE;
+    
+    --#{$prefix}-sys-color-quaternary: #FFC147;
+    --#{$prefix}-sys-color-on-quaternary: #463300;
+    --#{$prefix}-sys-color-quaternary-container: #644900;
+    --#{$prefix}-sys-color-on-quaternary-container: #FFDF8A;
+
+    // Neutral colors
+    --#{$prefix}-sys-color-surface: #201A17;
+    --#{$prefix}-sys-color-surface-dim: #17120F;
+    --#{$prefix}-sys-color-surface-bright: #3D3631;
+    --#{$prefix}-sys-color-surface-container-lowest: #130E0B;
+    --#{$prefix}-sys-color-surface-container-low: #201A17;
+    --#{$prefix}-sys-color-surface-container: #241E1A;
+    --#{$prefix}-sys-color-surface-container-high: #2E2723;
+    --#{$prefix}-sys-color-surface-container-highest: #39322D;
+    
+    --#{$prefix}-sys-color-on-surface: #EDE0D9;
+    --#{$prefix}-sys-color-on-surface-variant: #D7C1BA;
+    
+    --#{$prefix}-sys-color-outline: #A08C85;
+    --#{$prefix}-sys-color-outline-variant: #53433C;
+  }
+}

package/src/styles/themes/_base-theme.scss

@@ -1,7 +1,6 @@
-// src/styles/themes/_default.scss
+// src/styles/themes/_base-theme.scss
 @use '../abstract/base' as *;
 
-
 // Base theme definition with common properties and structure
 @mixin create-theme($name) {
   [data-theme="#{$name}"] {
@@ -22,28 +21,4 @@
   --#{$prefix}-sys-shape-corner-medium: 12px;
   --#{$prefix}-sys-shape-corner-large: 16px;
   --#{$prefix}-sys-shape-corner-extra-large: 28px;
-}
-
-:root {
-  // Color scheme
-  --#{$prefix}-sys-color-primary: #6750A4;
-  --#{$prefix}-sys-color-primary-rgb: 103, 80, 164;
-  --#{$prefix}-sys-color-on-primary: #FFFFFF;
-  --#{$prefix}-sys-color-primary-container: #EADDFF;
-  --#{$prefix}-sys-color-on-primary-container: #21005D;
-  
-  --#{$prefix}-sys-color-secondary: #625B71;
-  --#{$prefix}-sys-color-on-secondary: #FFFFFF;
-  --#{$prefix}-sys-color-secondary-container: #E8DEF8;
-  --#{$prefix}-sys-color-on-secondary-container: #1D192B;
-  
-  --#{$prefix}-sys-color-surface: #FFFBFE;
-  --#{$prefix}-sys-color-on-surface: #1C1B1F;
-  --#{$prefix}-sys-color-on-surface-rgb: 28, 27, 31;
-  
-  --#{$prefix}-sys-color-outline: #79747E;
-}
-
-// [data-theme="dark"] {
-//   @include dark-theme;
-// }
+}

package/src/styles/themes/_baseline.scss

@@ -2,8 +2,8 @@
 @use '../abstract/base' as *;
 @use 'base-theme' as *;
 
-// Material Design 3 Baseline Theme
-@include create-theme('baseline') {
+// Variables for light theme (default)
+@mixin baseline-light-variables {
   // Key colors
   --#{$prefix}-sys-color-primary: #6750A4;
   --#{$prefix}-sys-color-on-primary: #FFFFFF;
@@ -47,44 +47,69 @@
   --#{$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;
+}
 
-  &[data-theme-mode="dark"] {
-    // Key colors
-    --#{$prefix}-sys-color-primary: #D0BCFF;
-    --#{$prefix}-sys-color-on-primary: #381E72;
-    --#{$prefix}-sys-color-primary-container: #4F378B;
-    --#{$prefix}-sys-color-on-primary-container: #EADDFF;
-    
-    --#{$prefix}-sys-color-secondary: #CCC2DC;
-    --#{$prefix}-sys-color-on-secondary: #332D41;
-    --#{$prefix}-sys-color-secondary-container: #4A4458;
-    --#{$prefix}-sys-color-on-secondary-container: #E8DEF8;
-    
-    --#{$prefix}-sys-color-tertiary: #EFB8C8;
-    --#{$prefix}-sys-color-on-tertiary: #492532;
-    --#{$prefix}-sys-color-tertiary-container: #633B48;
-    --#{$prefix}-sys-color-on-tertiary-container: #FFD8E4;
+// Variables for dark theme
+@mixin baseline-dark-variables {
+  // Key colors
+  --#{$prefix}-sys-color-primary: #D0BCFF;
+  --#{$prefix}-sys-color-on-primary: #381E72;
+  --#{$prefix}-sys-color-primary-container: #4F378B;
+  --#{$prefix}-sys-color-on-primary-container: #EADDFF;
+  
+  --#{$prefix}-sys-color-secondary: #CCC2DC;
+  --#{$prefix}-sys-color-on-secondary: #332D41;
+  --#{$prefix}-sys-color-secondary-container: #4A4458;
+  --#{$prefix}-sys-color-on-secondary-container: #E8DEF8;
+  
+  --#{$prefix}-sys-color-tertiary: #EFB8C8;
+  --#{$prefix}-sys-color-on-tertiary: #492532;
+  --#{$prefix}-sys-color-tertiary-container: #633B48;
+  --#{$prefix}-sys-color-on-tertiary-container: #FFD8E4;
 
-    // Neutral colors
-    --#{$prefix}-sys-color-surface: #1C1B1F;
-    --#{$prefix}-sys-color-surface-dim: #141218;
-    --#{$prefix}-sys-color-surface-bright: #3B383D;
-    --#{$prefix}-sys-color-surface-container-lowest: #0F0D13;
-    --#{$prefix}-sys-color-surface-container-low: #1D1B20;
-    --#{$prefix}-sys-color-surface-container: #211F26;
-    --#{$prefix}-sys-color-surface-container-high: #2B2930;
-    --#{$prefix}-sys-color-surface-container-highest: #36343B;
-    
-    --#{$prefix}-sys-color-on-surface: #E6E1E5;
-    --#{$prefix}-sys-color-on-surface-variant: #CAC4D0;
-    
-    // Additional colors
-    --#{$prefix}-sys-color-outline: #938F99;
-    --#{$prefix}-sys-color-outline-variant: #444746;
-    --#{$prefix}-sys-color-shadow: #000000;
-    --#{$prefix}-sys-color-scrim: #000000;
-    --#{$prefix}-sys-color-inverse-surface: #E6E1E5;
-    --#{$prefix}-sys-color-inverse-on-surface: #313033;
-    --#{$prefix}-sys-color-inverse-primary: #6750A4;
+  // Neutral colors
+  --#{$prefix}-sys-color-surface: #1C1B1F;
+  --#{$prefix}-sys-color-surface-dim: #141218;
+  --#{$prefix}-sys-color-surface-bright: #3B383D;
+  --#{$prefix}-sys-color-surface-container-lowest: #0F0D13;
+  --#{$prefix}-sys-color-surface-container-low: #1D1B20;
+  --#{$prefix}-sys-color-surface-container: #211F26;
+  --#{$prefix}-sys-color-surface-container-high: #2B2930;
+  --#{$prefix}-sys-color-surface-container-highest: #36343B;
+  
+  --#{$prefix}-sys-color-on-surface: #E6E1E5;
+  --#{$prefix}-sys-color-on-surface-variant: #CAC4D0;
+  
+  // Additional colors
+  --#{$prefix}-sys-color-outline: #938F99;
+  --#{$prefix}-sys-color-outline-variant: #444746;
+  --#{$prefix}-sys-color-shadow: #000000;
+  --#{$prefix}-sys-color-scrim: #000000;
+  --#{$prefix}-sys-color-inverse-surface: #E6E1E5;
+  --#{$prefix}-sys-color-inverse-on-surface: #313033;
+  --#{$prefix}-sys-color-inverse-primary: #6750A4;
+}
+
+// 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/_forest.scss

@@ -3,69 +3,69 @@
 @use 'base-theme' as *;
 
 @include create-theme('forest') {
-  // Key colors generated from seed color #2E7D32
-  --#{$prefix}-sys-color-primary: #146C2E;
+  // 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: #9FF6A5;
-  --#{$prefix}-sys-color-on-primary-container: #002107;
+  --#{$prefix}-sys-color-primary-container: #C1D1A8;
+  --#{$prefix}-sys-color-on-primary-container: #121D04;
   
-  --#{$prefix}-sys-color-secondary: #516351;
+  --#{$prefix}-sys-color-secondary: #5D5242;
   --#{$prefix}-sys-color-on-secondary: #FFFFFF;
-  --#{$prefix}-sys-color-secondary-container: #D4E8D2;
-  --#{$prefix}-sys-color-on-secondary-container: #0F1F0F;
+  --#{$prefix}-sys-color-secondary-container: #E1D6C4;
+  --#{$prefix}-sys-color-on-secondary-container: #201A10;
   
-  --#{$prefix}-sys-color-tertiary: #38656A;
+  --#{$prefix}-sys-color-tertiary: #486446;
   --#{$prefix}-sys-color-on-tertiary: #FFFFFF;
-  --#{$prefix}-sys-color-tertiary-container: #BCEBF0;
-  --#{$prefix}-sys-color-on-tertiary-container: #002023;
+  --#{$prefix}-sys-color-tertiary-container: #CAE7C3;
+  --#{$prefix}-sys-color-on-tertiary-container: #0A2010;
 
-  // Neutral colors
-  --#{$prefix}-sys-color-surface: #FBFDF7;
-  --#{$prefix}-sys-color-surface-dim: #DBE5D8;
-  --#{$prefix}-sys-color-surface-bright: #FBFDF7;
+  // 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: #F5F9F2;
-  --#{$prefix}-sys-color-surface-container: #EFF4EC;
-  --#{$prefix}-sys-color-surface-container-high: #E9EEE6;
-  --#{$prefix}-sys-color-surface-container-highest: #E3E8E0;
+  --#{$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: #191C19;
-  --#{$prefix}-sys-color-on-surface-variant: #414942;
+  --#{$prefix}-sys-color-on-surface: #1B1C17;
+  --#{$prefix}-sys-color-on-surface-variant: #464840;
   
-  --#{$prefix}-sys-color-outline: #717971;
-  --#{$prefix}-sys-color-outline-variant: #C1C9C1;
+  --#{$prefix}-sys-color-outline: #767B6F;
+  --#{$prefix}-sys-color-outline-variant: #C9CCB7;
 
   &[data-theme-mode="dark"] {
     // Key colors
-    --#{$prefix}-sys-color-primary: #83D989;
-    --#{$prefix}-sys-color-on-primary: #003911;
-    --#{$prefix}-sys-color-primary-container: #00531B;
-    --#{$prefix}-sys-color-on-primary-container: #9FF6A5;
+    --#{$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: #B8CCB7;
-    --#{$prefix}-sys-color-on-secondary: #243424;
-    --#{$prefix}-sys-color-secondary-container: #3A4B3A;
-    --#{$prefix}-sys-color-on-secondary-container: #D4E8D2;
+    --#{$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: #A0CFD4;
-    --#{$prefix}-sys-color-on-tertiary: #003739;
-    --#{$prefix}-sys-color-tertiary-container: #1E4D51;
-    --#{$prefix}-sys-color-on-tertiary-container: #BCEBF0;
+    --#{$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: #191C19;
-    --#{$prefix}-sys-color-surface-dim: #101410;
-    --#{$prefix}-sys-color-surface-bright: #373B37;
-    --#{$prefix}-sys-color-surface-container-lowest: #0C100C;
-    --#{$prefix}-sys-color-surface-container-low: #191C19;
-    --#{$prefix}-sys-color-surface-container: #1D201D;
-    --#{$prefix}-sys-color-surface-container-high: #272B27;
-    --#{$prefix}-sys-color-surface-container-highest: #323532;
+    --#{$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: #E1E3E1;
-    --#{$prefix}-sys-color-on-surface-variant: #C1C9C1;
+    --#{$prefix}-sys-color-on-surface: #E3E3DC;
+    --#{$prefix}-sys-color-on-surface-variant: #C9CCB7;
     
-    --#{$prefix}-sys-color-outline: #8B938B;
-    --#{$prefix}-sys-color-outline-variant: #414942;
+    --#{$prefix}-sys-color-outline: #929688;
+    --#{$prefix}-sys-color-outline-variant: #464840;
   }
 }

package/src/styles/themes/_spring.scss

@@ -0,0 +1,71 @@
+// 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;
+
+  &[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;
+  }
+}