@noxlovette/material 0.1.0

package/dist/index.css

@@ -0,0 +1,6 @@
+@import './styles/typescale.css';
+@import './styles/motion.css';
+@import './styles/rounding.css';
+@import './styles/elevation.css';
+@import './styles/prose.css';
+@import './styles/component.css';

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './actions/index.js';
+export * from './animation/index.js';
+export * from './components/index.js';
+export * from './utils/index.js';

package/dist/index.js

@@ -0,0 +1,4 @@
+export * from './actions/index.js';
+export * from './animation/index.js';
+export * from './components/index.js';
+export * from './utils/index.js';

package/dist/styles/component.css

@@ -0,0 +1,154 @@
+@layer utilities {
+  :disabled,
+  [disabled],
+  [aria-disabled='true'],
+  [data-disabled] {
+    cursor: not-allowed !important;
+  }
+
+  .md-component-button-base {
+    @apply state-layer md-sys-state-focus-indicator disabled:bg-md-sys-color-on-surface/10 disabled:text-md-sys-color-on-surface/38 disabled:before:bg-md-sys-color-on-surface/38 relative inline-flex items-center justify-center select-none disabled:cursor-not-allowed;
+    transition: box-shadow var(--md-sys-motion-duration, 200ms)
+      var(--md-sys-motion-timing-function, cubic-bezier(0.34, 0.8, 0.34, 1));
+  }
+
+  .md-btn-morph {
+    border-radius: var(--btn-shape-override, var(--btn-shape, 9999px));
+    transition: border-radius 200ms var(--md-sys-motion-timing-function-emphasized-accel);
+
+    &::before {
+      border-radius: inherit;
+      transition: border-radius 200ms var(--md-sys-motion-timing-function-emphasized-accel);
+    }
+
+    &:active:not(:disabled) {
+      border-radius: var(
+        --btn-pressed-shape,
+        var(--btn-shape-override, var(--btn-shape, 9999px))
+      ) !important;
+      transition-timing-function: var(--md-sys-motion-timing-function-emphasized-decel);
+    }
+  }
+
+  .md-component-button-filled-primary {
+    @apply bg-md-sys-color-primary text-md-sys-color-on-primary;
+  }
+  .md-component-button-filled-secondary {
+    @apply bg-md-sys-color-secondary text-md-sys-color-on-secondary;
+  }
+  .md-component-button-filled-tertiary {
+    @apply bg-md-sys-color-tertiary text-md-sys-color-on-tertiary;
+  }
+
+  .md-component-button-filled-error {
+    @apply bg-md-sys-color-error text-md-sys-color-on-error;
+  }
+
+  .md-component-button-tonal-primary {
+    @apply bg-md-sys-color-primary-container text-md-sys-color-on-primary-container;
+  }
+  .md-component-button-tonal-secondary {
+    @apply bg-md-sys-color-secondary-container text-md-sys-color-on-secondary-container;
+  }
+  .md-component-button-tonal-tertiary {
+    @apply bg-md-sys-color-tertiary-container text-md-sys-color-on-tertiary-container;
+  }
+  .md-component-button-tonal-error {
+    @apply bg-md-sys-color-error-container text-md-sys-color-on-error-container;
+  }
+
+  .md-component-button-outline-default {
+    @apply text-md-sys-color-on-surface-variant outline-md-sys-color-outline-variant outline-2;
+  }
+  .md-component-button-outline-primary {
+    @apply text-md-sys-color-primary outline-md-sys-color-primary outline;
+  }
+  .md-component-button-outline-secondary {
+    @apply text-md-sys-color-secondary outline-md-sys-color-secondary outline;
+  }
+  .md-component-button-outline-tertiary {
+    @apply text-md-sys-color-tertiary outline-md-sys-color-tertiary outline;
+  }
+  .md-component-button-outline-error {
+    @apply text-md-sys-color-error outline-md-sys-color-error outline;
+  }
+
+  .md-component-button-text-primary {
+    @apply text-md-sys-color-primary;
+  }
+  .md-component-button-text-secondary {
+    @apply text-md-sys-color-secondary;
+  }
+  .md-component-button-text-tertiary {
+    @apply text-md-sys-color-tertiary;
+  }
+  .md-component-button-text-error {
+    @apply text-md-sys-color-error;
+  }
+
+  .md-component-button-elevated-default {
+    @apply bg-md-sys-color-surface-container-low text-md-sys-color-primary shadow-elevation-1;
+  }
+
+  .md-component-button-elevated-primary {
+    @apply bg-md-sys-color-surface-container-low text-md-sys-color-primary shadow-elevation-1;
+  }
+  .md-component-button-elevated-secondary {
+    @apply bg-md-sys-color-surface-container-low text-md-sys-color-secondary shadow-elevation-1;
+  }
+  .md-component-button-elevated-tertiary {
+    @apply bg-md-sys-color-surface-container-low text-md-sys-color-tertiary shadow-elevation-1;
+  }
+  .md-component-button-elevated-error {
+    @apply bg-md-sys-color-surface-container-low text-md-sys-color-error shadow-elevation-1;
+  }
+
+  [class^='material-symbols-'],
+  [class*=' material-symbols-'] {
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    font-feature-settings: 'liga';
+  }
+
+  .text-link {
+    @apply text-md-sys-color-primary hover:text-md-sys-color-secondary underline;
+    transition: color var(--md-sys-motion-duration, 200ms)
+      var(--md-sys-motion-timing-function, cubic-bezier(0.34, 0.8, 0.34, 1));
+  }
+
+  .text-link.md-sys-typescale-label-small {
+    @apply md-sys-typescale-label-medium;
+    display: inline-flex;
+    align-items: center;
+    min-height: 44px;
+    padding: 6px 8px;
+  }
+}
+
+@utility md-sys-state-focus-indicator {
+  &:focus-visible {
+    outline-style: solid;
+    outline-width: 3px;
+    outline-offset: 2px;
+    outline-color: var(--color-md-sys-color-secondary, currentColor);
+  }
+}
+
+@utility state-layer {
+  @apply before:pointer-events-none before:absolute before:inset-0 before:content-[''];
+  &::before {
+    transition: background-color var(--md-sys-motion-duration-fast, 150ms)
+      var(--md-sys-motion-timing-function, cubic-bezier(0.34, 0.8, 0.34, 1));
+  }
+}

