mtrl 0.0.0

package/src/styles/abstract/_mixins.scss

@@ -0,0 +1,261 @@
+// src/styles/abstract/_mixins.scss
+@use 'sass:map';
+@use 'sass:list';
+@use 'variables' as v;
+@use 'functions' as f;
+
+// Typography
+@mixin typography($scale) {
+  $styles: f.get-typography($scale);
+  font-family: map.get($styles, 'font-family');
+  font-size: map.get($styles, 'font-size');
+  line-height: map.get($styles, 'line-height');
+  letter-spacing: map.get($styles, 'letter-spacing');
+  font-weight: map.get($styles, 'font-weight');
+}
+
+// State Layers
+@mixin state-layer($color, $state: 'hover', $selector: '&::before') {
+  position: relative;
+  
+  #{$selector} {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: $color;
+    opacity: f.get-state-opacity($state);
+    pointer-events: none;
+    border-radius: inherit;
+  }
+}
+
+// Elevation
+@mixin elevation($level) {
+  box-shadow: f.get-elevation($level);
+}
+
+// Motion
+@mixin motion-transition($properties...) {
+  $transitions: ();
+  @each $prop in $properties {
+    $transitions: list.append(
+      $transitions,
+      $prop f.get-motion-duration('short2') f.get-motion-easing('standard'),
+      comma
+    );
+  }
+  transition: $transitions;
+}
+
+@mixin motion-exit($properties...) {
+  $transitions: ();
+  @each $prop in $properties {
+    $transitions: list.append(
+      $transitions,
+      $prop f.get-motion-duration('short4') f.get-motion-easing('standard-accelerate'),
+      comma
+    );
+  }
+  transition: $transitions;
+}
+
+@mixin motion-enter($properties...) {
+  $transitions: ();
+  @each $prop in $properties {
+    $transitions: list.append(
+      $transitions,
+      $prop f.get-motion-duration('short4') f.get-motion-easing('standard-decelerate'),
+      comma
+    );
+  }
+  transition: $transitions;
+}
+
+// Focus Ring
+@mixin focus-ring($color: var(--#{v.$prefix}-sys-color-primary), $width: 2px, $offset: 2px) {
+  &:focus-visible {
+    outline: $width solid $color;
+    outline-offset: $offset;
+    @include elevation(1);
+  }
+}
+
+// Interactive States
+@mixin interactive-states($config: ()) {
+  $default-config: (
+    base-color: var(--#{v.$prefix}-sys-color-primary),
+    hover-state: true,
+    focus-state: true,
+    active-state: true,
+    disabled-state: true,
+    disabled-opacity: 0.38
+  );
+  
+  $config: map.merge($default-config, $config);
+  
+  @if map.get($config, hover-state) {
+    &:hover {
+      @include state-layer(map.get($config, base-color), 'hover');
+    }
+  }
+  
+  @if map.get($config, focus-state) {
+    &:focus {
+      @include state-layer(map.get($config, base-color), 'focus');
+    }
+  }
+  
+  @if map.get($config, active-state) {
+    &:active {
+      @include state-layer(map.get($config, base-color), 'pressed');
+    }
+  }
+  
+  @if map.get($config, disabled-state) {
+    &:disabled {
+      opacity: map.get($config, disabled-opacity);
+      pointer-events: none;
+    }
+  }
+}
+
+// Layout
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin center-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@mixin container($max-width: 1200px, $padding: 24px) {
+  width: 100%;
+  max-width: $max-width;
+  margin-inline: auto;
+  padding-inline: $padding;
+}
+
+// Text
+@mixin truncate($lines: 1) {
+  @if $lines == 1 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  } @else {
+    display: -webkit-box;
+    -webkit-line-clamp: $lines;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}
+
+// Shape
+@mixin shape($size) {
+  border-radius: f.get-shape($size);
+}
+
+// Media Queries
+@mixin breakpoint-up($size) {
+  @media (min-width: f.get-breakpoint($size)) {
+    @content;
+  }
+}
+
+@mixin breakpoint-down($size) {
+  @media (max-width: f.get-breakpoint($size) - 1) {
+    @content;
+  }
+}
+
+@mixin breakpoint-between($min, $max) {
+  @media (min-width: f.get-breakpoint($min)) and (max-width: f.get-breakpoint($max) - 1) {
+    @content;
+  }
+}
+
+// A11y
+@mixin visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@mixin reduced-motion {
+  @media (prefers-reduced-motion: reduce) {
+    @content;
+  }
+}
+
+@mixin high-contrast {
+  @media (forced-colors: active) {
+    @content;
+  }
+}
+
+// RTL Support
+@mixin rtl {
+  [dir='rtl'] & {
+    @content;
+  }
+}
+
+// Touch Target
+@mixin touch-target($size: 48px) {
+  position: relative;
+  
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 50%;
+    width: $size;
+    height: $size;
+    transform: translate(-50%, -50%);
+  }
+}
+
+// Scrollbars
+@mixin custom-scrollbar($config: ()) {
+  $default-config: (
+    width: 8px,
+    track-color: transparent,
+    thumb-color: rgba(0, 0, 0, 0.2),
+    thumb-hover-color: rgba(0, 0, 0, 0.3)
+  );
+  
+  $config: map.merge($default-config, $config);
+  
+  &::-webkit-scrollbar {
+    width: map.get($config, width);
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: map.get($config, track-color);
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: map.get($config, thumb-color);
+    border-radius: f.get-shape('full');
+    
+    &:hover {
+      background: map.get($config, thumb-hover-color);
+    }
+  }
+}
+
+// Print
+@mixin print {
+  @media print {
+    @content;
+  }
+}

package/src/styles/abstract/_variables.scss

@@ -0,0 +1,158 @@
+// src/styles/abstract/_variables.scss
+@use 'sass:map';
+
+// Core configuration
+$prefix: 'mtrl' !default;
+
+// Design tokens
+$state: (
+  'hover-state-layer-opacity': 0.08,
+  'pressed-state-layer-opacity': 0.12,
+  'focus-state-layer-opacity': 0.12,
+  'dragged-state-layer-opacity': 0.16
+) !default;
+
+$motion: (
+  'duration-short1': 100ms,
+  'duration-short2': 200ms,
+  'duration-short3': 250ms,
+  'duration-short4': 300ms,
+  'duration-medium1': 400ms,
+  'duration-medium2': 500ms,
+  'duration-long1': 600ms,
+  'duration-long2': 700ms,
+  'easing-standard': cubic-bezier(0.2, 0.0, 0.0, 1.0),
+  'easing-standard-accelerate': cubic-bezier(0.3, 0.0, 1.0, 1.0),
+  'easing-standard-decelerate': cubic-bezier(0.0, 0.0, 0.2, 1.0),
+  'easing-emphasized': cubic-bezier(0.2, 0.0, 0.0, 1.0),
+  'easing-emphasized-accelerate': cubic-bezier(0.3, 0.0, 0.8, 0.15),
+  'easing-emphasized-decelerate': cubic-bezier(0.05, 0.7, 0.1, 1.0)
+) !default;
+
+$elevation: (
+  'level-0': none,
+  'level-1': (0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)),
+  'level-2': (0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15)),
+  'level-3': (0px 1px 3px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15)),
+  'level-4': (0px 2px 3px rgba(0, 0, 0, 0.3), 0px 6px 10px 4px rgba(0, 0, 0, 0.15)),
+  'level-5': (0px 4px 4px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15))
+) !default;
+
+$typescale: (
+  'display-large': (
+    'font-family': ('Roboto', sans-serif),
+    'font-size': 57px,
+    'line-height': 64px,
+    'letter-spacing': -0.25px,
+    'font-weight': 400
+  ),
+  'display-medium': (
+    'font-family': ('Roboto', sans-serif),
+    'font-size': 45px,
+    'line-height': 52px,
+    'letter-spacing': 0,
+    'font-weight': 400
+  ),
+  'display-small': (
+    'font-family': ('Roboto', sans-serif),
+    'font-size': 36px,
+    'line-height': 44px,
+    'letter-spacing': 0,
+    'font-weight': 400
+  ),
+  'headline-large': (
+    'font-family': ('Roboto', sans-serif),
+    'font-size': 32px,
+    'line-height': 40px,
+    'letter-spacing': 0,
+    'font-weight': 400
+  ),
+  'headline-medium': (
+    'font-family': ('Roboto', sans-serif),
+    'font-size': 28px,
+    'line-height': 36px,
+    'letter-spacing': 0,
+    'font-weight': 400
+  ),
+  'headline-small': (
+    'font-family': ('Roboto', sans-serif),
+    'font-size': 24px,
+    'line-height': 32px,
+    'letter-spacing': 0,
+    'font-weight': 400
+  ),
+  'body-large': (
+    'font-family': ('Roboto', sans-serif),
+    'font-size': 16px,
+    'line-height': 24px,
+    'letter-spacing': 0.5px,
+    'font-weight': 400
+  ),
+  'body-medium': (
+    'font-family': ('Roboto', sans-serif),
+    'font-size': 14px,
+    'line-height': 20px,
+    'letter-spacing': 0.25px,
+    'font-weight': 400
+  ),
+  'body-small': (
+    'font-family': ('Roboto', sans-serif),
+    'font-size': 12px,
+    'line-height': 16px,
+    'letter-spacing': 0.4px,
+    'font-weight': 400
+  ),
+  'label-large': (
+    'font-family': ('Roboto', sans-serif),
+    'font-size': 14px,
+    'line-height': 20px,
+    'letter-spacing': 0.1px,
+    'font-weight': 500
+  ),
+  'label-medium': (
+    'font-family': ('Roboto', sans-serif),
+    'font-size': 12px,
+    'line-height': 16px,
+    'letter-spacing': 0.5px,
+    'font-weight': 500
+  ),
+  'label-small': (
+    'font-family': ('Roboto', sans-serif),
+    'font-size': 11px,
+    'line-height': 16px,
+    'letter-spacing': 0.5px,
+    'font-weight': 500
+  )
+) !default;
+
+$shape: (
+  'none': 0,
+  'extra-small': 4px,
+  'small': 8px,
+  'medium': 12px,
+  'large': 16px,
+  'extra-large': 28px,
+  'full': 9999px,
+  'pill': 100px
+) !default;
+
+$breakpoints: (
+  'xs': 0,
+  'sm': 600px,
+  'md': 960px,
+  'lg': 1280px,
+  'xl': 1920px
+) !default;
+
+$z-index: (
+  'modal': 1000,
+  'popover': 900,
+  'drawer': 800,
+  'dialog': 700,
+  'dropdown': 600,
+  'tooltip': 500,
+  'sticky': 100,
+  'fixed': 50,
+  'default': 1,
+  'below': -1
+) !default;

