mtrl 0.0.3 → 0.1.2

package/src/styles/themes/_summer.scss

@@ -0,0 +1,82 @@
+// src/styles/themes/_summer.scss
+@use '../abstract/base' as *;
+@use 'base-theme' as *;
+
+@include create-theme('summer') {
+  // Key colors inspired by Chuck Jones' Road Runner desert palette
+  --#{$prefix}-sys-color-primary: #4196CB; // Bright desert sky blue
+  --#{$prefix}-sys-color-on-primary: #FFFFFF;
+  --#{$prefix}-sys-color-primary-container: #D1E4FF;
+  --#{$prefix}-sys-color-on-primary-container: #001D36;
+  
+  --#{$prefix}-sys-color-secondary: #F3C649; // Desert sand/yellow
+  --#{$prefix}-sys-color-on-secondary: #3E2E00;
+  --#{$prefix}-sys-color-secondary-container: #FFF4D5;
+  --#{$prefix}-sys-color-on-secondary-container: #291F00;
+  
+  --#{$prefix}-sys-color-tertiary: #A75B39; // Mesa rock orange-brown
+  --#{$prefix}-sys-color-on-tertiary: #FFFFFF;
+  --#{$prefix}-sys-color-tertiary-container: #FFDBC8;
+  --#{$prefix}-sys-color-on-tertiary-container: #3A1600;
+
+  // Accent colors for more variety
+  --#{$prefix}-sys-color-accent: #6B4596; // Road Runner purple
+  --#{$prefix}-sys-color-on-accent: #FFFFFF;
+  --#{$prefix}-sys-color-accent-container: #EBDCFF;
+  --#{$prefix}-sys-color-on-accent-container: #25005C;
+  
+  // Neutral colors with desert warmth
+  --#{$prefix}-sys-color-surface: #FFFBF8;
+  --#{$prefix}-sys-color-surface-dim: #EAE2D9;
+  --#{$prefix}-sys-color-surface-bright: #FFFBF8;
+  --#{$prefix}-sys-color-surface-container-lowest: #FFFFFF;
+  --#{$prefix}-sys-color-surface-container-low: #FEF5ED;
+  --#{$prefix}-sys-color-surface-container: #F7EFE7;
+  --#{$prefix}-sys-color-surface-container-high: #F1E9E1;
+  --#{$prefix}-sys-color-surface-container-highest: #EBE3DB;
+  
+  --#{$prefix}-sys-color-on-surface: #1F1B16;
+  --#{$prefix}-sys-color-on-surface-variant: #50453B;
+  
+  --#{$prefix}-sys-color-outline: #827568;
+  --#{$prefix}-sys-color-outline-variant: #D5C8B9;
+
+  &[data-theme-mode="dark"] {
+    // Key colors - darker but still vibrant
+    --#{$prefix}-sys-color-primary: #9ECAFF;
+    --#{$prefix}-sys-color-on-primary: #003258;
+    --#{$prefix}-sys-color-primary-container: #00497D;
+    --#{$prefix}-sys-color-on-primary-container: #D1E4FF;
+    
+    --#{$prefix}-sys-color-secondary: #DBC054;
+    --#{$prefix}-sys-color-on-secondary: #3E2E00;
+    --#{$prefix}-sys-color-secondary-container: #584400;
+    --#{$prefix}-sys-color-on-secondary-container: #FFF4D5;
+    
+    --#{$prefix}-sys-color-tertiary: #FFB694;
+    --#{$prefix}-sys-color-on-tertiary: #5C2900;
+    --#{$prefix}-sys-color-tertiary-container: #803D15;
+    --#{$prefix}-sys-color-on-tertiary-container: #FFDBC8;
+    
+    --#{$prefix}-sys-color-accent: #D0BCFF;
+    --#{$prefix}-sys-color-on-accent: #381E72;
+    --#{$prefix}-sys-color-accent-container: #503396;
+    --#{$prefix}-sys-color-on-accent-container: #EBDCFF;
+
+    // Neutral colors
+    --#{$prefix}-sys-color-surface: #1F1B16;
+    --#{$prefix}-sys-color-surface-dim: #16130F;
+    --#{$prefix}-sys-color-surface-bright: #3B362F;
+    --#{$prefix}-sys-color-surface-container-lowest: #130F0B;
+    --#{$prefix}-sys-color-surface-container-low: #1F1B16;
+    --#{$prefix}-sys-color-surface-container: #231F19;
+    --#{$prefix}-sys-color-surface-container-high: #2D2921;
+    --#{$prefix}-sys-color-surface-container-highest: #38332B;
+    
+    --#{$prefix}-sys-color-on-surface: #EAE1D9;
+    --#{$prefix}-sys-color-on-surface-variant: #D5C8B9;
+    
+    --#{$prefix}-sys-color-outline: #9E8F80;
+    --#{$prefix}-sys-color-outline-variant: #50453B;
+  }
+}

