@apple-pie/slice 0.1.60 → 0.2.0

package/dist/esm/theme/colors.mjs

@@ -1,248 +1,490 @@
-const coreColors = {
-    "brand-grey-50": "#f4f7fa",
-    "brand-grey-100": "#e5ecf3",
-    "brand-grey-200": "#d5e0ea",
-    "brand-grey-300": "#98acbf",
-    "brand-grey-400": "#7f96a9",
-    "brand-grey-500": "#657d91",
-    "brand-grey-600": "#4c6273",
-    "brand-grey-700": "#405261",
-    "brand-grey-800": "#37434e",
-    "brand-grey-900": "#2d353d",
-    "brand-grey-950": "#1f262d",
-    "brand-sea-50": "#e8f1ff",
-    "brand-sea-100": "#c7defe",
-    "brand-sea-200": "#a5c9ff",
-    "brand-sea-300": "#7ab3ff",
-    "brand-sea-400": "#4084ff",
-    "brand-sea-500": "#2f45ff",
-    "brand-sea-600": "#2d2fff",
-    "brand-sea-700": "#0000ff",
-    "brand-sea-800": "#0609cd",
-    "brand-sea-900": "#001699",
-    "brand-sea-950": "#0a0b5c",
-    "brand-sky-50": "#eafffe",
-    "brand-sky-100": "#cdfffb",
-    "brand-sky-200": "#a3f8ff",
-    "brand-sky-300": "#6af5ff",
-    "brand-sky-400": "#00edff",
-    "brand-sky-500": "#00c8e0",
-    "brand-sky-600": "#00a6c0",
-    "brand-sky-700": "#03839b",
-    "brand-sky-800": "#0d697d",
-    "brand-sky-900": "#105669",
-    "brand-sky-950": "#033949",
-    "brand-land-50": "#f4ffe5",
-    "brand-land-100": "#e0ffb7",
-    "brand-land-200": "#caff95",
-    "brand-land-300": "#b7fe59",
-    "brand-land-400": "#9cf820",
-    "brand-land-500": "#71e618",
-    "brand-land-600": "#56c900",
-    "brand-land-700": "#2d8c00",
-    "brand-land-800": "#31690b",
-    "brand-land-900": "#2a580f",
-    "brand-land-950": "#123201",
-    "brand-orange-50": "#fff8ec",
-    "brand-orange-100": "#ffebd7",
-    "brand-orange-200": "#ffe3c6",
-    "brand-orange-300": "#ffc182",
-    "brand-orange-400": "#ff972e",
-    "brand-orange-500": "#ff800a",
-    "brand-orange-600": "#ff6700",
-    "brand-orange-700": "#ff3700",
-    "brand-orange-800": "#a02b0b",
-    "brand-orange-900": "#80250b",
-    "brand-orange-950": "#461604",
-    "brand-yellow-50": "#ffffea",
-    "brand-yellow-100": "#fffdca",
-    "brand-yellow-200": "#fff2a0",
-    "brand-yellow-300": "#ffeb72",
-    "brand-yellow-400": "#ffd333",
-    "brand-yellow-500": "#ffc200",
-    "brand-yellow-600": "#ffad00",
-    "brand-yellow-700": "#c68601",
-    "brand-yellow-800": "#8f6307",
-    "brand-yellow-900": "#5f430a",
-    "brand-yellow-950": "#442e00",
-    "brand-purple-50": "#faf0ff",
-    "brand-purple-100": "#f4ddff",
-    "brand-purple-200": "#e5cdff",
-    "brand-purple-300": "#ccafff",
-    "brand-purple-400": "#b891ff",
-    "brand-purple-500": "#7d48ff",
-    "brand-purple-600": "#6a14ff",
-    "brand-purple-700": "#5600f1",
-    "brand-purple-800": "#4d01d6",
-    "brand-purple-900": "#4003af",
-    "brand-purple-950": "#1e007c",
-    "brand-magenta-50": "#fef1fc",
-    "brand-magenta-100": "#ffdcef",
-    "brand-magenta-200": "#ffcae6",
-    "brand-magenta-300": "#ff90cb",
-    "brand-magenta-400": "#ff61ca",
-    "brand-magenta-500": "#ff3ac2",
-    "brand-magenta-600": "#f012aa",
-    "brand-magenta-700": "#df059b",
-    "brand-magenta-800": "#9b0069",
-    "brand-magenta-900": "#790a55",
-    "brand-magenta-950": "#58003a",
-    "brand-white-0": "#ffffff",
-    "product-red-400": "#ff474a",
-    "product-red-500": "#df0529",
-    "core-drop-shadow-light": "#0339491a",
-    "core-drop-shadow-dark": "#0000007a",
-    "core-surface-coverup-translucent-light": "#1f262d52",
-    "core-surface-coverup-translucent-dark": "#0000007a",
-    "core-surface-overlay-translucent-light": "#ffffffcc",
-    "core-surface-overlay-translucent-dark": "#1f262dcc",
-    "surface-primary-tint-light": "#fcfcfc",
-    "surface-primary-tint-dark": "#191e24",
-    "scroll-bar-light": "#e3e8ef",
-    "scroll-bar-dark": "rgba(255, 255, 255, 0.1)",
-    "scroll-bar-hover-light": "#cdd5df",
-    "scroll-bar-hover-dark": "rgba(255, 255, 255, 0.15)",
-    "surface-shadow-soft-light": "0px 4px 24px #0339491a",
-    "surface-shadow-soft-dark": "0px 4px 24px #0000007a",
-    "surface-shadow-strong-light": "0px 4px 64px #0339491a",
-    "surface-shadow-strong-dark": "0px 4px 64px #0000007a"
-}, light = {
-    "array-land": coreColors["brand-land-100"],
-    "array-land-label": coreColors["brand-land-600"],
-    "array-magenta": coreColors["brand-magenta-100"],
-    "array-magenta-label": coreColors["brand-magenta-600"],
-    "array-orange": coreColors["brand-orange-100"],
-    "array-orange-label": coreColors["brand-orange-600"],
-    "array-purple": coreColors["brand-purple-100"],
-    "array-purple-label": coreColors["brand-purple-600"],
-    "array-sea": coreColors["brand-sea-100"],
-    "array-sea-label": coreColors["brand-sea-600"],
-    "array-sky": coreColors["brand-sky-100"],
-    "array-sky-label": coreColors["brand-sky-600"],
-    "array-yellow": coreColors["brand-yellow-100"],
-    "array-yellow-label": coreColors["brand-yellow-600"],
-    "core-badge-primary": coreColors["brand-sea-500"],
-    "core-badge-secondary": coreColors["brand-grey-100"],
-    "core-button-disabled": coreColors["brand-grey-50"],
-    "core-button-primary": coreColors["brand-sea-500"],
+const corePalette = {
+    "core-red-50": "#ffeae8",
+    "core-red-100": "#ffd9d5",
+    "core-red-200": "#ffb7b0",
+    "core-red-300": "#ff9188",
+    "core-red-400": "#ff625d",
+    "core-red-450": "#ff4245",
+    "core-red-500": "#ff383c",
+    "core-red-600": "#cf2d2f",
+    "core-red-700": "#a12123",
+    "core-red-800": "#751718",
+    "core-red-900": "#4c0d0d",
+    "core-red-950": "#380808",
+    "core-orange-50": "#fef1e8",
+    "core-orange-100": "#ffe5d4",
+    "core-orange-200": "#ffcfad",
+    "core-orange-300": "#ffb884",
+    "core-orange-400": "#ff9f53",
+    "core-orange-450": "#ff9230",
+    "core-orange-500": "#ff8d28",
+    "core-orange-600": "#cd701d",
+    "core-orange-700": "#9d5413",
+    "core-orange-800": "#703a09",
+    "core-orange-900": "#462203",
+    "core-orange-950": "#321601",
+    "core-yellow-50": "#fcf8e7",
+    "core-yellow-100": "#fcf3d1",
+    "core-yellow-200": "#fdeaa4",
+    "core-yellow-300": "#fee170",
+    "core-yellow-400": "#ffd600",
+    "core-yellow-500": "#ffcc00",
+    "core-yellow-600": "#cba200",
+    "core-yellow-700": "#997900",
+    "core-yellow-800": "#6a5300",
+    "core-yellow-900": "#3f3000",
+    "core-yellow-950": "#2b2000",
+    "core-lime-50": "#f1f7e8",
+    "core-lime-100": "#e7f2d5",
+    "core-lime-200": "#d2e8ae",
+    "core-lime-300": "#bedd84",
+    "core-lime-400": "#aad254",
+    "core-lime-450": "#a0cc33",
+    "core-lime-500": "#9dcc29",
+    "core-lime-600": "#7da31d",
+    "core-lime-700": "#5e7c12",
+    "core-lime-800": "#405707",
+    "core-lime-900": "#253401",
+    "core-lime-950": "#192400",
+    "core-green-50": "#eaf8ea",
+    "core-green-100": "#d7f4d9",
+    "core-green-200": "#b1ebb6",
+    "core-green-300": "#88e192",
+    "core-green-400": "#56d66d",
+    "core-green-450": "#30d158",
+    "core-green-500": "#34c759",
+    "core-green-600": "#28a046",
+    "core-green-700": "#1c7a34",
+    "core-green-800": "#115622",
+    "core-green-900": "#073512",
+    "core-green-950": "#03260b",
+    "core-mint-50": "#e8f8f4",
+    "core-mint-100": "#d3f4ed",
+    "core-mint-200": "#a7ecdf",
+    "core-mint-300": "#72e3d1",
+    "core-mint-400": "#00dac3",
+    "core-mint-500": "#00c8b3",
+    "core-mint-600": "#00a08f",
+    "core-mint-700": "#007a6d",
+    "core-mint-800": "#00564c",
+    "core-mint-900": "#00352e",
+    "core-mint-950": "#002520",
+    "core-teal-50": "#e7f7f8",
+    "core-teal-100": "#d2f2f5",
+    "core-teal-200": "#a5e8ee",
+    "core-teal-300": "#71dde7",
+    "core-teal-400": "#00d2e0",
+    "core-teal-500": "#00c3d0",
+    "core-teal-600": "#009ca7",
+    "core-teal-700": "#00777f",
+    "core-teal-800": "#00545a",
+    "core-teal-900": "#003337",
+    "core-teal-950": "#002427",
+    "core-cyan-50": "#e9f7fc",
+    "core-cyan-100": "#d5f2fd",
+    "core-cyan-200": "#ace9fe",
+    "core-cyan-300": "#7edefe",
+    "core-cyan-400": "#3cd3fe",
+    "core-cyan-500": "#00c0e8",
+    "core-cyan-600": "#009aba",
+    "core-cyan-700": "#00758e",
+    "core-cyan-800": "#005265",
+    "core-cyan-900": "#00323e",
+    "core-cyan-950": "#00232c",
+    "core-blue-50": "#e5f1fe",
+    "core-blue-100": "#cfe6ff",
+    "core-blue-200": "#a3cfff",
+    "core-blue-300": "#74b7ff",
+    "core-blue-400": "#3c9eff",
+    "core-blue-450": "#0091ff",
+    "core-blue-500": "#0088ff",
+    "core-blue-600": "#036ecf",
+    "core-blue-700": "#0455a1",
+    "core-blue-800": "#043d75",
+    "core-blue-900": "#03264c",
+    "core-blue-950": "#031c39",
+    "core-indigo-50": "#e9ebfe",
+    "core-indigo-100": "#d7dbff",
+    "core-indigo-200": "#b5bbff",
+    "core-indigo-300": "#9598ff",
+    "core-indigo-400": "#7873ff",
+    "core-indigo-450": "#6b5dff",
+    "core-indigo-500": "#6155f5",
+    "core-indigo-600": "#4f45c8",
+    "core-indigo-700": "#3d369d",
+    "core-indigo-800": "#2c2874",
+    "core-indigo-900": "#1c1a4d",
+    "core-indigo-950": "#14133b",
+    "core-purple-50": "#fae9fc",
+    "core-purple-100": "#f8d6fc",
+    "core-purple-200": "#f2b0fb",
+    "core-purple-300": "#ea87f8",
+    "core-purple-400": "#e056f4",
+    "core-purple-450": "#db34f2",
+    "core-purple-500": "#cb30e0",
+    "core-purple-600": "#a527b6",
+    "core-purple-700": "#801e8d",
+    "core-purple-800": "#5d1567",
+    "core-purple-900": "#3c0c43",
+    "core-purple-950": "#2d0832",
+    "core-pink-50": "#ffeaea",
+    "core-pink-100": "#ffd8d9",
+    "core-pink-200": "#ffb4b8",
+    "core-pink-300": "#ff8d96",
+    "core-pink-400": "#ff5c72",
+    "core-pink-450": "#ff375f",
+    "core-pink-500": "#ff2d55",
+    "core-pink-600": "#cf2444",
+    "core-pink-700": "#a11b33",
+    "core-pink-800": "#751224",
+    "core-pink-900": "#4c0a15",
+    "core-pink-950": "#38060e",
+    "core-brown-50": "#f4efea",
+    "core-brown-100": "#ede2d9",
+    "core-brown-200": "#dec8b8",
+    "core-brown-300": "#ceaf97",
+    "core-brown-400": "#bf9676",
+    "core-brown-450": "#b78a66",
+    "core-brown-500": "#ac7f5e",
+    "core-brown-600": "#8b664b",
+    "core-brown-700": "#6c4f39",
+    "core-brown-800": "#4e3828",
+    "core-brown-900": "#322318",
+    "core-brown-950": "#241911",
+    "core-grey-0": "#ffffff",
+    "core-grey-40": "#f7f6f5",
+    "core-grey-50": "#f5f4f2",
+    "core-grey-51": "#f5f3f0",
+    "core-grey-85": "#ebebf5",
+    "core-grey-95": "#eae9e8",
+    "core-grey-100": "#e9e8e7",
+    "core-grey-185": "#d6d5d4",
+    "core-grey-200": "#d3d2d1",
+    "core-grey-230": "#cccbca",
+    "core-grey-300": "#bdbcbb",
+    "core-grey-350": "#b2b1b0",
+    "core-grey-400": "#a8a7a6",
+    "core-grey-500": "#939292",
+    "core-grey-501": "#939290",
+    "core-grey-565": "#808080",
+    "core-grey-595": "#787878",
+    "core-grey-600": "#777776",
+    "core-grey-660": "#666564",
+    "core-grey-700": "#5c5b5a",
+    "core-grey-770": "#4a4949",
+    "core-grey-795": "#434242",
+    "core-grey-800": "#424142",
+    "core-grey-820": "#3c3c43",
+    "core-grey-821": "#3c3c3b",
+    "core-grey-880": "#2e2e2d",
+    "core-grey-900": "#2a2929",
+    "core-grey-949": "#1f1e1e",
+    "core-grey-950": "#1e1e1d",
+    "core-grey-975": "#101010",
+    "core-grey-1000": "#000000"
+}, coreGreyRecipes = {
+    "fills-primary": {
+        light: {
+            token: "core-grey-565",
+            opacity: .12
+        },
+        dark: {
+            token: "core-grey-565",
+            opacity: .12
+        }
+    },
+    "fills-secondary": {
+        light: {
+            token: "core-grey-820",
+            opacity: .6
+        },
+        dark: {
+            token: "core-grey-85",
+            opacity: .6
+        }
+    },
+    "fills-tertiary": {
+        light: {
+            token: "core-grey-595",
+            opacity: .2
+        },
+        dark: {
+            token: "core-grey-595",
+            opacity: .2
+        }
+    },
+    "fills-elevated": {
+        light: {
+            token: "core-grey-0",
+            opacity: 1
+        },
+        dark: {
+            token: "core-grey-949",
+            opacity: 1
+        }
+    },
+    "fills-liquid-glass": {
+        light: {
+            token: "core-grey-0",
+            opacity: .8
+        },
+        dark: {
+            token: "core-grey-949",
+            opacity: .8
+        }
+    },
+    "text-primary": {
+        light: {
+            token: "core-grey-1000",
+            opacity: 1
+        },
+        dark: {
+            token: "core-grey-0",
+            opacity: 1
+        }
+    },
+    "text-secondary": {
+        light: {
+            token: "core-grey-795",
+            opacity: .6
+        },
+        dark: {
+            token: "core-grey-51",
+            opacity: .6
+        }
+    },
+    "text-tertiary": {
+        light: {
+            token: "core-grey-795",
+            opacity: .3
+        },
+        dark: {
+            token: "core-grey-51",
+            opacity: .3
+        }
+    },
+    "text-quaternary": {
+        light: {
+            token: "core-grey-795",
+            opacity: .18
+        },
+        dark: {
+            token: "core-grey-85",
+            opacity: .18
+        }
+    },
+    "background-primary": {
+        light: {
+            token: "core-grey-0",
+            opacity: 1
+        },
+        dark: {
+            token: "core-grey-1000",
+            opacity: 1
+        }
+    },
+    "background-secondary": {
+        light: {
+            token: "core-grey-50",
+            opacity: 1
+        },
+        dark: {
+            token: "core-grey-949",
+            opacity: 1
+        }
+    },
+    "background-elevated": {
+        light: {
+            token: "core-grey-0",
+            opacity: 1
+        },
+        dark: {
+            token: "core-grey-949",
+            opacity: 1
+        }
+    }
+};
+
+/** Resolve a palette reference and alpha into a portable, unflattened color. */
+function resolveColorRecipe(recipe) {
+    const hex = corePalette[recipe.token];
+    if (1 === recipe.opacity) return hex;
+    const [r, g, b] = [ 1, 3, 5 ].map(offset => Number.parseInt(hex.slice(offset, offset + 2), 16));
+    return `rgba(${r}, ${g}, ${b}, ${recipe.opacity})`;
+}
+
+const neutralThemeRecipes = {
+    "core-text-primary": "text-primary",
+    "core-text-secondary": "text-secondary",
+    "core-text-tertiary": "text-tertiary",
+    "core-text-quaternary": "text-quaternary",
+    "core-text-disabled": "text-quaternary",
+    "core-icon-primary": "text-primary",
+    "core-icon-secondary": "text-secondary",
+    "core-icon-disabled": "text-quaternary",
+    "core-fill-primary": "fills-primary",
+    "core-fill-secondary": "fills-secondary",
+    "core-fill-tertiary": "fills-tertiary",
+    "core-button-disabled": "fills-primary",
+    "core-badge-secondary": "fills-primary",
+    "core-surface-primary": "background-primary",
+    "core-surface-secondary": "background-secondary",
+    "core-surface-elevated": "background-elevated",
+    "core-surface-liquid-glass": "fills-liquid-glass",
+    "core-surface-overlay-translucent": "fills-liquid-glass"
+};
+
+function neutralRecipe(token, mode) {
+    if ("core-surface-primary" === token && "dark" === mode) return {
+        token: "core-grey-975",
+        opacity: 1
+    };
+    const recipe = coreGreyRecipes[neutralThemeRecipes[token]][mode];
+    return "core-fill-secondary" === token ? Object.assign(Object.assign({}, recipe), {
+        opacity: .3
+    }) : recipe;
+}
+
+function neutralThemeColors(mode) {
+    return Object.fromEntries(Object.keys(neutralThemeRecipes).map(token => [ token, resolveColorRecipe(neutralRecipe(token, mode)) ]));
+}
+
+const coreColors = Object.assign(Object.assign({}, corePalette), {
+    "core-drop-shadow-light": "rgba(0, 0, 0, 0.1)",
+    "core-drop-shadow-dark": "rgba(0, 0, 0, 0.48)",
+    "core-surface-coverup-translucent-light": "rgba(0, 0, 0, 0.32)",
+    "core-surface-coverup-translucent-dark": "rgba(0, 0, 0, 0.48)",
+    "core-surface-overlay-translucent-light": resolveColorRecipe(coreGreyRecipes["fills-liquid-glass"].light),
+    "core-surface-overlay-translucent-dark": resolveColorRecipe(coreGreyRecipes["fills-liquid-glass"].dark),
+    "surface-primary-tint-light": corePalette["core-grey-40"],
+    "surface-primary-tint-dark": corePalette["core-grey-950"],
+    "scroll-bar-light": corePalette["core-grey-185"],
+    "scroll-bar-dark": corePalette["core-grey-821"],
+    "scroll-bar-hover-light": corePalette["core-grey-230"],
+    "scroll-bar-hover-dark": corePalette["core-grey-770"],
+    "surface-shadow-soft-light": "0px 4px 24px rgba(0, 0, 0, 0.1)",
+    "surface-shadow-soft-dark": "0px 4px 24px rgba(0, 0, 0, 0.48)",
+    "surface-shadow-strong-light": "0px 4px 64px rgba(0, 0, 0, 0.1)",
+    "surface-shadow-strong-dark": "0px 4px 64px rgba(0, 0, 0, 0.48)"
+}), light = Object.assign(Object.assign({}, neutralThemeColors("light")), {
+    "array-land": coreColors["core-lime-100"],
+    "array-land-label": coreColors["core-lime-600"],
+    "array-magenta": coreColors["core-pink-100"],
+    "array-magenta-label": coreColors["core-pink-600"],
+    "array-orange": coreColors["core-orange-100"],
+    "array-orange-label": coreColors["core-orange-600"],
+    "array-purple": coreColors["core-purple-100"],
+    "array-purple-label": coreColors["core-purple-600"],
+    "array-sea": coreColors["core-blue-100"],
+    "array-sea-label": coreColors["core-blue-600"],
+    "array-sky": coreColors["core-cyan-100"],
+    "array-sky-label": coreColors["core-cyan-600"],
+    "array-yellow": coreColors["core-yellow-100"],
+    "array-yellow-label": coreColors["core-yellow-600"],
+    "core-badge-primary": coreColors["core-blue-600"],
+    "core-button-primary": coreColors["core-blue-600"],
     "core-drop-shadow": coreColors["core-drop-shadow-light"],
-    "core-gp-logo-primary": coreColors["brand-sea-700"],
-    "core-gp-logo-secondary": coreColors["brand-grey-950"],
-    "core-icon-dark": coreColors["brand-grey-950"],
-    "core-icon-disabled": coreColors["brand-grey-300"],
-    "core-icon-error": coreColors["product-red-500"],
-    "core-icon-light": coreColors["brand-white-0"],
-    "core-icon-primary": coreColors["brand-grey-950"],
-    "core-icon-secondary": coreColors["brand-grey-700"],
-    "core-icon-tertiary": coreColors["brand-sea-500"],
-    "core-outline-secondary": coreColors["brand-grey-100"],
-    "core-outline-primary": coreColors["brand-grey-100"],
-    "core-outline-special": coreColors["brand-sea-100"],
-    "core-outline-tertiary": coreColors["brand-sea-500"],
+    "core-gp-logo-primary": coreColors["core-blue-700"],
+    "core-gp-logo-secondary": coreColors["core-grey-1000"],
+    "core-icon-dark": coreColors["core-grey-1000"],
+    "core-icon-error": coreColors["core-red-600"],
+    "core-icon-light": coreColors["core-grey-0"],
+    "core-icon-tertiary": coreColors["core-blue-500"],
+    "core-outline-secondary": coreColors["core-grey-95"],
+    "core-outline-primary": coreColors["core-grey-95"],
+    "core-outline-special": coreColors["core-blue-100"],
+    "core-outline-tertiary": coreColors["core-blue-500"],
     "core-surface-coverup-translucent": coreColors["core-surface-coverup-translucent-light"],
-    "core-surface-overlay-translucent": coreColors["core-surface-overlay-translucent-light"],
-    "core-surface-primary": coreColors["brand-white-0"],
     "core-surface-primary-tint": coreColors["surface-primary-tint-light"],
-    "core-surface-secondary": coreColors["brand-grey-50"],
-    "core-surface-special": coreColors["brand-sea-50"],
-    "core-text-dark": coreColors["brand-grey-950"],
-    "core-text-disabled": coreColors["brand-grey-300"],
-    "core-text-error": coreColors["product-red-500"],
-    "core-text-light": coreColors["brand-white-0"],
-    "core-text-primary": coreColors["brand-grey-950"],
-    "core-text-secondary": coreColors["brand-grey-700"],
-    "core-text-tertiary": coreColors["brand-grey-600"],
-    "core-text-special": coreColors["brand-sea-500"],
-    "core-text-accent": coreColors["brand-sky-500"],
-    "core-link-primary": coreColors["brand-sea-500"],
-    "eor-tag-employee": coreColors["brand-sky-700"],
-    "eor-tag-overdue": coreColors["product-red-500"],
-    "eor-tag-paid": coreColors["brand-land-700"],
-    "eor-tag-pending": coreColors["brand-orange-500"],
-    "eor-tag-professional": coreColors["brand-sea-500"],
-    "feedback-attention": coreColors["brand-yellow-500"],
-    "feedback-informative": coreColors["brand-sky-700"],
-    "feedback-positive": coreColors["brand-land-700"],
-    "feedback-urgency": coreColors["brand-orange-500"],
-    "feedback-warning": coreColors["product-red-500"],
-    "gia-tag-risk-high": coreColors["product-red-500"],
-    "gia-tag-risk-low": coreColors["brand-sky-700"],
-    "gia-tag-risk-moderate": coreColors["brand-orange-500"],
-    "gia-text-excerpt-highlight": coreColors["brand-orange-100"],
-    "gia-text-selection": coreColors["brand-sea-100"],
+    "core-surface-special": coreColors["core-blue-50"],
+    "core-text-dark": coreColors["core-grey-1000"],
+    "core-text-error": coreColors["core-red-600"],
+    "core-text-light": coreColors["core-grey-0"],
+    "core-text-special": coreColors["core-blue-600"],
+    "core-text-accent": coreColors["core-cyan-500"],
+    "core-link-primary": coreColors["core-blue-600"],
+    "eor-tag-employee": coreColors["core-cyan-700"],
+    "eor-tag-overdue": coreColors["core-red-600"],
+    "eor-tag-paid": coreColors["core-lime-700"],
+    "eor-tag-pending": coreColors["core-orange-500"],
+    "eor-tag-professional": coreColors["core-blue-500"],
+    "feedback-attention": coreColors["core-yellow-500"],
+    "feedback-informative": coreColors["core-cyan-700"],
+    "feedback-positive": coreColors["core-lime-700"],
+    "feedback-urgency": coreColors["core-orange-500"],
+    "feedback-warning": coreColors["core-red-600"],
+    "gia-tag-risk-high": coreColors["core-red-600"],
+    "gia-tag-risk-low": coreColors["core-cyan-700"],
+    "gia-tag-risk-moderate": coreColors["core-orange-500"],
+    "gia-text-excerpt-highlight": coreColors["core-orange-100"],
+    "gia-text-selection": coreColors["core-blue-100"],
     "scroll-bar": coreColors["scroll-bar-light"],
     "scroll-bar-hover": coreColors["scroll-bar-hover-light"],
     "surface-shadow-soft": coreColors["surface-shadow-soft-light"],
     "surface-shadow-strong": coreColors["surface-shadow-strong-light"]
-}, dark = {
-    "array-land": coreColors["brand-land-100"],
-    "array-land-label": coreColors["brand-land-600"],
-    "array-magenta": coreColors["brand-magenta-100"],
-    "array-magenta-label": coreColors["brand-magenta-600"],
-    "array-orange": coreColors["brand-orange-100"],
-    "array-orange-label": coreColors["brand-orange-600"],
-    "array-purple": coreColors["brand-purple-100"],
-    "array-purple-label": coreColors["brand-purple-600"],
-    "array-sea": coreColors["brand-sea-100"],
-    "array-sea-label": coreColors["brand-sea-600"],
-    "array-sky": coreColors["brand-sky-100"],
-    "array-sky-label": coreColors["brand-sky-600"],
-    "array-yellow": coreColors["brand-yellow-100"],
-    "array-yellow-label": coreColors["brand-yellow-600"],
-    "core-badge-primary": coreColors["brand-sea-500"],
-    "core-badge-secondary": coreColors["brand-grey-700"],
-    "core-button-disabled": coreColors["brand-grey-900"],
-    "core-button-primary": coreColors["brand-sea-500"],
+}), dark = Object.assign(Object.assign({}, neutralThemeColors("dark")), {
+    "array-land": coreColors["core-lime-100"],
+    "array-land-label": coreColors["core-lime-600"],
+    "array-magenta": coreColors["core-pink-100"],
+    "array-magenta-label": coreColors["core-pink-600"],
+    "array-orange": coreColors["core-orange-100"],
+    "array-orange-label": coreColors["core-orange-600"],
+    "array-purple": coreColors["core-purple-100"],
+    "array-purple-label": coreColors["core-purple-600"],
+    "array-sea": coreColors["core-blue-100"],
+    "array-sea-label": coreColors["core-blue-600"],
+    "array-sky": coreColors["core-cyan-100"],
+    "array-sky-label": coreColors["core-cyan-600"],
+    "array-yellow": coreColors["core-yellow-100"],
+    "array-yellow-label": coreColors["core-yellow-600"],
+    "core-badge-primary": coreColors["core-blue-600"],
+    "core-button-primary": coreColors["core-blue-600"],
     "core-drop-shadow": coreColors["core-drop-shadow-dark"],
-    "core-gp-logo-primary": coreColors["brand-sea-500"],
-    "core-gp-logo-secondary": coreColors["brand-white-0"],
-    "core-icon-dark": coreColors["brand-grey-950"],
-    "core-icon-disabled": coreColors["brand-grey-500"],
-    "core-icon-error": coreColors["product-red-400"],
-    "core-icon-light": coreColors["brand-white-0"],
-    "core-icon-primary": coreColors["brand-white-0"],
-    "core-icon-secondary": coreColors["brand-grey-200"],
-    "core-icon-tertiary": coreColors["brand-sky-300"],
-    "core-outline-secondary": coreColors["brand-grey-900"],
-    "core-outline-primary": coreColors["brand-grey-700"],
-    "core-outline-special": coreColors["brand-sky-900"],
-    "core-outline-tertiary": coreColors["brand-sky-300"],
+    "core-gp-logo-primary": coreColors["core-blue-450"],
+    "core-gp-logo-secondary": coreColors["core-grey-0"],
+    "core-icon-dark": coreColors["core-grey-1000"],
+    "core-icon-error": coreColors["core-red-450"],
+    "core-icon-light": coreColors["core-grey-0"],
+    "core-icon-tertiary": coreColors["core-cyan-300"],
+    "core-outline-secondary": coreColors["core-grey-880"],
+    "core-outline-primary": coreColors["core-grey-821"],
+    "core-outline-special": coreColors["core-cyan-900"],
+    "core-outline-tertiary": coreColors["core-cyan-300"],
     "core-surface-coverup-translucent": coreColors["core-surface-coverup-translucent-dark"],
-    "core-surface-overlay-translucent": coreColors["core-surface-overlay-translucent-dark"],
-    "core-surface-primary": coreColors["brand-grey-950"],
     "core-surface-primary-tint": coreColors["surface-primary-tint-dark"],
-    "core-surface-secondary": coreColors["brand-grey-900"],
-    "core-surface-special": coreColors["brand-sky-950"],
-    "core-text-dark": coreColors["brand-grey-950"],
-    "core-text-disabled": coreColors["brand-grey-500"],
-    "core-text-error": coreColors["product-red-400"],
-    "core-text-light": coreColors["brand-white-0"],
-    "core-text-primary": coreColors["brand-white-0"],
-    "core-text-secondary": coreColors["brand-grey-200"],
-    "core-text-tertiary": coreColors["brand-grey-400"],
-    "core-text-special": coreColors["brand-sky-300"],
-    "core-text-accent": coreColors["brand-sky-300"],
-    "core-link-primary": coreColors["brand-sky-300"],
-    "eor-tag-employee": coreColors["brand-sky-700"],
-    "eor-tag-overdue": coreColors["product-red-400"],
-    "eor-tag-paid": coreColors["brand-land-700"],
-    "eor-tag-pending": coreColors["brand-orange-500"],
-    "eor-tag-professional": coreColors["brand-sea-500"],
-    "feedback-attention": coreColors["brand-yellow-400"],
-    "feedback-informative": coreColors["brand-sky-600"],
-    "feedback-positive": coreColors["brand-land-700"],
-    "feedback-urgency": coreColors["brand-orange-500"],
-    "feedback-warning": coreColors["product-red-400"],
-    "gia-tag-risk-high": coreColors["product-red-400"],
-    "gia-tag-risk-low": coreColors["brand-sky-600"],
-    "gia-tag-risk-moderate": coreColors["brand-orange-500"],
-    "gia-text-excerpt-highlight": coreColors["brand-orange-100"],
-    "gia-text-selection": coreColors["brand-sea-900"],
+    "core-surface-special": coreColors["core-cyan-950"],
+    "core-text-dark": coreColors["core-grey-1000"],
+    "core-text-error": coreColors["core-red-450"],
+    "core-text-light": coreColors["core-grey-0"],
+    "core-text-special": coreColors["core-cyan-300"],
+    "core-text-accent": coreColors["core-cyan-300"],
+    "core-link-primary": coreColors["core-cyan-300"],
+    "eor-tag-employee": coreColors["core-cyan-700"],
+    "eor-tag-overdue": coreColors["core-red-450"],
+    "eor-tag-paid": coreColors["core-lime-700"],
+    "eor-tag-pending": coreColors["core-orange-500"],
+    "eor-tag-professional": coreColors["core-blue-500"],
+    "feedback-attention": coreColors["core-yellow-400"],
+    "feedback-informative": coreColors["core-cyan-600"],
+    "feedback-positive": coreColors["core-lime-700"],
+    "feedback-urgency": coreColors["core-orange-500"],
+    "feedback-warning": coreColors["core-red-600"],
+    "gia-tag-risk-high": coreColors["core-red-450"],
+    "gia-tag-risk-low": coreColors["core-cyan-600"],
+    "gia-tag-risk-moderate": coreColors["core-orange-500"],
+    "gia-text-excerpt-highlight": coreColors["core-orange-100"],
+    "gia-text-selection": coreColors["core-blue-900"],
     "scroll-bar": coreColors["scroll-bar-dark"],
     "scroll-bar-hover": coreColors["scroll-bar-hover-dark"],
     "surface-shadow-soft": coreColors["surface-shadow-soft-dark"],
     "surface-shadow-strong": coreColors["surface-shadow-strong-dark"]
-}, colorCssVars = {
+}), colorCssVars = {
+    "core-text-quaternary": "var(--core-text-quaternary)",
+    "core-fill-primary": "var(--core-fill-primary)",
+    "core-fill-secondary": "var(--core-fill-secondary)",
+    "core-fill-tertiary": "var(--core-fill-tertiary)",
+    "core-surface-elevated": "var(--core-surface-elevated)",
+    "core-surface-liquid-glass": "var(--core-surface-liquid-glass)",
     "array-land": "var(--array-land)",
     "array-land-label": "var(--array-land-label)",
     "array-magenta": "var(--array-magenta)",
@@ -311,6 +553,12 @@ const coreColors = {
     "surface-shadow-soft": "var(--surface-shadow-soft)",
     "surface-shadow-strong": "var(--surface-shadow-strong)"
 }, colorClass = {
+    "core-text-quaternary": "core-text-quaternary",
+    "core-fill-primary": "core-fill-primary",
+    "core-fill-secondary": "core-fill-secondary",
+    "core-fill-tertiary": "core-fill-tertiary",
+    "core-surface-elevated": "core-surface-elevated",
+    "core-surface-liquid-glass": "core-surface-liquid-glass",
     "array-land": "array-land",
     "array-land-label": "array-land-label",
     "array-magenta": "array-magenta",