material 1.0.3 → 3.0.0-next.0

package/src/styles/themes/_vibrant.scss

@@ -0,0 +1,258 @@
+// src/styles/themes/_vibrant.scss
+// M3's Vibrant scheme variant, from the baseline seed #6750A4.
+// Generated by scripts/generate-themes.ts (seed #6750A4, variant Vibrant) with
+// material-color-utilities: do not edit, change the script and regenerate.
+@use "../abstract/base" as *;
+@use "base-theme" as *;
+
+@include create-theme("vibrant") {
+    // Success, warning and info, as every theme has them; the scheme's own
+    // roles, error included, follow
+    @include status-colors-light();
+    --#{$prefix}-sys-color-error: #ba1a1a;
+    --#{$prefix}-sys-color-on-error: #ffffff;
+    --#{$prefix}-sys-color-error-container: #ffdad6;
+    --#{$prefix}-sys-color-on-error-container: #93000a;
+    --#{$prefix}-sys-color-primary: #6f19ff;
+    --#{$prefix}-sys-color-on-primary: #ffffff;
+    --#{$prefix}-sys-color-primary-container: #e9ddff;
+    --#{$prefix}-sys-color-on-primary-container: #5400cc;
+    --#{$prefix}-sys-color-secondary: #6b5778;
+    --#{$prefix}-sys-color-on-secondary: #ffffff;
+    --#{$prefix}-sys-color-secondary-container: #f3daff;
+    --#{$prefix}-sys-color-on-secondary-container: #523f5f;
+    --#{$prefix}-sys-color-tertiary: #79507a;
+    --#{$prefix}-sys-color-on-tertiary: #ffffff;
+    --#{$prefix}-sys-color-tertiary-container: #ffd6fc;
+    --#{$prefix}-sys-color-on-tertiary-container: #5f3961;
+    --#{$prefix}-sys-color-primary-fixed: #e9ddff;
+    --#{$prefix}-sys-color-primary-fixed-dim: #cfbcff;
+    --#{$prefix}-sys-color-on-primary-fixed: #22005d;
+    --#{$prefix}-sys-color-on-primary-fixed-variant: #5400cc;
+    --#{$prefix}-sys-color-secondary-fixed: #f3daff;
+    --#{$prefix}-sys-color-secondary-fixed-dim: #d7bee4;
+    --#{$prefix}-sys-color-on-secondary-fixed: #251431;
+    --#{$prefix}-sys-color-on-secondary-fixed-variant: #523f5f;
+    --#{$prefix}-sys-color-tertiary-fixed: #ffd6fc;
+    --#{$prefix}-sys-color-tertiary-fixed-dim: #e8b7e7;
+    --#{$prefix}-sys-color-on-tertiary-fixed: #2f0d33;
+    --#{$prefix}-sys-color-on-tertiary-fixed-variant: #5f3961;
+    --#{$prefix}-sys-color-surface: #fdf7ff;
+    --#{$prefix}-sys-color-surface-dim: #ded7e6;
+    --#{$prefix}-sys-color-surface-bright: #fdf7ff;
+    --#{$prefix}-sys-color-surface-variant: #e7dff2;
+    --#{$prefix}-sys-color-surface-container-lowest: #ffffff;
+    --#{$prefix}-sys-color-surface-container-low: #f8f1ff;
+    --#{$prefix}-sys-color-surface-container: #f2ebfa;
+    --#{$prefix}-sys-color-surface-container-high: #ede5f4;
+    --#{$prefix}-sys-color-surface-container-highest: #e7e0ef;
+    --#{$prefix}-sys-color-on-surface: #1d1a24;
+    --#{$prefix}-sys-color-on-surface-variant: #494453;
+    --#{$prefix}-sys-color-outline: #7a7484;
+    --#{$prefix}-sys-color-outline-variant: #cbc3d5;
+    --#{$prefix}-sys-color-shadow: #000000;
+    --#{$prefix}-sys-color-scrim: #000000;
+    --#{$prefix}-sys-color-inverse-surface: #322f3a;
+    --#{$prefix}-sys-color-inverse-on-surface: #f5eefd;
+    --#{$prefix}-sys-color-inverse-primary: #cfbcff;
+
+    &[data-theme-mode="dark"] {
+        @include status-colors-dark();
+        --#{$prefix}-sys-color-error: #ffb4ab;
+        --#{$prefix}-sys-color-on-error: #690005;
+        --#{$prefix}-sys-color-error-container: #93000a;
+        --#{$prefix}-sys-color-on-error-container: #ffdad6;
+        --#{$prefix}-sys-color-primary: #cfbcff;
+        --#{$prefix}-sys-color-on-primary: #3a0092;
+        --#{$prefix}-sys-color-primary-container: #5400cc;
+        --#{$prefix}-sys-color-on-primary-container: #e9ddff;
+        --#{$prefix}-sys-color-secondary: #d7bee4;
+        --#{$prefix}-sys-color-on-secondary: #3b2948;
+        --#{$prefix}-sys-color-secondary-container: #523f5f;
+        --#{$prefix}-sys-color-on-secondary-container: #f3daff;
+        --#{$prefix}-sys-color-tertiary: #e8b7e7;
+        --#{$prefix}-sys-color-on-tertiary: #462349;
+        --#{$prefix}-sys-color-tertiary-container: #5f3961;
+        --#{$prefix}-sys-color-on-tertiary-container: #ffd6fc;
+        --#{$prefix}-sys-color-primary-fixed: #e9ddff;
+        --#{$prefix}-sys-color-primary-fixed-dim: #cfbcff;
+        --#{$prefix}-sys-color-on-primary-fixed: #22005d;
+        --#{$prefix}-sys-color-on-primary-fixed-variant: #5400cc;
+        --#{$prefix}-sys-color-secondary-fixed: #f3daff;
+        --#{$prefix}-sys-color-secondary-fixed-dim: #d7bee4;
+        --#{$prefix}-sys-color-on-secondary-fixed: #251431;
+        --#{$prefix}-sys-color-on-secondary-fixed-variant: #523f5f;
+        --#{$prefix}-sys-color-tertiary-fixed: #ffd6fc;
+        --#{$prefix}-sys-color-tertiary-fixed-dim: #e8b7e7;
+        --#{$prefix}-sys-color-on-tertiary-fixed: #2f0d33;
+        --#{$prefix}-sys-color-on-tertiary-fixed-variant: #5f3961;
+        --#{$prefix}-sys-color-surface: #15121c;
+        --#{$prefix}-sys-color-surface-dim: #15121c;
+        --#{$prefix}-sys-color-surface-bright: #3b3743;
+        --#{$prefix}-sys-color-surface-variant: #494453;
+        --#{$prefix}-sys-color-surface-container-lowest: #0f0d16;
+        --#{$prefix}-sys-color-surface-container-low: #1d1a24;
+        --#{$prefix}-sys-color-surface-container: #211e28;
+        --#{$prefix}-sys-color-surface-container-high: #2c2833;
+        --#{$prefix}-sys-color-surface-container-highest: #37333e;
+        --#{$prefix}-sys-color-on-surface: #e7e0ef;
+        --#{$prefix}-sys-color-on-surface-variant: #cbc3d5;
+        --#{$prefix}-sys-color-outline: #948e9f;
+        --#{$prefix}-sys-color-outline-variant: #494453;
+        --#{$prefix}-sys-color-shadow: #000000;
+        --#{$prefix}-sys-color-scrim: #000000;
+        --#{$prefix}-sys-color-inverse-surface: #e7e0ef;
+        --#{$prefix}-sys-color-inverse-on-surface: #322f3a;
+        --#{$prefix}-sys-color-inverse-primary: #6f19ff;
+    }
+}
+
+// contrast roles: generated, do not edit
+@include create-theme-contrast("vibrant", (
+    medium: (
+        light: (
+            error: #740006,
+            error-container: #cf2c27,
+            on-error-container: #ffffff,
+            primary: #4100a1,
+            primary-container: #7d40ff,
+            on-primary-container: #ffffff,
+            secondary: #412f4e,
+            secondary-container: #7a6587,
+            on-secondary-container: #ffffff,
+            tertiary: #4d294f,
+            tertiary-container: #895f89,
+            on-tertiary-container: #ffffff,
+            primary-fixed: #7d40ff,
+            primary-fixed-dim: #6400f0,
+            on-primary-fixed: #ffffff,
+            on-primary-fixed-variant: #ffffff,
+            secondary-fixed: #7a6587,
+            secondary-fixed-dim: #614d6e,
+            on-secondary-fixed: #ffffff,
+            on-secondary-fixed-variant: #ffffff,
+            tertiary-fixed: #895f89,
+            tertiary-fixed-dim: #6e4770,
+            on-tertiary-fixed: #ffffff,
+            on-tertiary-fixed-variant: #ffffff,
+            surface-dim: #cbc4d2,
+            surface-container: #ede5f4,
+            surface-container-high: #e1dae9,
+            surface-container-highest: #d6cfdd,
+            on-surface: #12101a,
+            on-surface-variant: #383442,
+            outline: #55505f,
+            outline-variant: #706a7a,
+        ),
+        dark: (
+            error: #ffd2cc,
+            on-error: #540003,
+            error-container: #ff5449,
+            on-error-container: #000000,
+            primary: #e3d6ff,
+            on-primary: #2e0077,
+            primary-container: #9e79ff,
+            on-primary-container: #000000,
+            secondary: #edd3fb,
+            on-secondary: #301e3c,
+            secondary-container: #9f88ad,
+            on-secondary-container: #000000,
+            tertiary: #ffccfd,
+            on-tertiary: #3a183e,
+            tertiary-container: #af82af,
+            on-tertiary-container: #000000,
+            on-primary-fixed: #160042,
+            on-primary-fixed-variant: #4100a1,
+            on-secondary-fixed: #1a0926,
+            on-secondary-fixed-variant: #412f4e,
+            on-tertiary-fixed: #230328,
+            on-tertiary-fixed-variant: #4d294f,
+            surface-bright: #47434e,
+            surface-container-lowest: #08060f,
+            surface-container-low: #1f1c26,
+            surface-container: #292631,
+            surface-container-high: #34313c,
+            surface-container-highest: #403c47,
+            on-surface: #ffffff,
+            on-surface-variant: #e1d9eb,
+            outline: #b6afc0,
+            outline-variant: #948e9e,
+            inverse-on-surface: #2c2833,
+            inverse-primary: #5500cf,
+        ),
+    ),
+    high: (
+        light: (
+            error: #600004,
+            error-container: #98000a,
+            on-error-container: #ffffff,
+            primary: #350087,
+            primary-container: #5700d2,
+            on-primary-container: #ffffff,
+            secondary: #362543,
+            secondary-container: #554262,
+            on-secondary-container: #ffffff,
+            tertiary: #421e45,
+            tertiary-container: #623b64,
+            on-tertiary-container: #ffffff,
+            primary-fixed: #5700d2,
+            primary-fixed-dim: #3d0098,
+            on-primary-fixed: #ffffff,
+            on-primary-fixed-variant: #ffffff,
+            secondary-fixed: #554262,
+            secondary-fixed-dim: #3d2b4a,
+            on-secondary-fixed: #ffffff,
+            on-secondary-fixed-variant: #ffffff,
+            tertiary-fixed: #623b64,
+            tertiary-fixed-dim: #49254c,
+            on-tertiary-fixed: #ffffff,
+            on-tertiary-fixed-variant: #ffffff,
+            surface-dim: #bdb6c4,
+            surface-container-low: #f5eefd,
+            surface-container: #e7e0ef,
+            surface-container-high: #d9d2e0,
+            surface-container-highest: #cbc4d2,
+            on-surface: #000000,
+            on-surface-variant: #000000,
+            outline: #2e2a38,
+            outline-variant: #4c4755,
+            inverse-on-surface: #ffffff,
+        ),
+        dark: (
+            error: #ffece9,
+            on-error: #000000,
+            error-container: #ffaea4,
+            on-error-container: #220001,
+            primary: #f5edff,
+            on-primary: #000000,
+            primary-container: #ccb8ff,
+            on-primary-container: #0f0033,
+            secondary: #faebff,
+            on-secondary: #000000,
+            secondary-container: #d3bae0,
+            on-secondary-container: #140420,
+            tertiary: #ffeafa,
+            on-tertiary: #000000,
+            tertiary-container: #e4b3e3,
+            on-tertiary-container: #1b0020,
+            on-primary-fixed: #000000,
+            on-primary-fixed-variant: #160042,
+            on-secondary-fixed: #000000,
+            on-secondary-fixed-variant: #1a0926,
+            on-tertiary-fixed: #000000,
+            on-tertiary-fixed-variant: #230328,
+            surface-bright: #524e5a,
+            surface-container-lowest: #000000,
+            surface-container-low: #211e28,
+            surface-container: #322f3a,
+            surface-container-high: #3d3a45,
+            surface-container-highest: #494551,
+            on-surface: #ffffff,
+            on-surface-variant: #ffffff,
+            outline: #f5edff,
+            outline-variant: #c7bfd1,
+            inverse-on-surface: #000000,
+            inverse-primary: #5500cf,
+        ),
+    ),
+));

package/src/styles/utilities/_colors.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;
+}