package/src/styles/themes/_winter.scss

@@ -0,0 +1,71 @@
+// src/styles/themes/_winter.scss
+@use '../abstract/base' as *;
+@use 'base-theme' as *;
+
+@include create-theme('winter') {
+  // Key colors generated from seed color #546E7A (winter blue-gray)
+  --#{$prefix}-sys-color-primary: #406374;
+  --#{$prefix}-sys-color-on-primary: #FFFFFF;
+  --#{$prefix}-sys-color-primary-container: #C1E8FC;
+  --#{$prefix}-sys-color-on-primary-container: #001F29;
+  
+  --#{$prefix}-sys-color-secondary: #4A626E;
+  --#{$prefix}-sys-color-on-secondary: #FFFFFF;
+  --#{$prefix}-sys-color-secondary-container: #CDE6F5;
+  --#{$prefix}-sys-color-on-secondary-container: #061E28;
+  
+  --#{$prefix}-sys-color-tertiary: #5D5B7D;
+  --#{$prefix}-sys-color-on-tertiary: #FFFFFF;
+  --#{$prefix}-sys-color-tertiary-container: #E2DFFF;
+  --#{$prefix}-sys-color-on-tertiary-container: #191836;
+
+  // Neutral colors
+  --#{$prefix}-sys-color-surface: #FAFCFF;
+  --#{$prefix}-sys-color-surface-dim: #DAE4E9;
+  --#{$prefix}-sys-color-surface-bright: #FAFCFF;
+  --#{$prefix}-sys-color-surface-container-lowest: #FFFFFF;
+  --#{$prefix}-sys-color-surface-container-low: #F5F8FB;
+  --#{$prefix}-sys-color-surface-container: #EFF3F6;
+  --#{$prefix}-sys-color-surface-container-high: #E9EDF0;
+  --#{$prefix}-sys-color-surface-container-highest: #E3E7EA;
+  
+  --#{$prefix}-sys-color-on-surface: #191C1E;
+  --#{$prefix}-sys-color-on-surface-variant: #40484C;
+  
+  --#{$prefix}-sys-color-outline: #70787D;
+  --#{$prefix}-sys-color-outline-variant: #C0C8CC;
+
+  &[data-theme-mode="dark"] {
+    // Key colors
+    --#{$prefix}-sys-color-primary: #73D0EE;
+    --#{$prefix}-sys-color-on-primary: #003545;
+    --#{$prefix}-sys-color-primary-container: #224C5B;
+    --#{$prefix}-sys-color-on-primary-container: #C1E8FC;
+    
+    --#{$prefix}-sys-color-secondary: #B1CAD9;
+    --#{$prefix}-sys-color-on-secondary: #1D343F;
+    --#{$prefix}-sys-color-secondary-container: #334B56;
+    --#{$prefix}-sys-color-on-secondary-container: #CDE6F5;
+    
+    --#{$prefix}-sys-color-tertiary: #C6C3EB;
+    --#{$prefix}-sys-color-on-tertiary: #2E2D4D;
+    --#{$prefix}-sys-color-tertiary-container: #454364;
+    --#{$prefix}-sys-color-on-tertiary-container: #E2DFFF;
+
+    // Neutral colors
+    --#{$prefix}-sys-color-surface: #191C1E;
+    --#{$prefix}-sys-color-surface-dim: #101416;
+    --#{$prefix}-sys-color-surface-bright: #35393C;
+    --#{$prefix}-sys-color-surface-container-lowest: #0D0E10;
+    --#{$prefix}-sys-color-surface-container-low: #191C1E;
+    --#{$prefix}-sys-color-surface-container: #1D2022;
+    --#{$prefix}-sys-color-surface-container-high: #272A2D;
+    --#{$prefix}-sys-color-surface-container-highest: #323539;
+    
+    --#{$prefix}-sys-color-on-surface: #E1E3E5;
+    --#{$prefix}-sys-color-on-surface-variant: #C0C8CC;
+    
+    --#{$prefix}-sys-color-outline: #8A9297;
+    --#{$prefix}-sys-color-outline-variant: #40484C;
+  }
+}

