From 267f1cc66d8bd474f64057e13973507f9f94c1a4 Mon Sep 17 00:00:00 2001 From: Maximilian Schoell Date: Thu, 6 Aug 2026 11:47:22 +0200 Subject: [PATCH] fix: alert action buttons on top navigation surface --- .../notifications-permutations.tsx | 59 + .../top-navigation-notifications.page.tsx | 29 + .../__snapshots__/design-tokens.test.ts.snap | 3643 +++++++++++++++++ style-dictionary/utils/contexts.ts | 8 + style-dictionary/visual-refresh/index.ts | 2 + 5 files changed, 3741 insertions(+) create mode 100644 pages/visual-contexts/notifications-permutations.tsx create mode 100644 pages/visual-contexts/top-navigation-notifications.page.tsx diff --git a/pages/visual-contexts/notifications-permutations.tsx b/pages/visual-contexts/notifications-permutations.tsx new file mode 100644 index 0000000000..559148879d --- /dev/null +++ b/pages/visual-contexts/notifications-permutations.tsx @@ -0,0 +1,59 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import Alert, { AlertProps } from '~components/alert'; +import Button from '~components/button'; +import Flashbar, { FlashbarProps } from '~components/flashbar'; +import Link from '~components/link'; + +import createPermutations from '../utils/permutations'; + +const noop = () => void 0; + +const types = ['info', 'success', 'warning', 'error'] as const; + +/* eslint-disable react/jsx-key */ +export const flashbarPermutations = createPermutations([ + { + type: [...types], + header: ['Flash header'], + content: [ + + Flash message with a{' '} + + link + + , + ], + action: [], + dismissible: [true], + dismissLabel: ['Dismiss'], + onDismiss: [noop], + }, +]); + +export const alertPermutations = createPermutations([ + { + type: [...types], + header: ['Alert header'], + children: [ + + Alert message with a link + , + ], + action: [], + dismissible: [true], + dismissAriaLabel: ['Dismiss'], + onDismiss: [noop], + }, +]); +/* eslint-enable react/jsx-key */ + +export function renderFlashbar(permutation: FlashbarProps.MessageDefinition) { + return ; +} + +export function renderAlert(permutation: AlertProps) { + return ; +} diff --git a/pages/visual-contexts/top-navigation-notifications.page.tsx b/pages/visual-contexts/top-navigation-notifications.page.tsx new file mode 100644 index 0000000000..cac2c00614 --- /dev/null +++ b/pages/visual-contexts/top-navigation-notifications.page.tsx @@ -0,0 +1,29 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import Box from '~components/box'; +import VisualContext from '~components/internal/components/visual-context'; +import SpaceBetween from '~components/space-between'; + +import PermutationsView from '../utils/permutations-view'; +import ScreenshotArea from '../utils/screenshot-area'; +import { alertPermutations, flashbarPermutations, renderAlert, renderFlashbar } from './notifications-permutations'; + +import styles from './styles.scss'; + +export default function TopNavigationNotificationsPermutations() { + return ( + + + + + Notifications in top-navigation visual context + + + + + + + ); +} diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap index 2de90ad51c..e44781a7bb 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap @@ -32795,6 +32795,3649 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t }, }, }, + "alert-top-navigation": { + "tokens": { + "border-radius-action-card-default": { + "$description": "The border radius of default action cards.", + "$value": "16px", + }, + "border-radius-action-card-embedded": { + "$description": "The border radius of embedded action cards.", + "$value": "8px", + }, + "border-radius-alert": { + "$description": "The border radius of alerts.", + "$value": "12px", + }, + "border-radius-badge": { + "$description": "The border radius of badges.", + "$value": "4px", + }, + "border-radius-button": { + "$description": "The border radius of buttons and segmented control's segments.", + "$value": "20px", + }, + "border-radius-calendar-day-focus-ring": { + "$description": "The border radius of the focused day in date picker and date range picker.", + "$value": "3px", + }, + "border-radius-card-default": { + "$description": "The border radius of default cards.", + "$value": "16px", + }, + "border-radius-card-embedded": { + "$description": "The border radius of embedded cards.", + "$value": "8px", + }, + "border-radius-chat-bubble": { + "$description": "The border radius of chat bubbles.", + "$value": "8px", + }, + "border-radius-container": { + "$description": "The border radius of containers. Also used in container-based components like table, cards, expandable section, and modal.", + "$value": "16px", + }, + "border-radius-control-circular-focus-ring": { + "$description": "The border radius of the focus indicator of circular controls. For example: radio button.", + "$value": "4px", + }, + "border-radius-control-default-focus-ring": { + "$description": "The border radius of the focus indicator of interactive elements. For example: button, link, toggle, pagination controls, expandable section header, popover trigger.", + "$value": "4px", + }, + "border-radius-dropdown": { + "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker.", + "$value": "8px", + }, + "border-radius-dropzone": { + "$description": "The border radius of file upload dropzone.", + "$value": "12px", + }, + "border-radius-flashbar": { + "$description": "The border radius of flash messages in flashbars.", + "$value": "12px", + }, + "border-radius-input": { + "$description": "The border radius of form controls. For example: input, select.", + "$value": "8px", + }, + "border-radius-item": { + "$description": "The border radius of items that can be selected from a list. For example: select options, table rows, calendar days.", + "$value": "8px", + }, + "border-radius-popover": { + "$description": "The border radius of popovers.", + "$value": "8px", + }, + "border-radius-tabs-focus-ring": { + "$description": "The border radius of tabs' focus indicator. Used in tabs and in the code editor status bar.", + "$value": "20px", + }, + "border-radius-tiles": { + "$description": "The border radius of tiles.", + "$value": "8px", + }, + "border-radius-token": { + "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.", + "$value": "8px", + }, + "border-radius-token-inline": { + "$description": "The border radius of inline tokens. For example: multiselect component.", + "$value": "4px", + }, + "border-radius-tutorial-panel-item": { + "$description": "The border radius of tutorials inside a tutorial panel.", + "$value": "8px", + }, + "border-width-action-card-active": { + "$description": "The border width of action cards in active state.", + "$value": "1px", + }, + "border-width-action-card-default": { + "$description": "The border width of action cards in default state.", + "$value": "1px", + }, + "border-width-action-card-disabled": { + "$description": "The border width of action cards in disabled state.", + "$value": "1px", + }, + "border-width-action-card-hover": { + "$description": "The border width of action cards in hover state.", + "$value": "1px", + }, + "border-width-alert": { + "$description": "The border width of alerts.", + "$value": "2px", + }, + "border-width-alert-block-end": { + "$description": "The block-end border width of alerts.", + "$value": "2px", + }, + "border-width-alert-block-start": { + "$description": "The block-start border width of alerts.", + "$value": "2px", + }, + "border-width-alert-inline-end": { + "$description": "The inline-end border width of alerts.", + "$value": "2px", + }, + "border-width-alert-inline-start": { + "$description": "The inline-start border width of alerts.", + "$value": "2px", + }, + "border-width-badge": { + "$description": "The border width of badges.", + "$value": "0px", + }, + "border-width-button": { + "$description": "The border width of buttons.", + "$value": "2px", + }, + "border-width-card": { + "$description": "The border width of a card.", + "$value": "1px", + }, + "border-width-card-selected": { + "$description": "The border width of a selected card.", + "$value": "2px", + }, + "border-width-dropdown": { + "$description": "The border width of dropdowns.", + "$value": "2px", + }, + "border-width-field": { + "$description": "The border width of form fields.", + "$value": "1px", + }, + "border-width-flashbar-inline-start": { + "$description": "The inline-start border width of flash messages in flashbars.", + "$value": "0px", + }, + "border-width-icon-big": { + "$description": "The visual stroke width of big icons.", + "$value": "3px", + }, + "border-width-icon-large": { + "$description": "The visual stroke width of large icons.", + "$value": "4px", + }, + "border-width-icon-medium": { + "$description": "The visual stroke width of medium icons.", + "$value": "2px", + }, + "border-width-icon-normal": { + "$description": "The visual stroke width of normal icons.", + "$value": "2px", + }, + "border-width-icon-small": { + "$description": "The visual stroke width of small icons.", + "$value": "2px", + }, + "border-width-icon-x-small": { + "$description": "The visual stroke width of extra small icons.", + "$value": "1.5px", + }, + "border-width-item-selected": { + "$description": "The border width of selected items, like table rows.", + "$value": "2px", + }, + "border-width-layout-side-navigation": { + "$description": "The border width of the side navigation divider in the AppLayout and AppLayoutToolbar components.", + "$value": "1px", + }, + "border-width-popover": { + "$description": "The border width of popovers.", + "$value": "2px", + }, + "border-width-token": { + "$description": "The border width of tokens.", + "$value": "2px", + }, + "color-background-action-card-active": { + "$description": "The background color of action cards in active state.", + "$value": { + "dark": "#333843", + "light": "#333843", + }, + }, + "color-background-action-card-default": { + "$description": "The default background color of action cards.", + "$value": { + "dark": "#161d26", + "light": "#161d26", + }, + }, + "color-background-action-card-disabled": { + "$description": "The background color of action cards in disabled state.", + "$value": { + "dark": "#161d26", + "light": "#161d26", + }, + }, + "color-background-action-card-hover": { + "$description": "The background color of action cards in hover state.", + "$value": { + "dark": "#1b232d", + "light": "#1b232d", + }, + }, + "color-background-avatar-default": { + "$description": "The default background color of avatars.", + "$value": { + "dark": "#424650", + "light": "#424650", + }, + }, + "color-background-avatar-gen-ai": { + "$description": "The gen-ai background color of avatars.", + "$value": { + "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)", + "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)", + }, + }, + "color-background-backdrop": { + "$description": "The background color of the backdrop shown behind overlay surfaces such as modals and drawers.", + "$value": { + "dark": "rgba(15, 20, 26, 0.7)", + "light": "rgba(15, 20, 26, 0.7)", + }, + }, + "color-background-badge-blue": { + "$description": "The background color of blue badges.", + "$value": { + "dark": "#006ce0", + "light": "#006ce0", + }, + }, + "color-background-badge-green": { + "$description": "The background color of green badges.", + "$value": { + "dark": "#00802f", + "light": "#00802f", + }, + }, + "color-background-badge-grey": { + "$description": "The background color of grey badges.", + "$value": { + "dark": "#656871", + "light": "#656871", + }, + }, + "color-background-badge-icon": { + "$description": "The background color of the badge indicator on navigation and panel buttons.", + "$value": { + "dark": "#ff7a7a", + "light": "#ff7a7a", + }, + }, + "color-background-badge-red": { + "$description": "The background color of red badges.", + "$value": { + "dark": "#db0000", + "light": "#db0000", + }, + }, + "color-background-badge-yellow": { + "$description": "The background color of yellow badges.", + "$value": { + "dark": "#ffe347", + "light": "#ffe347", + }, + }, + "color-background-button-link-active": { + "$description": "The background color of link buttons in active state.", + "$value": { + "dark": "#333843", + "light": "#333843", + }, + }, + "color-background-button-link-default": { + "$description": "The background color of link buttons in default state.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, + "color-background-button-link-disabled": { + "$description": "The background color of link buttons in disabled state.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, + "color-background-button-link-hover": { + "$description": "The background color of link buttons in hover state.", + "$value": { + "dark": "#1b232d", + "light": "#1b232d", + }, + }, + "color-background-button-normal-active": { + "$description": "The background color of normal buttons in active state.", + "$value": { + "dark": "rgba(255, 255, 255, 0.15)", + "light": "rgba(255, 255, 255, 0.15)", + }, + }, + "color-background-button-normal-default": { + "$description": "The default background color of normal buttons.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, + "color-background-button-normal-disabled": { + "$description": "The background color of normal buttons in disabled state.", + "$value": { + "dark": "#161d26", + "light": "#161d26", + }, + }, + "color-background-button-normal-hover": { + "$description": "The background color of normal buttons in hover state.", + "$value": { + "dark": "rgba(255, 255, 255, 0.1)", + "light": "rgba(255, 255, 255, 0.1)", + }, + }, + "color-background-button-primary-active": { + "$description": "The background color of primary buttons in active state.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, + "color-background-button-primary-default": { + "$description": "The default background color of primary buttons.", + "$value": { + "dark": "#dedee3", + "light": "#dedee3", + }, + }, + "color-background-button-primary-disabled": { + "$description": "The background color of primary buttons in disabled state.", + "$value": { + "dark": "#232b37", + "light": "#232b37", + }, + }, + "color-background-button-primary-hover": { + "$description": "The background color of primary buttons in hover state.", + "$value": { + "dark": "#ffffff", + "light": "#ffffff", + }, + }, + "color-background-card": { + "$description": "The background color of a card.", + "$value": { + "dark": "#161d26", + "light": "#161d26", + }, + }, + "color-background-cell-shaded": { + "$description": "The background color of shaded table cells.", + "$value": { + "dark": "#1b232d", + "light": "#1b232d", + }, + }, + "color-background-chat-bubble-incoming": { + "$description": "The background color of \`incoming\` chat bubble.", + "$value": { + "dark": "#0f141a", + "light": "#0f141a", + }, + }, + "color-background-chat-bubble-outgoing": { + "$description": "The background color of \`outgoing\` chat bubble.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, + "color-background-code-view": { + "$description": "The background color of the code view component.", + "$value": { + "dark": "#282c34", + "light": "#282c34", + }, + }, + "color-background-container-content": { + "$description": "The background color of container main content areas. For example: content areas of form sections, containers, tables, and cards.", + "$value": { + "dark": "#161d26", + "light": "#161d26", + }, + }, + "color-background-container-header": { + "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections.", + "$value": { + "dark": "#161d26", + "light": "#161d26", + }, + }, + "color-background-control-checked": { + "$description": "The background color of a checked form control. For example: background fill of a selected radio button, checked checkbox, and toggle that is switched on.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, + "color-background-control-default": { + "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color.", + "$value": { + "dark": "#161d26", + "light": "#161d26", + }, + }, + "color-background-control-disabled": { + "$description": "The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox.", + "$value": { + "dark": "#333843", + "light": "#333843", + }, + }, + "color-background-dialog": { + "$description": "The background color of the feedback/input dialogue box.", + "$value": { + "dark": "#001129", + "light": "#001129", + }, + }, + "color-background-dropdown-item-default": { + "$description": "The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds.", + "$value": { + "dark": "#1b232d", + "light": "#1b232d", + }, + }, + "color-background-dropdown-item-filter-match": { + "$description": "The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest.", + "$value": { + "dark": "#333843", + "light": "#333843", + }, + }, + "color-background-dropdown-item-hover": { + "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.", + "$value": { + "dark": "#131920", + "light": "#131920", + }, + }, + "color-background-dropdown-item-selected": { + "$description": "The background color of selected dropdown items. For example: background of selected items in select, multiselect, autosuggest, and datepicker dropdowns.", + "$value": { + "dark": "#001129", + "light": "#001129", + }, + }, + "color-background-flashbar-error": { + "$description": "The background color of error flash messages.", + "$value": { + "dark": "#db0000", + "light": "#db0000", + }, + }, + "color-background-flashbar-info": { + "$description": "The background color of info and in-progress flash messages.", + "$value": { + "dark": "#006ce0", + "light": "#006ce0", + }, + }, + "color-background-flashbar-success": { + "$description": "The background color of success flash messages.", + "$value": { + "dark": "#00802f", + "light": "#00802f", + }, + }, + "color-background-flashbar-warning": { + "$description": "The background color of warning flash messages.", + "$value": { + "dark": "#ffe347", + "light": "#ffe347", + }, + }, + "color-background-home-header": { + "$description": "The background color of the home header, displayed on the Service's home page.", + "$value": { + "dark": "#0f141a", + "light": "#0f141a", + }, + }, + "color-background-input-default": { + "$description": "The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect.", + "$value": { + "dark": "#161d26", + "light": "#161d26", + }, + }, + "color-background-input-disabled": { + "$description": "The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect.", + "$value": { + "dark": "#1b232d", + "light": "#1b232d", + }, + }, + "color-background-item-selected": { + "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.", + "$value": { + "dark": "#001129", + "light": "#001129", + }, + }, + "color-background-layout-main": { + "$description": "The background color of the main content area on a page. For example: content area in app layout.", + "$value": { + "dark": "#161d26", + "light": "#161d26", + }, + }, + "color-background-layout-panel": { + "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.", + "$value": { + "dark": "#161d26", + "light": "#161d26", + }, + }, + "color-background-layout-toggle-active": { + "$description": "The background color of the app layout toggle button when it's active.", + "$value": { + "dark": "#424650", + "light": "#424650", + }, + }, + "color-background-layout-toggle-default": { + "$description": "The default background color of the app layout toggle button.", + "$value": { + "dark": "#424650", + "light": "#424650", + }, + }, + "color-background-layout-toggle-hover": { + "$description": "The background color of the app layout toggle button on hover.", + "$value": { + "dark": "#656871", + "light": "#656871", + }, + }, + "color-background-layout-toggle-selected-active": { + "$description": "The background color of the app layout toggle button when it's selected and active.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, + "color-background-layout-toggle-selected-default": { + "$description": "The default background color of the app layout toggle button when it's selected.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, + "color-background-layout-toggle-selected-hover": { + "$description": "The background color of the app layout toggle button on hover when it's selected.", + "$value": { + "dark": "#75cfff", + "light": "#75cfff", + }, + }, + "color-background-layout-toolbar": { + "$description": "The background color of the app layout's toolbar. For example: The toolbar bar containing breadcrumbs and toggle buttons.", + "$value": { + "dark": "#161d26", + "light": "#161d26", + }, + }, + "color-background-loading-bar-gen-ai": { + "$description": "The background color of gen-ai loading bars.", + "$value": { + "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)", + "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)", + }, + }, + "color-background-notification-blue": { + "$description": "Background color for blue notifications. For example: blue badges and info flash messages.", + "$value": { + "dark": "#006ce0", + "light": "#006ce0", + }, + }, + "color-background-notification-green": { + "$description": "Background color for green notifications. For example: green badges and success flash messages.", + "$value": { + "dark": "#00802f", + "light": "#00802f", + }, + }, + "color-background-notification-grey": { + "$description": "Background color for grey notifications. For example: grey badges.", + "$value": { + "dark": "#656871", + "light": "#656871", + }, + }, + "color-background-notification-red": { + "$description": "Background color for red notifications. For example: red badges and error flash messages.", + "$value": { + "dark": "#db0000", + "light": "#db0000", + }, + }, + "color-background-notification-severity-critical": { + "$description": "Background color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"", + "$value": { + "dark": "#d63f38", + "light": "#870303", + }, + }, + "color-background-notification-severity-high": { + "$description": "Background color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"", + "$value": { + "dark": "#fe6e73", + "light": "#ce3311", + }, + }, + "color-background-notification-severity-low": { + "$description": "Background color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"", + "$value": { + "dark": "#f2cd54", + "light": "#f2cd54", + }, + }, + "color-background-notification-severity-medium": { + "$description": "Background color in a notification to represent a medium-level of severity. For example: "Sev-3"", + "$value": { + "dark": "#f89256", + "light": "#f89256", + }, + }, + "color-background-notification-severity-neutral": { + "$description": "Background color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"", + "$value": { + "dark": "#656871", + "light": "#656871", + }, + }, + "color-background-notification-yellow": { + "$description": "Background color for yellow notifications. For example: yellow badges and warning flash messages.", + "$value": { + "dark": "#ffe347", + "light": "#ffe347", + }, + }, + "color-background-popover": { + "$description": "Background color for the popover container.", + "$value": { + "dark": "#1b232d", + "light": "#1b232d", + }, + }, + "color-background-progress-bar-default": { + "$description": "The default background color of the progress bar.", + "$value": { + "dark": "#333843", + "light": "#333843", + }, + }, + "color-background-progress-bar-value-default": { + "$description": "The default background color of the progress bar value.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, + "color-background-segment-active": { + "$description": "The background color of the active segment in a segmented control.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, + "color-background-segment-default": { + "$description": "The background color of inactive segments in a segmented control.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, + "color-background-segment-disabled": { + "$description": "The background color of disabled segments in a segmented control.", + "$value": { + "dark": "#161d26", + "light": "#161d26", + }, + }, + "color-background-segment-hover": { + "$description": "The background color of inactive segments in a segmented control on hover.", + "$value": { + "dark": "rgba(255, 255, 255, 0.1)", + "light": "rgba(255, 255, 255, 0.1)", + }, + }, + "color-background-segment-wrapper": { + "$description": "The background color of segmented control wrapper.", + "$value": { + "dark": "#161d26", + "light": "#161d26", + }, + }, + "color-background-side-navigation-item-active": { + "$description": "The background color of an active (highlighted) side navigation item.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, + "color-background-slider-handle-active": { + "$description": "The background color of the slider handle in active state.", + "$value": { + "dark": "#75cfff", + "light": "#75cfff", + }, + }, + "color-background-slider-handle-default": { + "$description": "The default background color of the slider handle.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, + "color-background-slider-range-active": { + "$description": "The background color of the slider range in active state.", + "$value": { + "dark": "#75cfff", + "light": "#75cfff", + }, + }, + "color-background-slider-range-default": { + "$description": "The default background color of the slider range.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, + "color-background-slider-track-default": { + "$description": "The default background color of the slider track.", + "$value": { + "dark": "#656871", + "light": "#656871", + }, + }, + "color-background-status-error": { + "$description": "The background color of an item in error state. For example: error alerts.", + "$value": { + "dark": "#1f0000", + "light": "#1f0000", + }, + }, + "color-background-status-info": { + "$description": "The background color of an informational item. For example: information alerts.", + "$value": { + "dark": "#001129", + "light": "#001129", + }, + }, + "color-background-status-success": { + "$description": "The background color of an item in success state. For example: success alerts.", + "$value": { + "dark": "#001401", + "light": "#001401", + }, + }, + "color-background-status-warning": { + "$description": "The background color of an item in warning state. For example: warning alerts.", + "$value": { + "dark": "#191100", + "light": "#191100", + }, + }, + "color-background-tiles-disabled": { + "$description": "The background color of disabled tiles.", + "$value": { + "dark": "#1b232d", + "light": "#1b232d", + }, + }, + "color-background-toggle-button-normal-default": { + "$description": "The default background color of normal toggle buttons.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, + "color-background-toggle-button-normal-hover": { + "$description": "The background color of normal toggle buttons in hover state.", + "$value": { + "dark": "rgba(255, 255, 255, 0.1)", + "light": "rgba(255, 255, 255, 0.1)", + }, + }, + "color-background-toggle-button-normal-pressed": { + "$description": "The background color of normal toggle buttons in pressed state.", + "$value": { + "dark": "#333843", + "light": "#333843", + }, + }, + "color-background-toggle-checked-disabled": { + "$description": "The background color of checked toggles in disabled state.", + "$value": { + "dark": "#002b66", + "light": "#002b66", + }, + }, + "color-background-toggle-default": { + "$description": "The default background color of the toggle track in its unchecked state.", + "$value": { + "dark": "#8c8c94", + "light": "#8c8c94", + }, + }, + "color-board-placeholder-active": { + "$description": "The color of board placeholder in active state.", + "$value": { + "dark": "#656871", + "light": "#656871", + }, + }, + "color-board-placeholder-hover": { + "$description": "The color of board placeholder in hovered state.", + "$value": { + "dark": "#006ce0", + "light": "#006ce0", + }, + }, + "color-border-action-card-active": { + "$description": "The border color of action cards in active state.", + "$value": { + "dark": "#75cfff", + "light": "#75cfff", + }, + }, + "color-border-action-card-default": { + "$description": "The default border color of action cards.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, + "color-border-action-card-disabled": { + "$description": "The border color of action cards in disabled state.", + "$value": { + "dark": "#656871", + "light": "#656871", + }, + }, + "color-border-action-card-hover": { + "$description": "The border color of action cards in hover state.", + "$value": { + "dark": "#75cfff", + "light": "#75cfff", + }, + }, + "color-border-badge": { + "$description": "The default border color of badges.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, + "color-border-badge-blue": { + "$description": "The border color of blue badges.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, + "color-border-badge-green": { + "$description": "The border color of green badges.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, + "color-border-badge-grey": { + "$description": "The border color of grey badges.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, + "color-border-badge-red": { + "$description": "The border color of red badges.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, + "color-border-badge-severity-critical": { + "$description": "The border color of badges representing a critical severity level.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, + "color-border-badge-severity-high": { + "$description": "The border color of badges representing a high severity level.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, + "color-border-badge-severity-low": { + "$description": "The border color of badges representing a low severity level.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, + "color-border-badge-severity-medium": { + "$description": "The border color of badges representing a medium severity level.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, + "color-border-badge-severity-neutral": { + "$description": "The border color of badges representing a neutral severity level.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, + "color-border-button-link-disabled": { + "$description": "The border color of link buttons in disabled state.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, + "color-border-button-normal-active": { + "$description": "The border color of normal buttons in active state.", + "$value": { + "dark": "#ffffff", + "light": "#ffffff", + }, + }, + "color-border-button-normal-default": { + "$description": "The border color of normal buttons.", + "$value": { + "dark": "#dedee3", + "light": "#dedee3", + }, + }, + "color-border-button-normal-disabled": { + "$description": "The border color of normal buttons in disabled state.", + "$value": { + "dark": "#656871", + "light": "#656871", + }, + }, + "color-border-button-normal-hover": { + "$description": "The border color of normal buttons in hover state.", + "$value": { + "dark": "#ffffff", + "light": "#ffffff", + }, + }, + "color-border-button-primary-active": { + "$description": "The border color of primary buttons in active state.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, + "color-border-button-primary-default": { + "$description": "The border color of primary buttons.", + "$value": { + "dark": "#dedee3", + "light": "#dedee3", + }, + }, + "color-border-button-primary-disabled": { + "$description": "The border color of primary buttons in disabled state.", + "$value": { + "dark": "#232b37", + "light": "#232b37", + }, + }, + "color-border-button-primary-hover": { + "$description": "The border color of primary buttons in hover state.", + "$value": { + "dark": "#ffffff", + "light": "#ffffff", + }, + }, + "color-border-card": { + "$description": "The border color of a card.", + "$value": { + "dark": "#dedee3", + "light": "#dedee3", + }, + }, + "color-border-container-top": { + "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, + "color-border-control-default": { + "$description": "The default border color of form controls. For example: radio buttons and checkboxes.", + "$value": { + "dark": "#8c8c94", + "light": "#8c8c94", + }, + }, + "color-border-dialog": { + "$description": "The border color of the feedback/input dialogue box.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, + "color-border-divider-default": { + "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers.", + "$value": { + "dark": "#dedee3", + "light": "#dedee3", + }, + }, + "color-border-divider-secondary": { + "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.", + "$value": { + "dark": "#232b37", + "light": "#232b37", + }, + }, + "color-border-dropdown-container": { + "$description": "The border color of the dropdown container. For example: border color of the dropdown container in button dropdown, select, and multi-select.", + "$value": { + "dark": "#656871", + "light": "#656871", + }, + }, + "color-border-dropdown-item-focused": { + "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.", + "$value": { + "dark": "#dedee3", + "light": "#dedee3", + }, + }, + "color-border-dropdown-item-hover": { + "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.", + "$value": { + "dark": "#656871", + "light": "#656871", + }, + }, + "color-border-input-default": { + "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.", + "$value": { + "dark": "#656871", + "light": "#656871", + }, + }, + "color-border-input-focused": { + "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, + "color-border-item-focused": { + "$description": "The color of focus states. For example: the focus ring around interactive elements.", + "$value": { + "dark": "#f9f9fa", + "light": "#f9f9fa", + }, + }, + "color-border-item-selected": { + "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, + "color-border-layout-side-navigation": { + "$description": "The border color of the side navigation divider in the app layout.", + "$value": { + "dark": "#424650", + "light": "#424650", + }, + }, + "color-border-popover": { + "$description": "The border color of the popover.", + "$value": { + "dark": "#656871", + "light": "#656871", + }, + }, + "color-border-segment-active": { + "$description": "Deprecated - this token is no longer in use.", + "$value": { + "dark": "#dedee3", + "light": "#dedee3", + }, + }, + "color-border-segment-default": { + "$description": "Deprecated - this token is no longer in use.", + "$value": { + "dark": "#dedee3", + "light": "#dedee3", + }, + }, + "color-border-segment-disabled": { + "$description": "Deprecated - this token is no longer in use.", + "$value": { + "dark": "#dedee3", + "light": "#dedee3", + }, + }, + "color-border-segment-hover": { + "$description": "Deprecated - this token is no longer in use.", + "$value": { + "dark": "#dedee3", + "light": "#dedee3", + }, + }, + "color-border-segment-wrapper": { + "$description": "The border color of the segmented control wrapper.", + "$value": { + "dark": "#656871", + "light": "#656871", + }, + }, + "color-border-status-error": { + "$description": "The border color of an item in error state. For example: error alerts.", + "$value": { + "dark": "#ff7a7a", + "light": "#ff7a7a", + }, + }, + "color-border-status-info": { + "$description": "The border color of an informational item. For example: information alerts.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, + "color-border-status-success": { + "$description": "The border color of an item in success state. For example: success alerts.", + "$value": { + "dark": "#2bb534", + "light": "#2bb534", + }, + }, + "color-border-status-warning": { + "$description": "The border color of an item in warning state. For example: warning alerts.", + "$value": { + "dark": "#fbd332", + "light": "#fbd332", + }, + }, + "color-border-toggle-button-normal-default": { + "$description": "The default border color of normal toggle buttons.", + "$value": { + "dark": "#dedee3", + "light": "#dedee3", + }, + }, + "color-border-toggle-button-normal-hover": { + "$description": "The border color of normal toggle buttons in hover state.", + "$value": { + "dark": "#ffffff", + "light": "#ffffff", + }, + }, + "color-border-toggle-button-normal-pressed": { + "$description": "The border color of normal toggle buttons in pressed state.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, + "color-charts-blue-1-1000": { + "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 10:1", + "$value": { + "dark": "#b3e4f8", + "light": "#01437d", + }, + }, + "color-charts-blue-1-1100": { + "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 11:1", + "$value": { + "dark": "#caedfc", + "light": "#003c75", + }, + }, + "color-charts-blue-1-1200": { + "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 12:1", + "$value": { + "dark": "#ddf4ff", + "light": "#00366d", + }, + }, + "color-charts-blue-1-300": { + "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 3:1", + "$value": { + "dark": "#00819c", + "light": "#529ccb", + }, + }, + "color-charts-blue-1-400": { + "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 4:1", + "$value": { + "dark": "#0497ba", + "light": "#3184c2", + }, + }, + "color-charts-blue-1-500": { + "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 5:1", + "$value": { + "dark": "#08aad2", + "light": "#0273bb", + }, + }, + "color-charts-blue-1-600": { + "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 6:1", + "$value": { + "dark": "#44b9dd", + "light": "#0166ab", + }, + }, + "color-charts-blue-1-700": { + "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 7:1", + "$value": { + "dark": "#63c6e7", + "light": "#015b9d", + }, + }, + "color-charts-blue-1-800": { + "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 8:1", + "$value": { + "dark": "#79d2f0", + "light": "#015292", + }, + }, + "color-charts-blue-1-900": { + "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 9:1", + "$value": { + "dark": "#98dcf5", + "light": "#014a87", + }, + }, + "color-charts-blue-2-1000": { + "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 10:1", + "$value": { + "dark": "#d2dcff", + "light": "#23379b", + }, + }, + "color-charts-blue-2-1100": { + "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 11:1", + "$value": { + "dark": "#dfe6ff", + "light": "#1f3191", + }, + }, + "color-charts-blue-2-1200": { + "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 12:1", + "$value": { + "dark": "#ecf0ff", + "light": "#1b2b88", + }, + }, + "color-charts-blue-2-300": { + "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 3:1", + "$value": { + "dark": "#486de8", + "light": "#688ae8", + }, + }, + "color-charts-blue-2-400": { + "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 4:1", + "$value": { + "dark": "#6384f5", + "light": "#5978e3", + }, + }, + "color-charts-blue-2-500": { + "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 5:1", + "$value": { + "dark": "#7698fe", + "light": "#4066df", + }, + }, + "color-charts-blue-2-600": { + "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 6:1", + "$value": { + "dark": "#8ea9ff", + "light": "#3759ce", + }, + }, + "color-charts-blue-2-700": { + "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 7:1", + "$value": { + "dark": "#a2b8ff", + "light": "#314fbf", + }, + }, + "color-charts-blue-2-800": { + "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 8:1", + "$value": { + "dark": "#b1c5ff", + "light": "#2c46b1", + }, + }, + "color-charts-blue-2-900": { + "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 9:1", + "$value": { + "dark": "#c3d1ff", + "light": "#273ea5", + }, + }, + "color-charts-error-bar-marker": { + "$description": "Color for the error bar marker in charts.", + "$value": { + "dark": "#ffffff", + "light": "#131920", + }, + }, + "color-charts-green-1000": { + "$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1", + "$value": { + "dark": "#c5e7a8", + "light": "#104d01", + }, + }, + "color-charts-green-1100": { + "$description": "Color from the 'green' data visualization palette at a contrast ratio of 11:1", + "$value": { + "dark": "#d5efbe", + "light": "#0f4601", + }, + }, + "color-charts-green-1200": { + "$description": "Color from the 'green' data visualization palette at a contrast ratio of 12:1", + "$value": { + "dark": "#e4f7d5", + "light": "#0d4000", + }, + }, + "color-charts-green-300": { + "$description": "Color from the 'green' data visualization palette at a contrast ratio of 3:1", + "$value": { + "dark": "#48851a", + "light": "#67a353", + }, + }, + "color-charts-green-400": { + "$description": "Color from the 'green' data visualization palette at a contrast ratio of 4:1", + "$value": { + "dark": "#5a9b29", + "light": "#41902c", + }, + }, + "color-charts-green-500": { + "$description": "Color from the 'green' data visualization palette at a contrast ratio of 5:1", + "$value": { + "dark": "#69ae34", + "light": "#1f8104", + }, + }, + "color-charts-green-600": { + "$description": "Color from the 'green' data visualization palette at a contrast ratio of 6:1", + "$value": { + "dark": "#7dbd4c", + "light": "#1a7302", + }, + }, + "color-charts-green-700": { + "$description": "Color from the 'green' data visualization palette at a contrast ratio of 7:1", + "$value": { + "dark": "#8fca61", + "light": "#176702", + }, + }, + "color-charts-green-800": { + "$description": "Color from the 'green' data visualization palette at a contrast ratio of 8:1", + "$value": { + "dark": "#9fd673", + "light": "#145d02", + }, + }, + "color-charts-green-900": { + "$description": "Color from the 'green' data visualization palette at a contrast ratio of 9:1", + "$value": { + "dark": "#b2df8d", + "light": "#125502", + }, + }, + "color-charts-line-axis": { + "$description": "Color of the axis lines in a chart.", + "$value": { + "dark": "#424650", + "light": "#dedee3", + }, + }, + "color-charts-line-grid": { + "$description": "Color of the grid lines in a chart.", + "$value": { + "dark": "#424650", + "light": "#dedee3", + }, + }, + "color-charts-line-tick": { + "$description": "Color of the tick marks in a chart.", + "$value": { + "dark": "#424650", + "light": "#dedee3", + }, + }, + "color-charts-orange-1000": { + "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 10:1", + "$value": { + "dark": "#ffd4bb", + "light": "#732c02", + }, + }, + "color-charts-orange-1100": { + "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 11:1", + "$value": { + "dark": "#ffe1cf", + "light": "#692801", + }, + }, + "color-charts-orange-1200": { + "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 12:1", + "$value": { + "dark": "#ffede2", + "light": "#602400", + }, + }, + "color-charts-orange-300": { + "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 3:1", + "$value": { + "dark": "#c55305", + "light": "#e07941", + }, + }, + "color-charts-orange-400": { + "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 4:1", + "$value": { + "dark": "#de6923", + "light": "#cc5f21", + }, + }, + "color-charts-orange-500": { + "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 5:1", + "$value": { + "dark": "#f27c36", + "light": "#bc4d01", + }, + }, + "color-charts-orange-600": { + "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 6:1", + "$value": { + "dark": "#f89256", + "light": "#a84401", + }, + }, + "color-charts-orange-700": { + "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 7:1", + "$value": { + "dark": "#fca572", + "light": "#983c02", + }, + }, + "color-charts-orange-800": { + "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 8:1", + "$value": { + "dark": "#ffb68b", + "light": "#8a3603", + }, + }, + "color-charts-orange-900": { + "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 9:1", + "$value": { + "dark": "#ffc6a4", + "light": "#7e3103", + }, + }, + "color-charts-palette-categorical-1": { + "$description": "Color #1 on the categorical data visualization palette.", + "$value": { + "dark": "#486de8", + "light": "#688ae8", + }, + }, + "color-charts-palette-categorical-10": { + "$description": "Color #10 on the categorical data visualization palette.", + "$value": { + "dark": "#f89256", + "light": "#a84401", + }, + }, + "color-charts-palette-categorical-11": { + "$description": "Color #11 on the categorical data visualization palette.", + "$value": { + "dark": "#c3d1ff", + "light": "#273ea5", + }, + }, + "color-charts-palette-categorical-12": { + "$description": "Color #12 on the categorical data visualization palette.", + "$value": { + "dark": "#ffdfe8", + "light": "#780d35", + }, + }, + "color-charts-palette-categorical-13": { + "$description": "Color #13 on the categorical data visualization palette.", + "$value": { + "dark": "#94e0d0", + "light": "#03524a", + }, + }, + "color-charts-palette-categorical-14": { + "$description": "Color #14 on the categorical data visualization palette.", + "$value": { + "dark": "#efe2ff", + "light": "#4a238b", + }, + }, + "color-charts-palette-categorical-15": { + "$description": "Color #15 on the categorical data visualization palette.", + "$value": { + "dark": "#ffc6a4", + "light": "#7e3103", + }, + }, + "color-charts-palette-categorical-16": { + "$description": "Color #16 on the categorical data visualization palette.", + "$value": { + "dark": "#ecf0ff", + "light": "#1b2b88", + }, + }, + "color-charts-palette-categorical-17": { + "$description": "Color #17 on the categorical data visualization palette.", + "$value": { + "dark": "#d56889", + "light": "#ce567c", + }, + }, + "color-charts-palette-categorical-18": { + "$description": "Color #18 on the categorical data visualization palette.", + "$value": { + "dark": "#d7f7f0", + "light": "#003e38", + }, + }, + "color-charts-palette-categorical-19": { + "$description": "Color #19 on the categorical data visualization palette.", + "$value": { + "dark": "#a173ea", + "light": "#9469d6", + }, + }, + "color-charts-palette-categorical-2": { + "$description": "Color #2 on the categorical data visualization palette.", + "$value": { + "dark": "#e07f9d", + "light": "#c33d69", + }, + }, + "color-charts-palette-categorical-20": { + "$description": "Color #20 on the categorical data visualization palette.", + "$value": { + "dark": "#ffede2", + "light": "#602400", + }, + }, + "color-charts-palette-categorical-21": { + "$description": "Color #21 on the categorical data visualization palette.", + "$value": { + "dark": "#7698fe", + "light": "#4066df", + }, + }, + "color-charts-palette-categorical-22": { + "$description": "Color #22 on the categorical data visualization palette.", + "$value": { + "dark": "#f5a2bb", + "light": "#a32952", + }, + }, + "color-charts-palette-categorical-23": { + "$description": "Color #23 on the categorical data visualization palette.", + "$value": { + "dark": "#00b09b", + "light": "#0d7d70", + }, + }, + "color-charts-palette-categorical-24": { + "$description": "Color #24 on the categorical data visualization palette.", + "$value": { + "dark": "#cbabfc", + "light": "#6b40b2", + }, + }, + "color-charts-palette-categorical-25": { + "$description": "Color #25 on the categorical data visualization palette.", + "$value": { + "dark": "#f27c36", + "light": "#bc4d01", + }, + }, + "color-charts-palette-categorical-26": { + "$description": "Color #26 on the categorical data visualization palette.", + "$value": { + "dark": "#b1c5ff", + "light": "#2c46b1", + }, + }, + "color-charts-palette-categorical-27": { + "$description": "Color #27 on the categorical data visualization palette.", + "$value": { + "dark": "#ffd1de", + "light": "#81143b", + }, + }, + "color-charts-palette-categorical-28": { + "$description": "Color #28 on the categorical data visualization palette.", + "$value": { + "dark": "#77d7c3", + "light": "#045b52", + }, + }, + "color-charts-palette-categorical-29": { + "$description": "Color #29 on the categorical data visualization palette.", + "$value": { + "dark": "#e8d5ff", + "light": "#512994", + }, + }, + "color-charts-palette-categorical-3": { + "$description": "Color #3 on the categorical data visualization palette.", + "$value": { + "dark": "#018977", + "light": "#2ea597", + }, + }, + "color-charts-palette-categorical-30": { + "$description": "Color #30 on the categorical data visualization palette.", + "$value": { + "dark": "#ffb68b", + "light": "#8a3603", + }, + }, + "color-charts-palette-categorical-31": { + "$description": "Color #31 on the categorical data visualization palette.", + "$value": { + "dark": "#dfe6ff", + "light": "#1f3191", + }, + }, + "color-charts-palette-categorical-32": { + "$description": "Color #32 on the categorical data visualization palette.", + "$value": { + "dark": "#c64a70", + "light": "#da7596", + }, + }, + "color-charts-palette-categorical-33": { + "$description": "Color #33 on the categorical data visualization palette.", + "$value": { + "dark": "#c2f0e6", + "light": "#01443e", + }, + }, + "color-charts-palette-categorical-34": { + "$description": "Color #34 on the categorical data visualization palette.", + "$value": { + "dark": "#8d59de", + "light": "#a783e1", + }, + }, + "color-charts-palette-categorical-35": { + "$description": "Color #35 on the categorical data visualization palette.", + "$value": { + "dark": "#ffe1cf", + "light": "#692801", + }, + }, + "color-charts-palette-categorical-36": { + "$description": "Color #36 on the categorical data visualization palette.", + "$value": { + "dark": "#6384f5", + "light": "#5978e3", + }, + }, + "color-charts-palette-categorical-37": { + "$description": "Color #37 on the categorical data visualization palette.", + "$value": { + "dark": "#eb92ad", + "light": "#b1325c", + }, + }, + "color-charts-palette-categorical-38": { + "$description": "Color #38 on the categorical data visualization palette.", + "$value": { + "dark": "#009d89", + "light": "#1c8e81", + }, + }, + "color-charts-palette-categorical-39": { + "$description": "Color #39 on the categorical data visualization palette.", + "$value": { + "dark": "#bf9bf9", + "light": "#7749bf", + }, + }, + "color-charts-palette-categorical-4": { + "$description": "Color #4 on the categorical data visualization palette.", + "$value": { + "dark": "#b088f5", + "light": "#8456ce", + }, + }, + "color-charts-palette-categorical-40": { + "$description": "Color #40 on the categorical data visualization palette.", + "$value": { + "dark": "#de6923", + "light": "#cc5f21", + }, + }, + "color-charts-palette-categorical-41": { + "$description": "Color #41 on the categorical data visualization palette.", + "$value": { + "dark": "#a2b8ff", + "light": "#314fbf", + }, + }, + "color-charts-palette-categorical-42": { + "$description": "Color #42 on the categorical data visualization palette.", + "$value": { + "dark": "#ffc1d4", + "light": "#8b1b42", + }, + }, + "color-charts-palette-categorical-43": { + "$description": "Color #43 on the categorical data visualization palette.", + "$value": { + "dark": "#5fccb7", + "light": "#06645a", + }, + }, + "color-charts-palette-categorical-44": { + "$description": "Color #44 on the categorical data visualization palette.", + "$value": { + "dark": "#dfc8ff", + "light": "#59309d", + }, + }, + "color-charts-palette-categorical-45": { + "$description": "Color #45 on the categorical data visualization palette.", + "$value": { + "dark": "#fca572", + "light": "#983c02", + }, + }, + "color-charts-palette-categorical-46": { + "$description": "Color #46 on the categorical data visualization palette.", + "$value": { + "dark": "#d2dcff", + "light": "#23379b", + }, + }, + "color-charts-palette-categorical-47": { + "$description": "Color #47 on the categorical data visualization palette.", + "$value": { + "dark": "#ffecf1", + "light": "#6f062f", + }, + }, + "color-charts-palette-categorical-48": { + "$description": "Color #48 on the categorical data visualization palette.", + "$value": { + "dark": "#ace9db", + "light": "#014b44", + }, + }, + "color-charts-palette-categorical-49": { + "$description": "Color #49 on the categorical data visualization palette.", + "$value": { + "dark": "#f5edff", + "light": "#431d84", + }, + }, + "color-charts-palette-categorical-5": { + "$description": "Color #5 on the categorical data visualization palette.", + "$value": { + "dark": "#c55305", + "light": "#e07941", + }, + }, + "color-charts-palette-categorical-50": { + "$description": "Color #50 on the categorical data visualization palette.", + "$value": { + "dark": "#ffd4bb", + "light": "#732c02", + }, + }, + "color-charts-palette-categorical-6": { + "$description": "Color #6 on the categorical data visualization palette.", + "$value": { + "dark": "#8ea9ff", + "light": "#3759ce", + }, + }, + "color-charts-palette-categorical-7": { + "$description": "Color #7 on the categorical data visualization palette.", + "$value": { + "dark": "#ffb0c8", + "light": "#962249", + }, + }, + "color-charts-palette-categorical-8": { + "$description": "Color #8 on the categorical data visualization palette.", + "$value": { + "dark": "#40bfa9", + "light": "#096f64", + }, + }, + "color-charts-palette-categorical-9": { + "$description": "Color #9 on the categorical data visualization palette.", + "$value": { + "dark": "#d6baff", + "light": "#6237a7", + }, + }, + "color-charts-pink-1000": { + "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 10:1", + "$value": { + "dark": "#ffd1de", + "light": "#81143b", + }, + }, + "color-charts-pink-1100": { + "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 11:1", + "$value": { + "dark": "#ffdfe8", + "light": "#780d35", + }, + }, + "color-charts-pink-1200": { + "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 12:1", + "$value": { + "dark": "#ffecf1", + "light": "#6f062f", + }, + }, + "color-charts-pink-300": { + "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 3:1", + "$value": { + "dark": "#c64a70", + "light": "#da7596", + }, + }, + "color-charts-pink-400": { + "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 4:1", + "$value": { + "dark": "#d56889", + "light": "#ce567c", + }, + }, + "color-charts-pink-500": { + "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 5:1", + "$value": { + "dark": "#e07f9d", + "light": "#c33d69", + }, + }, + "color-charts-pink-600": { + "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 6:1", + "$value": { + "dark": "#eb92ad", + "light": "#b1325c", + }, + }, + "color-charts-pink-700": { + "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 7:1", + "$value": { + "dark": "#f5a2bb", + "light": "#a32952", + }, + }, + "color-charts-pink-800": { + "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 8:1", + "$value": { + "dark": "#ffb0c8", + "light": "#962249", + }, + }, + "color-charts-pink-900": { + "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 9:1", + "$value": { + "dark": "#ffc1d4", + "light": "#8b1b42", + }, + }, + "color-charts-purple-1000": { + "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 10:1", + "$value": { + "dark": "#e8d5ff", + "light": "#512994", + }, + }, + "color-charts-purple-1100": { + "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 11:1", + "$value": { + "dark": "#efe2ff", + "light": "#4a238b", + }, + }, + "color-charts-purple-1200": { + "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 12:1", + "$value": { + "dark": "#f5edff", + "light": "#431d84", + }, + }, + "color-charts-purple-300": { + "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 3:1", + "$value": { + "dark": "#8d59de", + "light": "#a783e1", + }, + }, + "color-charts-purple-400": { + "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 4:1", + "$value": { + "dark": "#a173ea", + "light": "#9469d6", + }, + }, + "color-charts-purple-500": { + "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 5:1", + "$value": { + "dark": "#b088f5", + "light": "#8456ce", + }, + }, + "color-charts-purple-600": { + "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 6:1", + "$value": { + "dark": "#bf9bf9", + "light": "#7749bf", + }, + }, + "color-charts-purple-700": { + "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 7:1", + "$value": { + "dark": "#cbabfc", + "light": "#6b40b2", + }, + }, + "color-charts-purple-800": { + "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 8:1", + "$value": { + "dark": "#d6baff", + "light": "#6237a7", + }, + }, + "color-charts-purple-900": { + "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 9:1", + "$value": { + "dark": "#dfc8ff", + "light": "#59309d", + }, + }, + "color-charts-red-1000": { + "$description": "Color from the 'red' data visualization palette at a contrast ratio of 10:1", + "$value": { + "dark": "#ffd2cf", + "light": "#7d2105", + }, + }, + "color-charts-red-1100": { + "$description": "Color from the 'red' data visualization palette at a contrast ratio of 11:1", + "$value": { + "dark": "#ffe0dd", + "light": "#721e03", + }, + }, + "color-charts-red-1200": { + "$description": "Color from the 'red' data visualization palette at a contrast ratio of 12:1", + "$value": { + "dark": "#ffecea", + "light": "#671c00", + }, + }, + "color-charts-red-300": { + "$description": "Color from the 'red' data visualization palette at a contrast ratio of 3:1", + "$value": { + "dark": "#d63f38", + "light": "#ea7158", + }, + }, + "color-charts-red-400": { + "$description": "Color from the 'red' data visualization palette at a contrast ratio of 4:1", + "$value": { + "dark": "#ed5958", + "light": "#dc5032", + }, + }, + "color-charts-red-500": { + "$description": "Color from the 'red' data visualization palette at a contrast ratio of 5:1", + "$value": { + "dark": "#fe6e73", + "light": "#d13313", + }, + }, + "color-charts-red-600": { + "$description": "Color from the 'red' data visualization palette at a contrast ratio of 6:1", + "$value": { + "dark": "#ff8a8a", + "light": "#ba2e0f", + }, + }, + "color-charts-red-700": { + "$description": "Color from the 'red' data visualization palette at a contrast ratio of 7:1", + "$value": { + "dark": "#ffa09e", + "light": "#a82a0c", + }, + }, + "color-charts-red-800": { + "$description": "Color from the 'red' data visualization palette at a contrast ratio of 8:1", + "$value": { + "dark": "#ffb3b0", + "light": "#972709", + }, + }, + "color-charts-red-900": { + "$description": "Color from the 'red' data visualization palette at a contrast ratio of 9:1", + "$value": { + "dark": "#ffc4c0", + "light": "#892407", + }, + }, + "color-charts-status-critical": { + "$description": "Color to represent a critical error or a critically high-level of severity. For example: "Sev-1"", + "$value": { + "dark": "#d63f38", + "light": "#7d2105", + }, + }, + "color-charts-status-high": { + "$description": "Color to represent an error status or a high-level of severity. Use this color to represent a default error status when there is only one applicable to a chart. For example: "Failed" or "Sev-2"", + "$value": { + "dark": "#fe6e73", + "light": "#ba2e0f", + }, + }, + "color-charts-status-info": { + "$description": "Color to represent an informational status. For example: "In-progress" or "Updating"", + "$value": { + "dark": "#08aad2", + "light": "#3184c2", + }, + }, + "color-charts-status-low": { + "$description": "Color to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"", + "$value": { + "dark": "#dfb52c", + "light": "#b2911c", + }, + }, + "color-charts-status-medium": { + "$description": "Color to represent a medium-level of severity. For example: "Sev-3"", + "$value": { + "dark": "#f89256", + "light": "#cc5f21", + }, + }, + "color-charts-status-neutral": { + "$description": "Color to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"", + "$value": { + "dark": "#8c8c94", + "light": "#8c8c94", + }, + }, + "color-charts-status-positive": { + "$description": "Color to represent a positive status. *For example: "Success" or "Running"", + "$value": { + "dark": "#69ae34", + "light": "#67a353", + }, + }, + "color-charts-teal-1000": { + "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 10:1", + "$value": { + "dark": "#ace9db", + "light": "#014b44", + }, + }, + "color-charts-teal-1100": { + "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 11:1", + "$value": { + "dark": "#c2f0e6", + "light": "#01443e", + }, + }, + "color-charts-teal-1200": { + "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 12:1", + "$value": { + "dark": "#d7f7f0", + "light": "#003e38", + }, + }, + "color-charts-teal-300": { + "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 3:1", + "$value": { + "dark": "#018977", + "light": "#2ea597", + }, + }, + "color-charts-teal-400": { + "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 4:1", + "$value": { + "dark": "#009d89", + "light": "#1c8e81", + }, + }, + "color-charts-teal-500": { + "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 5:1", + "$value": { + "dark": "#00b09b", + "light": "#0d7d70", + }, + }, + "color-charts-teal-600": { + "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 6:1", + "$value": { + "dark": "#40bfa9", + "light": "#096f64", + }, + }, + "color-charts-teal-700": { + "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 7:1", + "$value": { + "dark": "#5fccb7", + "light": "#06645a", + }, + }, + "color-charts-teal-800": { + "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 8:1", + "$value": { + "dark": "#77d7c3", + "light": "#045b52", + }, + }, + "color-charts-teal-900": { + "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 9:1", + "$value": { + "dark": "#94e0d0", + "light": "#03524a", + }, + }, + "color-charts-threshold-info": { + "$description": "The color to represent an informational threshold to highlight special circumstances that may have or will occur. For example: A forecasted estimate", + "$value": { + "dark": "#75cfff", + "light": "#006ce0", + }, + }, + "color-charts-threshold-negative": { + "$description": "The color to represent a threshold with a negative outcome. For example: A maximum limit", + "$value": { + "dark": "#ff7a7a", + "light": "#db0000", + }, + }, + "color-charts-threshold-neutral": { + "$description": "The color to represent a threshold with a neutral outcome. For example: An average or baseline", + "$value": { + "dark": "#a4a4ad", + "light": "#656871", + }, + }, + "color-charts-threshold-positive": { + "$description": "The color to represent a threshold with a positive outcome. For example: A designated pass rate", + "$value": { + "dark": "#2bb534", + "light": "#00802f", + }, + }, + "color-charts-yellow-1000": { + "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 10:1", + "$value": { + "dark": "#f7db8a", + "light": "#553f03", + }, + }, + "color-charts-yellow-1100": { + "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 11:1", + "$value": { + "dark": "#fce5a8", + "light": "#4d3901", + }, + }, + "color-charts-yellow-1200": { + "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 12:1", + "$value": { + "dark": "#ffefc9", + "light": "#483300", + }, + }, + "color-charts-yellow-300": { + "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 3:1", + "$value": { + "dark": "#977001", + "light": "#b2911c", + }, + }, + "color-charts-yellow-400": { + "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 4:1", + "$value": { + "dark": "#b08400", + "light": "#9c7b0b", + }, + }, + "color-charts-yellow-500": { + "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 5:1", + "$value": { + "dark": "#c59600", + "light": "#8a6b05", + }, + }, + "color-charts-yellow-600": { + "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 6:1", + "$value": { + "dark": "#d3a61c", + "light": "#7b5f04", + }, + }, + "color-charts-yellow-700": { + "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 7:1", + "$value": { + "dark": "#dfb52c", + "light": "#6f5504", + }, + }, + "color-charts-yellow-800": { + "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 8:1", + "$value": { + "dark": "#eac33a", + "light": "#654d03", + }, + }, + "color-charts-yellow-900": { + "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 9:1", + "$value": { + "dark": "#f1cf65", + "light": "#5d4503", + }, + }, + "color-drag-placeholder-active": { + "$description": "The color of drag placeholder in active state.", + "$value": { + "dark": "#656871", + "light": "#656871", + }, + }, + "color-drag-placeholder-hover": { + "$description": "The color of drag placeholder in hovered state.", + "$value": { + "dark": "#006ce0", + "light": "#006ce0", + }, + }, + "color-dropzone-background-default": { + "$description": "The default color of file upload dropzone background.", + "$value": { + "dark": "#161d26", + "light": "#161d26", + }, + }, + "color-dropzone-background-hover": { + "$description": "The color of file upload dropzone background in hovered state.", + "$value": { + "dark": "#001129", + "light": "#001129", + }, + }, + "color-dropzone-border-default": { + "$description": "The default color of file upload dropzone border.", + "$value": { + "dark": "#656871", + "light": "#656871", + }, + }, + "color-dropzone-border-hover": { + "$description": "The color of file upload dropzone border in hovered state.", + "$value": { + "dark": "#75cfff", + "light": "#75cfff", + }, + }, + "color-dropzone-text-default": { + "$description": "The default color of file upload dropzone text.", + "$value": { + "dark": "#c6c6cd", + "light": "#c6c6cd", + }, + }, + "color-dropzone-text-hover": { + "$description": "The color of file upload dropzone text in hovered state.", + "$value": { + "dark": "#c6c6cd", + "light": "#c6c6cd", + }, + }, + "color-foreground-control-default": { + "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.", + "$value": { + "dark": "#0f141a", + "light": "#0f141a", + }, + }, + "color-foreground-control-disabled": { + "$description": "The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.", + "$value": { + "dark": "#161d26", + "light": "#161d26", + }, + }, + "color-foreground-control-read-only": { + "$description": "The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.", + "$value": { + "dark": "#a4a4ad", + "light": "#a4a4ad", + }, + }, + "color-item-selected": { + "$description": "The highlight color for selected items. For example: borders of tokens and selected table rows, and check icons in selected dropdown items.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, + "color-shadow-toggle-handle": { + "$description": "The color of the drop shadow under the toggle handle.", + "$value": { + "dark": "rgba(0, 0, 0, 0.25)", + "light": "rgba(0, 0, 0, 0.25)", + }, + }, + "color-text-accent": { + "$description": "The accent color used to guide a user. *For example: the highlighted page in the side navigation and active tab text.*", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, + "color-text-action-card-disabled": { + "$description": "The text color of action cards in disabled state.", + "$value": { + "dark": "#8c8c94", + "light": "#8c8c94", + }, + }, + "color-text-avatar": { + "$description": "The text and icon color of avatars.", + "$value": { + "dark": "#ffffff", + "light": "#ffffff", + }, + }, + "color-text-badge-blue": { + "$description": "The text color of blue badges.", + "$value": { + "dark": "#f9f9fa", + "light": "#f9f9fa", + }, + }, + "color-text-badge-green": { + "$description": "The text color of green badges.", + "$value": { + "dark": "#f9f9fa", + "light": "#f9f9fa", + }, + }, + "color-text-badge-grey": { + "$description": "The text color of grey badges.", + "$value": { + "dark": "#f9f9fa", + "light": "#f9f9fa", + }, + }, + "color-text-badge-red": { + "$description": "The text color of red badges.", + "$value": { + "dark": "#f9f9fa", + "light": "#f9f9fa", + }, + }, + "color-text-badge-severity-critical": { + "$description": "The text color of badges representing a critical severity level.", + "$value": { + "dark": "#000000", + "light": "#f9f9fa", + }, + }, + "color-text-badge-severity-high": { + "$description": "The text color of badges representing a high severity level.", + "$value": { + "dark": "#0f141a", + "light": "#f9f9fa", + }, + }, + "color-text-badge-severity-low": { + "$description": "The text color of badges representing a low severity level.", + "$value": { + "dark": "#0f141a", + "light": "#0f141a", + }, + }, + "color-text-badge-severity-medium": { + "$description": "The text color of badges representing a medium severity level.", + "$value": { + "dark": "#0f141a", + "light": "#0f141a", + }, + }, + "color-text-badge-severity-neutral": { + "$description": "The text color of badges representing a neutral severity level.", + "$value": { + "dark": "#f9f9fa", + "light": "#f9f9fa", + }, + }, + "color-text-body-default": { + "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values.", + "$value": { + "dark": "#c6c6cd", + "light": "#c6c6cd", + }, + }, + "color-text-body-secondary": { + "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.", + "$value": { + "dark": "#c6c6cd", + "light": "#c6c6cd", + }, + }, + "color-text-breadcrumb-current": { + "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing.", + "$value": { + "dark": "#8c8c94", + "light": "#8c8c94", + }, + }, + "color-text-breadcrumb-icon": { + "$description": "The color used for the icon delimiter between breadcrumb items.", + "$value": { + "dark": "#656871", + "light": "#656871", + }, + }, + "color-text-button-icon-disabled": { + "$description": "The color of icon buttons in disabled state.", + "$value": { + "dark": "#8c8c94", + "light": "#8c8c94", + }, + }, + "color-text-button-inline-icon-default": { + "$description": "The default color of inline button icons.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, + "color-text-button-inline-icon-disabled": { + "$description": "The color of inline button icons in disabled state.", + "$value": { + "dark": "#656871", + "light": "#656871", + }, + }, + "color-text-button-inline-icon-hover": { + "$description": "The color of inline button icons in hover state.", + "$value": { + "dark": "#75cfff", + "light": "#75cfff", + }, + }, + "color-text-button-link-active": { + "$description": "The text color of link buttons in active state.", + "$value": { + "dark": "#ffffff", + "light": "#ffffff", + }, + }, + "color-text-button-link-default": { + "$description": "The default text color of link buttons.", + "$value": { + "dark": "#dedee3", + "light": "#dedee3", + }, + }, + "color-text-button-link-disabled": { + "$description": "The text color of link buttons in disabled state.", + "$value": { + "dark": "#656871", + "light": "#656871", + }, + }, + "color-text-button-link-hover": { + "$description": "The text color of link buttons in hover state.", + "$value": { + "dark": "#ffffff", + "light": "#ffffff", + }, + }, + "color-text-button-normal-active": { + "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons.", + "$value": { + "dark": "#ffffff", + "light": "#ffffff", + }, + }, + "color-text-button-normal-default": { + "$description": "The default text color of normal buttons.", + "$value": { + "dark": "#dedee3", + "light": "#dedee3", + }, + }, + "color-text-button-normal-disabled": { + "$description": "The text color of normal buttons in disabled state.", + "$value": { + "dark": "#8c8c94", + "light": "#8c8c94", + }, + }, + "color-text-button-normal-hover": { + "$description": "The hover text color of normal buttons.", + "$value": { + "dark": "#ffffff", + "light": "#ffffff", + }, + }, + "color-text-button-primary-active": { + "$description": "The active text color of primary buttons.", + "$value": { + "dark": "#0f141a", + "light": "#0f141a", + }, + }, + "color-text-button-primary-default": { + "$description": "The default text color of primary buttons.", + "$value": { + "dark": "#0f141a", + "light": "#0f141a", + }, + }, + "color-text-button-primary-disabled": { + "$description": "The text color of primary buttons in disabled state.", + "$value": { + "dark": "#8c8c94", + "light": "#8c8c94", + }, + }, + "color-text-button-primary-hover": { + "$description": "The hover text color of primary buttons.", + "$value": { + "dark": "#0f141a", + "light": "#0f141a", + }, + }, + "color-text-calendar-date-selected": { + "$description": "The text color of selected dates in the calendar.", + "$value": { + "dark": "#161d26", + "light": "#161d26", + }, + }, + "color-text-chat-bubble-incoming": { + "$description": "Text color of \`incoming\` chat bubble.", + "$value": { + "dark": "#c6c6cd", + "light": "#c6c6cd", + }, + }, + "color-text-chat-bubble-outgoing": { + "$description": "Text color of \`outgoing\` chat bubble.", + "$value": { + "dark": "#c6c6cd", + "light": "#c6c6cd", + }, + }, + "color-text-counter": { + "$description": "The default color for counters. For example: counters in table headers", + "$value": { + "dark": "#a4a4ad", + "light": "#a4a4ad", + }, + }, + "color-text-dropdown-item-default": { + "$description": "The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect.", + "$value": { + "dark": "#dedee3", + "light": "#dedee3", + }, + }, + "color-text-dropdown-item-disabled": { + "$description": "The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest.", + "$value": { + "dark": "#656871", + "light": "#656871", + }, + }, + "color-text-dropdown-item-filter-match": { + "$description": "The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest.", + "$value": { + "dark": "#75cfff", + "light": "#75cfff", + }, + }, + "color-text-dropdown-item-highlighted": { + "$description": "The text color of hovered or selected dropdown items. *For example: selected day text color in date picker, label text color of the item on hover in a select, multiselect, and autosuggest.*", + "$value": { + "dark": "#ebebf0", + "light": "#ebebf0", + }, + }, + "color-text-dropdown-item-secondary": { + "$description": "The text color of secondary information in dropdown items. For example: descriptions and tags text color in a select, multiselect, and autosuggest.", + "$value": { + "dark": "#a4a4ad", + "light": "#a4a4ad", + }, + }, + "color-text-empty": { + "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text.", + "$value": { + "dark": "#dedee3", + "light": "#dedee3", + }, + }, + "color-text-expandable-section-default": { + "$description": "The default color of the expandable section header text.", + "$value": { + "dark": "#dedee3", + "light": "#dedee3", + }, + }, + "color-text-expandable-section-hover": { + "$description": "The color of the expandable section header text in hover state.", + "$value": { + "dark": "#ffffff", + "light": "#ffffff", + }, + }, + "color-text-expandable-section-navigation-icon-default": { + "$description": "The default color of the expand icon in the navigation variant of the expandable section.", + "$value": { + "dark": "#dedee3", + "light": "#dedee3", + }, + }, + "color-text-form-default": { + "$description": "The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas.", + "$value": { + "dark": "#dedee3", + "light": "#dedee3", + }, + }, + "color-text-form-secondary": { + "$description": "The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor.", + "$value": { + "dark": "#a4a4ad", + "light": "#a4a4ad", + }, + }, + "color-text-group-label": { + "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.", + "$value": { + "dark": "#c6c6cd", + "light": "#c6c6cd", + }, + }, + "color-text-heading-default": { + "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.", + "$value": { + "dark": "#ebebf0", + "light": "#ebebf0", + }, + }, + "color-text-heading-secondary": { + "$description": "The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions.", + "$value": { + "dark": "#a4a4ad", + "light": "#a4a4ad", + }, + }, + "color-text-home-header-default": { + "$description": "The color of the home header's text, displayed on the Service's home page.", + "$value": { + "dark": "#ebebf0", + "light": "#ebebf0", + }, + }, + "color-text-home-header-secondary": { + "$description": "The color of the home header's secondary text, displayed on the Service's home page.", + "$value": { + "dark": "#c6c6cd", + "light": "#c6c6cd", + }, + }, + "color-text-icon-subtle": { + "$description": "The color of subtle icons. For example: secondary icons with lower visual emphasis.", + "$value": { + "dark": "#b4b4bb", + "light": "#b4b4bb", + }, + }, + "color-text-input-disabled": { + "$description": "The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect.", + "$value": { + "dark": "#656871", + "light": "#656871", + }, + }, + "color-text-input-placeholder": { + "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.", + "$value": { + "dark": "#a4a4ad", + "light": "#a4a4ad", + }, + }, + "color-text-interactive-active": { + "$description": "The color of clickable elements in their active state. For example: tabs and icons.", + "$value": { + "dark": "#f9f9fa", + "light": "#f9f9fa", + }, + }, + "color-text-interactive-default": { + "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*", + "$value": { + "dark": "#dedee3", + "light": "#dedee3", + }, + }, + "color-text-interactive-disabled": { + "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons.", + "$value": { + "dark": "#656871", + "light": "#656871", + }, + }, + "color-text-interactive-hover": { + "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*", + "$value": { + "dark": "#f9f9fa", + "light": "#f9f9fa", + }, + }, + "color-text-interactive-inverted-default": { + "$description": "The default color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.", + "$value": { + "dark": "#dedee3", + "light": "#dedee3", + }, + }, + "color-text-interactive-inverted-hover": { + "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.", + "$value": { + "dark": "#f9f9fa", + "light": "#f9f9fa", + }, + }, + "color-text-label": { + "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.", + "$value": { + "dark": "#dedee3", + "light": "#dedee3", + }, + }, + "color-text-label-gen-ai": { + "$description": "The default color for labels indicating that content is produced by generative AI.", + "$value": { + "dark": "#bf80ff", + "light": "#bf80ff", + }, + }, + "color-text-layout-toggle": { + "$description": "The default color of the app layout toggle.", + "$value": { + "dark": "#ffffff", + "light": "#ffffff", + }, + }, + "color-text-layout-toggle-active": { + "$description": "The color of the app layout toggle button when it's active.", + "$value": { + "dark": "#161d26", + "light": "#161d26", + }, + }, + "color-text-layout-toggle-hover": { + "$description": "The color of the app layout toggle button on hover.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, + "color-text-layout-toggle-selected": { + "$description": "The color of the app layout toggle button when it's selected.", + "$value": { + "dark": "#0f141a", + "light": "#0f141a", + }, + }, + "color-text-link-decoration-default": { + "$description": "The default color of the text decoration (underline) of links. Defaults to the link text color.", + "$value": { + "dark": "currentColor", + "light": "currentColor", + }, + }, + "color-text-link-decoration-hover": { + "$description": "The hover color of the text decoration (underline) of links. Defaults to the link hover text color.", + "$value": { + "dark": "currentColor", + "light": "currentColor", + }, + }, + "color-text-link-default": { + "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, + "color-text-link-hover": { + "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.", + "$value": { + "dark": "#75cfff", + "light": "#75cfff", + }, + }, + "color-text-link-info-default": { + "$description": "The default color for info links.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, + "color-text-link-info-hover": { + "$description": "The hover color for info links.", + "$value": { + "dark": "#75cfff", + "light": "#75cfff", + }, + }, + "color-text-link-secondary-default": { + "$description": "The default color for secondary links. For example: links with lower visual emphasis or supplementary content.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, + "color-text-link-secondary-hover": { + "$description": "The hover color for secondary links. For example: links with lower visual emphasis or supplementary content.", + "$value": { + "dark": "#75cfff", + "light": "#75cfff", + }, + }, + "color-text-notification-default": { + "$description": "Default text color for notifications. For example: the text on badges and flashes.", + "$value": { + "dark": "#f9f9fa", + "light": "#f9f9fa", + }, + }, + "color-text-notification-severity-critical": { + "$description": "Text color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"", + "$value": { + "dark": "#000000", + "light": "#f9f9fa", + }, + }, + "color-text-notification-severity-high": { + "$description": "Text color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"", + "$value": { + "dark": "#0f141a", + "light": "#f9f9fa", + }, + }, + "color-text-notification-severity-low": { + "$description": "Text color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"", + "$value": { + "dark": "#0f141a", + "light": "#0f141a", + }, + }, + "color-text-notification-severity-medium": { + "$description": "Text color in a notification to represent a medium-level of severity. For example: "Sev-3"", + "$value": { + "dark": "#0f141a", + "light": "#0f141a", + }, + }, + "color-text-notification-severity-neutral": { + "$description": "Text color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"", + "$value": { + "dark": "#f9f9fa", + "light": "#f9f9fa", + }, + }, + "color-text-notification-yellow": { + "$description": "The text and foreground color used on warning flash messages (yellow notification surface).", + "$value": { + "dark": "#0f141a", + "light": "#0f141a", + }, + }, + "color-text-segment-active": { + "$description": "The text color of the active segment in a segmented control.", + "$value": { + "dark": "#0f141a", + "light": "#0f141a", + }, + }, + "color-text-segment-default": { + "$description": "The text color of inactive segments in a segmented control.", + "$value": { + "dark": "#dedee3", + "light": "#dedee3", + }, + }, + "color-text-segment-hover": { + "$description": "The text color of inactive segments in a segmented control on hover.", + "$value": { + "dark": "#ffffff", + "light": "#ffffff", + }, + }, + "color-text-side-navigation-item-active": { + "$description": "The text color of an active (highlighted) side navigation item.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, + "color-text-status-error": { + "$description": "The color of error text and icons. For example: form field error text and error status indicators.", + "$value": { + "dark": "#ff7a7a", + "light": "#ff7a7a", + }, + }, + "color-text-status-inactive": { + "$description": "The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators.", + "$value": { + "dark": "#a4a4ad", + "light": "#a4a4ad", + }, + }, + "color-text-status-info": { + "$description": "The color of info text and icons. For example: info status indicators and info alert icon.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, + "color-text-status-success": { + "$description": "The color of success text and icons. For example: success status indicators and success alert icon.", + "$value": { + "dark": "#2bb534", + "light": "#2bb534", + }, + }, + "color-text-status-warning": { + "$description": "The color of warning icons.", + "$value": { + "dark": "#fbd332", + "light": "#fbd332", + }, + }, + "color-text-toggle-button-icon-pressed": { + "$description": "The pressed text color of icon toggle buttons.", + "$value": { + "dark": "#f9f9fa", + "light": "#f9f9fa", + }, + }, + "color-text-toggle-button-normal-pressed": { + "$description": "The pressed text color of normal toggle buttons.", + "$value": { + "dark": "#75cfff", + "light": "#75cfff", + }, + }, + "color-text-top-navigation-title": { + "$description": "The color of the title in the top navigation.", + "$value": { + "dark": "#f9f9fa", + "light": "#f9f9fa", + }, + }, + "color-tree-view-connector-line": { + "$description": "The color of the tree view connector lines.", + "$value": { + "dark": "#dedee3", + "light": "#dedee3", + }, + }, + "font-family-base": { + "$description": "The default font family that will be applied globally to the product interface.", + "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif", + }, + "font-family-display": { + "$description": "The font family for display text. Defaults to the base font family.", + "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif", + }, + "font-family-heading": { + "$description": "The font family for headings and component headers. Defaults to the base font family.", + "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif", + }, + "font-family-monospace": { + "$description": "The monospace font family that will be applied globally to the product interface.", + "$value": "Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace", + }, + "font-size-body-m": { + "$description": "The default font size for regular body text. For example,

tags in text content, or button text.", + "$value": "14px", + }, + "font-size-body-s": { + "$description": "The default font size for small body text. For example, form field descriptions, or badge text.", + "$value": "12px", + }, + "font-size-display-l": { + "$description": "The default font size for large display text.", + "$value": "42px", + }, + "font-size-display-xl": { + "$description": "The default font size for extra large display text.", + "$value": "64px", + }, + "font-size-heading-l": { + "$description": "The default font size for h2s.", + "$value": "20px", + }, + "font-size-heading-m": { + "$description": "The default font size for h3s.", + "$value": "18px", + }, + "font-size-heading-s": { + "$description": "The default font size for h4s.", + "$value": "16px", + }, + "font-size-heading-xl": { + "$description": "The default font size for h1s.", + "$value": "24px", + }, + "font-size-heading-xs": { + "$description": "The default font size for h5s.", + "$value": "14px", + }, + "font-size-tabs": { + "$description": "The default font size for tabs.", + "$value": "16px", + }, + "font-weight-alert-header": { + "$description": "The default font weight for alert header text.", + "$value": "700", + }, + "font-weight-bold": { + "$description": "The default bold font weight for body text. For example, and tags in text content.", + "$value": "700", + }, + "font-weight-button": { + "$description": "The default font weight for button text.", + "$value": "700", + }, + "font-weight-display-l": { + "$description": "The default font weight for large display text.", + "$value": "700", + }, + "font-weight-display-xl": { + "$description": "The default font weight for extra large display text.", + "$value": "400", + }, + "font-weight-flashbar-header": { + "$description": "The default font weight for flashbar header text.", + "$value": "700", + }, + "font-weight-heading-l": { + "$description": "The default font weight for h2s.", + "$value": "700", + }, + "font-weight-heading-m": { + "$description": "The default font weight for h3s.", + "$value": "700", + }, + "font-weight-heading-s": { + "$description": "The default font weight for h4s.", + "$value": "700", + }, + "font-weight-heading-xl": { + "$description": "The default font weight for h1s.", + "$value": "700", + }, + "font-weight-heading-xs": { + "$description": "The default font weight for h5s.", + "$value": "700", + }, + "font-weight-heavy": { + "$description": "The default heavy font weight.", + "$value": "700", + }, + "font-weight-lighter": { + "$description": "The default lighter font weight.", + "$value": "300", + }, + "font-weight-normal": { + "$description": "The default normal font weight.", + "$value": "400", + }, + "font-weight-tabs": { + "$description": "The default font weight for tabs.", + "$value": "700", + }, + "font-weight-tabs-disabled": { + "$description": "The default font weight for disabled tabs.", + "$value": "700", + }, + "letter-spacing-display-l": { + "$description": "The default letter spacing for large display text.", + "$value": "-0.03em", + }, + "letter-spacing-display-xl": { + "$description": "The default letter spacing for extra large display text.", + "$value": "-0.03em", + }, + "letter-spacing-heading-l": { + "$description": "The default letter spacing for h2s.", + "$value": "-0.015em", + }, + "letter-spacing-heading-m": { + "$description": "The default letter spacing for h3s.", + "$value": "-0.010em", + }, + "letter-spacing-heading-s": { + "$description": "The default letter spacing for h4s.", + "$value": "-0.005em", + }, + "letter-spacing-heading-xl": { + "$description": "The default letter spacing for h1s.", + "$value": "-0.02em", + }, + "letter-spacing-heading-xs": { + "$description": "The default letter spacing for h5s.", + "$value": "normal", + }, + "line-height-body-m": { + "$description": "The default line height for regular body text.", + "$value": "20px", + }, + "line-height-body-s": { + "$description": "The default line height for small body text.", + "$value": "16px", + }, + "line-height-display-l": { + "$description": "The default line height for large display text.", + "$value": "48px", + }, + "line-height-display-xl": { + "$description": "The default line height for extra large display text.", + "$value": "72px", + }, + "line-height-heading-l": { + "$description": "The default line height for h2s.", + "$value": "24px", + }, + "line-height-heading-m": { + "$description": "The default line height for h3s.", + "$value": "22px", + }, + "line-height-heading-s": { + "$description": "The default line height for h4s.", + "$value": "20px", + }, + "line-height-heading-xl": { + "$description": "The default line height for h1s.", + "$value": "30px", + }, + "line-height-heading-xs": { + "$description": "The default line height for h5s.", + "$value": "18px", + }, + "line-height-tabs": { + "$description": "The default line height for tabs.", + "$value": "20px", + }, + "motion-duration-avatar-gen-ai-gradient": { + "$description": "The duration for gradient motion of gen-ai avatars.", + "$value": { + "default": "3600ms", + "disabled": "0ms", + }, + }, + "motion-duration-avatar-loading-dots": { + "$description": "The duration for loading motion of avatars.", + "$value": { + "default": "1200ms", + "disabled": "0ms", + }, + }, + "motion-duration-complex": { + "$description": "The duration for drawing more attention or accommodating for more complexity.", + "$value": { + "default": "250ms", + "disabled": "0ms", + }, + }, + "motion-duration-expressive": { + "$description": "The duration for accommodating the motion with more expressiveness.", + "$value": { + "default": "165ms", + "disabled": "0ms", + }, + }, + "motion-duration-responsive": { + "$description": "The duration for making the motion feel quick and responsive.", + "$value": { + "default": "115ms", + "disabled": "0ms", + }, + }, + "motion-duration-tooltip-enter": { + "$description": "The duration for the tooltip enter transition.", + "$value": { + "default": "115ms", + "disabled": "0ms", + }, + }, + "motion-easing-avatar-gen-ai-gradient": { + "$description": "The easing curve for gradient motion of gen-ai avatars.", + "$value": { + "default": "cubic-bezier(0.7, 0, 0.3, 1)", + "disabled": "cubic-bezier(0.7, 0, 0.3, 1)", + }, + }, + "motion-easing-expressive": { + "$description": "The easing curve for drawing a user's attention in an expressive way.", + "$value": { + "default": "cubic-bezier(0.84, 0, 0.16, 1)", + "disabled": "cubic-bezier(0.84, 0, 0.16, 1)", + }, + }, + "motion-easing-responsive": { + "$description": "The easing curve for providing responsive yet smooth visual feedback.", + "$value": { + "default": "cubic-bezier(0, 0, 0, 1)", + "disabled": "cubic-bezier(0, 0, 0, 1)", + }, + }, + "motion-easing-sticky": { + "$description": "The easing curve for making an element sticky to a certain state.", + "$value": { + "default": "cubic-bezier(1, 0, 0.83, 1)", + "disabled": "cubic-bezier(1, 0, 0.83, 1)", + }, + }, + "motion-easing-tooltip-enter": { + "$description": "The easing curve for the tooltip enter transition.", + "$value": { + "default": "cubic-bezier(0, 0, 0, 1)", + "disabled": "cubic-bezier(0, 0, 0, 1)", + }, + }, + "motion-keyframes-fade-in": { + "$description": "The CSS keyframes for showing an element.", + "$value": { + "default": "awsui-fade-in-35003c", + "disabled": "awsui-fade-in-35003c", + }, + }, + "motion-keyframes-fade-out": { + "$description": "The CSS keyframes for hiding an element.", + "$value": { + "default": "awsui-fade-out-35003c", + "disabled": "awsui-fade-out-35003c", + }, + }, + "motion-keyframes-scale-popup": { + "$description": "The CSS keyframes for scaling up an element to draw the user's attention.", + "$value": { + "default": "awsui-scale-popup-35003c", + "disabled": "awsui-scale-popup-35003c", + }, + }, + "motion-keyframes-status-icon-error": { + "$description": "The CSS keyframes applied to an error status icon to draw the user's attention.", + "$value": { + "default": "awsui-status-icon-error-35003c", + "disabled": "awsui-status-icon-error-35003c", + }, + }, + "shadow-card": { + "$description": "The shadow of a card.", + "$value": { + "dark": "none", + "light": "none", + }, + }, + "shadow-container-active": { + "$description": "Shadow for containers and cards in active state.", + "$value": { + "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c", + "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a", + }, + }, + "size-side-navigation-item-height": { + "$description": "The minimum height of side navigation items.", + "$value": { + "comfortable": "28px", + "compact": "24px", + }, + }, + "size-vertical-input": { + "$description": "The height of form input components. For example: input, select, multiselect, autosuggest, and datepicker.", + "$value": { + "comfortable": "32px", + "compact": "28px", + }, + }, + "space-action-card-horizontal-default": { + "$description": "The default horizontal padding inside an action card.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-action-card-horizontal-embedded": { + "$description": "The horizontal padding inside an embedded action card.", + "$value": { + "comfortable": "12px", + "compact": "10px", + }, + }, + "space-action-card-vertical-default": { + "$description": "The default vertical padding inside an action card.", + "$value": { + "comfortable": "16px", + "compact": "12px", + }, + }, + "space-action-card-vertical-embedded": { + "$description": "The vertical padding inside an embedded action card.", + "$value": { + "comfortable": "10px", + "compact": "8px", + }, + }, + "space-alert-vertical": { + "$description": "The vertical padding inside alert components.", + "$value": { + "comfortable": "8px", + "compact": "4px", + }, + }, + "space-button-horizontal": { + "$description": "The horizontal padding inside buttons.", + "$value": { + "comfortable": "20px", + "compact": "16px", + }, + }, + "space-button-vertical": { + "$description": "The vertical padding inside buttons.", + "$value": { + "comfortable": "4px", + "compact": "2px", + }, + }, + "space-card-horizontal-default": { + "$description": "The default horizontal padding inside a card.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-card-horizontal-embedded": { + "$description": "The horizontal padding inside embedded a card.", + "$value": { + "comfortable": "12px", + "compact": "10px", + }, + }, + "space-card-vertical-default": { + "$description": "The default vertical padding inside a card.", + "$value": { + "comfortable": "16px", + "compact": "12px", + }, + }, + "space-card-vertical-embedded": { + "$description": "The vertical padding inside embedded a card.", + "$value": { + "comfortable": "10px", + "compact": "8px", + }, + }, + "space-container-horizontal": { + "$description": "The horizontal padding inside a container.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-field-horizontal": { + "$description": "The horizontal padding inside field components.", + "$value": { + "comfortable": "12px", + "compact": "12px", + }, + }, + "space-field-vertical": { + "$description": "The vertical padding inside control components.", + "$value": { + "comfortable": "5px", + "compact": "3px", + }, + }, + "space-option-padding-horizontal": { + "$description": "The horizontal padding inside dropdown option items.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-option-padding-vertical": { + "$description": "The vertical padding inside dropdown option items.", + "$value": { + "comfortable": "4px", + "compact": "4px", + }, + }, + "space-scaled-l": { + "$description": "The L spacing unit which scales between modes. For example: vertical space between form fields.", + "$value": { + "comfortable": "20px", + "compact": "16px", + }, + }, + "space-scaled-m": { + "$description": "The M spacing unit which scales between modes. For example: top padding of content inside a container", + "$value": { + "comfortable": "16px", + "compact": "12px", + }, + }, + "space-scaled-s": { + "$description": "The S spacing unit which scales between modes. For example: vertical padding inside a popover.", + "$value": { + "comfortable": "12px", + "compact": "8px", + }, + }, + "space-scaled-xl": { + "$description": "The XL spacing unit which scales between modes. For example: horizontal space between wizard navigation and content.", + "$value": { + "comfortable": "24px", + "compact": "20px", + }, + }, + "space-scaled-xs": { + "$description": "The XS spacing unit which scales between modes. For example: horizontal space between buttons in an action stripe.", + "$value": { + "comfortable": "8px", + "compact": "4px", + }, + }, + "space-scaled-xxl": { + "$description": "The XXL spacing unit which scales between modes. For example: horizontal padding for side navigation and help panel content.", + "$value": { + "comfortable": "32px", + "compact": "24px", + }, + }, + "space-scaled-xxs": { + "$description": "The XXS spacing unit which scales between modes. For example: vertical space between form field label and control.", + "$value": { + "comfortable": "4px", + "compact": "2px", + }, + }, + "space-scaled-xxxl": { + "$description": "The XXXL spacing unit which scales between modes. For example: horizontal padding for app layout and split panel content on large screens.", + "$value": { + "comfortable": "40px", + "compact": "32px", + }, + }, + "space-scaled-xxxs": { + "$description": "The XXXS spacing unit which scales between modes.", + "$value": { + "comfortable": "2px", + "compact": "0px", + }, + }, + "space-side-navigation-item-default-gap": { + "$description": "The vertical gap between side navigation items when no item has an icon.", + "$value": { + "comfortable": "0px", + "compact": "0px", + }, + }, + "space-side-navigation-item-icon-gap": { + "$description": "The vertical gap between side navigation items when at least one item has an icon.", + "$value": { + "comfortable": "4px", + "compact": "4px", + }, + }, + "space-static-l": { + "$description": "The static L spacing unit.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-static-m": { + "$description": "The static M spacing unit.", + "$value": { + "comfortable": "16px", + "compact": "16px", + }, + }, + "space-static-s": { + "$description": "The static S spacing unit.", + "$value": { + "comfortable": "12px", + "compact": "12px", + }, + }, + "space-static-xl": { + "$description": "The static XL spacing unit.", + "$value": { + "comfortable": "24px", + "compact": "24px", + }, + }, + "space-static-xs": { + "$description": "The static XS spacing unit.", + "$value": { + "comfortable": "8px", + "compact": "8px", + }, + }, + "space-static-xxl": { + "$description": "The static XXL spacing unit.", + "$value": { + "comfortable": "32px", + "compact": "32px", + }, + }, + "space-static-xxs": { + "$description": "The static XXS spacing unit.", + "$value": { + "comfortable": "4px", + "compact": "4px", + }, + }, + "space-static-xxxl": { + "$description": "The static XXXL spacing unit.", + "$value": { + "comfortable": "40px", + "compact": "40px", + }, + }, + "space-static-xxxs": { + "$description": "The static XXXS spacing unit.", + "$value": { + "comfortable": "2px", + "compact": "2px", + }, + }, + "space-tabs-vertical": { + "$description": "The vertical padding inside tabs.", + "$value": { + "comfortable": "4px", + "compact": "2px", + }, + }, + "space-token-vertical": { + "$description": "The vertical padding inside tokens.", + "$value": { + "comfortable": "4px", + "compact": "2px", + }, + }, + "space-tree-view-indentation": { + "$description": "The indentation of tree view items.", + "$value": { + "comfortable": "24px", + "compact": "24px", + }, + }, + }, + }, "app-layout-toolbar": { "tokens": { "border-radius-action-card-default": { diff --git a/style-dictionary/utils/contexts.ts b/style-dictionary/utils/contexts.ts index 5cdb143be2..cf6d5e53fe 100644 --- a/style-dictionary/utils/contexts.ts +++ b/style-dictionary/utils/contexts.ts @@ -60,6 +60,14 @@ export const createHeaderAlertContext = (tokens: TokenCategory) => { + return { + id: 'alert-top-navigation', + selector: '.awsui-context-top-navigation .awsui-context-alert', + tokens, + }; +}; + export const createAppLayoutToolsDrawerTriggerContext = (tokens: TokenCategory) => { return { id: 'app-layout-tools-drawer-trigger', diff --git a/style-dictionary/visual-refresh/index.ts b/style-dictionary/visual-refresh/index.ts index f838dd584d..4f8d85cc6b 100644 --- a/style-dictionary/visual-refresh/index.ts +++ b/style-dictionary/visual-refresh/index.ts @@ -10,6 +10,7 @@ import { createFlashbarWarningContext, createHeaderAlertContext, createHeaderContext, + createTopNavigationAlertContext, createTopNavigationContext, } from '../utils/contexts.js'; import { StyleDictionary } from '../utils/interfaces.js'; @@ -51,6 +52,7 @@ export async function buildVisualRefresh(builder: ThemeBuilder) { builder.addContext(createFlashbarWarningContext((await import('./contexts/flashbar-warning.js')).tokens)); builder.addContext(createAlertContext((await import('./contexts/alert.js')).tokens)); builder.addContext(createHeaderAlertContext((await import('./contexts/header-alert.js')).tokens)); + builder.addContext(createTopNavigationAlertContext((await import('./contexts/header-alert.js')).tokens)); builder.addContext(createAppLayoutToolbarContext((await import('./contexts/app-layout-toolbar.js')).tokens)); return builder.build();