m3-svelte 4.1.0 → 4.3.0

package/package/forms/RadioAnim1.svelte

@@ -51,7 +51,7 @@
     height: 1.25rem;
     border-radius: var(--m3-util-rounding-full);
     border: solid 0.125rem currentColor;
-    transition: all 0.3s;
+    transition: border var(--m3-util-easing-fast);
     -webkit-tap-highlight-color: transparent;
   }
 
@@ -63,7 +63,7 @@
     scale: 0;
     border-radius: var(--m3-util-rounding-full);
     background-color: currentColor;
-    transition: all 0.3s;
+    transition: scale var(--m3-util-easing-fast-spatial);
     -webkit-tap-highlight-color: transparent;
   }
 

package/package/forms/RadioAnim2.svelte

@@ -51,7 +51,7 @@
     height: 1.25rem;
     border-radius: var(--m3-util-rounding-full);
     border: solid 0.125rem currentColor;
-    transition: all 0.3s;
+    transition: border var(--m3-util-easing-fast);
     -webkit-tap-highlight-color: transparent;
   }
 
@@ -76,7 +76,7 @@
 
   :global(input:checked) + .layer-container .radio-dot {
     scale: 1;
-    transition: all 0.3s;
+    transition: scale var(--m3-util-easing-fast-spatial);
   }
 
   :global(input:disabled) + .layer-container {

package/package/forms/RadioAnim3.svelte

@@ -51,7 +51,7 @@
     height: 1.25rem;
     border-radius: var(--m3-util-rounding-full);
     border: solid 0.125rem currentColor;
-    transition: all 0.3s;
+    transition: border var(--m3-util-easing-fast);
     -webkit-tap-highlight-color: transparent;
   }
 
@@ -62,7 +62,7 @@
     height: 1rem;
     border-radius: var(--m3-util-rounding-full);
     outline: solid 0 currentColor;
-    transition: all 0.3s;
+    transition: var(--m3-util-easing);
     -webkit-tap-highlight-color: transparent;
   }
 

package/package/forms/Slider.svelte

@@ -121,7 +121,7 @@
     background-color: rgb(var(--m3-scheme-primary));
 
     pointer-events: none;
