open-ds 0.0.0-stage → 0.1.0

package/assets/tokens/dense-data/tokens.css

@@ -0,0 +1,331 @@
+/* Dense data (dense-data) tokens. Generated by tokens/build.mjs from schemes/dense-data.json. Brands: default. Modes: light, dark (add class "dark"). */
+
+:root {
+  --space-gap-tight: 0.25rem; /** Between things that belong together. */
+  --space-gap-default: 0.5rem; /** Between items in one group. */
+  --space-gap-group: 1rem; /** Between groups. */
+  --space-gap-section: 1.5rem; /** Between page sections. */
+  --space-inset-control-x: 0.75rem; /** Horizontal padding inside controls. */
+  --space-inset-container: 1rem; /** Padding inside cards and dialogs. */
+  --space-inset-cell-x: 0.75rem; /** Horizontal padding inside table cells. */
+  --size-control-default: 2rem; /** Height of buttons and inputs, and the smallest target. */
+  --size-control-compact: 1.5rem; /** Height of compact controls. */
+  --size-row: 2rem; /** Height of one table row. */
+  --size-icon: 1rem; /** Icon size next to text. */
+  --radius-round: 9999px; /** Fully round: avatars and dots. */
+  --border-width-default: 1px; /** Every border. */
+  --border-width-focus: 2px; /** The focus ring. */
+  --opacity-disabled: 0.4; /** Disabled controls. */
+  --type-display-font-size: 1.5rem;
+  --type-display-line-height: 1.75rem;
+  --type-display-font-weight: 600;
+  --type-title-font-size: 1.25rem;
+  --type-title-line-height: 1.5rem;
+  --type-title-font-weight: 600;
+  --type-heading-font-size: 1rem;
+  --type-heading-line-height: 1.25rem;
+  --type-heading-font-weight: 600;
+  --type-body-font-size: 0.875rem;
+  --type-body-line-height: 1.25rem;
+  --type-body-font-weight: 400;
+  --type-label-font-size: 0.75rem;
+  --type-label-line-height: 1rem;
+  --type-label-font-weight: 500;
+  --type-caption-font-size: 0.75rem;
+  --type-caption-line-height: 1rem;
+  --type-caption-font-weight: 400;
+  --type-data-font-size: 0.8125rem;
+  --type-data-line-height: 1rem;
+  --type-data-font-weight: 400;
+  --motion-duration-feedback: 120ms; /** Feedback speed: fast. */
+  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); /** Feedback easing. */
+  --color-surface-canvas: #F7F8FA; /** The page background behind everything. */
+  --color-surface-default: #FFFFFF; /** The base fill for content. */
+  --color-surface-raised: #FFFFFF; /** Fills that float above content. */
+  --color-surface-sunken: #EEF1F5; /** A recessed fill, a step below content. */
+  --color-surface-selected: #EEEDFE; /** The fill of a selected or current item. */
+  --color-surface-inverse: #161B23; /** A reversed fill for small, short-lived messages. */
+  --color-surface-scrim: #0000008C; /** The see-through layer behind a modal. */
+  --color-text-primary: #161B23; /** Body text and headings. */
+  --color-text-secondary: #3D4655; /** Supporting text. */
+  --color-text-muted: #535D6D; /** The quietest text. */
+  --color-text-inverse: #FFFFFF; /** Text on an inverse fill. */
+  --color-text-on-action: #FFFFFF; /** Text and icons on the main action's fill. */
+  --color-text-link: #3B31B0; /** Links in running text. */
+  --color-border-default: #DDE2EA; /** Quiet edges and dividers. Decorative, so it has no contrast minimum. */
+  --color-border-strong: #6B7585; /** The edge of a control people must find. */
+  --color-border-focus: #4B3FD9; /** The focus ring. */
+  --color-action-primary: #4B3FD9; /** The one main action in a view. */
+  --color-action-primary-hover: #3B31B0; /** The main action under the pointer. */
+  --color-action-secondary: #FFFFFF; /** The fill of other actions. */
+  --color-action-secondary-hover: #EEF1F5; /** Other actions under the pointer. */
+  --color-status-info: #083C93; /** Neutral news: something changed and no action is needed. The lowest level of the urgency order. */
+  --color-status-info-subtle: #E1ECFF; /** The fill behind info status. */
+  --color-status-success: #1F7A3A; /** Confirmation that something worked. It sits outside the urgency order. */
+  --color-status-success-subtle: #E3F4EA; /** The fill behind success status. */
+  --color-status-warning: #8A5600; /** Caution: something may go wrong or needs a check, and it can be fixed. */
+  --color-status-warning-subtle: #FFF3D6; /** The fill behind warning status. */
+  --color-status-danger: #C42B2B; /** Real risk: errors, failed checks, actions that cannot be undone. The top of the urgency order. Overuse wears it out. */
+  --color-status-danger-subtle: #FDE7E7; /** The fill behind danger status. */
+  --color-category-1: #4B3FD9; /** Category 1: tells one item or series from another. It carries no meaning. */
+  --color-category-1-subtle: #EEEDFE; /** Category 1: the fill of a tag. */
+  --color-category-2: #0B4FC0; /** Category 2: tells one item or series from another. It carries no meaning. */
+  --color-category-2-subtle: #E1ECFF; /** Category 2: the fill of a tag. */
+  --color-category-3: #1F7A3A; /** Category 3: tells one item or series from another. It carries no meaning. */
+  --color-category-3-subtle: #E3F4EA; /** Category 3: the fill of a tag. */
+  --color-category-4: #8A5600; /** Category 4: tells one item or series from another. It carries no meaning. */
+  --color-category-4-subtle: #FFF3D6; /** Category 4: the fill of a tag. */
+  --color-category-5: #6B7585; /** Category 5: tells one item or series from another. It carries no meaning. */
+  --color-category-5-subtle: #EEF1F5; /** Category 5: the fill of a tag. */
+  --color-disabled-text: #6B7585; /** Text and icons of a control that cannot be used right now. */
+  --color-disabled-surface: #EEF1F5; /** The fill of a control that cannot be used right now. */
+  --color-disabled-border: #DDE2EA; /** The edge of a control that cannot be used right now. */
+  --radius-control: 0.125rem; /** Corner of buttons and inputs. */
+  --radius-badge: 0rem; /** Corner of badges and checkboxes. */
+  --radius-container: 0.25rem; /** Corner of cards, menus and dialogs. */
+  --type-display-font-family: "IBM Plex Sans", system-ui, sans-serif;
+  --type-title-font-family: "IBM Plex Sans", system-ui, sans-serif;
+  --type-heading-font-family: "IBM Plex Sans", system-ui, sans-serif;
+  --type-body-font-family: "IBM Plex Sans", system-ui, sans-serif;
+  --type-label-font-family: "IBM Plex Sans", system-ui, sans-serif;
+  --type-caption-font-family: "IBM Plex Sans", system-ui, sans-serif;
+  --type-data-font-family: "IBM Plex Mono", ui-monospace, monospace;
+  --elevation-card: 0px 0px 0px 0px #00000000; /** No shadow in this scheme. */
+  --elevation-overlay: 0px 8px 24px 0px #0D111729;
+  --button-height: var(--size-control-default); /** Button height. */
+  --button-padding-x: var(--space-inset-control-x); /** Horizontal padding inside a button. */
+  --button-font-size: var(--type-label-font-size); /** Button label size. */
+  --button-font-weight: var(--type-label-font-weight); /** Button label weight. */
+  --button-icon-size: var(--size-icon); /** Size of an icon inside a button. */
+  --input-height: var(--size-control-default); /** Input height. */
+  --input-padding-x: var(--space-inset-control-x); /** Horizontal padding inside an input. */
+  --input-font-size: var(--type-body-font-size); /** Typed text size. */
+  --badge-padding-x: var(--space-gap-tight); /** Horizontal padding inside a badge. */
+  --badge-font-size: var(--type-caption-font-size); /** Badge label size. */
+  --card-padding: var(--space-inset-container); /** Padding inside a card. */
+  --table-row-height: var(--size-row); /** Height of one data row. */
+  --table-cell-padding-x: var(--space-inset-cell-x); /** Horizontal padding inside a cell. */
+  --table-font-size: var(--type-data-font-size); /** Cell text size. */
+  --overlay-item-height: var(--size-control-default); /** Height of a menu item. */
+  --transition-duration: var(--motion-duration-feedback); /** Duration of feedback transitions. */
+  --transition-easing: var(--motion-easing-standard); /** Easing of feedback transitions. */
+  --button-primary-background: var(--color-action-primary); /** Primary button fill. */
+  --button-primary-background-hover: var(--color-action-primary-hover); /** Primary button fill on hover. */
+  --button-primary-label: var(--color-text-on-action); /** Primary button label color. */
+  --button-secondary-background: var(--color-action-secondary); /** Secondary button fill. */
+  --button-secondary-background-hover: var(--color-action-secondary-hover); /** Secondary button fill on hover. */
+  --button-secondary-label: var(--color-text-primary); /** Secondary button label color. */
+  --button-secondary-border: var(--color-border-strong); /** Secondary button border. */
+  --button-ghost-background-hover: var(--color-surface-sunken); /** Ghost button fill on hover. */
+  --button-ghost-label: var(--color-text-link); /** Ghost button label color. */
+  --button-radius: var(--radius-control); /** Button corner radius. */
+  --button-focus-ring: var(--color-border-focus); /** Focus ring color on any button. */
+  --button-disabled-background: var(--color-disabled-surface); /** Fill of a disabled button. */
+  --button-disabled-label: var(--color-disabled-text); /** Label of a disabled button. */
+  --button-disabled-border: var(--color-disabled-border); /** Border of a disabled secondary button. */
+  --input-background: var(--color-surface-default); /** Input fill. */
+  --input-border: var(--color-border-strong); /** Input border at rest. */
+  --input-border-focus: var(--color-border-focus); /** Input border when focused. */
+  --input-text: var(--color-text-primary); /** Typed text color. */
+  --input-placeholder: var(--color-text-muted); /** Placeholder text color. */
+  --input-radius: var(--radius-control); /** Input corner radius. */
+  --input-disabled-background: var(--color-disabled-surface); /** Fill of a disabled input. */
+  --input-disabled-border: var(--color-disabled-border); /** Border of a disabled input. */
+  --input-disabled-text: var(--color-disabled-text); /** Text in a disabled input. */
+  --control-checked: var(--color-action-primary); /** Fill of a checked checkbox or an on switch. */
+  --control-track: var(--color-border-strong); /** Track of an off switch. */
+  --control-thumb: var(--color-surface-default); /** Switch thumb and checkmark color. */
+  --control-radius: var(--radius-badge); /** Checkbox corner radius. */
+  --badge-radius: var(--radius-badge); /** Badge corner radius. */
+  --badge-neutral-background: var(--color-surface-sunken); /** Neutral badge fill. */
+  --badge-neutral-label: var(--color-text-secondary); /** Neutral badge label. */
+  --badge-success-background: var(--color-status-success-subtle); /** Success badge fill. */
+  --badge-success-label: var(--color-status-success); /** Success badge label. */
+  --badge-warning-background: var(--color-status-warning-subtle); /** Warning badge fill. */
+  --badge-warning-label: var(--color-status-warning); /** Warning badge label. */
+  --badge-danger-background: var(--color-status-danger-subtle); /** Danger badge fill. */
+  --badge-danger-label: var(--color-status-danger); /** Danger badge label. */
+  --badge-info-background: var(--color-status-info-subtle); /** Info badge fill. */
+  --badge-info-label: var(--color-status-info); /** Info badge label. */
+  --card-background: var(--color-surface-default); /** Card fill. */
+  --card-border: var(--color-border-default); /** Card border. */
+  --card-radius: var(--radius-container); /** Card corner radius. */
+  --card-shadow: var(--elevation-card); /** Card shadow. */
+  --table-header-background: var(--color-surface-sunken); /** Header row fill. */
+  --table-row-border: var(--color-border-default); /** Line between rows. */
+  --table-row-selected: var(--color-surface-selected); /** Fill of a selected row. */
+  --tabs-indicator: var(--color-action-primary); /** Active tab indicator. */
+  --tabs-label: var(--color-text-secondary); /** Inactive tab label. */
+  --tabs-label-active: var(--color-text-primary); /** Active tab label. */
+  --overlay-background: var(--color-surface-raised); /** Fill of a dialog, menu or toast. */
+  --overlay-radius: var(--radius-container); /** Corner radius of overlays. */
+  --overlay-shadow: var(--elevation-overlay); /** Shadow of overlays. */
+  --overlay-scrim: var(--color-surface-scrim); /** Color that dims the page behind a dialog. */
+  --tooltip-background: var(--color-surface-inverse); /** Tooltip fill. */
+  --tooltip-label: var(--color-text-inverse); /** Tooltip text. */
+}
+
+.dark {
+  --space-gap-tight: 0.25rem; /** Between things that belong together. */
+  --space-gap-default: 0.5rem; /** Between items in one group. */
+  --space-gap-group: 1rem; /** Between groups. */
+  --space-gap-section: 1.5rem; /** Between page sections. */
+  --space-inset-control-x: 0.75rem; /** Horizontal padding inside controls. */
+  --space-inset-container: 1rem; /** Padding inside cards and dialogs. */
+  --space-inset-cell-x: 0.75rem; /** Horizontal padding inside table cells. */
+  --size-control-default: 2rem; /** Height of buttons and inputs, and the smallest target. */
+  --size-control-compact: 1.5rem; /** Height of compact controls. */
+  --size-row: 2rem; /** Height of one table row. */
+  --size-icon: 1rem; /** Icon size next to text. */
+  --radius-round: 9999px; /** Fully round: avatars and dots. */
+  --border-width-default: 1px; /** Every border. */
+  --border-width-focus: 2px; /** The focus ring. */
+  --opacity-disabled: 0.4; /** Disabled controls. */
+  --type-display-font-size: 1.5rem;
+  --type-display-line-height: 1.75rem;
+  --type-display-font-weight: 600;
+  --type-title-font-size: 1.25rem;
+  --type-title-line-height: 1.5rem;
+  --type-title-font-weight: 600;
+  --type-heading-font-size: 1rem;
+  --type-heading-line-height: 1.25rem;
+  --type-heading-font-weight: 600;
+  --type-body-font-size: 0.875rem;
+  --type-body-line-height: 1.25rem;
+  --type-body-font-weight: 400;
+  --type-label-font-size: 0.75rem;
+  --type-label-line-height: 1rem;
+  --type-label-font-weight: 500;
+  --type-caption-font-size: 0.75rem;
+  --type-caption-line-height: 1rem;
+  --type-caption-font-weight: 400;
+  --type-data-font-size: 0.8125rem;
+  --type-data-line-height: 1rem;
+  --type-data-font-weight: 400;
+  --motion-duration-feedback: 120ms; /** Feedback speed: fast. */
+  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); /** Feedback easing. */
+  --color-surface-canvas: #0D1117; /** The page background behind everything. */
+  --color-surface-default: #161B23; /** The base fill for content. */
+  --color-surface-raised: #262D38; /** Fills that float above content. */
+  --color-surface-sunken: #262D38; /** A recessed fill, a step below content. */
+  --color-surface-selected: #2C2588; /** The fill of a selected or current item. */
+  --color-surface-inverse: #F7F8FA; /** A reversed fill for small, short-lived messages. */
+  --color-surface-scrim: #000000B3; /** The see-through layer behind a modal. */
+  --color-text-primary: #F7F8FA; /** Body text and headings. */
+  --color-text-secondary: #C4CBD6; /** Supporting text. */
+  --color-text-muted: #969FAD; /** The quietest text. */
+  --color-text-inverse: #161B23; /** Text on an inverse fill. */
+  --color-text-on-action: #0D1117; /** Text and icons on the main action's fill. */
+  --color-text-link: #A9A3F6; /** Links in running text. */
+  --color-border-default: #262D38; /** Quiet edges and dividers. Decorative, so it has no contrast minimum. */
+  --color-border-strong: #6B7585; /** The edge of a control people must find. */
+  --color-border-focus: #A9A3F6; /** The focus ring. */
+  --color-action-primary: #A9A3F6; /** The one main action in a view. */
+  --color-action-primary-hover: #EEEDFE; /** The main action under the pointer. */
+  --color-action-secondary: #161B23; /** The fill of other actions. */
+  --color-action-secondary-hover: #262D38; /** Other actions under the pointer. */
+  --color-status-info: #8AB4F8; /** Neutral news: something changed and no action is needed. The lowest level of the urgency order. */
+  --color-status-info-subtle: #062C6E; /** The fill behind info status. */
+  --color-status-success: #5CC283; /** Confirmation that something worked. It sits outside the urgency order. */
+  --color-status-success-subtle: #123322; /** The fill behind success status. */
+  --color-status-warning: #F2B84B; /** Caution: something may go wrong or needs a check, and it can be fixed. */
+  --color-status-warning-subtle: #3A2A05; /** The fill behind warning status. */
+  --color-status-danger: #F28B8B; /** Real risk: errors, failed checks, actions that cannot be undone. The top of the urgency order. Overuse wears it out. */
+  --color-status-danger-subtle: #3D1414; /** The fill behind danger status. */
+  --color-category-1: #A9A3F6; /** Category 1: tells one item or series from another. It carries no meaning. */
+  --color-category-1-subtle: #2C2588; /** Category 1: the fill of a tag. */
+  --color-category-2: #8AB4F8; /** Category 2: tells one item or series from another. It carries no meaning. */
+  --color-category-2-subtle: #062C6E; /** Category 2: the fill of a tag. */
+  --color-category-3: #5CC283; /** Category 3: tells one item or series from another. It carries no meaning. */
+  --color-category-3-subtle: #123322; /** Category 3: the fill of a tag. */
+  --color-category-4: #F2B84B; /** Category 4: tells one item or series from another. It carries no meaning. */
+  --color-category-4-subtle: #3A2A05; /** Category 4: the fill of a tag. */
+  --color-category-5: #DDE2EA; /** Category 5: tells one item or series from another. It carries no meaning. */
+  --color-category-5-subtle: #262D38; /** Category 5: the fill of a tag. */
+  --color-disabled-text: #C4CBD6; /** Text and icons of a control that cannot be used right now. */
+  --color-disabled-surface: #262D38; /** The fill of a control that cannot be used right now. */
+  --color-disabled-border: #3D4655; /** The edge of a control that cannot be used right now. */
+  --radius-control: 0.125rem; /** Corner of buttons and inputs. */
+  --radius-badge: 0rem; /** Corner of badges and checkboxes. */
+  --radius-container: 0.25rem; /** Corner of cards, menus and dialogs. */
+  --type-display-font-family: "IBM Plex Sans", system-ui, sans-serif;
+  --type-title-font-family: "IBM Plex Sans", system-ui, sans-serif;
+  --type-heading-font-family: "IBM Plex Sans", system-ui, sans-serif;
+  --type-body-font-family: "IBM Plex Sans", system-ui, sans-serif;
+  --type-label-font-family: "IBM Plex Sans", system-ui, sans-serif;
+  --type-caption-font-family: "IBM Plex Sans", system-ui, sans-serif;
+  --type-data-font-family: "IBM Plex Mono", ui-monospace, monospace;
+  --elevation-card: 0px 0px 0px 0px #00000000; /** No shadow in this scheme. */
+  --elevation-overlay: 0px 8px 24px 0px #00000080;
+  --button-height: var(--size-control-default); /** Button height. */
+  --button-padding-x: var(--space-inset-control-x); /** Horizontal padding inside a button. */
+  --button-font-size: var(--type-label-font-size); /** Button label size. */
+  --button-font-weight: var(--type-label-font-weight); /** Button label weight. */
+  --button-icon-size: var(--size-icon); /** Size of an icon inside a button. */
+  --input-height: var(--size-control-default); /** Input height. */
+  --input-padding-x: var(--space-inset-control-x); /** Horizontal padding inside an input. */
+  --input-font-size: var(--type-body-font-size); /** Typed text size. */
+  --badge-padding-x: var(--space-gap-tight); /** Horizontal padding inside a badge. */
+  --badge-font-size: var(--type-caption-font-size); /** Badge label size. */
+  --card-padding: var(--space-inset-container); /** Padding inside a card. */
+  --table-row-height: var(--size-row); /** Height of one data row. */
+  --table-cell-padding-x: var(--space-inset-cell-x); /** Horizontal padding inside a cell. */
+  --table-font-size: var(--type-data-font-size); /** Cell text size. */
+  --overlay-item-height: var(--size-control-default); /** Height of a menu item. */
+  --transition-duration: var(--motion-duration-feedback); /** Duration of feedback transitions. */
+  --transition-easing: var(--motion-easing-standard); /** Easing of feedback transitions. */
+  --button-primary-background: var(--color-action-primary); /** Primary button fill. */
+  --button-primary-background-hover: var(--color-action-primary-hover); /** Primary button fill on hover. */
+  --button-primary-label: var(--color-text-on-action); /** Primary button label color. */
+  --button-secondary-background: var(--color-action-secondary); /** Secondary button fill. */
+  --button-secondary-background-hover: var(--color-action-secondary-hover); /** Secondary button fill on hover. */
+  --button-secondary-label: var(--color-text-primary); /** Secondary button label color. */
+  --button-secondary-border: var(--color-border-strong); /** Secondary button border. */
+  --button-ghost-background-hover: var(--color-surface-sunken); /** Ghost button fill on hover. */
+  --button-ghost-label: var(--color-text-link); /** Ghost button label color. */
+  --button-radius: var(--radius-control); /** Button corner radius. */
+  --button-focus-ring: var(--color-border-focus); /** Focus ring color on any button. */
+  --button-disabled-background: var(--color-disabled-surface); /** Fill of a disabled button. */
+  --button-disabled-label: var(--color-disabled-text); /** Label of a disabled button. */
+  --button-disabled-border: var(--color-disabled-border); /** Border of a disabled secondary button. */
+  --input-background: var(--color-surface-default); /** Input fill. */
+  --input-border: var(--color-border-strong); /** Input border at rest. */
+  --input-border-focus: var(--color-border-focus); /** Input border when focused. */
+  --input-text: var(--color-text-primary); /** Typed text color. */
+  --input-placeholder: var(--color-text-muted); /** Placeholder text color. */
+  --input-radius: var(--radius-control); /** Input corner radius. */
+  --input-disabled-background: var(--color-disabled-surface); /** Fill of a disabled input. */
+  --input-disabled-border: var(--color-disabled-border); /** Border of a disabled input. */
+  --input-disabled-text: var(--color-disabled-text); /** Text in a disabled input. */
+  --control-checked: var(--color-action-primary); /** Fill of a checked checkbox or an on switch. */
+  --control-track: var(--color-border-strong); /** Track of an off switch. */
+  --control-thumb: var(--color-surface-default); /** Switch thumb and checkmark color. */
+  --control-radius: var(--radius-badge); /** Checkbox corner radius. */
+  --badge-radius: var(--radius-badge); /** Badge corner radius. */
+  --badge-neutral-background: var(--color-surface-sunken); /** Neutral badge fill. */
+  --badge-neutral-label: var(--color-text-secondary); /** Neutral badge label. */
+  --badge-success-background: var(--color-status-success-subtle); /** Success badge fill. */
+  --badge-success-label: var(--color-status-success); /** Success badge label. */
+  --badge-warning-background: var(--color-status-warning-subtle); /** Warning badge fill. */
+  --badge-warning-label: var(--color-status-warning); /** Warning badge label. */
+  --badge-danger-background: var(--color-status-danger-subtle); /** Danger badge fill. */
+  --badge-danger-label: var(--color-status-danger); /** Danger badge label. */
+  --badge-info-background: var(--color-status-info-subtle); /** Info badge fill. */
+  --badge-info-label: var(--color-status-info); /** Info badge label. */
+  --card-background: var(--color-surface-default); /** Card fill. */
+  --card-border: var(--color-border-default); /** Card border. */
+  --card-radius: var(--radius-container); /** Card corner radius. */
+  --card-shadow: var(--elevation-card); /** Card shadow. */
+  --table-header-background: var(--color-surface-sunken); /** Header row fill. */
+  --table-row-border: var(--color-border-default); /** Line between rows. */
+  --table-row-selected: var(--color-surface-selected); /** Fill of a selected row. */
+  --tabs-indicator: var(--color-action-primary); /** Active tab indicator. */
+  --tabs-label: var(--color-text-secondary); /** Inactive tab label. */
+  --tabs-label-active: var(--color-text-primary); /** Active tab label. */
+  --overlay-background: var(--color-surface-raised); /** Fill of a dialog, menu or toast. */
+  --overlay-radius: var(--radius-container); /** Corner radius of overlays. */
+  --overlay-shadow: var(--elevation-overlay); /** Shadow of overlays. */
+  --overlay-scrim: var(--color-surface-scrim); /** Color that dims the page behind a dialog. */
+  --tooltip-background: var(--color-surface-inverse); /** Tooltip fill. */
+  --tooltip-label: var(--color-text-inverse); /** Tooltip text. */
+}