@tale-ui/core 1.1.2

package/src/themes/_color-modes.css

@@ -0,0 +1,165 @@
+@media (prefers-reduced-motion: reduce) {
+    *,
+    ::before,
+    ::after {
+        animation-delay: -1ms !important;
+        animation-duration: 1ms !important;
+        animation-iteration-count: 1 !important;
+        background-attachment: initial !important;
+        scroll-behavior: auto !important;
+        transition-duration: 0s !important;
+        transition-delay: 0s !important;
+    }
+}
+
+/*
+    Light mode — default fallback when no explicit dark is forced.
+    Selector matches: no attribute, OR attribute is anything except "dark".
+    Uses :where() on html descendant part to keep specificity at (0,1,0) so
+    scoped .dark children can override with their higher (0,2,0) rule below.
+*/
+html:not([data-color-mode="dark"]),
+:where(html:not([data-color-mode="dark"])) :is([class*='color-'], [class*='neutral-']),
+.light,
+.light :is([class*='color-'], [class*='neutral-']) {
+    --neutral: var(--neutral-60);
+    --neutral-5: var(--neutral-default-5);
+    --neutral-10: var(--neutral-default-10);
+    --neutral-12: var(--neutral-default-12);
+    --neutral-14: var(--neutral-default-14);
+    --neutral-16: var(--neutral-default-16);
+    --neutral-18: var(--neutral-default-18);
+    --neutral-20: var(--neutral-default-20);
+    --neutral-22: var(--neutral-default-22);
+    --neutral-24: var(--neutral-default-24);
+    --neutral-26: var(--neutral-default-26);
+    --neutral-28: var(--neutral-default-28);
+    --neutral-30: var(--neutral-default-30);
+    --neutral-40: var(--neutral-default-40);
+    --neutral-50: var(--neutral-default-50);
+    --neutral-60: var(--neutral-default-60);
+    --neutral-70: var(--neutral-default-70);
+    --neutral-80: var(--neutral-default-80);
+    --neutral-82: var(--neutral-default-82);
+    --neutral-84: var(--neutral-default-84);
+    --neutral-86: var(--neutral-default-86);
+    --neutral-88: var(--neutral-default-88);
+    --neutral-90: var(--neutral-default-90);
+    --neutral-92: var(--neutral-default-92);
+    --neutral-94: var(--neutral-default-94);
+    --neutral-96: var(--neutral-default-96);
+    --neutral-98: var(--neutral-default-98);
+    --neutral-100: var(--neutral-default-100);
+    --display-color: var(--neutral-default-90);
+    --text-color: var(--neutral-default-90);
+    --mono-color: var(--neutral-default-90);
+    color: var(--text-color);
+}
+
+/*
+    OS dark mode — overrides the light fallback above via later cascade position.
+    Selector: no attribute, OR attribute is anything except "light" (i.e. absent or "dark").
+    data-color-mode="light" silences this block entirely for forced-light pages.
+*/
+@media (prefers-color-scheme: dark) {
+    html:not([data-color-mode="light"]),
+    :where(html:not([data-color-mode="light"])) :is([class*='color-'], [class*='neutral-']) {
+        --neutral: var(--neutral-60);
+        --neutral-5: black;
+        --neutral-10: var(--neutral-default-100);
+        --neutral-12: var(--neutral-default-98);
+        --neutral-14: var(--neutral-default-96);
+        --neutral-16: var(--neutral-default-94);
+        --neutral-18: var(--neutral-default-92);
+        --neutral-20: var(--neutral-default-90);
+        --neutral-22: var(--neutral-default-88);
+        --neutral-24: var(--neutral-default-86);
+        --neutral-26: var(--neutral-default-84);
+        --neutral-28: var(--neutral-default-82);
+        --neutral-30: var(--neutral-default-80);
+        --neutral-40: var(--neutral-default-70);
+        --neutral-50: var(--neutral-default-60);
+        --neutral-60: var(--neutral-default-50);
+        --neutral-70: var(--neutral-default-40);
+        --neutral-80: var(--neutral-default-30);
+        --neutral-82: var(--neutral-default-28);
+        --neutral-84: var(--neutral-default-26);
+        --neutral-86: var(--neutral-default-24);
+        --neutral-88: var(--neutral-default-22);
+        --neutral-90: var(--neutral-default-20);
+        --neutral-92: var(--neutral-default-18);
+        --neutral-94: var(--neutral-default-16);
+        --neutral-96: var(--neutral-default-14);
+        --neutral-98: var(--neutral-default-12);
+        --neutral-100: var(--neutral-default-10);
+        --display-color: var(--neutral-90);
+        --text-color: var(--neutral-90);
+        --mono-color: var(--neutral-90);
+        color: var(--text-color);
+        --color-5: var(--brand-100);
+        --color-10: var(--brand-90);
+        --color-20: var(--brand-80);
+        --color-30: var(--brand-70);
+        --color-40: var(--brand-60);
+        --color-50: var(--brand-50);
+        --color-60: var(--brand-40);
+        --color-70: var(--brand-30);
+        --color-80: var(--brand-20);
+        --color-90: var(--brand-10);
+        --color-100: var(--brand-5);
+    }
+}
+
+/*
+    Explicit dark override — highest priority, overrides OS preference.
+    .dark and .dark descendants use specificity (0,2,0) which beats the
+    light fallback descendant reset at (0,1,0).
+*/
+html[data-color-mode="dark"],
+:where(html[data-color-mode="dark"]) :is([class*='color-'], [class*='neutral-']),
+.dark,
+.dark :is([class*='color-'], [class*='neutral-']) {
+    --neutral: var(--neutral-60);
+    --neutral-5: black;
+    --neutral-10: var(--neutral-default-100);
+    --neutral-12: var(--neutral-default-98);
+    --neutral-14: var(--neutral-default-96);
+    --neutral-16: var(--neutral-default-94);
+    --neutral-18: var(--neutral-default-92);
+    --neutral-20: var(--neutral-default-90);
+    --neutral-22: var(--neutral-default-88);
+    --neutral-24: var(--neutral-default-86);
+    --neutral-26: var(--neutral-default-84);
+    --neutral-28: var(--neutral-default-82);
+    --neutral-30: var(--neutral-default-80);
+    --neutral-40: var(--neutral-default-70);
+    --neutral-50: var(--neutral-default-60);
+    --neutral-60: var(--neutral-default-50);
+    --neutral-70: var(--neutral-default-40);
+    --neutral-80: var(--neutral-default-30);
+    --neutral-82: var(--neutral-default-28);
+    --neutral-84: var(--neutral-default-26);
+    --neutral-86: var(--neutral-default-24);
+    --neutral-88: var(--neutral-default-22);
+    --neutral-90: var(--neutral-default-20);
+    --neutral-92: var(--neutral-default-18);
+    --neutral-94: var(--neutral-default-16);
+    --neutral-96: var(--neutral-default-14);
+    --neutral-98: var(--neutral-default-12);
+    --neutral-100: var(--neutral-default-10);
+    --display-color: var(--neutral-90);
+    --text-color: var(--neutral-90);
+    --mono-color: var(--neutral-90);
+    color: var(--text-color);
+    --color-5: var(--brand-100);
+    --color-10: var(--brand-90);
+    --color-20: var(--brand-80);
+    --color-30: var(--brand-70);
+    --color-40: var(--brand-60);
+    --color-50: var(--brand-50);
+    --color-60: var(--brand-40);
+    --color-70: var(--brand-30);
+    --color-80: var(--brand-20);
+    --color-90: var(--brand-10);
+    --color-100: var(--brand-5);
+}

