mtrl 0.3.8 → 0.4.0

package/src/styles/abstract/_variables.scss

@@ -1,305 +0,0 @@
-// 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-short1': 100ms,
-  'duration-short2': 200ms,
-  'duration-short3': 250ms,
-  'duration-short4': 300ms,
-  'duration-medium1': 400ms,
-  'duration-medium2': 500ms,
-  'duration-long1': 600ms,
-  'duration-long2': 700ms,
-  '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),
-  '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)
-) !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': map.get($shape, 'full'),
-  'transition-duration': map.get($motion, 'duration-short2'),
-  'transition-easing': map.get($motion, 'easing-standard')
-) !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

@@ -1,86 +0,0 @@
-// src/styles/base/_reset.scss
-
-// Modern CSS Reset
-// Adapted and simplified for Material Design
-
-// 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;
-}

package/src/styles/base/_typography.scss

@@ -1,155 +0,0 @@
-// src/styles/base/_typography.scss
-@use '../abstract/base' as base;
-@use '../abstract/variables' as v;
-@use '../abstract/mixins' as m;
-
-// Typography scale classes
-$prefix: base.$prefix;
-
-// Display typography
-.#{$prefix}-display-large {
-  @include m.typography('display-large');
-}
-
-.#{$prefix}-display-medium {
-  @include m.typography('display-medium');
-}
-
-.#{$prefix}-display-small {
-  @include m.typography('display-small');
-}
-
-// Headline typography
-.#{$prefix}-headline-large {
-  @include m.typography('headline-large');
-}
-
-.#{$prefix}-headline-medium {
-  @include m.typography('headline-medium');
-}
-
-.#{$prefix}-headline-small {
-  @include m.typography('headline-small');
-}
-
-// Title typography
-.#{$prefix}-title-large {
-  @include m.typography('title-large');
-}
-
-.#{$prefix}-title-medium {
-  @include m.typography('title-medium');
-}
-
-.#{$prefix}-title-small {
-  @include m.typography('title-small');
-}
-
-// Body typography
-.#{$prefix}-body-large {
-  @include m.typography('body-large');
-}
-
-.#{$prefix}-body-medium {
-  @include m.typography('body-medium');
-}
-
-.#{$prefix}-body-small {
-  @include m.typography('body-small');
-}
-
-// Label typography
-.#{$prefix}-label-large {
-  @include m.typography('label-large');
-}
-
-.#{$prefix}-label-medium {
-  @include m.typography('label-medium');
-}
-
-.#{$prefix}-label-small {
-  @include m.typography('label-small');
-}
-
-// Convenience modifiers
-.#{$prefix}-text-center {
-  text-align: center;
-}
-
-.#{$prefix}-text-left {
-  text-align: left;
-}
-
-.#{$prefix}-text-right {
-  text-align: right;
-}
-
-// Font weight modifiers
-.#{$prefix}-font-thin {
-  font-weight: 100;
-}
-
-.#{$prefix}-font-light {
-  font-weight: 300;
-}
-
-.#{$prefix}-font-regular {
-  font-weight: 400;
-}
-
-.#{$prefix}-font-medium {
-  font-weight: 500;
-}
-
-.#{$prefix}-font-bold {
-  font-weight: 700;
-}
-
-// Text truncation with ellipsis
-.#{$prefix}-truncate {
-  @include m.truncate;
-}
-
-.#{$prefix}-truncate-2 {
-  @include m.truncate(2);
-}
-
-.#{$prefix}-truncate-3 {
-  @include m.truncate(3);
-}
-
-// Set base styles for heading elements
-h1 {
-  @include m.typography('headline-large');
-  margin-bottom: 0.5em;
-}
-
-h2 {
-  @include m.typography('headline-medium');
-  margin-bottom: 0.5em;
-}
-
-h3 {
-  @include m.typography('headline-small');
-  margin-bottom: 0.5em;
-}
-
-h4 {
-  @include m.typography('title-large');
-  margin-bottom: 0.5em;
-}
-
-h5 {
-  @include m.typography('title-medium');
-  margin-bottom: 0.5em;
-}
-
-h6 {
-  @include m.typography('title-small');
-  margin-bottom: 0.5em;
-}
-
-p {
-  @include m.typography('body-medium');
-  margin-bottom: 1em;
-}

