@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/src/css/themes/pink.css

@@ -0,0 +1,126 @@
+/* Stepbro theme "pink" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+   Generated by scripts/import-themes.mjs; do not edit. */
+[data-mk-theme="pink"] {
+  color-scheme: light;
+  --md-sys-color-background: #fff7fa;
+  --md-sys-color-on-background: #231823;
+  --md-sys-color-surface: #fff7fa;
+  --md-sys-color-surface-dim: #e8d4e5;
+  --md-sys-color-surface-bright: #fff7fa;
+  --md-sys-color-surface-container-lowest: #ffffff;
+  --md-sys-color-surface-container-low: #ffeffb;
+  --md-sys-color-surface-container: #fce8f9;
+  --md-sys-color-surface-container-high: #f6e2f3;
+  --md-sys-color-surface-container-highest: #f0dded;
+  --md-sys-color-on-surface: #231823;
+  --md-sys-color-surface-variant: #f4dbf2;
+  --md-sys-color-on-surface-variant: #534153;
+  --md-sys-color-inverse-surface: #392d39;
+  --md-sys-color-inverse-on-surface: #ffebfc;
+  --md-sys-color-outline: #857185;
+  --md-sys-color-outline-variant: #d7bfd6;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #a000be;
+  --md-sys-color-primary: #8900a3;
+  --md-sys-color-on-primary: #ffffff;
+  --md-sys-color-primary-container: #c400e8;
+  --md-sys-color-on-primary-container: #ffffff;
+  --md-sys-color-inverse-primary: #f7acff;
+  --md-sys-color-secondary: #9332a6;
+  --md-sys-color-on-secondary: #ffffff;
+  --md-sys-color-secondary-container: #f294ff;
+  --md-sys-color-on-secondary-container: #4d005d;
+  --md-sys-color-tertiary: #9f0054;
+  --md-sys-color-on-tertiary: #ffffff;
+  --md-sys-color-tertiary-container: #e2007a;
+  --md-sys-color-on-tertiary-container: #ffffff;
+  --md-sys-color-error: #ba1a1a;
+  --md-sys-color-on-error: #ffffff;
+  --md-sys-color-error-container: #ffdad6;
+  --md-sys-color-on-error-container: #410002;
+}
+[data-mk-theme="pink"][data-mk-mode="dark"],
+[data-mk-mode="dark"] [data-mk-theme="pink"] {
+  color-scheme: dark;
+  --md-sys-color-background: #1a101b;
+  --md-sys-color-on-background: #f0dded;
+  --md-sys-color-surface: #1a101b;
+  --md-sys-color-surface-dim: #1a101b;
+  --md-sys-color-surface-bright: #423542;
+  --md-sys-color-surface-container-lowest: #150b16;
+  --md-sys-color-surface-container-low: #231823;
+  --md-sys-color-surface-container: #271c28;
+  --md-sys-color-surface-container-high: #322632;
+  --md-sys-color-surface-container-highest: #3d313d;
+  --md-sys-color-on-surface: #f0dded;
+  --md-sys-color-surface-variant: #534153;
+  --md-sys-color-on-surface-variant: #d7bfd6;
+  --md-sys-color-inverse-surface: #f0dded;
+  --md-sys-color-inverse-on-surface: #392d39;
+  --md-sys-color-outline: #a08a9f;
+  --md-sys-color-outline-variant: #534153;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #f7acff;
+  --md-sys-color-primary: #f7acff;
+  --md-sys-color-on-primary: #560068;
+  --md-sys-color-primary-container: #c400e8;
+  --md-sys-color-on-primary-container: #ffffff;
+  --md-sys-color-inverse-primary: #a000be;
+  --md-sys-color-secondary: #f7acff;
+  --md-sys-color-on-secondary: #560068;
+  --md-sys-color-secondary-container: #6c0081;
+  --md-sys-color-on-secondary-container: #fabeff;
+  --md-sys-color-tertiary: #ffb1c8;
+  --md-sys-color-on-tertiary: #650033;
+  --md-sys-color-tertiary-container: #e2007a;
+  --md-sys-color-on-tertiary-container: #ffffff;
+  --md-sys-color-error: #ffb4ab;
+  --md-sys-color-on-error: #690005;
+  --md-sys-color-error-container: #93000a;
+  --md-sys-color-on-error-container: #ffdad6;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mk-mode="light"])[data-mk-theme="pink"],
+  :root:not([data-mk-mode="light"]) [data-mk-theme="pink"] {
+    color-scheme: dark;
+    --md-sys-color-background: #1a101b;
+    --md-sys-color-on-background: #f0dded;
+    --md-sys-color-surface: #1a101b;
+    --md-sys-color-surface-dim: #1a101b;
+    --md-sys-color-surface-bright: #423542;
+    --md-sys-color-surface-container-lowest: #150b16;
+    --md-sys-color-surface-container-low: #231823;
+    --md-sys-color-surface-container: #271c28;
+    --md-sys-color-surface-container-high: #322632;
+    --md-sys-color-surface-container-highest: #3d313d;
+    --md-sys-color-on-surface: #f0dded;
+    --md-sys-color-surface-variant: #534153;
+    --md-sys-color-on-surface-variant: #d7bfd6;
+    --md-sys-color-inverse-surface: #f0dded;
+    --md-sys-color-inverse-on-surface: #392d39;
+    --md-sys-color-outline: #a08a9f;
+    --md-sys-color-outline-variant: #534153;
+    --md-sys-color-shadow: #000000;
+    --md-sys-color-scrim: #000000;
+    --md-sys-color-surface-tint: #f7acff;
+    --md-sys-color-primary: #f7acff;
+    --md-sys-color-on-primary: #560068;
+    --md-sys-color-primary-container: #c400e8;
+    --md-sys-color-on-primary-container: #ffffff;
+    --md-sys-color-inverse-primary: #a000be;
+    --md-sys-color-secondary: #f7acff;
+    --md-sys-color-on-secondary: #560068;
+    --md-sys-color-secondary-container: #6c0081;
+    --md-sys-color-on-secondary-container: #fabeff;
+    --md-sys-color-tertiary: #ffb1c8;
+    --md-sys-color-on-tertiary: #650033;
+    --md-sys-color-tertiary-container: #e2007a;
+    --md-sys-color-on-tertiary-container: #ffffff;
+    --md-sys-color-error: #ffb4ab;
+    --md-sys-color-on-error: #690005;
+    --md-sys-color-error-container: #93000a;
+    --md-sys-color-on-error-container: #ffdad6;
+  }
+}