-    transition: width 200ms;
+    transition: width var(--m3-util-easing);
   }
 
   .value {
@@ -142,7 +142,7 @@
 
     opacity: 0;
     pointer-events: none;
-    transition: opacity 200ms;
+    transition: opacity var(--m3-util-easing);
   }
 
   input:focus-visible ~ .thumb {

package/package/forms/SliderTicks.svelte

@@ -154,7 +154,7 @@
     background-color: rgb(var(--m3-scheme-primary));
 
     pointer-events: none;
-    transition: width 200ms;
+    transition: width var(--m3-util-easing);
   }
 
   .value {
@@ -175,7 +175,7 @@
 
     opacity: 0;
     pointer-events: none;
-    transition: opacity 200ms;
+    transition: opacity var(--m3-util-easing);
   }
 
   input:focus-visible ~ .thumb {

package/package/forms/Switch.svelte

@@ -76,7 +76,7 @@
     border: solid 0.125rem rgb(var(--m3-scheme-outline));
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
-    transition: all 300ms;
+    transition: var(--m3-util-easing);
   }
   .handle {
     position: absolute;
@@ -85,9 +85,11 @@
     border-radius: var(--m3-switch-handle-shape);
 
     background-color: rgb(var(--m3-scheme-outline));
+    /* Fallback for those without on on primary */
+    color: rgb(var(--m3-scheme-on-on-primary, var(--m3-scheme-on-primary-container)));
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
-    transition: all var(--m3-util-easing-fast-spatial);
+    transition: var(--m3-util-easing-fast-spatial);
 
     left: 0.5rem;
     top: 50%;
@@ -99,7 +101,6 @@
   .handle > :global(svg) {
     width: 1rem;
     height: 1rem;
-    color: rgb(var(--m3-scheme-on-primary-container));
     opacity: 0;
     transition:
       opacity var(--m3-util-easing-fast-spatial),
@@ -113,7 +114,7 @@
 
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
-    transition: all var(--m3-util-easing-fast);
+    transition: var(--m3-util-easing-fast);
 
     left: 1rem;
     top: 50%;
@@ -130,6 +131,7 @@
   .m3-container:hover > input:enabled:checked + .handle,
   .m3-container > input:enabled:checked:is(:global(:active, :focus-visible)) + .handle {
     background-color: rgb(var(--m3-scheme-primary-container));
+    color: rgb(var(--m3-scheme-on-primary-container));
   }
   .m3-container:hover > input ~ .hover {
     background-color: rgb(var(--m3-scheme-on-surface) / 0.08);

package/package/forms/WavyLinearProgress.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import { onMount, untrack } from "svelte";
+  import { linear, trackOpacity } from "./_wavy";
+
+  let {
+    width = 600,
+    height = 10,
+    thickness = 4,
+    percent,
+  }: { width?: number; height?: number; thickness?: number; percent: number } = $props();
+
+  let time = $state(0);
+
+  let top = $derived(thickness * 0.5);
+  let bottom = $derived(height - thickness * 0.5);
+  let left = $derived(thickness * 0.5);
+  let right = $derived(width - thickness * 0.5);
+  let percentX = $derived((percent / 100) * (right - left) + left);
+
+  const getSMILData = (time: number) => {
+    let paths: string[] = [];
+    for (let x = 0; x <= 1000; x += 1000 / 30) {
+      paths.push(linear(top, bottom, left, percentX, time + x));
+    }
+    return paths.join(";");
+  };
+
+  onMount(() => {
+    let mounted = true;
+    const start = performance.now();
+    const update = () => {
+      if (!mounted) return;
+
+      time = performance.now() - start;
+      requestAnimationFrame(update);
+    };
+    update();
+    return () => (mounted = false);
+  });
+</script>
+
+<svg viewBox="0 0 {width} {height}">
+  <path
+    fill="none"
+    stroke="rgb(var(--m3-scheme-primary))"
+    stroke-width={thickness}
+    stroke-linecap="round"
+  >
+    <animate
+      attributeName="d"
+      dur="1s"
+      repeatCount="indefinite"
+      values={getSMILData(untrack(() => time))}
+    />
+  </path>
+  <line
+    fill="none"
+    stroke="rgb(var(--m3-scheme-secondary-container))"
+    stroke-width={thickness}
+    stroke-linecap="round"
+    x1={percentX + thickness + 4}
+    y1={height / 2}
+    x2={right}
+    y2={height / 2}
+    opacity={trackOpacity(right, percentX + thickness + 4)}
+  />
+</svg>

package/package/forms/WavyLinearProgress.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    width?: number;
+    height?: number;
+    thickness?: number;
+    percent: number;
+};
+declare const WavyLinearProgress: import("svelte").Component<$$ComponentProps, {}, "">;
+type WavyLinearProgress = ReturnType<typeof WavyLinearProgress>;
+export default WavyLinearProgress;

package/package/forms/WavyLinearProgressEstimate.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import { linear, trackOpacity } from "./_wavy";
+
+  let {
+    sToHalfway = 1,
+    width = 600,
+    height = 10,
+    thickness = 4,
+  }: { sToHalfway?: number; width?: number; height?: number; thickness?: number } = $props();
+
+  let top = $derived(thickness * 0.5);
+  let bottom = $derived(height - thickness * 0.5);
+  let left = $derived(thickness * 0.5);
+  let right = $derived(width - thickness * 0.5);
+  let endTime = $derived(sToHalfway * 8);
+
+  const expressiveSMIL = $derived.by(() => {
+    let paths: string[] = [];
+
+    for (let time = 0; time < endTime; time += 1 / 30) {
+      let value = 1 - Math.pow(0.5, time / sToHalfway);
+      if (value == 0) value = 0.001;
+      const ms = time * 1000;
+      paths.push(linear(top, bottom, left, right, ms, value * (right - left) + left));
+    }
+    return paths.join(";");
+  });
+  const infiniteSMIL = $derived.by(() => {
+    let paths: string[] = [];
+    for (let time = 0; time <= 1; time += 1 / 30) {
+      paths.push(linear(top, bottom, left, right, time * 1000));
+    }
+    return paths.join(";");
+  });
+  let { trackSMIL, opacitySMIL } = $derived.by(() => {
+    let xs: number[] = [];
+    let opacities: number[] = [];
+
+    for (let time = 0; time < endTime; time += 1 / 30) {
+      const value = 1 - Math.pow(0.5, time / sToHalfway);
+      const percentX = value * (right - left) + left;
+      const x = percentX + thickness + 4;
+      xs.push(x);
+
+      opacities.push(trackOpacity(right, x));
+    }
+    return {
+      trackSMIL: xs.join(";"),
+      opacitySMIL: opacities.join(";"),
+    };
+  });
+</script>
+
+<svg viewBox="0 0 {width} {height}">
+  <path
+    fill="none"
+    stroke="rgb(var(--m3-scheme-primary))"
+    stroke-width={thickness}
+    stroke-linecap="round"
+  >
+    <animate attributeName="d" dur="{endTime}s" values={expressiveSMIL} />
+    <animate
+      attributeName="d"
+      dur="1s"
+      begin="{endTime}s"
+      repeatCount="indefinite"
+      values={infiniteSMIL}
+    />
+  </path>
+  <line
+    fill="none"
+    stroke="rgb(var(--m3-scheme-secondary-container))"
+    stroke-width={thickness}
+    stroke-linecap="round"
+    y1={height / 2}
+    x2={right}
+    y2={height / 2}
+  >
+    <animate attributeName="x1" dur="{endTime}s" values={trackSMIL} />
+    <animate attributeName="opacity" dur="{endTime}s" values={opacitySMIL} fill="freeze" />
+  </line>
+</svg>

package/package/forms/WavyLinearProgressEstimate.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    sToHalfway?: number;
+    width?: number;
+    height?: number;
+    thickness?: number;
+};
+declare const WavyLinearProgressEstimate: import("svelte").Component<$$ComponentProps, {}, "">;
+type WavyLinearProgressEstimate = ReturnType<typeof WavyLinearProgressEstimate>;
+export default WavyLinearProgressEstimate;

package/package/forms/_picker/FocusPicker.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Icon from "../../misc/_icon.svelte";
+  import Layer from "../../misc/Layer.svelte";
   import iconCheck from "@ktibow/iconset-material-symbols/check";
 
   const conditionalScroll = (node: Element, shouldScroll: boolean) => {
@@ -16,6 +17,7 @@
 <div class="m3-container">
   {#each options as { name, selected, activate }}
     <button class="m3-font-body-large" onclick={activate} use:conditionalScroll={selected}>
+      <Layer />
       {#if selected}
         <Icon icon={iconCheck} />
       {/if}
@@ -42,26 +44,16 @@
     background-color: transparent;
     color: rgb(var(--m3-scheme-on-surface));
     border: none;
-    position: relative;
     -webkit-tap-highlight-color: transparent;
     cursor: pointer;
-    transition: all 200ms;
+    position: relative;
   }
-  button :global(svg) {
+  button > :global(svg) {
     width: 1.5rem;
     height: 1.5rem;
     position: absolute;
     left: 1rem;
     top: 50%;
-    transform: translateY(-50%);
-  }
-  @media (hover: hover) {
-    button:hover {
-      background-color: rgb(var(--m3-scheme-on-surface) / 0.08);
-    }
-  }
-  button:focus-visible,
-  button:active {
-    background-color: rgb(var(--m3-scheme-on-surface) / 0.12);
+    translate: 0 -50%;
   }
 </style>

package/package/forms/_picker/Header.svelte

@@ -3,6 +3,7 @@
   import iconLeft from "@ktibow/iconset-material-symbols/chevron-left";
   import iconRight from "@ktibow/iconset-material-symbols/chevron-right";
   import iconDown from "@ktibow/iconset-material-symbols/arrow-drop-down";
+  import Layer from "../../misc/Layer.svelte";
 
   let {
     currentView = $bindable(),
@@ -31,6 +32,7 @@
       class="arrow"
       onclick={() => (focusedMonth = (focusedMonth - 1 + 12) % 12)}
     >
+      <Layer />
       <Icon icon={iconLeft} />
     </button>
     <button
@@ -39,10 +41,12 @@
       onclick={monthClick}
       disabled={currentView == "year"}
     >
+      <Layer />
       {getShortMonth(focusedMonth)}
       <Icon icon={iconDown} />
     </button>
     <button type="button" class="arrow" onclick={() => (focusedMonth = (focusedMonth + 1) % 12)}>
+      <Layer />
       <Icon icon={iconRight} />
     </button>
   </div>
@@ -53,6 +57,7 @@
       disabled={focusedYear <= startYear}
       onclick={() => focusedYear--}
     >
+      <Layer />
       <Icon icon={iconLeft} />
     </button>
     <button
@@ -61,6 +66,7 @@
       onclick={yearClick}
       disabled={currentView == "month"}
     >
+      <Layer />
       {focusedYear}
       <Icon icon={iconDown} />
     </button>
@@ -70,6 +76,7 @@
       disabled={focusedYear >= endYear}
       onclick={() => focusedYear++}
     >
+      <Layer />
       <Icon icon={iconRight} />
     </button>
   </div>
@@ -79,7 +86,6 @@
   .m3-container {
     display: flex;
     height: 4rem;
-    transition: all 200ms;
     border-bottom: solid 1px transparent;
     flex-shrink: 0;
   }
@@ -97,18 +103,9 @@
     color: rgb(var(--m3-scheme-on-surface-variant));
     border: none;
     padding: 0;
-    transition: all 200ms;
     -webkit-tap-highlight-color: transparent;
     cursor: pointer;
-  }
-  @media (hover: hover) {
-    button:enabled:hover {
-      background-color: rgb(var(--m3-scheme-on-surface-variant) / 0.08);
-    }
-  }
-  button:enabled:focus-visible,
-  button:enabled:active {
-    background-color: rgb(var(--m3-scheme-on-surface-variant) / 0.12);
+    position: relative;
   }
   button:disabled {
     cursor: auto;

package/package/forms/_picker/Item.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import Layer from "../../misc/Layer.svelte";
+
   let {
     disabled,
     today,
@@ -22,6 +24,7 @@
   class:selected
   onclick={click}
 >
+  <Layer />
   {label}
 </button>
 
@@ -34,33 +37,24 @@
     align-items: center;
     justify-content: center;
 
-    --text: var(--m3-scheme-on-surface);
     background-color: transparent;
-    color: rgb(var(--text));
+    color: rgb(var(--m3-scheme-on-surface));
     border: none;
     -webkit-tap-highlight-color: transparent;
     cursor: pointer;
-    transition: all 200ms;
-  }
-  @media (hover: hover) {
-    button:enabled:hover {
-      background-color: rgb(var(--text) / 0.08);
-    }
-  }
-  button:enabled:focus-visible,
-  button:enabled:active {
-    background-color: rgb(var(--text) / 0.12);
+    transition: var(--m3-util-easing-fast);
+    position: relative;
   }
   button:disabled {
     cursor: auto;
     color: rgb(var(--m3-scheme-on-surface-variant) / 0.38);
   }
   .today {
-    border: solid 1px rgb(var(--text));
-    --text: var(--m3-scheme-primary);
+    border: solid 1px rgb(var(--m3-scheme-primary));
+    color: rgb(var(--m3-scheme-primary));
   }
   .selected {
     background-color: rgb(var(--m3-scheme-primary)) !important;
-    --text: var(--m3-scheme-on-primary);
+    color: rgb(var(--m3-scheme-on-primary));
   }
 </style>

package/package/forms/_wavy.d.ts

@@ -0,0 +1,2 @@
+export declare const linear: (t: number, b: number, from: number, to: number, time: number, cutoffTo?: number) => string;
+export declare const trackOpacity: (right: number, x: number) => number;

package/package/forms/_wavy.js

@@ -0,0 +1,32 @@
+const frequencyT = (Math.PI * 2) / 1000;
+const frequencyX = (Math.PI * 2) / 40;
+const round2 = (x) => Math.round(x * 100) / 100;
+const round1 = (x) => Math.round(x * 10) / 10;
+export const linear = (t, b, from, to, time, cutoffTo) => {
+    time = time * frequencyT;
+    time %= Math.PI * 2;
+    if (from >= to)
+        return "";
+    let path = "";
+    for (let xIterator = from; xIterator <= to; xIterator += 0.5) {
+        const x = cutoffTo ? Math.min(cutoffTo, xIterator) : xIterator;
+        const sinV = (Math.sin(x * frequencyX + time) + 1) * 0.5;
+        const y = sinV * (t - b) + b;
+        if (x == from) {
+            path = `M ${round1(x)} ${round2(y)}`;
+        }
+        else {
+            path += ` ${round1(x)} ${round2(y)}`;
+        }
+    }
+    return path;
+};
+export const trackOpacity = (right, x) => {
+    let opacity = right - x;
+    if (opacity < 0)
+        opacity = 0;
+    if (opacity > 1)
+        opacity = 1;
+    opacity = round2(opacity);
+    return opacity;
+};

package/package/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Icon } from "./misc/_icon.svelte";
 export { default as Layer } from "./misc/Layer.svelte";
 export * from "./misc/animation.js";
+export * from "./misc/colors.js";
 export * from "./misc/utils.js";
 export * from "./misc/easing.js";
 export { default as Button } from "./buttons/Button.svelte";
@@ -17,8 +18,12 @@ export { default as Snackbar } from "./containers/Snackbar.svelte";
 export type { SnackbarIn } from "./containers/Snackbar.svelte";
 export { default as SnackbarItem } from "./containers/SnackbarItem.svelte";
 export { default as LinearProgress } from "./forms/LinearProgress.svelte";
+export { default as LinearProgressEstimate } from "./forms/LinearProgressEstimate.svelte";
 export { default as LinearProgressIndeterminate } from "./forms/LinearProgressIndeterminate.svelte";
+export { default as WavyLinearProgress } from "./forms/WavyLinearProgress.svelte";
+export { default as WavyLinearProgressEstimate } from "./forms/WavyLinearProgressEstimate.svelte";
 export { default as CircularProgress } from "./forms/CircularProgress.svelte";
+export { default as CircularProgressEstimate } from "./forms/CircularProgressEstimate.svelte";
 export { default as CircularProgressIndeterminate } from "./forms/CircularProgressIndeterminate.svelte";
 export { default as RadioAnim1 } from "./forms/RadioAnim1.svelte";
 export { default as RadioAnim2 } from "./forms/RadioAnim2.svelte";

package/package/index.js

@@ -1,6 +1,7 @@
 export { default as Icon } from "./misc/_icon.svelte";
 export { default as Layer } from "./misc/Layer.svelte";
 export * from "./misc/animation.js";
+export * from "./misc/colors.js";
 export * from "./misc/utils.js";
 export * from "./misc/easing.js";
 export { default as Button } from "./buttons/Button.svelte";
@@ -16,8 +17,12 @@ export { default as MenuItem } from "./containers/MenuItem.svelte";
 export { default as Snackbar } from "./containers/Snackbar.svelte";
 export { default as SnackbarItem } from "./containers/SnackbarItem.svelte";
 export { default as LinearProgress } from "./forms/LinearProgress.svelte";
+export { default as LinearProgressEstimate } from "./forms/LinearProgressEstimate.svelte";
 export { default as LinearProgressIndeterminate } from "./forms/LinearProgressIndeterminate.svelte";
+export { default as WavyLinearProgress } from "./forms/WavyLinearProgress.svelte";
+export { default as WavyLinearProgressEstimate } from "./forms/WavyLinearProgressEstimate.svelte";
 export { default as CircularProgress } from "./forms/CircularProgress.svelte";
+export { default as CircularProgressEstimate } from "./forms/CircularProgressEstimate.svelte";
 export { default as CircularProgressIndeterminate } from "./forms/CircularProgressIndeterminate.svelte";
 export { default as RadioAnim1 } from "./forms/RadioAnim1.svelte";
 export { default as RadioAnim2 } from "./forms/RadioAnim2.svelte";

package/package/misc/_ripple.svelte

@@ -157,19 +157,20 @@
 
     background-color: currentColor;
     opacity: 0;
-    transition: opacity 200ms;
-  }
+    transition: opacity var(--m3-util-easing-fast);
 
-  :global(:not(input:disabled + label, input:disabled + .layer-container, :disabled)) {
     @media (hover: hover) {
-      &:hover > .tint {
+      &:is(:global(:hover) > .tint):not(
+          :global(input:disabled + label) > .tint,
+          :global(input:disabled + .layer-container) > .tint,
+          :global(:disabled) > .tint
+        ) {
         opacity: 0.08;
       }
     }
-
-    &:is(:global(input:focus-visible + label)) > .tint,
-    &:focus-visible > .tint,
-    &:active > .tint {
+    &:is(:global(input:focus-visible + label) > .tint),
+    &:is(:global(:focus-visible) > .tint),
+    &:is(.ripple-container.broken + .tint):is(:global(:active) > .tint) {
       opacity: 0.12;
     }
   }

package/package/misc/_ripplesimple.svelte

@@ -11,19 +11,20 @@
 
     background-color: currentColor;
     opacity: 0;
-    transition: opacity 200ms;
-  }
+    transition: opacity var(--m3-util-easing-fast);
 
-  :global(:not(input:disabled + label, input:disabled + .layer-container, :disabled)) {
     @media (hover: hover) {
-      &:hover > .tint {
+      &:is(:global(:hover) > .tint):not(
+          :global(input:disabled + label) > .tint,
+          :global(input:disabled + .layer-container) > .tint,
+          :global(:disabled) > .tint
+        ) {
         opacity: 0.08;
       }
     }
-
-    &:is(:global(input:focus-visible + label)) > .tint,
-    &:focus-visible > .tint,
-    &:active > .tint {
+    &:is(:global(input:focus-visible + label) > .tint),
+    &:is(:global(:focus-visible) > .tint),
+    &:is(.ripple-container.broken + .tint):is(:global(:active) > .tint) {
       opacity: 0.12;
     }
   }

package/package/misc/colors.d.ts

@@ -0,0 +1,4 @@
+import { MaterialDynamicColors, DynamicColor } from "@ktibow/material-color-utilities-nightly";
+export declare const materialColors: MaterialDynamicColors;
+export declare const colors: DynamicColor[];
+export declare const pairs: DynamicColor[][];

package/package/misc/colors.js

@@ -0,0 +1,24 @@
+import { MaterialDynamicColors, DynamicColor, ContrastCurve, } from "@ktibow/material-color-utilities-nightly";
+export const materialColors = new MaterialDynamicColors();
+// Custom color role used for switch
+const onOnPrimary = DynamicColor.fromPalette({
+    name: "on_on_primary",
+    palette: (s) => s.primaryPalette,
+    background: () => materialColors.onPrimary(),
+    contrastCurve: () => new ContrastCurve(6, 6, 7, 11),
+});
+export const colors = [...materialColors.allColors, onOnPrimary];
+export const pairs = [
+    [materialColors.onPrimary(), onOnPrimary],
+    [materialColors.primaryContainer(), materialColors.onPrimaryContainer()],
+    [materialColors.secondary(), materialColors.onSecondary()],
+    [materialColors.secondaryContainer(), materialColors.onSecondaryContainer()],
+    [materialColors.tertiary(), materialColors.onTertiary()],
+    [materialColors.tertiaryContainer(), materialColors.onTertiaryContainer()],
+    [materialColors.background(), materialColors.onBackground()],
+    [materialColors.surface(), materialColors.onSurface()],
+    [materialColors.inverseSurface(), materialColors.inverseOnSurface()],
+    [materialColors.surfaceVariant(), materialColors.onSurfaceVariant()],
+    [materialColors.error(), materialColors.onError()],
+    [materialColors.errorContainer(), materialColors.onErrorContainer()],
+];

package/package/misc/utils.d.ts

@@ -1,8 +1,4 @@
 import { type DynamicScheme } from "@ktibow/material-color-utilities-nightly";
-export type Color = "primary" | "onPrimary" | "primaryContainer" | "onPrimaryContainer" | "inversePrimary" | "secondary" | "onSecondary" | "secondaryContainer" | "onSecondaryContainer" | "tertiary" | "onTertiary" | "tertiaryContainer" | "onTertiaryContainer" | "error" | "onError" | "errorContainer" | "onErrorContainer" | "background" | "onBackground" | "surface" | "onSurface" | "surfaceVariant" | "onSurfaceVariant" | "inverseSurface" | "inverseOnSurface" | "outline" | "outlineVariant" | "shadow" | "scrim" | "surfaceDim" | "surfaceBright" | "surfaceContainerLowest" | "surfaceContainerLow" | "surfaceContainer" | "surfaceContainerHigh" | "surfaceContainerHighest" | "surfaceTint";
-export type SerializedScheme = Record<Color, number>;
-export declare const pairs: string[][];
-export declare const colors: Color[];
 /**
  * @returns A string of CSS code with custom properties representing the color scheme values.
  * */