@multiplatform.one/theme 6.1.0 → 6.4.0

package/src/theme/cookies.spec.ts

@@ -165,6 +165,38 @@ describe("computeOverrides", () => {
     const overrides = computeOverrides(defaultKnobs, current);
     expect(Object.keys(overrides)).toEqual(["fillStyle"]);
   });
+
+  it("persists density override via mp.ov.* pattern", () => {
+    const current: Knobs = { ...defaultKnobs, density: "compact" };
+    const overrides = computeOverrides(defaultKnobs, current);
+    expect(overrides).toEqual({ density: "compact" });
+
+    const { toSet } = writeOverridesCookie(overrides);
+    expect(toSet[0].key).toBe("mp.ov.0");
+    expect(JSON.parse(toSet[0].value)).toEqual({ density: "compact" });
+
+    const roundtrip = readOverridesCookie({ "mp.ov.0": toSet[0].value });
+    expect(roundtrip).toEqual({ density: "compact" });
+  });
+
+  it("persists house-decision overrides via mp.ov.* pattern", () => {
+    const current: Knobs = {
+      ...defaultKnobs,
+      fieldLabelPlacement: "side",
+      tableZebra: "on",
+      formAutofocus: "on",
+    };
+    const overrides = computeOverrides(defaultKnobs, current);
+    expect(overrides).toEqual({
+      fieldLabelPlacement: "side",
+      tableZebra: "on",
+      formAutofocus: "on",
+    });
+
+    const { toSet } = writeOverridesCookie(overrides);
+    expect(JSON.parse(toSet[0].value)).toEqual(overrides);
+    expect(readOverridesCookie({ "mp.ov.0": toSet[0].value })).toEqual(overrides);
+  });
 });
 
 describe("getCookieWatchList", () => {

package/src/theme/cookiesPersistence.spec.ts

@@ -0,0 +1,86 @@
+/**
+ * Cookie persistence round-trip specs — the non-React persistence surface
+ * (`persistPresetOverrides` / `loadPresetOverrides` / `getCookieWatchList`)
+ * that theme devtools and SSR hosts call directly. Locks down: overrides
+ * survive a write→read round-trip through document.cookie, oversized
+ * payloads chunk across `mp.ov.N` cookies and reassemble, stale chunks are
+ * cleaned up, and the SSR path reads from a raw cookie map without touching
+ * the document.
+ */
+
+import { beforeEach, describe, expect, it } from "vitest";
+import type { Knobs } from "./knobs";
+import {
+  cookieOverridesPrefix,
+  cookiePreset,
+  getCookieWatchList,
+  loadPresetOverrides,
+  persistPresetOverrides,
+} from "./cookies";
+
+function clearThemeCookies() {
+  for (const key of getCookieWatchList()) {
+    document.cookie = `${key}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT`;
+  }
+}
+
+beforeEach(() => {
+  clearThemeCookies();
+});
+
+describe("getCookieWatchList", () => {
+  it("watches the preset cookie plus every override chunk slot", () => {
+    const list = getCookieWatchList();
+    expect(list).toContain(cookiePreset);
+    expect(list).toContain(`${cookieOverridesPrefix}.0`);
+    expect(list).toContain(`${cookieOverridesPrefix}.9`);
+    // preset + 10 chunk slots
+    expect(list).toHaveLength(11);
+  });
+});
+
+describe("persistPresetOverrides / loadPresetOverrides", () => {
+  it("round-trips small overrides through document cookies", () => {
+    persistPresetOverrides({ borderRadius: "large", fillStyle: "filled" } as Partial<Knobs>);
+    expect(loadPresetOverrides()).toEqual({ borderRadius: "large", fillStyle: "filled" });
+  });
+
+  it("returns an empty object when nothing is persisted", () => {
+    expect(loadPresetOverrides()).toEqual({});
+  });
+
+  it("overwrites previous overrides instead of merging them", () => {
+    persistPresetOverrides({ borderRadius: "large" } as Partial<Knobs>);
+    persistPresetOverrides({ elevation: "small" } as Partial<Knobs>);
+    expect(loadPresetOverrides()).toEqual({ elevation: "small" });
+  });
+
+  it("chunks oversized overrides across multiple cookies and reassembles them", () => {
+    const bigValue = "x".repeat(8000);
+    persistPresetOverrides({ animation: bigValue } as unknown as Partial<Knobs>);
+    // The serialized JSON exceeds the 3.5 KB split threshold → several chunks.
+    expect(document.cookie).toContain(`${cookieOverridesPrefix}.0=`);
+    expect(document.cookie).toContain(`${cookieOverridesPrefix}.1=`);
+    expect(loadPresetOverrides()).toEqual({ animation: bigValue });
+  });
+
+  it("cleans up stale chunk cookies when the payload shrinks", () => {
+    const bigValue = "y".repeat(8000);
+    persistPresetOverrides({ animation: bigValue } as unknown as Partial<Knobs>);
+    persistPresetOverrides({ borderRadius: "small" } as Partial<Knobs>);
+    expect(loadPresetOverrides()).toEqual({ borderRadius: "small" });
+    expect(document.cookie).not.toContain(`${cookieOverridesPrefix}.1=`);
+  });
+
+  it("reads from a raw cookie map (SSR) without touching the document", () => {
+    const raw = {
+      [`${cookieOverridesPrefix}.0`]: JSON.stringify({ space: "large" }),
+    };
+    expect(loadPresetOverrides(raw)).toEqual({ space: "large" });
+  });
+
+  it("treats corrupted cookie JSON as no overrides", () => {
+    const raw = { [`${cookieOverridesPrefix}.0`]: "{broken" };
+    expect(loadPresetOverrides(raw)).toEqual({});
+  });
+});

package/src/theme/cornerSmoothing.native.ts

@@ -0,0 +1,16 @@
+/**
+ * OPTICS corner smoothing (Axiom 15) — native twin of `cornerSmoothing.ts`.
+ *
+ * React Native has no `corner-shape`; native resolves `cornerSmoothing` to
+ * `round` (resolveKnobs emits no class on native) until a SquircleView
+ * adoption lands (phase 2). Exports stay shape-compatible for shared code.
+ */
+
+/** Class attached on web only — never emitted into native fragments. */
+export const cornerSmoothClassName = "mp-corner-smooth";
+
+/** Web-only stylesheet — empty on native. */
+export const cornerSmoothingCss = "";
+
+/** Web-only stylesheet mount — no-op on native. */
+export function ensureCornerSmoothingStyles(): void {}

package/src/theme/cornerSmoothing.spec.ts

@@ -0,0 +1,27 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import {
+  cornerSmoothClassName,
+  cornerSmoothingCss,
+  ensureCornerSmoothingStyles,
+} from "./cornerSmoothing";
+
+describe("cornerSmoothing (Axiom 15 OPTICS)", () => {
+  it("scopes the squircle declaration to the fragment class", () => {
+    expect(cornerSmoothClassName).toBe("mp-corner-smooth");
+    expect(cornerSmoothingCss).toBe(".mp-corner-smooth { corner-shape: squircle; }");
+  });
+
+  describe("stylesheet mount", () => {
+    beforeEach(() => {
+      document.getElementById("mp-corner-smoothing-styles")?.remove();
+    });
+
+    it("mounts the stylesheet once (idempotent)", () => {
+      ensureCornerSmoothingStyles();
+      ensureCornerSmoothingStyles();
+      const tags = document.querySelectorAll("#mp-corner-smoothing-styles");
+      expect(tags).toHaveLength(1);
+      expect(tags[0]?.textContent).toBe(cornerSmoothingCss);
+    });
+  });
+});

package/src/theme/cornerSmoothing.ts

@@ -0,0 +1,46 @@
+/**
+ * OPTICS corner smoothing (Axiom 15): `cornerSmoothing: "smooth"` upgrades
+ * circular-arc corners to continuous curvature — CSS
+ * `corner-shape: squircle` (≡ `superellipse(2)`, ≈ Apple's continuous
+ * corners / Figma smoothing 0.6) — as a WEB PROGRESSIVE ENHANCEMENT.
+ * Chromium 139+ paints it; every other engine drops the unknown declaration
+ * and keeps today's plain `border-radius` arc, so no `@supports` gate is
+ * needed for correctness.
+ *
+ * Delivery is a class + one mounted stylesheet (the hairline pattern):
+ * Tamagui strips unknown keys from the `style` prop (`style` is in
+ * skipProps and `cornerShape` is not a valid style key), but merges
+ * `className` into its atomic classes — so `resolveKnobs` attaches
+ * `className: cornerSmoothClassName` to every radius-bearing fragment when
+ * the knob is `smooth`, and this module owns the CSS those classes resolve
+ * against.
+ *
+ * Native twin: `cornerSmoothing.native.ts` (no CSS classes — native resolves
+ * to `round` until a SquircleView adoption lands, phase 2).
+ */
+
+/** Class attached to radius-bearing knob fragments at `cornerSmoothing: "smooth"`. */
+export const cornerSmoothClassName = "mp-corner-smooth";
+
+const STYLE_TAG_ID = "mp-corner-smoothing-styles";
+
+/**
+ * The squircle declaration. `corner-shape` composes with the element's
+ * existing `border-radius` (it reshapes the same corner box), so the
+ * fallback in non-supporting engines is automatic. Exported for unit tests.
+ */
+export const cornerSmoothingCss = `.${cornerSmoothClassName} { corner-shape: squircle; }`;
+
+/** Idempotently mount the corner-smoothing stylesheet (no-op off-DOM). */
+export function ensureCornerSmoothingStyles(): void {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_TAG_ID)) return;
+  const tag = document.createElement("style");
+  tag.id = STYLE_TAG_ID;
+  tag.textContent = cornerSmoothingCss;
+  document.head.appendChild(tag);
+}
+
+// Static CSS (no knob/theme dependency) — mount as soon as the module loads
+// in a DOM environment so the class resolves before any smooth render.
+ensureCornerSmoothingStyles();