package/src/css/themes/purple.css

@@ -0,0 +1,126 @@
+/* Stepbro theme "purple" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+   Generated by scripts/import-themes.mjs; do not edit. */
+[data-mk-theme="purple"] {
+  color-scheme: light;
+  --md-sys-color-background: #fef7ff;
+  --md-sys-color-on-background: #1e1a25;
+  --md-sys-color-surface: #fef7ff;
+  --md-sys-color-surface-dim: #dfd7e7;
+  --md-sys-color-surface-bright: #fef7ff;
+  --md-sys-color-surface-container-lowest: #ffffff;
+  --md-sys-color-surface-container-low: #f9f1ff;
+  --md-sys-color-surface-container: #f3ebfb;
+  --md-sys-color-surface-container-high: #eee5f5;
+  --md-sys-color-surface-container-highest: #e8dff0;
+  --md-sys-color-on-surface: #1e1a25;
+  --md-sys-color-surface-variant: #e9def6;
+  --md-sys-color-on-surface-variant: #4a4456;
+  --md-sys-color-inverse-surface: #332e3b;
+  --md-sys-color-inverse-on-surface: #f6edfe;
+  --md-sys-color-outline: #7b7488;
+  --md-sys-color-outline-variant: #ccc2d9;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #7516fa;
+  --md-sys-color-primary: #5e00d0;
+  --md-sys-color-on-primary: #ffffff;
+  --md-sys-color-primary-container: #853fff;
+  --md-sys-color-on-primary-container: #ffffff;
+  --md-sys-color-inverse-primary: #d2bcff;
+  --md-sys-color-secondary: #6c4ab0;
+  --md-sys-color-on-secondary: #ffffff;
+  --md-sys-color-secondary-container: #bfa0ff;
+  --md-sys-color-on-secondary-container: #300072;
+  --md-sys-color-tertiary: #8b007b;
+  --md-sys-color-on-tertiary: #ffffff;
+  --md-sys-color-tertiary-container: #c322ad;
+  --md-sys-color-on-tertiary-container: #ffffff;
+  --md-sys-color-error: #ba1a1a;
+  --md-sys-color-on-error: #ffffff;
+  --md-sys-color-error-container: #ffdad6;
+  --md-sys-color-on-error-container: #410002;
+}
+[data-mk-theme="purple"][data-mk-mode="dark"],
+[data-mk-mode="dark"] [data-mk-theme="purple"] {
+  color-scheme: dark;
+  --md-sys-color-background: #15121d;
+  --md-sys-color-on-background: #e8dff0;
+  --md-sys-color-surface: #15121d;
+  --md-sys-color-surface-dim: #15121d;
+  --md-sys-color-surface-bright: #3c3744;
+  --md-sys-color-surface-container-lowest: #100c17;
+  --md-sys-color-surface-container-low: #1e1a25;
+  --md-sys-color-surface-container: #221e29;
+  --md-sys-color-surface-container-high: #2c2834;
+  --md-sys-color-surface-container-highest: #37333f;
+  --md-sys-color-on-surface: #e8dff0;
+  --md-sys-color-surface-variant: #4a4456;
+  --md-sys-color-on-surface-variant: #ccc2d9;
+  --md-sys-color-inverse-surface: #e8dff0;
+  --md-sys-color-inverse-on-surface: #332e3b;
+  --md-sys-color-outline: #968da2;
+  --md-sys-color-outline-variant: #4a4456;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #d2bcff;
+  --md-sys-color-primary: #d2bcff;
+  --md-sys-color-on-primary: #3e008e;
+  --md-sys-color-primary-container: #6e00f1;
+  --md-sys-color-on-primary-container: #fffdff;
+  --md-sys-color-inverse-primary: #7516fa;
+  --md-sys-color-secondary: #d2bcff;
+  --md-sys-color-on-secondary: #3c147f;
+  --md-sys-color-secondary-container: #4a268d;
+  --md-sys-color-on-secondary-container: #dcc9ff;
+  --md-sys-color-tertiary: #fface7;
+  --md-sys-color-on-tertiary: #5e0053;
+  --md-sys-color-tertiary-container: #a20090;
+  --md-sys-color-on-tertiary-container: #fffdff;
+  --md-sys-color-error: #ffb4ab;
+  --md-sys-color-on-error: #690005;
+  --md-sys-color-error-container: #93000a;
+  --md-sys-color-on-error-container: #ffdad6;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mk-mode="light"])[data-mk-theme="purple"],
+  :root:not([data-mk-mode="light"]) [data-mk-theme="purple"] {
+    color-scheme: dark;
+    --md-sys-color-background: #15121d;
+    --md-sys-color-on-background: #e8dff0;
+    --md-sys-color-surface: #15121d;
+    --md-sys-color-surface-dim: #15121d;
+    --md-sys-color-surface-bright: #3c3744;
+    --md-sys-color-surface-container-lowest: #100c17;
+    --md-sys-color-surface-container-low: #1e1a25;
+    --md-sys-color-surface-container: #221e29;
+    --md-sys-color-surface-container-high: #2c2834;
+    --md-sys-color-surface-container-highest: #37333f;
+    --md-sys-color-on-surface: #e8dff0;
+    --md-sys-color-surface-variant: #4a4456;
+    --md-sys-color-on-surface-variant: #ccc2d9;
+    --md-sys-color-inverse-surface: #e8dff0;
+    --md-sys-color-inverse-on-surface: #332e3b;
+    --md-sys-color-outline: #968da2;
+    --md-sys-color-outline-variant: #4a4456;
+    --md-sys-color-shadow: #000000;
+    --md-sys-color-scrim: #000000;
+    --md-sys-color-surface-tint: #d2bcff;
+    --md-sys-color-primary: #d2bcff;
+    --md-sys-color-on-primary: #3e008e;
+    --md-sys-color-primary-container: #6e00f1;
+    --md-sys-color-on-primary-container: #fffdff;
+    --md-sys-color-inverse-primary: #7516fa;
+    --md-sys-color-secondary: #d2bcff;
+    --md-sys-color-on-secondary: #3c147f;
+    --md-sys-color-secondary-container: #4a268d;
+    --md-sys-color-on-secondary-container: #dcc9ff;
+    --md-sys-color-tertiary: #fface7;
+    --md-sys-color-on-tertiary: #5e0053;
+    --md-sys-color-tertiary-container: #a20090;
+    --md-sys-color-on-tertiary-container: #fffdff;
+    --md-sys-color-error: #ffb4ab;
+    --md-sys-color-on-error: #690005;
+    --md-sys-color-error-container: #93000a;
+    --md-sys-color-on-error-container: #ffdad6;
+  }
+}

