mtrl 0.2.6 → 0.2.8

package/src/styles/themes/_spring.scss

@@ -35,6 +35,9 @@
   --#{$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;
@@ -67,5 +70,8 @@
     
     --#{$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

@@ -41,6 +41,9 @@
   --#{$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;
@@ -78,5 +81,7 @@
     
     --#{$prefix}-sys-color-outline: #9E8F80;
     --#{$prefix}-sys-color-outline-variant: #50453B;
+    // Include status colors for dark theme
+    @include status-colors-dark();
   }
 }

package/src/styles/themes/_sunset.scss

@@ -35,6 +35,9 @@
   --#{$prefix}-sys-color-outline: #85736D;
   --#{$prefix}-sys-color-outline-variant: #D8C2BB;
 
+  // Include status colors for light theme
+  @include status-colors-light();
+
    &[data-theme-mode="dark"] {
     --#{$prefix}-sys-color-primary: #FFB686;
     --#{$prefix}-sys-color-on-primary: #5C2800;
@@ -51,5 +54,7 @@
     --#{$prefix}-sys-color-surface-container: #2B1714;
     
     --#{$prefix}-sys-color-outline: #B89784;
+    // Include status colors for dark theme
+    @include status-colors-dark();
   }
 }

package/src/styles/themes/_tealcaramel.scss

