mtrl 0.5.2 → 0.5.4

package/src/styles/abstract/_theme.scss

@@ -0,0 +1,269 @@
+// src/styles/abstract/_theme.scss
+@use 'sass:map';
+@use 'base' as *;
+@use 'variables' as v;
+
+// System-level tokens mapped to CSS variables
+$mtrl-sys-state: (
+  'hover-state-layer-opacity': v.$state('hover-state-layer-opacity'),
+  'focus-state-layer-opacity': v.$state('focus-state-layer-opacity'),
+  'pressed-state-layer-opacity': v.$state('pressed-state-layer-opacity'),
+  'dragged-state-layer-opacity': v.$state('dragged-state-layer-opacity')
+);
+
+$mtrl-sys-motion: (
+  'duration-short1': v.$motion('duration-short1'),
+  'duration-short2': v.$motion('duration-short2'),
+  'duration-short3': v.$motion('duration-short3'),
+  'duration-short4': v.$motion('duration-short4'),
+  'duration-medium1': v.$motion('duration-medium1'),
+  'duration-medium2': v.$motion('duration-medium2'),
+  'duration-long1': v.$motion('duration-long1'),
+  'duration-long2': v.$motion('duration-long2'),
+  'easing-standard': v.$motion('easing-standard'),
+  'easing-standard-accelerate': v.$motion('easing-standard-accelerate'),
+  'easing-standard-decelerate': v.$motion('easing-standard-decelerate'),
+  'easing-emphasized': v.$motion('easing-emphasized'),
+  'easing-emphasized-accelerate': v.$motion('easing-emphasized-accelerate'),
+  'easing-emphasized-decelerate': v.$motion('easing-emphasized-decelerate')
+);
+
+$mtrl-sys-shape: (
+  'none': v.$shape('none'),
+  'extra-small': v.$shape('extra-small'),
+  'small': v.$shape('small'),
+  'medium': v.$shape('medium'),
+  'large': v.$shape('large'),
+  'extra-large': v.$shape('extra-large'),
+  'full': v.$shape('full'),
+  'pill': v.$shape('pill')
+);
+
+// Generate CSS variable utilities
+@function color($key) {
+  @return var(--#{$prefix}-sys-color-#{$key});
+}
+
+@function rgb($key) {
+  @return var(--#{$prefix}-sys-color-#{$key}-rgb);
+}
+
+/**
+ * Creates a color with alpha transparency using RGB values
+ * This version uses string.unquote to preserve the rgba function correctly
+ * @param {String} $key - Color token name
+ * @param {Number} $opacity - Opacity value (0-1)
+ * @return {String} rgba CSS function with variable
+ */
+@function alpha($key, $opacity) {
+  // #{'...'} prevents SASS from interpreting rgba as a SASS function
+  @return #{'rgba(var(--#{$prefix}-sys-color-#{$key}-rgb), #{$opacity})'};
+}
+
+@function state($key) {
+  @return var(--#{$prefix}-sys-state-#{$key});
+}
+
+@function motion($key) {
+  @return var(--#{$prefix}-sys-motion-#{$key});
+}
+
+@function shape($key) {
+  @return var(--#{$prefix}-sys-shape-#{$key});
+}
+
+// Theme management utilities
+@mixin dark-theme {
+  // 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;
+
+  // Status colors
+  --#{$prefix}-sys-color-error: #F2B8B5;
+  --#{$prefix}-sys-color-error-rgb: 242, 184, 181;
+  --#{$prefix}-sys-color-on-error: #601410;
+  --#{$prefix}-sys-color-on-error-rgb: 96, 20, 16;
+  --#{$prefix}-sys-color-error-container: #8C1D18;
+  --#{$prefix}-sys-color-error-container-rgb: 140, 29, 24;
+  --#{$prefix}-sys-color-on-error-container: #F9DEDC;
+  --#{$prefix}-sys-color-on-error-container-rgb: 249, 222, 220;
+  
+  --#{$prefix}-sys-color-success: #85CFA9;
+  --#{$prefix}-sys-color-success-rgb: 133, 207, 169;
+  --#{$prefix}-sys-color-on-success: #00392D;
+  --#{$prefix}-sys-color-on-success-rgb: 0, 57, 45;
+  
+  --#{$prefix}-sys-color-warning: #FFB95C;
+  --#{$prefix}-sys-color-warning-rgb: 255, 185, 92;
+  --#{$prefix}-sys-color-on-warning: #3F2200;
+  --#{$prefix}-sys-color-on-warning-rgb: 63, 34, 0;
+  
+  --#{$prefix}-sys-color-info: #99CBFF;
+  --#{$prefix}-sys-color-info-rgb: 153, 203, 255;
+  --#{$prefix}-sys-color-on-info: #003060;
+  --#{$prefix}-sys-color-on-info-rgb: 0, 48, 96;
+
+  // 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;
+}
+
+@mixin light-theme {
+  // 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;
+
+  // Status colors
+  --#{$prefix}-sys-color-error: #B3261E;
+  --#{$prefix}-sys-color-error-rgb: 179, 38, 30;
+  --#{$prefix}-sys-color-on-error: #FFFFFF;
+  --#{$prefix}-sys-color-on-error-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-error-container: #F9DEDC;
+  --#{$prefix}-sys-color-error-container-rgb: 249, 222, 220;
+  --#{$prefix}-sys-color-on-error-container: #410E0B;
+  --#{$prefix}-sys-color-on-error-container-rgb: 65, 14, 11;
+  
+  --#{$prefix}-sys-color-success: #007B5A;
+  --#{$prefix}-sys-color-success-rgb: 0, 123, 90;
+  --#{$prefix}-sys-color-on-success: #FFFFFF;
+  --#{$prefix}-sys-color-on-success-rgb: 255, 255, 255;
+  
+  --#{$prefix}-sys-color-warning: #DD6D06;
+  --#{$prefix}-sys-color-warning-rgb: 221, 109, 6;
+  --#{$prefix}-sys-color-on-warning: #FFFFFF;
+  --#{$prefix}-sys-color-on-warning-rgb: 255, 255, 255;
+  
+  --#{$prefix}-sys-color-info: #0061A4;
+  --#{$prefix}-sys-color-info-rgb: 0, 97, 164;
+  --#{$prefix}-sys-color-on-info: #FFFFFF;
+  --#{$prefix}-sys-color-on-info-rgb: 255, 255, 255;
+
+  // 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;
+}
+
+// Auto dark mode based on system preference
+@mixin auto-dark-mode {
+  @media (prefers-color-scheme: dark) {
+    @include dark-theme;
+  }
+}

package/src/styles/abstract/_variables.scss

@@ -0,0 +1,338 @@
+// src/styles/abstract/_variables.scss
+@use 'sass:map';
+@use 'base' as *;
+
+// Core design tokens
+$state: (
+  'hover-state-layer-opacity': 0.08,
+  'focus-state-layer-opacity': 0.12,
+  'pressed-state-layer-opacity': 0.12,
+  'dragged-state-layer-opacity': 0.16
+) !default;
+
+$motion: (
+  // Duration tokens
+  'duration-short1': 100ms,
+  'duration-short2': 200ms,
+  'duration-short3': 250ms,
+  'duration-short4': 300ms,
+  'duration-medium1': 400ms,
+  'duration-medium2': 500ms,
+  'duration-long1': 600ms,
+  'duration-long2': 700ms,
+  
+  // Standard easing tokens (Material Design 3 defaults)
+  '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),
+  
+  // Emphasized easing tokens (Material Design 3 defaults)
+  '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),
+  
+  // Semantic motion tokens (aliases for better developer experience)
+  'easing-accelerated': cubic-bezier(0.3, 0.0, 1.0, 1.0),  // Same as standard-accelerate
+  'easing-decelerated': cubic-bezier(0.0, 0.0, 0.2, 1.0),  // Same as standard-decelerate
+  'easing-exit': cubic-bezier(0.3, 0.0, 1.0, 1.0),         // Element leaving - accelerated motion
+  'easing-enter': cubic-bezier(0.0, 0.0, 0.2, 1.0),        // Element entering - decelerated motion
+  
+  // Animation tokens for specific behaviors
+  'easing-appear': cubic-bezier(0.0, 0.0, 0.2, 1.0),       // Elements appearing (decelerated)
+  'easing-disappear': cubic-bezier(0.3, 0.0, 1.0, 1.0),    // Elements disappearing (accelerated)
+  'easing-expand': cubic-bezier(0.0, 0.0, 0.2, 1.0),       // Elements expanding (decelerated)
+  'easing-collapse': cubic-bezier(0.3, 0.0, 1.0, 1.0)      // Elements collapsing (accelerated)
+) !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
+  ),
+  'title-large': (
+    'font-family': ('Roboto', sans-serif),
+    'font-size': 22px,
+    'line-height': 28px,
+    'letter-spacing': 0,
+    'font-weight': 500
+  ),
+  'title-medium': (
+    'font-family': ('Roboto', sans-serif),
+    'font-size': 16px,
+    'line-height': 24px,
+    'letter-spacing': 0.15px,
+    'font-weight': 500
+  ),
+  'title-small': (
+    'font-family': ('Roboto', sans-serif),
+    'font-size': 14px,
+    'line-height': 20px,
+    'letter-spacing': 0.1px,
+    'font-weight': 500
+  ),
+  '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-tiny': 1px,
+  'tiny': 2px,
+  '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,
+  'menu': 700,
+  'sticky': 100,
+  'fixed': 50,
+  'default': 1,
+  'below': -1
+) !default;
+
+// Component-specific tokens
+$card: (
+  'width': 344px,
+  'width-small': 344px,
+  'width-medium': 480px,
+  'width-large': 624px,
+  'border-radius': 12px,
+  'padding': 16px
+) !default;
+
+// Chip configuration - updated with MD3 values
+$chip-config: (
+  'height': 32px,
+  'border-radius': 8px,
+  'padding-horizontal': 12px,
+  'outlined-border-opacity': 0.12,
+  'outlined-border-hover-opacity': 0.29,
+  'outlined-border-focus-opacity': 0.38,
+  'outlined-selected-border-opacity': 0,
+  'suggestion-height': 48px,
+  'icon-size': 18px,
+  'suggestion-icon-size': 24px
+) !default;
+
+$button: (
+  'height': 40px,
+  'min-width': 64px,
+  'padding-horizontal': 24px,
+  'padding-horizontal-small': 16px,
+  'padding-icon': 16px,
+  'border-radius': 20px,
+  'transition-duration': map.get($motion, 'duration-short2'),
+  'transition-easing': map.get($motion, 'easing-standard'),
+  // Size-specific configurations based on MD3 specs
+  'height-xs': 32px,
+  'height-s': 40px,
+  'height-m': 56px,
+  'height-l': 96px,
+  'height-xl': 136px,
+  'padding-xs': 12px,
+  'padding-s': 16px,
+  'padding-m': 24px,
+  'padding-l': 48px,
+  'padding-xl': 64px,
+  'icon-size-xs': 18px,
+  'icon-size-s': 22px,
+  'icon-size-m': 24px,
+  'icon-size-l': 32px,
+  'icon-size-xl': 48px
+) !default;
+
+
+// Define spacing scale (this might already exist, if not, add it)
+$spacing-scale: (
+  '0': 0,
+  '1': 4px,
+  '2': 8px,
+  '3': 12px,
+  '4': 16px,
+  '5': 20px,
+  '6': 24px,
+  '8': 32px,
+  '10': 40px,
+  '12': 48px,
+  '14': 56px,
+  '16': 64px,
+  '20': 80px,
+  '24': 96px,
+  '32': 128px
+);
+
+// Add spacing function
+@function spacing($key) {
+  @if not map.has-key($spacing-scale, $key) {
+    @error 'Spacing key "#{$key}" not found in spacing scale.';
+  }
+  @return map.get($spacing-scale, $key);
+}
+
+// Helper functions for easier token access
+@function state($key) {
+  @return map.get($state, $key);
+}
+
+@function motion($key) {
+  @return map.get($motion, $key);
+}
+
+@function elevation($level) {
+  @return map.get($elevation, $level);
+}
+
+@function typography($scale) {
+  @return map.get($typescale, $scale);
+}
+
+@function shape($size) {
+  @return map.get($shape, $size);
+}
+
+@function z-index($layer) {
+  @return map.get($z-index, $layer);
+}
+
+@function breakpoint($size) {
+  @return map.get($breakpoints, $size);
+}
+
+@function button($prop) {
+  @return map.get($button, $prop);
+}
+
+@function card($key) {
+  @return map.get($card, $key);
+}
+
+@function chip($key, $fallback: null) {
+  @if map.has-key($chip-config, $key) {
+    @return map.get($chip-config, $key);
+  }
+  @return $fallback;
+}
+
+// Textfield configuration
+$textfield: (
+  'height': 56px,
+  'height-small': 48px,
+  'height-large': 64px,
+  'padding-horizontal': 16px,
+  'padding-vertical': 16px,
+  'border-radius': map.get($shape, 'extra-small'),
+  'border-width': 1px,
+  'label-offset': 16px,
+  'icon-size': 24px
+) !default;
+
+// Add textfield function
+@function textfield($key) {
+  @return map.get($textfield, $key);
+}

package/src/styles/base/_reset.scss

@@ -0,0 +1,86 @@
+// src/styles/base/_reset.scss
+
+// Modern CSS Reset
+// Adapted and simplified for mtrl
+
+// Use border-box by default
+*, 
+*::before, 
+*::after {
+  box-sizing: border-box;
+}
+
+// Remove default margin and padding
+html, 
+body, 
+h1, h2, h3, h4, h5, h6, 
+p, figure, blockquote, dl, dd {
+  margin: 0;
+  padding: 0;
+}
+
+// Set core body defaults
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+// Make images easier to work with
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+// Inherit fonts for inputs and buttons
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+// Remove all animations, transitions and smooth scrolling for people who prefer not to see them
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+  
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+// Reset button styles
+button {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+
+// Remove list styles
+ul,
+ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+// Set default link style
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+// Tables
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}