> ## Documentation Index > Fetch the complete documentation index at: https://docs.cdp.coinbase.com/llms.txt > Use this file to discover all available pages before exploring further. # colors ```ts theme={null} const colors: { page: { bg: { default: { value: "{colors.bg.default}"; }; }; border: { default: { value: "{colors.line.default}"; }; }; text: { default: { value: "{colors.fg.default}"; }; muted: { value: "{colors.fg.muted}"; }; }; }; cta: { primary: { bg: { default: { value: "{colors.bg.primary}"; }; hover: { value: "{colors.bg.primary}"; modify: { type: "color-mix"; value: readonly [readonly ["{colors.bg.contrast}", "15%"]]; }; }; pressed: { value: "{colors.bg.primary}"; modify: { type: "color-mix"; value: readonly [readonly ["{colors.bg.contrast}", "30%"]]; }; }; }; border: { focus: { value: "{colors.line.primary}"; }; }; text: { default: { value: "{colors.fg.onPrimary}"; }; hover: { value: "{colors.fg.onPrimary}"; }; }; }; secondary: { bg: { default: { value: "{colors.bg.secondary}"; }; hover: { value: "{colors.bg.secondary}"; modify: { type: "color-mix"; value: readonly [readonly ["{colors.bg.contrast}", "10%"]]; }; }; pressed: { value: "{colors.bg.secondary}"; modify: { type: "color-mix"; value: readonly [readonly ["{colors.bg.contrast}", "20%"]]; }; }; }; border: { focus: { value: "{colors.line.primary}"; }; }; text: { default: { value: "{colors.fg.onSecondary}"; }; hover: { value: "{colors.fg.onSecondary}"; }; }; }; }; link: { primary: { text: { default: { value: "{colors.fg.primary}"; }; hover: { value: "{colors.fg.primary}"; modify: { type: "color-mix"; value: readonly [readonly ["{colors.bg.contrast}", "15%"]]; }; }; pressed: { value: "{colors.fg.primary}"; modify: { type: "color-mix"; value: readonly [readonly ["{colors.bg.contrast}", "30%"]]; }; }; }; }; secondary: { text: { default: { value: "{colors.fg.default}"; }; hover: { value: "{colors.fg.default}"; modify: { type: "color-mix"; value: readonly [readonly ["{colors.bg.contrast}", "10%"]]; }; }; pressed: { value: "{colors.fg.default}"; modify: { type: "color-mix"; value: readonly [readonly ["{colors.bg.contrast}", "20%"]]; }; }; }; }; }; input: { bg: { default: { value: "{colors.bg.default}"; }; readonly: { value: "{colors.bg.alternate}"; }; }; border: { default: { value: "{colors.line.heavy}"; }; focus: { value: "{colors.line.primary}"; }; error: { value: "{colors.line.negative}"; }; success: { value: "{colors.line.positive}"; }; }; label: { default: { value: "{colors.fg.default}"; }; }; placeholder: { default: { value: "{colors.fg.muted}"; }; }; text: { default: { value: "{colors.fg.default}"; }; readonly: { value: "{colors.fg.muted}"; }; }; errorText: { default: { value: "{colors.fg.negative}"; }; }; successText: { default: { value: "{colors.fg.positive}"; }; }; }; select: { label: { default: { value: "{colors.fg.default}"; }; }; trigger: { bg: { default: { value: "{colors.bg.default}"; }; hover: { value: "{colors.bg.default}"; modify: { type: "color-mix"; value: readonly [readonly ["{colors.bg.contrast}", "5%"]]; }; }; pressed: { value: "{colors.bg.default}"; modify: { type: "color-mix"; value: readonly [readonly ["{colors.bg.contrast}", "7%"]]; }; }; }; border: { default: { value: "{colors.line.default}"; }; focus: { value: "{colors.line.primary}"; }; error: { value: "{colors.line.negative}"; }; success: { value: "{colors.line.positive}"; }; }; placeholder: { default: { value: "{colors.fg.muted}"; }; }; text: { default: { value: "{colors.fg.default}"; }; }; errorText: { default: { value: "{colors.fg.negative}"; }; }; successText: { default: { value: "{colors.fg.positive}"; }; }; }; list: { bg: { default: { value: "{colors.bg.default}"; }; }; border: { default: { value: "{colors.line.default}"; }; focus: { value: "{colors.line.primary}"; }; error: { value: "{colors.line.negative}"; }; success: { value: "{colors.line.positive}"; }; }; item: { bg: { default: { value: "{colors.bg.default}"; }; highlight: { value: "{colors.bg.default}"; modify: { type: "color-mix"; value: readonly [readonly ["{colors.bg.contrast}", "10%"]]; }; }; }; text: { default: { value: "{colors.fg.default}"; }; muted: { value: "{colors.fg.muted}"; }; onHighlight: { value: "{colors.fg.default}"; }; mutedOnHighlight: { value: "{colors.fg.muted}"; }; }; }; }; }; code: { bg: { default: { value: "{colors.bg.alternate}"; }; }; border: { default: { value: "{colors.line.heavy}"; }; }; text: { default: { value: "{colors.fg.default}"; }; }; }; badge: { primary: { bg: { default: { value: "{colors.bg.primaryWash}"; }; }; text: { default: { value: "{colors.fg.primary}"; }; }; }; secondary: { bg: { default: { value: "{colors.bg.secondary}"; }; }; text: { default: { value: "{colors.fg.onSecondary}"; }; }; }; warning: { bg: { default: { value: "{colors.bg.warningWash}"; }; }; text: { default: { value: "{colors.fg.warning}"; }; }; }; }; banner: { error: { bg: { default: { value: "{colors.bg.negativeWash}"; }; }; icon: { default: { value: "{colors.fg.negative}"; }; }; text: { default: { value: "{colors.fg.onNegativeWash}"; }; }; }; success: { bg: { default: { value: "{colors.bg.positiveWash}"; }; }; icon: { default: { value: "{colors.fg.positive}"; }; }; text: { default: { value: "{colors.fg.onPositiveWash}"; }; }; }; warning: { bg: { default: { value: "{colors.bg.warningWash}"; }; }; icon: { default: { value: "{colors.fg.warning}"; }; }; text: { default: { value: "{colors.fg.onWarningWash}"; }; }; }; }; bg: { default: { value: "#ffffff"; }; alternate: { value: "#eef0f3"; }; contrast: { value: "{colors.fg.default}"; }; overlay: { value: "{colors.bg.alternate}"; modify: { type: "color-alpha"; value: 0.33; }; }; skeleton: { value: "{colors.fg.default}"; modify: { type: "color-alpha"; value: 0.1; }; }; primary: { value: "#0052ff"; }; secondary: { value: "#eef0f3"; }; primaryWash: { value: "{colors.fg.primary}"; modify: { type: "color-mix"; value: readonly [readonly ["{colors.bg.default}", "92%"]]; }; }; positiveWash: { value: "{colors.fg.positive}"; modify: { type: "color-mix"; value: readonly [readonly ["{colors.bg.default}", "92%"]]; }; }; negativeWash: { value: "{colors.fg.negative}"; modify: { type: "color-mix"; value: readonly [readonly ["{colors.bg.default}", "92%"]]; }; }; warningWash: { value: "{colors.fg.warning}"; modify: { type: "color-mix"; value: readonly [readonly ["{colors.bg.default}", "92%"]]; }; }; }; fg: { default: { value: "#0a0b0d"; }; muted: { value: "#5b616e"; }; primary: { value: "#0052ff"; }; onPrimary: { value: "#ffffff"; }; onSecondary: { value: "#0a0b0d"; }; positive: { value: "#098551"; }; negative: { value: "#cf202f"; }; warning: { value: "#ed702f"; }; onPrimaryWash: { value: "{colors.fg.onPrimary}"; }; onPositiveWash: { value: "{colors.fg.default}"; }; onNegativeWash: { value: "{colors.fg.default}"; }; onWarningWash: { value: "{colors.fg.default}"; }; }; line: { default: { value: "#dcdfe4"; }; heavy: { value: "#9397a0"; }; primary: { value: "{colors.fg.primary}"; }; positive: { value: "{colors.fg.positive}"; }; negative: { value: "{colors.fg.negative}"; }; }; }; ``` All the color tokens. ## Type declaration | Name | Type | Default value | | ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | | `page` | \{ `bg`: \{ `default`: \{ `value`: `"{colors.bg.default}"`; }; }; `border`: \{ `default`: \{ `value`: `"{colors.line.default}"`; }; }; `text`: \{ `default`: \{ `value`: `"{colors.fg.default}"`; }; `muted`: \{ `value`: `"{colors.fg.muted}"`; }; }; } | - | | `page.bg` | \{ `default`: \{ `value`: `"{colors.bg.default}"`; }; } | - | | `page.bg.default` | \{ `value`: `"{colors.bg.default}"`; } | - | | `page.bg.default.value` | `"{colors.bg.default}"` | `"{colors.bg.default}"` | | `page.border` | \{ `default`: \{ `value`: `"{colors.line.default}"`; }; } | - | | `page.border.default` | \{ `value`: `"{colors.line.default}"`; } | - | | `page.border.default.value` | `"{colors.line.default}"` | `"{colors.line.default}"` | | `page.text` | \{ `default`: \{ `value`: `"{colors.fg.default}"`; }; `muted`: \{ `value`: `"{colors.fg.muted}"`; }; } | - | | `page.text.default` | \{ `value`: `"{colors.fg.default}"`; } | - | | `page.text.default.value` | `"{colors.fg.default}"` | `"{colors.fg.default}"` | | `page.text.muted` | \{ `value`: `"{colors.fg.muted}"`; } | - | | `page.text.muted.value` | `"{colors.fg.muted}"` | `"{colors.fg.muted}"` | | `cta` | \{ `primary`: \{ `bg`: \{ `default`: \{ `value`: `"{colors.bg.primary}"`; }; `hover`: \{ `value`: `"{colors.bg.primary}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"15%"`]]; }; }; `pressed`: \{ `value`: `"{colors.bg.primary}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"30%"`]]; }; }; }; `border`: \{ `focus`: \{ `value`: `"{colors.line.primary}"`; }; }; `text`: \{ `default`: \{ `value`: `"{colors.fg.onPrimary}"`; }; `hover`: \{ `value`: `"{colors.fg.onPrimary}"`; }; }; }; `secondary`: \{ `bg`: \{ `default`: \{ `value`: `"{colors.bg.secondary}"`; }; `hover`: \{ `value`: `"{colors.bg.secondary}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"10%"`]]; }; }; `pressed`: \{ `value`: `"{colors.bg.secondary}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"20%"`]]; }; }; }; `border`: \{ `focus`: \{ `value`: `"{colors.line.primary}"`; }; }; `text`: \{ `default`: \{ `value`: `"{colors.fg.onSecondary}"`; }; `hover`: \{ `value`: `"{colors.fg.onSecondary}"`; }; }; }; } | - | | `cta.primary` | \{ `bg`: \{ `default`: \{ `value`: `"{colors.bg.primary}"`; }; `hover`: \{ `value`: `"{colors.bg.primary}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"15%"`]]; }; }; `pressed`: \{ `value`: `"{colors.bg.primary}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"30%"`]]; }; }; }; `border`: \{ `focus`: \{ `value`: `"{colors.line.primary}"`; }; }; `text`: \{ `default`: \{ `value`: `"{colors.fg.onPrimary}"`; }; `hover`: \{ `value`: `"{colors.fg.onPrimary}"`; }; }; } | - | | `cta.primary.bg` | \{ `default`: \{ `value`: `"{colors.bg.primary}"`; }; `hover`: \{ `value`: `"{colors.bg.primary}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"15%"`]]; }; }; `pressed`: \{ `value`: `"{colors.bg.primary}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"30%"`]]; }; }; } | - | | `cta.primary.bg.default` | \{ `value`: `"{colors.bg.primary}"`; } | - | | `cta.primary.bg.default.value` | `"{colors.bg.primary}"` | `"{colors.bg.primary}"` | | `cta.primary.bg.hover` | \{ `value`: `"{colors.bg.primary}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"15%"`]]; }; } | - | | `cta.primary.bg.hover.value` | `"{colors.bg.primary}"` | `"{colors.bg.primary}"` | | `cta.primary.bg.hover.modify` | \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"15%"`]]; } | - | | `cta.primary.bg.hover.modify.type` | `"color-mix"` | `"color-mix"` | | `cta.primary.bg.hover.modify.value` | readonly \[readonly \[`"{colors.bg.contrast}"`, `"15%"`]] | - | | `cta.primary.bg.pressed` | \{ `value`: `"{colors.bg.primary}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"30%"`]]; }; } | - | | `cta.primary.bg.pressed.value` | `"{colors.bg.primary}"` | `"{colors.bg.primary}"` | | `cta.primary.bg.pressed.modify` | \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"30%"`]]; } | - | | `cta.primary.bg.pressed.modify.type` | `"color-mix"` | `"color-mix"` | | `cta.primary.bg.pressed.modify.value` | readonly \[readonly \[`"{colors.bg.contrast}"`, `"30%"`]] | - | | `cta.primary.border` | \{ `focus`: \{ `value`: `"{colors.line.primary}"`; }; } | - | | `cta.primary.border.focus` | \{ `value`: `"{colors.line.primary}"`; } | - | | `cta.primary.border.focus.value` | `"{colors.line.primary}"` | `"{colors.line.primary}"` | | `cta.primary.text` | \{ `default`: \{ `value`: `"{colors.fg.onPrimary}"`; }; `hover`: \{ `value`: `"{colors.fg.onPrimary}"`; }; } | - | | `cta.primary.text.default` | \{ `value`: `"{colors.fg.onPrimary}"`; } | - | | `cta.primary.text.default.value` | `"{colors.fg.onPrimary}"` | `"{colors.fg.onPrimary}"` | | `cta.primary.text.hover` | \{ `value`: `"{colors.fg.onPrimary}"`; } | - | | `cta.primary.text.hover.value` | `"{colors.fg.onPrimary}"` | `"{colors.fg.onPrimary}"` | | `cta.secondary` | \{ `bg`: \{ `default`: \{ `value`: `"{colors.bg.secondary}"`; }; `hover`: \{ `value`: `"{colors.bg.secondary}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"10%"`]]; }; }; `pressed`: \{ `value`: `"{colors.bg.secondary}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"20%"`]]; }; }; }; `border`: \{ `focus`: \{ `value`: `"{colors.line.primary}"`; }; }; `text`: \{ `default`: \{ `value`: `"{colors.fg.onSecondary}"`; }; `hover`: \{ `value`: `"{colors.fg.onSecondary}"`; }; }; } | - | | `cta.secondary.bg` | \{ `default`: \{ `value`: `"{colors.bg.secondary}"`; }; `hover`: \{ `value`: `"{colors.bg.secondary}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"10%"`]]; }; }; `pressed`: \{ `value`: `"{colors.bg.secondary}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"20%"`]]; }; }; } | - | | `cta.secondary.bg.default` | \{ `value`: `"{colors.bg.secondary}"`; } | - | | `cta.secondary.bg.default.value` | `"{colors.bg.secondary}"` | `"{colors.bg.secondary}"` | | `cta.secondary.bg.hover` | \{ `value`: `"{colors.bg.secondary}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"10%"`]]; }; } | - | | `cta.secondary.bg.hover.value` | `"{colors.bg.secondary}"` | `"{colors.bg.secondary}"` | | `cta.secondary.bg.hover.modify` | \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"10%"`]]; } | - | | `cta.secondary.bg.hover.modify.type` | `"color-mix"` | `"color-mix"` | | `cta.secondary.bg.hover.modify.value` | readonly \[readonly \[`"{colors.bg.contrast}"`, `"10%"`]] | - | | `cta.secondary.bg.pressed` | \{ `value`: `"{colors.bg.secondary}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"20%"`]]; }; } | - | | `cta.secondary.bg.pressed.value` | `"{colors.bg.secondary}"` | `"{colors.bg.secondary}"` | | `cta.secondary.bg.pressed.modify` | \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"20%"`]]; } | - | | `cta.secondary.bg.pressed.modify.type` | `"color-mix"` | `"color-mix"` | | `cta.secondary.bg.pressed.modify.value` | readonly \[readonly \[`"{colors.bg.contrast}"`, `"20%"`]] | - | | `cta.secondary.border` | \{ `focus`: \{ `value`: `"{colors.line.primary}"`; }; } | - | | `cta.secondary.border.focus` | \{ `value`: `"{colors.line.primary}"`; } | - | | `cta.secondary.border.focus.value` | `"{colors.line.primary}"` | `"{colors.line.primary}"` | | `cta.secondary.text` | \{ `default`: \{ `value`: `"{colors.fg.onSecondary}"`; }; `hover`: \{ `value`: `"{colors.fg.onSecondary}"`; }; } | - | | `cta.secondary.text.default` | \{ `value`: `"{colors.fg.onSecondary}"`; } | - | | `cta.secondary.text.default.value` | `"{colors.fg.onSecondary}"` | `"{colors.fg.onSecondary}"` | | `cta.secondary.text.hover` | \{ `value`: `"{colors.fg.onSecondary}"`; } | - | | `cta.secondary.text.hover.value` | `"{colors.fg.onSecondary}"` | `"{colors.fg.onSecondary}"` | | `link` | \{ `primary`: \{ `text`: \{ `default`: \{ `value`: `"{colors.fg.primary}"`; }; `hover`: \{ `value`: `"{colors.fg.primary}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"15%"`]]; }; }; `pressed`: \{ `value`: `"{colors.fg.primary}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"30%"`]]; }; }; }; }; `secondary`: \{ `text`: \{ `default`: \{ `value`: `"{colors.fg.default}"`; }; `hover`: \{ `value`: `"{colors.fg.default}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"10%"`]]; }; }; `pressed`: \{ `value`: `"{colors.fg.default}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"20%"`]]; }; }; }; }; } | - | | `link.primary` | \{ `text`: \{ `default`: \{ `value`: `"{colors.fg.primary}"`; }; `hover`: \{ `value`: `"{colors.fg.primary}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"15%"`]]; }; }; `pressed`: \{ `value`: `"{colors.fg.primary}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"30%"`]]; }; }; }; } | - | | `link.primary.text` | \{ `default`: \{ `value`: `"{colors.fg.primary}"`; }; `hover`: \{ `value`: `"{colors.fg.primary}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"15%"`]]; }; }; `pressed`: \{ `value`: `"{colors.fg.primary}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"30%"`]]; }; }; } | - | | `link.primary.text.default` | \{ `value`: `"{colors.fg.primary}"`; } | - | | `link.primary.text.default.value` | `"{colors.fg.primary}"` | `"{colors.fg.primary}"` | | `link.primary.text.hover` | \{ `value`: `"{colors.fg.primary}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"15%"`]]; }; } | - | | `link.primary.text.hover.value` | `"{colors.fg.primary}"` | `"{colors.fg.primary}"` | | `link.primary.text.hover.modify` | \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"15%"`]]; } | - | | `link.primary.text.hover.modify.type` | `"color-mix"` | `"color-mix"` | | `link.primary.text.hover.modify.value` | readonly \[readonly \[`"{colors.bg.contrast}"`, `"15%"`]] | - | | `link.primary.text.pressed` | \{ `value`: `"{colors.fg.primary}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"30%"`]]; }; } | - | | `link.primary.text.pressed.value` | `"{colors.fg.primary}"` | `"{colors.fg.primary}"` | | `link.primary.text.pressed.modify` | \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"30%"`]]; } | - | | `link.primary.text.pressed.modify.type` | `"color-mix"` | `"color-mix"` | | `link.primary.text.pressed.modify.value` | readonly \[readonly \[`"{colors.bg.contrast}"`, `"30%"`]] | - | | `link.secondary` | \{ `text`: \{ `default`: \{ `value`: `"{colors.fg.default}"`; }; `hover`: \{ `value`: `"{colors.fg.default}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"10%"`]]; }; }; `pressed`: \{ `value`: `"{colors.fg.default}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"20%"`]]; }; }; }; } | - | | `link.secondary.text` | \{ `default`: \{ `value`: `"{colors.fg.default}"`; }; `hover`: \{ `value`: `"{colors.fg.default}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"10%"`]]; }; }; `pressed`: \{ `value`: `"{colors.fg.default}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"20%"`]]; }; }; } | - | | `link.secondary.text.default` | \{ `value`: `"{colors.fg.default}"`; } | - | | `link.secondary.text.default.value` | `"{colors.fg.default}"` | `"{colors.fg.default}"` | | `link.secondary.text.hover` | \{ `value`: `"{colors.fg.default}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"10%"`]]; }; } | - | | `link.secondary.text.hover.value` | `"{colors.fg.default}"` | `"{colors.fg.default}"` | | `link.secondary.text.hover.modify` | \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"10%"`]]; } | - | | `link.secondary.text.hover.modify.type` | `"color-mix"` | `"color-mix"` | | `link.secondary.text.hover.modify.value` | readonly \[readonly \[`"{colors.bg.contrast}"`, `"10%"`]] | - | | `link.secondary.text.pressed` | \{ `value`: `"{colors.fg.default}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"20%"`]]; }; } | - | | `link.secondary.text.pressed.value` | `"{colors.fg.default}"` | `"{colors.fg.default}"` | | `link.secondary.text.pressed.modify` | \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"20%"`]]; } | - | | `link.secondary.text.pressed.modify.type` | `"color-mix"` | `"color-mix"` | | `link.secondary.text.pressed.modify.value` | readonly \[readonly \[`"{colors.bg.contrast}"`, `"20%"`]] | - | | `input` | \{ `bg`: \{ `default`: \{ `value`: `"{colors.bg.default}"`; }; `readonly`: \{ `value`: `"{colors.bg.alternate}"`; }; }; `border`: \{ `default`: \{ `value`: `"{colors.line.heavy}"`; }; `focus`: \{ `value`: `"{colors.line.primary}"`; }; `error`: \{ `value`: `"{colors.line.negative}"`; }; `success`: \{ `value`: `"{colors.line.positive}"`; }; }; `label`: \{ `default`: \{ `value`: `"{colors.fg.default}"`; }; }; `placeholder`: \{ `default`: \{ `value`: `"{colors.fg.muted}"`; }; }; `text`: \{ `default`: \{ `value`: `"{colors.fg.default}"`; }; `readonly`: \{ `value`: `"{colors.fg.muted}"`; }; }; `errorText`: \{ `default`: \{ `value`: `"{colors.fg.negative}"`; }; }; `successText`: \{ `default`: \{ `value`: `"{colors.fg.positive}"`; }; }; } | - | | `input.bg` | \{ `default`: \{ `value`: `"{colors.bg.default}"`; }; `readonly`: \{ `value`: `"{colors.bg.alternate}"`; }; } | - | | `input.bg.default` | \{ `value`: `"{colors.bg.default}"`; } | - | | `input.bg.default.value` | `"{colors.bg.default}"` | `"{colors.bg.default}"` | | `input.bg.readonly` | \{ `value`: `"{colors.bg.alternate}"`; } | - | | `input.bg.readonly.value` | `"{colors.bg.alternate}"` | `"{colors.bg.alternate}"` | | `input.border` | \{ `default`: \{ `value`: `"{colors.line.heavy}"`; }; `focus`: \{ `value`: `"{colors.line.primary}"`; }; `error`: \{ `value`: `"{colors.line.negative}"`; }; `success`: \{ `value`: `"{colors.line.positive}"`; }; } | - | | `input.border.default` | \{ `value`: `"{colors.line.heavy}"`; } | - | | `input.border.default.value` | `"{colors.line.heavy}"` | `"{colors.line.heavy}"` | | `input.border.focus` | \{ `value`: `"{colors.line.primary}"`; } | - | | `input.border.focus.value` | `"{colors.line.primary}"` | `"{colors.line.primary}"` | | `input.border.error` | \{ `value`: `"{colors.line.negative}"`; } | - | | `input.border.error.value` | `"{colors.line.negative}"` | `"{colors.line.negative}"` | | `input.border.success` | \{ `value`: `"{colors.line.positive}"`; } | - | | `input.border.success.value` | `"{colors.line.positive}"` | `"{colors.line.positive}"` | | `input.label` | \{ `default`: \{ `value`: `"{colors.fg.default}"`; }; } | - | | `input.label.default` | \{ `value`: `"{colors.fg.default}"`; } | - | | `input.label.default.value` | `"{colors.fg.default}"` | `"{colors.fg.default}"` | | `input.placeholder` | \{ `default`: \{ `value`: `"{colors.fg.muted}"`; }; } | - | | `input.placeholder.default` | \{ `value`: `"{colors.fg.muted}"`; } | - | | `input.placeholder.default.value` | `"{colors.fg.muted}"` | `"{colors.fg.muted}"` | | `input.text` | \{ `default`: \{ `value`: `"{colors.fg.default}"`; }; `readonly`: \{ `value`: `"{colors.fg.muted}"`; }; } | - | | `input.text.default` | \{ `value`: `"{colors.fg.default}"`; } | - | | `input.text.default.value` | `"{colors.fg.default}"` | `"{colors.fg.default}"` | | `input.text.readonly` | \{ `value`: `"{colors.fg.muted}"`; } | - | | `input.text.readonly.value` | `"{colors.fg.muted}"` | `"{colors.fg.muted}"` | | `input.errorText` | \{ `default`: \{ `value`: `"{colors.fg.negative}"`; }; } | - | | `input.errorText.default` | \{ `value`: `"{colors.fg.negative}"`; } | - | | `input.errorText.default.value` | `"{colors.fg.negative}"` | `"{colors.fg.negative}"` | | `input.successText` | \{ `default`: \{ `value`: `"{colors.fg.positive}"`; }; } | - | | `input.successText.default` | \{ `value`: `"{colors.fg.positive}"`; } | - | | `input.successText.default.value` | `"{colors.fg.positive}"` | `"{colors.fg.positive}"` | | `select` | \{ `label`: \{ `default`: \{ `value`: `"{colors.fg.default}"`; }; }; `trigger`: \{ `bg`: \{ `default`: \{ `value`: `"{colors.bg.default}"`; }; `hover`: \{ `value`: `"{colors.bg.default}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"5%"`]]; }; }; `pressed`: \{ `value`: `"{colors.bg.default}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"7%"`]]; }; }; }; `border`: \{ `default`: \{ `value`: `"{colors.line.default}"`; }; `focus`: \{ `value`: `"{colors.line.primary}"`; }; `error`: \{ `value`: `"{colors.line.negative}"`; }; `success`: \{ `value`: `"{colors.line.positive}"`; }; }; `placeholder`: \{ `default`: \{ `value`: `"{colors.fg.muted}"`; }; }; `text`: \{ `default`: \{ `value`: `"{colors.fg.default}"`; }; }; `errorText`: \{ `default`: \{ `value`: `"{colors.fg.negative}"`; }; }; `successText`: \{ `default`: \{ `value`: `"{colors.fg.positive}"`; }; }; }; `list`: \{ `bg`: \{ `default`: \{ `value`: `"{colors.bg.default}"`; }; }; `border`: \{ `default`: \{ `value`: `"{colors.line.default}"`; }; `focus`: \{ `value`: `"{colors.line.primary}"`; }; `error`: \{ `value`: `"{colors.line.negative}"`; }; `success`: \{ `value`: `"{colors.line.positive}"`; }; }; `item`: \{ `bg`: \{ `default`: \{ `value`: `"{colors.bg.default}"`; }; `highlight`: \{ `value`: `"{colors.bg.default}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"10%"`]]; }; }; }; `text`: \{ `default`: \{ `value`: `"{colors.fg.default}"`; }; `muted`: \{ `value`: `"{colors.fg.muted}"`; }; `onHighlight`: \{ `value`: `"{colors.fg.default}"`; }; `mutedOnHighlight`: \{ `value`: `"{colors.fg.muted}"`; }; }; }; }; } | - | | `select.label` | \{ `default`: \{ `value`: `"{colors.fg.default}"`; }; } | - | | `select.label.default` | \{ `value`: `"{colors.fg.default}"`; } | - | | `select.label.default.value` | `"{colors.fg.default}"` | `"{colors.fg.default}"` | | `select.trigger` | \{ `bg`: \{ `default`: \{ `value`: `"{colors.bg.default}"`; }; `hover`: \{ `value`: `"{colors.bg.default}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"5%"`]]; }; }; `pressed`: \{ `value`: `"{colors.bg.default}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"7%"`]]; }; }; }; `border`: \{ `default`: \{ `value`: `"{colors.line.default}"`; }; `focus`: \{ `value`: `"{colors.line.primary}"`; }; `error`: \{ `value`: `"{colors.line.negative}"`; }; `success`: \{ `value`: `"{colors.line.positive}"`; }; }; `placeholder`: \{ `default`: \{ `value`: `"{colors.fg.muted}"`; }; }; `text`: \{ `default`: \{ `value`: `"{colors.fg.default}"`; }; }; `errorText`: \{ `default`: \{ `value`: `"{colors.fg.negative}"`; }; }; `successText`: \{ `default`: \{ `value`: `"{colors.fg.positive}"`; }; }; } | - | | `select.trigger.bg` | \{ `default`: \{ `value`: `"{colors.bg.default}"`; }; `hover`: \{ `value`: `"{colors.bg.default}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"5%"`]]; }; }; `pressed`: \{ `value`: `"{colors.bg.default}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"7%"`]]; }; }; } | - | | `select.trigger.bg.default` | \{ `value`: `"{colors.bg.default}"`; } | - | | `select.trigger.bg.default.value` | `"{colors.bg.default}"` | `"{colors.bg.default}"` | | `select.trigger.bg.hover` | \{ `value`: `"{colors.bg.default}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"5%"`]]; }; } | - | | `select.trigger.bg.hover.value` | `"{colors.bg.default}"` | `"{colors.bg.default}"` | | `select.trigger.bg.hover.modify` | \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"5%"`]]; } | - | | `select.trigger.bg.hover.modify.type` | `"color-mix"` | `"color-mix"` | | `select.trigger.bg.hover.modify.value` | readonly \[readonly \[`"{colors.bg.contrast}"`, `"5%"`]] | - | | `select.trigger.bg.pressed` | \{ `value`: `"{colors.bg.default}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"7%"`]]; }; } | - | | `select.trigger.bg.pressed.value` | `"{colors.bg.default}"` | `"{colors.bg.default}"` | | `select.trigger.bg.pressed.modify` | \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"7%"`]]; } | - | | `select.trigger.bg.pressed.modify.type` | `"color-mix"` | `"color-mix"` | | `select.trigger.bg.pressed.modify.value` | readonly \[readonly \[`"{colors.bg.contrast}"`, `"7%"`]] | - | | `select.trigger.border` | \{ `default`: \{ `value`: `"{colors.line.default}"`; }; `focus`: \{ `value`: `"{colors.line.primary}"`; }; `error`: \{ `value`: `"{colors.line.negative}"`; }; `success`: \{ `value`: `"{colors.line.positive}"`; }; } | - | | `select.trigger.border.default` | \{ `value`: `"{colors.line.default}"`; } | - | | `select.trigger.border.default.value` | `"{colors.line.default}"` | `"{colors.line.default}"` | | `select.trigger.border.focus` | \{ `value`: `"{colors.line.primary}"`; } | - | | `select.trigger.border.focus.value` | `"{colors.line.primary}"` | `"{colors.line.primary}"` | | `select.trigger.border.error` | \{ `value`: `"{colors.line.negative}"`; } | - | | `select.trigger.border.error.value` | `"{colors.line.negative}"` | `"{colors.line.negative}"` | | `select.trigger.border.success` | \{ `value`: `"{colors.line.positive}"`; } | - | | `select.trigger.border.success.value` | `"{colors.line.positive}"` | `"{colors.line.positive}"` | | `select.trigger.placeholder` | \{ `default`: \{ `value`: `"{colors.fg.muted}"`; }; } | - | | `select.trigger.placeholder.default` | \{ `value`: `"{colors.fg.muted}"`; } | - | | `select.trigger.placeholder.default.value` | `"{colors.fg.muted}"` | `"{colors.fg.muted}"` | | `select.trigger.text` | \{ `default`: \{ `value`: `"{colors.fg.default}"`; }; } | - | | `select.trigger.text.default` | \{ `value`: `"{colors.fg.default}"`; } | - | | `select.trigger.text.default.value` | `"{colors.fg.default}"` | `"{colors.fg.default}"` | | `select.trigger.errorText` | \{ `default`: \{ `value`: `"{colors.fg.negative}"`; }; } | - | | `select.trigger.errorText.default` | \{ `value`: `"{colors.fg.negative}"`; } | - | | `select.trigger.errorText.default.value` | `"{colors.fg.negative}"` | `"{colors.fg.negative}"` | | `select.trigger.successText` | \{ `default`: \{ `value`: `"{colors.fg.positive}"`; }; } | - | | `select.trigger.successText.default` | \{ `value`: `"{colors.fg.positive}"`; } | - | | `select.trigger.successText.default.value` | `"{colors.fg.positive}"` | `"{colors.fg.positive}"` | | `select.list` | \{ `bg`: \{ `default`: \{ `value`: `"{colors.bg.default}"`; }; }; `border`: \{ `default`: \{ `value`: `"{colors.line.default}"`; }; `focus`: \{ `value`: `"{colors.line.primary}"`; }; `error`: \{ `value`: `"{colors.line.negative}"`; }; `success`: \{ `value`: `"{colors.line.positive}"`; }; }; `item`: \{ `bg`: \{ `default`: \{ `value`: `"{colors.bg.default}"`; }; `highlight`: \{ `value`: `"{colors.bg.default}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"10%"`]]; }; }; }; `text`: \{ `default`: \{ `value`: `"{colors.fg.default}"`; }; `muted`: \{ `value`: `"{colors.fg.muted}"`; }; `onHighlight`: \{ `value`: `"{colors.fg.default}"`; }; `mutedOnHighlight`: \{ `value`: `"{colors.fg.muted}"`; }; }; }; } | - | | `select.list.bg` | \{ `default`: \{ `value`: `"{colors.bg.default}"`; }; } | - | | `select.list.bg.default` | \{ `value`: `"{colors.bg.default}"`; } | - | | `select.list.bg.default.value` | `"{colors.bg.default}"` | `"{colors.bg.default}"` | | `select.list.border` | \{ `default`: \{ `value`: `"{colors.line.default}"`; }; `focus`: \{ `value`: `"{colors.line.primary}"`; }; `error`: \{ `value`: `"{colors.line.negative}"`; }; `success`: \{ `value`: `"{colors.line.positive}"`; }; } | - | | `select.list.border.default` | \{ `value`: `"{colors.line.default}"`; } | - | | `select.list.border.default.value` | `"{colors.line.default}"` | `"{colors.line.default}"` | | `select.list.border.focus` | \{ `value`: `"{colors.line.primary}"`; } | - | | `select.list.border.focus.value` | `"{colors.line.primary}"` | `"{colors.line.primary}"` | | `select.list.border.error` | \{ `value`: `"{colors.line.negative}"`; } | - | | `select.list.border.error.value` | `"{colors.line.negative}"` | `"{colors.line.negative}"` | | `select.list.border.success` | \{ `value`: `"{colors.line.positive}"`; } | - | | `select.list.border.success.value` | `"{colors.line.positive}"` | `"{colors.line.positive}"` | | `select.list.item` | \{ `bg`: \{ `default`: \{ `value`: `"{colors.bg.default}"`; }; `highlight`: \{ `value`: `"{colors.bg.default}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"10%"`]]; }; }; }; `text`: \{ `default`: \{ `value`: `"{colors.fg.default}"`; }; `muted`: \{ `value`: `"{colors.fg.muted}"`; }; `onHighlight`: \{ `value`: `"{colors.fg.default}"`; }; `mutedOnHighlight`: \{ `value`: `"{colors.fg.muted}"`; }; }; } | - | | `select.list.item.bg` | \{ `default`: \{ `value`: `"{colors.bg.default}"`; }; `highlight`: \{ `value`: `"{colors.bg.default}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"10%"`]]; }; }; } | - | | `select.list.item.bg.default` | \{ `value`: `"{colors.bg.default}"`; } | - | | `select.list.item.bg.default.value` | `"{colors.bg.default}"` | `"{colors.bg.default}"` | | `select.list.item.bg.highlight` | \{ `value`: `"{colors.bg.default}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"10%"`]]; }; } | - | | `select.list.item.bg.highlight.value` | `"{colors.bg.default}"` | `"{colors.bg.default}"` | | `select.list.item.bg.highlight.modify` | \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.contrast}"`, `"10%"`]]; } | - | | `select.list.item.bg.highlight.modify.type` | `"color-mix"` | `"color-mix"` | | `select.list.item.bg.highlight.modify.value` | readonly \[readonly \[`"{colors.bg.contrast}"`, `"10%"`]] | - | | `select.list.item.text` | \{ `default`: \{ `value`: `"{colors.fg.default}"`; }; `muted`: \{ `value`: `"{colors.fg.muted}"`; }; `onHighlight`: \{ `value`: `"{colors.fg.default}"`; }; `mutedOnHighlight`: \{ `value`: `"{colors.fg.muted}"`; }; } | - | | `select.list.item.text.default` | \{ `value`: `"{colors.fg.default}"`; } | - | | `select.list.item.text.default.value` | `"{colors.fg.default}"` | `"{colors.fg.default}"` | | `select.list.item.text.muted` | \{ `value`: `"{colors.fg.muted}"`; } | - | | `select.list.item.text.muted.value` | `"{colors.fg.muted}"` | `"{colors.fg.muted}"` | | `select.list.item.text.onHighlight` | \{ `value`: `"{colors.fg.default}"`; } | - | | `select.list.item.text.onHighlight.value` | `"{colors.fg.default}"` | `"{colors.fg.default}"` | | `select.list.item.text.mutedOnHighlight` | \{ `value`: `"{colors.fg.muted}"`; } | - | | `select.list.item.text.mutedOnHighlight.value` | `"{colors.fg.muted}"` | `"{colors.fg.muted}"` | | `code` | \{ `bg`: \{ `default`: \{ `value`: `"{colors.bg.alternate}"`; }; }; `border`: \{ `default`: \{ `value`: `"{colors.line.heavy}"`; }; }; `text`: \{ `default`: \{ `value`: `"{colors.fg.default}"`; }; }; } | - | | `code.bg` | \{ `default`: \{ `value`: `"{colors.bg.alternate}"`; }; } | - | | `code.bg.default` | \{ `value`: `"{colors.bg.alternate}"`; } | - | | `code.bg.default.value` | `"{colors.bg.alternate}"` | `"{colors.bg.alternate}"` | | `code.border` | \{ `default`: \{ `value`: `"{colors.line.heavy}"`; }; } | - | | `code.border.default` | \{ `value`: `"{colors.line.heavy}"`; } | - | | `code.border.default.value` | `"{colors.line.heavy}"` | `"{colors.line.heavy}"` | | `code.text` | \{ `default`: \{ `value`: `"{colors.fg.default}"`; }; } | - | | `code.text.default` | \{ `value`: `"{colors.fg.default}"`; } | - | | `code.text.default.value` | `"{colors.fg.default}"` | `"{colors.fg.default}"` | | `badge` | \{ `primary`: \{ `bg`: \{ `default`: \{ `value`: `"{colors.bg.primaryWash}"`; }; }; `text`: \{ `default`: \{ `value`: `"{colors.fg.primary}"`; }; }; }; `secondary`: \{ `bg`: \{ `default`: \{ `value`: `"{colors.bg.secondary}"`; }; }; `text`: \{ `default`: \{ `value`: `"{colors.fg.onSecondary}"`; }; }; }; `warning`: \{ `bg`: \{ `default`: \{ `value`: `"{colors.bg.warningWash}"`; }; }; `text`: \{ `default`: \{ `value`: `"{colors.fg.warning}"`; }; }; }; } | - | | `badge.primary` | \{ `bg`: \{ `default`: \{ `value`: `"{colors.bg.primaryWash}"`; }; }; `text`: \{ `default`: \{ `value`: `"{colors.fg.primary}"`; }; }; } | - | | `badge.primary.bg` | \{ `default`: \{ `value`: `"{colors.bg.primaryWash}"`; }; } | - | | `badge.primary.bg.default` | \{ `value`: `"{colors.bg.primaryWash}"`; } | - | | `badge.primary.bg.default.value` | `"{colors.bg.primaryWash}"` | `"{colors.bg.primaryWash}"` | | `badge.primary.text` | \{ `default`: \{ `value`: `"{colors.fg.primary}"`; }; } | - | | `badge.primary.text.default` | \{ `value`: `"{colors.fg.primary}"`; } | - | | `badge.primary.text.default.value` | `"{colors.fg.primary}"` | `"{colors.fg.primary}"` | | `badge.secondary` | \{ `bg`: \{ `default`: \{ `value`: `"{colors.bg.secondary}"`; }; }; `text`: \{ `default`: \{ `value`: `"{colors.fg.onSecondary}"`; }; }; } | - | | `badge.secondary.bg` | \{ `default`: \{ `value`: `"{colors.bg.secondary}"`; }; } | - | | `badge.secondary.bg.default` | \{ `value`: `"{colors.bg.secondary}"`; } | - | | `badge.secondary.bg.default.value` | `"{colors.bg.secondary}"` | `"{colors.bg.secondary}"` | | `badge.secondary.text` | \{ `default`: \{ `value`: `"{colors.fg.onSecondary}"`; }; } | - | | `badge.secondary.text.default` | \{ `value`: `"{colors.fg.onSecondary}"`; } | - | | `badge.secondary.text.default.value` | `"{colors.fg.onSecondary}"` | `"{colors.fg.onSecondary}"` | | `badge.warning` | \{ `bg`: \{ `default`: \{ `value`: `"{colors.bg.warningWash}"`; }; }; `text`: \{ `default`: \{ `value`: `"{colors.fg.warning}"`; }; }; } | - | | `badge.warning.bg` | \{ `default`: \{ `value`: `"{colors.bg.warningWash}"`; }; } | - | | `badge.warning.bg.default` | \{ `value`: `"{colors.bg.warningWash}"`; } | - | | `badge.warning.bg.default.value` | `"{colors.bg.warningWash}"` | `"{colors.bg.warningWash}"` | | `badge.warning.text` | \{ `default`: \{ `value`: `"{colors.fg.warning}"`; }; } | - | | `badge.warning.text.default` | \{ `value`: `"{colors.fg.warning}"`; } | - | | `badge.warning.text.default.value` | `"{colors.fg.warning}"` | `"{colors.fg.warning}"` | | `bg` | \{ `default`: \{ `value`: `"#ffffff"`; }; `alternate`: \{ `value`: `"#eef0f3"`; }; `contrast`: \{ `value`: `"{colors.fg.default}"`; }; `overlay`: \{ `value`: `"{colors.bg.alternate}"`; `modify`: \{ `type`: `"color-alpha"`; `value`: `0.33`; }; }; `skeleton`: \{ `value`: `"{colors.fg.default}"`; `modify`: \{ `type`: `"color-alpha"`; `value`: `0.1`; }; }; `primary`: \{ `value`: `"#0052ff"`; }; `secondary`: \{ `value`: `"#eef0f3"`; }; `primaryWash`: \{ `value`: `"{colors.fg.primary}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]]; }; }; `positiveWash`: \{ `value`: `"{colors.fg.positive}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]]; }; }; `negativeWash`: \{ `value`: `"{colors.fg.negative}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]]; }; }; `warningWash`: \{ `value`: `"{colors.fg.warning}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]]; }; }; } | - | | `bg.default` | \{ `value`: `"#ffffff"`; } | - | | `bg.default.value` | `"#ffffff"` | `colorsBase.white` | | `bg.alternate` | \{ `value`: `"#eef0f3"`; } | - | | `bg.alternate.value` | `"#eef0f3"` | `colorsBase.gray100` | | `bg.contrast` | \{ `value`: `"{colors.fg.default}"`; } | - | | `bg.contrast.value` | `"{colors.fg.default}"` | `"{colors.fg.default}"` | | `bg.overlay` | \{ `value`: `"{colors.bg.alternate}"`; `modify`: \{ `type`: `"color-alpha"`; `value`: `0.33`; }; } | - | | `bg.overlay.value` | `"{colors.bg.alternate}"` | `"{colors.bg.alternate}"` | | `bg.overlay.modify` | \{ `type`: `"color-alpha"`; `value`: `0.33`; } | - | | `bg.overlay.modify.type` | `"color-alpha"` | `"color-alpha"` | | `bg.overlay.modify.value` | `0.33` | `0.33` | | `bg.skeleton` | \{ `value`: `"{colors.fg.default}"`; `modify`: \{ `type`: `"color-alpha"`; `value`: `0.1`; }; } | - | | `bg.skeleton.value` | `"{colors.fg.default}"` | `"{colors.fg.default}"` | | `bg.skeleton.modify` | \{ `type`: `"color-alpha"`; `value`: `0.1`; } | - | | `bg.skeleton.modify.type` | `"color-alpha"` | `"color-alpha"` | | `bg.skeleton.modify.value` | `0.1` | `0.1` | | `bg.primary` | \{ `value`: `"#0052ff"`; } | - | | `bg.primary.value` | `"#0052ff"` | `colorsBase.blue500` | | `bg.secondary` | \{ `value`: `"#eef0f3"`; } | - | | `bg.secondary.value` | `"#eef0f3"` | `colorsBase.gray100` | | `bg.primaryWash` | \{ `value`: `"{colors.fg.primary}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]]; }; } | - | | `bg.primaryWash.value` | `"{colors.fg.primary}"` | `"{colors.fg.primary}"` | | `bg.primaryWash.modify` | \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]]; } | - | | `bg.primaryWash.modify.type` | `"color-mix"` | `"color-mix"` | | `bg.primaryWash.modify.value` | readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]] | - | | `bg.positiveWash` | \{ `value`: `"{colors.fg.positive}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]]; }; } | - | | `bg.positiveWash.value` | `"{colors.fg.positive}"` | `"{colors.fg.positive}"` | | `bg.positiveWash.modify` | \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]]; } | - | | `bg.positiveWash.modify.type` | `"color-mix"` | `"color-mix"` | | `bg.positiveWash.modify.value` | readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]] | - | | `bg.negativeWash` | \{ `value`: `"{colors.fg.negative}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]]; }; } | - | | `bg.negativeWash.value` | `"{colors.fg.negative}"` | `"{colors.fg.negative}"` | | `bg.negativeWash.modify` | \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]]; } | - | | `bg.negativeWash.modify.type` | `"color-mix"` | `"color-mix"` | | `bg.negativeWash.modify.value` | readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]] | - | | `bg.warningWash` | \{ `value`: `"{colors.fg.warning}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]]; }; } | - | | `bg.warningWash.value` | `"{colors.fg.warning}"` | `"{colors.fg.warning}"` | | `bg.warningWash.modify` | \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]]; } | - | | `bg.warningWash.modify.type` | `"color-mix"` | `"color-mix"` | | `bg.warningWash.modify.value` | readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]] | - | | `fg` | \{ `default`: \{ `value`: `"#0a0b0d"`; }; `muted`: \{ `value`: `"#5b616e"`; }; `primary`: \{ `value`: `"#0052ff"`; }; `onPrimary`: \{ `value`: `"#ffffff"`; }; `onSecondary`: \{ `value`: `"#0a0b0d"`; }; `positive`: \{ `value`: `"#098551"`; }; `negative`: \{ `value`: `"#cf202f"`; }; `warning`: \{ `value`: `"#ed702f"`; }; `onPrimaryWash`: \{ `value`: `"{colors.fg.onPrimary}"`; }; `onPositiveWash`: \{ `value`: `"{colors.fg.default}"`; }; `onNegativeWash`: \{ `value`: `"{colors.fg.default}"`; }; `onWarningWash`: \{ `value`: `"{colors.fg.default}"`; }; } | - | | `fg.default` | \{ `value`: `"#0a0b0d"`; } | - | | `fg.default.value` | `"#0a0b0d"` | `colorsBase.black` | | `fg.muted` | \{ `value`: `"#5b616e"`; } | - | | `fg.muted.value` | `"#5b616e"` | `colorsBase.gray700` | | `fg.primary` | \{ `value`: `"#0052ff"`; } | - | | `fg.primary.value` | `"#0052ff"` | `colorsBase.blue500` | | `fg.onPrimary` | \{ `value`: `"#ffffff"`; } | - | | `fg.onPrimary.value` | `"#ffffff"` | `colorsBase.white` | | `fg.onSecondary` | \{ `value`: `"#0a0b0d"`; } | - | | `fg.onSecondary.value` | `"#0a0b0d"` | `colorsBase.black` | | `fg.positive` | \{ `value`: `"#098551"`; } | - | | `fg.positive.value` | `"#098551"` | `colorsBase.green500` | | `fg.negative` | \{ `value`: `"#cf202f"`; } | - | | `fg.negative.value` | `"#cf202f"` | `colorsBase.red500` | | `fg.warning` | \{ `value`: `"#ed702f"`; } | - | | `fg.warning.value` | `"#ed702f"` | `colorsBase.amber500` | | `fg.onPrimaryWash` | \{ `value`: `"{colors.fg.onPrimary}"`; } | - | | `fg.onPrimaryWash.value` | `"{colors.fg.onPrimary}"` | `"{colors.fg.onPrimary}"` | | `fg.onPositiveWash` | \{ `value`: `"{colors.fg.default}"`; } | - | | `fg.onPositiveWash.value` | `"{colors.fg.default}"` | `"{colors.fg.default}"` | | `fg.onNegativeWash` | \{ `value`: `"{colors.fg.default}"`; } | - | | `fg.onNegativeWash.value` | `"{colors.fg.default}"` | `"{colors.fg.default}"` | | `fg.onWarningWash` | \{ `value`: `"{colors.fg.default}"`; } | - | | `fg.onWarningWash.value` | `"{colors.fg.default}"` | `"{colors.fg.default}"` | | `line` | \{ `default`: \{ `value`: `"#dcdfe4"`; }; `heavy`: \{ `value`: `"#9397a0"`; }; `primary`: \{ `value`: `"{colors.fg.primary}"`; }; `positive`: \{ `value`: `"{colors.fg.positive}"`; }; `negative`: \{ `value`: `"{colors.fg.negative}"`; }; } | - | | `line.default` | \{ `value`: `"#dcdfe4"`; } | - | | `line.default.value` | `"#dcdfe4"` | `colorsBase.gray200` | | `line.heavy` | \{ `value`: `"#9397a0"`; } | - | | `line.heavy.value` | `"#9397a0"` | `colorsBase.gray500` | | `line.primary` | \{ `value`: `"{colors.fg.primary}"`; } | - | | `line.primary.value` | `"{colors.fg.primary}"` | `"{colors.fg.primary}"` | | `line.positive` | \{ `value`: `"{colors.fg.positive}"`; } | - | | `line.positive.value` | `"{colors.fg.positive}"` | `"{colors.fg.positive}"` | | `line.negative` | \{ `value`: `"{colors.fg.negative}"`; } | - | | `line.negative.value` | `"{colors.fg.negative}"` | `"{colors.fg.negative}"` |