mtrl 0.0.2 → 0.1.0

package/src/styles/abstract/_theme.scss

@@ -0,0 +1,157 @@
+// 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);
+}
+
+@function alpha($key, $opacity) {
+  @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-primary-container: #4F378B;
+  --#{$prefix}-sys-color-on-primary-container: #EADDFF;
+  
+  --#{$prefix}-sys-color-secondary: #CCC2DC;
+  --#{$prefix}-sys-color-on-secondary: #332D41;
+  --#{$prefix}-sys-color-secondary-container: #4A4458;
+  --#{$prefix}-sys-color-on-secondary-container: #E8DEF8;
+  
+  --#{$prefix}-sys-color-tertiary: #EFB8C8;
+  --#{$prefix}-sys-color-on-tertiary: #492532;
+  --#{$prefix}-sys-color-tertiary-container: #633B48;
+  --#{$prefix}-sys-color-on-tertiary-container: #FFD8E4;
+
+  // Neutral colors
+  --#{$prefix}-sys-color-surface: #1C1B1F;
+  --#{$prefix}-sys-color-surface-dim: #141218;
+  --#{$prefix}-sys-color-surface-bright: #3B383D;
+  --#{$prefix}-sys-color-surface-container-lowest: #0F0D13;
+  --#{$prefix}-sys-color-surface-container-low: #1D1B20;
+  --#{$prefix}-sys-color-surface-container: #211F26;
+  --#{$prefix}-sys-color-surface-container-high: #2B2930;
+  --#{$prefix}-sys-color-surface-container-highest: #36343B;
+  
+  --#{$prefix}-sys-color-on-surface: #E6E1E5;
+  --#{$prefix}-sys-color-on-surface-variant: #CAC4D0;
+  --#{$prefix}-sys-color-on-surface-rgb: 230, 225, 229;
+  
+  // Additional colors
+  --#{$prefix}-sys-color-outline: #938F99;
+  --#{$prefix}-sys-color-outline-variant: #444746;
+  --#{$prefix}-sys-color-shadow: #000000;
+  --#{$prefix}-sys-color-scrim: #000000;
+  --#{$prefix}-sys-color-inverse-surface: #E6E1E5;
+  --#{$prefix}-sys-color-inverse-on-surface: #313033;
+  --#{$prefix}-sys-color-inverse-primary: #6750A4;
+}
+
+@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-primary-container: #EADDFF;
+  --#{$prefix}-sys-color-on-primary-container: #21005D;
+  
+  --#{$prefix}-sys-color-secondary: #625B71;
+  --#{$prefix}-sys-color-on-secondary: #FFFFFF;
+  --#{$prefix}-sys-color-secondary-container: #E8DEF8;
+  --#{$prefix}-sys-color-on-secondary-container: #1D192B;
+  
+  --#{$prefix}-sys-color-tertiary: #7D5260;
+  --#{$prefix}-sys-color-on-tertiary: #FFFFFF;
+  --#{$prefix}-sys-color-tertiary-container: #FFD8E4;
+  --#{$prefix}-sys-color-on-tertiary-container: #31111D;
+
+  // Neutral colors
+  --#{$prefix}-sys-color-surface: #FFFBFE;
+  --#{$prefix}-sys-color-surface-dim: #DED8E1;
+  --#{$prefix}-sys-color-surface-bright: #FFF8F7;
+  --#{$prefix}-sys-color-surface-container-lowest: #FFFFFF;
+  --#{$prefix}-sys-color-surface-container-low: #F7F2FA;
+  --#{$prefix}-sys-color-surface-container: #F3EDF7;
+  --#{$prefix}-sys-color-surface-container-high: #ECE6F0;
+  --#{$prefix}-sys-color-surface-container-highest: #E6E0E9;
+  
+  --#{$prefix}-sys-color-on-surface: #1C1B1F;
+  --#{$prefix}-sys-color-on-surface-variant: #49454F;
+  --#{$prefix}-sys-color-on-surface-rgb: 28, 27, 31;
+  
+  // Additional colors
+  --#{$prefix}-sys-color-outline: #79747E;
+  --#{$prefix}-sys-color-outline-variant: #CAC4D0;
+  --#{$prefix}-sys-color-shadow: #000000;
+  --#{$prefix}-sys-color-scrim: #000000;
+  --#{$prefix}-sys-color-inverse-surface: #313033;
+  --#{$prefix}-sys-color-inverse-on-surface: #F4EFF4;
+  --#{$prefix}-sys-color-inverse-primary: #D0BCFF;
+}
+
+// Auto dark mode based on system preference
+@mixin auto-dark-mode {
+  @media (prefers-color-scheme: dark) {
+    @include dark-theme;
+  }
+}