package/dist/styles/elevation.css

@@ -0,0 +1,45 @@
+@theme {
+  --md-sys-elevation-0: none;
+  --md-sys-elevation-1:
+
+    /* Spot */
+    0px 1px 2px 0px color-mix(in srgb, var(--color-md-sys-color-shadow) 30%, transparent),
+    /* Ambient */ 0px 1px 3px 1px
+      color-mix(in srgb, var(--color-md-sys-color-shadow) 15%, transparent);
+  --md-sys-elevation-2:
+    0px 1px 2px 0px color-mix(in srgb, var(--color-md-sys-color-shadow) 30%, transparent),
+    0px 2px 6px 2px color-mix(in srgb, var(--color-md-sys-color-shadow) 15%, transparent);
+  --md-sys-elevation-3:
+    0px 1px 3px 0px color-mix(in srgb, var(--color-md-sys-color-shadow) 30%, transparent),
+    0px 4px 8px 3px color-mix(in srgb, var(--color-md-sys-color-shadow) 15%, transparent);
+  --md-sys-elevation-4:
+    0px 2px 3px 0px color-mix(in srgb, var(--color-md-sys-color-shadow) 30%, transparent),
+    0px 6px 10px 4px color-mix(in srgb, var(--color-md-sys-color-shadow) 15%, transparent);
+  --md-sys-elevation-5:
+    0px 4px 4px 0px color-mix(in srgb, var(--color-md-sys-color-shadow) 30%, transparent),
+    0px 8px 12px 6px color-mix(in srgb, var(--color-md-sys-color-shadow) 15%, transparent);
+}
+
+@utility shadow-elevation-0 {
+  box-shadow: var(--md-sys-elevation-0);
+}
+
+@utility shadow-elevation-1 {
+  box-shadow: var(--md-sys-elevation-1);
+}
+
+@utility shadow-elevation-2 {
+  box-shadow: var(--md-sys-elevation-2);
+}
+
+@utility shadow-elevation-3 {
+  box-shadow: var(--md-sys-elevation-3);
+}
+
+@utility shadow-elevation-4 {
+  box-shadow: var(--md-sys-elevation-4);
+}
+
+@utility shadow-elevation-5 {
+  box-shadow: var(--md-sys-elevation-5);
+}

package/dist/styles/motion.css