package/src/styles/main.scss

@@ -0,0 +1,78 @@
+// src/styles/main.scss
+
+// Abstract
+@import 'abstract/variables';
+@import 'abstract/functions';
+@import 'abstract/mixins';
+@import 'abstract/theme';
+
+// Components
+@import '../components/button/styles';
+
+// Initialize theme
+:root {
+  @each $key, $value in $mtrl-sys-state {
+    --mtrl-sys-state-#{$key}: #{$value};
+  }
+  
+  @each $key, $value in $mtrl-sys-motion {
+    --mtrl-sys-motion-#{$key}: #{$value};
+  }
+
+  @each $key, $value in $mtrl-sys-shape {
+    --mtrl-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;
+// }
+
+// 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;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  
+  @include motion-transition(background-color, color);
+}

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

@@ -0,0 +1,49 @@
+// src/styles/themes/_default.scss
+@use '../abstract/base' as *;
+
+
+// Base theme definition with common properties and structure
+@mixin create-theme($name) {
+  [data-theme="#{$name}"] {
+    @content;
+  }
+}
+
+%theme-base {
+  // Common properties for all themes
+  --#{$prefix}-sys-typescale-label-large-font-family-name: "Roboto";
+  --#{$prefix}-sys-typescale-label-large-font-weight: 500;
+  --#{$prefix}-sys-typescale-label-large-size: 0.875rem;
+  --#{$prefix}-sys-typescale-label-large-line-height: 1.25rem;
+  --#{$prefix}-sys-typescale-label-large-letter-spacing: 0.00625rem;
+
+  --#{$prefix}-sys-shape-corner-extra-small: 4px;
+  --#{$prefix}-sys-shape-corner-small: 8px;
+  --#{$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

@@ -0,0 +1,90 @@
+// src/styles/themes/_baseline.scss
+@use '../abstract/base' as *;
+@use 'base-theme' as *;
+
+// Material Design 3 Baseline Theme
+@include create-theme('baseline') {
+  // Key colors
+  --#{$prefix}-sys-color-primary: #6750A4;
+  --#{$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-tertiary: #7D5260;
+  --#{$prefix}-sys-color-on-tertiary: #FFFFFF;
+  --#{$prefix}-sys-color-tertiary-container: #FFD8E4;
+  --#{$prefix}-sys-color-on-tertiary-container: #31111D;
+
+  // Neutral colors
+  --#{$prefix}-sys-color-surface: #FFFBFE;
+  --#{$prefix}-sys-color-surface-dim: #DED8E1;
+  --#{$prefix}-sys-color-surface-bright: #FFF8F7;
+  --#{$prefix}-sys-color-surface-container-lowest: #FFFFFF;
+  --#{$prefix}-sys-color-surface-container-low: #F7F2FA;
+  --#{$prefix}-sys-color-surface-container: #F3EDF7;
+  --#{$prefix}-sys-color-surface-container-high: #ECE6F0;
+  --#{$prefix}-sys-color-surface-container-highest: #E6E0E9;
+  
+  --#{$prefix}-sys-color-on-surface: #1C1B1F;
+  --#{$prefix}-sys-color-on-surface-variant: #49454F;
+  
+  // Additional colors
+  --#{$prefix}-sys-color-outline: #79747E;
+  --#{$prefix}-sys-color-outline-variant: #CAC4D0;
+  --#{$prefix}-sys-color-shadow: #000000;
+  --#{$prefix}-sys-color-scrim: #000000;
+  --#{$prefix}-sys-color-inverse-surface: #313033;
+  --#{$prefix}-sys-color-inverse-on-surface: #F4EFF4;
+  --#{$prefix}-sys-color-inverse-primary: #D0BCFF;
+
+  // 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;
+
+  &[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;
+
+    // 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;
+  }
+}

package/src/styles/themes/_forest.scss

@@ -0,0 +1,71 @@
+// src/styles/themes/_forest.scss
+@use '../abstract/base' as *;
+@use 'base-theme' as *;
+
+@include create-theme('forest') {
+  // Key colors generated from seed color #2E7D32
+  --#{$prefix}-sys-color-primary: #146C2E;
+  --#{$prefix}-sys-color-on-primary: #FFFFFF;
+  --#{$prefix}-sys-color-primary-container: #9FF6A5;
+  --#{$prefix}-sys-color-on-primary-container: #002107;
+  
+  --#{$prefix}-sys-color-secondary: #516351;
+  --#{$prefix}-sys-color-on-secondary: #FFFFFF;
+  --#{$prefix}-sys-color-secondary-container: #D4E8D2;
+  --#{$prefix}-sys-color-on-secondary-container: #0F1F0F;
+  
+  --#{$prefix}-sys-color-tertiary: #38656A;
+  --#{$prefix}-sys-color-on-tertiary: #FFFFFF;
+  --#{$prefix}-sys-color-tertiary-container: #BCEBF0;
+  --#{$prefix}-sys-color-on-tertiary-container: #002023;
+
+  // Neutral colors
+  --#{$prefix}-sys-color-surface: #FBFDF7;
+  --#{$prefix}-sys-color-surface-dim: #DBE5D8;
+  --#{$prefix}-sys-color-surface-bright: #FBFDF7;
+  --#{$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-on-surface: #191C19;
+  --#{$prefix}-sys-color-on-surface-variant: #414942;
+  
+  --#{$prefix}-sys-color-outline: #717971;
+  --#{$prefix}-sys-color-outline-variant: #C1C9C1;
+
+  &[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-secondary: #B8CCB7;
+    --#{$prefix}-sys-color-on-secondary: #243424;
+    --#{$prefix}-sys-color-secondary-container: #3A4B3A;
+    --#{$prefix}-sys-color-on-secondary-container: #D4E8D2;
+    
+    --#{$prefix}-sys-color-tertiary: #A0CFD4;
+    --#{$prefix}-sys-color-on-tertiary: #003739;
+    --#{$prefix}-sys-color-tertiary-container: #1E4D51;
+    --#{$prefix}-sys-color-on-tertiary-container: #BCEBF0;
+
+    // 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-on-surface: #E1E3E1;
+    --#{$prefix}-sys-color-on-surface-variant: #C1C9C1;
+    
+    --#{$prefix}-sys-color-outline: #8B938B;
+    --#{$prefix}-sys-color-outline-variant: #414942;
+  }
+}