package/src/styles/components/_badge.scss

@@ -1,182 +0,0 @@
-// src/components/badge/_badge.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;
-
-/**
- * Badge component styles
- * 
- * Badge specifications:
- * - Small badge size: 6dp
- * - Large badge height: 16dp
- * - Small badge corner radius: 3dp
- * - Large badge corner radius: 8dp
- * - Small badge: positioned 6dp from container edge
- * - Large badge: positioned 14dp (height) x 12dp (width) from container edge
- */
-$component: '#{base.$prefix}-badge';
-$wrapper: '#{base.$prefix}-badge-wrapper';
-
-// Wrapper styles to establish positioning context
-.#{$wrapper} {
-  position: relative;
-  display: inline-flex;
-  flex-shrink: 0;
-}
-
-.#{$component} {
-  // Base badge styles
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 500;
-  box-sizing: border-box;
-  overflow: hidden;
-  transition: all 200ms ease;
-  text-overflow: ellipsis;
-  
-  // Hide for visibility: false
-  &--invisible {
-    display: none;
-  }
-  
-  // Small badge (dot)
-  &--small {
-    width: 6px;
-    height: 6px;
-    min-width: 6px;
-    border-radius: 3px; // 3dp corner radius
-    font-size: 0;
-    padding: 0;
-  }
-  
-  // Large badge
-  &--large {
-    height: 16px;
-    min-width: 16px;
-    border-radius: 8px; // 8dp corner radius
-    padding: 0 4px;
-    font-size: 11px;
-    line-height: 16px;
-    
-    // Handle max character count container (16dp x 34dp)
-    &.#{$component}--overflow {
-      min-width: auto;
-      max-width: 34px; // max width is 34dp for overflow badges
-      padding: 0 4px;
-    }
-  }
-  
-  // Position specs
-  &--positioned {
-    // Small badge placement (6dp from container edge)
-    &.#{$component}--small {
-      &.#{$component}--top-right {
-        top: -3px;
-        right: -3px;
-      }
-      
-      &.#{$component}--top-left {
-        top: -3px;
-        left: -3px;
-      }
-      
-      &.#{$component}--bottom-right {
-        bottom: -3px;
-        right: -3px;
-      }
-      
-      &.#{$component}--bottom-left {
-        bottom: -3px;
-        left: -3px;
-      }
-    }
-    
-    // Large badge placement (14dp x 12dp from container edge)
-    &.#{$component}--large {
-      &.#{$component}--top-right {
-        top: -8px;
-        right: -8px;
-      }
-      
-      &.#{$component}--top-left {
-        top: -8px;
-        left: -8px;
-      }
-      
-      &.#{$component}--bottom-right {
-        bottom: -8px;
-        right: -8px;
-      }
-      
-      &.#{$component}--bottom-left {
-        bottom: -8px;
-        left: -8px;
-      }
-    }
-  }
-  
-  // badge color system
-  &--error {
-    background-color: t.color('error');
-    color: t.color('on-error');
-  }
-  
-  &--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');
-  }
-  
-  &--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');
-  }
-}
-
-// RTL support
-[dir="rtl"] {
-  .#{$component}--positioned {
-    &.#{$component}--top-right {
-      right: auto;
-      left: -8px;
-    }
-    
-    &.#{$component}--top-left {
-      left: auto;
-      right: -8px;
-    }
-    
-    &.#{$component}--bottom-right {
-      right: auto;
-      left: -8px;
-    }
-    
-    &.#{$component}--bottom-left {
-      left: auto;
-      right: -8px;
-    }
-  }
-}