package/src/css/themes/red.css

@@ -0,0 +1,126 @@
+/* Stepbro theme "red" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+   Generated by scripts/import-themes.mjs; do not edit. */
+[data-mk-theme="red"] {
+  color-scheme: light;
+  --md-sys-color-background: #fff8f7;
+  --md-sys-color-on-background: #271716;
+  --md-sys-color-surface: #fff8f7;
+  --md-sys-color-surface-dim: #f1d3d0;
+  --md-sys-color-surface-bright: #fff8f7;
+  --md-sys-color-surface-container-lowest: #ffffff;
+  --md-sys-color-surface-container-low: #fff0ef;
+  --md-sys-color-surface-container: #ffe9e6;
+  --md-sys-color-surface-container-high: #ffe2de;
+  --md-sys-color-surface-container-highest: #fadcd8;
+  --md-sys-color-on-surface: #271716;
+  --md-sys-color-surface-variant: #ffdad6;
+  --md-sys-color-on-surface-variant: #5b403d;
+  --md-sys-color-inverse-surface: #3e2c2a;
+  --md-sys-color-inverse-on-surface: #ffedea;
+  --md-sys-color-outline: #906f6c;
+  --md-sys-color-outline-variant: #e4beb9;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #bb181e;
+  --md-sys-color-primary: #a50012;
+  --md-sys-color-on-primary: #ffffff;
+  --md-sys-color-primary-container: #db3331;
+  --md-sys-color-on-primary-container: #ffffff;
+  --md-sys-color-inverse-primary: #ffb4ac;
+  --md-sys-color-secondary: #a13e38;
+  --md-sys-color-on-secondary: #ffffff;
+  --md-sys-color-secondary-container: #ff958b;
+  --md-sys-color-on-secondary-container: #540407;
+  --md-sys-color-tertiary: #734600;
+  --md-sys-color-on-tertiary: #ffffff;
+  --md-sys-color-tertiary-container: #a66600;
+  --md-sys-color-on-tertiary-container: #ffffff;
+  --md-sys-color-error: #ba1a1a;
+  --md-sys-color-on-error: #ffffff;
+  --md-sys-color-error-container: #ffdad6;
+  --md-sys-color-on-error-container: #410002;
+}
+[data-mk-theme="red"][data-mk-mode="dark"],
+[data-mk-mode="dark"] [data-mk-theme="red"] {
+  color-scheme: dark;
+  --md-sys-color-background: #1e0f0e;
+  --md-sys-color-on-background: #fadcd8;
+  --md-sys-color-surface: #1e0f0e;
+  --md-sys-color-surface-dim: #1e0f0e;
+  --md-sys-color-surface-bright: #483533;
+  --md-sys-color-surface-container-lowest: #180a09;
+  --md-sys-color-surface-container-low: #271716;
+  --md-sys-color-surface-container: #2c1b1a;
+  --md-sys-color-surface-container-high: #372624;
+  --md-sys-color-surface-container-highest: #43302e;
+  --md-sys-color-on-surface: #fadcd8;
+  --md-sys-color-surface-variant: #5b403d;
+  --md-sys-color-on-surface-variant: #e4beb9;
+  --md-sys-color-inverse-surface: #fadcd8;
+  --md-sys-color-inverse-on-surface: #3e2c2a;
+  --md-sys-color-outline: #ab8985;
+  --md-sys-color-outline-variant: #5b403d;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #ffb4ac;
+  --md-sys-color-primary: #ffb4ac;
+  --md-sys-color-on-primary: #690007;
+  --md-sys-color-primary-container: #db3331;
+  --md-sys-color-on-primary-container: #ffffff;
+  --md-sys-color-inverse-primary: #bb181e;
+  --md-sys-color-secondary: #ffb4ac;
+  --md-sys-color-on-secondary: #620f0f;
+  --md-sys-color-secondary-container: #78201d;
+  --md-sys-color-on-secondary-container: #ffc8c2;
+  --md-sys-color-tertiary: #ffb865;
+  --md-sys-color-on-tertiary: #482a00;
+  --md-sys-color-tertiary-container: #a66600;
+  --md-sys-color-on-tertiary-container: #ffffff;
+  --md-sys-color-error: #ffb4ab;
+  --md-sys-color-on-error: #690005;
+  --md-sys-color-error-container: #93000a;
+  --md-sys-color-on-error-container: #ffdad6;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mk-mode="light"])[data-mk-theme="red"],
+  :root:not([data-mk-mode="light"]) [data-mk-theme="red"] {
+    color-scheme: dark;
+    --md-sys-color-background: #1e0f0e;
+    --md-sys-color-on-background: #fadcd8;
+    --md-sys-color-surface: #1e0f0e;
+    --md-sys-color-surface-dim: #1e0f0e;
+    --md-sys-color-surface-bright: #483533;
+    --md-sys-color-surface-container-lowest: #180a09;
+    --md-sys-color-surface-container-low: #271716;
+    --md-sys-color-surface-container: #2c1b1a;
+    --md-sys-color-surface-container-high: #372624;
+    --md-sys-color-surface-container-highest: #43302e;
+    --md-sys-color-on-surface: #fadcd8;
+    --md-sys-color-surface-variant: #5b403d;
+    --md-sys-color-on-surface-variant: #e4beb9;
+    --md-sys-color-inverse-surface: #fadcd8;
+    --md-sys-color-inverse-on-surface: #3e2c2a;
+    --md-sys-color-outline: #ab8985;
+    --md-sys-color-outline-variant: #5b403d;
+    --md-sys-color-shadow: #000000;
+    --md-sys-color-scrim: #000000;
+    --md-sys-color-surface-tint: #ffb4ac;
+    --md-sys-color-primary: #ffb4ac;
+    --md-sys-color-on-primary: #690007;
+    --md-sys-color-primary-container: #db3331;
+    --md-sys-color-on-primary-container: #ffffff;
+    --md-sys-color-inverse-primary: #bb181e;
+    --md-sys-color-secondary: #ffb4ac;
+    --md-sys-color-on-secondary: #620f0f;
+    --md-sys-color-secondary-container: #78201d;
+    --md-sys-color-on-secondary-container: #ffc8c2;
+    --md-sys-color-tertiary: #ffb865;
+    --md-sys-color-on-tertiary: #482a00;
+    --md-sys-color-tertiary-container: #a66600;
+    --md-sys-color-on-tertiary-container: #ffffff;
+    --md-sys-color-error: #ffb4ab;
+    --md-sys-color-on-error: #690005;
+    --md-sys-color-error-container: #93000a;
+    --md-sys-color-on-error-container: #ffdad6;
+  }
+}

