mtrl 0.0.2 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mtrl",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "A functional JavaScript component library with composable architecture based on Material Design 3",
   "keywords": ["component", "library", "ui", "user interface", "functional", "composable"],
   "main": "index.js",
@@ -16,5 +16,5 @@
   },
   
   "author": "floor",
-  "license": "GPL-3.0"
+  "license": "MIT License"
 }

package/src/components/button/styles.scss

@@ -1,231 +1,268 @@
-// src/components/button/styles.scss
-@use 'sass:map';
-@use '../../styles/abstract/config' as c;
+// src/components/button/_button.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;
 
-.#{c.$prefix}-button {
+$component: '#{base.$prefix}-button';
+
+.#{$component} {
+  // @include m.touch-target;
   // Base styles
-  @include c.typography('label-large');
-  @include c.flex-center;
-  @include c.shape('full');
-  @include c.motion-transition(
-    background-color,
-    box-shadow,
-    color,
-    border-color
-  );
-  
-  min-width: 40px;
-  height: 40px;
-  padding: 0 24px;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: v.button('min-width');
+  height: v.button('height');
+  padding: 0 v.button('padding-horizontal');
   border: none;
+  border-radius: v.button('border-radius');
+  background-color: transparent;
+  color: inherit;
+  font: inherit;
+  text-decoration: none;
   cursor: pointer;
   user-select: none;
+  vertical-align: middle;
+  appearance: none;
+  overflow: hidden;
+  
+  // Typography
+  @include m.typography('label-large');
+  
+  // Transition
+  @include m.motion-transition(
+    background-color, 
+    color, 
+    box-shadow
+  );
+  
+  // Focus styles
+  &:focus {
+    outline: none;
+  }
   
-  // Label styles
-  &-label {
-    @include c.truncate;
+  &:focus-visible {
+    outline: 2px solid t.color('outline');
+    outline-offset: 2px;
   }
   
-  // Icon styles
+  // Interactive states
+  &:disabled {
+    pointer-events: none;
+    opacity: 0.85;
+  }
+  
+  // Ensure proper layout with icons
   &-icon {
-    @include c.flex-center;
-    margin-right: 8px;
-    font-size: 18px;
-    background-color: transparent;
-    @include c.rtl {
-      margin-right: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+    
+    + .#{$component}-text {
       margin-left: 8px;
     }
   }
+  
+  &-text {
+    // Text truncation for long button labels
+    @include m.truncate;
+    
+    .#{$component}--icon-only & {
+      @include m.visually-hidden;
+    }
+  }
+  
+  &--circular {
+    border-radius: 50%;
+    padding: 8px;
+    min-width: unset;
+    width: 40px;
+    height: 40px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    .#{$component}-icon {
+     margin: 0;
+    }
+
+    .#{$component}--small {
+     width: 32px;
+     height: 32px;
+    }
+
+    .#{$component}--large {
+     width: 48px;
+     height: 48px;
+    }
+  }
+  
+  // Ripple container
+  .ripple {
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    pointer-events: none;
+    background-color: currentColor;
+    opacity: 0.12;
+  }
+  
+  &--disabled {
+    opacity: 0.38
+    
+  }
 
   // Variants
   &--filled {
-    background-color: var(--mtrl-sys-color-primary);
-    color: var(--mtrl-sys-color-on-primary);
-    @include c.elevation(0);
+    background-color: t.color('primary');
+    color: t.color('on-primary');
     
     &:hover {
-      @include c.elevation(1);
-      @include c.state-layer(var(--mtrl-sys-color-on-primary), 'hover');
-    }
-    
-    &:focus {
-      @include c.state-layer(var(--mtrl-sys-color-on-primary), 'focus');
+      @include m.state-layer(t.color('on-primary'), 'hover');
+      @include m.elevation(1);
     }
     
     &:active {
-      @include c.state-layer(var(--mtrl-sys-color-on-primary), 'pressed');
+      @include m.state-layer(t.color('on-primary'), 'pressed');
+      @include m.elevation(0);
     }
+    
+    // &:disabled {
+    //   background-color: t.alpha('on-surface', 0.12);
+    //   color: t.alpha('on-surface', 0.38);
+    // }
   }
   