@@ -0,0 +1,51 @@
+@theme {
+  /* Expressive easing */
+  --md-sys-motion-timing-function-fast-spatial: cubic-bezier(0.42, 1.67, 0.21, 0.9);
+  --md-sys-motion-duration-fast-spatial: 350ms;
+  --md-sys-motion-easing-fast-spatial: var(--md-sys-motion-timing-function-fast-spatial)
+    var(--md-sys-motion-duration-fast-spatial);
+
+  --md-sys-motion-timing-function-spatial: cubic-bezier(0.38, 1.21, 0.22, 1);
+  --md-sys-motion-duration-spatial: 500ms;
+  --md-sys-motion-easing-spatial: var(--md-sys-motion-timing-function-spatial)
+    var(--md-sys-motion-duration-spatial);
+
+  --md-sys-motion-timing-function-slow-spatial: cubic-bezier(0.39, 1.29, 0.35, 0.98);
+  --md-sys-motion-duration-slow-spatial: 650ms;
+  --md-sys-motion-easing-slow-spatial: var(--md-sys-motion-timing-function-slow-spatial)
+    var(--md-sys-motion-duration-slow-spatial);
+
+  --md-sys-motion-timing-function-fast: cubic-bezier(0.31, 0.94, 0.34, 1);
+  --md-sys-motion-duration-fast: 150ms;
+  --md-sys-motion-easing-fast: var(--md-sys-motion-timing-function-fast)
+    var(--md-sys-motion-duration-fast);
+
+  --md-sys-motion-timing-function: cubic-bezier(0.34, 0.8, 0.34, 1);
+  --md-sys-motion-duration: 200ms;
+  --md-sys-motion-easing: var(--md-sys-motion-timing-function) var(--md-sys-motion-duration);
+
+  --md-sys-motion-timing-function-slow: cubic-bezier(0.34, 0.88, 0.34, 1);
+  --md-sys-motion-duration-slow: 300ms;
+  --md-sys-motion-easing-slow: var(--md-sys-motion-timing-function-slow)
+    var(--md-sys-motion-duration-slow);
+
+  --md-sys-motion-timing-function-emphasized: linear(
+    0,
+    0.034 6%,
+    0.073 9%,
+    0.126 11%,
+    0.194 13%,
+    0.273 15%,
+    0.351 16%,
+    0.541 18%,
+    0.652 20%,
+    0.755 24%,
+    0.839 30%,
+    0.91 39%,
+    0.959 53%,
+    0.989 72%,
+    1
+  );
+  --md-sys-motion-timing-function-emphasized-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
+  --md-sys-motion-timing-function-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
+}

package/dist/styles/prose.css

@@ -0,0 +1,48 @@
+@layer utilities {
+  .text-link {
+    @apply text-md-sys-color-primary hover:text-md-sys-color-secondary underline;
+  }
+
+  .text-link.md-sys-typescale-label-small {
+    @apply md-sys-typescale-label-medium;
+    display: inline-flex;
+    align-items: center;
+    min-height: 44px;
+    padding: 6px 8px;
+  }
+}
+
+@utility prose-theme {
+  --tw-prose-body: var(--color-md-sys-color-on-surface);
+  --tw-prose-headings: var(--color-md-sys-color-on-surface);
+  --tw-prose-lead: var(--color-md-sys-color-on-surface-variant);
+  --tw-prose-links: var(--color-md-sys-color-primary);
+  --tw-prose-bold: var(--color-md-sys-color-on-surface);
+  --tw-prose-counters: var(--color-md-sys-color-on-surface-variant);
+  --tw-prose-bullets: var(--color-md-sys-color-outline);
+  --tw-prose-hr: var(--color-md-sys-color-outline-variant);
+  --tw-prose-quotes: var(--color-md-sys-color-on-surface);
+  --tw-prose-quote-borders: var(--color-md-sys-color-outline);
+  --tw-prose-captions: var(--color-md-sys-color-on-surface-variant);
+  --tw-prose-code: var(--color-md-sys-color-primary);
+  --tw-prose-pre-code: var(--color-md-sys-color-on-surface);
+  --tw-prose-pre-bg: var(--color-md-sys-color-surface-container-high);
+  --tw-prose-th-borders: var(--color-md-sys-color-outline-variant);
+  --tw-prose-td-borders: var(--color-md-sys-color-outline-variant);
+  --tw-prose-invert-body: var(--color-md-sys-color-on-surface);
+  --tw-prose-invert-headings: var(--color-md-sys-color-on-surface);
+  --tw-prose-invert-lead: var(--color-md-sys-color-on-surface-variant);
+  --tw-prose-invert-links: var(--color-md-sys-color-primary);
+  --tw-prose-invert-bold: var(--color-md-sys-color-on-surface);
+  --tw-prose-invert-counters: var(--color-md-sys-color-on-surface-variant);
+  --tw-prose-invert-bullets: var(--color-md-sys-color-outline);
+  --tw-prose-invert-hr: var(--color-md-sys-color-outline-variant);
+  --tw-prose-invert-quotes: var(--color-md-sys-color-on-surface);
+  --tw-prose-invert-quote-borders: var(--color-md-sys-color-outline);
+  --tw-prose-invert-captions: var(--color-md-sys-color-on-surface-variant);
+  --tw-prose-invert-code: var(--color-md-sys-color-primary);
+  --tw-prose-invert-pre-code: var(--color-md-sys-color-on-surface);
+  --tw-prose-invert-pre-bg: var(--color-md-sys-color-surface-container-highest);
+  --tw-prose-invert-th-borders: var(--color-md-sys-color-outline-variant);
+  --tw-prose-invert-td-borders: var(--color-md-sys-color-outline-variant);
+}