package/src/theme/createDefaultThemeConfig.ts

@@ -9,17 +9,21 @@ import {
   type ThemeBuilderDefinition,
   createThemesBuilder,
 } from "./createThemes";
+import { defaultAccentTheme } from "./defaults/accent";
+import { defaultBaseTheme } from "./defaults/base";
+import { defaultBuilderOptions } from "./defaults/builderOptions";
+import { defaultBodyFont, defaultHeadingFont } from "./defaults/fonts";
 import type { Preset } from "./preset.types";
 import { type ThemeConfig, createThemeConfig } from "./shared";
 
 export interface CreateDefaultThemeConfigOptions {
-  /** Base theme palette (dark/light with optional shadows) */
-  base: BaseThemeBuilderDefinition;
-  /** Accent theme palette (defaults to base if not provided) */
+  /** Base theme palette (dark/light with optional shadows; defaults to the built-in neutral ramps) */
+  base?: BaseThemeBuilderDefinition;
+  /** Accent theme palette (defaults to the built-in accent ramps) */
   accent?: ThemeBuilderDefinition;
   /** Map of extra named themes with their palettes */
   additionalThemes?: Record<string, ThemeBuilderDefinition>;
-  /** Font definitions */
+  /** Font definitions (merged over the default heading/body fonts) */
   fonts?: Record<string, GenericFont>;
   /** Animation config (defaults to framework reanimated animations) */
   animations?: CreateTamaguiProps["animations"];
@@ -35,9 +39,24 @@ export interface CreateDefaultThemeConfigOptions {
   defaultPreset?: string;
 }
 
-export function createDefaultThemeConfig(options: CreateDefaultThemeConfigOptions): ThemeConfig {
-  const accent = options.accent ?? options.base;
-  const themesBuilder = createThemesBuilder(options.base, accent, options.builderOptions);
+/**
+ * Builds a complete Tamagui theme config with batteries included: calling it
+ * with zero options yields the framework's polished defaults — the neutral
+ * Radix-mauve-curve base ramps, the solid-surface brand accent ramps, Inter
+ * heading/body fonts and the interaction-ramp `getTheme` theme builder.
+ * Every option overrides its piece independently: `base`, `accent` and
+ * `builderOptions` each replace their default, while `fonts` are spread OVER
+ * the defaults so a partial font map keeps the default heading/body.
+ */
+export function createDefaultThemeConfig(
+  options: CreateDefaultThemeConfigOptions = {},
+): ThemeConfig {
+  const base = options.base ?? defaultBaseTheme;
+  const accent = options.accent ?? defaultAccentTheme;
+  const themesBuilder = createThemesBuilder(base, accent, {
+    ...defaultBuilderOptions,
+    ...options.builderOptions,
+  });
   const builtThemes: Record<string, Record<string, string>> = {
     ...themesBuilder.themes(),
   };
@@ -57,7 +76,12 @@ export function createDefaultThemeConfig(options: CreateDefaultThemeConfigOption
       ...defaultConfig,
       animations: options.animations ?? animations,
       disableSSR: false,
-      fonts: options.fonts ?? defaultConfig.fonts,
+      fonts: {
+        ...defaultConfig.fonts,
+        heading: defaultHeadingFont,
+        body: defaultBodyFont,
+        ...options.fonts,
+      },
       shorthands,
       shouldAddPrefersColorThemes: true,
       themeClassNameOnRoot: true,

package/src/theme/createThemeConfig.spec.ts

@@ -0,0 +1,137 @@
+/**
+ * createThemeConfig specs — the app-level config factory. Locks down the
+ * `themeColors` extraction contract (a color exists only when BOTH
+ * light_/dark_ variants exist, semantic/state sub-themes are excluded,
+ * output is sorted), the root-theme-class settings defaults, and preset
+ * registration through the shared registry.
+ *
+ * `createTamagui` is mocked pass-through: this spec pins OUR factory's
+ * behavior, not Tamagui's config processing.
+ */
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("tamagui", () => ({
+  // Identity-ish mock: createThemeConfig only forwards the object and reads
+  // nothing back from Tamagui's processing.
+  createTamagui: vi.fn((config: Record<string, unknown>) => config),
+}));
+
+import { createTamagui } from "tamagui";
+import type { ThemeName } from "@tamagui/web";
+import { defaultKnobs } from "./knobs";
+import type { Preset } from "./preset.types";
+import { clearPresets, createThemeConfig, getPreset, getPresetNames } from "./shared";
+
+const mockedCreateTamagui = vi.mocked(createTamagui);
+
+function makeThemes(names: string[]): Record<string, object> {
+  return Object.fromEntries(names.map((name) => [name, {}]));
+}
+
+function makePreset(): Preset {
+  return {
+    theme: "light" as ThemeName,
+    knobs: { ...defaultKnobs },
+    intents: {},
+    tints: [],
+  };
+}
+
+beforeEach(() => {
+  clearPresets();
+  mockedCreateTamagui.mockClear();
+});
+
+describe("createThemeConfig — themeColors extraction", () => {
+  it("extracts colors that exist in both light and dark variants, sorted", () => {
+    const config = createThemeConfig({
+      themes: makeThemes(["light_blue", "dark_blue", "light_red", "dark_red", "light", "dark"]),
+    } as never);
+    expect(config.themeColors).toEqual(["blue", "red"]);
+  });
+
+  it("drops colors missing one scheme", () => {
+    const config = createThemeConfig({
+      themes: makeThemes(["light_blue", "dark_blue", "light_orphan"]),
+    } as never);
+    expect(config.themeColors).toEqual(["blue"]);
+  });
+
+  it("excludes semantic and state sub-themes from the picker list", () => {
+    const config = createThemeConfig({
+      themes: makeThemes([
+        "light_blue",
+        "dark_blue",
+        "light_error",
+        "dark_error",
+        "light_success",
+        "dark_success",
+        "light_warning",
+        "dark_warning",
+        "light_accent",
+        "dark_accent",
+        "light_active",
+        "dark_active",
+        "light_alt1",
+        "dark_alt1",
+        "light_alt2",
+        "dark_alt2",
+      ]),
+    } as never);
+    expect(config.themeColors).toEqual(["blue"]);
+  });
+
+  it("ignores mixed-case and nested sub-theme names", () => {
+    const config = createThemeConfig({
+      themes: makeThemes([
+        "light_blue",
+        "dark_blue",
+        "light_Blue",
+        "dark_Blue",
+        "light_blue_Button",
+        "dark_blue_Button",
+      ]),
+    } as never);
+    expect(config.themeColors).toEqual(["blue"]);
+  });
+
+  it("returns an empty list when the config carries no themes", () => {
+    const config = createThemeConfig({} as never);
+    expect(config.themeColors).toEqual([]);
+  });
+});
+
+describe("createThemeConfig — settings and registration", () => {
+  it("defaults the root theme class settings on and keeps user settings override", () => {
+    createThemeConfig({ themes: {} } as never);
+    const forwarded = mockedCreateTamagui.mock.calls[0][0] as Record<string, any>;
+    expect(forwarded.settings.disableRootThemeClass).toBe(false);
+    expect(forwarded.settings.themeClassNameOnRoot).toBe(true);
+
+    mockedCreateTamagui.mockClear();
+    createThemeConfig({
+      themes: {},
+      settings: { themeClassNameOnRoot: false },
+    } as never);
+    const overridden = mockedCreateTamagui.mock.calls[0][0] as Record<string, any>;
+    expect(overridden.settings.themeClassNameOnRoot).toBe(false);
+  });
+
+  it("registers provided presets in the shared registry", () => {
+    const material = makePreset();
+    const config = createThemeConfig({ themes: {} } as never, {
+      presets: { material },
+      defaultPreset: "material",
+    });
+    expect(getPresetNames()).toContain("material");
+    expect(getPreset("material")).toBe(material);
+    expect(config.defaultPreset).toBe("material");
+    expect(config.presets).toEqual({ material });
+  });
+
+  it("registers nothing without presets", () => {
+    createThemeConfig({ themes: {} } as never);
+    expect(getPresetNames()).toEqual([]);
+  });
+});

package/src/theme/createThemes.ts

@@ -58,6 +58,81 @@ export interface CreateThemesBuilderOptions {
   getTheme?: (props: GetThemeProps) => Record<string, string | number>;
 }
 
+// Radix hue names whose sub-themes act as decorative TINTS (Tint.tsx cycling,
+// the storybook `color` global, `theme="red"` field tinting). Under a tint,
+// surfaces/borders/solids keep the hue but TEXT must stay readable neutral:
+// muted/secondary text and user-authored content must never render saturated
+// accent (SB-D-14/SB-D-20). Exported so theme-identity consumers (chart
+// palette) share the one tint registry.
+export const tintHueNames = new Set([
+  "amber",
+  "blue",
+  "bronze",
+  "brown",
+  "crimson",
+  "cyan",
+  "gold",
+  "grass",
+  "gray",
+  "green",
+  "indigo",
+  "lime",
+  "mauve",
+  "mint",
+  "olive",
+  "orange",
+  "pink",
+  "plum",
+  "purple",
+  "red",
+  "sage",
+  "sand",
+  "sky",
+  "slate",
+  "teal",
+  "tomato",
+  "violet",
+  "yellow",
+]);
+
+// Text-tier tokens re-anchored to the neutral scheme ramp inside tint themes.
+const tintNeutralTextKeys = [
+  "color",
+  "colorHover",
+  "colorPress",
+  "colorFocus",
+  "color11",
+  "color12",
+  "placeholderColor",
+] as const;
+
+/**
+ * Rebuild tint sub-themes (light_purple, dark_red_active, ...) so their
+ * text tiers come from the neutral base scheme while backgrounds, borders
+ * and solid steps (1-10) keep the hue. Only keys the tint theme already
+ * defines are replaced; returns new objects, never mutates inputs.
+ */
+function neutralizeTintText(
+  themes: Record<string, Record<string, string>>,
+): Record<string, Record<string, string>> {
+  const out: Record<string, Record<string, string>> = { ...themes };
+  for (const [name, theme] of Object.entries(themes)) {
+    const parts = name.split("_");
+    if (parts.length < 2) continue;
+    const scheme = parts[0];
+    if (scheme !== "light" && scheme !== "dark") continue;
+    if (!tintHueNames.has(parts[1])) continue;
+    const base = themes[scheme];
+    if (!base) continue;
+    const patched: Record<string, string> = { ...theme };
+    for (const key of tintNeutralTextKeys) {
+      if (key in patched && base[key] != null) patched[key] = base[key];
+    }
+    out[name] = patched;
+  }
+  return out;
+}
+
 const defaultLightShadows: Shadows = {
   shadow1: "rgba(0,0,0,0.12)",
   shadow2: "rgba(0,0,0,0.16)",
@@ -248,11 +323,11 @@ export function createThemesBuilder(
   const initialTheme = tamaguiCreateThemes(
     createThemesProps as Parameters<typeof tamaguiCreateThemes>[0],
   );
-  const themes = {
+  const themes = neutralizeTintText({
     ...grayTheme,
     ...tamaguiThemes,
     ...initialTheme,
-  };
+  });
   return {
     themes() {
       return themes;

package/src/theme/defaults/accent.ts

@@ -0,0 +1,39 @@
+import type { ThemeBuilderDefinition } from "../createThemes";
+
+export const defaultAccentTheme: ThemeBuilderDefinition = {
+  darkPalette: [
+    "hsla(250, 50%, 35%, 1)",
+    "hsla(250, 50%, 38%, 1)",
+    "hsla(250, 50%, 41%, 1)",
+    "hsla(250, 50%, 43%, 1)",
+    "hsla(250, 50%, 46%, 1)",
+    "hsla(250, 50%, 49%, 1)",
+    "hsla(250, 50%, 52%, 1)",
+    "hsla(250, 50%, 54%, 1)",
+    "hsla(250, 50%, 57%, 1)",
+    "hsla(250, 50%, 60%, 1)",
+    "hsla(250, 50%, 90%, 1)",
+    "hsla(250, 50%, 95%, 1)",
+  ],
+  // Mirrors the darkPalette's shape: SOLID brand surfaces across [0..9] with
+  // near-white foreground anchors at [10..11]. The theme-builder takes
+  // palette[11] as the sub-theme `color` and palette[3] as the Button
+  // surface — the old ramp (95%->40%, no light anchor) put 40%-purple text
+  // on a 62%-purple button (2.3:1). Solid-with-white matches how tamagui v4
+  // ships its accent (bg 9%, color white, 17.9:1); here: button 48%/98%
+  // = 7.7:1.
+  lightPalette: [
+    "hsla(250, 50%, 62%, 1)",
+    "hsla(250, 50%, 58%, 1)",
+    "hsla(250, 50%, 54%, 1)",
+    "hsla(250, 50%, 48%, 1)",
+    "hsla(250, 50%, 46%, 1)",
+    "hsla(250, 50%, 44%, 1)",
+    "hsla(250, 50%, 42%, 1)",
+    "hsla(250, 50%, 40%, 1)",
+    "hsla(250, 50%, 38%, 1)",
+    "hsla(250, 50%, 36%, 1)",
+    "hsla(250, 50%, 95%, 1)",
+    "hsla(250, 50%, 98%, 1)",
+  ],
+};

package/src/theme/defaults/base.ts

@@ -0,0 +1,63 @@
+import type { BaseThemeBuilderDefinition } from "../createThemes";
+
+export const defaultBaseTheme: BaseThemeBuilderDefinition = {
+  // Radix-mauve-shaped neutral ramps with a slight purple tint (hue 270)
+  // harmonizing with the hsla(250) accent: near-white surfaces (1-2),
+  // component/hover steps (3-5), borders (6-8), solid/muted (9-10),
+  // readable text (11-12).
+  //
+  // Step 10 (muted-ink tier) is the catalog's de-facto "muted text" step —
+  // placeholderColor, and ~20 components/stories set `color="$color10"` on
+  // hints, captions, counts, subtitles and placeholders (UX-P01/UX-015).
+  // At its old lightness (light 52% / dark 48%) it measured 3.76–3.98:1 on
+  // color1/color2 — under the AA 4.5:1 floor for normal text (Axiom 12
+  // LEGIBLE FLOOR). Re-anchored to light 46% / dark 54%, the lowest change
+  // that clears 4.5:1 on BOTH page surfaces in both schemes (light 4.9/4.7,
+  // dark 4.8/4.6) while staying a distinct tier above color11. Its non-text
+  // roles (boundary rings, spinners, slider thumb — all ≥3:1 targets) only
+  // gain contrast, so the shift is one-directional safe.
+  darkPalette: [
+    "hsla(270, 6%, 8.7%, 1)",
+    "hsla(270, 6%, 10.5%, 1)",
+    "hsla(270, 6%, 13.5%, 1)",
+    "hsla(270, 6%, 16%, 1)",
+    "hsla(270, 6%, 18.5%, 1)",
+    "hsla(270, 6%, 21.5%, 1)",
+    "hsla(270, 6%, 25.5%, 1)",
+    "hsla(270, 6%, 32%, 1)",
+    "hsla(270, 6%, 43%, 1)",
+    "hsla(270, 6%, 54%, 1)",
+    "hsla(270, 6%, 62.5%, 1)",
+    "hsla(270, 6%, 94%, 1)",
+  ],
+  lightPalette: [
+    "hsla(270, 6%, 99.5%, 1)",
+    "hsla(270, 6%, 98.2%, 1)",
+    "hsla(270, 6%, 95.2%, 1)",
+    "hsla(270, 6%, 92.5%, 1)",
+    "hsla(270, 6%, 90%, 1)",
+    "hsla(270, 6%, 87%, 1)",
+    "hsla(270, 6%, 82.5%, 1)",
+    "hsla(270, 6%, 75%, 1)",
+    "hsla(270, 6%, 56.5%, 1)",
+    "hsla(270, 6%, 46%, 1)",
+    "hsla(270, 6%, 40%, 1)",
+    "hsla(270, 6%, 14%, 1)",
+  ],
+  lightShadows: {
+    shadow1: "rgba(0,0,0,0.04)",
+    shadow2: "rgba(0,0,0,0.08)",
+    shadow3: "rgba(0,0,0,0.16)",
+    shadow4: "rgba(0,0,0,0.24)",
+    shadow5: "rgba(0,0,0,0.32)",
+    shadow6: "rgba(0,0,0,0.4)",
+  },
+  darkShadows: {
+    shadow1: "rgba(0,0,0,0.2)",
+    shadow2: "rgba(0,0,0,0.3)",
+    shadow3: "rgba(0,0,0,0.4)",
+    shadow4: "rgba(0,0,0,0.5)",
+    shadow5: "rgba(0,0,0,0.6)",
+    shadow6: "rgba(0,0,0,0.7)",
+  },
+};