mtrl 0.3.7 → 0.3.9

package/src/styles/abstract/_mixins.scss

@@ -1,352 +0,0 @@
-// src/styles/abstract/_mixins.scss
-@use 'sass:map';
-@use 'sass:list';
-@use 'sass:math';
-@use 'variables' as v;
-@use 'functions' as f;
-
-// Common icons map
-$icons: (
-  'chevron_right': 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="9 18 15 12 9 6"%3E%3C/polyline%3E%3C/svg%3E',
-  'chevron_down': 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="6 9 12 15 18 9"%3E%3C/polyline%3E%3C/svg%3E',
-  'check': 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="20 6 9 17 4 12"%3E%3C/polyline%3E%3C/svg%3E'
-);
-
-@mixin icon($name, $size: 24px) {
-  $icon-url: map.get($icons, $name);
-  @if $icon-url {
-    content: '';
-    display: inline-block;
-    width: $size;
-    height: $size;
-    background-image: url($icon-url);
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-  }
-}
-
-// 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: false) {
-  position: relative;
-  
-  @if $selector == false {
-    // Default behavior - create a pseudo-element for the state layer
-    &::before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background-color: $color;
-      opacity: f.get-state-opacity($state);
-      pointer-events: none;
-      border-radius: inherit;
-    }
-  } @else {
-    // Use the provided selector
-    #{$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;
-  }
-}
-
-@mixin touch-target($size: 48px) {
-  // Position first to avoid the deprecation warning
-  position: relative;
-  
-  &::after {
-    content: '';
-    position: absolute;
-    inset: 50%;
-    width: $size;
-    height: $size;
-    transform: translate(-50%, -50%);
-  }
-  
-  @media (prefers-reduced-motion: reduce) {
-    @content;
-  }
-  
-  @media (forced-colors: active) {
-    @content;
-  }
-}
-
-// 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);
-    }
-  }
-}
-
-
-// Scrollbar mixin for consistent styling across components
-@mixin scrollbar(
-  $width: 8px,
-  $track-color: rgba(0, 0, 0, 0.05),
-  $thumb-color: rgba(0, 0, 0, 0.2)
-) {
-  &::-webkit-scrollbar {
-    width: $width;
-  }
-  
-  &::-webkit-scrollbar-track {
-    background: $track-color;
-  }
-  
-  &::-webkit-scrollbar-thumb {
-    background: $thumb-color;
-    border-radius: math.div($width, 2);
-  }
-  
-  // Firefox scrollbar (future compatibility)
-  scrollbar-width: thin;
-  scrollbar-color: $thumb-color $track-color;
-}
-
-
-// Flexbox layout mixins
-@mixin flex-row($align: center, $justify: flex-start, $gap: 0) {
-  display: flex;
-  flex-direction: row;
-  align-items: $align;
-  justify-content: $justify;
-  @if $gap > 0 {
-    gap: $gap;
-  }
-}
-
-@mixin flex-column($align: flex-start, $justify: flex-start, $gap: 0) {
-  display: flex;
-  flex-direction: column;
-  align-items: $align;
-  justify-content: $justify;
-  @if $gap > 0 {
-    gap: $gap;
-  }
-}
-
-// Print
-@mixin print {
-  @media print {
-    @content;
-  }
-}

package/src/styles/abstract/_theme.scss

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