package/dist/styles/rounding.css

@@ -0,0 +1,11 @@
+@theme {
+  --radius-none: 0;
+  --radius-xs: 4px;
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 28px;
+  --radius-full: calc(infinity * 1px);
+
+  --md-util-optical-centering-coefficient: 0.11;
+}

package/dist/styles/theme/dark-hc.css

@@ -0,0 +1,53 @@
+@layer base {
+  [data-theme='dark-hc'] {
+    --color-md-sys-color-primary: rgb(245 237 255);
+    --color-md-sys-color-surface-tint: rgb(207 189 254);
+    --color-md-sys-color-on-primary: rgb(0 0 0);
+    --color-md-sys-color-primary-container: rgb(203 185 250);
+    --color-md-sys-color-on-primary-container: rgb(15 0 51);
+    --color-md-sys-color-secondary: rgb(245 237 255);
+    --color-md-sys-color-on-secondary: rgb(0 0 0);
+    --color-md-sys-color-secondary-container: rgb(200 191 216);
+    --color-md-sys-color-on-secondary-container: rgb(13 8 26);
+    --color-md-sys-color-tertiary: rgb(255 235 239);
+    --color-md-sys-color-on-tertiary: rgb(0 0 0);
+    --color-md-sys-color-tertiary-container: rgb(235 180 196);
+    --color-md-sys-color-on-tertiary-container: rgb(29 2 13);
+    --color-md-sys-color-error: rgb(255 236 233);
+    --color-md-sys-color-on-error: rgb(0 0 0);
+    --color-md-sys-color-error-container: rgb(255 174 164);
+    --color-md-sys-color-on-error-container: rgb(34 0 1);
+    --color-md-sys-color-background: rgb(20 18 24);
+    --color-md-sys-color-on-background: rgb(230 224 233);
+    --color-md-sys-color-surface: rgb(20 18 24);
+    --color-md-sys-color-on-surface: rgb(255 255 255);
+    --color-md-sys-color-surface-variant: rgb(73 69 78);
+    --color-md-sys-color-on-surface-variant: rgb(255 255 255);
+    --color-md-sys-color-outline: rgb(244 238 249);
+    --color-md-sys-color-outline-variant: rgb(198 192 203);
+    --color-md-sys-color-shadow: rgb(0 0 0);
+    --color-md-sys-color-scrim: rgb(0 0 0);
+    --color-md-sys-color-inverse-surface: rgb(230 224 233);
+    --color-md-sys-color-inverse-on-surface: rgb(0 0 0);
+    --color-md-sys-color-inverse-primary: rgb(78 63 119);
+    --color-md-sys-color-primary-fixed: rgb(233 221 255);
+    --color-md-sys-color-on-primary-fixed: rgb(0 0 0);
+    --color-md-sys-color-primary-fixed-dim: rgb(207 189 254);
+    --color-md-sys-color-on-primary-fixed-variant: rgb(22 3 61);
+    --color-md-sys-color-secondary-fixed: rgb(232 222 248);
+    --color-md-sys-color-on-secondary-fixed: rgb(0 0 0);
+    --color-md-sys-color-secondary-fixed-dim: rgb(203 194 219);
+    --color-md-sys-color-on-secondary-fixed-variant: rgb(19 14 32);
+    --color-md-sys-color-tertiary-fixed: rgb(255 217 227);
+    --color-md-sys-color-on-tertiary-fixed: rgb(0 0 0);
+    --color-md-sys-color-tertiary-fixed-dim: rgb(239 184 200);
+    --color-md-sys-color-on-tertiary-fixed-variant: rgb(36 6 19);
+    --color-md-sys-color-surface-dim: rgb(20 18 24);
+    --color-md-sys-color-surface-bright: rgb(82 79 85);
+    --color-md-sys-color-surface-container-lowest: rgb(0 0 0);
+    --color-md-sys-color-surface-container-low: rgb(33 31 36);
+    --color-md-sys-color-surface-container: rgb(50 47 53);
+    --color-md-sys-color-surface-container-high: rgb(61 58 65);
+    --color-md-sys-color-surface-container-highest: rgb(72 70 76);
+  }
+}

package/dist/styles/theme/dark-mc.css

