Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* DO NOT EDIT this file directly, instead modify design-tokens.json
* and run `npm run build` to see your changes. */
export const tokensTable = {
"background-color": [
{
value: {
light: "var(--color-white)",
dark: "var(--color-gray-80)",
prefersContrast: "var(--background-color-canvas)",
default: "light-dark(var(--color-white), var(--color-gray-80))",
},
name: "--background-color-box",
},
{
value: {
prefersContrast: "var(--background-color-canvas)",
brand: {
light: "var(--color-gray-20)",
dark: "var(--color-gray-80)",
default: "light-dark(var(--color-gray-20), var(--color-gray-80))",
},
platform: {
default: "color-mix(in srgb, currentColor 6%, transparent)",
},
},
name: "--background-color-box-info",
},
{
value: {
prefersContrast: "Canvas",
brand: {
light: "var(--color-white)",
dark: "var(--color-gray-90)",
default: "light-dark(var(--color-white), var(--color-gray-90))",
},
platform: { default: "Canvas" },
},
name: "--background-color-canvas",
},
{
value: {
light: "var(--color-red-0)",
dark: "var(--color-red-90)",
prefersContrast: "var(--background-color-canvas)",
default: "light-dark(var(--color-red-0), var(--color-red-90))",
},
name: "--background-color-critical",
},
{
value: {
light: "var(--color-blue-0)",
dark: "var(--color-blue-90)",
prefersContrast: "var(--background-color-canvas)",
default: "light-dark(var(--color-blue-0), var(--color-blue-90))",
},
name: "--background-color-information",
},
{
value: {
light: "var(--color-green-0)",
dark: "var(--color-green-90)",
prefersContrast: "var(--background-color-canvas)",
default: "light-dark(var(--color-green-0), var(--color-green-90))",
},
name: "--background-color-success",
},
{
value: {
light: "var(--color-yellow-0)",
dark: "var(--color-yellow-90)",
prefersContrast: "var(--background-color-canvas)",
default: "light-dark(var(--color-yellow-0), var(--color-yellow-90))",
},
name: "--background-color-warning",
},
{
value: "var(--color-black-alpha-50)",
name: "--background-color-overlay",
},
{
value: {
brand: {
default:
"color-mix(in srgb, var(--color-accent-primary) 20%, transparent)",
},
platform: {
default: "color-mix(in srgb, currentColor 20%, transparent)",
},
prefersContrast: "SelectedItem",
},
name: "--background-color-list-item-hover",
},
{
value: { default: "transparent", forcedColors: "Canvas" },
name: "--badge-background-color",
},
{
value: {
light: "var(--color-green-70)",
dark: "var(--color-green-40)",
forcedColors: "AccentColor",
default: "light-dark(var(--color-green-70), var(--color-green-40))",
},
name: "--badge-background-color-filled",
},
{
value: {
forcedColors: "ButtonFace",
brand: { default: "color-mix(in srgb, currentColor 7%, transparent)" },
platform: {
default: "color-mix(in srgb, currentColor 13%, transparent)",
},
},
name: "--button-background-color",
},
{
value: {
forcedColors: "SelectedItemText",
brand: { default: "color-mix(in srgb, currentColor 14%, transparent)" },
platform: {
default: "color-mix(in srgb, currentColor 17%, transparent)",
},
},
name: "--button-background-color-hover",
},
{
value: {
forcedColors: "SelectedItemText",
brand: { default: "color-mix(in srgb, currentColor 21%, transparent)" },
platform: {
default: "color-mix(in srgb, currentColor 30%, transparent)",
},
},
name: "--button-background-color-active",
},
{
value: {
default: "var(--button-background-color)",
forcedColors: "ButtonFace",
},
name: "--button-background-color-disabled",
},
{
value: "var(--color-accent-primary)",
name: "--button-background-color-primary",
},
{
value: "var(--color-accent-primary-hover)",
name: "--button-background-color-primary-hover",
},
{
value: "var(--color-accent-primary-active)",
name: "--button-background-color-primary-active",
},
{
value: {
default: "var(--button-background-color-primary)",
forcedColors: "var(--button-text-color-disabled)",
},
name: "--button-background-color-primary-disabled",
},
{
value: "var(--button-background-color-primary-active)",
name: "--button-background-color-primary-selected",
},
{
value: {
light: "var(--color-red-60)",
dark: "var(--color-red-30)",
forcedColors: "var(--button-background-color-primary)",
default: "light-dark(var(--color-red-60), var(--color-red-30))",
},
name: "--button-background-color-destructive",
},
{
value: {
light: "var(--color-red-80)",
dark: "var(--color-red-10)",
forcedColors: "var(--button-background-color-primary-active)",
default: "light-dark(var(--color-red-80), var(--color-red-10))",
},
name: "--button-background-color-destructive-active",
},
{
value: {
default: "var(--button-background-color-destructive)",
forcedColors: "var(--button-background-color-primary-disabled)",
},
name: "--button-background-color-destructive-disabled",
},
{
value: {
light: "var(--color-red-70)",
dark: "var(--color-red-20)",
forcedColors: "var(--button-background-color-primary-hover)",
default: "light-dark(var(--color-red-70), var(--color-red-20))",
},
name: "--button-background-color-destructive-hover",
},
{
value: "var(--button-background-color-destructive-active)",
name: "--button-background-color-destructive-selected",
},
{
value: {
default: "transparent",
brand: { forcedColors: "var(--button-background-color)" },
},
name: "--button-background-color-ghost",
},
{
value: "var(--button-background-color-active)",
name: "--button-background-color-ghost-active",
},
{
value: {
default: "var(--button-background-color-ghost)",
brand: { forcedColors: "var(--button-background-color-disabled)" },
},
name: "--button-background-color-ghost-disabled",
},
{
value: "var(--button-background-color-hover)",
name: "--button-background-color-ghost-hover",
},
{
value: "var(--button-background-color-ghost-active)",
name: "--button-background-color-ghost-selected",
},
{
value: "var(--button-background-color-ghost)",
name: "--button-background-color-menu",
},
{
value: {
default: "var(--button-background-color-ghost-active)",
forcedColors: "var(--button-background-color-primary)",
},
name: "--button-background-color-menu-active",
},
{
value: "var(--button-background-color-ghost-disabled)",
name: "--button-background-color-menu-disabled",
},
{
value: {
default: "var(--button-background-color-ghost-hover)",
forcedColors: "var(--button-background-color-primary)",
},
name: "--button-background-color-menu-hover",
},
{
value: "var(--button-background-color-active)",
name: "--button-background-color-selected",
},
{
value: {
light: "#f8f8fa",
dark: "rgb(35, 34, 43)",
forcedColors: "Canvas",
default: "light-dark(#f8f8fa, rgb(35, 34, 43))",
},
name: "--table-background-color",
},
{
value: {
default: "var(--color-accent-primary)",
forcedColors: "AccentColor",
},
name: "--table-header-background-color",
},
{
value: { default: "var(--background-color-canvas)" },
name: "--table-row-background-color",
},
{
value: {
forcedColors: "var(--background-color-canvas)",
brand: {
light: "#f0f0f4",
dark: "var(--color-gray-80)",
default: "light-dark(#f0f0f4, var(--color-gray-80))",
},
platform: {
light: "rgba(0, 0, 0, 0.05)",
dark: "rgba(255, 255, 255, 0.05)",
default: "light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05))",
},
},
name: "--table-row-background-color-alternate",
},
],
"border-color": [
{
value: {
brand: {
light: "var(--color-gray-50)",
dark: "var(--color-gray-70)",
default: "light-dark(var(--color-gray-50), var(--color-gray-70))",
},
prefersContrast: "CanvasText",
platform: {
default: "color-mix(in srgb, currentColor 50%, transparent)",
},
},
name: "--border-color",
},
{
value: { default: "transparent", prefersContrast: "CanvasText" },
name: "--border-color-transparent",
},
{
value: {
default: "color-mix(in srgb, currentColor 10%, transparent)",
prefersContrast: "color-mix(in srgb, currentColor 41%, transparent)",
forcedColors: "CanvasText",
},
name: "--border-color-card",
},
{
value: {
brand: {
light: "var(--color-gray-30)",
dark: "var(--color-gray-70)",
default: "light-dark(var(--color-gray-30), var(--color-gray-70))",
},
platform: {
default: "color-mix(in srgb, currentColor 24%, transparent)",
},
prefersContrast: "currentColor",
forcedColors: "ButtonText",
},
name: "--border-color-deemphasized",
},
{
value: {
prefersContrast: "var(--text-color)",
forcedColors: "ButtonText",
brand: {
light: "var(--color-gray-60)",
dark: "var(--color-gray-50)",
default: "light-dark(var(--color-gray-60), var(--color-gray-50))",
},
platform: {
default: "color-mix(in srgb, currentColor 15%, var(--color-gray-60))",
},
},
name: "--border-color-interactive",
},
{
value: {
default: "var(--border-color-interactive)",
forcedColors: "SelectedItem",
},
name: "--border-color-interactive-hover",
},
{
value: {
default: "var(--border-color-interactive)",
forcedColors: "ButtonText",
},
name: "--border-color-interactive-active",
},
{
value: {
default: "var(--border-color-interactive)",
forcedColors: "GrayText",
},
name: "--border-color-interactive-disabled",
},
{
value: {
default: "var(--color-accent-primary)",
forcedColors: "SelectedItem",
},
name: "--border-color-selected",
},
{ value: "var(--border-color)", name: "--badge-border-color" },
{
value: {
light: "rgba(251, 251, 254, 0.4)",
dark: "rgba(21, 20, 26, 0.4)",
forcedColors: "CanvasText",
default: "light-dark(rgba(251, 251, 254, 0.4), rgba(21, 20, 26, 0.4))",
},
name: "--badge-border-color-filled",
},
{
value: {
default: "transparent",
prefersContrast: "var(--button-text-color)",
forcedColors: "var(--border-color-interactive)",
},
name: "--button-border-color",
},
{
value: {
default: "var(--button-border-color)",
forcedColors: "var(--border-color-interactive-active)",
},
name: "--button-border-color-active",
},
{
value: {
default: "transparent",
forcedColors: "var(--button-border-color-primary)",
},
name: "--button-border-color-destructive",
},
{
value: {
default: "var(--button-border-color-destructive)",
forcedColors: "var(--button-border-color-primary-active)",
},
name: "--button-border-color-destructive-active",
},
{
value: {
default: "var(--button-border-color-destructive)",
forcedColors: "var(--button-border-color-primary-disabled)",
},
name: "--button-border-color-destructive-disabled",
},
{
value: {
default: "var(--button-border-color-destructive)",
forcedColors: "var(--button-border-color-primary-hover)",
},
name: "--button-border-color-destructive-hover",
},
{
value: "var(--button-border-color-destructive-active)",
name: "--button-border-color-destructive-selected",
},
{
value: {
default: "var(--button-border-color)",
forcedColors: "var(--border-color-interactive-disabled)",
},
name: "--button-border-color-disabled",
},
{
value: { default: "var(--button-border-color)" },
name: "--button-border-color-ghost",
},
{
value: { default: "var(--button-border-color-active)" },
name: "--button-border-color-ghost-active",
},
{
value: { default: "var(--button-border-color-disabled)" },
name: "--button-border-color-ghost-disabled",
},
{
value: { default: "var(--button-border-color-hover)" },
name: "--button-border-color-ghost-hover",
},
{
value: "var(--button-border-color-ghost-active)",
name: "--button-border-color-ghost-selected",
},
{
value: {
default: "var(--button-border-color)",
forcedColors: "var(--border-color-interactive-hover)",
},
name: "--button-border-color-hover",
},
{
value: { default: "transparent", forcedColors: "ButtonFace" },
name: "--button-border-color-primary",
},
{
value: {
default: "var(--button-border-color-primary)",
forcedColors: "ButtonText",
},
name: "--button-border-color-primary-active",
},
{
value: "var(--button-border-color-primary)",
name: "--button-border-color-primary-disabled",
},
{
value: {
default: "var(--button-border-color-primary)",
forcedColors: "SelectedItemText",
},
name: "--button-border-color-primary-hover",
},
{
value: "var(--button-border-color-primary-active)",
name: "--button-border-color-primary-selected",
},
{
value: "var(--button-border-color-active)",
name: "--button-border-color-selected",
},
{
value: {
default: "color-mix(in srgb, currentColor 41%, transparent)",
forcedColors: "CanvasText",
},
name: "--table-border-color",
},
],
"border-radius": [
{ value: "9999px", name: "--border-radius-circle" },
{ value: "2px", name: "--border-radius-xsmall" },
{ value: "4px", name: "--border-radius-small" },
{ value: "8px", name: "--border-radius-medium" },
{ value: "16px", name: "--border-radius-large" },
{ value: "var(--border-radius-medium)", name: "--button-border-radius" },
],
"border-width": [{ value: "1px", name: "--border-width" }],
"box-shadow": [
{
value:
"0 0 1px var(--box-shadow-color-darker-layer-1), 0 1px 2px var(--box-shadow-color-darker-layer-2)",
name: "--box-shadow-level-1",
},
{
value:
"0 0.25px 0.75px var(--box-shadow-color-lighter-layer-1), 0 2px 6px var(--box-shadow-color-lighter-layer-2)",
name: "--box-shadow-level-2",
},
{
value:
"0 0.375px 1.5px var(--box-shadow-color-lighter-layer-1), 0 3px 12px var(--box-shadow-color-lighter-layer-2)",
name: "--box-shadow-level-3",
},
{
value:
"0 0.5px 2px var(--box-shadow-color-lighter-layer-1), 0 4px 16px var(--box-shadow-color-lighter-layer-2)",
name: "--box-shadow-level-4",
},
{ value: "var(--box-shadow-level-1)", name: "--box-shadow-tab" },
{ value: "var(--box-shadow-level-2)", name: "--box-shadow-card" },
{ value: "var(--box-shadow-level-4)", name: "--box-shadow-card-hover" },
{ value: "var(--box-shadow-level-3)", name: "--box-shadow-popup" },
{
value: {
light: "rgba(0, 0, 0, 0.15)",
dark: "rgba(0, 0, 0, 0.2)",
default: "light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.2))",
},
name: "--box-shadow-color-darker-layer-1",
},
{
value: {
light: "rgba(0, 0, 0, 0.2)",
dark: "rgba(0, 0, 0, 0.4)",
default: "light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4))",
},
name: "--box-shadow-color-darker-layer-2",
},
{
value: {
light: "rgba(0, 0, 0, 0.05)",
dark: "rgba(0, 0, 0, 0.2)",
default: "light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2))",
},
name: "--box-shadow-color-lighter-layer-1",
},
{
value: {
light: "rgba(0, 0, 0, 0.1)",
dark: "rgba(0, 0, 0, 0.4)",
default: "light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4))",
},
name: "--box-shadow-color-lighter-layer-2",
},
],
color: [
{ value: "#f0f0f4", name: "--color-gray-20" },
{ value: "#bac2ca", name: "--color-gray-30" },
{ value: "#bfbfc9", name: "--color-gray-50" },
{ value: "#8f8f9d", name: "--color-gray-60" },
{ value: "#5b5b66", name: "--color-gray-70" },
{ value: "#23222b", name: "--color-gray-80" },
{ value: "#1c1b22", name: "--color-gray-90" },
{ value: "#15141a", name: "--color-gray-100" },
{ value: "#fbfbfe", name: "--color-gray-05" },
{ value: "oklch(97% 0.05 15)", name: "--color-red-0" },
{ value: "oklch(90% 0.1 15)", name: "--color-red-10" },
{ value: "oklch(83% 0.14 15)", name: "--color-red-20" },
{ value: "oklch(76% 0.17 15)", name: "--color-red-30" },
{ value: "oklch(69% 0.19 15)", name: "--color-red-40" },
{ value: "oklch(62% 0.21 15)", name: "--color-red-50" },
{ value: "oklch(55% 0.21 15)", name: "--color-red-60" },
{ value: "oklch(48% 0.2 15)", name: "--color-red-70" },
{ value: "oklch(41% 0.17 15)", name: "--color-red-80" },
{ value: "oklch(34% 0.14 15)", name: "--color-red-90" },
{ value: "oklch(27% 0.1 15)", name: "--color-red-100" },
{ value: "oklch(20% 0.05 15)", name: "--color-red-110" },
{ value: "oklch(97% 0.05 50)", name: "--color-orange-0" },
{ value: "oklch(90% 0.10 50)", name: "--color-orange-10" },
{ value: "oklch(86% 0.14 50)", name: "--color-orange-20" },
{ value: "oklch(79% 0.17 50)", name: "--color-orange-30" },
{ value: "oklch(72% 0.19 50)", name: "--color-orange-40" },
{ value: "oklch(65% 0.21 50)", name: "--color-orange-50" },
{ value: "oklch(58% 0.21 50)", name: "--color-orange-60" },
{ value: "oklch(48% 0.20 50)", name: "--color-orange-70" },
{ value: "oklch(41% 0.17 50)", name: "--color-orange-80" },
{ value: "oklch(34% 0.14 50)", name: "--color-orange-90" },
{ value: "oklch(27% 0.10 50)", name: "--color-orange-100" },
{ value: "oklch(20% 0.05 50)", name: "--color-orange-110" },
{ value: "oklch(97% 0.05 90)", name: "--color-yellow-0" },
{ value: "oklch(93% 0.1 90)", name: "--color-yellow-10" },
{ value: "oklch(86% 0.14 90)", name: "--color-yellow-20" },
{ value: "oklch(79% 0.2 90)", name: "--color-yellow-30" },
{ value: "oklch(72% 0.22 90)", name: "--color-yellow-40" },
{ value: "oklch(65% 0.24 90)", name: "--color-yellow-50" },
{ value: "oklch(58% 0.24 90)", name: "--color-yellow-60" },
{ value: "oklch(51% 0.23 90)", name: "--color-yellow-70" },
{ value: "oklch(41% 0.2 90)", name: "--color-yellow-80" },
{ value: "oklch(34% 0.17 90)", name: "--color-yellow-90" },
{ value: "oklch(27% 0.13 90)", name: "--color-yellow-100" },
{ value: "oklch(20% 0.08 90)", name: "--color-yellow-110" },
{ value: "oklch(97% 0.05 145)", name: "--color-green-0" },
{ value: "oklch(90% 0.1 145)", name: "--color-green-10" },
{ value: "oklch(83% 0.14 145)", name: "--color-green-20" },
{ value: "oklch(76% 0.17 145)", name: "--color-green-30" },
{ value: "oklch(69% 0.19 145)", name: "--color-green-40" },
{ value: "oklch(62% 0.21 145)", name: "--color-green-50" },
{ value: "oklch(55% 0.21 145)", name: "--color-green-60" },
{ value: "oklch(48% 0.2 145)", name: "--color-green-70" },
{ value: "oklch(41% 0.17 145)", name: "--color-green-80" },
{ value: "oklch(34% 0.14 145)", name: "--color-green-90" },
{ value: "oklch(27% 0.1 145)", name: "--color-green-100" },
{ value: "oklch(20% 0.05 145)", name: "--color-green-110" },
{ value: "oklch(97% 0.05 205)", name: "--color-cyan-0" },
{ value: "oklch(90% 0.07 205)", name: "--color-cyan-10" },
{ value: "oklch(83% 0.11 205)", name: "--color-cyan-20" },
{ value: "oklch(76% 0.14 205)", name: "--color-cyan-30" },
{ value: "oklch(69% 0.19 205)", name: "--color-cyan-40" },
{ value: "oklch(62% 0.21 205)", name: "--color-cyan-50" },
{ value: "oklch(55% 0.21 205)", name: "--color-cyan-60" },
{ value: "oklch(48% 0.2 205)", name: "--color-cyan-70" },
{ value: "oklch(41% 0.17 205)", name: "--color-cyan-80" },
{ value: "oklch(34% 0.14 205)", name: "--color-cyan-90" },
{ value: "oklch(27% 0.1 205)", name: "--color-cyan-100" },
{ value: "oklch(20% 0.05 205)", name: "--color-cyan-110" },
{ value: "oklch(97% 0.05 260)", name: "--color-blue-0" },
{ value: "oklch(90% 0.13 260)", name: "--color-blue-10" },
{ value: "oklch(83% 0.17 260)", name: "--color-blue-20" },
{ value: "oklch(76% 0.2 260)", name: "--color-blue-30" },
{ value: "oklch(69% 0.22 260)", name: "--color-blue-40" },
{ value: "oklch(62% 0.24 260)", name: "--color-blue-50" },
{ value: "oklch(55% 0.24 260)", name: "--color-blue-60" },
{ value: "oklch(48% 0.2 260)", name: "--color-blue-70" },
{ value: "oklch(41% 0.17 260)", name: "--color-blue-80" },
{ value: "oklch(34% 0.14 260)", name: "--color-blue-90" },
{ value: "oklch(27% 0.1 260)", name: "--color-blue-100" },
{ value: "oklch(20% 0.05 260)", name: "--color-blue-110" },
{ value: "oklch(97% 0.05 290)", name: "--color-violet-0" },
{ value: "oklch(90% 0.13 290)", name: "--color-violet-10" },
{ value: "oklch(83% 0.17 290)", name: "--color-violet-20" },
{ value: "oklch(76% 0.2 290)", name: "--color-violet-30" },
{ value: "oklch(69% 0.22 290)", name: "--color-violet-40" },
{ value: "oklch(62% 0.24 290)", name: "--color-violet-50" },
{ value: "oklch(55% 0.24 290)", name: "--color-violet-60" },
{ value: "oklch(48% 0.2 290)", name: "--color-violet-70" },
{ value: "oklch(41% 0.17 290)", name: "--color-violet-80" },
{ value: "oklch(34% 0.14 290)", name: "--color-violet-90" },
{ value: "oklch(27% 0.1 290)", name: "--color-violet-100" },
{ value: "oklch(20% 0.05 290)", name: "--color-violet-110" },
{ value: "oklch(97% 0.05 315)", name: "--color-purple-0" },
{ value: "oklch(90% 0.1 315)", name: "--color-purple-10" },
{ value: "oklch(83% 0.14 315)", name: "--color-purple-20" },
{ value: "oklch(76% 0.17 315)", name: "--color-purple-30" },
{ value: "oklch(69% 0.19 315)", name: "--color-purple-40" },
{ value: "oklch(62% 0.21 315)", name: "--color-purple-50" },
{ value: "oklch(55% 0.21 315)", name: "--color-purple-60" },
{ value: "oklch(48% 0.2 315)", name: "--color-purple-70" },
{ value: "oklch(41% 0.17 315)", name: "--color-purple-80" },
{ value: "oklch(34% 0.14 315)", name: "--color-purple-90" },
{ value: "oklch(27% 0.1 315)", name: "--color-purple-100" },
{ value: "oklch(20% 0.05 315)", name: "--color-purple-110" },
{ value: "oklch(97% 0.05 360)", name: "--color-pink-0" },
{ value: "oklch(90% 0.1 360)", name: "--color-pink-10" },
{ value: "oklch(83% 0.14 360)", name: "--color-pink-20" },
{ value: "oklch(76% 0.17 360)", name: "--color-pink-30" },
{ value: "oklch(69% 0.19 360)", name: "--color-pink-40" },
{ value: "oklch(62% 0.21 360)", name: "--color-pink-50" },
{ value: "oklch(55% 0.21 360)", name: "--color-pink-60" },
{ value: "oklch(48% 0.2 360)", name: "--color-pink-70" },
{ value: "oklch(41% 0.17 360)", name: "--color-pink-80" },
{ value: "oklch(34% 0.14 360)", name: "--color-pink-90" },
{ value: "oklch(27% 0.1 360)", name: "--color-pink-100" },
{ value: "oklch(20% 0.05 360)", name: "--color-pink-110" },
{ value: "#ffffff", name: "--color-white" },
{ value: "oklch(1 0 0 / 10%)", name: "--color-white-alpha-10" },
{ value: "oklch(1 0 0 / 20%)", name: "--color-white-alpha-20" },
{ value: "oklch(1 0 0 / 30%)", name: "--color-white-alpha-30" },
{ value: "oklch(1 0 0 / 40%)", name: "--color-white-alpha-40" },
{ value: "oklch(1 0 0 / 50%)", name: "--color-white-alpha-50" },
{ value: "oklch(1 0 0 / 60%)", name: "--color-white-alpha-60" },
{ value: "oklch(1 0 0 / 70%)", name: "--color-white-alpha-70" },
{ value: "oklch(1 0 0 / 80%)", name: "--color-white-alpha-80" },
{ value: "oklch(1 0 0 / 90%)", name: "--color-white-alpha-90" },
{ value: "#000000", name: "--color-black" },
{ value: "oklch(0 0 0 / 10%)", name: "--color-black-alpha-10" },
{ value: "oklch(0 0 0 / 20%)", name: "--color-black-alpha-20" },
{ value: "oklch(0 0 0 / 30%)", name: "--color-black-alpha-30" },
{ value: "oklch(0 0 0 / 40%)", name: "--color-black-alpha-40" },
{ value: "oklch(0 0 0 / 50%)", name: "--color-black-alpha-50" },
{ value: "oklch(0 0 0 / 60%)", name: "--color-black-alpha-60" },
{ value: "oklch(0 0 0 / 70%)", name: "--color-black-alpha-70" },
{ value: "oklch(0 0 0 / 80%)", name: "--color-black-alpha-80" },
{ value: "oklch(0 0 0 / 90%)", name: "--color-black-alpha-90" },
{
value: {
forcedColors: "ButtonText",
brand: {
light: "var(--color-blue-60)",
dark: "var(--color-cyan-30)",
default: "light-dark(var(--color-blue-60), var(--color-cyan-30))",
},
platform: { default: "AccentColor" },
},
name: "--color-accent-primary",
},
{
value: {
forcedColors: "SelectedItem",
brand: {
light: "var(--color-blue-70)",
dark: "var(--color-cyan-20)",
default: "light-dark(var(--color-blue-70), var(--color-cyan-20))",
},
platform: {
default: "color-mix(in srgb, black 10%, var(--color-accent-primary))",
},
},
name: "--color-accent-primary-hover",
},
{
value: {
forcedColors: "var(--color-accent-primary-hover)",
brand: {
light: "var(--color-blue-80)",
dark: "var(--color-cyan-10)",
default: "light-dark(var(--color-blue-80), var(--color-cyan-10))",
},
platform: {
default: "color-mix(in srgb, black 20%, var(--color-accent-primary))",
},
},
name: "--color-accent-primary-active",
},
{
value: {
forcedColors: "SelectedItem",
brand: {
light: "var(--color-blue-60)",
dark: "var(--color-cyan-30)",
default: "light-dark(var(--color-blue-60), var(--color-cyan-30))",
},
platform: { default: "SelectedItem" },
},
name: "--color-accent-primary-selected",
},
{
value: {
platform: { default: "AccentColor" },
brand: {
light: "#2ac3a2",
dark: "#54ffbd",
default: "light-dark(#2ac3a2, #54ffbd)",
},
prefersContrast: "AccentColor",
},
name: "--attention-dot-color",
},
],
dimension: [
{ value: "2px", name: "--dimension-2" },
{ value: "4px", name: "--dimension-4" },
{ value: "8px", name: "--dimension-8" },
{ value: "12px", name: "--dimension-12" },
{ value: "16px", name: "--dimension-16" },
{ value: "20px", name: "--dimension-20" },
{ value: "24px", name: "--dimension-24" },
{ value: "32px", name: "--dimension-32" },
{ value: "40px", name: "--dimension-40" },
{ value: "48px", name: "--dimension-48" },
{ value: "56px", name: "--dimension-56" },
{ value: "64px", name: "--dimension-64" },
{ value: "80px", name: "--dimension-80" },
{ value: "96px", name: "--dimension-96" },
{ value: "100px", name: "--dimension-100" },
{ value: "200px", name: "--dimension-200" },
{ value: "300px", name: "--dimension-300" },
{ value: "400px", name: "--dimension-400" },
{ value: "500px", name: "--dimension-500" },
{ value: "1rem", name: "--dimension-relative-100" },
{ value: "1.25rem", name: "--dimension-relative-125" },
{ value: "1.5rem", name: "--dimension-relative-150" },
{ value: "2rem", name: "--dimension-relative-200" },
{ value: "2.5rem", name: "--dimension-relative-250" },
{ value: "3rem", name: "--dimension-relative-300" },
{ value: "3.5rem", name: "--dimension-relative-350" },
{ value: "4rem", name: "--dimension-relative-400" },
{ value: "5rem", name: "--dimension-relative-500" },
{ value: "6rem", name: "--dimension-relative-600" },
{ value: "0.125rem", name: "--dimension-relative-0125" },
{ value: "0.25rem", name: "--dimension-relative-025" },
{ value: "0.5rem", name: "--dimension-relative-050" },
{ value: "0.75rem", name: "--dimension-relative-075" },
],
outline: [
{
value: "var(--focus-outline-width) solid var(--focus-outline-color)",
name: "--focus-outline",
},
],
"outline-color": [
{
value: {
default: "var(--color-accent-primary)",
forcedColors: "var(--text-color)",
},
name: "--focus-outline-color",
},
{
value: {
light: "var(--color-red-70)",
dark: "var(--color-red-20)",
prefersContrast: "var(--border-color)",
default: "light-dark(var(--color-red-70), var(--color-red-20))",
},
name: "--outline-color-error",
},
],
"outline-offset": [
{
value: "calc(-1 * var(--focus-outline-width))",
name: "--focus-outline-inset",
},
{ value: "2px", name: "--focus-outline-offset" },
{ value: "1px", name: "--link-focus-outline-offset" },
],
"outline-width": [{ value: "2px", name: "--focus-outline-width" }],
"font-size": [
{
value: { brand: { default: "15px" }, platform: { default: "unset" } },
name: "--font-size-root",
},
{
value: {
brand: {
default: "0.733rem",
comment:
"11px / Note this token is to be used in rare cases because its hard to read. Please consult with the Design Systems and A11y teams for case-by-case feedback.",
},
platform: { default: "unset" },
},
name: "--font-size-xsmall",
},
{
value: {
brand: { default: "0.867rem", comment: "13px" },
platform: { default: "unset" },
},
name: "--font-size-small",
},
{
value: {
brand: { default: "1.133rem", comment: "17px" },
platform: { default: "unset" },
},
name: "--font-size-large",
},
{
value: {
brand: { default: "1.467rem", comment: "22px" },
platform: { default: "unset" },
},
name: "--font-size-xlarge",
},
{
value: {
brand: { default: "1.6rem", comment: "24px" },
platform: { default: "unset" },
},
name: "--font-size-xxlarge",
},
{
value: {
brand: { default: "2.2rem", comment: "33px" },
platform: { default: "unset" },
},
name: "--font-size-xxxlarge",
},
{ value: "var(--font-size-xxlarge)", name: "--font-size-heading-xlarge" },
{ value: "var(--font-size-xlarge)", name: "--font-size-heading-large" },
{ value: "var(--font-size-large)", name: "--font-size-heading-medium" },
{ value: "var(--font-size-root)", name: "--button-font-size" },
{ value: "var(--font-size-small)", name: "--button-font-size-small" },
],
"font-weight": [
{ value: "normal", name: "--font-weight" },
{ value: 600, name: "--font-weight-semibold" },
{ value: 700, name: "--font-weight-bold" },
{ value: "var(--font-weight-semibold)", name: "--font-weight-heading" },
{ value: "var(--font-weight-semibold)", name: "--button-font-weight" },
],
size: [
{ value: "var(--dimension-40)", name: "--size-image-xsmall" },
{ value: "var(--dimension-48)", name: "--size-image-small" },
{ value: "var(--dimension-56)", name: "--size-image-medium" },
{ value: "var(--dimension-64)", name: "--size-image-large" },
{ value: "var(--dimension-80)", name: "--size-image-xlarge" },
{ value: "var(--dimension-96)", name: "--size-image-xxlarge" },
{ value: "var(--dimension-12)", name: "--size-item-xsmall" },
{ value: "var(--dimension-16)", name: "--size-item-small" },
{ value: "var(--dimension-24)", name: "--size-item-medium" },
{ value: "var(--dimension-32)", name: "--size-item-large" },
{ value: "var(--dimension-48)", name: "--size-item-xlarge" },
{ value: "var(--dimension-100)", name: "--size-layout-xsmall" },
{ value: "var(--dimension-200)", name: "--size-layout-small" },
{ value: "var(--dimension-300)", name: "--size-layout-medium" },
{ value: "var(--dimension-400)", name: "--size-layout-large" },
{ value: "var(--dimension-500)", name: "--size-layout-xlarge" },
{ value: "280px", name: "--size-sidebar" },
{ value: "118px", name: "--size-sidebar-narrow" },
{ value: "var(--size-item-large)", name: "--button-min-height" },
{ value: "var(--size-item-medium)", name: "--button-min-height-small" },
{ value: "var(--button-min-height)", name: "--button-size-icon" },
{
value: "var(--button-min-height-small)",
name: "--button-size-icon-small",
},
{ value: "var(--size-item-small)", name: "--checkbox-size" },
{ value: "var(--button-min-height)", name: "--input-text-min-height" },
{
value: { brand: { default: "664px" } },
name: "--page-main-content-width",
},
],
space: [
{ value: "var(--dimension-relative-0125)", name: "--space-xxsmall" },
{ value: "var(--dimension-relative-025)", name: "--space-xsmall" },
{ value: "var(--dimension-relative-050)", name: "--space-small" },
{ value: "var(--dimension-relative-075)", name: "--space-medium" },
{ value: "var(--dimension-relative-100)", name: "--space-large" },
{ value: "var(--dimension-relative-150)", name: "--space-xlarge" },
{ value: "var(--dimension-relative-200)", name: "--space-xxlarge" },
{
value: "var(--space-xsmall) var(--space-large)",
name: "--button-padding",
},
{ value: 0, name: "--button-padding-icon" },
{ value: "var(--space-small)", name: "--checkbox-margin-inline" },
],
"text-color": [
{
value: {
prefersContrast: "CanvasText",
brand: {
light: "var(--color-gray-100)",
dark: "var(--color-gray-05)",
default: "light-dark(var(--color-gray-100), var(--color-gray-05))",
},
platform: { default: "currentColor" },
},
name: "--text-color",
},
{
value: {
default: "color-mix(in srgb, currentColor 69%, transparent)",
prefersContrast: "inherit",
},
name: "--text-color-deemphasized",
},
{
value: {
default: "color-mix(in srgb, currentColor 40%, transparent)",
forcedColors: "GrayText",
},
name: "--text-color-disabled",
},
{
value: {
light: "var(--color-red-70)",
dark: "var(--color-red-20)",
prefersContrast: "inherit",
default: "light-dark(var(--color-red-70), var(--color-red-20))",
},
name: "--text-color-error",
},
{
value: {
forcedColors: "SelectedItemText",
brand: {
light: "var(--color-white)",
dark: "var(--color-gray-100)",
default: "light-dark(var(--color-white), var(--color-gray-100))",
},
platform: { default: "SelectedItemText" },
},
name: "--text-color-accent-primary-selected",
},
{
value: {
default: "var(--text-color)",
prefersContrast: "SelectedItemText",
},
name: "--text-color-list-item-hover",
},
{
value: { default: "var(--text-color)", forcedColors: "CanvasText" },
name: "--badge-text-color",
},
{
value: {
light: "var(--color-white)",
dark: "var(--color-gray-100)",
forcedColors: "AccentColorText",
default: "light-dark(var(--color-white), var(--color-gray-100))",
},
name: "--badge-text-color-filled",
},
{
value: {
forcedColors: "ButtonText",
brand: {
light: "var(--color-gray-100)",
dark: "var(--color-gray-05)",
default: "light-dark(var(--color-gray-100), var(--color-gray-05))",
},
platform: { default: "currentColor" },
},
name: "--button-text-color",
},
{
value: {
default: "var(--button-text-color)",
forcedColors: "SelectedItem",
},
name: "--button-text-color-active",
},
{
value: {
light: "var(--color-white)",
dark: "var(--color-gray-100)",
forcedColors: "var(--button-text-color-primary)",
default: "light-dark(var(--color-white), var(--color-gray-100))",
},
name: "--button-text-color-destructive",
},
{
value: {
default: "var(--button-text-color-destructive)",
forcedColors: "var(--button-text-color-primary-active)",
},
name: "--button-text-color-destructive-active",
},
{
value: {
default: "var(--button-text-color-destructive)",
forcedColors: "var(--button-text-color-primary-disabled)",
},
name: "--button-text-color-destructive-disabled",
},
{
value: {
default: "var(--button-text-color-destructive)",
forcedColors: "var(--button-text-color-primary-hover)",
},
name: "--button-text-color-destructive-hover",
},
{
value: "var(--button-text-color-destructive-active)",
name: "--button-text-color-destructive-selected",
},
{
value: { default: "var(--button-text-color)", forcedColors: "GrayText" },
name: "--button-text-color-disabled",
},
{
value: {
default: "inherit",
brand: {
prefersContrast: "var(--button-text-color)",
forcedColors: "var(--button-text-color)",
},
},
name: "--button-text-color-ghost",
},
{
value: {
default: "inherit",
prefersContrast: "var(--button-text-color-active)",
forcedColors: "var(--button-text-color-active)",
},
name: "--button-text-color-ghost-active",
},
{
value: {
default: "inherit",
brand: {
prefersContrast: "var(--button-text-color-disabled)",
forcedColors: "var(--button-text-color-disabled)",
},
},
name: "--button-text-color-ghost-disabled",
},
{
value: {
default: "inherit",
prefersContrast: "var(--button-text-color-hover)",
forcedColors: "var(--button-text-color-hover)",
},
name: "--button-text-color-ghost-hover",
},
{
value: "var(--button-text-color-ghost-active)",
name: "--button-text-color-ghost-selected",
},
{
value: {
default: "var(--button-text-color)",
forcedColors: "SelectedItem",
},
name: "--button-text-color-hover",
},
{
value: "var(--button-text-color-ghost)",
name: "--button-text-color-menu",
},
{
value: {
default: "var(--button-text-color-ghost-active)",
forcedColors: "var(--button-text-color-primary)",
},
name: "--button-text-color-menu-active",
},
{
value: "var(--button-text-color-ghost-disabled)",
name: "--button-text-color-menu-disabled",
},
{
value: {
default: "var(--button-text-color-ghost-hover)",
forcedColors: "var(--button-text-color-primary)",
},
name: "--button-text-color-menu-hover",
},
{
value: {
forcedColors: "ButtonFace",
brand: {
light: "var(--color-white)",
dark: "var(--color-gray-100)",
default: "light-dark(var(--color-white), var(--color-gray-100))",
},
platform: { default: "AccentColorText" },
},
name: "--button-text-color-primary",
},
{
value: "var(--button-text-color-primary-hover)",
name: "--button-text-color-primary-active",
},
{
value: "var(--button-text-color-primary)",
name: "--button-text-color-primary-disabled",
},
{
value: {
default: "var(--button-text-color-primary)",
forcedColors: "SelectedItemText",
},
name: "--button-text-color-primary-hover",
},
{
value: "var(--button-text-color-primary-active)",
name: "--button-text-color-primary-selected",
},
{
value: "var(--button-text-color-active)",
name: "--button-text-color-selected",
},
{
value: {
forcedColors: "LinkText",
brand: { default: "var(--color-accent-primary)" },
platform: { default: "LinkText" },
},
name: "--link-color",
},
{
value: {
forcedColors: "LinkText",
brand: { default: "var(--color-accent-primary-hover)" },
platform: {
default: "color-mix(in srgb, black 10%, var(--link-color))",
},
},
name: "--link-color-hover",
},
{
value: {
forcedColors: "ActiveText",
brand: { default: "var(--color-accent-primary-active)" },
platform: {
default: "color-mix(in srgb, black 20%, var(--link-color))",
},
},
name: "--link-color-active",
},
{
value: {
forcedColors: "var(--link-color)",
brand: { default: "var(--link-color)" },
platform: { default: "var(--link-color)" },
},
name: "--link-color-visited",
},
{
value: {
forcedColors: "AccentColorText",
brand: {
light: "var(--color-white)",
dark: "var(--color-gray-100)",
default: "light-dark(var(--color-white), var(--color-gray-100))",
},
platform: { default: "AccentColorText" },
},
name: "--table-header-text-color",
},
],
border: [
{
value: "var(--border-width) solid var(--button-border-color)",
name: "--button-border",
},
],
"icon-color": [
{ value: "currentColor", name: "--button-icon-fill" },
{ value: "var(--button-icon-fill)", name: "--button-icon-stroke" },
{
value: {
light: "var(--color-gray-70)",
dark: "var(--color-gray-05)",
prefersContrast: "var(--text-color)",
default: "light-dark(var(--color-gray-70), var(--color-gray-05))",
},
name: "--icon-color",
},
{
value: {
light: "var(--color-blue-60)",
dark: "var(--color-blue-20)",
prefersContrast: "var(--icon-color)",
default: "light-dark(var(--color-blue-60), var(--color-blue-20))",
},
name: "--icon-color-information",
},
{
value: {
light: "var(--color-green-60)",
dark: "var(--color-green-20)",
prefersContrast: "var(--icon-color)",
default: "light-dark(var(--color-green-60), var(--color-green-20))",
},
name: "--icon-color-success",
},
{
value: {
light: "var(--color-yellow-60)",
dark: "var(--color-yellow-20)",
prefersContrast: "var(--icon-color)",
default: "light-dark(var(--color-yellow-60), var(--color-yellow-20))",
},
name: "--icon-color-warning",
},
{
value: {
light: "var(--color-red-60)",
dark: "var(--color-red-20)",
prefersContrast: "var(--icon-color)",
default: "light-dark(var(--color-red-60), var(--color-red-20))",
},
name: "--icon-color-critical",
},
],
opacity: [
{
value: { default: 0.5, forcedColors: 1 },
name: "--button-opacity-disabled",
},
],
"icon-size": [
{ value: "var(--icon-size-small)", name: "--icon-size" },
{ value: "var(--dimension-12)", name: "--icon-size-xsmall" },
{ value: "var(--dimension-16)", name: "--icon-size-small" },
{ value: "var(--dimension-20)", name: "--icon-size-medium" },
{ value: "var(--dimension-24)", name: "--icon-size-large" },
{ value: "var(--dimension-32)", name: "--icon-size-xlarge" },
],
};
export const variableLookupTable = {
"background-color-box": {
light: "var(--color-white)",
dark: "var(--color-gray-80)",
prefersContrast: "var(--background-color-canvas)",
default: "light-dark(var(--color-white), var(--color-gray-80))",
},
"background-color-box-info": {
prefersContrast: "var(--background-color-canvas)",
brand: {
light: "var(--color-gray-20)",
dark: "var(--color-gray-80)",
default: "light-dark(var(--color-gray-20), var(--color-gray-80))",
},
platform: { default: "color-mix(in srgb, currentColor 6%, transparent)" },
},
"background-color-canvas": {
prefersContrast: "Canvas",
brand: {
light: "var(--color-white)",
dark: "var(--color-gray-90)",
default: "light-dark(var(--color-white), var(--color-gray-90))",
},
platform: { default: "Canvas" },
},
"background-color-critical": {
light: "var(--color-red-0)",
dark: "var(--color-red-90)",
prefersContrast: "var(--background-color-canvas)",
default: "light-dark(var(--color-red-0), var(--color-red-90))",
},
"background-color-information": {
light: "var(--color-blue-0)",
dark: "var(--color-blue-90)",
prefersContrast: "var(--background-color-canvas)",
default: "light-dark(var(--color-blue-0), var(--color-blue-90))",
},
"background-color-success": {
light: "var(--color-green-0)",
dark: "var(--color-green-90)",
prefersContrast: "var(--background-color-canvas)",
default: "light-dark(var(--color-green-0), var(--color-green-90))",
},
"background-color-warning": {
light: "var(--color-yellow-0)",
dark: "var(--color-yellow-90)",
prefersContrast: "var(--background-color-canvas)",
default: "light-dark(var(--color-yellow-0), var(--color-yellow-90))",
},
"background-color-overlay": "var(--color-black-alpha-50)",
"background-color-list-item-hover": {
brand: {
default:
"color-mix(in srgb, var(--color-accent-primary) 20%, transparent)",
},
platform: { default: "color-mix(in srgb, currentColor 20%, transparent)" },
prefersContrast: "SelectedItem",
},
"border-color": {
brand: {
light: "var(--color-gray-50)",
dark: "var(--color-gray-70)",
default: "light-dark(var(--color-gray-50), var(--color-gray-70))",
},
prefersContrast: "CanvasText",
platform: { default: "color-mix(in srgb, currentColor 50%, transparent)" },
},
"border-color-transparent": {
default: "transparent",
prefersContrast: "CanvasText",
},
"border-color-card": {
default: "color-mix(in srgb, currentColor 10%, transparent)",
prefersContrast: "color-mix(in srgb, currentColor 41%, transparent)",
forcedColors: "CanvasText",
},
"border-color-deemphasized": {
brand: {
light: "var(--color-gray-30)",
dark: "var(--color-gray-70)",
default: "light-dark(var(--color-gray-30), var(--color-gray-70))",
},
platform: { default: "color-mix(in srgb, currentColor 24%, transparent)" },
prefersContrast: "currentColor",
forcedColors: "ButtonText",
},
"border-color-interactive": {
prefersContrast: "var(--text-color)",
forcedColors: "ButtonText",
brand: {
light: "var(--color-gray-60)",
dark: "var(--color-gray-50)",
default: "light-dark(var(--color-gray-60), var(--color-gray-50))",
},
platform: {
default: "color-mix(in srgb, currentColor 15%, var(--color-gray-60))",
},
},
"border-color-interactive-hover": {
default: "var(--border-color-interactive)",
forcedColors: "SelectedItem",
},
"border-color-interactive-active": {
default: "var(--border-color-interactive)",
forcedColors: "ButtonText",
},
"border-color-interactive-disabled": {
default: "var(--border-color-interactive)",
forcedColors: "GrayText",
},
"border-color-selected": {
default: "var(--color-accent-primary)",
forcedColors: "SelectedItem",
},
"border-radius-circle": "9999px",
"border-radius-xsmall": "2px",
"border-radius-small": "4px",
"border-radius-medium": "8px",
"border-radius-large": "16px",
"border-width": "1px",
"box-shadow-level-1":
"0 0 1px var(--box-shadow-color-darker-layer-1), 0 1px 2px var(--box-shadow-color-darker-layer-2)",
"box-shadow-level-2":
"0 0.25px 0.75px var(--box-shadow-color-lighter-layer-1), 0 2px 6px var(--box-shadow-color-lighter-layer-2)",
"box-shadow-level-3":
"0 0.375px 1.5px var(--box-shadow-color-lighter-layer-1), 0 3px 12px var(--box-shadow-color-lighter-layer-2)",
"box-shadow-level-4":
"0 0.5px 2px var(--box-shadow-color-lighter-layer-1), 0 4px 16px var(--box-shadow-color-lighter-layer-2)",
"box-shadow-tab": "var(--box-shadow-level-1)",
"box-shadow-card": "var(--box-shadow-level-2)",
"box-shadow-card-hover": "var(--box-shadow-level-4)",
"box-shadow-popup": "var(--box-shadow-level-3)",
"box-shadow-color-darker-layer-1": {
light: "rgba(0, 0, 0, 0.15)",
dark: "rgba(0, 0, 0, 0.2)",
default: "light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.2))",
},
"box-shadow-color-darker-layer-2": {
light: "rgba(0, 0, 0, 0.2)",
dark: "rgba(0, 0, 0, 0.4)",
default: "light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4))",
},
"box-shadow-color-lighter-layer-1": {
light: "rgba(0, 0, 0, 0.05)",
dark: "rgba(0, 0, 0, 0.2)",
default: "light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2))",
},
"box-shadow-color-lighter-layer-2": {
light: "rgba(0, 0, 0, 0.1)",
dark: "rgba(0, 0, 0, 0.4)",
default: "light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4))",
},
"color-gray-20": "#f0f0f4",
"color-gray-30": "#bac2ca",
"color-gray-50": "#bfbfc9",
"color-gray-60": "#8f8f9d",
"color-gray-70": "#5b5b66",
"color-gray-80": "#23222b",
"color-gray-90": "#1c1b22",
"color-gray-100": "#15141a",
"color-gray-05": "#fbfbfe",
"color-red-0": "oklch(97% 0.05 15)",
"color-red-10": "oklch(90% 0.1 15)",
"color-red-20": "oklch(83% 0.14 15)",
"color-red-30": "oklch(76% 0.17 15)",
"color-red-40": "oklch(69% 0.19 15)",
"color-red-50": "oklch(62% 0.21 15)",
"color-red-60": "oklch(55% 0.21 15)",
"color-red-70": "oklch(48% 0.2 15)",
"color-red-80": "oklch(41% 0.17 15)",
"color-red-90": "oklch(34% 0.14 15)",
"color-red-100": "oklch(27% 0.1 15)",
"color-red-110": "oklch(20% 0.05 15)",
"color-orange-0": "oklch(97% 0.05 50)",
"color-orange-10": "oklch(90% 0.10 50)",
"color-orange-20": "oklch(86% 0.14 50)",
"color-orange-30": "oklch(79% 0.17 50)",
"color-orange-40": "oklch(72% 0.19 50)",
"color-orange-50": "oklch(65% 0.21 50)",
"color-orange-60": "oklch(58% 0.21 50)",
"color-orange-70": "oklch(48% 0.20 50)",
"color-orange-80": "oklch(41% 0.17 50)",
"color-orange-90": "oklch(34% 0.14 50)",
"color-orange-100": "oklch(27% 0.10 50)",
"color-orange-110": "oklch(20% 0.05 50)",
"color-yellow-0": "oklch(97% 0.05 90)",
"color-yellow-10": "oklch(93% 0.1 90)",
"color-yellow-20": "oklch(86% 0.14 90)",
"color-yellow-30": "oklch(79% 0.2 90)",
"color-yellow-40": "oklch(72% 0.22 90)",
"color-yellow-50": "oklch(65% 0.24 90)",
"color-yellow-60": "oklch(58% 0.24 90)",
"color-yellow-70": "oklch(51% 0.23 90)",
"color-yellow-80": "oklch(41% 0.2 90)",
"color-yellow-90": "oklch(34% 0.17 90)",
"color-yellow-100": "oklch(27% 0.13 90)",
"color-yellow-110": "oklch(20% 0.08 90)",
"color-green-0": "oklch(97% 0.05 145)",
"color-green-10": "oklch(90% 0.1 145)",
"color-green-20": "oklch(83% 0.14 145)",
"color-green-30": "oklch(76% 0.17 145)",
"color-green-40": "oklch(69% 0.19 145)",
"color-green-50": "oklch(62% 0.21 145)",
"color-green-60": "oklch(55% 0.21 145)",
"color-green-70": "oklch(48% 0.2 145)",
"color-green-80": "oklch(41% 0.17 145)",
"color-green-90": "oklch(34% 0.14 145)",
"color-green-100": "oklch(27% 0.1 145)",
"color-green-110": "oklch(20% 0.05 145)",
"color-cyan-0": "oklch(97% 0.05 205)",
"color-cyan-10": "oklch(90% 0.07 205)",
"color-cyan-20": "oklch(83% 0.11 205)",
"color-cyan-30": "oklch(76% 0.14 205)",
"color-cyan-40": "oklch(69% 0.19 205)",
"color-cyan-50": "oklch(62% 0.21 205)",
"color-cyan-60": "oklch(55% 0.21 205)",
"color-cyan-70": "oklch(48% 0.2 205)",
"color-cyan-80": "oklch(41% 0.17 205)",
"color-cyan-90": "oklch(34% 0.14 205)",
"color-cyan-100": "oklch(27% 0.1 205)",
"color-cyan-110": "oklch(20% 0.05 205)",
"color-blue-0": "oklch(97% 0.05 260)",
"color-blue-10": "oklch(90% 0.13 260)",
"color-blue-20": "oklch(83% 0.17 260)",
"color-blue-30": "oklch(76% 0.2 260)",
"color-blue-40": "oklch(69% 0.22 260)",
"color-blue-50": "oklch(62% 0.24 260)",
"color-blue-60": "oklch(55% 0.24 260)",
"color-blue-70": "oklch(48% 0.2 260)",
"color-blue-80": "oklch(41% 0.17 260)",
"color-blue-90": "oklch(34% 0.14 260)",
"color-blue-100": "oklch(27% 0.1 260)",
"color-blue-110": "oklch(20% 0.05 260)",
"color-violet-0": "oklch(97% 0.05 290)",
"color-violet-10": "oklch(90% 0.13 290)",
"color-violet-20": "oklch(83% 0.17 290)",
"color-violet-30": "oklch(76% 0.2 290)",
"color-violet-40": "oklch(69% 0.22 290)",
"color-violet-50": "oklch(62% 0.24 290)",
"color-violet-60": "oklch(55% 0.24 290)",
"color-violet-70": "oklch(48% 0.2 290)",
"color-violet-80": "oklch(41% 0.17 290)",
"color-violet-90": "oklch(34% 0.14 290)",
"color-violet-100": "oklch(27% 0.1 290)",
"color-violet-110": "oklch(20% 0.05 290)",
"color-purple-0": "oklch(97% 0.05 315)",
"color-purple-10": "oklch(90% 0.1 315)",
"color-purple-20": "oklch(83% 0.14 315)",
"color-purple-30": "oklch(76% 0.17 315)",
"color-purple-40": "oklch(69% 0.19 315)",
"color-purple-50": "oklch(62% 0.21 315)",
"color-purple-60": "oklch(55% 0.21 315)",
"color-purple-70": "oklch(48% 0.2 315)",
"color-purple-80": "oklch(41% 0.17 315)",
"color-purple-90": "oklch(34% 0.14 315)",
"color-purple-100": "oklch(27% 0.1 315)",
"color-purple-110": "oklch(20% 0.05 315)",
"color-pink-0": "oklch(97% 0.05 360)",
"color-pink-10": "oklch(90% 0.1 360)",
"color-pink-20": "oklch(83% 0.14 360)",
"color-pink-30": "oklch(76% 0.17 360)",
"color-pink-40": "oklch(69% 0.19 360)",
"color-pink-50": "oklch(62% 0.21 360)",
"color-pink-60": "oklch(55% 0.21 360)",
"color-pink-70": "oklch(48% 0.2 360)",
"color-pink-80": "oklch(41% 0.17 360)",
"color-pink-90": "oklch(34% 0.14 360)",
"color-pink-100": "oklch(27% 0.1 360)",
"color-pink-110": "oklch(20% 0.05 360)",
"color-white": "#ffffff",
"color-white-alpha-10": "oklch(1 0 0 / 10%)",
"color-white-alpha-20": "oklch(1 0 0 / 20%)",
"color-white-alpha-30": "oklch(1 0 0 / 30%)",
"color-white-alpha-40": "oklch(1 0 0 / 40%)",
"color-white-alpha-50": "oklch(1 0 0 / 50%)",
"color-white-alpha-60": "oklch(1 0 0 / 60%)",
"color-white-alpha-70": "oklch(1 0 0 / 70%)",
"color-white-alpha-80": "oklch(1 0 0 / 80%)",
"color-white-alpha-90": "oklch(1 0 0 / 90%)",
"color-black": "#000000",
"color-black-alpha-10": "oklch(0 0 0 / 10%)",
"color-black-alpha-20": "oklch(0 0 0 / 20%)",
"color-black-alpha-30": "oklch(0 0 0 / 30%)",
"color-black-alpha-40": "oklch(0 0 0 / 40%)",
"color-black-alpha-50": "oklch(0 0 0 / 50%)",
"color-black-alpha-60": "oklch(0 0 0 / 60%)",
"color-black-alpha-70": "oklch(0 0 0 / 70%)",
"color-black-alpha-80": "oklch(0 0 0 / 80%)",
"color-black-alpha-90": "oklch(0 0 0 / 90%)",
"color-accent-primary": {
forcedColors: "ButtonText",
brand: {
light: "var(--color-blue-60)",
dark: "var(--color-cyan-30)",
default: "light-dark(var(--color-blue-60), var(--color-cyan-30))",
},
platform: { default: "AccentColor" },
},
"color-accent-primary-hover": {
forcedColors: "SelectedItem",
brand: {
light: "var(--color-blue-70)",
dark: "var(--color-cyan-20)",
default: "light-dark(var(--color-blue-70), var(--color-cyan-20))",
},
platform: {
default: "color-mix(in srgb, black 10%, var(--color-accent-primary))",
},
},
"color-accent-primary-active": {
forcedColors: "var(--color-accent-primary-hover)",
brand: {
light: "var(--color-blue-80)",
dark: "var(--color-cyan-10)",
default: "light-dark(var(--color-blue-80), var(--color-cyan-10))",
},
platform: {
default: "color-mix(in srgb, black 20%, var(--color-accent-primary))",
},
},
"color-accent-primary-selected": {
forcedColors: "SelectedItem",
brand: {
light: "var(--color-blue-60)",
dark: "var(--color-cyan-30)",
default: "light-dark(var(--color-blue-60), var(--color-cyan-30))",
},
platform: { default: "SelectedItem" },
},
"dimension-2": "2px",
"dimension-4": "4px",
"dimension-8": "8px",
"dimension-12": "12px",
"dimension-16": "16px",
"dimension-20": "20px",
"dimension-24": "24px",
"dimension-32": "32px",
"dimension-40": "40px",
"dimension-48": "48px",
"dimension-56": "56px",
"dimension-64": "64px",
"dimension-80": "80px",
"dimension-96": "96px",
"dimension-100": "100px",
"dimension-200": "200px",
"dimension-300": "300px",
"dimension-400": "400px",
"dimension-500": "500px",
"dimension-relative-100": "1rem",
"dimension-relative-125": "1.25rem",
"dimension-relative-150": "1.5rem",
"dimension-relative-200": "2rem",
"dimension-relative-250": "2.5rem",
"dimension-relative-300": "3rem",
"dimension-relative-350": "3.5rem",
"dimension-relative-400": "4rem",
"dimension-relative-500": "5rem",
"dimension-relative-600": "6rem",
"dimension-relative-0125": "0.125rem",
"dimension-relative-025": "0.25rem",
"dimension-relative-050": "0.5rem",
"dimension-relative-075": "0.75rem",
"focus-outline":
"var(--focus-outline-width) solid var(--focus-outline-color)",
"focus-outline-color": {
default: "var(--color-accent-primary)",
forcedColors: "var(--text-color)",
},
"focus-outline-inset": "calc(-1 * var(--focus-outline-width))",
"focus-outline-offset": "2px",
"focus-outline-width": "2px",
"font-size-root": {
brand: { default: "15px" },
platform: { default: "unset" },
},
"font-size-xsmall": {
brand: {
default: "0.733rem",
comment:
"11px / Note this token is to be used in rare cases because its hard to read. Please consult with the Design Systems and A11y teams for case-by-case feedback.",
},
platform: { default: "unset" },
},
"font-size-small": {
brand: { default: "0.867rem", comment: "13px" },
platform: { default: "unset" },
},
"font-size-large": {
brand: { default: "1.133rem", comment: "17px" },
platform: { default: "unset" },
},
"font-size-xlarge": {
brand: { default: "1.467rem", comment: "22px" },
platform: { default: "unset" },
},
"font-size-xxlarge": {
brand: { default: "1.6rem", comment: "24px" },
platform: { default: "unset" },
},
"font-size-xxxlarge": {
brand: { default: "2.2rem", comment: "33px" },
platform: { default: "unset" },
},
"font-size-heading-xlarge": "var(--font-size-xxlarge)",
"font-size-heading-large": "var(--font-size-xlarge)",
"font-size-heading-medium": "var(--font-size-large)",
"font-weight": "normal",
"font-weight-semibold": 600,
"font-weight-bold": 700,
"font-weight-heading": "var(--font-weight-semibold)",
"outline-color-error": {
light: "var(--color-red-70)",
dark: "var(--color-red-20)",
prefersContrast: "var(--border-color)",
default: "light-dark(var(--color-red-70), var(--color-red-20))",
},
"size-image-xsmall": "var(--dimension-40)",
"size-image-small": "var(--dimension-48)",
"size-image-medium": "var(--dimension-56)",
"size-image-large": "var(--dimension-64)",
"size-image-xlarge": "var(--dimension-80)",
"size-image-xxlarge": "var(--dimension-96)",
"size-item-xsmall": "var(--dimension-12)",
"size-item-small": "var(--dimension-16)",
"size-item-medium": "var(--dimension-24)",
"size-item-large": "var(--dimension-32)",
"size-item-xlarge": "var(--dimension-48)",
"size-layout-xsmall": "var(--dimension-100)",
"size-layout-small": "var(--dimension-200)",
"size-layout-medium": "var(--dimension-300)",
"size-layout-large": "var(--dimension-400)",
"size-layout-xlarge": "var(--dimension-500)",
"size-sidebar": "280px",
"size-sidebar-narrow": "118px",
"space-xxsmall": "var(--dimension-relative-0125)",
"space-xsmall": "var(--dimension-relative-025)",
"space-small": "var(--dimension-relative-050)",
"space-medium": "var(--dimension-relative-075)",
"space-large": "var(--dimension-relative-100)",
"space-xlarge": "var(--dimension-relative-150)",
"space-xxlarge": "var(--dimension-relative-200)",
"text-color": {
prefersContrast: "CanvasText",
brand: {
light: "var(--color-gray-100)",
dark: "var(--color-gray-05)",
default: "light-dark(var(--color-gray-100), var(--color-gray-05))",
},
platform: { default: "currentColor" },
},
"text-color-deemphasized": {
default: "color-mix(in srgb, currentColor 69%, transparent)",
prefersContrast: "inherit",
},
"text-color-disabled": {
default: "color-mix(in srgb, currentColor 40%, transparent)",
forcedColors: "GrayText",
},
"text-color-error": {
light: "var(--color-red-70)",
dark: "var(--color-red-20)",
prefersContrast: "inherit",
default: "light-dark(var(--color-red-70), var(--color-red-20))",
},
"text-color-accent-primary-selected": {
forcedColors: "SelectedItemText",
brand: {
light: "var(--color-white)",
dark: "var(--color-gray-100)",
default: "light-dark(var(--color-white), var(--color-gray-100))",
},
platform: { default: "SelectedItemText" },
},
"text-color-list-item-hover": {
default: "var(--text-color)",
prefersContrast: "SelectedItemText",
},
"attention-dot-color": {
platform: { default: "AccentColor" },
brand: {
light: "#2ac3a2",
dark: "#54ffbd",
default: "light-dark(#2ac3a2, #54ffbd)",
},
prefersContrast: "AccentColor",
},
"badge-text-color": {
default: "var(--text-color)",
forcedColors: "CanvasText",
},
"badge-text-color-filled": {
light: "var(--color-white)",
dark: "var(--color-gray-100)",
forcedColors: "AccentColorText",
default: "light-dark(var(--color-white), var(--color-gray-100))",
},
"badge-background-color": { default: "transparent", forcedColors: "Canvas" },
"badge-background-color-filled": {
light: "var(--color-green-70)",
dark: "var(--color-green-40)",
forcedColors: "AccentColor",
default: "light-dark(var(--color-green-70), var(--color-green-40))",
},
"badge-border-color": "var(--border-color)",
"badge-border-color-filled": {
light: "rgba(251, 251, 254, 0.4)",
dark: "rgba(21, 20, 26, 0.4)",
forcedColors: "CanvasText",
default: "light-dark(rgba(251, 251, 254, 0.4), rgba(21, 20, 26, 0.4))",
},
"button-background-color": {
forcedColors: "ButtonFace",
brand: { default: "color-mix(in srgb, currentColor 7%, transparent)" },
platform: { default: "color-mix(in srgb, currentColor 13%, transparent)" },
},
"button-background-color-hover": {
forcedColors: "SelectedItemText",
brand: { default: "color-mix(in srgb, currentColor 14%, transparent)" },
platform: { default: "color-mix(in srgb, currentColor 17%, transparent)" },
},
"button-background-color-active": {
forcedColors: "SelectedItemText",
brand: { default: "color-mix(in srgb, currentColor 21%, transparent)" },
platform: { default: "color-mix(in srgb, currentColor 30%, transparent)" },
},
"button-background-color-disabled": {
default: "var(--button-background-color)",
forcedColors: "ButtonFace",
},
"button-background-color-primary": "var(--color-accent-primary)",
"button-background-color-primary-hover": "var(--color-accent-primary-hover)",
"button-background-color-primary-active":
"var(--color-accent-primary-active)",
"button-background-color-primary-disabled": {
default: "var(--button-background-color-primary)",
forcedColors: "var(--button-text-color-disabled)",
},
"button-background-color-primary-selected":
"var(--button-background-color-primary-active)",
"button-background-color-destructive": {
light: "var(--color-red-60)",
dark: "var(--color-red-30)",
forcedColors: "var(--button-background-color-primary)",
default: "light-dark(var(--color-red-60), var(--color-red-30))",
},
"button-background-color-destructive-active": {
light: "var(--color-red-80)",
dark: "var(--color-red-10)",
forcedColors: "var(--button-background-color-primary-active)",
default: "light-dark(var(--color-red-80), var(--color-red-10))",
},
"button-background-color-destructive-disabled": {
default: "var(--button-background-color-destructive)",
forcedColors: "var(--button-background-color-primary-disabled)",
},
"button-background-color-destructive-hover": {
light: "var(--color-red-70)",
dark: "var(--color-red-20)",
forcedColors: "var(--button-background-color-primary-hover)",
default: "light-dark(var(--color-red-70), var(--color-red-20))",
},
"button-background-color-destructive-selected":
"var(--button-background-color-destructive-active)",
"button-background-color-ghost": {
default: "transparent",
brand: { forcedColors: "var(--button-background-color)" },
},
"button-background-color-ghost-active":
"var(--button-background-color-active)",
"button-background-color-ghost-disabled": {
default: "var(--button-background-color-ghost)",
brand: { forcedColors: "var(--button-background-color-disabled)" },
},
"button-background-color-ghost-hover": "var(--button-background-color-hover)",
"button-background-color-ghost-selected":
"var(--button-background-color-ghost-active)",
"button-background-color-menu": "var(--button-background-color-ghost)",
"button-background-color-menu-active": {
default: "var(--button-background-color-ghost-active)",
forcedColors: "var(--button-background-color-primary)",
},
"button-background-color-menu-disabled":
"var(--button-background-color-ghost-disabled)",
"button-background-color-menu-hover": {
default: "var(--button-background-color-ghost-hover)",
forcedColors: "var(--button-background-color-primary)",
},
"button-background-color-selected": "var(--button-background-color-active)",
"button-border": "var(--border-width) solid var(--button-border-color)",
"button-border-color": {
default: "transparent",
prefersContrast: "var(--button-text-color)",
forcedColors: "var(--border-color-interactive)",
},
"button-border-color-active": {
default: "var(--button-border-color)",
forcedColors: "var(--border-color-interactive-active)",
},
"button-border-color-destructive": {
default: "transparent",
forcedColors: "var(--button-border-color-primary)",
},
"button-border-color-destructive-active": {
default: "var(--button-border-color-destructive)",
forcedColors: "var(--button-border-color-primary-active)",
},
"button-border-color-destructive-disabled": {
default: "var(--button-border-color-destructive)",
forcedColors: "var(--button-border-color-primary-disabled)",
},
"button-border-color-destructive-hover": {
default: "var(--button-border-color-destructive)",
forcedColors: "var(--button-border-color-primary-hover)",
},
"button-border-color-destructive-selected":
"var(--button-border-color-destructive-active)",
"button-border-color-disabled": {
default: "var(--button-border-color)",
forcedColors: "var(--border-color-interactive-disabled)",
},
"button-border-color-ghost": { default: "var(--button-border-color)" },
"button-border-color-ghost-active": {
default: "var(--button-border-color-active)",
},
"button-border-color-ghost-disabled": {
default: "var(--button-border-color-disabled)",
},
"button-border-color-ghost-hover": {
default: "var(--button-border-color-hover)",
},
"button-border-color-ghost-selected":
"var(--button-border-color-ghost-active)",
"button-border-color-hover": {
default: "var(--button-border-color)",
forcedColors: "var(--border-color-interactive-hover)",
},
"button-border-color-primary": {
default: "transparent",
forcedColors: "ButtonFace",
},
"button-border-color-primary-active": {
default: "var(--button-border-color-primary)",
forcedColors: "ButtonText",
},
"button-border-color-primary-disabled": "var(--button-border-color-primary)",
"button-border-color-primary-hover": {
default: "var(--button-border-color-primary)",
forcedColors: "SelectedItemText",
},
"button-border-color-primary-selected":
"var(--button-border-color-primary-active)",
"button-border-color-selected": "var(--button-border-color-active)",
"button-border-radius": "var(--border-radius-medium)",
"button-font-size": "var(--font-size-root)",
"button-font-size-small": "var(--font-size-small)",
"button-font-weight": "var(--font-weight-semibold)",
"button-icon-fill": "currentColor",
"button-icon-stroke": "var(--button-icon-fill)",
"button-min-height": "var(--size-item-large)",
"button-min-height-small": "var(--size-item-medium)",
"button-opacity-disabled": { default: 0.5, forcedColors: 1 },
"button-padding": "var(--space-xsmall) var(--space-large)",
"button-padding-icon": 0,
"button-size-icon": "var(--button-min-height)",
"button-size-icon-small": "var(--button-min-height-small)",
"button-text-color": {
forcedColors: "ButtonText",
brand: {
light: "var(--color-gray-100)",
dark: "var(--color-gray-05)",
default: "light-dark(var(--color-gray-100), var(--color-gray-05))",
},
platform: { default: "currentColor" },
},
"button-text-color-active": {
default: "var(--button-text-color)",
forcedColors: "SelectedItem",
},
"button-text-color-destructive": {
light: "var(--color-white)",
dark: "var(--color-gray-100)",
forcedColors: "var(--button-text-color-primary)",
default: "light-dark(var(--color-white), var(--color-gray-100))",
},
"button-text-color-destructive-active": {
default: "var(--button-text-color-destructive)",
forcedColors: "var(--button-text-color-primary-active)",
},
"button-text-color-destructive-disabled": {
default: "var(--button-text-color-destructive)",
forcedColors: "var(--button-text-color-primary-disabled)",
},
"button-text-color-destructive-hover": {
default: "var(--button-text-color-destructive)",
forcedColors: "var(--button-text-color-primary-hover)",
},
"button-text-color-destructive-selected":
"var(--button-text-color-destructive-active)",
"button-text-color-disabled": {
default: "var(--button-text-color)",
forcedColors: "GrayText",
},
"button-text-color-ghost": {
default: "inherit",
brand: {
prefersContrast: "var(--button-text-color)",
forcedColors: "var(--button-text-color)",
},
},
"button-text-color-ghost-active": {
default: "inherit",
prefersContrast: "var(--button-text-color-active)",
forcedColors: "var(--button-text-color-active)",
},
"button-text-color-ghost-disabled": {
default: "inherit",
brand: {
prefersContrast: "var(--button-text-color-disabled)",
forcedColors: "var(--button-text-color-disabled)",
},
},
"button-text-color-ghost-hover": {
default: "inherit",
prefersContrast: "var(--button-text-color-hover)",
forcedColors: "var(--button-text-color-hover)",
},
"button-text-color-ghost-selected": "var(--button-text-color-ghost-active)",
"button-text-color-hover": {
default: "var(--button-text-color)",
forcedColors: "SelectedItem",
},
"button-text-color-menu": "var(--button-text-color-ghost)",
"button-text-color-menu-active": {
default: "var(--button-text-color-ghost-active)",
forcedColors: "var(--button-text-color-primary)",
},
"button-text-color-menu-disabled": "var(--button-text-color-ghost-disabled)",
"button-text-color-menu-hover": {
default: "var(--button-text-color-ghost-hover)",
forcedColors: "var(--button-text-color-primary)",
},
"button-text-color-primary": {
forcedColors: "ButtonFace",
brand: {
light: "var(--color-white)",
dark: "var(--color-gray-100)",
default: "light-dark(var(--color-white), var(--color-gray-100))",
},
platform: { default: "AccentColorText" },
},
"button-text-color-primary-active": "var(--button-text-color-primary-hover)",
"button-text-color-primary-disabled": "var(--button-text-color-primary)",
"button-text-color-primary-hover": {
default: "var(--button-text-color-primary)",
forcedColors: "SelectedItemText",
},
"button-text-color-primary-selected":
"var(--button-text-color-primary-active)",
"button-text-color-selected": "var(--button-text-color-active)",
"checkbox-margin-inline": "var(--space-small)",
"checkbox-size": "var(--size-item-small)",
"icon-color": {
light: "var(--color-gray-70)",
dark: "var(--color-gray-05)",
prefersContrast: "var(--text-color)",
default: "light-dark(var(--color-gray-70), var(--color-gray-05))",
},
"icon-color-information": {
light: "var(--color-blue-60)",
dark: "var(--color-blue-20)",
prefersContrast: "var(--icon-color)",
default: "light-dark(var(--color-blue-60), var(--color-blue-20))",
},
"icon-color-success": {
light: "var(--color-green-60)",
dark: "var(--color-green-20)",
prefersContrast: "var(--icon-color)",
default: "light-dark(var(--color-green-60), var(--color-green-20))",
},
"icon-color-warning": {
light: "var(--color-yellow-60)",
dark: "var(--color-yellow-20)",
prefersContrast: "var(--icon-color)",
default: "light-dark(var(--color-yellow-60), var(--color-yellow-20))",
},
"icon-color-critical": {
light: "var(--color-red-60)",
dark: "var(--color-red-20)",
prefersContrast: "var(--icon-color)",
default: "light-dark(var(--color-red-60), var(--color-red-20))",
},
"icon-size": "var(--icon-size-small)",
"icon-size-xsmall": "var(--dimension-12)",
"icon-size-small": "var(--dimension-16)",
"icon-size-medium": "var(--dimension-20)",
"icon-size-large": "var(--dimension-24)",
"icon-size-xlarge": "var(--dimension-32)",
"input-text-min-height": "var(--button-min-height)",
"link-color": {
forcedColors: "LinkText",
brand: { default: "var(--color-accent-primary)" },
platform: { default: "LinkText" },
},
"link-color-hover": {
forcedColors: "LinkText",
brand: { default: "var(--color-accent-primary-hover)" },
platform: { default: "color-mix(in srgb, black 10%, var(--link-color))" },
},
"link-color-active": {
forcedColors: "ActiveText",
brand: { default: "var(--color-accent-primary-active)" },
platform: { default: "color-mix(in srgb, black 20%, var(--link-color))" },
},
"link-color-visited": {
forcedColors: "var(--link-color)",
brand: { default: "var(--link-color)" },
platform: { default: "var(--link-color)" },
},
"link-focus-outline-offset": "1px",
"page-main-content-width": { brand: { default: "664px" } },
"table-background-color": {
light: "#f8f8fa",
dark: "rgb(35, 34, 43)",
forcedColors: "Canvas",
default: "light-dark(#f8f8fa, rgb(35, 34, 43))",
},
"table-border-color": {
default: "color-mix(in srgb, currentColor 41%, transparent)",
forcedColors: "CanvasText",
},
"table-header-background-color": {
default: "var(--color-accent-primary)",
forcedColors: "AccentColor",
},
"table-header-text-color": {
forcedColors: "AccentColorText",
brand: {
light: "var(--color-white)",
dark: "var(--color-gray-100)",
default: "light-dark(var(--color-white), var(--color-gray-100))",
},
platform: { default: "AccentColorText" },
},
"table-row-background-color": { default: "var(--background-color-canvas)" },
"table-row-background-color-alternate": {
forcedColors: "var(--background-color-canvas)",
brand: {
light: "#f0f0f4",
dark: "var(--color-gray-80)",
default: "light-dark(#f0f0f4, var(--color-gray-80))",
},
platform: {
light: "rgba(0, 0, 0, 0.05)",
dark: "rgba(255, 255, 255, 0.05)",
default: "light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05))",
},
},
};