@tuuject/koi-tokens 0.0.0-stage → 0.1.0

package/dist/palette.js

@@ -0,0 +1,1383 @@
+// GENERATED by packages/tokens/scripts/build.mjs from src/tokens.json. Do not edit.
+// Palettes at runtime: `createColors(palettes.rose, 'dark')` gives every role token's color; `checkPalette(p)`
+// lists the contrast pairs a user-made palette fails. Colors are #rrggbb or rgba(), on every platform.
+import { createPaletteKit } from './palette-kit.js';
+export { SHADES } from './palette-kit.js';
+export const palettes = {
+    "koi": {
+        "primary": {
+            "50": "#f0f9ff",
+            "100": "#dff2fe",
+            "200": "#b8e6fe",
+            "300": "#74d4ff",
+            "400": "#00bcff",
+            "500": "#00a6f4",
+            "600": "#0084d1",
+            "700": "#0069a8",
+            "800": "#00598a",
+            "900": "#024a70",
+            "950": "#052f4a"
+        },
+        "accent": {
+            "50": "#fffbeb",
+            "100": "#fef3c6",
+            "200": "#fee685",
+            "300": "#ffd230",
+            "400": "#ffb900",
+            "500": "#fe9a00",
+            "600": "#e17100",
+            "700": "#bb4d00",
+            "800": "#973c00",
+            "900": "#7b3306",
+            "950": "#461901"
+        }
+    },
+    "rose": {
+        "primary": {
+            "50": "#fff1f2",
+            "100": "#ffe4e6",
+            "200": "#fecdd3",
+            "300": "#fda4af",
+            "400": "#fb7185",
+            "500": "#f43f5e",
+            "600": "#e11d48",
+            "700": "#be123c",
+            "800": "#9f1239",
+            "900": "#881337",
+            "950": "#4c0519"
+        },
+        "accent": {
+            "50": "#f5f3ff",
+            "100": "#ede9fe",
+            "200": "#ddd6fe",
+            "300": "#c4b5fd",
+            "400": "#a78bfa",
+            "500": "#8b5cf6",
+            "600": "#7c3aed",
+            "700": "#6d28d9",
+            "800": "#5b21b6",
+            "900": "#4c1d95",
+            "950": "#2e1065"
+        }
+    }
+};
+export const defaultPalette = "koi";
+const roles = {
+    "page-bg": {
+        "light": {
+            "ref": "white"
+        },
+        "dark": {
+            "ref": "secondary-950"
+        }
+    },
+    "surface": {
+        "light": {
+            "ref": "white"
+        },
+        "dark": {
+            "ref": "secondary-900"
+        }
+    },
+    "surface-muted": {
+        "light": {
+            "ref": "secondary-100"
+        },
+        "dark": {
+            "ref": "secondary-800"
+        }
+    },
+    "surface-glass": {
+        "light": "rgba(255, 255, 255, 0.8)",
+        "dark": {
+            "ref": "secondary-950",
+            "alpha": 0.7
+        }
+    },
+    "surface-glass-tint": {
+        "light": "rgba(255, 255, 255, 0.8)",
+        "dark": {
+            "ref": "primary-950",
+            "alpha": 0.8
+        }
+    },
+    "backdrop": {
+        "light": "rgba(0, 0, 0, 0.4)",
+        "dark": "rgba(0, 0, 0, 0.6)"
+    },
+    "tooltip-bg": {
+        "light": {
+            "ref": "secondary-900"
+        },
+        "dark": {
+            "ref": "secondary-100"
+        }
+    },
+    "tooltip-text": {
+        "light": {
+            "ref": "white"
+        },
+        "dark": {
+            "ref": "black"
+        }
+    },
+    "text": {
+        "light": {
+            "ref": "black"
+        },
+        "dark": {
+            "ref": "white"
+        }
+    },
+    "text-muted": {
+        "light": "rgba(0, 0, 0, 0.6)",
+        "dark": "rgba(255, 255, 255, 0.6)"
+    },
+    "text-disabled": {
+        "light": "rgba(0, 0, 0, 0.38)",
+        "dark": "rgba(255, 255, 255, 0.38)"
+    },
+    "text-brand": {
+        "light": {
+            "ref": "primary-700"
+        },
+        "dark": {
+            "ref": "primary-300"
+        }
+    },
+    "border": {
+        "light": {
+            "ref": "secondary-200"
+        },
+        "dark": {
+            "ref": "secondary-800"
+        }
+    },
+    "border-control": {
+        "light": {
+            "ref": "secondary-500"
+        },
+        "dark": {
+            "ref": "secondary-500"
+        }
+    },
+    "border-control-hover": {
+        "light": {
+            "ref": "secondary-600"
+        },
+        "dark": {
+            "ref": "secondary-400"
+        }
+    },
+    "divider": {
+        "light": "rgba(0, 0, 0, 0.1)",
+        "dark": "rgba(255, 255, 255, 0.1)"
+    },
+    "focus-ring": {
+        "light": {
+            "ref": "primary-600"
+        },
+        "dark": {
+            "ref": "primary-400"
+        }
+    },
+    "action": {
+        "light": {
+            "ref": "primary-700"
+        },
+        "dark": {
+            "ref": "primary-700"
+        }
+    },
+    "action-hover": {
+        "light": {
+            "ref": "primary-800"
+        },
+        "dark": {
+            "ref": "primary-800"
+        }
+    },
+    "on-action": {
+        "light": {
+            "ref": "white"
+        },
+        "dark": {
+            "ref": "white"
+        }
+    },
+    "action-subtle": {
+        "light": {
+            "ref": "primary-100"
+        },
+        "dark": {
+            "ref": "primary-950"
+        }
+    },
+    "action-subtle-hover": {
+        "light": {
+            "ref": "primary-200"
+        },
+        "dark": {
+            "ref": "primary-900"
+        }
+    },
+    "on-action-subtle": {
+        "light": {
+            "ref": "primary-800"
+        },
+        "dark": {
+            "ref": "primary-200"
+        }
+    },
+    "control-checked": {
+        "light": {
+            "ref": "primary-700"
+        },
+        "dark": {
+            "ref": "primary-600"
+        }
+    },
+    "link": {
+        "light": {
+            "ref": "accent-700"
+        },
+        "dark": {
+            "ref": "accent-400"
+        }
+    },
+    "link-border": {
+        "light": {
+            "ref": "accent-300"
+        },
+        "dark": {
+            "ref": "accent-800"
+        }
+    },
+    "link-hover-bg": {
+        "light": {
+            "ref": "accent-100"
+        },
+        "dark": {
+            "ref": "accent-950"
+        }
+    },
+    "link-hover-border": {
+        "light": {
+            "ref": "accent-500"
+        },
+        "dark": {
+            "ref": "accent-600"
+        }
+    },
+    "danger": {
+        "light": {
+            "ref": "error-600"
+        },
+        "dark": {
+            "ref": "error-600"
+        }
+    },
+    "danger-hover": {
+        "light": {
+            "ref": "error-700"
+        },
+        "dark": {
+            "ref": "error-700"
+        }
+    },
+    "info-surface": {
+        "light": {
+            "ref": "primary-50"
+        },
+        "dark": {
+            "ref": "primary-950"
+        }
+    },
+    "info-border": {
+        "light": {
+            "ref": "primary-200"
+        },
+        "dark": {
+            "ref": "primary-800"
+        }
+    },
+    "info-text": {
+        "light": {
+            "ref": "primary-800"
+        },
+        "dark": {
+            "ref": "primary-200"
+        }
+    },
+    "warning-surface": {
+        "light": {
+            "ref": "warning-50"
+        },
+        "dark": {
+            "ref": "warning-950"
+        }
+    },
+    "warning-border": {
+        "light": {
+            "ref": "warning-300"
+        },
+        "dark": {
+            "ref": "warning-800"
+        }
+    },
+    "warning-text": {
+        "light": {
+            "ref": "warning-800"
+        },
+        "dark": {
+            "ref": "warning-200"
+        }
+    },
+    "error-surface": {
+        "light": {
+            "ref": "error-50"
+        },
+        "dark": {
+            "ref": "error-950"
+        }
+    },
+    "error-border": {
+        "light": {
+            "ref": "error-300"
+        },
+        "dark": {
+            "ref": "error-800"
+        }
+    },
+    "error-text": {
+        "light": {
+            "ref": "error-700"
+        },
+        "dark": {
+            "ref": "error-300"
+        }
+    },
+    "error-control": {
+        "light": {
+            "ref": "error-600"
+        },
+        "dark": {
+            "ref": "error-400"
+        }
+    },
+    "highlight": {
+        "light": {
+            "ref": "accent-100"
+        },
+        "dark": {
+            "ref": "accent-950"
+        }
+    },
+    "on-highlight": {
+        "light": {
+            "ref": "accent-800"
+        },
+        "dark": {
+            "ref": "accent-200"
+        }
+    },
+    "nav-item-text": {
+        "light": {
+            "ref": "secondary-700"
+        },
+        "dark": {
+            "ref": "secondary-300"
+        }
+    },
+    "nav-item-hover": {
+        "light": {
+            "ref": "secondary-50"
+        },
+        "dark": {
+            "ref": "secondary-900"
+        }
+    },
+    "table-row-hover": {
+        "light": {
+            "ref": "secondary-50"
+        },
+        "dark": {
+            "ref": "secondary-800",
+            "alpha": 0.5
+        }
+    },
+    "nav-item-active": {
+        "light": {
+            "ref": "secondary-100"
+        },
+        "dark": {
+            "ref": "secondary-800"
+        }
+    },
+    "skeleton": {
+        "light": {
+            "ref": "secondary-100"
+        },
+        "dark": {
+            "ref": "secondary-800"
+        }
+    },
+    "skeleton-highlight": {
+        "light": {
+            "ref": "secondary-50"
+        },
+        "dark": {
+            "ref": "secondary-700"
+        }
+    },
+    "prose-text": {
+        "light": {
+            "ref": "secondary-700"
+        },
+        "dark": {
+            "ref": "secondary-300"
+        }
+    },
+    "code-block-bg": {
+        "light": {
+            "ref": "secondary-800"
+        },
+        "dark": {
+            "ref": "secondary-800"
+        }
+    },
+    "code-block-text": {
+        "light": {
+            "ref": "secondary-200"
+        },
+        "dark": {
+            "ref": "secondary-300"
+        }
+    },
+    "primary-solid": {
+        "light": {
+            "ref": "action"
+        },
+        "dark": {
+            "ref": "action"
+        }
+    },
+    "primary-solid-hover": {
+        "light": {
+            "ref": "action-hover"
+        },
+        "dark": {
+            "ref": "action-hover"
+        }
+    },
+    "on-primary-solid": {
+        "light": {
+            "ref": "on-action"
+        },
+        "dark": {
+            "ref": "on-action"
+        }
+    },
+    "primary-soft": {
+        "light": {
+            "ref": "action-subtle"
+        },
+        "dark": {
+            "ref": "action-subtle"
+        }
+    },
+    "primary-soft-hover": {
+        "light": {
+            "ref": "action-subtle-hover"
+        },
+        "dark": {
+            "ref": "action-subtle-hover"
+        }
+    },
+    "on-primary-soft": {
+        "light": {
+            "ref": "on-action-subtle"
+        },
+        "dark": {
+            "ref": "on-action-subtle"
+        }
+    },
+    "primary-fg": {
+        "light": {
+            "ref": "text-brand"
+        },
+        "dark": {
+            "ref": "text-brand"
+        }
+    },
+    "primary-edge": {
+        "light": {
+            "ref": "primary-600"
+        },
+        "dark": {
+            "ref": "primary-400"
+        }
+    },
+    "accent-solid": {
+        "light": {
+            "ref": "accent-400"
+        },
+        "dark": {
+            "ref": "accent-400"
+        }
+    },
+    "accent-solid-hover": {
+        "light": {
+            "ref": "accent-300"
+        },
+        "dark": {
+            "ref": "accent-300"
+        }
+    },
+    "on-accent-solid": {
+        "light": {
+            "ref": "accent-950"
+        },
+        "dark": {
+            "ref": "accent-950"
+        }
+    },
+    "accent-soft": {
+        "light": {
+            "ref": "accent-100"
+        },
+        "dark": {
+            "ref": "accent-950"
+        }
+    },
+    "accent-soft-hover": {
+        "light": {
+            "ref": "accent-200"
+        },
+        "dark": {
+            "ref": "accent-900"
+        }
+    },
+    "on-accent-soft": {
+        "light": {
+            "ref": "accent-800"
+        },
+        "dark": {
+            "ref": "accent-200"
+        }
+    },
+    "accent-fg": {
+        "light": {
+            "ref": "accent-700"
+        },
+        "dark": {
+            "ref": "accent-400"
+        }
+    },
+    "accent-edge": {
+        "light": {
+            "ref": "accent-600"
+        },
+        "dark": {
+            "ref": "accent-500"
+        }
+    },
+    "secondary-solid": {
+        "light": {
+            "ref": "secondary-700"
+        },
+        "dark": {
+            "ref": "secondary-200"
+        }
+    },
+    "secondary-solid-hover": {
+        "light": {
+            "ref": "secondary-800"
+        },
+        "dark": {
+            "ref": "secondary-300"
+        }
+    },
+    "on-secondary-solid": {
+        "light": {
+            "ref": "white"
+        },
+        "dark": {
+            "ref": "secondary-950"
+        }
+    },
+    "secondary-soft": {
+        "light": {
+            "ref": "secondary-100"
+        },
+        "dark": {
+            "ref": "secondary-800"
+        }
+    },
+    "secondary-soft-hover": {
+        "light": {
+            "ref": "secondary-200"
+        },
+        "dark": {
+            "ref": "secondary-700"
+        }
+    },
+    "on-secondary-soft": {
+        "light": {
+            "ref": "secondary-800"
+        },
+        "dark": {
+            "ref": "secondary-100"
+        }
+    },
+    "secondary-fg": {
+        "light": {
+            "ref": "secondary-700"
+        },
+        "dark": {
+            "ref": "secondary-300"
+        }
+    },
+    "secondary-edge": {
+        "light": {
+            "ref": "secondary-500"
+        },
+        "dark": {
+            "ref": "secondary-500"
+        }
+    },
+    "warning-solid": {
+        "light": {
+            "ref": "warning-400"
+        },
+        "dark": {
+            "ref": "warning-400"
+        }
+    },
+    "warning-solid-hover": {
+        "light": {
+            "ref": "warning-300"
+        },
+        "dark": {
+            "ref": "warning-300"
+        }
+    },
+    "on-warning-solid": {
+        "light": {
+            "ref": "warning-950"
+        },
+        "dark": {
+            "ref": "warning-950"
+        }
+    },
+    "warning-soft": {
+        "light": {
+            "ref": "warning-100"
+        },
+        "dark": {
+            "ref": "warning-950"
+        }
+    },
+    "warning-soft-hover": {
+        "light": {
+            "ref": "warning-200"
+        },
+        "dark": {
+            "ref": "warning-900"
+        }
+    },
+    "on-warning-soft": {
+        "light": {
+            "ref": "warning-800"
+        },
+        "dark": {
+            "ref": "warning-200"
+        }
+    },
+    "warning-fg": {
+        "light": {
+            "ref": "warning-700"
+        },
+        "dark": {
+            "ref": "warning-400"
+        }
+    },
+    "warning-edge": {
+        "light": {
+            "ref": "warning-700"
+        },
+        "dark": {
+            "ref": "warning-500"
+        }
+    },
+    "error-solid": {
+        "light": {
+            "ref": "danger"
+        },
+        "dark": {
+            "ref": "danger"
+        }
+    },
+    "error-solid-hover": {
+        "light": {
+            "ref": "danger-hover"
+        },
+        "dark": {
+            "ref": "danger-hover"
+        }
+    },
+    "on-error-solid": {
+        "light": {
+            "ref": "on-action"
+        },
+        "dark": {
+            "ref": "on-action"
+        }
+    },
+    "error-soft": {
+        "light": {
+            "ref": "error-100"
+        },
+        "dark": {
+            "ref": "error-950"
+        }
+    },
+    "error-soft-hover": {
+        "light": {
+            "ref": "error-200"
+        },
+        "dark": {
+            "ref": "error-900"
+        }
+    },
+    "on-error-soft": {
+        "light": {
+            "ref": "error-800"
+        },
+        "dark": {
+            "ref": "error-200"
+        }
+    },
+    "error-fg": {
+        "light": {
+            "ref": "error-700"
+        },
+        "dark": {
+            "ref": "error-400"
+        }
+    },
+    "error-edge": {
+        "light": {
+            "ref": "error-600"
+        },
+        "dark": {
+            "ref": "error-400"
+        }
+    }
+};
+export const { createColors, checkPalette } = createPaletteKit({
+    roles,
+    fixed: {
+        "secondary-50": "#f9fafb",
+        "secondary-100": "#f3f4f6",
+        "secondary-200": "#e5e7eb",
+        "secondary-300": "#d1d5dc",
+        "secondary-400": "#99a1af",
+        "secondary-500": "#6a7282",
+        "secondary-600": "#4a5565",
+        "secondary-700": "#364153",
+        "secondary-800": "#1e2939",
+        "secondary-900": "#101828",
+        "secondary-950": "#030712",
+        "warning-50": "#fefce8",
+        "warning-100": "#fef9c2",
+        "warning-200": "#fff085",
+        "warning-300": "#ffdf20",
+        "warning-400": "#fdc700",
+        "warning-500": "#f0b100",
+        "warning-600": "#d08700",
+        "warning-700": "#a65f00",
+        "warning-800": "#894b00",
+        "warning-900": "#733e0a",
+        "warning-950": "#432004",
+        "error-50": "#fef2f2",
+        "error-100": "#ffe2e2",
+        "error-200": "#ffc9c9",
+        "error-300": "#ffa2a2",
+        "error-400": "#ff6467",
+        "error-500": "#fb2c36",
+        "error-600": "#e7000b",
+        "error-700": "#c10007",
+        "error-800": "#9f0712",
+        "error-900": "#82181a",
+        "error-950": "#460809",
+        "white": "#ffffff",
+        "black": "#000000"
+    },
+    pairs: {
+        "text": [
+            [
+                "text",
+                "page-bg"
+            ],
+            [
+                "text",
+                "surface"
+            ],
+            [
+                "text",
+                "surface-muted"
+            ],
+            [
+                "text",
+                "action-subtle"
+            ],
+            [
+                "text",
+                "action-subtle-hover"
+            ],
+            [
+                "text",
+                "table-row-hover",
+                "surface"
+            ],
+            [
+                "text-muted",
+                "table-row-hover",
+                "surface"
+            ],
+            [
+                "secondary-fg",
+                "table-row-hover",
+                "surface"
+            ],
+            [
+                "error-fg",
+                "table-row-hover",
+                "surface"
+            ],
+            [
+                "text",
+                "table-row-hover",
+                "page-bg"
+            ],
+            [
+                "text-muted",
+                "table-row-hover",
+                "page-bg"
+            ],
+            [
+                "secondary-fg",
+                "table-row-hover",
+                "page-bg"
+            ],
+            [
+                "error-fg",
+                "table-row-hover",
+                "page-bg"
+            ],
+            [
+                "text-muted",
+                "page-bg"
+            ],
+            [
+                "text-muted",
+                "surface"
+            ],
+            [
+                "text-muted",
+                "surface-muted"
+            ],
+            [
+                "text",
+                "surface-glass"
+            ],
+            [
+                "text-muted",
+                "surface-glass"
+            ],
+            [
+                "text",
+                "surface-glass-tint"
+            ],
+            [
+                "text-muted",
+                "surface-glass-tint"
+            ],
+            [
+                "primary-fg",
+                "surface-glass-tint"
+            ],
+            [
+                "error-fg",
+                "surface-glass-tint"
+            ],
+            [
+                "text-brand",
+                "page-bg"
+            ],
+            [
+                "text-brand",
+                "surface"
+            ],
+            [
+                "text-brand",
+                "surface-muted"
+            ],
+            [
+                "link",
+                "page-bg"
+            ],
+            [
+                "link",
+                "surface"
+            ],
+            [
+                "link",
+                "surface-muted"
+            ],
+            [
+                "link",
+                "link-hover-bg"
+            ],
+            [
+                "prose-text",
+                "page-bg"
+            ],
+            [
+                "prose-text",
+                "surface"
+            ],
+            [
+                "code-block-text",
+                "code-block-bg"
+            ],
+            [
+                "on-action",
+                "action"
+            ],
+            [
+                "on-action",
+                "action-hover"
+            ],
+            [
+                "on-action-subtle",
+                "action-subtle"
+            ],
+            [
+                "on-action-subtle",
+                "action-subtle-hover"
+            ],
+            [
+                "on-highlight",
+                "highlight"
+            ],
+            [
+                "tooltip-text",
+                "tooltip-bg"
+            ],
+            [
+                "info-text",
+                "info-surface"
+            ],
+            [
+                "warning-text",
+                "warning-surface"
+            ],
+            [
+                "error-text",
+                "error-surface"
+            ],
+            [
+                "text",
+                "info-surface"
+            ],
+            [
+                "text",
+                "warning-surface"
+            ],
+            [
+                "text",
+                "error-surface"
+            ],
+            [
+                "primary-fg",
+                "info-surface"
+            ],
+            [
+                "warning-fg",
+                "warning-surface"
+            ],
+            [
+                "error-fg",
+                "error-surface"
+            ],
+            [
+                "error-text",
+                "page-bg"
+            ],
+            [
+                "error-text",
+                "surface"
+            ],
+            [
+                "error-text",
+                "surface-muted"
+            ],
+            [
+                "nav-item-text",
+                "page-bg"
+            ],
+            [
+                "nav-item-text",
+                "surface"
+            ],
+            [
+                "nav-item-text",
+                "nav-item-hover"
+            ],
+            [
+                "nav-item-text",
+                "nav-item-active"
+            ],
+            [
+                "text",
+                "nav-item-active"
+            ],
+            [
+                "on-primary-solid",
+                "primary-solid"
+            ],
+            [
+                "on-primary-solid",
+                "primary-solid-hover"
+            ],
+            [
+                "on-primary-soft",
+                "primary-soft"
+            ],
+            [
+                "on-primary-soft",
+                "primary-soft-hover"
+            ],
+            [
+                "primary-fg",
+                "page-bg"
+            ],
+            [
+                "primary-fg",
+                "surface"
+            ],
+            [
+                "primary-fg",
+                "primary-soft"
+            ],
+            [
+                "on-accent-solid",
+                "accent-solid"
+            ],
+            [
+                "on-accent-solid",
+                "accent-solid-hover"
+            ],
+            [
+                "on-accent-soft",
+                "accent-soft"
+            ],
+            [
+                "on-accent-soft",
+                "accent-soft-hover"
+            ],
+            [
+                "accent-fg",
+                "page-bg"
+            ],
+            [
+                "accent-fg",
+                "surface"
+            ],
+            [
+                "accent-fg",
+                "accent-soft"
+            ],
+            [
+                "on-secondary-solid",
+                "secondary-solid"
+            ],
+            [
+                "on-secondary-solid",
+                "secondary-solid-hover"
+            ],
+            [
+                "on-secondary-soft",
+                "secondary-soft"
+            ],
+            [
+                "on-secondary-soft",
+                "secondary-soft-hover"
+            ],
+            [
+                "secondary-fg",
+                "page-bg"
+            ],
+            [
+                "secondary-fg",
+                "surface"
+            ],
+            [
+                "secondary-fg",
+                "secondary-soft"
+            ],
+            [
+                "on-warning-solid",
+                "warning-solid"
+            ],
+            [
+                "on-warning-solid",
+                "warning-solid-hover"
+            ],
+            [
+                "on-warning-soft",
+                "warning-soft"
+            ],
+            [
+                "on-warning-soft",
+                "warning-soft-hover"
+            ],
+            [
+                "warning-fg",
+                "page-bg"
+            ],
+            [
+                "warning-fg",
+                "surface"
+            ],
+            [
+                "warning-fg",
+                "warning-soft"
+            ],
+            [
+                "on-error-solid",
+                "error-solid"
+            ],
+            [
+                "on-error-solid",
+                "error-solid-hover"
+            ],
+            [
+                "on-error-soft",
+                "error-soft"
+            ],
+            [
+                "on-error-soft",
+                "error-soft-hover"
+            ],
+            [
+                "error-fg",
+                "page-bg"
+            ],
+            [
+                "error-fg",
+                "surface"
+            ],
+            [
+                "error-fg",
+                "error-soft"
+            ],
+            [
+                "secondary-fg",
+                "surface-glass-tint"
+            ],
+            [
+                "text",
+                "highlight"
+            ],
+            [
+                "text-muted",
+                "highlight"
+            ],
+            [
+                "error-text",
+                "highlight"
+            ]
+        ],
+        "ui": [
+            [
+                "border-control",
+                "surface"
+            ],
+            [
+                "border-control",
+                "page-bg"
+            ],
+            [
+                "border-control-hover",
+                "surface"
+            ],
+            [
+                "error-control",
+                "surface"
+            ],
+            [
+                "error-control",
+                "page-bg"
+            ],
+            [
+                "border-control",
+                "surface-muted"
+            ],
+            [
+                "error-control",
+                "surface-muted"
+            ],
+            [
+                "focus-ring",
+                "surface-muted"
+            ],
+            [
+                "focus-ring",
+                "page-bg"
+            ],
+            [
+                "focus-ring",
+                "surface"
+            ],
+            [
+                "focus-ring",
+                "info-surface"
+            ],
+            [
+                "focus-ring",
+                "warning-surface"
+            ],
+            [
+                "focus-ring",
+                "error-surface"
+            ],
+            [
+                "info-text",
+                "divider",
+                "info-surface"
+            ],
+            [
+                "warning-text",
+                "divider",
+                "warning-surface"
+            ],
+            [
+                "error-text",
+                "divider",
+                "error-surface"
+            ],
+            [
+                "primary-edge",
+                "info-surface"
+            ],
+            [
+                "warning-edge",
+                "warning-surface"
+            ],
+            [
+                "error-edge",
+                "error-surface"
+            ],
+            [
+                "control-checked",
+                "surface"
+            ],
+            [
+                "control-checked",
+                "page-bg"
+            ],
+            [
+                "control-checked",
+                "surface-muted"
+            ],
+            [
+                "on-action",
+                "control-checked"
+            ],
+            [
+                "border-control-hover",
+                "page-bg"
+            ],
+            [
+                "white",
+                "border-control"
+            ],
+            [
+                "white",
+                "control-checked"
+            ],
+            [
+                "focus-ring",
+                "action-subtle"
+            ],
+            [
+                "text-brand",
+                "surface-glass-tint"
+            ],
+            [
+                "warning-text",
+                "surface-glass-tint"
+            ],
+            [
+                "error-text",
+                "surface-glass-tint"
+            ],
+            [
+                "focus-ring",
+                "surface-glass-tint"
+            ],
+            [
+                "text",
+                "divider",
+                "surface-glass-tint"
+            ],
+            [
+                "primary-edge",
+                "page-bg"
+            ],
+            [
+                "accent-edge",
+                "page-bg"
+            ],
+            [
+                "secondary-edge",
+                "page-bg"
+            ],
+            [
+                "warning-edge",
+                "page-bg"
+            ],
+            [
+                "error-edge",
+                "page-bg"
+            ],
+            [
+                "text-brand",
+                "nav-item-hover"
+            ],
+            [
+                "text-brand",
+                "nav-item-active"
+            ],
+            [
+                "error-text",
+                "nav-item-hover"
+            ],
+            [
+                "error-text",
+                "nav-item-active"
+            ],
+            [
+                "border-control",
+                "highlight"
+            ],
+            [
+                "focus-ring",
+                "highlight"
+            ]
+        ]
+    },
+});