@@ -0,0 +1,53 @@
+@layer base {
+  [data-theme='dark-mc'] {
+    --color-md-sys-color-primary: rgb(227 214 255);
+    --color-md-sys-color-surface-tint: rgb(207 189 254);
+    --color-md-sys-color-on-primary: rgb(43 27 82);
+    --color-md-sys-color-primary-container: rgb(152 135 197);
+    --color-md-sys-color-on-primary-container: rgb(0 0 0);
+    --color-md-sys-color-secondary: rgb(226 216 242);
+    --color-md-sys-color-on-secondary: rgb(40 35 54);
+    --color-md-sys-color-secondary-container: rgb(149 141 164);
+    --color-md-sys-color-on-secondary-container: rgb(0 0 0);
+    --color-md-sys-color-tertiary: rgb(255 208 221);
+    --color-md-sys-color-on-tertiary: rgb(61 26 39);
+    --color-md-sys-color-tertiary-container: rgb(181 131 146);
+    --color-md-sys-color-on-tertiary-container: rgb(0 0 0);
+    --color-md-sys-color-error: rgb(255 210 204);
+    --color-md-sys-color-on-error: rgb(84 0 3);
+    --color-md-sys-color-error-container: rgb(255 84 73);
+    --color-md-sys-color-on-error-container: rgb(0 0 0);
+    --color-md-sys-color-background: rgb(20 18 24);
+    --color-md-sys-color-on-background: rgb(230 224 233);
+    --color-md-sys-color-surface: rgb(20 18 24);
+    --color-md-sys-color-on-surface: rgb(255 255 255);
+    --color-md-sys-color-surface-variant: rgb(73 69 78);
+    --color-md-sys-color-on-surface-variant: rgb(224 218 229);
+    --color-md-sys-color-outline: rgb(181 176 187);
+    --color-md-sys-color-outline-variant: rgb(147 142 153);
+    --color-md-sys-color-shadow: rgb(0 0 0);
+    --color-md-sys-color-scrim: rgb(0 0 0);
+    --color-md-sys-color-inverse-surface: rgb(230 224 233);
+    --color-md-sys-color-inverse-on-surface: rgb(43 41 47);
+    --color-md-sys-color-inverse-primary: rgb(78 63 119);
+    --color-md-sys-color-primary-fixed: rgb(233 221 255);
+    --color-md-sys-color-on-primary-fixed: rgb(22 3 61);
+    --color-md-sys-color-primary-fixed-dim: rgb(207 189 254);
+    --color-md-sys-color-on-primary-fixed-variant: rgb(60 45 99);
+    --color-md-sys-color-secondary-fixed: rgb(232 222 248);
+    --color-md-sys-color-on-secondary-fixed: rgb(19 14 32);
+    --color-md-sys-color-secondary-fixed-dim: rgb(203 194 219);
+    --color-md-sys-color-on-secondary-fixed-variant: rgb(57 51 71);
+    --color-md-sys-color-tertiary-fixed: rgb(255 217 227);
+    --color-md-sys-color-on-tertiary-fixed: rgb(36 6 19);
+    --color-md-sys-color-tertiary-fixed-dim: rgb(239 184 200);
+    --color-md-sys-color-on-tertiary-fixed-variant: rgb(80 43 56);
+    --color-md-sys-color-surface-dim: rgb(20 18 24);
+    --color-md-sys-color-surface-bright: rgb(70 67 74);
+    --color-md-sys-color-surface-container-lowest: rgb(8 7 11);
+    --color-md-sys-color-surface-container-low: rgb(31 29 34);
+    --color-md-sys-color-surface-container: rgb(41 39 45);
+    --color-md-sys-color-surface-container-high: rgb(52 49 56);
+    --color-md-sys-color-surface-container-highest: rgb(63 60 67);
+  }
+}

package/dist/styles/theme/dark.css

