> ## 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.
# colorsComponents
```ts theme={null}
const colorsComponents: {
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}";
};
};
};
};
};
```
These are the default values for the component color tokens.
Component colors are the colors for the individual UI components.
They inherit values from the [colorsSemantic](/sdks/cdp-sdks-v2/frontend/@coinbase/cdp-react/Variables/colorsSemantic).
## 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}"` |
| `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}"`; }; }; }; } | - |
| `banner.error` | \{ `bg`: \{ `default`: \{ `value`: `"{colors.bg.negativeWash}"`; }; }; `icon`: \{ `default`: \{ `value`: `"{colors.fg.negative}"`; }; }; `text`: \{ `default`: \{ `value`: `"{colors.fg.onNegativeWash}"`; }; }; } | - |
| `banner.error.bg` | \{ `default`: \{ `value`: `"{colors.bg.negativeWash}"`; }; } | - |
| `banner.error.bg.default` | \{ `value`: `"{colors.bg.negativeWash}"`; } | - |
| `banner.error.bg.default.value` | `"{colors.bg.negativeWash}"` | `"{colors.bg.negativeWash}"` |
| `banner.error.icon` | \{ `default`: \{ `value`: `"{colors.fg.negative}"`; }; } | - |
| `banner.error.icon.default` | \{ `value`: `"{colors.fg.negative}"`; } | - |
| `banner.error.icon.default.value` | `"{colors.fg.negative}"` | `"{colors.fg.negative}"` |
| `banner.error.text` | \{ `default`: \{ `value`: `"{colors.fg.onNegativeWash}"`; }; } | - |
| `banner.error.text.default` | \{ `value`: `"{colors.fg.onNegativeWash}"`; } | - |
| `banner.error.text.default.value` | `"{colors.fg.onNegativeWash}"` | `"{colors.fg.onNegativeWash}"` |
| `banner.success` | \{ `bg`: \{ `default`: \{ `value`: `"{colors.bg.positiveWash}"`; }; }; `icon`: \{ `default`: \{ `value`: `"{colors.fg.positive}"`; }; }; `text`: \{ `default`: \{ `value`: `"{colors.fg.onPositiveWash}"`; }; }; } | - |
| `banner.success.bg` | \{ `default`: \{ `value`: `"{colors.bg.positiveWash}"`; }; } | - |
| `banner.success.bg.default` | \{ `value`: `"{colors.bg.positiveWash}"`; } | - |
| `banner.success.bg.default.value` | `"{colors.bg.positiveWash}"` | `"{colors.bg.positiveWash}"` |
| `banner.success.icon` | \{ `default`: \{ `value`: `"{colors.fg.positive}"`; }; } | - |
| `banner.success.icon.default` | \{ `value`: `"{colors.fg.positive}"`; } | - |
| `banner.success.icon.default.value` | `"{colors.fg.positive}"` | `"{colors.fg.positive}"` |
| `banner.success.text` | \{ `default`: \{ `value`: `"{colors.fg.onPositiveWash}"`; }; } | - |
| `banner.success.text.default` | \{ `value`: `"{colors.fg.onPositiveWash}"`; } | - |
| `banner.success.text.default.value` | `"{colors.fg.onPositiveWash}"` | `"{colors.fg.onPositiveWash}"` |
| `banner.warning` | \{ `bg`: \{ `default`: \{ `value`: `"{colors.bg.warningWash}"`; }; }; `icon`: \{ `default`: \{ `value`: `"{colors.fg.warning}"`; }; }; `text`: \{ `default`: \{ `value`: `"{colors.fg.onWarningWash}"`; }; }; } | - |
| `banner.warning.bg` | \{ `default`: \{ `value`: `"{colors.bg.warningWash}"`; }; } | - |
| `banner.warning.bg.default` | \{ `value`: `"{colors.bg.warningWash}"`; } | - |
| `banner.warning.bg.default.value` | `"{colors.bg.warningWash}"` | `"{colors.bg.warningWash}"` |
| `banner.warning.icon` | \{ `default`: \{ `value`: `"{colors.fg.warning}"`; }; } | - |
| `banner.warning.icon.default` | \{ `value`: `"{colors.fg.warning}"`; } | - |
| `banner.warning.icon.default.value` | `"{colors.fg.warning}"` | `"{colors.fg.warning}"` |
| `banner.warning.text` | \{ `default`: \{ `value`: `"{colors.fg.onWarningWash}"`; }; } | - |
| `banner.warning.text.default` | \{ `value`: `"{colors.fg.onWarningWash}"`; } | - |
| `banner.warning.text.default.value` | `"{colors.fg.onWarningWash}"` | `"{colors.fg.onWarningWash}"` |