mtrl 0.3.8 → 0.4.0

package/src/styles/components/_top-app-bar.scss

@@ -1,225 +0,0 @@
-// src/components/top-app-bar/_styles.scss
-@use 'sass:map';
-@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}-top-app-bar';
-
-.#{$component} {
-  // Core Properties
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: f.get-z-index('fixed');
-  display: flex;
-  align-items: center;
-  width: 100%;
-  background-color: t.color('surface');
-  
-  // Default type (small) - 64dp height as per specs
-  height: 64px;
-  padding: 0 16px;
-  
-  // Apply transition for scroll behavior
-  transition: 
-    box-shadow 0.3s ease-in-out,
-    background-color 0.3s ease-in-out,
-    height 0.3s ease-in-out;
-  
-  // Container for the headline
-  &-headline {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    @include m.typography('title-large');
-    color: t.color('on-surface');
-    margin: 0;
-    padding: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    transition: 
-      font-size 0.3s ease-in-out,
-      margin 0.3s ease-in-out,
-      padding 0.3s ease-in-out;
-  }
-  
-  // Leading section (usually navigation icon)
-  &-leading {
-    display: flex;
-    align-items: center;
-    margin-right: 24px;
-  }
-  
-  // Trailing section (usually action icons)
-  &-trailing {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-left: auto;
-  }
-  
-  // Center-aligned top app bar
-  &--center {
-    .#{$component}-headline {
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      text-align: center;
-      flex: 0;
-    }
-  }
-  
-  // Medium top app bar - 112dp height
-  &--medium {
-    height: 112px;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: space-between;
-    padding: 0;
-    
-    .#{$component}-row {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      padding: 0 16px;
-      
-      &:first-child {
-        margin-top: 20px;
-      }
-    }
-    
-    .#{$component}-headline {
-      margin-bottom: 24px;
-      margin-left: 16px;
-      @include m.typography('headline-small');
-    }
-  }
-  
-  // Large top app bar - 152dp height
-  &--large {
-    height: 152px;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: space-between;
-    padding: 0;
-    
-    .#{$component}-row {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      padding: 0 16px;
-      
-      &:first-child {
-        margin-top: 20px;
-      }
-    }
-    
-    .#{$component}-headline {
-      margin-bottom: 28px;
-      margin-left: 16px;
-      @include m.typography('headline-medium');
-    }
-  }
-  
-  // States for on-scroll behavior
-  &--scrolled {
-    background-color: t.color('surface-container');
-    @include m.elevation(1);
-    
-    // Compress medium and large variants to small on scroll if compressible
-    &.#{$component}--medium.#{$component}--compressible,
-    &.#{$component}--large.#{$component}--compressible {
-      height: 64px;
-      flex-direction: row;
-      align-items: center;
-      padding: 0 16px;
-      
-      .#{$component}-row {
-        display: none;
-      }
-      
-      .#{$component}-headline {
-        margin: 0;
-        @include m.typography('title-large');
-      }
-      
-      // Fix for headline that is inside row in medium/large
-      .#{$component}-row:nth-child(2) {
-        display: flex;
-        flex: 1;
-        margin: 0;
-        padding: 0;
-      }
-    }
-  }
-  
-  // RTL Support
-  [dir="rtl"] & {
-    .#{$component}-leading {
-      margin-right: 0;
-      margin-left: 24px;
-    }
-    
-    .#{$component}-trailing {
-      margin-left: 0;
-      margin-right: auto;
-    }
-    
-    &--medium,
-    &--large {
-      .#{$component}-headline {
-        margin-left: 0;
-        margin-right: 16px;
-      }
-    }
-    
-    &--center {
-      .#{$component}-headline {
-        left: auto;
-        right: 50%;
-        transform: translateX(50%);
-      }
-    }
-  }
-  
-  // Mobile screen adjustments
-  @media (max-width: map.get(v.$breakpoints, 'sm')) {
-    // Reduce side padding slightly on small screens
-    padding: 0 12px;
-    
-    .#{$component}-leading {
-      margin-right: 16px;
-    }
-    
-    .#{$component}-trailing {
-      gap: 4px;
-    }
-    
-    // Make icon buttons slightly smaller
-    .#{$component}-leading,
-    .#{$component}-trailing {
-      button {
-        padding: 8px;
-      }
-    }
-  }
-  
-  // Reduced motion support
-  @include m.reduced-motion {
-    transition-duration: 0.01ms;
-    
-    .#{$component}-headline {
-      transition-duration: 0.01ms;
-    }
-  }
-  
-  // High contrast mode support
-  @include m.high-contrast {
-    border-bottom: 1px solid currentColor;
-  }
-}