@@ -0,0 +1,51 @@
+.dark {
+  --color-md-sys-color-primary: rgb(207 189 254);
+  --color-md-sys-color-surface-tint: rgb(207 189 254);
+  --color-md-sys-color-on-primary: rgb(54 39 93);
+  --color-md-sys-color-primary-container: rgb(77 61 117);
+  --color-md-sys-color-on-primary-container: rgb(233 221 255);
+  --color-md-sys-color-secondary: rgb(203 194 219);
+  --color-md-sys-color-on-secondary: rgb(51 45 65);
+  --color-md-sys-color-secondary-container: rgb(74 68 88);
+  --color-md-sys-color-on-secondary-container: rgb(232 222 248);
+  --color-md-sys-color-tertiary: rgb(239 184 200);
+  --color-md-sys-color-on-tertiary: rgb(74 37 50);
+  --color-md-sys-color-tertiary-container: rgb(99 59 72);
+  --color-md-sys-color-on-tertiary-container: rgb(255 217 227);
+  --color-md-sys-color-error: rgb(255 180 171);
+  --color-md-sys-color-on-error: rgb(105 0 5);
+  --color-md-sys-color-error-container: rgb(147 0 10);
+  --color-md-sys-color-on-error-container: rgb(255 218 214);
+  --color-md-sys-color-background: rgb(20 18 24);
+  --color-md-sys-color-on-background: rgb(230 224 233);
+  --color-md-sys-color-surface: rgb(20 18 24);
+  --color-md-sys-color-on-surface: rgb(230 224 233);
+  --color-md-sys-color-surface-variant: rgb(73 69 78);
+  --color-md-sys-color-on-surface-variant: rgb(202 196 207);
+  --color-md-sys-color-outline: rgb(148 143 153);
+  --color-md-sys-color-outline-variant: rgb(73 69 78);
+  --color-md-sys-color-shadow: rgb(0 0 0);
+  --color-md-sys-color-scrim: rgb(0 0 0);
+  --color-md-sys-color-inverse-surface: rgb(230 224 233);
+  --color-md-sys-color-inverse-on-surface: rgb(50 47 53);
+  --color-md-sys-color-inverse-primary: rgb(101 85 143);
+  --color-md-sys-color-primary-fixed: rgb(233 221 255);
+  --color-md-sys-color-on-primary-fixed: rgb(32 16 71);
+  --color-md-sys-color-primary-fixed-dim: rgb(207 189 254);
+  --color-md-sys-color-on-primary-fixed-variant: rgb(77 61 117);
+  --color-md-sys-color-secondary-fixed: rgb(232 222 248);
+  --color-md-sys-color-on-secondary-fixed: rgb(30 25 43);
+  --color-md-sys-color-secondary-fixed-dim: rgb(203 194 219);
+  --color-md-sys-color-on-secondary-fixed-variant: rgb(74 68 88);
+  --color-md-sys-color-tertiary-fixed: rgb(255 217 227);
+  --color-md-sys-color-on-tertiary-fixed: rgb(49 16 29);
+  --color-md-sys-color-tertiary-fixed-dim: rgb(239 184 200);
+  --color-md-sys-color-on-tertiary-fixed-variant: rgb(99 59 72);
+  --color-md-sys-color-surface-dim: rgb(20 18 24);
+  --color-md-sys-color-surface-bright: rgb(59 56 62);
+  --color-md-sys-color-surface-container-lowest: rgb(15 13 19);
+  --color-md-sys-color-surface-container-low: rgb(29 27 32);
+  --color-md-sys-color-surface-container: rgb(33 31 36);
+  --color-md-sys-color-surface-container-high: rgb(43 41 47);
+  --color-md-sys-color-surface-container-highest: rgb(54 52 58);
+}

package/dist/styles/theme/light-hc.css

