mtrl 0.0.3 → 0.1.2

package/src/components/list/styles.scss

@@ -1,19 +1,248 @@
-// src/components/list/styles.scss
-
-// Import core configuration and utilities
-@use '../../styles/abstract/config' as c;
+// src/components/list/_list.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/variables' as v;
-@use './styles/list';
-@use './styles/list-item';
+@use '../../styles/abstract/theme' as t;
+
+// Component variables
+$component: '#{base.$prefix}-list';
+$list-item-height: 48px !default;
+$list-item-dense-height: 40px !default;
+$list-padding: 8px !default;
+$list-item-padding: 16px !default;
+$list-section-padding: 16px !default;
 
 // Component-specific mixins
 @mixin list-item-hover {
-  @include c.state-layer(v.$list-hover-state-layer-color, 'hover');
+  @include m.state-layer(t.color('on-surface'), 'hover');
 }
 
 @mixin list-section-title {
-  @include c.typography('label-large');
-  color: v.$list-section-title-color;
-  padding: v.$list-section-padding v.$list-item-padding 8px;
+  @include m.typography('label-large');
+  color: t.color('primary');
+  padding: $list-section-padding $list-item-padding 8px;
+}
+
+// LIST COMPONENT
+.#{$component} {
+  display: flex;
+  flex-direction: column;
+  padding: $list-padding 0;
+  min-width: 200px;
+  background-color: t.color('surface');
+
+  // Sections
+  &-section {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    &:not(:last-child) {
+      margin-bottom: $list-padding;
+    }
+  }
+
+  &-section-title {
+    @include list-section-title;
+  }
+
+  // Dividers
+  &-divider {
+    height: 1px;
+    margin: $list-padding 0;
+    background-color: t.color('outline-variant');
+  }
+
+  // Selection states
+  &[data-type="single"],
+  &[data-type="multi"],
+  &[data-type="radio"] {
+    .#{$component}-item {
+      cursor: pointer;
+
+      &--selected {
+        background-color: t.color('secondary-container');
+        color: t.color('on-secondary-container');
+
+        &:hover {
+          background-color: t.color('secondary-container');
+          @include m.state-layer(t.color('on-secondary-container'), 'hover');
+        }
+
+        .#{$component}-item-supporting {
+          color: t.color('on-secondary-container');
+        }
+      }
+    }
+  }
+
+  // Dense variant
+  &--dense {
+    .#{$component}-item {
+      min-height: $list-item-dense-height;
+    }
+  }
+
+  // Disabled state
+  &--disabled {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+
+  // RTL Support
+  @include m.rtl {
+    .#{$component}-section-title {
+      text-align: right;
+    }
+  }
+
+  // High contrast mode
+  @include m.high-contrast {
+    border: 1px solid currentColor;
+
+    &-divider {
+      border-top: 1px solid currentColor;
+      background: none;
+    }
+  }
+  
+  // LIST ITEM STYLES
+  &-item {
+    display: flex;
+    align-items: center;
+    min-height: $list-item-height;
+    padding: $list-padding $list-item-padding;
+    position: relative;
+    gap: 16px;
+    cursor: pointer;
+    color: t.color('on-surface');
+    @include m.motion-transition(background-color);
+
+    &:hover {
+      @include list-item-hover;
+    }
+
+    &:focus-visible {
+      @include m.state-layer(t.color('on-surface'), 'focus');
+      outline: none;
+    }
+
+    &:active {
+      @include m.state-layer(t.color('on-surface'), 'pressed');
+    }
+
+    // Content layout
+    &-content {
+      flex: 1;
+      min-width: 0; // Enable text truncation
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    // Text elements
+    &-text {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    &-overline {
+      @include m.typography('label-small');
+      color: t.color('on-surface-variant');
+    }
+
+    &-headline {
+      @include m.typography('body-large');
+      color: t.color('on-surface');
+    }
+
+    &-supporting {
+      @include m.typography('body-medium');
+      color: t.color('on-surface-variant');
+    }
+
+    &-meta {
+      @include m.typography('label-small');
+      color: t.color('on-surface-variant');
+      margin-top: 4px;
+    }
+
+    // Leading/trailing elements
+    &-leading,
+    &-trailing {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    &-leading {
+      width: 24px;
+      height: 24px;
+      color: t.color('on-surface-variant');
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    &-trailing {
+      color: t.color('on-surface-variant');
+    }
+
+    // Vertical layout variant
+    &.vertical {
+      min-height: 72px;
+      padding: 12px $list-item-padding;
+
+      .#{$component}-item {
+        &-content {
+          flex-direction: column;
+          gap: 4px;
+        }
+
+        &-meta {
+          margin-top: $list-padding;
+        }
+      }
+    }
+
+    // States
+    &--selected {
+      background-color: t.color('secondary-container');
+      color: t.color('on-secondary-container');
+
+      .#{$component}-item {
+        &-leading,
+        &-trailing {
+          color: t.color('on-secondary-container');
+        }
+      }
+    }
+
+    &--disabled {
+      opacity: 0.38;
+      pointer-events: none;
+    }
+
+    // RTL Support
+    @include m.rtl {
+      .#{$component}-item {
+        &-text {
+          text-align: right;
+        }
+      }
+    }
+
+    // High contrast mode
+    @include m.high-contrast {
+      &--selected {
+        outline: 2px solid currentColor;
+        outline-offset: -2px;
+      }
+    }
+  }
 }