-  &--tonal {
-    background-color: var(--mtrl-sys-color-secondary-container);
-    color: var(--mtrl-sys-color-on-secondary-container);
+  // Elevated button variant
+  &--elevated {
+    background-color: t.color('surface-container-low');
+    color: t.color('primary');
+    @include m.elevation(1);
     
     &:hover {
-      @include c.state-layer(var(--mtrl-sys-color-on-secondary-container), 'hover');
+      @include m.state-layer(t.color('primary'), 'hover');
+      @include m.elevation(2);
     }
     
-    &:focus {
-      @include c.state-layer(var(--mtrl-sys-color-on-secondary-container), 'focus');
+    &:active {
+      @include m.state-layer(t.color('primary'), 'pressed');
+      @include m.elevation(1);
     }
     
-    &:active {
-      @include c.state-layer(var(--mtrl-sys-color-on-secondary-container), 'pressed');
+    &:disabled {
+      @include m.elevation(0);
+      background-color: t.alpha('on-surface', 0.12);
+      color: t.alpha('on-surface', 0.38);
+      box-shadow: none;
     }
+    
+    // Handle icon color in elevated button
+    .#{$component}-icon {
+      color: t.color('primary');
+    }
+    
+    // &:disabled .#{$component}-icon {
+    //   color: t.alpha('on-surface', 0.38);
+    // }
   }
   
-  &--outlined {
-    border: 1px solid var(--mtrl-sys-color-outline);
-    color: var(--mtrl-sys-color-primary);
+  &--tonal {
+    background-color: t.color('secondary-container');
+    color: t.color('on-secondary-container');
     
     &:hover {
-      @include c.state-layer(var(--mtrl-sys-color-primary), 'hover');
-    }
-    
-    &:focus {
-      @include c.state-layer(var(--mtrl-sys-color-primary), 'focus');
-      border-color: var(--mtrl-sys-color-primary);
+      @include m.state-layer(t.color('on-secondary-container'), 'hover');
+      @include m.elevation(1);
     }
     
     &:active {
-      @include c.state-layer(var(--mtrl-sys-color-primary), 'pressed');
+      @include m.state-layer(t.color('on-secondary-container'), 'pressed');
+      @include m.elevation(0);
     }
+    
+    // &:disabled {
+    //   background-color: t.alpha('on-surface', 0.12);
+    //   color: t.alpha('on-surface', 0.38);
+    // }
   }
   
-  // Variants (adding elevated and text)
-  &--elevated {
-    background-color: var(--mtrl-sys-color-surface-container-low);
-    color: var(--mtrl-sys-color-primary);
-    // Reduced from elevation(1) to a more subtle custom shadow
-    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2),
-                0px 1px 3px 1px rgba(0, 0, 0, 0.10);
+  &--outlined {
+    border: 1px solid t.color('outline');
+    color: t.color('primary');
     
     &:hover {
-      // Slightly increased elevation on hover, but still subtle
-      box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.2),
-                  0px 2px 6px 2px rgba(0, 0, 0, 0.10);
-      @include c.state-layer(var(--mtrl-sys-color-primary), 'hover');
-    }
-    
-    &:focus {
-      @include c.state-layer(var(--mtrl-sys-color-primary), 'focus');
+      @include m.state-layer(t.color('primary'), 'hover');
+      background-color: t.alpha('primary', 0.08);
     }
     
     &:active {
-      // Return to default elevation on press
-      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2),
-                  0px 1px 3px 1px rgba(0, 0, 0, 0.10);
-      @include c.state-layer(var(--mtrl-sys-color-primary), 'pressed');
+      @include m.state-layer(t.color('primary'), 'pressed');
     }
     
-    &.#{c.$prefix}-button--disabled {
-      box-shadow: none;
-      background-color: rgba(var(--mtrl-sys-color-on-surface-rgb), 0.12);
-      color: rgba(var(--mtrl-sys-color-on-surface-rgb), 0.38);
-    }
+    // &:disabled {
+    //   border-color: t.alpha('on-surface', 0.12);
+    //   color: t.alpha('on-surface', 0.38);
+    // }
   }
