mtrl 0.3.8 → 0.4.0

package/src/styles/themes/_sunset.scss

@@ -1,60 +0,0 @@
-// src/styles/themes/_sunset.scss
-@use '../abstract/base' as *;
-@use 'base-theme' as *;
-
-@include create-theme('sunset') {
-  // Key colors generated from seed color #D35400
-  --#{$prefix}-sys-color-primary: #B34700;
-  --#{$prefix}-sys-color-on-primary: #FFFFFF;
-  --#{$prefix}-sys-color-primary-container: #FFDBC8;
-  --#{$prefix}-sys-color-on-primary-container: #3A1500;
-  
-  --#{$prefix}-sys-color-secondary: #775648;
-  --#{$prefix}-sys-color-on-secondary: #FFFFFF;
-  --#{$prefix}-sys-color-secondary-container: #FFDBD0;
-  --#{$prefix}-sys-color-on-secondary-container: #2C160C;
-  
-  --#{$prefix}-sys-color-tertiary: #705C2E;
-  --#{$prefix}-sys-color-on-tertiary: #FFFFFF;
-  --#{$prefix}-sys-color-tertiary-container: #FCDFAA;
-  --#{$prefix}-sys-color-on-tertiary-container: #261A00;
-
-  // Neutral colors
-  --#{$prefix}-sys-color-surface: #FFFBFF;
-  --#{$prefix}-sys-color-surface-dim: #E5E1E6;
-  --#{$prefix}-sys-color-surface-bright: #FFFBFF;
-  --#{$prefix}-sys-color-surface-container-lowest: #FFFFFF;
-  --#{$prefix}-sys-color-surface-container-low: #FBF1F2;
-  --#{$prefix}-sys-color-surface-container: #F3EBE7;
-  --#{$prefix}-sys-color-surface-container-high: #EDE5E1;
-  --#{$prefix}-sys-color-surface-container-highest: #E7DFDB;
-  
-  --#{$prefix}-sys-color-on-surface: #201A18;
-  --#{$prefix}-sys-color-on-surface-variant: #53433E;
-  
-  --#{$prefix}-sys-color-outline: #85736D;
-  --#{$prefix}-sys-color-outline-variant: #D8C2BB;
-
-  // Include status colors for light theme
-  @include status-colors-light();
-
-   &[data-theme-mode="dark"] {
-    --#{$prefix}-sys-color-primary: #FFB686;
-    --#{$prefix}-sys-color-on-primary: #5C2800;
-    --#{$prefix}-sys-color-primary-container: #833B00;
-    --#{$prefix}-sys-color-on-primary-container: #FFE0CC;
-    
-    --#{$prefix}-sys-color-secondary: #FFB98C;
-    --#{$prefix}-sys-color-on-secondary: #492900;
-    --#{$prefix}-sys-color-secondary-container: #663D00;
-    --#{$prefix}-sys-color-on-secondary-container: #FFE5D0;
-    
-    --#{$prefix}-sys-color-surface: #201210;
-    --#{$prefix}-sys-color-on-surface: #FFD9C7;
-    --#{$prefix}-sys-color-surface-container: #2B1714;
-    
-    --#{$prefix}-sys-color-outline: #B89784;
-    // Include status colors for dark theme
-    @include status-colors-dark();
-  }
-}

package/src/styles/themes/_tealcaramel.scss