package/src/css/themes/super-blue.css

@@ -0,0 +1,126 @@
+/* Stepbro theme "super-blue" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+   Generated by scripts/import-themes.mjs; do not edit. */
+[data-mk-theme="super-blue"] {
+  color-scheme: light;
+  --md-sys-color-background: #fbf8ff;
+  --md-sys-color-on-background: #1a1b24;
+  --md-sys-color-surface: #fbf8ff;
+  --md-sys-color-surface-dim: #dad9e6;
+  --md-sys-color-surface-bright: #fbf8ff;
+  --md-sys-color-surface-container-lowest: #ffffff;
+  --md-sys-color-surface-container-low: #f4f2ff;
+  --md-sys-color-surface-container: #eeecfa;
+  --md-sys-color-surface-container-high: #e8e7f4;
+  --md-sys-color-surface-container-highest: #e2e1ef;
+  --md-sys-color-on-surface: #1a1b24;
+  --md-sys-color-surface-variant: #e1e1f5;
+  --md-sys-color-on-surface-variant: #444656;
+  --md-sys-color-inverse-surface: #2f303a;
+  --md-sys-color-inverse-on-surface: #f1effd;
+  --md-sys-color-outline: #757688;
+  --md-sys-color-outline-variant: #c5c5d9;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #2d46f0;
+  --md-sys-color-primary: #0028db;
+  --md-sys-color-on-primary: #ffffff;
+  --md-sys-color-primary-container: #4058ff;
+  --md-sys-color-on-primary-container: #ffffff;
+  --md-sys-color-inverse-primary: #bcc2ff;
+  --md-sys-color-secondary: #4e58a3;
+  --md-sys-color-on-secondary: #ffffff;
+  --md-sys-color-secondary-container: #afb8ff;
+  --md-sys-color-on-secondary-container: #1c2771;
+  --md-sys-color-tertiary: #7f0096;
+  --md-sys-color-on-tertiary: #ffffff;
+  --md-sys-color-tertiary-container: #ad34c4;
+  --md-sys-color-on-tertiary-container: #ffffff;
+  --md-sys-color-error: #ba1a1a;
+  --md-sys-color-on-error: #ffffff;
+  --md-sys-color-error-container: #ffdad6;
+  --md-sys-color-on-error-container: #410002;
+}
+[data-mk-theme="super-blue"][data-mk-mode="dark"],
+[data-mk-mode="dark"] [data-mk-theme="super-blue"] {
+  color-scheme: dark;
+  --md-sys-color-background: #12131c;
+  --md-sys-color-on-background: #e2e1ef;
+  --md-sys-color-surface: #12131c;
+  --md-sys-color-surface-dim: #12131c;
+  --md-sys-color-surface-bright: #383843;
+  --md-sys-color-surface-container-lowest: #0c0e17;
+  --md-sys-color-surface-container-low: #1a1b24;
+  --md-sys-color-surface-container: #1e1f29;
+  --md-sys-color-surface-container-high: #282933;
+  --md-sys-color-surface-container-highest: #33343e;
+  --md-sys-color-on-surface: #e2e1ef;
+  --md-sys-color-surface-variant: #444656;
+  --md-sys-color-on-surface-variant: #c5c5d9;
+  --md-sys-color-inverse-surface: #e2e1ef;
+  --md-sys-color-inverse-on-surface: #2f303a;
+  --md-sys-color-outline: #8f8fa2;
+  --md-sys-color-outline-variant: #444656;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #bcc2ff;
+  --md-sys-color-primary: #bcc2ff;
+  --md-sys-color-on-primary: #001999;
+  --md-sys-color-primary-container: #344df6;
+  --md-sys-color-on-primary-container: #ffffff;
+  --md-sys-color-inverse-primary: #2d46f0;
+  --md-sys-color-secondary: #bcc2ff;
+  --md-sys-color-on-secondary: #1d2872;
+  --md-sys-color-secondary-container: #2c3680;
+  --md-sys-color-on-secondary-container: #c9ceff;
+  --md-sys-color-tertiary: #f8acff;
+  --md-sys-color-on-tertiary: #570067;
+  --md-sys-color-tertiary-container: #a329bb;
+  --md-sys-color-on-tertiary-container: #ffffff;
+  --md-sys-color-error: #ffb4ab;
+  --md-sys-color-on-error: #690005;
+  --md-sys-color-error-container: #93000a;
+  --md-sys-color-on-error-container: #ffdad6;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mk-mode="light"])[data-mk-theme="super-blue"],
+  :root:not([data-mk-mode="light"]) [data-mk-theme="super-blue"] {
+    color-scheme: dark;
+    --md-sys-color-background: #12131c;
+    --md-sys-color-on-background: #e2e1ef;
+    --md-sys-color-surface: #12131c;
+    --md-sys-color-surface-dim: #12131c;
+    --md-sys-color-surface-bright: #383843;
+    --md-sys-color-surface-container-lowest: #0c0e17;
+    --md-sys-color-surface-container-low: #1a1b24;
+    --md-sys-color-surface-container: #1e1f29;
+    --md-sys-color-surface-container-high: #282933;
+    --md-sys-color-surface-container-highest: #33343e;
+    --md-sys-color-on-surface: #e2e1ef;
+    --md-sys-color-surface-variant: #444656;
+    --md-sys-color-on-surface-variant: #c5c5d9;
+    --md-sys-color-inverse-surface: #e2e1ef;
+    --md-sys-color-inverse-on-surface: #2f303a;
+    --md-sys-color-outline: #8f8fa2;
+    --md-sys-color-outline-variant: #444656;
+    --md-sys-color-shadow: #000000;
+    --md-sys-color-scrim: #000000;
+    --md-sys-color-surface-tint: #bcc2ff;
+    --md-sys-color-primary: #bcc2ff;
+    --md-sys-color-on-primary: #001999;
+    --md-sys-color-primary-container: #344df6;
+    --md-sys-color-on-primary-container: #ffffff;
+    --md-sys-color-inverse-primary: #2d46f0;
+    --md-sys-color-secondary: #bcc2ff;
+    --md-sys-color-on-secondary: #1d2872;
+    --md-sys-color-secondary-container: #2c3680;
+    --md-sys-color-on-secondary-container: #c9ceff;
+    --md-sys-color-tertiary: #f8acff;
+    --md-sys-color-on-tertiary: #570067;
+    --md-sys-color-tertiary-container: #a329bb;
+    --md-sys-color-on-tertiary-container: #ffffff;
+    --md-sys-color-error: #ffb4ab;
+    --md-sys-color-on-error: #690005;
+    --md-sys-color-error-container: #93000a;
+    --md-sys-color-on-error-container: #ffdad6;
+  }
+}