package/src/styles/utilities/_color.scss

@@ -0,0 +1,154 @@
+// src/styles/utilities/_colors.scss
+@use '../abstract/base' as base;
+@use '../abstract/theme' as t;
+
+$prefix: base.$prefix;
+
+// Text colors
+.#{$prefix}-text-primary {
+  color: t.color('primary');
+}
+
+.#{$prefix}-text-on-primary {
+  color: t.color('on-primary');
+}
+
+.#{$prefix}-text-secondary {
+  color: t.color('secondary');
+}
+
+.#{$prefix}-text-on-secondary {
+  color: t.color('on-secondary');
+}
+
+.#{$prefix}-text-tertiary {
+  color: t.color('tertiary');
+}
+
+.#{$prefix}-text-on-tertiary {
+  color: t.color('on-tertiary');
+}
+
+.#{$prefix}-text-surface {
+  color: t.color('on-surface');
+}
+
+.#{$prefix}-text-surface-variant {
+  color: t.color('on-surface-variant');
+}
+
+.#{$prefix}-text-error {
+  color: t.color('error');
+}
+
+.#{$prefix}-text-outline {
+  color: t.color('outline');
+}
+
+// Background colors
+.#{$prefix}-bg-primary {
+  background-color: t.color('primary');
+}
+
+.#{$prefix}-bg-primary-container {
+  background-color: t.color('primary-container');
+}
+
+.#{$prefix}-bg-secondary {
+  background-color: t.color('secondary');
+}
+
+.#{$prefix}-bg-secondary-container {
+  background-color: t.color('secondary-container');
+}
+
+.#{$prefix}-bg-tertiary {
+  background-color: t.color('tertiary');
+}
+
+.#{$prefix}-bg-tertiary-container {
+  background-color: t.color('tertiary-container');
+}
+
+.#{$prefix}-bg-surface {
+  background-color: t.color('surface');
+}
+
+.#{$prefix}-bg-surface-dim {
+  background-color: t.color('surface-dim');
+}
+
+.#{$prefix}-bg-surface-bright {
+  background-color: t.color('surface-bright');
+}
+
+.#{$prefix}-bg-surface-container {
+  background-color: t.color('surface-container');
+}
+
+.#{$prefix}-bg-surface-container-low {
+  background-color: t.color('surface-container-low');
+}
+
+.#{$prefix}-bg-surface-container-high {
+  background-color: t.color('surface-container-high');
+}
+
+.#{$prefix}-bg-surface-container-highest {
+  background-color: t.color('surface-container-highest');
+}
+
+.#{$prefix}-bg-error {
+  background-color: t.color('error');
+}
+
+.#{$prefix}-bg-error-container {
+  background-color: t.color('error-container');
+}
+
+// Opacity variants for surface colors
+@for $i from 1 through 9 {
+  $opacity: $i * 0.1;
+  
+  .#{$prefix}-bg-primary-opacity-#{$i} {
+    background-color: t.alpha('primary', $opacity);
+  }
+  
+  .#{$prefix}-bg-on-surface-opacity-#{$i} {
+    background-color: t.alpha('on-surface', $opacity);
+  }
+}
+
+// Border colors
+.#{$prefix}-border-primary {
+  border-color: t.color('primary');
+}
+
+.#{$prefix}-border-outline {
+  border-color: t.color('outline');
+}
+
+.#{$prefix}-border-outline-variant {
+  border-color: t.color('outline-variant');
+}
+
+// Common border utilities
+.#{$prefix}-border {
+  border: 1px solid t.color('outline-variant');
+}
+
+.#{$prefix}-border-t {
+  border-top: 1px solid t.color('outline-variant');
+}
+
+.#{$prefix}-border-r {
+  border-right: 1px solid t.color('outline-variant');
+}
+
+.#{$prefix}-border-b {
+  border-bottom: 1px solid t.color('outline-variant');
+}
+
+.#{$prefix}-border-l {
+  border-left: 1px solid t.color('outline-variant');
+}