@@ -1,125 +0,0 @@
-// src/styles/themes/_tealcaramel.scss
-@use '../abstract/base' as *;
-@use 'base-theme' as *;
-
-@include create-theme('tealcaramel') {
-  // Key colors based on teal and caramel combination
-  --#{$prefix}-sys-color-primary: #2B4D56; // Teal as primary
-  --#{$prefix}-sys-color-primary-rgb: 0, 105, 92;
-  --#{$prefix}-sys-color-on-primary: #FFFFFF;
-  --#{$prefix}-sys-color-on-primary-rgb: 255, 255, 255;
-  --#{$prefix}-sys-color-primary-container: #B2DFDB;
-  --#{$prefix}-sys-color-primary-container-rgb: 178, 223, 219;
-  --#{$prefix}-sys-color-on-primary-container: #002A25;
-  --#{$prefix}-sys-color-on-primary-container-rgb: 0, 42, 37;
-  
-  --#{$prefix}-sys-color-secondary: #9A6433; // Caramel as secondary
-  --#{$prefix}-sys-color-secondary-rgb: 198, 124, 78;
-  --#{$prefix}-sys-color-on-secondary: #FFFFFF;
-  --#{$prefix}-sys-color-on-secondary-rgb: 255, 255, 255;
-  --#{$prefix}-sys-color-secondary-container: #FFD8C2;
-  --#{$prefix}-sys-color-secondary-container-rgb: 255, 216, 194;
-  --#{$prefix}-sys-color-on-secondary-container: #3E2715;
-  --#{$prefix}-sys-color-on-secondary-container-rgb: 62, 39, 21;
-  
-  --#{$prefix}-sys-color-tertiary: #4A7C6E; // Muted teal as tertiary
-  --#{$prefix}-sys-color-tertiary-rgb: 74, 124, 110;
-  --#{$prefix}-sys-color-on-tertiary: #FFFFFF;
-  --#{$prefix}-sys-color-on-tertiary-rgb: 255, 255, 255;
-  --#{$prefix}-sys-color-tertiary-container: #CCE6DF;
-  --#{$prefix}-sys-color-tertiary-container-rgb: 204, 230, 223;
-  --#{$prefix}-sys-color-on-tertiary-container: #0E3029;
-  --#{$prefix}-sys-color-on-tertiary-container-rgb: 14, 48, 41;
-
-  // Neutral colors with subtle teal undertones
-  --#{$prefix}-sys-color-surface: #F9FCFC;
-  --#{$prefix}-sys-color-surface-rgb: 249, 252, 252;
-  --#{$prefix}-sys-color-surface-dim: #E5ECEB;
-  --#{$prefix}-sys-color-surface-dim-rgb: 229, 236, 235;
-  --#{$prefix}-sys-color-surface-bright: #F9FCFC;
-  --#{$prefix}-sys-color-surface-bright-rgb: 249, 252, 252;
-  --#{$prefix}-sys-color-surface-container-lowest: #FFFFFF;
-  --#{$prefix}-sys-color-surface-container-lowest-rgb: 255, 255, 255;
-  --#{$prefix}-sys-color-surface-container-low: #F3F7F6;
-  --#{$prefix}-sys-color-surface-container-low-rgb: 243, 247, 246;
-  --#{$prefix}-sys-color-surface-container: #EDF2F1;
-  --#{$prefix}-sys-color-surface-container-rgb: 237, 242, 241;
-  --#{$prefix}-sys-color-surface-container-high: #E7ECEB;
-  --#{$prefix}-sys-color-surface-container-high-rgb: 231, 236, 235;
-  --#{$prefix}-sys-color-surface-container-highest: #E1E6E5;
-  --#{$prefix}-sys-color-surface-container-highest-rgb: 225, 230, 229;
-  
-  --#{$prefix}-sys-color-on-surface: #191D1C;
-  --#{$prefix}-sys-color-on-surface-rgb: 25, 29, 28;
-  --#{$prefix}-sys-color-on-surface-variant: #404847;
-  --#{$prefix}-sys-color-on-surface-variant-rgb: 64, 72, 71;
-  
-  --#{$prefix}-sys-color-outline: #6E7978;
-  --#{$prefix}-sys-color-outline-rgb: 110, 121, 120;
-  --#{$prefix}-sys-color-outline-variant: #C1CCCB;
-  --#{$prefix}-sys-color-outline-variant-rgb: 193, 204, 203;
-
-  // Include status colors for light theme
-  @include status-colors-light();
-
-  &[data-theme-mode="dark"] {
-    // Key colors for dark mode
-    --#{$prefix}-sys-color-primary: #85CFC6; // Lighter teal
-    --#{$prefix}-sys-color-primary-rgb: 133, 207, 198;
-    --#{$prefix}-sys-color-on-primary: #003E36;
-    --#{$prefix}-sys-color-on-primary-rgb: 0, 62, 54;
-    --#{$prefix}-sys-color-primary-container: #005349;
-    --#{$prefix}-sys-color-primary-container-rgb: 0, 83, 73;
-    --#{$prefix}-sys-color-on-primary-container: #B2DFDB;
-    --#{$prefix}-sys-color-on-primary-container-rgb: 178, 223, 219;
-    
-    --#{$prefix}-sys-color-secondary: #FFB68D; // Lighter caramel
-    --#{$prefix}-sys-color-secondary-rgb: 255, 182, 141;
-    --#{$prefix}-sys-color-on-secondary: #5D3726;
-    --#{$prefix}-sys-color-on-secondary-rgb: 93, 55, 38;
-    --#{$prefix}-sys-color-secondary-container: #7D4F3A;
-    --#{$prefix}-sys-color-secondary-container-rgb: 125, 79, 58;
-    --#{$prefix}-sys-color-on-secondary-container: #FFD8C2;
-    --#{$prefix}-sys-color-on-secondary-container-rgb: 255, 216, 194;
-    
-    --#{$prefix}-sys-color-tertiary: #A0CCC2; // Lighter muted teal
-    --#{$prefix}-sys-color-tertiary-rgb: 160, 204, 194;
-    --#{$prefix}-sys-color-on-tertiary: #1A463E;
-    --#{$prefix}-sys-color-on-tertiary-rgb: 26, 70, 62;
-    --#{$prefix}-sys-color-tertiary-container: #315C53;
-    --#{$prefix}-sys-color-tertiary-container-rgb: 49, 92, 83;
-    --#{$prefix}-sys-color-on-tertiary-container: #CCE6DF;
-    --#{$prefix}-sys-color-on-tertiary-container-rgb: 204, 230, 223;
-
-    // Neutral colors for dark mode
-    --#{$prefix}-sys-color-surface: #191D1C;
-    --#{$prefix}-sys-color-surface-rgb: 25, 29, 28;
-    --#{$prefix}-sys-color-surface-dim: #121615;
-    --#{$prefix}-sys-color-surface-dim-rgb: 18, 22, 21;
-    --#{$prefix}-sys-color-surface-bright: #363B3A;
-    --#{$prefix}-sys-color-surface-bright-rgb: 54, 59, 58;
-    --#{$prefix}-sys-color-surface-container-lowest: #0E1211;
-    --#{$prefix}-sys-color-surface-container-lowest-rgb: 14, 18, 17;
-    --#{$prefix}-sys-color-surface-container-low: #191D1C;
-    --#{$prefix}-sys-color-surface-container-low-rgb: 25, 29, 28;
-    --#{$prefix}-sys-color-surface-container: #1E2221;
-    --#{$prefix}-sys-color-surface-container-rgb: 30, 34, 33;
-    --#{$prefix}-sys-color-surface-container-high: #282C2B;
-    --#{$prefix}-sys-color-surface-container-high-rgb: 40, 44, 43;
-    --#{$prefix}-sys-color-surface-container-highest: #333736;
-    --#{$prefix}-sys-color-surface-container-highest-rgb: 51, 55, 54;
-    
-    --#{$prefix}-sys-color-on-surface: #E1E3E3;
-    --#{$prefix}-sys-color-on-surface-rgb: 225, 227, 227;
-    --#{$prefix}-sys-color-on-surface-variant: #C1CCCB;
-    --#{$prefix}-sys-color-on-surface-variant-rgb: 193, 204, 203;
-    
-    --#{$prefix}-sys-color-outline: #8B9695;
-    --#{$prefix}-sys-color-outline-rgb: 139, 150, 149;
-    --#{$prefix}-sys-color-outline-variant: #404847;
-    --#{$prefix}-sys-color-outline-variant-rgb: 64, 72, 71;
-
-    // Include status colors for dark theme
-    @include status-colors-dark();
-  }
-}

package/src/styles/themes/_winter.scss

@@ -1,77 +0,0 @@
-// 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;
-
-  // Include status colors for light theme
-  @include status-colors-light();
-
-  &[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;
-
-    // Include status colors for dark theme
-    @include status-colors-dark();
-  }
-}

package/src/styles/utilities/_colors.scss

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

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