@@ -0,0 +1,125 @@
+// src/styles/themes/_tealcaramel.scss
+@use '../abstract/base' as *;
+@use 'base-theme' as *;
+
+@include create-theme('tealcaramel') {
+  // Key colors based on teal and caramel combination
+  --#{$prefix}-sys-color-primary: #2B4D56; // Teal as primary
+  --#{$prefix}-sys-color-primary-rgb: 0, 105, 92;
+  --#{$prefix}-sys-color-on-primary: #FFFFFF;
+  --#{$prefix}-sys-color-on-primary-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-primary-container: #B2DFDB;
+  --#{$prefix}-sys-color-primary-container-rgb: 178, 223, 219;
+  --#{$prefix}-sys-color-on-primary-container: #002A25;
+  --#{$prefix}-sys-color-on-primary-container-rgb: 0, 42, 37;
+  
+  --#{$prefix}-sys-color-secondary: #9A6433; // Caramel as secondary
+  --#{$prefix}-sys-color-secondary-rgb: 198, 124, 78;
+  --#{$prefix}-sys-color-on-secondary: #FFFFFF;
+  --#{$prefix}-sys-color-on-secondary-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-secondary-container: #FFD8C2;
+  --#{$prefix}-sys-color-secondary-container-rgb: 255, 216, 194;
+  --#{$prefix}-sys-color-on-secondary-container: #3E2715;
+  --#{$prefix}-sys-color-on-secondary-container-rgb: 62, 39, 21;
+  
+  --#{$prefix}-sys-color-tertiary: #4A7C6E; // Muted teal as tertiary
+  --#{$prefix}-sys-color-tertiary-rgb: 74, 124, 110;
+  --#{$prefix}-sys-color-on-tertiary: #FFFFFF;
+  --#{$prefix}-sys-color-on-tertiary-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-tertiary-container: #CCE6DF;
+  --#{$prefix}-sys-color-tertiary-container-rgb: 204, 230, 223;
+  --#{$prefix}-sys-color-on-tertiary-container: #0E3029;
+  --#{$prefix}-sys-color-on-tertiary-container-rgb: 14, 48, 41;
+
+  // Neutral colors with subtle teal undertones
+  --#{$prefix}-sys-color-surface: #F9FCFC;
+  --#{$prefix}-sys-color-surface-rgb: 249, 252, 252;
+  --#{$prefix}-sys-color-surface-dim: #E5ECEB;
+  --#{$prefix}-sys-color-surface-dim-rgb: 229, 236, 235;
+  --#{$prefix}-sys-color-surface-bright: #F9FCFC;
+  --#{$prefix}-sys-color-surface-bright-rgb: 249, 252, 252;
+  --#{$prefix}-sys-color-surface-container-lowest: #FFFFFF;
+  --#{$prefix}-sys-color-surface-container-lowest-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-surface-container-low: #F3F7F6;
+  --#{$prefix}-sys-color-surface-container-low-rgb: 243, 247, 246;
+  --#{$prefix}-sys-color-surface-container: #EDF2F1;
+  --#{$prefix}-sys-color-surface-container-rgb: 237, 242, 241;
+  --#{$prefix}-sys-color-surface-container-high: #E7ECEB;
+  --#{$prefix}-sys-color-surface-container-high-rgb: 231, 236, 235;
+  --#{$prefix}-sys-color-surface-container-highest: #E1E6E5;
+  --#{$prefix}-sys-color-surface-container-highest-rgb: 225, 230, 229;
+  
+  --#{$prefix}-sys-color-on-surface: #191D1C;
+  --#{$prefix}-sys-color-on-surface-rgb: 25, 29, 28;
+  --#{$prefix}-sys-color-on-surface-variant: #404847;
+  --#{$prefix}-sys-color-on-surface-variant-rgb: 64, 72, 71;
+  
+  --#{$prefix}-sys-color-outline: #6E7978;
+  --#{$prefix}-sys-color-outline-rgb: 110, 121, 120;
+  --#{$prefix}-sys-color-outline-variant: #C1CCCB;
+  --#{$prefix}-sys-color-outline-variant-rgb: 193, 204, 203;
+
+  // Include status colors for light theme
+  @include status-colors-light();
+
+  &[data-theme-mode="dark"] {
+    // Key colors for dark mode
+    --#{$prefix}-sys-color-primary: #85CFC6; // Lighter teal
+    --#{$prefix}-sys-color-primary-rgb: 133, 207, 198;
+    --#{$prefix}-sys-color-on-primary: #003E36;
+    --#{$prefix}-sys-color-on-primary-rgb: 0, 62, 54;
+    --#{$prefix}-sys-color-primary-container: #005349;
+    --#{$prefix}-sys-color-primary-container-rgb: 0, 83, 73;
+    --#{$prefix}-sys-color-on-primary-container: #B2DFDB;
+    --#{$prefix}-sys-color-on-primary-container-rgb: 178, 223, 219;
+    
+    --#{$prefix}-sys-color-secondary: #FFB68D; // Lighter caramel
+    --#{$prefix}-sys-color-secondary-rgb: 255, 182, 141;
+    --#{$prefix}-sys-color-on-secondary: #5D3726;
+    --#{$prefix}-sys-color-on-secondary-rgb: 93, 55, 38;
+    --#{$prefix}-sys-color-secondary-container: #7D4F3A;
+    --#{$prefix}-sys-color-secondary-container-rgb: 125, 79, 58;
+    --#{$prefix}-sys-color-on-secondary-container: #FFD8C2;
+    --#{$prefix}-sys-color-on-secondary-container-rgb: 255, 216, 194;
+    
+    --#{$prefix}-sys-color-tertiary: #A0CCC2; // Lighter muted teal
+    --#{$prefix}-sys-color-tertiary-rgb: 160, 204, 194;
+    --#{$prefix}-sys-color-on-tertiary: #1A463E;
+    --#{$prefix}-sys-color-on-tertiary-rgb: 26, 70, 62;
+    --#{$prefix}-sys-color-tertiary-container: #315C53;
+    --#{$prefix}-sys-color-tertiary-container-rgb: 49, 92, 83;
+    --#{$prefix}-sys-color-on-tertiary-container: #CCE6DF;
+    --#{$prefix}-sys-color-on-tertiary-container-rgb: 204, 230, 223;
+
+    // Neutral colors for dark mode
+    --#{$prefix}-sys-color-surface: #191D1C;
+    --#{$prefix}-sys-color-surface-rgb: 25, 29, 28;
+    --#{$prefix}-sys-color-surface-dim: #121615;
+    --#{$prefix}-sys-color-surface-dim-rgb: 18, 22, 21;
+    --#{$prefix}-sys-color-surface-bright: #363B3A;
+    --#{$prefix}-sys-color-surface-bright-rgb: 54, 59, 58;
+    --#{$prefix}-sys-color-surface-container-lowest: #0E1211;
+    --#{$prefix}-sys-color-surface-container-lowest-rgb: 14, 18, 17;
+    --#{$prefix}-sys-color-surface-container-low: #191D1C;
+    --#{$prefix}-sys-color-surface-container-low-rgb: 25, 29, 28;
+    --#{$prefix}-sys-color-surface-container: #1E2221;
+    --#{$prefix}-sys-color-surface-container-rgb: 30, 34, 33;
+    --#{$prefix}-sys-color-surface-container-high: #282C2B;
+    --#{$prefix}-sys-color-surface-container-high-rgb: 40, 44, 43;
+    --#{$prefix}-sys-color-surface-container-highest: #333736;
+    --#{$prefix}-sys-color-surface-container-highest-rgb: 51, 55, 54;
+    
+    --#{$prefix}-sys-color-on-surface: #E1E3E3;
+    --#{$prefix}-sys-color-on-surface-rgb: 225, 227, 227;
+    --#{$prefix}-sys-color-on-surface-variant: #C1CCCB;
+    --#{$prefix}-sys-color-on-surface-variant-rgb: 193, 204, 203;
+    
+    --#{$prefix}-sys-color-outline: #8B9695;
+    --#{$prefix}-sys-color-outline-rgb: 139, 150, 149;
+    --#{$prefix}-sys-color-outline-variant: #404847;
+    --#{$prefix}-sys-color-outline-variant-rgb: 64, 72, 71;
+
+    // Include status colors for dark theme
+    @include status-colors-dark();
+  }
+}