package/src/styles/abstract/_variables.scss

@@ -1,14 +1,12 @@
 // src/styles/abstract/_variables.scss
 @use 'sass:map';
+@use 'base' as *;
 
-// Core configuration
-$prefix: 'mtrl' !default;
-
-// Design tokens
+// Core design tokens
 $state: (
   'hover-state-layer-opacity': 0.08,
-  'pressed-state-layer-opacity': 0.12,
   'focus-state-layer-opacity': 0.12,
+  'pressed-state-layer-opacity': 0.12,
   'dragged-state-layer-opacity': 0.16
 ) !default;
 
@@ -81,6 +79,27 @@ $typescale: (
     '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,
@@ -127,6 +146,8 @@ $typescale: (
 
 $shape: (
   'none': 0,
+  'extra-tiny': 1px,
+  'tiny': 2px,
   'extra-small': 4px,
   'small': 8px,
   'medium': 12px,
@@ -156,4 +177,49 @@ $z-index: (
   'fixed': 50,
   'default': 1,
   'below': -1
-) !default;
+) !default;
+
+// Component-specific tokens
+$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;
+
+// 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);
+}

package/src/styles/base/_reset.scss

@@ -0,0 +1,86 @@
+// 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

@@ -0,0 +1,155 @@
+// 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/main.scss

@@ -1,78 +1,125 @@
 // src/styles/main.scss
 
-// Abstract
-@import 'abstract/variables';
-@import 'abstract/functions';
-@import 'abstract/mixins';
-@import 'abstract/theme';
+// Abstract layer
+@use 'abstract/base';
+@use 'abstract/variables';
+@use 'abstract/functions';
+@use 'abstract/mixins';
+@use 'abstract/theme';
+
+// Themes
+@use 'themes/index';
+
+// Reset
+@use 'base/reset';
+@use 'base/typography';
 
 // Components
-@import '../components/button/styles';
+@use '../components/button/styles';
+@use '../components/checkbox/styles';
+@use '../components/container/styles';
+@use '../components/list/styles';
+@use '../components/menu/styles';
+@use '../components/navigation/styles';
+@use '../components/snackbar/styles';
+@use '../components/switch/styles';
+@use '../components/textfield/styles';
+
+
+@use '../core/build/ripple/ripple';
 
-// Initialize theme
+// Utilities
+@use 'utilities/spacing';
+@use 'utilities/visibility';
+@use 'utilities/colors';
+@use 'utilities/flexbox';
+@use 'utilities/typography';
+
+// Initialize theme system
 :root {
-  @each $key, $value in $mtrl-sys-state {
-    --mtrl-sys-state-#{$key}: #{$value};
+  // Apply the base theme CSS variables
+  @include theme.light-theme;
+
+  // State layer variables
+  @each $key, $value in theme.$mtrl-sys-state {
+    --#{base.$prefix}-sys-state-#{$key}: #{$value};
   }
   
-  @each $key, $value in $mtrl-sys-motion {
-    --mtrl-sys-motion-#{$key}: #{$value};
+  // Motion variables
+  @each $key, $value in theme.$mtrl-sys-motion {
+    --#{base.$prefix}-sys-motion-#{$key}: #{$value};
   }
 
-  @each $key, $value in $mtrl-sys-shape {
-    --mtrl-sys-shape-#{$key}: #{$value};
+  // Shape variables
+  @each $key, $value in theme.$mtrl-sys-shape {
+    --#{base.$prefix}-sys-shape-#{$key}: #{$value};
   }
   
-//   // Default light theme colors
-//   --mtrl-sys-color-primary: #6750A4;
-//   --mtrl-sys-color-primary-rgb: 103, 80, 164;
-//   --mtrl-sys-color-on-primary: #FFFFFF;
-//   --mtrl-sys-color-primary-container: #EADDFF;
-//   --mtrl-sys-color-on-primary-container: #21005D;
-  
-//   --mtrl-sys-color-secondary: #625B71;
-//   --mtrl-sys-color-on-secondary: #FFFFFF;
-//   --mtrl-sys-color-secondary-container: #E8DEF8;
-//   --mtrl-sys-color-on-secondary-container: #1D192B;
-  
-//   --mtrl-sys-color-surface: #FFFBFE;
-//   --mtrl-sys-color-on-surface: #1C1B1F;
-//   --mtrl-sys-color-surface-container: #F3EDF7;
-//   --mtrl-sys-color-on-surface-rgb: 28, 27, 31;
-  
-//   --mtrl-sys-color-outline: #79747E;
-// }
-
-// // Dark theme
-// [data-theme="dark"] {
-//   --mtrl-sys-color-primary: #D0BCFF;
-//   --mtrl-sys-color-primary-rgb: 208, 188, 255;
-//   --mtrl-sys-color-on-primary: #381E72;
-//   --mtrl-sys-color-primary-container: #4F378B;
-//   --mtrl-sys-color-on-primary-container: #EADDFF;
-  
-//   --mtrl-sys-color-secondary: #CCC2DC;
-//   --mtrl-sys-color-on-secondary: #332D41;
-//   --mtrl-sys-color-secondary-container: #4A4458;
-//   --mtrl-sys-color-on-secondary-container: #E8DEF8;
-  
-//   --mtrl-sys-color-surface: #1C1B1F;
-//   --mtrl-sys-color-on-surface: #E6E1E5;
-//   --mtrl-sys-color-surface-container: #211F26;
-//   --mtrl-sys-color-on-surface-rgb: 230, 225, 229;
-  
-//   --mtrl-sys-color-outline: #938F99;
-// }
+  // Typography
+  @each $scale, $properties in variables.$typescale {
+    --#{base.$prefix}-sys-typescale-#{$scale}-font-family-name: #{nth(map-get($properties, font-family), 1)};
+    --#{base.$prefix}-sys-typescale-#{$scale}-font-family-fallback: #{if(length(map-get($properties, font-family)) > 1, nth(map-get($properties, font-family), 2), 'sans-serif')};
+    --#{base.$prefix}-sys-typescale-#{$scale}-font-size: #{map-get($properties, font-size)};
+    --#{base.$prefix}-sys-typescale-#{$scale}-line-height: #{map-get($properties, line-height)};
+    --#{base.$prefix}-sys-typescale-#{$scale}-letter-spacing: #{map-get($properties, letter-spacing)};
+    --#{base.$prefix}-sys-typescale-#{$scale}-font-weight: #{map-get($properties, font-weight)};
+  }
+}
+
+// Dark mode support
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    @include theme.dark-theme;
+  }
+}
 
 // Base styles
 body {
   margin: 0;
   padding: 0;
-  background-color: var(--mtrl-sys-color-surface);
-  color: var(--mtrl-sys-color-on-surface);
-  font-family: var(--mtrl-sys-typescale-body-medium-font-family-name, 'Roboto'), sans-serif;
+  background-color: var(--#{base.$prefix}-sys-color-surface);
+  color: var(--#{base.$prefix}-sys-color-on-surface);
+  font-family: var(--#{base.$prefix}-sys-typescale-body-medium-font-family-name, 'Roboto'), 
+               var(--#{base.$prefix}-sys-typescale-body-medium-font-family-fallback, sans-serif);
+  font-size: var(--#{base.$prefix}-sys-typescale-body-medium-font-size);
+  line-height: var(--#{base.$prefix}-sys-typescale-body-medium-line-height);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   
-  @include motion-transition(background-color, color);
+  @include mixins.motion-transition(background-color, color);
+}
+
+// Ensure links have the correct contrast
+a {
+  color: var(--#{base.$prefix}-sys-color-primary);
+  text-decoration: none;
+  
+  &:hover {
+    text-decoration: underline;
+  }
+  
+  &:focus-visible {
+    outline: 2px solid var(--#{base.$prefix}-sys-color-primary);
+    outline-offset: 2px;
+  }
+}
+
+// Focus styles for keyboard navigation
+:focus-visible {
+  outline: 2px solid var(--#{base.$prefix}-sys-color-primary);
+  outline-offset: 2px;
+}
+
+// Use smooth scrolling for the page
+html {
+  scroll-behavior: smooth;
+  
+  @include mixins.reduced-motion {
+    scroll-behavior: auto;
+  }
+}
+
+// Set box-sizing for all elements
+*, *::before, *::after {
+  box-sizing: border-box;
 }