package/src/css/tokens.css

@@ -0,0 +1,182 @@
+/* motion-kit tokens — override any of them on :root, on a [data-mk-theme] or on a component. */
+:root {
+  /* spencergabor.com elastic curves */
+  --mk-ease-elastic: linear(0, 0.5737 7.6%, 0.8382 11.87%, 0.9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, 0.9995 46.99%, 0.9872 51.63%, 0.9842 58.77%, 1.0011 81.26%, 1);
+  --mk-ease-elastic-hover: linear(0, 0.2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, 0.941 24.01%, 0.8912 25.91%, 0.8694 27.84%, 0.8698 29.21%, 0.8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, 0.9961 53.26%, 0.9839 57.54%, 0.9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, 0.9981 86.66%, 1);
+
+  /* Stepbro curves. The signature is a multi-point path: CSS gets Stepbro's own linear() sampling of it. */
+  --mk-ease-signature: linear(0 0%, .017 2.5%, .037 5%, .061 7.5%, .091 10%, .13 12.5%, .184 15%, .275 17.5%, .562 20%, .733 22.5%, .803 25%, .848 27.5%, .88 30%, .902 32.5%, .942 40%, .97 50%, .985 60%, .993 70%, .998 80%, 1 90%, 1 100%);
+  /* Stepbro's backdrop tint uses the same curve. */
+  --mk-ease-tint: var(--mk-ease-signature);
+  --mk-ease-flow: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --mk-ease-close: cubic-bezier(0.56, 0.27, 0, 1);
+  --mk-ease-blur-away: cubic-bezier(0.37, 0.35, 0, 1);
+  --mk-ease-nav-radius: cubic-bezier(0.38, 0.49, 0, 2);
+  --mk-ease-nav-move: cubic-bezier(0.38, 0.49, 0, 1.2);
+  --mk-ease-swatch: cubic-bezier(0.38, 0.49, 0, 1.5);
+  --mk-ease-swatch-light: cubic-bezier(0.11, 1, 0, 1);
+  --mk-ease-slot: cubic-bezier(0.34, 1.56, 0.64, 1);
+  /* Dousan Miao / Siena Film Foundation curves */
+  --mk-ease-glass: cubic-bezier(0.25, 1, 0.5, 1);
+  --mk-ease-sheet: cubic-bezier(0.16, 1, 0.3, 1);
+  --mk-ease-siena: cubic-bezier(0.19, 1, 0.22, 1);
+  --mk-ease-quint: cubic-bezier(0.23, 1, 0.32, 1);
+  /* Dousan's springs (Motion 400/10 press, 260/18 success), sampled by springLinear(); a test keeps them in sync. */
+  --mk-ease-press: linear(0, 0.1957, 0.6333, 1.0817, 1.3717, 1.4412, 1.3274, 1.1249, 0.934, 0.8221, 0.808, 0.8691, 0.9612, 1.0413, 1.0833, 1.0824, 1.0513, 1.01, 0.9769, 0.9618, 0.9651, 0.9804, 0.9986, 1.0121, 1.0173, 1.0146, 1.0072, 0.9993, 0.9939, 0.9923, 0.994, 0.9974, 1.0008, 1.003, 1.0034, 1.0024, 1.0008, 0.9994, 0.9986, 0.9985, 1);
+  --mk-dur-press: 1.346s;
+  --mk-ease-success: linear(0, 0.0437, 0.1533, 0.3004, 0.4617, 0.6197, 0.7624, 0.8825, 0.9767, 1.0451, 1.0895, 1.1133, 1.1208, 1.1161, 1.1032, 1.0856, 1.0662, 1.047, 1.0296, 1.0149, 1.0034, 0.9949, 0.9894, 0.9864, 0.9854, 0.9859, 0.9874, 0.9895, 0.9919, 0.9942, 0.9963, 0.9981, 0.9995, 1.0006, 1.0012, 1.0016, 1.0018, 1.0017, 1.0015, 1.0013, 1);
+  --mk-dur-success: 0.779s;
+  --mk-dur-fast: 0.25s;
+  --mk-dur: 0.45s;
+  --mk-dur-slow: 0.7s;
+
+  /* Layered shadow */
+  --mk-shadow: 0 9px 21px rgb(0 0 0 / 0.1), 0 38px 38px rgb(0 0 0 / 0.09), 0 85px 51px rgb(0 0 0 / 0.05);
+  --mk-shadow-soft: 0 9px 21px rgb(0 0 0 / 0.05), 0 38px 38px rgb(0 0 0 / 0.045), 0 85px 51px rgb(0 0 0 / 0.025);
+
+  /* Shape: Stepbro's large capsules */
+  --mk-radius-card: 1rem;
+  --mk-radius-xs: 8px;
+  --mk-radius-sm: 12px;
+  --mk-radius-md: 16px;
+  --mk-radius-lg: 24px;
+  --mk-radius-xl: 32px;
+  --mk-radius-2xl: 40px;
+  --mk-radius-3xl: 48px;
+  --mk-radius-4xl: 64px;
+  --mk-radius-full: 999px;
+  --mk-radius-bubble: var(--mk-radius-xl);
+  --mk-radius-dialog: var(--mk-radius-2xl);
+  --mk-radius-chat: var(--mk-radius-3xl);
+  --mk-radius-dock: var(--mk-radius-4xl);
+
+  /* Spacing, 4 px steps. Stepbro's navigation breakpoint is 680px (media queries use it literally). */
+  --mk-space-1: 4px;
+  --mk-space-2: 8px;
+  --mk-space-3: 12px;
+  --mk-space-4: 16px;
+  --mk-space-5: 20px;
+  --mk-space-6: 24px;
+  --mk-space-7: 28px;
+  --mk-space-8: 32px;
+  --mk-space-9: 36px;
+  --mk-space-10: 40px;
+  --mk-space-11: 44px;
+  --mk-space-12: 48px;
+  --mk-space-13: 52px;
+  --mk-space-14: 56px;
+  --mk-space-15: 60px;
+  --mk-space-16: 64px;
+  --mk-breakpoint: 680px;
+
+  /* Type: DM Sans, Geist Mono, Material Symbols Rounded (css/fonts.css loads them). */
+  --mk-font: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
+  --mk-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+  /* Material 3 type scale with Stepbro's values (its bundle writes weights as "400px"; here they are numbers). */
+  --md-sys-typescale-display-large-font: var(--mk-font);
+  --md-sys-typescale-display-large-size: 57px;
+  --md-sys-typescale-display-large-line-height: 64px;
+  --md-sys-typescale-display-large-weight: 400;
+  --md-sys-typescale-display-large-tracking: -0.25px;
+  --md-sys-typescale-display-medium-font: var(--mk-font);
+  --md-sys-typescale-display-medium-size: 45px;
+  --md-sys-typescale-display-medium-line-height: 52px;
+  --md-sys-typescale-display-medium-weight: 400;
+  --md-sys-typescale-display-medium-tracking: 0px;
+  --md-sys-typescale-display-small-font: var(--mk-font);
+  --md-sys-typescale-display-small-size: 36px;
+  --md-sys-typescale-display-small-line-height: 44px;
+  --md-sys-typescale-display-small-weight: 400;
+  --md-sys-typescale-display-small-tracking: 0px;
+  --md-sys-typescale-headline-large-font: var(--mk-font);
+  --md-sys-typescale-headline-large-size: 32px;
+  --md-sys-typescale-headline-large-line-height: 40px;
+  --md-sys-typescale-headline-large-weight: 400;
+  --md-sys-typescale-headline-large-tracking: 0px;
+  --md-sys-typescale-headline-medium-font: var(--mk-font);
+  --md-sys-typescale-headline-medium-size: 28px;
+  --md-sys-typescale-headline-medium-line-height: 36px;
+  --md-sys-typescale-headline-medium-weight: 400;
+  --md-sys-typescale-headline-medium-tracking: 0px;
+  --md-sys-typescale-headline-small-font: var(--mk-font);
+  --md-sys-typescale-headline-small-size: 24px;
+  --md-sys-typescale-headline-small-line-height: 32px;
+  --md-sys-typescale-headline-small-weight: 400;
+  --md-sys-typescale-headline-small-tracking: 0px;
+  --md-sys-typescale-title-large-font: var(--mk-font);
+  --md-sys-typescale-title-large-size: 22px;
+  --md-sys-typescale-title-large-line-height: 28px;
+  --md-sys-typescale-title-large-weight: 400;
+  --md-sys-typescale-title-large-tracking: 0px;
+  --md-sys-typescale-title-medium-font: var(--mk-font);
+  --md-sys-typescale-title-medium-size: 16px;
+  --md-sys-typescale-title-medium-line-height: 24px;
+  --md-sys-typescale-title-medium-weight: 500;
+  --md-sys-typescale-title-medium-tracking: 0.15px;
+  --md-sys-typescale-title-small-font: var(--mk-font);
+  --md-sys-typescale-title-small-size: 14px;
+  --md-sys-typescale-title-small-line-height: 20px;
+  --md-sys-typescale-title-small-weight: 500;
+  --md-sys-typescale-title-small-tracking: 0.1px;
+  --md-sys-typescale-body-large-font: var(--mk-font);
+  --md-sys-typescale-body-large-size: 16px;
+  --md-sys-typescale-body-large-line-height: 24px;
+  --md-sys-typescale-body-large-weight: 400;
+  --md-sys-typescale-body-large-tracking: 0.5px;
+  --md-sys-typescale-body-medium-font: var(--mk-font);
+  --md-sys-typescale-body-medium-size: 14px;
+  --md-sys-typescale-body-medium-line-height: 20px;
+  --md-sys-typescale-body-medium-weight: 400;
+  --md-sys-typescale-body-medium-tracking: 0.25px;
+  --md-sys-typescale-body-small-font: var(--mk-font);
+  --md-sys-typescale-body-small-size: 12px;
+  --md-sys-typescale-body-small-line-height: 16px;
+  --md-sys-typescale-body-small-weight: 400;
+  --md-sys-typescale-body-small-tracking: 0.4px;
+  --md-sys-typescale-label-large-font: var(--mk-font);
+  --md-sys-typescale-label-large-size: 14px;
+  --md-sys-typescale-label-large-line-height: 20px;
+  --md-sys-typescale-label-large-weight: 500;
+  --md-sys-typescale-label-large-tracking: 0.1px;
+  --md-sys-typescale-label-medium-font: var(--mk-font);
+  --md-sys-typescale-label-medium-size: 12px;
+  --md-sys-typescale-label-medium-line-height: 16px;
+  --md-sys-typescale-label-medium-weight: 500;
+  --md-sys-typescale-label-medium-tracking: 0.5px;
+  --md-sys-typescale-label-small-font: var(--mk-font);
+  --md-sys-typescale-label-small-size: 11px;
+  --md-sys-typescale-label-small-line-height: 16px;
+  --md-sys-typescale-label-small-weight: 500;
+  --md-sys-typescale-label-small-tracking: 0.5px;
+}
+
+/*
+ * Semantic colour layer over the Material 3 roles. Declared on every themed
+ * element too, so a nested [data-mk-theme] recomputes it from its own roles.
+ */
+:root,
+[data-mk-theme] {
+  --mk-bg: var(--md-sys-color-background);
+  --mk-surface: var(--md-sys-color-surface);
+  --mk-surface-1: var(--md-sys-color-surface-container-lowest);
+  --mk-surface-2: var(--md-sys-color-surface-container-low);
+  --mk-surface-3: var(--md-sys-color-surface-container);
+  --mk-surface-4: var(--md-sys-color-surface-container-high);
+  --mk-surface-5: var(--md-sys-color-surface-container-highest);
+  --mk-text: var(--md-sys-color-on-surface);
+  --mk-muted: var(--md-sys-color-on-surface-variant);
+  --mk-accent: var(--md-sys-color-primary);
+  --mk-on-accent: var(--md-sys-color-on-primary);
+  --mk-accent-soft: var(--md-sys-color-primary-container);
+  --mk-on-accent-soft: var(--md-sys-color-on-primary-container);
+  --mk-secondary-soft: var(--md-sys-color-secondary-container);
+  --mk-on-secondary-soft: var(--md-sys-color-on-secondary-container);
+  --mk-outline: var(--md-sys-color-outline);
+  --mk-outline-soft: var(--md-sys-color-outline-variant);
+  --mk-error: var(--md-sys-color-error);
+  --mk-on-error: var(--md-sys-color-on-error);
+  --mk-error-soft: var(--md-sys-color-error-container);
+  --mk-on-error-soft: var(--md-sys-color-on-error-container);
+  --mk-scrim: var(--md-sys-color-scrim);
+  --mk-shadow-color: var(--md-sys-color-shadow);
+}