-
+  
   &--text {
-    background-color: transparent;
-    color: var(--mtrl-sys-color-primary);
-    padding: 0 12px;
-    min-width: 48px;
+    min-width: 0;
+    padding: 0 v.button('padding-horizontal-small');
+    color: t.color('primary');
     
     &:hover {
-      @include c.state-layer(var(--mtrl-sys-color-primary), 'hover');
-    }
-    
-    &:focus {
-      @include c.state-layer(var(--mtrl-sys-color-primary), 'focus');
+      background-color: t.alpha('primary', 0.08);
     }
     
     &:active {
-      @include c.state-layer(var(--mtrl-sys-color-primary), 'pressed');
+      background-color: t.alpha('primary', 0.12);
     }
     
-    // Adjust spacing when icon is present
-    .#{c.$prefix}-button-icon {
-      margin-right: 8px;
-      
-      @include c.rtl {
-        margin-right: 0;
-        margin-left: 8px;
-      }
-    }
-    
-    &.#{c.$prefix}-button--disabled {
-      color: rgba(var(--mtrl-sys-color-on-surface-rgb), 0.38);
-    }
-  }
-
-  &--icon {
-    background-color: transparent;
-  }
-
-  &--circular {
-    border-radius: 50%;
-    padding: 8px;
-    min-width: unset;
-    width: 40px;
-    height: 40px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    .#{c.$prefix}-button-icon {
-     margin: 0;
-    }
-
-    &.#{c.$prefix}-button--small {
-     width: 32px;
-     height: 32px;
-    }
-
-    &.#{c.$prefix}-button--large {
-     width: 48px;
-     height: 48px;
-    }
-  }
-
-  // States
-  &--disabled {
-    opacity: 0.38;
-    pointer-events: none;
-    cursor: default;
-    
-    &.#{c.$prefix}-button--outlined {
-      border-color: rgba(var(--mtrl-sys-color-on-surface-rgb), 0.12);
+    &:disabled {
+      color: t.alpha('on-surface', 0.38);
     }
   }
   
-  // Sizes
+  // Size variants
   &--small {
     height: 32px;
-    padding: 0 16px;
-    
-    .#{c.$prefix}-button-icon {
-      font-size: 16px;
-    }
+    min-width: 48px;
+    padding: 0 v.button('padding-horizontal-small');
+    font-size: 13px;
   }
   
   &--large {
     height: 48px;
+    min-width: 78px;
     padding: 0 32px;
-    
-    .#{c.$prefix}-button-icon {
-      font-size: 20px;
-    }
+    font-size: 16px;
   }
   
-  // Accessibility
-  @include c.focus-ring();
-  
-  @include c.reduced-motion {
-    transition: none;
-  }
-  
-  @include c.high-contrast {
-    border: 1px solid currentColor;
+  // Special case for icon-only buttons
+  &--icon-only {
+    min-width: v.button('height');
+    width: v.button('height');
+    padding: 0;
+    border-radius: 50%;
+    
+    &.#{$component}--small {
+      min-width: 32px;
+      width: 32px;
+    }
+    
+    &.#{$component}--large {
+      min-width: 48px;
+      width: 48px;
+    }
   }
 }

package/src/components/checkbox/checkbox.js

@@ -22,10 +22,11 @@ const withCheckIcon = (config) => (component) => {
   const icon = document.createElement('span')
   icon.className = `${config.prefix}-checkbox-icon`
   icon.innerHTML = `
-    <svg viewBox="0 0 24 24" aria-hidden="true">
-      <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"></path>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+      <path d="M9.55 14.6L6.35 11.4l-1.9 1.9L9.55 18.4l10.9-10.9-1.9-1.9z"/>
     </svg>
   `
+
   component.element.appendChild(icon)
   return component
 }
@@ -82,7 +83,7 @@ const createCheckbox = (config = {}) => {
     withCheckIcon(baseConfig),
     withTextLabel(baseConfig),
     enhancedWithCheckable,
-    withDisabled(),
+    withDisabled(baseConfig), // Pass the baseConfig to withDisabled
     withLifecycle(),
     comp => withAPI({
       disabled: comp.disabled,