package/src/styles/utilities/_flexbox.scss

@@ -0,0 +1,194 @@
+// src/styles/utilities/_flexbox.scss
+@use '../abstract/base' as base;
+
+$prefix: base.$prefix;
+
+// Display flex
+.#{$prefix}-flex {
+  display: flex;
+}
+
+.#{$prefix}-inline-flex {
+  display: inline-flex;
+}
+
+// Flex direction
+.#{$prefix}-flex-row {
+  flex-direction: row;
+}
+
+.#{$prefix}-flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.#{$prefix}-flex-col {
+  flex-direction: column;
+}
+
+.#{$prefix}-flex-col-reverse {
+  flex-direction: column-reverse;
+}
+
+// Flex wrap
+.#{$prefix}-flex-wrap {
+  flex-wrap: wrap;
+}
+
+.#{$prefix}-flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.#{$prefix}-flex-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+// Flex grow / shrink
+.#{$prefix}-flex-1 {
+  flex: 1 1 0%;
+}
+
+.#{$prefix}-flex-auto {
+  flex: 1 1 auto;
+}
+
+.#{$prefix}-flex-initial {
+  flex: 0 1 auto;
+}
+
+.#{$prefix}-flex-none {
+  flex: none;
+}
+
+.#{$prefix}-grow-0 {
+  flex-grow: 0;
+}
+
+.#{$prefix}-grow {
+  flex-grow: 1;
+}
+
+.#{$prefix}-shrink-0 {
+  flex-shrink: 0;
+}
+
+.#{$prefix}-shrink {
+  flex-shrink: 1;
+}
+
+// Justify content
+.#{$prefix}-justify-start {
+  justify-content: flex-start;
+}
+
+.#{$prefix}-justify-end {
+  justify-content: flex-end;
+}
+
+.#{$prefix}-justify-center {
+  justify-content: center;
+}
+
+.#{$prefix}-justify-between {
+  justify-content: space-between;
+}
+
+.#{$prefix}-justify-around {
+  justify-content: space-around;
+}
+
+.#{$prefix}-justify-evenly {
+  justify-content: space-evenly;
+}
+
+// Align items
+.#{$prefix}-items-start {
+  align-items: flex-start;
+}
+
+.#{$prefix}-items-end {
+  align-items: flex-end;
+}
+
+.#{$prefix}-items-center {
+  align-items: center;
+}
+
+.#{$prefix}-items-baseline {
+  align-items: baseline;
+}
+
+.#{$prefix}-items-stretch {
+  align-items: stretch;
+}
+
+// Align content
+.#{$prefix}-content-center {
+  align-content: center;
+}
+
+.#{$prefix}-content-start {
+  align-content: flex-start;
+}
+
+.#{$prefix}-content-end {
+  align-content: flex-end;
+}
+
+.#{$prefix}-content-between {
+  align-content: space-between;
+}
+
+.#{$prefix}-content-around {
+  align-content: space-around;
+}
+
+.#{$prefix}-content-stretch {
+  align-content: stretch;
+}
+
+// Align self
+.#{$prefix}-self-auto {
+  align-self: auto;
+}
+
+.#{$prefix}-self-start {
+  align-self: flex-start;
+}
+
+.#{$prefix}-self-end {
+  align-self: flex-end;
+}
+
+.#{$prefix}-self-center {
+  align-self: center;
+}
+
+.#{$prefix}-self-stretch {
+  align-self: stretch;
+}
+
+// Order
+.#{$prefix}-order-first {
+  order: -9999;
+}
+
+.#{$prefix}-order-last {
+  order: 9999;
+}
+
+.#{$prefix}-order-none {
+  order: 0;
+}
+
+// Common flex layouts
+.#{$prefix}-flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.#{$prefix}-flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}