package/src/styles/themes/_winter.scss

@@ -35,6 +35,9 @@
   --#{$prefix}-sys-color-outline: #70787D;
   --#{$prefix}-sys-color-outline-variant: #C0C8CC;
 
+  // Include status colors for light theme
+  @include status-colors-light();
+
   &[data-theme-mode="dark"] {
     // Key colors
     --#{$prefix}-sys-color-primary: #73D0EE;
@@ -67,5 +70,8 @@
     
     --#{$prefix}-sys-color-outline: #8A9297;
     --#{$prefix}-sys-color-outline-variant: #40484C;
+
+    // Include status colors for dark theme
+    @include status-colors-dark();
   }
 }

package/src/components/badge/_styles.scss

@@ -1,174 +0,0 @@
-// src/components/badge/_styles.scss
-@use '../../styles/abstract/base' as base;
-@use '../../styles/abstract/variables' as v;
-@use '../../styles/abstract/functions' as f;
-@use '../../styles/abstract/mixins' as m;
-@use '../../styles/abstract/theme' as t;
-
-$component: '#{base.$prefix}-badge';
-
-.#{$component} {
-  // Base styles
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  min-width: 20px;
-  height: 20px;
-  padding: 0 6px;
-  border-radius: 10px;
-  background-color: t.color('error');
-  color: t.color('on-error');
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 1;
-  letter-spacing: 0.5px;
-  white-space: nowrap;
-  text-align: center;
-  
-  // Badge parent wrapper
-  &-wrapper {
-    position: relative;
-    display: inline-flex;
-  }
-  
-  // Default positioning (top-right)
-  &--positioned {
-    position: absolute;
-    top: -8px;
-    right: -8px;
-    transform: translate(50%, -50%);
-  }
-  
-  // Dot variant 
-  &--dot {
-    min-width: 8px;
-    height: 8px;
-    padding: 0;
-    border-radius: 50%;
-  }
-  
-  // Small size
-  &--small {
-    min-width: 16px;
-    height: 16px;
-    font-size: 10px;
-    padding: 0 4px;
-  }
-  
-  // Large size
-  &--large {
-    min-width: 24px;
-    height: 24px;
-    font-size: 12px;
-    padding: 0 8px;
-  }
-  
-  // Position variants
-  &--top-left {
-    top: 0;
-    left: 0;
-    transform: translate(-50%, -50%);
-  }
-  
-  &--top-right {
-    top: 0;
-    right: 0;
-    transform: translate(50%, -50%);
-  }
-  
-  &--bottom-left {
-    bottom: 0;
-    left: 0;
-    transform: translate(-50%, 50%);
-  }
-  
-  &--bottom-right {
-    bottom: 0;
-    right: 0;
-    transform: translate(50%, 50%);
-  }
-  
-  // Color variants
-  &--primary {
-    background-color: t.color('primary');
-    color: t.color('on-primary');
-  }
-  
-  &--secondary {
-    background-color: t.color('secondary');
-    color: t.color('on-secondary');
-  }
-  
-  &--tertiary {
-    background-color: t.color('tertiary');
-    color: t.color('on-tertiary');
-  }
-  
-  &--error {
-    background-color: t.color('error');
-    color: t.color('on-error');
-  }
-  
-  &--success {
-    background-color: t.color('success');
-    color: t.color('on-success');
-  }
-  
-  &--warning {
-    background-color: t.color('warning');
-    color: t.color('on-warning');
-  }
-  
-  &--info {
-    background-color: t.color('info');
-    color: t.color('on-info');
-  }
-  
-  // Outline variant
-  &--outlined {
-    background-color: transparent;
-    border: 1px solid currentColor;
-    
-    &.#{$component}--primary {
-      color: t.color('primary');
-    }
-    
-    &.#{$component}--secondary {
-      color: t.color('secondary');
-    }
-    
-    &.#{$component}--tertiary {
-      color: t.color('tertiary');
-    }
-    
-    &.#{$component}--error {
-      color: t.color('error');
-    }
-    
-    &.#{$component}--success {
-      color: t.color('success');
-    }
-    
-    &.#{$component}--warning {
-      color: t.color('warning');
-    }
-    
-    &.#{$component}--info {
-      color: t.color('info');
-    }
-  }
-  
-  // Max value handling
-  &--max {
-    &::after {
-      content: '+';
-    }
-  }
-  
-  // Invisible
-  &--invisible {
-    display: none;
-  }
-}