@@ -0,0 +1,53 @@
+@layer base {
+  [data-theme='light-hc'] {
+    --color-md-sys-color-primary: rgb(49 34 89);
+    --color-md-sys-color-surface-tint: rgb(101 85 143);
+    --color-md-sys-color-on-primary: rgb(255 255 255);
+    --color-md-sys-color-primary-container: rgb(79 64 120);
+    --color-md-sys-color-on-primary-container: rgb(255 255 255);
+    --color-md-sys-color-secondary: rgb(47 41 60);
+    --color-md-sys-color-on-secondary: rgb(255 255 255);
+    --color-md-sys-color-secondary-container: rgb(76 70 91);
+    --color-md-sys-color-on-secondary-container: rgb(255 255 255);
+    --color-md-sys-color-tertiary: rgb(69 33 46);
+    --color-md-sys-color-on-tertiary: rgb(255 255 255);
+    --color-md-sys-color-tertiary-container: rgb(102 61 75);
+    --color-md-sys-color-on-tertiary-container: rgb(255 255 255);
+    --color-md-sys-color-error: rgb(96 0 4);
+    --color-md-sys-color-on-error: rgb(255 255 255);
+    --color-md-sys-color-error-container: rgb(152 0 10);
+    --color-md-sys-color-on-error-container: rgb(255 255 255);
+    --color-md-sys-color-background: rgb(253 247 255);
+    --color-md-sys-color-on-background: rgb(29 27 32);
+    --color-md-sys-color-surface: rgb(253 247 255);
+    --color-md-sys-color-on-surface: rgb(0 0 0);
+    --color-md-sys-color-surface-variant: rgb(231 224 235);
+    --color-md-sys-color-on-surface-variant: rgb(0 0 0);
+    --color-md-sys-color-outline: rgb(46 43 51);
+    --color-md-sys-color-outline-variant: rgb(75 72 81);
+    --color-md-sys-color-shadow: rgb(0 0 0);
+    --color-md-sys-color-scrim: rgb(0 0 0);
+    --color-md-sys-color-inverse-surface: rgb(50 47 53);
+    --color-md-sys-color-inverse-on-surface: rgb(255 255 255);
+    --color-md-sys-color-inverse-primary: rgb(207 189 254);
+    --color-md-sys-color-primary-fixed: rgb(79 64 120);
+    --color-md-sys-color-on-primary-fixed: rgb(255 255 255);
+    --color-md-sys-color-primary-fixed-dim: rgb(56 41 96);
+    --color-md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
+    --color-md-sys-color-secondary-fixed: rgb(76 70 91);
+    --color-md-sys-color-on-secondary-fixed: rgb(255 255 255);
+    --color-md-sys-color-secondary-fixed-dim: rgb(53 48 67);
+    --color-md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
+    --color-md-sys-color-tertiary-fixed: rgb(102 61 75);
+    --color-md-sys-color-on-tertiary-fixed: rgb(255 255 255);
+    --color-md-sys-color-tertiary-fixed-dim: rgb(76 39 52);
+    --color-md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
+    --color-md-sys-color-surface-dim: rgb(188 183 191);
+    --color-md-sys-color-surface-bright: rgb(253 247 255);
+    --color-md-sys-color-surface-container-lowest: rgb(255 255 255);
+    --color-md-sys-color-surface-container-low: rgb(245 239 247);
+    --color-md-sys-color-surface-container: rgb(230 224 233);
+    --color-md-sys-color-surface-container-high: rgb(216 210 218);
+    --color-md-sys-color-surface-container-highest: rgb(202 197 204);
+  }
+}

package/dist/styles/theme/light-mc.css

@@ -0,0 +1,53 @@
+@layer base {
+  [data-theme='light-mc'] {
+    --color-md-sys-color-primary: rgb(60 45 99);
+    --color-md-sys-color-surface-tint: rgb(101 85 143);
+    --color-md-sys-color-on-primary: rgb(255 255 255);
+    --color-md-sys-color-primary-container: rgb(116 100 159);
+    --color-md-sys-color-on-primary-container: rgb(255 255 255);
+    --color-md-sys-color-secondary: rgb(57 51 71);
+    --color-md-sys-color-on-secondary: rgb(255 255 255);
+    --color-md-sys-color-secondary-container: rgb(113 106 128);
+    --color-md-sys-color-on-secondary-container: rgb(255 255 255);
+    --color-md-sys-color-tertiary: rgb(80 43 56);
+    --color-md-sys-color-on-tertiary: rgb(255 255 255);
+    --color-md-sys-color-tertiary-container: rgb(142 96 111);
+    --color-md-sys-color-on-tertiary-container: rgb(255 255 255);
+    --color-md-sys-color-error: rgb(116 0 6);
+    --color-md-sys-color-on-error: rgb(255 255 255);
+    --color-md-sys-color-error-container: rgb(207 44 39);
+    --color-md-sys-color-on-error-container: rgb(255 255 255);
+    --color-md-sys-color-background: rgb(253 247 255);
+    --color-md-sys-color-on-background: rgb(29 27 32);
+    --color-md-sys-color-surface: rgb(253 247 255);
+    --color-md-sys-color-on-surface: rgb(18 16 22);
+    --color-md-sys-color-surface-variant: rgb(231 224 235);
+    --color-md-sys-color-on-surface-variant: rgb(56 53 61);
+    --color-md-sys-color-outline: rgb(84 81 90);
+    --color-md-sys-color-outline-variant: rgb(111 107 117);
+    --color-md-sys-color-shadow: rgb(0 0 0);
+    --color-md-sys-color-scrim: rgb(0 0 0);
+    --color-md-sys-color-inverse-surface: rgb(50 47 53);
+    --color-md-sys-color-inverse-on-surface: rgb(245 239 247);
+    --color-md-sys-color-inverse-primary: rgb(207 189 254);
+    --color-md-sys-color-primary-fixed: rgb(116 100 159);
+    --color-md-sys-color-on-primary-fixed: rgb(255 255 255);
+    --color-md-sys-color-primary-fixed-dim: rgb(91 76 132);
+    --color-md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
+    --color-md-sys-color-secondary-fixed: rgb(113 106 128);
+    --color-md-sys-color-on-secondary-fixed: rgb(255 255 255);
+    --color-md-sys-color-secondary-fixed-dim: rgb(88 82 103);
+    --color-md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
+    --color-md-sys-color-tertiary-fixed: rgb(142 96 111);
+    --color-md-sys-color-on-tertiary-fixed: rgb(255 255 255);
+    --color-md-sys-color-tertiary-fixed-dim: rgb(115 72 86);
+    --color-md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
+    --color-md-sys-color-surface-dim: rgb(202 197 204);
+    --color-md-sys-color-surface-bright: rgb(253 247 255);
+    --color-md-sys-color-surface-container-lowest: rgb(255 255 255);
+    --color-md-sys-color-surface-container-low: rgb(248 242 250);
+    --color-md-sys-color-surface-container: rgb(236 230 238);
+    --color-md-sys-color-surface-container-high: rgb(225 219 227);
+    --color-md-sys-color-surface-container-highest: rgb(213 208 216);
+  }
+}