package/src/styles/utilities/_spacing.scss

@@ -0,0 +1,139 @@
+// src/styles/utilities/_spacing.scss
+@use '../abstract/base' as base;
+@use 'sass:map';
+
+$prefix: base.$prefix;
+
+// Spacing scale
+$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,
+  'auto': auto
+);
+
+// Generate spacing utilities
+@each $key, $value in $spacing-scale {
+  // Margin utilities
+  .#{$prefix}-m-#{$key} {
+    margin: $value;
+  }
+  
+  .#{$prefix}-mx-#{$key} {
+    margin-left: $value;
+    margin-right: $value;
+  }
+  
+  .#{$prefix}-my-#{$key} {
+    margin-top: $value;
+    margin-bottom: $value;
+  }
+  
+  .#{$prefix}-mt-#{$key} {
+    margin-top: $value;
+  }
+  
+  .#{$prefix}-mb-#{$key} {
+    margin-bottom: $value;
+  }
+  
+  .#{$prefix}-ml-#{$key} {
+    margin-left: $value;
+  }
+  
+  .#{$prefix}-mr-#{$key} {
+    margin-right: $value;
+  }
+  
+  // Padding utilities
+  .#{$prefix}-p-#{$key} {
+    padding: $value;
+  }
+  
+  .#{$prefix}-px-#{$key} {
+    padding-left: $value;
+    padding-right: $value;
+  }
+  
+  .#{$prefix}-py-#{$key} {
+    padding-top: $value;
+    padding-bottom: $value;
+  }
+  
+  .#{$prefix}-pt-#{$key} {
+    padding-top: $value;
+  }
+  
+  .#{$prefix}-pb-#{$key} {
+    padding-bottom: $value;
+  }
+  
+  .#{$prefix}-pl-#{$key} {
+    padding-left: $value;
+  }
+  
+  .#{$prefix}-pr-#{$key} {
+    padding-right: $value;
+  }
+}
+
+// Gap utilities
+@each $key, $value in $spacing-scale {
+  .#{$prefix}-gap-#{$key} {
+    gap: $value;
+  }
+  
+  .#{$prefix}-gap-x-#{$key} {
+    column-gap: $value;
+  }
+  
+  .#{$prefix}-gap-y-#{$key} {
+    row-gap: $value;
+  }
+}
+
+// Responsive margin utilities for common breakpoints
+@each $breakpoint in (sm, md, lg, xl) {
+  @media (min-width: map.get((
+    sm: 600px,
+    md: 960px,
+    lg: 1280px,
+    xl: 1920px
+  ), $breakpoint)) {
+    @each $key, $value in (
+      '0': 0,
+      '4': 16px,
+      '6': 24px,
+      '8': 32px,
+      '10': 40px,
+      '12': 48px,
+      'auto': auto
+    ) {
+      .#{$prefix}-#{$breakpoint}:m-#{$key} {
+        margin: $value;
+      }
+      
+      .#{$prefix}-#{$breakpoint}:mx-#{$key} {
+        margin-left: $value;
+        margin-right: $value;
+      }
+      
+      .#{$prefix}-#{$breakpoint}:my-#{$key} {
+        margin-top: $value;
+        margin-bottom: $value;
+      }
+    }
+  }
+}