package/src/components/badge/constants.ts

@@ -1,30 +0,0 @@
-// src/components/badge/constants.ts
-
-export const BADGE_VARIANTS = {
-  STANDARD: 'standard',
-  DOT: 'dot',
-  OUTLINED: 'outlined'
-}
-
-export const BADGE_SIZES = {
-  SMALL: 'small',
-  MEDIUM: 'medium',
-  LARGE: 'large'
-}
-
-export const BADGE_COLORS = {
-  PRIMARY: 'primary',
-  SECONDARY: 'secondary',
-  TERTIARY: 'tertiary',
-  ERROR: 'error',
-  SUCCESS: 'success',
-  WARNING: 'warning',
-  INFO: 'info'
-}
-
-export const BADGE_POSITIONS = {
-  TOP_RIGHT: 'top-right',
-  TOP_LEFT: 'top-left',
-  BOTTOM_RIGHT: 'bottom-right',
-  BOTTOM_LEFT: 'bottom-left'
-}

package/src/components/button/constants.ts

@@ -1,11 +0,0 @@
-// src/components/button/constants.ts
-
-import { RIPPLE_SCHEMA } from '../../core/build/constants'
-
-export const BUTTON_VARIANTS = {
-  FILLED: 'filled',
-  TONAL: 'tonal',
-  OUTLINED: 'outlined',
-  ELEVATED: 'elevated',
-  TEXT: 'text'
-}

package/src/components/card/constants.ts

@@ -1,84 +0,0 @@
-// src/components/card/constants.ts
-
-import { CardVariant, CardElevation } from './types';
-
-/**
- * Card variant types following Material Design 3
- * @enum {string}
- */
-export const CARD_VARIANTS = {
-  /** Elevated card with shadow */
-  ELEVATED: CardVariant.ELEVATED,
-  /** Filled card with higher surface container color */
-  FILLED: CardVariant.FILLED,
-  /** Outlined card with border */
-  OUTLINED: CardVariant.OUTLINED
-};
-
-/**
- * Card elevation levels based on MD3 guidelines
- * Uses the MTRL elevation system values
- * @enum {number}
- */
-export const CARD_ELEVATIONS = {
-  /** No elevation (for filled and outlined variants) */
-  LEVEL0: CardElevation.LEVEL0,
-  /** Default elevation for elevated cards */
-  LEVEL1: CardElevation.LEVEL1,
-  /** Elevation for hovered state */
-  LEVEL2: CardElevation.LEVEL2,
-  /** Elevation for dragged state */
-  LEVEL4: CardElevation.LEVEL4
-};
-
-/**
- * Card validation schema
- * @const {Object}
- */
-export const CARD_SCHEMA = {
-  variant: {
-    type: 'string',
-    enum: Object.values(CARD_VARIANTS),
-    default: CARD_VARIANTS.ELEVATED
-  },
-  interactive: {
-    type: 'boolean',
-    default: false
-  },
-  fullWidth: {
-    type: 'boolean',
-    default: false
-  },
-  clickable: {
-    type: 'boolean',
-    default: false
-  },
-  draggable: {
-    type: 'boolean',
-    default: false
-  },
-  class: {
-    type: 'string',
-    required: false
-  },
-  headerConfig: {
-    type: 'object',
-    required: false
-  },
-  contentConfig: {
-    type: 'object',
-    required: false
-  },
-  actionsConfig: {
-    type: 'object',
-    required: false
-  },
-  mediaConfig: {
-    type: 'object',
-    required: false
-  },
-  aria: {
-    type: 'object',
-    required: false
-  }
-};