package/src/styles/main.scss

@@ -1,175 +0,0 @@
-// src/styles/main.scss
-
-// Import Sass modules
-@use 'sass:map';
-@use 'sass:list' as sasslist;
-@use 'sass:math';
-
-// Abstract layer
-@use 'abstract/base';
-@use 'abstract/variables' as v;
-@use 'abstract/functions' as f;
-@use 'abstract/mixins' as m;
-@use 'abstract/theme' as t;
-
-
-// Utilities
-@use 'utilities/spacing';
-@use 'utilities/visibility';
-@use 'utilities/colors';
-@use 'utilities/flexbox';
-@use 'utilities/typography';
-
-// Themes
-@use 'themes/index';
-
-// Reset
-@use 'base/reset';
-//@use 'base/typography';
-
-// Components
-@use './components/textfield' as textfield;
-@use './components/badge' as badge;
-@use './components/bottom-app-bar' as bottom-app-bar;
-@use './components/menu' as menu;
-@use './components/slider' as slider;
-@use './components/switch' as switch;
-@use './components/select' as select;
-@use './components/tabs' as tabs;
-@use './components/top-app-bar' as top-app-bar;
-
-@use './components/button' as button;
-@use './components/fab' as fab;
-@use './components/extended-fab' as extended-fab;
-@use './components/segmented-button' as segmented-button;
-@use './components/card' as card;
-@use './components/carousel' as carousel;
-@use './components/checkbox' as checkbox;
-@use './components/chips' as chips;
-@use './components/datepicker' as datepicker;
-@use './components/dialog' as dialog;
-@use './components/divider' as divider;
-
-@use './components/progress' as progress;
-
-@use './components/radios' as radios;
-@use './components/timepicker' as timepicker;
-@use './components/search' as search;
-
-@use './components/snackbar' as snackbar;
-@use './components/navigation' as navigation;
-@use './components/list' as list;
-
-@use './utilities/ripple';
-
-// Initialize theme system
-:root {
-  // Apply the base theme CSS variables
-  @include t.light-theme;
-
-  // State layer variables - accessing individual values
-  --#{base.$prefix}-sys-state-hover-state-layer-opacity: #{v.state('hover-state-layer-opacity')};
-  --#{base.$prefix}-sys-state-focus-state-layer-opacity: #{v.state('focus-state-layer-opacity')};
-  --#{base.$prefix}-sys-state-pressed-state-layer-opacity: #{v.state('pressed-state-layer-opacity')};
-  --#{base.$prefix}-sys-state-dragged-state-layer-opacity: #{v.state('dragged-state-layer-opacity')};
-  
-  // Motion variables - accessing individual values
-  --#{base.$prefix}-sys-motion-duration-short1: #{v.motion('duration-short1')};
-  --#{base.$prefix}-sys-motion-duration-short2: #{v.motion('duration-short2')};
-  --#{base.$prefix}-sys-motion-duration-short3: #{v.motion('duration-short3')};
-  --#{base.$prefix}-sys-motion-duration-short4: #{v.motion('duration-short4')};
-  --#{base.$prefix}-sys-motion-duration-medium1: #{v.motion('duration-medium1')};
-  --#{base.$prefix}-sys-motion-duration-medium2: #{v.motion('duration-medium2')};
-  --#{base.$prefix}-sys-motion-duration-long1: #{v.motion('duration-long1')};
-  --#{base.$prefix}-sys-motion-duration-long2: #{v.motion('duration-long2')};
-  --#{base.$prefix}-sys-motion-easing-standard: #{v.motion('easing-standard')};
-  --#{base.$prefix}-sys-motion-easing-standard-accelerate: #{v.motion('easing-standard-accelerate')};
-  --#{base.$prefix}-sys-motion-easing-standard-decelerate: #{v.motion('easing-standard-decelerate')};
-  --#{base.$prefix}-sys-motion-easing-emphasized: #{v.motion('easing-emphasized')};
-  --#{base.$prefix}-sys-motion-easing-emphasized-accelerate: #{v.motion('easing-emphasized-accelerate')};
-  --#{base.$prefix}-sys-motion-easing-emphasized-decelerate: #{v.motion('easing-emphasized-decelerate')};
-
-  // Shape variables - accessing individual values
-  --#{base.$prefix}-sys-shape-none: #{v.shape('none')};
-  --#{base.$prefix}-sys-shape-extra-tiny: #{v.shape('extra-tiny')};
-  --#{base.$prefix}-sys-shape-tiny: #{v.shape('tiny')};
-  --#{base.$prefix}-sys-shape-extra-small: #{v.shape('extra-small')};
-  --#{base.$prefix}-sys-shape-small: #{v.shape('small')};
-  --#{base.$prefix}-sys-shape-medium: #{v.shape('medium')};
-  --#{base.$prefix}-sys-shape-large: #{v.shape('large')};
-  --#{base.$prefix}-sys-shape-extra-large: #{v.shape('extra-large')};
-  --#{base.$prefix}-sys-shape-full: #{v.shape('full')};
-  --#{base.$prefix}-sys-shape-pill: #{v.shape('pill')};
-  
-  // Typography - extracting individual properties
-  @each $scale, $properties in v.$typescale {
-    $font-family: map.get($properties, 'font-family');
-    $primary-font: sasslist.nth($font-family, 1);
-    $fallback-font: if(sasslist.length($font-family) > 1, sasslist.nth($font-family, 2), 'sans-serif');
-    
-    --#{base.$prefix}-sys-typescale-#{$scale}-font-family-name: #{$primary-font};
-    --#{base.$prefix}-sys-typescale-#{$scale}-font-family-fallback: #{$fallback-font};
-    --#{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 t.dark-theme;
-  }
-}
-
-// Base styles
-body {
-  margin: 0;
-  padding: 0;
-  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 m.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 m.reduced-motion {
-    scroll-behavior: auto;
-  }
-}
-
-// Set box-sizing for all elements
-*, *::before, *::after {
-  box-sizing: border-box;
-}