package/src/themes/_color-themes.css

@@ -0,0 +1,208 @@
+.color-red {
+    --brand-5: var(--red-5);
+    --brand-10: var(--red-10);
+    --brand-20: var(--red-20);
+    --brand-30: var(--red-30);
+    --brand-40: var(--red-40);
+    --brand-50: var(--red-50);
+    --brand-60: var(--red-60);
+    --brand-70: var(--red-70);
+    --brand-80: var(--red-80);
+    --brand-90: var(--red-90);
+    --brand-100: var(--red-100);
+}
+.color-orange {
+    --brand-5: var(--orange-5);
+    --brand-10: var(--orange-10);
+    --brand-20: var(--orange-20);
+    --brand-30: var(--orange-30);
+    --brand-40: var(--orange-40);
+    --brand-50: var(--orange-50);
+    --brand-60: var(--orange-60);
+    --brand-70: var(--orange-70);
+    --brand-80: var(--orange-80);
+    --brand-90: var(--orange-90);
+    --brand-100: var(--orange-100);
+}
+.color-amber {
+    --brand-5: var(--amber-5);
+    --brand-10: var(--amber-10);
+    --brand-20: var(--amber-20);
+    --brand-30: var(--amber-30);
+    --brand-40: var(--amber-40);
+    --brand-50: var(--amber-50);
+    --brand-60: var(--amber-60);
+    --brand-70: var(--amber-70);
+    --brand-80: var(--amber-80);
+    --brand-90: var(--amber-90);
+    --brand-100: var(--amber-100);
+}
+.color-yellow {
+    --brand-5: var(--yellow-5);
+    --brand-10: var(--yellow-10);
+    --brand-20: var(--yellow-20);
+    --brand-30: var(--yellow-30);
+    --brand-40: var(--yellow-40);
+    --brand-50: var(--yellow-50);
+    --brand-60: var(--yellow-60);
+    --brand-70: var(--yellow-70);
+    --brand-80: var(--yellow-80);
+    --brand-90: var(--yellow-90);
+    --brand-100: var(--yellow-100);
+}
+.color-lime {
+    --brand-5: var(--lime-5);
+    --brand-10: var(--lime-10);
+    --brand-20: var(--lime-20);
+    --brand-30: var(--lime-30);
+    --brand-40: var(--lime-40);
+    --brand-50: var(--lime-50);
+    --brand-60: var(--lime-60);
+    --brand-70: var(--lime-70);
+    --brand-80: var(--lime-80);
+    --brand-90: var(--lime-90);
+    --brand-100: var(--lime-100);
+}
+.color-green {
+    --brand-5: var(--green-5);
+    --brand-10: var(--green-10);
+    --brand-20: var(--green-20);
+    --brand-30: var(--green-30);
+    --brand-40: var(--green-40);
+    --brand-50: var(--green-50);
+    --brand-60: var(--green-60);
+    --brand-70: var(--green-70);
+    --brand-80: var(--green-80);
+    --brand-90: var(--green-90);
+    --brand-100: var(--green-100);
+}
+.color-emerald {
+    --brand-5: var(--emerald-5);
+    --brand-10: var(--emerald-10);
+    --brand-20: var(--emerald-20);
+    --brand-30: var(--emerald-30);
+    --brand-40: var(--emerald-40);
+    --brand-50: var(--emerald-50);
+    --brand-60: var(--emerald-60);
+    --brand-70: var(--emerald-70);
+    --brand-80: var(--emerald-80);
+    --brand-90: var(--emerald-90);
+    --brand-100: var(--emerald-100);
+}
+.color-teal {
+    --brand-5: var(--teal-5);
+    --brand-10: var(--teal-10);
+    --brand-20: var(--teal-20);
+    --brand-30: var(--teal-30);
+    --brand-40: var(--teal-40);
+    --brand-50: var(--teal-50);
+    --brand-60: var(--teal-60);
+    --brand-70: var(--teal-70);
+    --brand-80: var(--teal-80);
+    --brand-90: var(--teal-90);
+    --brand-100: var(--teal-100);
+}
+.color-cyan {
+    --brand-5: var(--cyan-5);
+    --brand-10: var(--cyan-10);
+    --brand-20: var(--cyan-20);
+    --brand-30: var(--cyan-30);
+    --brand-40: var(--cyan-40);
+    --brand-50: var(--cyan-50);
+    --brand-60: var(--cyan-60);
+    --brand-70: var(--cyan-70);
+    --brand-80: var(--cyan-80);
+    --brand-90: var(--cyan-90);
+    --brand-100: var(--cyan-100);
+}
+.color-sky {
+    --brand-5: var(--sky-5);
+    --brand-10: var(--sky-10);
+    --brand-20: var(--sky-20);
+    --brand-30: var(--sky-30);
+    --brand-40: var(--sky-40);
+    --brand-50: var(--sky-50);
+    --brand-60: var(--sky-60);
+    --brand-70: var(--sky-70);
+    --brand-80: var(--sky-80);
+    --brand-90: var(--sky-90);
+    --brand-100: var(--sky-100);
+}
+.color-indigo {
+    --brand-5: var(--indigo-5);
+    --brand-10: var(--indigo-10);
+    --brand-20: var(--indigo-20);
+    --brand-30: var(--indigo-30);
+    --brand-40: var(--indigo-40);
+    --brand-50: var(--indigo-50);
+    --brand-60: var(--indigo-60);
+    --brand-70: var(--indigo-70);
+    --brand-80: var(--indigo-80);
+    --brand-90: var(--indigo-90);
+    --brand-100: var(--indigo-100);
+}
+.color-violet {
+    --brand-5: var(--violet-5);
+    --brand-10: var(--violet-10);
+    --brand-20: var(--violet-20);
+    --brand-30: var(--violet-30);
+    --brand-40: var(--violet-40);
+    --brand-50: var(--violet-50);
+    --brand-60: var(--violet-60);
+    --brand-70: var(--violet-70);
+    --brand-80: var(--violet-80);
+    --brand-90: var(--violet-90);
+    --brand-100: var(--violet-100);
+}
+.color-purple {
+    --brand-5: var(--purple-5);
+    --brand-10: var(--purple-10);
+    --brand-20: var(--purple-20);
+    --brand-30: var(--purple-30);
+    --brand-40: var(--purple-40);
+    --brand-50: var(--purple-50);
+    --brand-60: var(--purple-60);
+    --brand-70: var(--purple-70);
+    --brand-80: var(--purple-80);
+    --brand-90: var(--purple-90);
+    --brand-100: var(--purple-100);
+}
+.color-fuchsia {
+    --brand-5: var(--fuchsia-5);
+    --brand-10: var(--fuchsia-10);
+    --brand-20: var(--fuchsia-20);
+    --brand-30: var(--fuchsia-30);
+    --brand-40: var(--fuchsia-40);
+    --brand-50: var(--fuchsia-50);
+    --brand-60: var(--fuchsia-60);
+    --brand-70: var(--fuchsia-70);
+    --brand-80: var(--fuchsia-80);
+    --brand-90: var(--fuchsia-90);
+    --brand-100: var(--fuchsia-100);
+}
+.color-pink {
+    --brand-5: var(--pink-5);
+    --brand-10: var(--pink-10);
+    --brand-20: var(--pink-20);
+    --brand-30: var(--pink-30);
+    --brand-40: var(--pink-40);
+    --brand-50: var(--pink-50);
+    --brand-60: var(--pink-60);
+    --brand-70: var(--pink-70);
+    --brand-80: var(--pink-80);
+    --brand-90: var(--pink-90);
+    --brand-100: var(--pink-100);
+}
+.color-rose {
+    --brand-5: var(--rose-5);
+    --brand-10: var(--rose-10);
+    --brand-20: var(--rose-20);
+    --brand-30: var(--rose-30);
+    --brand-40: var(--rose-40);
+    --brand-50: var(--rose-50);
+    --brand-60: var(--rose-60);
+    --brand-70: var(--rose-70);
+    --brand-80: var(--rose-80);
+    --brand-90: var(--rose-90);
+    --brand-100: var(--rose-100);
+}