package/src/components/dialog/_styles.scss

@@ -1,213 +0,0 @@
-// src/components/dialog/_styles.scss
-@use '../../styles/abstract/base' as base;
-@use '../../styles/abstract/variables' as v;
-@use '../../styles/abstract/functions' as f;
-@use '../../styles/abstract/mixins' as m;
-@use '../../styles/abstract/theme' as t;
-
-$component: '#{base.$prefix}-dialog';
-
-// Dialog overlay - covers the entire screen
-.#{$component}-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: t.alpha('scrim', 0.32);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  padding: 24px;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 0.15s ease, visibility 0s linear 0.15s;
-  overflow-y: auto;
-  
-  &--visible {
-    opacity: 1;
-    visibility: visible;
-    transition: opacity 0.15s ease, visibility 0s linear;
-  }
-}
-
-// Dialog container
-.#{$component} {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-width: 280px;
-  max-width: 90vw;
-  width: fit-content;
-  max-height: calc(100vh - 48px);
-  border-radius: 28px;
-  background-color: t.color('surface-container-high');
-  color: t.color('on-surface');
-  overflow: hidden;
-  box-sizing: border-box;
-  @include m.elevation(3);
-  transform: scale(0.8);
-  opacity: 0;
-  transition: transform 0.15s ease, opacity 0.15s ease;
-  
-  &--visible {
-    transform: scale(1);
-    opacity: 1;
-  }
-  
-  // Fullscreen variant
-  &--fullscreen {
-    width: 100vw;
-    height: 100vh;
-    max-width: 100vw;
-    max-height: 100vh;
-    border-radius: 0;
-    margin: 0;
-  }
-  
-  // Fullwidth variant
-  &--fullwidth {
-    width: 100%;
-    max-width: 560px;
-  }
-  
-  // Dialog header
-  &-header {
-    display: flex;
-    align-items: flex-start;
-    padding: 24px 24px 16px;
-    
-    &-content {
-      flex: 1;
-      min-width: 0;
-    }
-    
-    &-title {
-      @include m.typography('headline-small');
-      color: t.color('on-surface');
-      margin: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    
-    &-subtitle {
-      @include m.typography('body-medium');
-      color: t.color('on-surface-variant');
-      margin: 4px 0 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    
-    &-close {
-      margin: -8px -8px -8px 8px;
-      padding: 8px;
-      border: none;
-      background: transparent;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 50%;
-      color: t.color('on-surface-variant');
-      
-      &:hover {
-        background-color: t.alpha('on-surface', 0.08);
-      }
-      
-      &:active {
-        background-color: t.alpha('on-surface', 0.12);
-      }
-      
-      svg {
-        width: 24px;
-        height: 24px;
-      }
-    }
-  }
-  
-  // Dialog content
-  &-content {
-    flex: 1 1 auto;
-    padding: 0 24px;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-    @include m.typography('body-medium');
-    color: t.color('on-surface-variant');
-    
-    &:first-child {
-      padding-top: 24px;
-    }
-    
-    &:last-child {
-      padding-bottom: 24px;
-    }
-  }
-  
-  // Dialog footer
-  &-footer {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: flex-end;
-    padding: 16px 24px 24px;
-    gap: 8px;
-    
-    &--left {
-      justify-content: flex-start;
-    }
-    
-    &--center {
-      justify-content: center;
-    }
-    
-    &--space-between {
-      justify-content: space-between;
-    }
-    
-    button {
-      margin: 0;
-    }
-  }
-  
-  // Size variants
-  &--small {
-    max-width: 400px;
-  }
-  
-  &--medium {
-    max-width: 560px;
-  }
-  
-  &--large {
-    max-width: 90vw;
-    width: 800px;
-  }
-  
-  // Animation variants
-  &--slide-up {
-    transform: translateY(20px) scale(1);
-    
-    &.#{$component}--visible {
-      transform: translateY(0) scale(1);
-    }
-  }
-  
-  &--slide-down {
-    transform: translateY(-20px) scale(1);
-    
-    &.#{$component}--visible {
-      transform: translateY(0) scale(1);
-    }
-  }
-  
-  &--fade {
-    transform: scale(1);
-    
-    &.#{$component}--visible {
-      transform: scale(1);
-    }
-  }
-}