package/src/styles/themes/_autumn.scss

@@ -1,105 +0,0 @@
-// src/styles/themes/_autumn.scss
-@use '../abstract/base' as *;
-@use 'base-theme' as *;
-
-@include create-theme('autumn') {
-  // Key colors with brown as primary and red as secondary
-  --#{$prefix}-sys-color-primary: #795548; // Rich brown as primary color
-  --#{$prefix}-sys-color-on-primary: #FFFFFF;
-  --#{$prefix}-sys-color-primary-container: #FFDCC7;
-  --#{$prefix}-sys-color-on-primary-container: #2C1500;
-  
-  --#{$prefix}-sys-color-secondary: #A02A2A; // Autumn red as secondary
-  --#{$prefix}-sys-color-on-secondary: #FFFFFF;
-  --#{$prefix}-sys-color-secondary-container: #FFDAD4;
-  --#{$prefix}-sys-color-on-secondary-container: #410001;
-  
-  --#{$prefix}-sys-color-tertiary: #4D6642; // Dark green like evergreen trees
-  --#{$prefix}-sys-color-on-tertiary: #FFFFFF;
-  --#{$prefix}-sys-color-tertiary-container: #CFE9BE;
-  --#{$prefix}-sys-color-on-tertiary-container: #0A2008;
-  
-  --#{$prefix}-sys-color-quaternary: #8B6500; // Golden yellow like autumn leaves
-  --#{$prefix}-sys-color-on-quaternary: #FFFFFF;
-  --#{$prefix}-sys-color-quaternary-container: #FFDF8A;
-  --#{$prefix}-sys-color-on-quaternary-container: #2C1F00;
-
-  // Neutral colors with warm, earthy undertones
-  --#{$prefix}-sys-color-surface: #FFFBF7;
-  --#{$prefix}-sys-color-surface-dim: #EAD7CE;
-  --#{$prefix}-sys-color-surface-bright: #FFFBF7;
-  --#{$prefix}-sys-color-surface-container-lowest: #FFFFFF;
-  --#{$prefix}-sys-color-surface-container-low: #FFF0EA;
-  --#{$prefix}-sys-color-surface-container: #F5E1D7;
-  --#{$prefix}-sys-color-surface-container-high: #EFDBD1;
-  --#{$prefix}-sys-color-surface-container-highest: #E9D5CB;
-  
-  --#{$prefix}-sys-color-on-surface: #201A17;
-  --#{$prefix}-sys-color-on-surface-variant: #53433C;
-  
-  --#{$prefix}-sys-color-outline: #85736C;
-  --#{$prefix}-sys-color-outline-variant: #D7C1BA;
-
-  // Success colors
-  --#{$prefix}-sys-color-success: #85CFA9;
-  --#{$prefix}-sys-color-success-rgb: 133, 207, 169;
-  --#{$prefix}-sys-color-on-success: #00392D;
-  --#{$prefix}-sys-color-on-success-rgb: 0, 57, 45;
-  
-  // Warning colors
-  --#{$prefix}-sys-color-warning: #FFB95C;
-  --#{$prefix}-sys-color-warning-rgb: 255, 185, 92;
-  --#{$prefix}-sys-color-on-warning: #3F2200;
-  --#{$prefix}-sys-color-on-warning-rgb: 63, 34, 0;
-  
-  // Info colors
-  --#{$prefix}-sys-color-info: #99CBFF;
-  --#{$prefix}-sys-color-info-rgb: 153, 203, 255;
-  --#{$prefix}-sys-color-on-info: #003060;
-  --#{$prefix}-sys-color-on-info-rgb: 0, 48, 96;
-
-    // Include status colors for light theme
-  @include status-colors-light();
-
-  &[data-theme-mode="dark"] {
-    // Key colors
-    --#{$prefix}-sys-color-primary: #DDB995; // Softer brown
-    --#{$prefix}-sys-color-on-primary: #422B09;
-    --#{$prefix}-sys-color-primary-container: #5D3F1C;
-    --#{$prefix}-sys-color-on-primary-container: #FFDCC7;
-    
-    --#{$prefix}-sys-color-secondary: #FFB4AB; // Vibrant red
-    --#{$prefix}-sys-color-on-secondary: #690004;
-    --#{$prefix}-sys-color-secondary-container: #93000A;
-    --#{$prefix}-sys-color-on-secondary-container: #FFDAD4;
-    
-    --#{$prefix}-sys-color-tertiary: #B4CCA4; // Muted green
-    --#{$prefix}-sys-color-on-tertiary: #213515;
-    --#{$prefix}-sys-color-tertiary-container: #384F2B;
-    --#{$prefix}-sys-color-on-tertiary-container: #CFE9BE;
-    
-    --#{$prefix}-sys-color-quaternary: #FFC147;
-    --#{$prefix}-sys-color-on-quaternary: #463300;
-    --#{$prefix}-sys-color-quaternary-container: #644900;
-    --#{$prefix}-sys-color-on-quaternary-container: #FFDF8A;
-
-    // Include status colors for dark theme
-    @include status-colors-dark();
-
-    // Neutral colors
-    --#{$prefix}-sys-color-surface: #201A17;
-    --#{$prefix}-sys-color-surface-dim: #17120F;
-    --#{$prefix}-sys-color-surface-bright: #3D3631;
-    --#{$prefix}-sys-color-surface-container-lowest: #130E0B;
-    --#{$prefix}-sys-color-surface-container-low: #201A17;
-    --#{$prefix}-sys-color-surface-container: #241E1A;
-    --#{$prefix}-sys-color-surface-container-high: #2E2723;
-    --#{$prefix}-sys-color-surface-container-highest: #39322D;
-    
-    --#{$prefix}-sys-color-on-surface: #EDE0D9;
-    --#{$prefix}-sys-color-on-surface-variant: #D7C1BA;
-    
-    --#{$prefix}-sys-color-outline: #A08C85;
-    --#{$prefix}-sys-color-outline-variant: #53433C;
-  }
-}

