mtrl 0.5.2 → 0.5.4

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

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

@@ -0,0 +1,129 @@
+// 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" as typo;
+
+// 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" as ripple;
+@use "./utilities/layout" as layout;
+
+// // 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

@@ -0,0 +1,105 @@
+// 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:  #EDD9B9;
+  --#{$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: #6A3A22;
+    --#{$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

@@ -0,0 +1,85 @@
+// 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;
+}