package/src/themes/_neutral-themes.css

@@ -0,0 +1,198 @@
+.neutral-cool {
+    --neutral-default: var(--neutral-default-60);
+    --neutral-default-5: var(--neutral-cool-5);
+    --neutral-default-10: var(--neutral-cool-10);
+    --neutral-default-12: var(--neutral-cool-12);
+    --neutral-default-14: var(--neutral-cool-14);
+    --neutral-default-16: var(--neutral-cool-16);
+    --neutral-default-18: var(--neutral-cool-18);
+    --neutral-default-20: var(--neutral-cool-20);
+    --neutral-default-22: var(--neutral-cool-22);
+    --neutral-default-24: var(--neutral-cool-24);
+    --neutral-default-26: var(--neutral-cool-26);
+    --neutral-default-28: var(--neutral-cool-28);
+    --neutral-default-30: var(--neutral-cool-30);
+    --neutral-default-40: var(--neutral-cool-40);
+    --neutral-default-50: var(--neutral-cool-50);
+    --neutral-default-60: var(--neutral-cool-60);
+    --neutral-default-70: var(--neutral-cool-70);
+    --neutral-default-80: var(--neutral-cool-80);
+    --neutral-default-82: var(--neutral-cool-82);
+    --neutral-default-84: var(--neutral-cool-84);
+    --neutral-default-86: var(--neutral-cool-86);
+    --neutral-default-88: var(--neutral-cool-88);
+    --neutral-default-90: var(--neutral-cool-90);
+    --neutral-default-92: var(--neutral-cool-92);
+    --neutral-default-94: var(--neutral-cool-94);
+    --neutral-default-96: var(--neutral-cool-96);
+    --neutral-default-98: var(--neutral-cool-98);
+    --neutral-default-100: var(--neutral-cool-100);
+    --display-color: var(--neutral-default-90);
+    --text-color: var(--neutral-default-90);
+    --mono-color: var(--neutral-default-90);
+}
+.neutral-slate {
+    --neutral-default: var(--neutral-default-60);
+    --neutral-default-5: var(--neutral-slate-5);
+    --neutral-default-10: var(--neutral-slate-10);
+    --neutral-default-12: var(--neutral-slate-12);
+    --neutral-default-14: var(--neutral-slate-14);
+    --neutral-default-16: var(--neutral-slate-16);
+    --neutral-default-18: var(--neutral-slate-18);
+    --neutral-default-20: var(--neutral-slate-20);
+    --neutral-default-22: var(--neutral-slate-22);
+    --neutral-default-24: var(--neutral-slate-24);
+    --neutral-default-26: var(--neutral-slate-26);
+    --neutral-default-28: var(--neutral-slate-28);
+    --neutral-default-30: var(--neutral-slate-30);
+    --neutral-default-40: var(--neutral-slate-40);
+    --neutral-default-50: var(--neutral-slate-50);
+    --neutral-default-60: var(--neutral-slate-60);
+    --neutral-default-70: var(--neutral-slate-70);
+    --neutral-default-80: var(--neutral-slate-80);
+    --neutral-default-82: var(--neutral-slate-82);
+    --neutral-default-84: var(--neutral-slate-84);
+    --neutral-default-86: var(--neutral-slate-86);
+    --neutral-default-88: var(--neutral-slate-88);
+    --neutral-default-90: var(--neutral-slate-90);
+    --neutral-default-92: var(--neutral-slate-92);
+    --neutral-default-94: var(--neutral-slate-94);
+    --neutral-default-96: var(--neutral-slate-96);
+    --neutral-default-98: var(--neutral-slate-98);
+    --neutral-default-100: var(--neutral-slate-100);
+    --display-color: var(--neutral-default-90);
+    --text-color: var(--neutral-default-90);
+    --mono-color: var(--neutral-default-90);
+}
+.neutral-gray {
+    --neutral-default: var(--neutral-default-60);
+    --neutral-default-5: var(--neutral-gray-5);
+    --neutral-default-10: var(--neutral-gray-10);
+    --neutral-default-12: var(--neutral-gray-12);
+    --neutral-default-14: var(--neutral-gray-14);
+    --neutral-default-16: var(--neutral-gray-16);
+    --neutral-default-18: var(--neutral-gray-18);
+    --neutral-default-20: var(--neutral-gray-20);
+    --neutral-default-22: var(--neutral-gray-22);
+    --neutral-default-24: var(--neutral-gray-24);
+    --neutral-default-26: var(--neutral-gray-26);
+    --neutral-default-28: var(--neutral-gray-28);
+    --neutral-default-30: var(--neutral-gray-30);
+    --neutral-default-40: var(--neutral-gray-40);
+    --neutral-default-50: var(--neutral-gray-50);
+    --neutral-default-60: var(--neutral-gray-60);
+    --neutral-default-70: var(--neutral-gray-70);
+    --neutral-default-80: var(--neutral-gray-80);
+    --neutral-default-82: var(--neutral-gray-82);
+    --neutral-default-84: var(--neutral-gray-84);
+    --neutral-default-86: var(--neutral-gray-86);
+    --neutral-default-88: var(--neutral-gray-88);
+    --neutral-default-90: var(--neutral-gray-90);
+    --neutral-default-92: var(--neutral-gray-92);
+    --neutral-default-94: var(--neutral-gray-94);
+    --neutral-default-96: var(--neutral-gray-96);
+    --neutral-default-98: var(--neutral-gray-98);
+    --neutral-default-100: var(--neutral-gray-100);
+    --display-color: var(--neutral-default-90);
+    --text-color: var(--neutral-default-90);
+    --mono-color: var(--neutral-default-90);
+}
+.neutral-onyx {
+    --neutral-default: var(--neutral-default-60);
+    --neutral-default-5: var(--neutral-onyx-5);
+    --neutral-default-10: var(--neutral-onyx-10);
+    --neutral-default-12: var(--neutral-onyx-12);
+    --neutral-default-14: var(--neutral-onyx-14);
+    --neutral-default-16: var(--neutral-onyx-16);
+    --neutral-default-18: var(--neutral-onyx-18);
+    --neutral-default-20: var(--neutral-onyx-20);
+    --neutral-default-22: var(--neutral-onyx-22);
+    --neutral-default-24: var(--neutral-onyx-24);
+    --neutral-default-26: var(--neutral-onyx-26);
+    --neutral-default-28: var(--neutral-onyx-28);
+    --neutral-default-30: var(--neutral-onyx-30);
+    --neutral-default-40: var(--neutral-onyx-40);
+    --neutral-default-50: var(--neutral-onyx-50);
+    --neutral-default-60: var(--neutral-onyx-60);
+    --neutral-default-70: var(--neutral-onyx-70);
+    --neutral-default-80: var(--neutral-onyx-80);
+    --neutral-default-82: var(--neutral-onyx-82);
+    --neutral-default-84: var(--neutral-onyx-84);
+    --neutral-default-86: var(--neutral-onyx-86);
+    --neutral-default-88: var(--neutral-onyx-88);
+    --neutral-default-90: var(--neutral-onyx-90);
+    --neutral-default-92: var(--neutral-onyx-92);
+    --neutral-default-94: var(--neutral-onyx-94);
+    --neutral-default-96: var(--neutral-onyx-96);
+    --neutral-default-98: var(--neutral-onyx-98);
+    --neutral-default-100: var(--neutral-onyx-100);
+    --display-color: var(--neutral-default-90);
+    --text-color: var(--neutral-default-90);
+    --mono-color: var(--neutral-default-90);
+}
+.neutral-mono {
+    --neutral-default: var(--neutral-default-60);
+    --neutral-default-5: var(--neutral-mono-5);
+    --neutral-default-10: var(--neutral-mono-10);
+    --neutral-default-12: var(--neutral-mono-12);
+    --neutral-default-14: var(--neutral-mono-14);
+    --neutral-default-16: var(--neutral-mono-16);
+    --neutral-default-18: var(--neutral-mono-18);
+    --neutral-default-20: var(--neutral-mono-20);
+    --neutral-default-22: var(--neutral-mono-22);
+    --neutral-default-24: var(--neutral-mono-24);
+    --neutral-default-26: var(--neutral-mono-26);
+    --neutral-default-28: var(--neutral-mono-28);
+    --neutral-default-30: var(--neutral-mono-30);
+    --neutral-default-40: var(--neutral-mono-40);
+    --neutral-default-50: var(--neutral-mono-50);
+    --neutral-default-60: var(--neutral-mono-60);
+    --neutral-default-70: var(--neutral-mono-70);
+    --neutral-default-80: var(--neutral-mono-80);
+    --neutral-default-82: var(--neutral-mono-82);
+    --neutral-default-84: var(--neutral-mono-84);
+    --neutral-default-86: var(--neutral-mono-86);
+    --neutral-default-88: var(--neutral-mono-88);
+    --neutral-default-90: var(--neutral-mono-90);
+    --neutral-default-92: var(--neutral-mono-92);
+    --neutral-default-94: var(--neutral-mono-94);
+    --neutral-default-96: var(--neutral-mono-96);
+    --neutral-default-98: var(--neutral-mono-98);
+    --neutral-default-100: var(--neutral-mono-100);
+    --display-color: var(--neutral-default-90);
+    --text-color: var(--neutral-default-90);
+    --mono-color: var(--neutral-default-90);
+}
+.neutral-warm {
+    --neutral-default: var(--neutral-default-60);
+    --neutral-default-5: var(--neutral-warm-5);
+    --neutral-default-10: var(--neutral-warm-10);
+    --neutral-default-12: var(--neutral-warm-12);
+    --neutral-default-14: var(--neutral-warm-14);
+    --neutral-default-16: var(--neutral-warm-16);
+    --neutral-default-18: var(--neutral-warm-18);
+    --neutral-default-20: var(--neutral-warm-20);
+    --neutral-default-22: var(--neutral-warm-22);
+    --neutral-default-24: var(--neutral-warm-24);
+    --neutral-default-26: var(--neutral-warm-26);
+    --neutral-default-28: var(--neutral-warm-28);
+    --neutral-default-30: var(--neutral-warm-30);
+    --neutral-default-40: var(--neutral-warm-40);
+    --neutral-default-50: var(--neutral-warm-50);
+    --neutral-default-60: var(--neutral-warm-60);
+    --neutral-default-70: var(--neutral-warm-70);
+    --neutral-default-80: var(--neutral-warm-80);
+    --neutral-default-82: var(--neutral-warm-82);
+    --neutral-default-84: var(--neutral-warm-84);
+    --neutral-default-86: var(--neutral-warm-86);
+    --neutral-default-88: var(--neutral-warm-88);
+    --neutral-default-90: var(--neutral-warm-90);
+    --neutral-default-92: var(--neutral-warm-92);
+    --neutral-default-94: var(--neutral-warm-94);
+    --neutral-default-96: var(--neutral-warm-96);
+    --neutral-default-98: var(--neutral-warm-98);
+    --neutral-default-100: var(--neutral-warm-100);
+    --display-color: var(--neutral-default-90);
+    --text-color: var(--neutral-default-90);
+    --mono-color: var(--neutral-default-90);
+}

package/src/tokens/_base.css

@@ -0,0 +1,8 @@
+html {
+    font-size: 62.5%;
+}
+:root {
+    --background: var(--neutral-18);
+    --min-screen-width: 480px;
+    --max-screen-width: 1600px;
+}