package/dist/styles/theme/light.css

@@ -0,0 +1,51 @@
+@theme {
+  --color-md-sys-color-primary: rgb(101 85 143);
+  --color-md-sys-color-surface-tint: rgb(101 85 143);
+  --color-md-sys-color-on-primary: rgb(255 255 255);
+  --color-md-sys-color-primary-container: rgb(233 221 255);
+  --color-md-sys-color-on-primary-container: rgb(77 61 117);
+  --color-md-sys-color-secondary: rgb(98 91 113);
+  --color-md-sys-color-on-secondary: rgb(255 255 255);
+  --color-md-sys-color-secondary-container: rgb(232 222 248);
+  --color-md-sys-color-on-secondary-container: rgb(74 68 88);
+  --color-md-sys-color-tertiary: rgb(126 82 96);
+  --color-md-sys-color-on-tertiary: rgb(255 255 255);
+  --color-md-sys-color-tertiary-container: rgb(255 217 227);
+  --color-md-sys-color-on-tertiary-container: rgb(99 59 72);
+  --color-md-sys-color-error: rgb(186 26 26);
+  --color-md-sys-color-on-error: rgb(255 255 255);
+  --color-md-sys-color-error-container: rgb(255 218 214);
+  --color-md-sys-color-on-error-container: rgb(147 0 10);
+  --color-md-sys-color-background: rgb(253 247 255);
+  --color-md-sys-color-on-background: rgb(29 27 32);
+  --color-md-sys-color-surface: rgb(253 247 255);
+  --color-md-sys-color-on-surface: rgb(29 27 32);
+  --color-md-sys-color-surface-variant: rgb(231 224 235);
+  --color-md-sys-color-on-surface-variant: rgb(73 69 78);
+  --color-md-sys-color-outline: rgb(122 117 127);
+  --color-md-sys-color-outline-variant: rgb(202 196 207);
+  --color-md-sys-color-shadow: rgb(0 0 0);
+  --color-md-sys-color-scrim: rgb(0 0 0);
+  --color-md-sys-color-inverse-surface: rgb(50 47 53);
+  --color-md-sys-color-inverse-on-surface: rgb(245 239 247);
+  --color-md-sys-color-inverse-primary: rgb(207 189 254);
+  --color-md-sys-color-primary-fixed: rgb(233 221 255);
+  --color-md-sys-color-on-primary-fixed: rgb(32 16 71);
+  --color-md-sys-color-primary-fixed-dim: rgb(207 189 254);
+  --color-md-sys-color-on-primary-fixed-variant: rgb(77 61 117);
+  --color-md-sys-color-secondary-fixed: rgb(232 222 248);
+  --color-md-sys-color-on-secondary-fixed: rgb(30 25 43);
+  --color-md-sys-color-secondary-fixed-dim: rgb(203 194 219);
+  --color-md-sys-color-on-secondary-fixed-variant: rgb(74 68 88);
+  --color-md-sys-color-tertiary-fixed: rgb(255 217 227);
+  --color-md-sys-color-on-tertiary-fixed: rgb(49 16 29);
+  --color-md-sys-color-tertiary-fixed-dim: rgb(239 184 200);
+  --color-md-sys-color-on-tertiary-fixed-variant: rgb(99 59 72);
+  --color-md-sys-color-surface-dim: rgb(222 216 224);
+  --color-md-sys-color-surface-bright: rgb(253 247 255);
+  --color-md-sys-color-surface-container-lowest: rgb(255 255 255);
+  --color-md-sys-color-surface-container-low: rgb(248 242 250);
+  --color-md-sys-color-surface-container: rgb(242 236 244);
+  --color-md-sys-color-surface-container-high: rgb(236 230 238);
+  --color-md-sys-color-surface-container-highest: rgb(230 224 233);
+}