package/src/components/menu/styles.scss

@@ -1,30 +1,33 @@
-// src/components/menu/styles.scss
-@use 'sass:map';
-@use '../../styles/abstract/config' as c;
-@use '../../styles/abstract/mixins' as m;
+// src/components/menu/_menu.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}-menu';
 
-.#{c.$prefix}-menu {
+.#{$component} {
   // Base styles
-  @include c.typography('body-medium');
-  @include c.shape('small');
+  @include m.typography('body-medium');
+  @include m.shape('extra-small');
   
   position: fixed;
-  z-index: map.get(v.$z-index, 'menu');
+  z-index: f.get-z-index('menu');
   min-width: 112px;
   max-width: 280px;
   padding: 8px 0;
-  background-color: var(--mtrl-sys-color-surface-container);
-  color: var(--mtrl-sys-color-on-surface);
-  @include c.elevation(2);
+  background-color: t.color('surface-container');
+  color: t.color('on-surface');
+  @include m.elevation(2);
   
   display: none;
   opacity: 0;
   transform: scale(0.8);
   transform-origin: top left;
   pointer-events: none;
-  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
-              transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: opacity v.motion('duration-short2') v.motion('easing-standard'),
+              transform v.motion('duration-short2') v.motion('easing-standard');
   
   &--visible {
     display: block;
@@ -35,7 +38,7 @@
   
   &--submenu {
     position: absolute;
-    z-index: map.get(v.$z-index, 'menu') + 1;
+    z-index: f.get-z-index('menu') + 1;
   }
 
   // List container
@@ -50,7 +53,7 @@
 
   // Menu items
   &-item {
-    @include c.typography('body-large');
+    @include m.typography('body-large');
     @include m.flex-row;
     
     position: relative;
@@ -58,20 +61,20 @@
     padding: 12px 16px;
     cursor: pointer;
     user-select: none;
-    color: var(--mtrl-sys-color-on-surface);
-    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    color: t.color('on-surface');
+    @include m.motion-transition(background-color);
     
     &:hover {
-      @include c.state-layer(var(--mtrl-sys-color-on-surface), 'hover');
+      @include m.state-layer(t.color('on-surface'), 'hover');
     }
     
     &:focus {
-      @include c.state-layer(var(--mtrl-sys-color-on-surface), 'focus');
+      @include m.state-layer(t.color('on-surface'), 'focus');
       outline: none;
     }
     
     &:active {
-      @include c.state-layer(var(--mtrl-sys-color-on-surface), 'pressed');
+      @include m.state-layer(t.color('on-surface'), 'pressed');
     }
 
     // Submenu indicator
@@ -88,7 +91,7 @@
       }
       
       &[aria-expanded="true"] {
-        @include c.state-layer(var(--mtrl-sys-color-on-surface), 'hover');
+        @include m.state-layer(t.color('on-surface'), 'hover');
         
         &::after {
           opacity: 1;
@@ -99,7 +102,7 @@
     // Disabled state
     &--disabled {
       pointer-events: none;
-      color: rgba(var(--mtrl-sys-color-on-surface-rgb), 0.38);
+      color: t.alpha('on-surface', 0.38);
     }
   }
 
@@ -107,34 +110,38 @@
   &-divider {
     height: 1px;
     margin: 8px 0;
-    background-color: var(--mtrl-sys-color-outline-variant);
+    background-color: t.color('outline-variant');
   }
 
   // Accessibility
-  @include c.focus-ring('.#{c.$prefix}-menu-item:focus-visible');
+  @include m.focus-ring('.#{$component}-item:focus-visible');
   
-  @include c.reduced-motion {
+  @include m.reduced-motion {
     transition: none;
+    
+    .#{$component}-item {
+      transition: none;
+    }
   }
   
-  @include c.high-contrast {
+  @include m.high-contrast {
     border: 1px solid CurrentColor;
     
-    .#{c.$prefix}-menu-divider {
+    .#{$component}-divider {
       background-color: CurrentColor;
     }
     
-    .#{c.$prefix}-menu-item--disabled {
+    .#{$component}-item--disabled {
       opacity: 1;
       color: GrayText;
     }
   }
 
   // RTL Support
-  @include c.rtl {
+  @include m.rtl {
     transform-origin: top right;
     
-    .#{c.$prefix}-menu-item {
+    .#{$component}-item {
       &--submenu {
         padding-right: 16px;
         padding-left: 48px;