package/src/styles/themes/_base-theme.scss

@@ -1,85 +0,0 @@
-// src/styles/themes/_base-theme.scss
-@use '../abstract/base' as *;
-
-// Base theme definition with common properties and structure
-@mixin create-theme($name) {
-  [data-theme="#{$name}"] {
-    @content;
-  }
-}
-
-// Common status colors that should be available in all themes
-@mixin status-colors-light() {
-  // Error colors
-  --#{$prefix}-sys-color-error: #B3261E;
-  --#{$prefix}-sys-color-error-rgb: 179, 38, 30;
-  --#{$prefix}-sys-color-on-error: #FFFFFF;
-  --#{$prefix}-sys-color-on-error-rgb: 255, 255, 255;
-  --#{$prefix}-sys-color-error-container: #F9DEDC;
-  --#{$prefix}-sys-color-error-container-rgb: 249, 222, 220;
-  --#{$prefix}-sys-color-on-error-container: #410E0B;
-  --#{$prefix}-sys-color-on-error-container-rgb: 65, 14, 11;
-  
-  // Success colors
-  --#{$prefix}-sys-color-success: #007B5A;
-  --#{$prefix}-sys-color-success-rgb: 0, 123, 90;
-  --#{$prefix}-sys-color-on-success: #FFFFFF;
-  --#{$prefix}-sys-color-on-success-rgb: 255, 255, 255;
-  
-  // Warning colors
-  --#{$prefix}-sys-color-warning: #DD6D06;
-  --#{$prefix}-sys-color-warning-rgb: 221, 109, 6;
-  --#{$prefix}-sys-color-on-warning: #FFFFFF;
-  --#{$prefix}-sys-color-on-warning-rgb: 255, 255, 255;
-  
-  // Info colors
-  --#{$prefix}-sys-color-info: #0061A4;
-  --#{$prefix}-sys-color-info-rgb: 0, 97, 164;
-  --#{$prefix}-sys-color-on-info: #FFFFFF;
-  --#{$prefix}-sys-color-on-info-rgb: 255, 255, 255;
-}
-
-@mixin status-colors-dark() {
-  // Error colors
-  --#{$prefix}-sys-color-error: #F2B8B5;
-  --#{$prefix}-sys-color-error-rgb: 242, 184, 181;
-  --#{$prefix}-sys-color-on-error: #601410;
-  --#{$prefix}-sys-color-on-error-rgb: 96, 20, 16;
-  --#{$prefix}-sys-color-error-container: #8C1D18;
-  --#{$prefix}-sys-color-error-container-rgb: 140, 29, 24;
-  --#{$prefix}-sys-color-on-error-container: #F9DEDC;
-  --#{$prefix}-sys-color-on-error-container-rgb: 249, 222, 220;
-  
-  // Success colors
-  --#{$prefix}-sys-color-success: #85CFA9;
-  --#{$prefix}-sys-color-success-rgb: 133, 207, 169;
-  --#{$prefix}-sys-color-on-success: #00392D;
-  --#{$prefix}-sys-color-on-success-rgb: 0, 57, 45;
-  
-  // Warning colors
-  --#{$prefix}-sys-color-warning: #FFB95C;
-  --#{$prefix}-sys-color-warning-rgb: 255, 185, 92;
-  --#{$prefix}-sys-color-on-warning: #3F2200;
-  --#{$prefix}-sys-color-on-warning-rgb: 63, 34, 0;
-  
-  // Info colors
-  --#{$prefix}-sys-color-info: #99CBFF;
-  --#{$prefix}-sys-color-info-rgb: 153, 203, 255;
-  --#{$prefix}-sys-color-on-info: #003060;
-  --#{$prefix}-sys-color-on-info-rgb: 0, 48, 96;
-}
-
-%theme-base {
-  // Common properties for all themes
-  --#{$prefix}-sys-typescale-label-large-font-family-name: "Roboto";
-  --#{$prefix}-sys-typescale-label-large-font-weight: 500;
-  --#{$prefix}-sys-typescale-label-large-size: 0.875rem;
-  --#{$prefix}-sys-typescale-label-large-line-height: 1.25rem;
-  --#{$prefix}-sys-typescale-label-large-letter-spacing: 0.00625rem;
-
-  --#{$prefix}-sys-shape-corner-extra-small: 4px;
-  --#{$prefix}-sys-shape-corner-small: 8px;
-  --#{$prefix}-sys-shape-corner-medium: 12px;
-  --#{$prefix}-sys-shape-corner-large: 16px;
-  --#{$prefix}-sys-shape-corner-extra-large: 28px;
-}