@hsds/tokens
Advanced tools
Comparing version 2.4.1-prov.0 to 2.4.1-prov.1
@@ -5,2 +5,4 @@ # Changelog | ||
| ## [2.4.1-prov.1](https://github.com/helpscout/hsds/compare/tokens-2.4.1-prov.0...tokens-2.4.1-prov.1) (2024-03-26) | ||
| ## [2.4.1-prov.0](https://github.com/helpscout/hsds/compare/tokens-2.4.0...tokens-2.4.1-prov.0) (2024-03-26) | ||
@@ -7,0 +9,0 @@ |
@@ -6,3 +6,770 @@ "use strict"; | ||
| const tokens = ` | ||
| --hsds-token-accordion-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-accordion-color-text-default: var(--hsds-token-color-text-default); | ||
| --hsds-token-attachment-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-attachment-color-removeButton-hover: var(--hsds-token-color-pink-1000); | ||
| --hsds-token-attachment-color-removeButton-borderHover: var(--hsds-token-color-pink-900); | ||
| --hsds-token-attachment-color-error: var(--hsds-token-color-red-500); | ||
| --hsds-token-attachment-color-brokenButton-text: var(--hsds-token-color-text-light); | ||
| --hsds-token-attachment-color-brokenButton-icon: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-attachment-color-downloadAll-icon: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-attachment-color-downloadAll-iconHover: var(--hsds-token-color-text-light); | ||
| --hsds-token-attachment-color-downloadAll-backgroundHover: var(--hsds-token-color-charcoal-200); | ||
| --hsds-token-avatar-color-initials-text: var(--hsds-token-color-text-light); | ||
| --hsds-token-avatar-color-initials-light: var(--hsds-token-color-charcoal-400); | ||
| --hsds-token-avatarRow-color-counter-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-badge-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-badge-color-fill-text: #ffffffff; | ||
| --hsds-token-badge-color-square-text: var(--hsds-token-color-text-light); | ||
| --hsds-token-badge-color-square-background: var(--hsds-token-color-charcoal-100); | ||
| --hsds-token-badge-color-default: var(--hsds-token-color-charcoal-600); | ||
| --hsds-token-badge-default: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-blankSlate-color-heading: var(--hsds-token-color-text-headline); | ||
| --hsds-token-blankSlate-color-text: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-blankSlate-color-textBold: var(--hsds-token-color-text-default); | ||
| --hsds-token-blankSlate-color-light-background: var(--hsds-token-color-charcoal-100); | ||
| --hsds-token-blankSlate-color-light-text: var(--hsds-token-color-text-light); | ||
| --hsds-token-blankSlate-color-light-textBold: var(--hsds-token-color-text-dark); | ||
| --hsds-token-button-color-blue-main: var(--hsds-token-color-blue-500); | ||
| --hsds-token-button-color-blue-hover: var(--hsds-token-color-blue-600); | ||
| --hsds-token-button-color-blue-text: #ffffffff; | ||
| --hsds-token-button-color-blue-outline-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-button-color-blue-outline-border: var(--hsds-token-color-blue-500); | ||
| --hsds-token-button-color-blue-outline-borderHover: var(--hsds-token-color-blue-500); | ||
| --hsds-token-button-color-blue-outline-text: var(--hsds-token-color-blue-600); | ||
| --hsds-token-button-color-blue-outline-textHover: var(--hsds-token-color-blue-700); | ||
| --hsds-token-button-color-blue-outline-hover: var(--hsds-token-color-blue-100); | ||
| --hsds-token-button-color-blue-outline-hoverIconOnly: var(--hsds-token-color-blue-200); | ||
| --hsds-token-button-color-blue-outline-textSeamlessHover: var(--hsds-token-color-blue-800); | ||
| --hsds-token-button-color-red-main: var(--hsds-token-color-pink-950); | ||
| --hsds-token-button-color-red-hover: var(--hsds-token-color-pink-1000); | ||
| --hsds-token-button-color-red-text: #ffffffff; | ||
| --hsds-token-button-color-red-outline-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-button-color-red-outline-border: var(--hsds-token-color-pink-900); | ||
| --hsds-token-button-color-red-outline-borderHover: var(--hsds-token-color-pink-900); | ||
| --hsds-token-button-color-red-outline-text: var(--hsds-token-color-pink-950); | ||
| --hsds-token-button-color-red-outline-textHover: var(--hsds-token-color-pink-1000); | ||
| --hsds-token-button-color-red-outline-hover: var(--hsds-token-color-pink-100); | ||
| --hsds-token-button-color-red-outline-hoverIconOnly: var(--hsds-token-color-pink-200); | ||
| --hsds-token-button-color-red-outline-textSeamlessHover: var(--hsds-token-color-pink-1000); | ||
| --hsds-token-button-color-green-main: var(--hsds-token-color-green-750); | ||
| --hsds-token-button-color-green-hover: var(--hsds-token-color-green-800); | ||
| --hsds-token-button-color-green-text: #ffffffff; | ||
| --hsds-token-button-color-green-outline-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-button-color-green-outline-border: var(--hsds-token-color-green-500); | ||
| --hsds-token-button-color-green-outline-borderHover: var(--hsds-token-color-green-500); | ||
| --hsds-token-button-color-green-outline-text: var(--hsds-token-color-green-750); | ||
| --hsds-token-button-color-green-outline-textHover: var(--hsds-token-color-green-800); | ||
| --hsds-token-button-color-green-outline-hover: var(--hsds-token-color-green-100); | ||
| --hsds-token-button-color-green-outline-hoverIconOnly: var(--hsds-token-color-green-200); | ||
| --hsds-token-button-color-green-outline-textSeamlessHover: var(--hsds-token-color-green-900); | ||
| --hsds-token-button-color-grey-main: var(--hsds-token-color-charcoal-700); | ||
| --hsds-token-button-color-grey-hover: var(--hsds-token-color-charcoal-800); | ||
| --hsds-token-button-color-grey-text: #ffffffff; | ||
| --hsds-token-button-color-grey-outline-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-button-color-grey-outline-border: var(--hsds-token-color-grey-700); | ||
| --hsds-token-button-color-grey-outline-borderHover: var(--hsds-token-color-grey-800); | ||
| --hsds-token-button-color-grey-outline-text: var(--hsds-token-color-charcoal-700); | ||
| --hsds-token-button-color-grey-outline-textHover: var(--hsds-token-color-charcoal-800); | ||
| --hsds-token-button-color-grey-outline-hover: var(--hsds-token-color-grey-200); | ||
| --hsds-token-button-color-grey-outline-hoverIconOnly: var(--hsds-token-color-grey-300); | ||
| --hsds-token-button-color-grey-outline-textSeamlessHover: var(--hsds-token-color-charcoal-1100); | ||
| --hsds-token-button-color-yellow-main: var(--hsds-token-color-orange-600); | ||
| --hsds-token-button-color-yellow-hover: var(--hsds-token-color-orange-700); | ||
| --hsds-token-button-color-yellow-text: #ffffffff; | ||
| --hsds-token-button-color-yellow-outline-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-button-color-yellow-outline-border: var(--hsds-token-color-yellow-400); | ||
| --hsds-token-button-color-yellow-outline-borderHover: var(--hsds-token-color-yellow-400); | ||
| --hsds-token-button-color-yellow-outline-text: var(--hsds-token-color-orange-600); | ||
| --hsds-token-button-color-yellow-outline-textHover: var(--hsds-token-color-orange-700); | ||
| --hsds-token-button-color-yellow-outline-hover: var(--hsds-token-color-yellow-100); | ||
| --hsds-token-button-color-yellow-outline-hoverIconOnly: var(--hsds-token-color-yellow-100); | ||
| --hsds-token-button-color-yellow-outline-textSeamlessHover: var(--hsds-token-color-orange-700); | ||
| --hsds-token-button-color-disabled-main: var(--hsds-token-color-grey-500); | ||
| --hsds-token-button-color-disabled-text: #ffffffff; | ||
| --hsds-token-button-color-disabled-outline-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-button-color-disabled-outline-border: var(--hsds-token-color-grey-600); | ||
| --hsds-token-button-color-disabled-outline-text: var(--hsds-token-color-grey-800); | ||
| --hsds-token-card-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-checkmarkCard-color-text-heading: var(--hsds-token-color-text-dark); | ||
| --hsds-token-checkmarkCard-color-text-subtitle: var(--hsds-token-color-text-light); | ||
| --hsds-token-checkmarkCard-color-text-disabled: var(--hsds-token-color-text-light); | ||
| --hsds-token-choice-color-disabled: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-closeButton-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-condition-color-selected-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-copyValue-color-icon: var(--hsds-token-color-text-default); | ||
| --hsds-token-copyValue-color-text: var(--hsds-token-color-text-light); | ||
| --hsds-token-copyValue-color-prefix: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-datePicker-color-range-background: var(--hsds-token-color-blue-200); | ||
| --hsds-token-datePicker-color-range-selectedBackground: var(--hsds-token-color-blue-500); | ||
| --hsds-token-datePicker-color-range-text: var(--hsds-token-color-blue-500); | ||
| --hsds-token-datePicker-color-range-textHover: var(--hsds-token-color-blue-600); | ||
| --hsds-token-datePicker-color-currentDay-background: var(--hsds-token-color-grey-400); | ||
| --hsds-token-datePicker-color-currentDay-text: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-datePicker-color-deepNavigator-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-datePicker-color-nav-text: var(--hsds-token-color-text-default); | ||
| --hsds-token-datePicker-color-nav-disabled: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-datePicker-color-weekdays-text: var(--hsds-token-color-text-default); | ||
| --hsds-token-datePicker-color-day-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-datePicker-color-day-disabled: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-datePicker-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-datePicker-color-current-background: var(--hsds-token-color-grey-300); | ||
| --hsds-token-datePicker-color-current-text: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-dropList-color-wrapper-border: var(--hsds-token-color-grey-600); | ||
| --hsds-token-dropList-color-wrapper-text: var(--hsds-token-color-grey-600); | ||
| --hsds-token-dropList-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-dropList-color-input-text: var(--hsds-token-color-charcoal-900); | ||
| --hsds-token-dropList-color-listItem-text: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-dropList-color-listItem-disabled-text: var(--hsds-token-color-charcoal-650); | ||
| --hsds-token-dropList-color-listItem-selected-text: #ffffffff; | ||
| --hsds-token-dropList-color-listItem-selected-background: var(--hsds-token-color-blue-600); | ||
| --hsds-token-dropList-color-listItem-highlighted-text: var(--hsds-token-color-charcoal-1100); | ||
| --hsds-token-dropList-color-listItem-highlighted-background: var(--hsds-token-color-blue-100); | ||
| --hsds-token-dropList-color-listItem-multiple-highlighted-text: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-dropList-color-selectedBadge-border: var(--hsds-token-color-grey-600); | ||
| --hsds-token-dropList-color-selectedBadge-hover: var(--hsds-token-color-blue-500); | ||
| --hsds-token-dropList-color-selectedBadge-disabled-border: var(--hsds-token-color-grey-600); | ||
| --hsds-token-dropList-color-selectedBadge-disabled-shadow: var(--hsds-token-color-grey-500); | ||
| --hsds-token-dropList-color-selectedBadge-disabled-background: var(--hsds-token-color-grey-200); | ||
| --hsds-token-dropList-color-divider: var(--hsds-token-color-grey-500); | ||
| --hsds-token-dropList-color-groupLabel: var(--hsds-token-color-charcoal-600); | ||
| --hsds-token-dropList-color-togglers-navLink-text: var(--hsds-token-color-blue-300); | ||
| --hsds-token-dropList-color-togglers-splitButton-shadowDisabled: var(--hsds-token-button-color-disabled-outline-border); | ||
| --hsds-token-dropList-color-togglers-select-shadow: var(--hsds-token-color-grey-800); | ||
| --hsds-token-dropList-color-togglers-select-text: var(--hsds-token-color-charcoal-900); | ||
| --hsds-token-dropList-color-togglers-select-shadowError: var(--hsds-token-color-state-error-borderColor); | ||
| --hsds-token-dropList-color-togglers-select-disabled: var(--hsds-token-color-charcoal-600); | ||
| --hsds-token-dropList-color-togglers-selectArrow-border: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-editableField-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-emojiPicker-color-icon: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-filteredList-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-filteredList-color-item-text: var(--hsds-token-color-text-light); | ||
| --hsds-token-filteredList-color-badge-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-filteredList-color-separator: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-floatingBar-color-background: var(--hsds-token-color-charcoal-1100); | ||
| --hsds-token-floatingBar-color-button-iconDefault: var(--hsds-token-color-charcoal-600); | ||
| --hsds-token-floatingBar-color-button-iconHover: #ffffffff; | ||
| --hsds-token-floatingBar-color-button-backgroundDefault: transparent; | ||
| --hsds-token-floatingBar-color-button-backgroundHover: var(--hsds-token-color-charcoal-900); | ||
| --hsds-token-floatingBar-color-divider: var(--hsds-token-color-charcoal-800); | ||
| --hsds-token-formField-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-formField-color-label-text: var(--hsds-token-color-text-default); | ||
| --hsds-token-formField-color-itemMain-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-formField-color-itemSecondary-text: var(--hsds-token-color-text-light); | ||
| --hsds-token-heading-color-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-heading-color-small-text: var(--hsds-token-color-text-default); | ||
| --hsds-token-input-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-input-color-text: var(--hsds-token-color-text-default); | ||
| --hsds-token-input-color-addOn-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-input-color-placeholder: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-keyboardBadge-color-text: var(--hsds-token-color-text-default); | ||
| --hsds-token-loadingDots-color-icon: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-message-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-message-color-action: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-message-color-bubble-text: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-message-color-bubble-embedBodyText: var(--hsds-token-color-text-default); | ||
| --hsds-token-message-color-bubble-embedFromText: var(--hsds-token-color-text-default); | ||
| --hsds-token-message-color-embed: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-message-color-media: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-messageCard-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-messageCard-color-subtitle: var(--hsds-token-color-text-light); | ||
| --hsds-token-messageCard-color-body: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-messageCard-color-blockquote: var(--hsds-token-color-text-light); | ||
| --hsds-token-messageCard-color-pre: var(--hsds-token-color-charcoal-1100); | ||
| --hsds-token-messageCard-color-strong: var(--hsds-token-color-charcoal-1100); | ||
| --hsds-token-messageCard-color-articleCard-title: var(--hsds-token-color-text-dark); | ||
| --hsds-token-messageCard-color-articleCard-meta: var(--hsds-token-color-text-light); | ||
| --hsds-token-messageCard-color-articleCard-content: var(--hsds-token-color-text-light); | ||
| --hsds-token-messageCard-color-surveyNps: var(--hsds-token-color-text-light); | ||
| --hsds-token-messageCard-color-survey-feedback: var(--hsds-token-color-text-default); | ||
| --hsds-token-messageCard-color-survey-spinner: var(--hsds-token-color-text-default); | ||
| --hsds-token-messageCard-color-survey-confirmation: var(--hsds-token-color-text-default); | ||
| --hsds-token-messageCard-color-survey-multiple: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-messageCard-color-modal-title: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-messageCard-color-modal-label: var(--hsds-token-color-text-light); | ||
| --hsds-token-messageCard-color-modal-body: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-messageCard-color-modal-closeButton: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-messageCard-color-modal-closeButtonHover: var(--hsds-token-color-text-dark); | ||
| --hsds-token-messageCard-color-nps-poweredby: var(--hsds-token-color-text-light); | ||
| --hsds-token-messageCard-color-nps-question: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-messageCard-color-nps-feedback: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-modal-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-modal-color-header-title: var(--hsds-token-color-text-default); | ||
| --hsds-token-modal-color-header-description: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-nav-color-item-text: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-nav-color-item-hover: var(--hsds-token-color-text-light); | ||
| --hsds-token-nav-color-item-active: var(--hsds-token-color-text-default); | ||
| --hsds-token-nav-color-text: var(--hsds-token-color-text-default); | ||
| --hsds-token-page-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-page-color-header-title: var(--hsds-token-color-text-headline); | ||
| --hsds-token-page-color-header-subtitle: var(--hsds-token-color-text-dark); | ||
| --hsds-token-page-minWidth: 480px; | ||
| --hsds-token-page-maxWidth-default: 700px; | ||
| --hsds-token-page-maxWidth-wide: 1000px; | ||
| --hsds-token-page-actions-margin-bottom: 100px; | ||
| --hsds-token-page-actions-margin-top: 30px; | ||
| --hsds-token-page-actions-spacing: 10px; | ||
| --hsds-token-page-card-radius: 4px; | ||
| --hsds-token-page-card-padding-default-top: 50px; | ||
| --hsds-token-page-card-padding-default-bottom: 65px; | ||
| --hsds-token-page-card-padding-default-side: 100px; | ||
| --hsds-token-page-card-padding-narrow-top: 40px; | ||
| --hsds-token-page-card-padding-narrow-bottom: 50px; | ||
| --hsds-token-page-card-padding-narrow-side: 50px; | ||
| --hsds-token-page-card-padding-wide-top: 60px; | ||
| --hsds-token-page-card-padding-wide-bottom: 80px; | ||
| --hsds-token-page-card-padding-wide-side: 175px; | ||
| --hsds-token-pagination-color-information: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-pagination-color-range: var(--hsds-token-color-text-dark); | ||
| --hsds-token-pagination-color-buttonOutlined: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-popover-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-popover-color-heading: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-radioCard-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-radioCard-color-icon: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-radioCard-color-checked: var(--hsds-token-color-text-dark); | ||
| --hsds-token-radioCard-color-heading: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-radioCard-color-content: var(--hsds-token-color-text-default); | ||
| --hsds-token-radioCard-color-contentWithHeading: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-scrollable-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-scrollableContainer-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-sidePanel-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-sidePanel-color-heading: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-sidePanel-color-subheading: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-sidePanel-color-close: var(--hsds-token-color-text-light); | ||
| --hsds-token-sidePanel-color-closeHover: var(--hsds-token-color-text-dark); | ||
| --hsds-token-simpleModal-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-simpleModal-color-heading: var(--hsds-token-color-text-headline); | ||
| --hsds-token-simpleModal-color-confirmationBody: var(--hsds-token-color-text-dark); | ||
| --hsds-token-sortable-color-dragHandler-default: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-sortable-color-dragHandler-active: var(--hsds-token-color-text-light); | ||
| --hsds-token-sortable-color-dragHandler-disabled: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-statusBar-color-light-error-border: var(--hsds-token-color-red-300); | ||
| --hsds-token-statusBar-color-light-info-border: var(--hsds-token-color-blue-300); | ||
| --hsds-token-statusBar-color-light-success-border: var(--hsds-token-color-green-300); | ||
| --hsds-token-statusBar-color-light-warning-border: var(--hsds-token-color-yellow-300); | ||
| --hsds-token-statusBar-color-bold-error-border: var(--hsds-token-color-red-600); | ||
| --hsds-token-statusBar-color-bold-error-button: var(--hsds-token-color-red-700); | ||
| --hsds-token-statusBar-color-bold-info-border: var(--hsds-token-color-blue-600); | ||
| --hsds-token-statusBar-color-bold-info-button: var(--hsds-token-color-blue-700); | ||
| --hsds-token-statusBar-color-bold-success-border: var(--hsds-token-color-green-600); | ||
| --hsds-token-statusBar-color-bold-success-button: var(--hsds-token-color-green-700); | ||
| --hsds-token-statusBar-color-bold-warning-border: var(--hsds-token-color-yellow-600); | ||
| --hsds-token-statusBar-color-bold-warning-button: var(--hsds-token-color-yellow-700); | ||
| --hsds-token-statusDot-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-statusDot-color-light-default: var(--hsds-token-color-grey-600); | ||
| --hsds-token-statusDot-color-light-active: var(--hsds-token-color-green-500); | ||
| --hsds-token-statusDot-color-light-inactive: var(--hsds-token-color-grey-600); | ||
| --hsds-token-statusDot-color-light-offline: var(--hsds-token-color-red-500); | ||
| --hsds-token-statusDot-color-light-busy: var(--hsds-token-color-yellow-500); | ||
| --hsds-token-statusDot-color-light-custom: var(--hsds-token-color-purple-400); | ||
| --hsds-token-statusDot-color-dark-default: var(--hsds-token-color-grey-600); | ||
| --hsds-token-statusDot-color-dark-active: var(--hsds-token-color-green-500); | ||
| --hsds-token-statusDot-color-dark-inactive: var(--hsds-token-color-grey-600); | ||
| --hsds-token-statusDot-color-dark-offline: var(--hsds-token-color-red-500); | ||
| --hsds-token-statusDot-color-dark-busy: var(--hsds-token-color-yellow-500); | ||
| --hsds-token-statusDot-color-dark-custom: var(--hsds-token-color-purple-400); | ||
| --hsds-token-stepper-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-switchComponent-color-error: var(--hsds-token-color-pink-900); | ||
| --hsds-token-switchComponent-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-tabBar-color-secContent: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-tabBar-color-strong: var(--hsds-token-color-text-dark); | ||
| --hsds-token-table-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-table-color-typeAction: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-table-color-sortableCell: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-tag-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-tag-color-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-tag-color-showAll: var(--hsds-token-color-text-dark); | ||
| --hsds-token-tag-color-clearAll: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-tag-color-clearAllHover: var(--hsds-token-color-text-light); | ||
| --hsds-token-timeline-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-toolbar-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-typingDots-color-icon: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-verificationCode-color-error: var(--hsds-token-color-pink-900); | ||
| --hsds-token-verificationCode-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-verificationCode-color-digit: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-color-blue-100: #F3FBFF; | ||
| --hsds-token-color-blue-100-rgb: 243,251,255; | ||
| --hsds-token-color-blue-200: #D6EDFF; | ||
| --hsds-token-color-blue-200-rgb: 214,237,255; | ||
| --hsds-token-color-blue-300: #A0D4FF; | ||
| --hsds-token-color-blue-300-rgb: 160,212,255; | ||
| --hsds-token-color-blue-400: #57B0FB; | ||
| --hsds-token-color-blue-400-rgb: 87,176,251; | ||
| --hsds-token-color-blue-500: #1292EE; | ||
| --hsds-token-color-blue-500-rgb: 18,146,238; | ||
| --hsds-token-color-blue-600: #0077CC; | ||
| --hsds-token-color-blue-600-rgb: 0,119,204; | ||
| --hsds-token-color-blue-700: #005CA4; | ||
| --hsds-token-color-blue-700-rgb: 0,92,164; | ||
| --hsds-token-color-blue-800: #034077; | ||
| --hsds-token-color-blue-800-rgb: 3,64,119; | ||
| --hsds-token-color-blue-900: #002651; | ||
| --hsds-token-color-blue-900-rgb: 0,38,81; | ||
| --hsds-token-color-blue-default: var(--hsds-token-color-blue-500); | ||
| --hsds-token-color-blue-accent: var(--hsds-token-color-blue-500); | ||
| --hsds-token-color-charcoal-100: #f9fafa; | ||
| --hsds-token-color-charcoal-100-rgb: 249,250,250; | ||
| --hsds-token-color-charcoal-200: #f1f3f5; | ||
| --hsds-token-color-charcoal-200-rgb: 241,243,245; | ||
| --hsds-token-color-charcoal-300: #e1e7eb; | ||
| --hsds-token-color-charcoal-300-rgb: 225,231,235; | ||
| --hsds-token-color-charcoal-400: #ccd6de; | ||
| --hsds-token-color-charcoal-400-rgb: 204,214,222; | ||
| --hsds-token-color-charcoal-500: #C5CED6; | ||
| --hsds-token-color-charcoal-500-rgb: 197,206,214; | ||
| --hsds-token-color-charcoal-530: #B7C2CC; | ||
| --hsds-token-color-charcoal-530-rgb: 183,194,204; | ||
| --hsds-token-color-charcoal-550: #A5B2BD; | ||
| --hsds-token-color-charcoal-550-rgb: 165,178,189; | ||
| --hsds-token-color-charcoal-600: #93A1B0; | ||
| --hsds-token-color-charcoal-600-rgb: 147,161,176; | ||
| --hsds-token-color-charcoal-650: #748494; | ||
| --hsds-token-color-charcoal-650-rgb: 116,132,148; | ||
| --hsds-token-color-charcoal-700: #556575; | ||
| --hsds-token-color-charcoal-700-rgb: 85,101,117; | ||
| --hsds-token-color-charcoal-800: #405261; | ||
| --hsds-token-color-charcoal-800-rgb: 64,82,97; | ||
| --hsds-token-color-charcoal-900: #314351; | ||
| --hsds-token-color-charcoal-900-rgb: 49,67,81; | ||
| --hsds-token-color-charcoal-1000: #253642; | ||
| --hsds-token-color-charcoal-1000-rgb: 37,54,66; | ||
| --hsds-token-color-charcoal-1100: #1d2b36; | ||
| --hsds-token-color-charcoal-1100-rgb: 29,43,54; | ||
| --hsds-token-color-charcoal-1200: #1d2b36; | ||
| --hsds-token-color-charcoal-1200-rgb: 29,43,54; | ||
| --hsds-token-color-charcoal-default: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-color-charcoal-accent: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-color-grey-200: var(--hsds-token-color-charcoal-100); | ||
| --hsds-token-color-grey-200-rgb: var(--hsds-token-color-charcoal-100-rgb); | ||
| --hsds-token-color-grey-300: var(--hsds-token-color-charcoal-200); | ||
| --hsds-token-color-grey-300-rgb: var(--hsds-token-color-charcoal-200-rgb); | ||
| --hsds-token-color-grey-400: var(--hsds-token-color-charcoal-300); | ||
| --hsds-token-color-grey-400-rgb: var(--hsds-token-color-charcoal-300-rgb); | ||
| --hsds-token-color-grey-500: var(--hsds-token-color-charcoal-400); | ||
| --hsds-token-color-grey-500-rgb: var(--hsds-token-color-charcoal-400-rgb); | ||
| --hsds-token-color-grey-600: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-color-grey-600-rgb: var(--hsds-token-color-charcoal-500-rgb); | ||
| --hsds-token-color-grey-700: var(--hsds-token-color-charcoal-530); | ||
| --hsds-token-color-grey-700-rgb: var(--hsds-token-color-charcoal-530-rgb); | ||
| --hsds-token-color-grey-800: var(--hsds-token-color-charcoal-550); | ||
| --hsds-token-color-grey-800-rgb: var(--hsds-token-color-charcoal-550-rgb); | ||
| --hsds-token-color-grey-default: var(--hsds-token-color-charcoal-400); | ||
| --hsds-token-color-grey-accent: var(--hsds-token-color-charcoal-400); | ||
| --hsds-token-color-indigo-100: #F2F6FF; | ||
| --hsds-token-color-indigo-100-rgb: 242,246,255; | ||
| --hsds-token-color-indigo-200: #DFE7FF; | ||
| --hsds-token-color-indigo-200-rgb: 223,231,255; | ||
| --hsds-token-color-indigo-300: #B2C8FB; | ||
| --hsds-token-color-indigo-300-rgb: 178,200,251; | ||
| --hsds-token-color-indigo-400: #79A1F8; | ||
| --hsds-token-color-indigo-400-rgb: 121,161,248; | ||
| --hsds-token-color-indigo-500: #527CEB; | ||
| --hsds-token-color-indigo-500-rgb: 82,124,235; | ||
| --hsds-token-color-indigo-600: #3B64D2; | ||
| --hsds-token-color-indigo-600-rgb: 59,100,210; | ||
| --hsds-token-color-indigo-700: #2549A8; | ||
| --hsds-token-color-indigo-700-rgb: 37,73,168; | ||
| --hsds-token-color-indigo-800: #16337F; | ||
| --hsds-token-color-indigo-800-rgb: 22,51,127; | ||
| --hsds-token-color-indigo-900: #071E57; | ||
| --hsds-token-color-indigo-900-rgb: 7,30,87; | ||
| --hsds-token-color-indigo-1000: var(--hsds-token-color-cobalt-900); | ||
| --hsds-token-color-indigo-1000-rgb: var(--hsds-token-color-cobalt-900-rgb); | ||
| --hsds-token-color-indigo-default: var(--hsds-token-color-indigo-500); | ||
| --hsds-token-color-indigo-accent: var(--hsds-token-color-indigo-500); | ||
| --hsds-token-color-lavender-100: #F9F9FF; | ||
| --hsds-token-color-lavender-100-rgb: 249,249,255; | ||
| --hsds-token-color-lavender-200: #EBECFF; | ||
| --hsds-token-color-lavender-200-rgb: 235,236,255; | ||
| --hsds-token-color-lavender-300: #D9DCFD; | ||
| --hsds-token-color-lavender-300-rgb: 217,220,253; | ||
| --hsds-token-color-lavender-400: #B9BEFF; | ||
| --hsds-token-color-lavender-400-rgb: 185,190,255; | ||
| --hsds-token-color-lavender-500: #9FA6FF; | ||
| --hsds-token-color-lavender-500-rgb: 159,166,255; | ||
| --hsds-token-color-lavender-600: #818AEC; | ||
| --hsds-token-color-lavender-600-rgb: 129,138,236; | ||
| --hsds-token-color-lavender-700: #6269C5; | ||
| --hsds-token-color-lavender-700-rgb: 98,105,197; | ||
| --hsds-token-color-lavender-800: #404996; | ||
| --hsds-token-color-lavender-800-rgb: 64,73,150; | ||
| --hsds-token-color-lavender-900: #232A5C; | ||
| --hsds-token-color-lavender-900-rgb: 35,42,92; | ||
| --hsds-token-color-lavender-default: var(--hsds-token-color-lavender-500); | ||
| --hsds-token-color-lavender-accent: var(--hsds-token-color-lavender-500); | ||
| --hsds-token-color-pink-100: #FFF9FB; | ||
| --hsds-token-color-pink-100-rgb: 255,249,251; | ||
| --hsds-token-color-pink-200: #FFEEF1; | ||
| --hsds-token-color-pink-200-rgb: 255,238,241; | ||
| --hsds-token-color-pink-300: #FFE1E7; | ||
| --hsds-token-color-pink-300-rgb: 255,225,231; | ||
| --hsds-token-color-pink-400: #FFCCD7; | ||
| --hsds-token-color-pink-400-rgb: 255,204,215; | ||
| --hsds-token-color-pink-500: #FFB3C3; | ||
| --hsds-token-color-pink-500-rgb: 255,179,195; | ||
| --hsds-token-color-pink-600: #FD9AAE; | ||
| --hsds-token-color-pink-600-rgb: 253,154,174; | ||
| --hsds-token-color-pink-700: #FD9AAE; | ||
| --hsds-token-color-pink-700-rgb: 253,154,174; | ||
| --hsds-token-color-pink-800: #FC5D7D; | ||
| --hsds-token-color-pink-800-rgb: 252,93,125; | ||
| --hsds-token-color-pink-900: #F23459; | ||
| --hsds-token-color-pink-900-rgb: 242,52,89; | ||
| --hsds-token-color-pink-950: #E9074B; | ||
| --hsds-token-color-pink-950-rgb: 233,7,75; | ||
| --hsds-token-color-pink-1000: #C5003B; | ||
| --hsds-token-color-pink-1000-rgb: 197,0,59; | ||
| --hsds-token-color-pink-default: var(--hsds-token-color-pink-500); | ||
| --hsds-token-color-pink-accent: var(--hsds-token-color-pink-500); | ||
| --hsds-token-color-green-100: #F5FFF9; | ||
| --hsds-token-color-green-100-rgb: 245,255,249; | ||
| --hsds-token-color-green-200: #E3FBEE; | ||
| --hsds-token-color-green-200-rgb: 227,251,238; | ||
| --hsds-token-color-green-300: #C2F0D7; | ||
| --hsds-token-color-green-300-rgb: 194,240,215; | ||
| --hsds-token-color-green-400: #87DBAE; | ||
| --hsds-token-color-green-400-rgb: 135,219,174; | ||
| --hsds-token-color-green-500: #56C288; | ||
| --hsds-token-color-green-500-rgb: 86,194,136; | ||
| --hsds-token-color-green-600: #39AC6E; | ||
| --hsds-token-color-green-600-rgb: 57,172,110; | ||
| --hsds-token-color-green-700: #268C55; | ||
| --hsds-token-color-green-700-rgb: 38,140,85; | ||
| --hsds-token-color-green-750: #248451; | ||
| --hsds-token-color-green-750-rgb: 36,132,81; | ||
| --hsds-token-color-green-800: #106236; | ||
| --hsds-token-color-green-800-rgb: 16,98,54; | ||
| --hsds-token-color-green-900: #003C1C; | ||
| --hsds-token-color-green-900-rgb: 0,60,28; | ||
| --hsds-token-color-green-1000: #222923ff; | ||
| --hsds-token-color-green-1000-rgb: 34,41,35; | ||
| --hsds-token-color-green-accent: var(--hsds-token-color-green-500); | ||
| --hsds-token-color-green-default: var(--hsds-token-color-green-500); | ||
| --hsds-token-color-yellow-50: #FFFBF3; | ||
| --hsds-token-color-yellow-100: #FFF9EF; | ||
| --hsds-token-color-yellow-100-rgb: 255,249,239; | ||
| --hsds-token-color-yellow-200: #FFF2D7; | ||
| --hsds-token-color-yellow-200-rgb: 255,242,215; | ||
| --hsds-token-color-yellow-300: #FFE7B8; | ||
| --hsds-token-color-yellow-300-rgb: 255,231,184; | ||
| --hsds-token-color-yellow-400: #FDD88E; | ||
| --hsds-token-color-yellow-400-rgb: 253,216,142; | ||
| --hsds-token-color-yellow-500: #FFC555; | ||
| --hsds-token-color-yellow-500-rgb: 255,197,85; | ||
| --hsds-token-color-yellow-600: #FAB347; | ||
| --hsds-token-color-yellow-600-rgb: 250,179,71; | ||
| --hsds-token-color-yellow-700: #E89635; | ||
| --hsds-token-color-yellow-700-rgb: 232,150,53; | ||
| --hsds-token-color-yellow-800: #CE7129; | ||
| --hsds-token-color-yellow-800-rgb: 206,113,41; | ||
| --hsds-token-color-yellow-900: #B24319; | ||
| --hsds-token-color-yellow-900-rgb: 178,67,25; | ||
| --hsds-token-color-yellow-950: #84142D; | ||
| --hsds-token-color-yellow-950-rgb: 132,20,45; | ||
| --hsds-token-color-yellow-1000: #2b261dff; | ||
| --hsds-token-color-yellow-1000-rgb: 43,38,29; | ||
| --hsds-token-color-yellow-accent: var(--hsds-token-color-yellow-500); | ||
| --hsds-token-color-yellow-default: var(--hsds-token-color-yellow-500); | ||
| --hsds-token-color-link-default: var(--hsds-token-color-blue-600); | ||
| --hsds-token-color-link-base: var(--hsds-token-color-blue-600); | ||
| --hsds-token-color-link-hover: var(--hsds-token-color-blue-500); | ||
| --hsds-token-color-link-active: var(--hsds-token-color-blue-500); | ||
| --hsds-token-color-link-focus: var(--hsds-token-color-blue-500); | ||
| --hsds-token-color-link-disabled: var(--hsds-token-color-grey-800); | ||
| --hsds-token-color-focusRing-default-innerColor: var(--hsds-token-color-blue-500); | ||
| --hsds-token-color-focusRing-default-outerColor: var(--hsds-token-color-blue-500); | ||
| --hsds-token-color-focusRing-default-innerColorOverDark: var(--hsds-token-color-blue-500); | ||
| --hsds-token-color-focusRing-default-outerColorOverDark: var(--hsds-token-color-blue-500); | ||
| --hsds-token-color-focusRing-error-innerColor: var(--hsds-token-color-state-error-borderColor); | ||
| --hsds-token-color-focusRing-error-outerColor: var(--hsds-token-color-state-error-borderColor); | ||
| --hsds-token-color-focusRing-error-innerColorOverDark: var(--hsds-token-color-state-error-borderColor); | ||
| --hsds-token-color-focusRing-error-outerColorOverDark: var(--hsds-token-color-state-error-borderColor); | ||
| --hsds-token-color-focusRing-warning-innerColor: var(--hsds-token-color-state-warning-borderColor); | ||
| --hsds-token-color-focusRing-warning-outerColor: var(--hsds-token-color-state-warning-borderColor); | ||
| --hsds-token-color-focusRing-warning-innerColorOverDark: var(--hsds-token-color-state-warning-borderColor); | ||
| --hsds-token-color-focusRing-warning-outerColorOverDark: var(--hsds-token-color-state-warning-borderColor); | ||
| --hsds-token-color-focusRing-success-innerColor: var(--hsds-token-color-state-success-borderColor); | ||
| --hsds-token-color-focusRing-success-outerColor: var(--hsds-token-color-state-success-borderColor); | ||
| --hsds-token-color-focusRing-success-innerColorOverDark: var(--hsds-token-color-state-success-borderColor); | ||
| --hsds-token-color-focusRing-success-outerColorOverDark: var(--hsds-token-color-state-success-borderColor); | ||
| --hsds-token-color-text-default: currentColor; | ||
| --hsds-token-color-text-headline: var(--hsds-token-color-charcoal-1200); | ||
| --hsds-token-color-text-dark: var(--hsds-token-color-charcoal-900); | ||
| --hsds-token-color-text-light: var(--hsds-token-color-charcoal-700); | ||
| --hsds-token-color-text-disabled: var(--hsds-token-color-charcoal-600); | ||
| --hsds-token-color-text-subtle: var(--hsds-token-color-charcoal-800); | ||
| --hsds-token-color-text-slightlyMuted: var(--hsds-token-color-charcoal-700); | ||
| --hsds-token-color-text-muted: var(--hsds-token-color-charcoal-650); | ||
| --hsds-token-color-text-faint: var(--hsds-token-color-charcoal-600); | ||
| --hsds-token-color-text-extraMuted: var(--hsds-token-color-grey-600); | ||
| --hsds-token-color-border-default: var(--hsds-token-color-grey-400); | ||
| --hsds-token-color-border-divider: var(--hsds-token-color-grey-300); | ||
| --hsds-token-color-border-ui-default: var(--hsds-token-color-grey-500); | ||
| --hsds-token-color-border-ui-dark: var(--hsds-token-color-grey-600); | ||
| --hsds-token-color-state-error-text: var(--hsds-token-color-red-500); | ||
| --hsds-token-color-state-error-backgroundDark: var(--hsds-token-color-red-500); | ||
| --hsds-token-color-state-error-icon: var(--hsds-token-color-red-500); | ||
| --hsds-token-color-state-error-borderColor: var(--hsds-token-color-red-500); | ||
| --hsds-token-color-state-error-backgroundLight: var(--hsds-token-color-red-200); | ||
| --hsds-token-color-state-error-default: var(--hsds-token-color-red-500); | ||
| --hsds-token-color-state-error-color: var(--hsds-token-color-red-500); | ||
| --hsds-token-color-state-error-backgroundColor: var(--hsds-token-color-red-200); | ||
| --hsds-token-color-state-info-text: var(--hsds-token-color-blue-500); | ||
| --hsds-token-color-state-info-backgroundDark: var(--hsds-token-color-state-info-borderColor); | ||
| --hsds-token-color-state-info-icon: var(--hsds-token-color-blue-500); | ||
| --hsds-token-color-state-info-borderColor: var(--hsds-token-color-blue-500); | ||
| --hsds-token-color-state-info-backgroundLight: var(--hsds-token-color-blue-200); | ||
| --hsds-token-color-state-info-default: var(--hsds-token-color-blue-500); | ||
| --hsds-token-color-state-info-color: var(--hsds-token-color-blue-500); | ||
| --hsds-token-color-state-info-backgroundColor: var(--hsds-token-color-blue-200); | ||
| --hsds-token-color-state-success-text: var(--hsds-token-color-green-500); | ||
| --hsds-token-color-state-success-backgroundDark: var(--hsds-token-color-state-success-borderColor); | ||
| --hsds-token-color-state-success-icon: var(--hsds-token-color-green-500); | ||
| --hsds-token-color-state-success-borderColor: var(--hsds-token-color-green-500); | ||
| --hsds-token-color-state-success-backgroundLight: var(--hsds-token-color-green-200); | ||
| --hsds-token-color-state-success-default: var(--hsds-token-color-green-500); | ||
| --hsds-token-color-state-success-color: var(--hsds-token-color-green-500); | ||
| --hsds-token-color-state-success-backgroundColor: var(--hsds-token-color-green-200); | ||
| --hsds-token-color-state-warning-text: var(--hsds-token-color-yellow-500); | ||
| --hsds-token-color-state-warning-backgroundDark: var(--hsds-token-color-state-warning-borderColor); | ||
| --hsds-token-color-state-warning-icon: var(--hsds-token-color-yellow-500); | ||
| --hsds-token-color-state-warning-borderColor: var(--hsds-token-color-yellow-500); | ||
| --hsds-token-color-state-warning-backgroundLight: var(--hsds-token-color-yellow-200); | ||
| --hsds-token-color-state-warning-color: var(--hsds-token-color-yellow-500); | ||
| --hsds-token-color-state-warning-default: var(--hsds-token-color-yellow-500); | ||
| --hsds-token-color-state-warning-backgroundColor: var(--hsds-token-color-yellow-200); | ||
| --hsds-token-color-state-danger-default: var(--hsds-token-color-state-error-default); | ||
| --hsds-token-color-state-danger-backgroundLight: var(--hsds-token-color-state-error-backgroundColor); | ||
| --hsds-token-color-state-danger-backgroundDark: var(--hsds-token-color-state-error-borderColor); | ||
| --hsds-token-color-state-danger-borderColor: var(--hsds-token-color-state-error-borderColor); | ||
| --hsds-token-color-state-danger-color: var(--hsds-token-color-state-error-borderColor); | ||
| --hsds-token-color-state-danger-text: var(--hsds-token-color-state-error-borderColor); | ||
| --hsds-token-color-state-danger-icon: var(--hsds-token-color-state-error-borderColor); | ||
| --hsds-token-color-state-danger-backgroundColor: var(--hsds-token-color-state-error-backgroundColor); | ||
| --hsds-token-color-background-surface: #ffffffff; | ||
| --hsds-token-color-background-body: var(--hsds-token-color-grey-300); | ||
| --hsds-token-color-red-100: #fef7f6; | ||
| --hsds-token-color-red-100-rgb: 254,247,246; | ||
| --hsds-token-color-red-200: #ffe3e2; | ||
| --hsds-token-color-red-200-rgb: 255,227,226; | ||
| --hsds-token-color-red-300: #ffa2a2; | ||
| --hsds-token-color-red-300-rgb: 255,162,162; | ||
| --hsds-token-color-red-400: #f45b55; | ||
| --hsds-token-color-red-400-rgb: 244,91,85; | ||
| --hsds-token-color-red-500: #e52f28; | ||
| --hsds-token-color-red-500-rgb: 229,47,40; | ||
| --hsds-token-color-red-600: #d21b14; | ||
| --hsds-token-color-red-600-rgb: 210,27,20; | ||
| --hsds-token-color-red-700: #ba1f19; | ||
| --hsds-token-color-red-700-rgb: 186,31,25; | ||
| --hsds-token-color-red-800: #9d1f1a; | ||
| --hsds-token-color-red-800-rgb: 157,31,26; | ||
| --hsds-token-color-red-900: #731814; | ||
| --hsds-token-color-red-900-rgb: 115,24,20; | ||
| --hsds-token-color-red-1000: #2b2123ff; | ||
| --hsds-token-color-red-1000-rgb: 43,33,35; | ||
| --hsds-token-color-red-accent: var(--hsds-token-color-red-500); | ||
| --hsds-token-color-red-default: var(--hsds-token-color-red-500); | ||
| --hsds-token-color-orange-100: #fff8f2; | ||
| --hsds-token-color-orange-100-rgb: 255,248,242; | ||
| --hsds-token-color-orange-200: #ffead8; | ||
| --hsds-token-color-orange-200-rgb: 255,234,216; | ||
| --hsds-token-color-orange-300: #ffd3ae; | ||
| --hsds-token-color-orange-300-rgb: 255,211,174; | ||
| --hsds-token-color-orange-400: #ffa75a; | ||
| --hsds-token-color-orange-400-rgb: 255,167,90; | ||
| --hsds-token-color-orange-500: #ff9139; | ||
| --hsds-token-color-orange-500-rgb: 255,145,57; | ||
| --hsds-token-color-orange-600: #e87800; | ||
| --hsds-token-color-orange-600-rgb: 232,120,0; | ||
| --hsds-token-color-orange-700: #c76400; | ||
| --hsds-token-color-orange-700-rgb: 199,100,0; | ||
| --hsds-token-color-orange-800: #a45300; | ||
| --hsds-token-color-orange-800-rgb: 164,83,0; | ||
| --hsds-token-color-orange-900: #813c00; | ||
| --hsds-token-color-orange-900-rgb: 129,60,0; | ||
| --hsds-token-color-orange-1000: #2b241dff; | ||
| --hsds-token-color-orange-1000-rgb: 43,36,29; | ||
| --hsds-token-color-orange-accent: var(--hsds-token-color-orange-500); | ||
| --hsds-token-color-orange-default: var(--hsds-token-color-orange-500); | ||
| --hsds-token-color-slate-100: #f2f9fcff; | ||
| --hsds-token-color-slate-100-rgb: 242,249,252; | ||
| --hsds-token-color-slate-200: #e1eef5ff; | ||
| --hsds-token-color-slate-200-rgb: 225,238,245; | ||
| --hsds-token-color-slate-300: #ccdee8ff; | ||
| --hsds-token-color-slate-300-rgb: 204,222,232; | ||
| --hsds-token-color-slate-400: #a9c4d4ff; | ||
| --hsds-token-color-slate-400-rgb: 169,196,212; | ||
| --hsds-token-color-slate-500: #82a7baff; | ||
| --hsds-token-color-slate-500-rgb: 130,167,186; | ||
| --hsds-token-color-slate-600: #658b9eff; | ||
| --hsds-token-color-slate-600-rgb: 101,139,158; | ||
| --hsds-token-color-slate-700: #486878ff; | ||
| --hsds-token-color-slate-700-rgb: 72,104,120; | ||
| --hsds-token-color-slate-800: #344852ff; | ||
| --hsds-token-color-slate-800-rgb: 52,72,82; | ||
| --hsds-token-color-slate-900: #283338ff; | ||
| --hsds-token-color-slate-900-rgb: 40,51,56; | ||
| --hsds-token-color-slate-1000: #1f2426ff; | ||
| --hsds-token-color-slate-1000-rgb: 31,36,38; | ||
| --hsds-token-color-slate-accent: #47c2ffff; | ||
| --hsds-token-color-cobalt-100: #ebf5ffff; | ||
| --hsds-token-color-cobalt-100-rgb: 235,245,255; | ||
| --hsds-token-color-cobalt-200: #d1e8ffff; | ||
| --hsds-token-color-cobalt-200-rgb: 209,232,255; | ||
| --hsds-token-color-cobalt-300: #9ecbffff; | ||
| --hsds-token-color-cobalt-300-rgb: 158,203,255; | ||
| --hsds-token-color-cobalt-400: #66a3ffff; | ||
| --hsds-token-color-cobalt-400-rgb: 102,163,255; | ||
| --hsds-token-color-cobalt-500: #4176faff; | ||
| --hsds-token-color-cobalt-500-rgb: 65,118,250; | ||
| --hsds-token-color-cobalt-600: #304ddbff; | ||
| --hsds-token-color-cobalt-600-rgb: 48,77,219; | ||
| --hsds-token-color-cobalt-700: #263aadff; | ||
| --hsds-token-color-cobalt-700-rgb: 38,58,173; | ||
| --hsds-token-color-cobalt-800: #1c2674ff; | ||
| --hsds-token-color-cobalt-800-rgb: 28,38,116; | ||
| --hsds-token-color-cobalt-900: #171952ff; | ||
| --hsds-token-color-cobalt-900-rgb: 23,25,82; | ||
| --hsds-token-color-cobalt-1000: #0e0e33ff; | ||
| --hsds-token-color-cobalt-1000-rgb: 14,14,51; | ||
| --hsds-token-color-cobalt-accent: #47a3ffff; | ||
| --hsds-token-color-purple-100: #fbfbfe; | ||
| --hsds-token-color-purple-100-rgb: 251,251,254; | ||
| --hsds-token-color-purple-200: #eaeafc; | ||
| --hsds-token-color-purple-200-rgb: 234,234,252; | ||
| --hsds-token-color-purple-300: #d1d2f6; | ||
| --hsds-token-color-purple-300-rgb: 209,210,246; | ||
| --hsds-token-color-purple-400: #a3a4f3; | ||
| --hsds-token-color-purple-400-rgb: 163,164,243; | ||
| --hsds-token-color-purple-500: #7e80e7; | ||
| --hsds-token-color-purple-500-rgb: 126,128,231; | ||
| --hsds-token-color-purple-600: #696aca; | ||
| --hsds-token-color-purple-600-rgb: 105,106,202; | ||
| --hsds-token-color-purple-700: #585b9e; | ||
| --hsds-token-color-purple-700-rgb: 88,91,158; | ||
| --hsds-token-color-purple-800: #45467d; | ||
| --hsds-token-color-purple-800-rgb: 69,70,125; | ||
| --hsds-token-color-purple-900: #383966; | ||
| --hsds-token-color-purple-900-rgb: 56,57,102; | ||
| --hsds-token-color-purple-1000: #271f2eff; | ||
| --hsds-token-color-purple-1000-rgb: 39,31,46; | ||
| --hsds-token-color-purple-accent: var(--hsds-token-color-purple-500); | ||
| --hsds-token-color-purple-default: var(--hsds-token-color-purple-500); | ||
| --hsds-token-color-magenta-100: #fff2f4ff; | ||
| --hsds-token-color-magenta-100-rgb: 255,242,244; | ||
| --hsds-token-color-magenta-200: #ffe5eaff; | ||
| --hsds-token-color-magenta-200-rgb: 255,229,234; | ||
| --hsds-token-color-magenta-300: #ffc7d3ff; | ||
| --hsds-token-color-magenta-300-rgb: 255,199,211; | ||
| --hsds-token-color-magenta-400: #e5859fff; | ||
| --hsds-token-color-magenta-400-rgb: 229,133,159; | ||
| --hsds-token-color-magenta-500: #bf5878ff; | ||
| --hsds-token-color-magenta-500-rgb: 191,88,120; | ||
| --hsds-token-color-magenta-600: #a34b6bff; | ||
| --hsds-token-color-magenta-600-rgb: 163,75,107; | ||
| --hsds-token-color-magenta-700: #863e5cff; | ||
| --hsds-token-color-magenta-700-rgb: 134,62,92; | ||
| --hsds-token-color-magenta-800: #5e3146ff; | ||
| --hsds-token-color-magenta-800-rgb: 94,49,70; | ||
| --hsds-token-color-magenta-900: #3d2531ff; | ||
| --hsds-token-color-magenta-900-rgb: 61,37,49; | ||
| --hsds-token-color-magenta-1000: #2e2126ff; | ||
| --hsds-token-color-magenta-1000-rgb: 46,33,38; | ||
| --hsds-token-color-magenta-accent: #ff5caaff; | ||
| --hsds-token-color-clay-100: #faf8f7ff; | ||
| --hsds-token-color-clay-100-rgb: 250,248,247; | ||
| --hsds-token-color-clay-200: #f5f2f0ff; | ||
| --hsds-token-color-clay-200-rgb: 245,242,240; | ||
| --hsds-token-color-clay-300: #ede8e6ff; | ||
| --hsds-token-color-clay-300-rgb: 237,232,230; | ||
| --hsds-token-color-clay-400: #ded5d1ff; | ||
| --hsds-token-color-clay-400-rgb: 222,213,209; | ||
| --hsds-token-color-clay-500: #c2b4acff; | ||
| --hsds-token-color-clay-500-rgb: 194,180,172; | ||
| --hsds-token-color-clay-600: #9e8f88ff; | ||
| --hsds-token-color-clay-600-rgb: 158,143,136; | ||
| --hsds-token-color-clay-700: #8a7b74ff; | ||
| --hsds-token-color-clay-700-rgb: 138,123,116; | ||
| --hsds-token-color-clay-800: #756963ff; | ||
| --hsds-token-color-clay-800-rgb: 117,105,99; | ||
| --hsds-token-color-clay-900: #574f4bff; | ||
| --hsds-token-color-clay-900-rgb: 87,79,75; | ||
| --hsds-token-color-clay-1000: #4a4441ff; | ||
| --hsds-token-color-clay-1000-rgb: 74,68,65; | ||
| --hsds-token-color-clay-1100: #33302eff; | ||
| --hsds-token-color-clay-1100-rgb: 51,48,46; | ||
| --hsds-token-color-clay-1200: #262423ff; | ||
| --hsds-token-color-clay-1200-rgb: 38,36,35; | ||
| --hsds-token-color-functional-link-default: var(--hsds-token-color-cobalt-600); | ||
| --hsds-token-color-functional-link-hovered: var(--hsds-token-color-cobalt-700); | ||
| --hsds-token-color-functional-link-pressed: var(--hsds-token-color-cobalt-800); | ||
| --hsds-token-color-functional-link-disabled: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-color-functional-text-headline: var(--hsds-token-color-charcoal-1200); | ||
| --hsds-token-color-functional-text-dark: var(--hsds-token-color-charcoal-900); | ||
| --hsds-token-color-functional-text-default: var(--hsds-token-color-charcoal-800); | ||
| --hsds-token-color-functional-text-light: var(--hsds-token-color-charcoal-700); | ||
| --hsds-token-color-functional-success-text: var(--hsds-token-color-green-800); | ||
| --hsds-token-color-functional-success-icon: var(--hsds-token-color-green-500); | ||
| --hsds-token-color-functional-success-border: var(--hsds-token-color-green-300); | ||
| --hsds-token-color-functional-success-background: var(--hsds-token-color-green-100); | ||
| --hsds-token-color-functional-error-text: var(--hsds-token-color-red-700); | ||
| --hsds-token-color-functional-error-icon: var(--hsds-token-color-red-500); | ||
| --hsds-token-color-functional-error-border: var(--hsds-token-color-red-300); | ||
| --hsds-token-color-functional-error-background: var(--hsds-token-color-red-100); | ||
| --hsds-token-color-functional-warning-text: var(--hsds-token-color-yellow-800); | ||
| --hsds-token-color-functional-warning-icon: var(--hsds-token-color-yellow-400); | ||
| --hsds-token-color-functional-warning-border: var(--hsds-token-color-yellow-200); | ||
| --hsds-token-color-functional-warning-background: var(--hsds-token-color-yellow-100); | ||
| --hsds-token-color-basics-white: #ffffffff; | ||
| --hsds-token-color-basics-black: #000000ff; | ||
| --hsds-token-color-basics-magenta: #ff00ffff; | ||
| --hsds-token-color-basics-cyan: #00ffffff; | ||
| --hsds-token-color-ash-200: var(--hsds-token-color-charcoal-100); | ||
| --hsds-token-color-ash-200-rgb: var(--hsds-token-color-charcoal-100-rgb); | ||
| --hsds-token-color-ash-300: var(--hsds-token-color-charcoal-200); | ||
| --hsds-token-color-ash-300-rgb: var(--hsds-token-color-charcoal-200-rgb); | ||
| --hsds-token-color-ash-400: var(--hsds-token-color-charcoal-300); | ||
| --hsds-token-color-ash-400-rgb: var(--hsds-token-color-charcoal-300-rgb); | ||
| --hsds-token-color-ash-500: var(--hsds-token-color-charcoal-400); | ||
| --hsds-token-color-ash-500-rgb: var(--hsds-token-color-charcoal-400-rgb); | ||
| --hsds-token-color-ash-600: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-color-ash-600-rgb: var(--hsds-token-color-charcoal-500-rgb); | ||
| --hsds-token-color-ash-700: var(--hsds-token-color-charcoal-530); | ||
| --hsds-token-color-ash-700-rgb: var(--hsds-token-color-charcoal-530-rgb); | ||
| --hsds-token-color-ash-800: var(--hsds-token-color-charcoal-550); | ||
| --hsds-token-color-ash-800-rgb: var(--hsds-token-color-charcoal-550-rgb); | ||
| --hsds-token-color-ash-default: var(--hsds-token-color-charcoal-400); | ||
| --hsds-token-color-ash-accent: var(--hsds-token-color-charcoal-400); | ||
| --hsds-token-color-whaletail-100: #F3F7FF; | ||
| --hsds-token-color-whaletail-100-rgb: 243,247,255; | ||
| --hsds-token-color-whaletail-200: #E5EDFE; | ||
| --hsds-token-color-whaletail-200-rgb: 229,237,254; | ||
| --hsds-token-color-whaletail-300: #D0DEFD; | ||
| --hsds-token-color-whaletail-300-rgb: 208,222,253; | ||
| --hsds-token-color-whaletail-400: #AFC7F9; | ||
| --hsds-token-color-whaletail-400-rgb: 175,199,249; | ||
| --hsds-token-color-whaletail-500: #8AABF1; | ||
| --hsds-token-color-whaletail-500-rgb: 138,171,241; | ||
| --hsds-token-color-whaletail-600: #7296E1; | ||
| --hsds-token-color-whaletail-600-rgb: 114,150,225; | ||
| --hsds-token-color-whaletail-700: #5174BB; | ||
| --hsds-token-color-whaletail-700-rgb: 81,116,187; | ||
| --hsds-token-color-whaletail-800: #304F8B; | ||
| --hsds-token-color-whaletail-800-rgb: 48,79,139; | ||
| --hsds-token-color-whaletail-900: #142F5E; | ||
| --hsds-token-color-whaletail-900-rgb: 20,47,94; | ||
| --hsds-token-color-whaletail-default: var(--hsds-token-color-whaletail-500); | ||
| --hsds-token-color-whaletail-accent: var(--hsds-token-color-whaletail-500); | ||
| --hsds-token-color-button-border: #d5d5d5; | ||
| --hsds-token-color-button-hover: #e6e6e6; | ||
| --hsds-token-color-button-active: #b6b6b6; | ||
| --hsds-token-font-family: "Aktiv Grotesk", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; | ||
| --hsds-token-font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; | ||
| --hsds-token-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; | ||
| --hsds-token-font-size: 13px; | ||
| --hsds-token-measure-focusRing-innerBoxShadowSize: 1px; | ||
| --hsds-token-measure-focusRing-outerBoxShadowSize: 2px; | ||
| --hsds-token-measure-focusRing-insetBoxShadowSize: 2px; | ||
| `; | ||
| exports.tokens = tokens; |
@@ -6,4 +6,709 @@ "use strict"; | ||
| const tokens = ` | ||
| --hsds-token-accordion-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-accordion-color-text-default: var(--hsds-token-color-text-default); | ||
| --hsds-token-attachment-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-attachment-color-removeButton-hover: var(--hsds-token-color-red-700); | ||
| --hsds-token-attachment-color-removeButton-borderHover: var(--hsds-token-color-red-600); | ||
| --hsds-token-attachment-color-error: var(--hsds-token-color-red-600); | ||
| --hsds-token-attachment-color-brokenButton-text: var(--hsds-token-color-text-light); | ||
| --hsds-token-attachment-color-brokenButton-icon: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-attachment-color-downloadAll-icon: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-attachment-color-downloadAll-iconHover: var(--hsds-token-color-text-light); | ||
| --hsds-token-attachment-color-downloadAll-backgroundHover: var(--hsds-token-color-charcoal-200); | ||
| --hsds-token-avatar-color-initials-text: var(--hsds-token-color-text-light); | ||
| --hsds-token-avatar-color-initials-light: var(--hsds-token-color-charcoal-400); | ||
| --hsds-token-avatarRow-color-counter-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-badge-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-badge-color-fill-text: #ffffffff; | ||
| --hsds-token-badge-color-square-text: var(--hsds-token-color-text-light); | ||
| --hsds-token-badge-color-square-background: var(--hsds-token-color-charcoal-100); | ||
| --hsds-token-badge-default: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-blankSlate-color-heading: var(--hsds-token-color-text-headline); | ||
| --hsds-token-blankSlate-color-text: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-blankSlate-color-textBold: var(--hsds-token-color-text-default); | ||
| --hsds-token-blankSlate-color-light-background: var(--hsds-token-color-charcoal-100); | ||
| --hsds-token-blankSlate-color-light-text: var(--hsds-token-color-text-light); | ||
| --hsds-token-blankSlate-color-light-textBold: var(--hsds-token-color-text-dark); | ||
| --hsds-token-button-color-blue-main: var(--hsds-token-color-cobalt-600); | ||
| --hsds-token-button-color-blue-hover: var(--hsds-token-color-cobalt-700); | ||
| --hsds-token-button-color-blue-text: #ffffffff; | ||
| --hsds-token-button-color-blue-outline-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-button-color-blue-outline-border: var(--hsds-token-color-cobalt-500); | ||
| --hsds-token-button-color-blue-outline-borderHover: var(--hsds-token-color-cobalt-500); | ||
| --hsds-token-button-color-blue-outline-text: var(--hsds-token-color-cobalt-600); | ||
| --hsds-token-button-color-blue-outline-textHover: var(--hsds-token-color-cobalt-700); | ||
| --hsds-token-button-color-blue-outline-hover: var(--hsds-token-color-cobalt-100); | ||
| --hsds-token-button-color-blue-outline-hoverIconOnly: var(--hsds-token-color-cobalt-100); | ||
| --hsds-token-button-color-blue-outline-textSeamlessHover: var(--hsds-token-color-cobalt-800); | ||
| --hsds-token-button-color-red-main: var(--hsds-token-color-red-600); | ||
| --hsds-token-button-color-red-hover: var(--hsds-token-color-red-700); | ||
| --hsds-token-button-color-red-text: #ffffffff; | ||
| --hsds-token-button-color-red-outline-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-button-color-red-outline-border: var(--hsds-token-color-red-500); | ||
| --hsds-token-button-color-red-outline-borderHover: var(--hsds-token-color-red-500); | ||
| --hsds-token-button-color-red-outline-text: var(--hsds-token-color-red-600); | ||
| --hsds-token-button-color-red-outline-textHover: var(--hsds-token-color-red-700); | ||
| --hsds-token-button-color-red-outline-hover: var(--hsds-token-color-red-100); | ||
| --hsds-token-button-color-red-outline-hoverIconOnly: var(--hsds-token-color-red-100); | ||
| --hsds-token-button-color-red-outline-textSeamlessHover: var(--hsds-token-color-red-700); | ||
| --hsds-token-button-color-green-main: var(--hsds-token-color-green-750); | ||
| --hsds-token-button-color-green-hover: var(--hsds-token-color-green-900); | ||
| --hsds-token-button-color-green-text: #ffffffff; | ||
| --hsds-token-button-color-green-outline-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-button-color-green-outline-border: var(--hsds-token-color-green-500); | ||
| --hsds-token-button-color-green-outline-borderHover: var(--hsds-token-color-green-500); | ||
| --hsds-token-button-color-green-outline-text: var(--hsds-token-color-green-750); | ||
| --hsds-token-button-color-green-outline-textHover: var(--hsds-token-color-green-800); | ||
| --hsds-token-button-color-green-outline-hover: var(--hsds-token-color-green-100); | ||
| --hsds-token-button-color-green-outline-hoverIconOnly: var(--hsds-token-color-green-100); | ||
| --hsds-token-button-color-green-outline-textSeamlessHover: var(--hsds-token-color-green-900); | ||
| --hsds-token-button-color-grey-main: var(--hsds-token-color-charcoal-700); | ||
| --hsds-token-button-color-grey-hover: var(--hsds-token-color-charcoal-800); | ||
| --hsds-token-button-color-grey-text: #ffffffff; | ||
| --hsds-token-button-color-grey-outline-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-button-color-grey-outline-border: var(--hsds-token-color-grey-500); | ||
| --hsds-token-button-color-grey-outline-borderHover: var(--hsds-token-color-grey-600); | ||
| --hsds-token-button-color-grey-outline-text: var(--hsds-token-color-charcoal-800); | ||
| --hsds-token-button-color-grey-outline-textHover: var(--hsds-token-color-charcoal-800); | ||
| --hsds-token-button-color-grey-outline-hover: var(--hsds-token-color-grey-200); | ||
| --hsds-token-button-color-grey-outline-hoverIconOnly: var(--hsds-token-color-grey-300); | ||
| --hsds-token-button-color-grey-outline-textSeamlessHover: var(--hsds-token-color-charcoal-1100); | ||
| --hsds-token-button-color-yellow-main: var(--hsds-token-color-orange-600); | ||
| --hsds-token-button-color-yellow-hover: var(--hsds-token-color-orange-700); | ||
| --hsds-token-button-color-yellow-text: #ffffffff; | ||
| --hsds-token-button-color-yellow-outline-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-button-color-yellow-outline-border: var(--hsds-token-color-yellow-400); | ||
| --hsds-token-button-color-yellow-outline-borderHover: var(--hsds-token-color-yellow-400); | ||
| --hsds-token-button-color-yellow-outline-text: var(--hsds-token-color-orange-600); | ||
| --hsds-token-button-color-yellow-outline-textHover: var(--hsds-token-color-orange-700); | ||
| --hsds-token-button-color-yellow-outline-hover: var(--hsds-token-color-yellow-100); | ||
| --hsds-token-button-color-yellow-outline-hoverIconOnly: var(--hsds-token-color-yellow-100); | ||
| --hsds-token-button-color-yellow-outline-textSeamlessHover: var(--hsds-token-color-orange-700); | ||
| --hsds-token-button-color-disabled-main: var(--hsds-token-color-grey-500); | ||
| --hsds-token-button-color-disabled-text: #ffffffff; | ||
| --hsds-token-button-color-disabled-outline-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-button-color-disabled-outline-border: var(--hsds-token-color-grey-600); | ||
| --hsds-token-button-color-disabled-outline-text: var(--hsds-token-color-grey-800); | ||
| --hsds-token-card-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-checkmarkCard-color-text-heading: var(--hsds-token-color-text-dark); | ||
| --hsds-token-checkmarkCard-color-text-subtitle: var(--hsds-token-color-text-light); | ||
| --hsds-token-checkmarkCard-color-text-disabled: var(--hsds-token-color-text-light); | ||
| --hsds-token-choice-color-disabled: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-closeButton-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-condition-color-selected-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-copyValue-color-icon: var(--hsds-token-color-text-default); | ||
| --hsds-token-copyValue-color-text: var(--hsds-token-color-text-light); | ||
| --hsds-token-copyValue-color-prefix: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-datePicker-color-range-background: var(--hsds-token-color-cobalt-100); | ||
| --hsds-token-datePicker-color-range-selectedBackground: var(--hsds-token-color-cobalt-600); | ||
| --hsds-token-datePicker-color-range-text: var(--hsds-token-color-cobalt-600); | ||
| --hsds-token-datePicker-color-range-textHover: var(--hsds-token-color-cobalt-700); | ||
| --hsds-token-datePicker-color-currentDay-background: var(--hsds-token-color-grey-400); | ||
| --hsds-token-datePicker-color-currentDay-text: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-datePicker-color-deepNavigator-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-datePicker-color-nav-text: var(--hsds-token-color-text-default); | ||
| --hsds-token-datePicker-color-nav-disabled: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-datePicker-color-weekdays-text: var(--hsds-token-color-text-default); | ||
| --hsds-token-datePicker-color-day-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-datePicker-color-day-disabled: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-datePicker-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-dropList-color-wrapper-border: var(--hsds-token-color-grey-600); | ||
| --hsds-token-dropList-color-wrapper-text: var(--hsds-token-color-grey-600); | ||
| --hsds-token-dropList-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-dropList-color-input-text: var(--hsds-token-color-charcoal-900); | ||
| --hsds-token-dropList-color-listItem-text: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-dropList-color-listItem-disabled-text: var(--hsds-token-color-charcoal-650); | ||
| --hsds-token-dropList-color-listItem-selected-text: #ffffffff; | ||
| --hsds-token-dropList-color-listItem-selected-background: var(--hsds-token-color-blue-600); | ||
| --hsds-token-dropList-color-listItem-highlighted-text: var(--hsds-token-color-charcoal-1100); | ||
| --hsds-token-dropList-color-listItem-highlighted-background: var(--hsds-token-color-blue-100); | ||
| --hsds-token-dropList-color-listItem-multiple-highlighted-text: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-dropList-color-selectedBadge-border: var(--hsds-token-color-grey-600); | ||
| --hsds-token-dropList-color-selectedBadge-hover: var(--hsds-token-color-blue-500); | ||
| --hsds-token-dropList-color-selectedBadge-disabled-border: var(--hsds-token-color-grey-600); | ||
| --hsds-token-dropList-color-selectedBadge-disabled-shadow: var(--hsds-token-color-grey-500); | ||
| --hsds-token-dropList-color-selectedBadge-disabled-background: var(--hsds-token-color-grey-200); | ||
| --hsds-token-dropList-color-divider: var(--hsds-token-color-grey-500); | ||
| --hsds-token-dropList-color-groupLabel: var(--hsds-token-color-charcoal-600); | ||
| --hsds-token-dropList-color-togglers-navLink-text: var(--hsds-token-color-blue-300); | ||
| --hsds-token-dropList-color-togglers-splitButton-shadowDisabled: var(--hsds-token-button-color-disabled-outline-border); | ||
| --hsds-token-dropList-color-togglers-select-shadow: var(--hsds-token-color-grey-800); | ||
| --hsds-token-dropList-color-togglers-select-text: var(--hsds-token-color-charcoal-900); | ||
| --hsds-token-dropList-color-togglers-select-shadowError: var(--hsds-token-color-state-error-borderColor); | ||
| --hsds-token-dropList-color-togglers-select-disabled: var(--hsds-token-color-charcoal-600); | ||
| --hsds-token-dropList-color-togglers-selectArrow-border: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-editableField-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-emojiPicker-color-icon: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-filteredList-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-filteredList-color-item-text: var(--hsds-token-color-text-light); | ||
| --hsds-token-filteredList-color-badge-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-filteredList-color-separator: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-floatingBar-color-background: var(--hsds-token-color-charcoal-1200); | ||
| --hsds-token-floatingBar-color-button-iconDefault: var(--hsds-token-color-charcoal-600); | ||
| --hsds-token-floatingBar-color-button-iconHover: #ffffffff; | ||
| --hsds-token-floatingBar-color-button-backgroundDefault: transparent; | ||
| --hsds-token-floatingBar-color-button-backgroundHover: transparent; | ||
| --hsds-token-floatingBar-color-divider: var(--hsds-token-color-charcoal-900); | ||
| --hsds-token-formField-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-formField-color-label-text: var(--hsds-token-color-text-default); | ||
| --hsds-token-formField-color-itemMain-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-formField-color-itemSecondary-text: var(--hsds-token-color-text-light); | ||
| --hsds-token-heading-color-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-heading-color-small-text: var(--hsds-token-color-text-default); | ||
| --hsds-token-input-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-input-color-text: var(--hsds-token-color-text-default); | ||
| --hsds-token-input-color-addOn-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-input-color-placeholder: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-keyboardBadge-color-text: var(--hsds-token-color-text-default); | ||
| --hsds-token-loadingDots-color-icon: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-message-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-message-color-action: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-message-color-bubble-text: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-message-color-bubble-embedBodyText: var(--hsds-token-color-text-default); | ||
| --hsds-token-message-color-bubble-embedFromText: var(--hsds-token-color-text-default); | ||
| --hsds-token-message-color-embed: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-message-color-media: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-messageCard-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-messageCard-color-subtitle: var(--hsds-token-color-text-light); | ||
| --hsds-token-messageCard-color-body: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-messageCard-color-blockquote: var(--hsds-token-color-text-light); | ||
| --hsds-token-messageCard-color-pre: var(--hsds-token-color-charcoal-1100); | ||
| --hsds-token-messageCard-color-strong: var(--hsds-token-color-charcoal-1100); | ||
| --hsds-token-messageCard-color-articleCard-title: var(--hsds-token-color-text-dark); | ||
| --hsds-token-messageCard-color-articleCard-meta: var(--hsds-token-color-text-light); | ||
| --hsds-token-messageCard-color-articleCard-content: var(--hsds-token-color-text-light); | ||
| --hsds-token-messageCard-color-surveyNps: var(--hsds-token-color-text-light); | ||
| --hsds-token-messageCard-color-survey-feedback: var(--hsds-token-color-text-default); | ||
| --hsds-token-messageCard-color-survey-spinner: var(--hsds-token-color-text-default); | ||
| --hsds-token-messageCard-color-survey-confirmation: var(--hsds-token-color-text-default); | ||
| --hsds-token-messageCard-color-survey-multiple: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-messageCard-color-modal-title: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-messageCard-color-modal-label: var(--hsds-token-color-text-light); | ||
| --hsds-token-messageCard-color-modal-body: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-messageCard-color-modal-closeButton: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-messageCard-color-modal-closeButtonHover: var(--hsds-token-color-text-dark); | ||
| --hsds-token-messageCard-color-nps-poweredby: var(--hsds-token-color-text-light); | ||
| --hsds-token-messageCard-color-nps-question: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-messageCard-color-nps-feedback: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-modal-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-modal-color-header-title: var(--hsds-token-color-text-default); | ||
| --hsds-token-modal-color-header-description: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-nav-color-item-text: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-nav-color-item-hover: var(--hsds-token-color-text-light); | ||
| --hsds-token-nav-color-item-active: var(--hsds-token-color-text-default); | ||
| --hsds-token-nav-color-text: var(--hsds-token-color-text-default); | ||
| --hsds-token-page-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-page-color-header-title: var(--hsds-token-color-text-headline); | ||
| --hsds-token-page-color-header-subtitle: var(--hsds-token-color-text-dark); | ||
| --hsds-token-page-minWidth: 480px; | ||
| --hsds-token-page-maxWidth-default: 700px; | ||
| --hsds-token-page-maxWidth-wide: 1000px; | ||
| --hsds-token-page-actions-margin-bottom: 100px; | ||
| --hsds-token-page-actions-margin-top: 30px; | ||
| --hsds-token-page-actions-spacing: 10px; | ||
| --hsds-token-page-card-radius: 4px; | ||
| --hsds-token-page-card-padding-default-top: 50px; | ||
| --hsds-token-page-card-padding-default-bottom: 65px; | ||
| --hsds-token-page-card-padding-default-side: 100px; | ||
| --hsds-token-page-card-padding-narrow-top: 40px; | ||
| --hsds-token-page-card-padding-narrow-bottom: 50px; | ||
| --hsds-token-page-card-padding-narrow-side: 50px; | ||
| --hsds-token-page-card-padding-wide-top: 60px; | ||
| --hsds-token-page-card-padding-wide-bottom: 80px; | ||
| --hsds-token-page-card-padding-wide-side: 175px; | ||
| --hsds-token-pagination-color-information: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-pagination-color-range: var(--hsds-token-color-text-dark); | ||
| --hsds-token-pagination-color-buttonOutlined: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-popover-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-popover-color-heading: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-radioCard-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-radioCard-color-icon: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-radioCard-color-checked: var(--hsds-token-color-text-dark); | ||
| --hsds-token-radioCard-color-heading: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-radioCard-color-content: var(--hsds-token-color-text-default); | ||
| --hsds-token-radioCard-color-contentWithHeading: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-scrollable-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-scrollableContainer-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-sidePanel-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-sidePanel-color-heading: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-sidePanel-color-subheading: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-sidePanel-color-close: var(--hsds-token-color-text-light); | ||
| --hsds-token-sidePanel-color-closeHover: var(--hsds-token-color-text-dark); | ||
| --hsds-token-simpleModal-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-simpleModal-color-heading: var(--hsds-token-color-text-headline); | ||
| --hsds-token-simpleModal-color-confirmationBody: var(--hsds-token-color-text-dark); | ||
| --hsds-token-sortable-color-dragHandler-default: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-sortable-color-dragHandler-active: var(--hsds-token-color-text-light); | ||
| --hsds-token-sortable-color-dragHandler-disabled: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-statusBar-color-light-error-border: var(--hsds-token-color-red-200); | ||
| --hsds-token-statusBar-color-light-info-border: var(--hsds-token-color-cobalt-200); | ||
| --hsds-token-statusBar-color-light-success-border: var(--hsds-token-color-green-200); | ||
| --hsds-token-statusBar-color-light-warning-border: var(--hsds-token-color-yellow-200); | ||
| --hsds-token-statusBar-color-bold-error-border: var(--hsds-token-color-red-700); | ||
| --hsds-token-statusBar-color-bold-error-button: var(--hsds-token-color-red-700); | ||
| --hsds-token-statusBar-color-bold-info-border: var(--hsds-token-color-cobalt-700); | ||
| --hsds-token-statusBar-color-bold-info-button: var(--hsds-token-color-cobalt-700); | ||
| --hsds-token-statusBar-color-bold-success-border: var(--hsds-token-color-green-700); | ||
| --hsds-token-statusBar-color-bold-success-button: var(--hsds-token-color-green-700); | ||
| --hsds-token-statusBar-color-bold-warning-border: var(--hsds-token-color-orange-700); | ||
| --hsds-token-statusBar-color-bold-warning-button: var(--hsds-token-color-orange-700); | ||
| --hsds-token-statusDot-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-statusDot-color-light-default: var(--hsds-token-color-slate-500); | ||
| --hsds-token-statusDot-color-light-active: var(--hsds-token-color-green-500); | ||
| --hsds-token-statusDot-color-light-inactive: var(--hsds-token-color-slate-500); | ||
| --hsds-token-statusDot-color-light-offline: var(--hsds-token-color-red-500); | ||
| --hsds-token-statusDot-color-light-busy: var(--hsds-token-color-yellow-400); | ||
| --hsds-token-statusDot-color-light-custom: var(--hsds-token-color-purple-400); | ||
| --hsds-token-statusDot-color-dark-default: var(--hsds-token-color-slate-accent); | ||
| --hsds-token-statusDot-color-dark-active: var(--hsds-token-color-green-accent); | ||
| --hsds-token-statusDot-color-dark-inactive: var(--hsds-token-color-slate-accent); | ||
| --hsds-token-statusDot-color-dark-offline: var(--hsds-token-color-red-accent); | ||
| --hsds-token-statusDot-color-dark-busy: var(--hsds-token-color-yellow-accent); | ||
| --hsds-token-statusDot-color-dark-custom: var(--hsds-token-color-purple-accent); | ||
| --hsds-token-stepper-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-switchComponent-color-error: var(--hsds-token-color-state-error-default); | ||
| --hsds-token-switchComponent-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-tabBar-color-secContent: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-tabBar-color-strong: var(--hsds-token-color-text-dark); | ||
| --hsds-token-table-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-table-color-typeAction: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-table-color-sortableCell: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-tag-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-tag-color-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-tag-color-showAll: var(--hsds-token-color-text-dark); | ||
| --hsds-token-tag-color-clearAll: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-tag-color-clearAllHover: var(--hsds-token-color-text-light); | ||
| --hsds-token-timeline-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-toolbar-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-typingDots-color-icon: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-verificationCode-color-error: var(--hsds-token-color-state-error-default); | ||
| --hsds-token-verificationCode-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-verificationCode-color-digit: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-color-blue-100: var(--hsds-token-color-cobalt-100); | ||
| --hsds-token-color-blue-100-rgb: var(--hsds-token-color-cobalt-100-rgb); | ||
| --hsds-token-color-blue-200: var(--hsds-token-color-cobalt-200); | ||
| --hsds-token-color-blue-200-rgb: var(--hsds-token-color-cobalt-200-rgb); | ||
| --hsds-token-color-blue-300: var(--hsds-token-color-cobalt-300); | ||
| --hsds-token-color-blue-300-rgb: var(--hsds-token-color-cobalt-300-rgb); | ||
| --hsds-token-color-blue-400: var(--hsds-token-color-cobalt-400); | ||
| --hsds-token-color-blue-400-rgb: var(--hsds-token-color-cobalt-400-rgb); | ||
| --hsds-token-color-blue-500: var(--hsds-token-color-cobalt-600); | ||
| --hsds-token-color-blue-500-rgb: var(--hsds-token-color-cobalt-600-rgb); | ||
| --hsds-token-color-blue-600: var(--hsds-token-color-cobalt-600); | ||
| --hsds-token-color-blue-600-rgb: var(--hsds-token-color-cobalt-600-rgb); | ||
| --hsds-token-color-blue-700: var(--hsds-token-color-cobalt-700); | ||
| --hsds-token-color-blue-700-rgb: var(--hsds-token-color-cobalt-700-rgb); | ||
| --hsds-token-color-blue-800: var(--hsds-token-color-cobalt-800); | ||
| --hsds-token-color-blue-800-rgb: var(--hsds-token-color-cobalt-800-rgb); | ||
| --hsds-token-color-blue-900: var(--hsds-token-color-cobalt-900); | ||
| --hsds-token-color-blue-900-rgb: var(--hsds-token-color-cobalt-900-rgb); | ||
| --hsds-token-color-blue-default: var(--hsds-token-color-cobalt-500); | ||
| --hsds-token-color-blue-accent: var(--hsds-token-color-cobalt-accent); | ||
| --hsds-token-color-charcoal-100: #f9fafaff; | ||
| --hsds-token-color-charcoal-100-rgb: 249,250,250; | ||
| --hsds-token-color-charcoal-200: #f1f3f5ff; | ||
| --hsds-token-color-charcoal-200-rgb: 241,243,245; | ||
| --hsds-token-color-charcoal-300: #dfe6ebff; | ||
| --hsds-token-color-charcoal-300-rgb: 223,230,235; | ||
| --hsds-token-color-charcoal-400: #c8d3deff; | ||
| --hsds-token-color-charcoal-400-rgb: 200,211,222; | ||
| --hsds-token-color-charcoal-500: #abb9c7ff; | ||
| --hsds-token-color-charcoal-500-rgb: 171,185,199; | ||
| --hsds-token-color-charcoal-530: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-color-charcoal-530-rgb: var(--hsds-token-color-charcoal-500-rgb); | ||
| --hsds-token-color-charcoal-550: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-color-charcoal-550-rgb: var(--hsds-token-color-charcoal-500-rgb); | ||
| --hsds-token-color-charcoal-600: #7e8e9eff; | ||
| --hsds-token-color-charcoal-600-rgb: 126,142,158; | ||
| --hsds-token-color-charcoal-650: var(--hsds-token-color-charcoal-600); | ||
| --hsds-token-color-charcoal-650-rgb: var(--hsds-token-color-charcoal-600-rgb); | ||
| --hsds-token-color-charcoal-700: #556575ff; | ||
| --hsds-token-color-charcoal-700-rgb: 85,101,117; | ||
| --hsds-token-color-charcoal-800: #405261ff; | ||
| --hsds-token-color-charcoal-800-rgb: 64,82,97; | ||
| --hsds-token-color-charcoal-900: #314351ff; | ||
| --hsds-token-color-charcoal-900-rgb: 49,67,81; | ||
| --hsds-token-color-charcoal-1000: #253642ff; | ||
| --hsds-token-color-charcoal-1000-rgb: 37,54,66; | ||
| --hsds-token-color-charcoal-1100: #1d2b36ff; | ||
| --hsds-token-color-charcoal-1100-rgb: 29,43,54; | ||
| --hsds-token-color-charcoal-1200: #131b24ff; | ||
| --hsds-token-color-charcoal-1200-rgb: 19,27,36; | ||
| --hsds-token-color-charcoal-default: var(--hsds-token-color-charcoal-800); | ||
| --hsds-token-color-grey-200: var(--hsds-token-color-charcoal-100); | ||
| --hsds-token-color-grey-200-rgb: var(--hsds-token-color-charcoal-100-rgb); | ||
| --hsds-token-color-grey-300: var(--hsds-token-color-charcoal-200); | ||
| --hsds-token-color-grey-300-rgb: var(--hsds-token-color-charcoal-200-rgb); | ||
| --hsds-token-color-grey-400: var(--hsds-token-color-charcoal-300); | ||
| --hsds-token-color-grey-400-rgb: var(--hsds-token-color-charcoal-300-rgb); | ||
| --hsds-token-color-grey-500: var(--hsds-token-color-charcoal-400); | ||
| --hsds-token-color-grey-500-rgb: var(--hsds-token-color-charcoal-400-rgb); | ||
| --hsds-token-color-grey-600: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-color-grey-600-rgb: var(--hsds-token-color-charcoal-500-rgb); | ||
| --hsds-token-color-grey-700: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-color-grey-700-rgb: var(--hsds-token-color-charcoal-500-rgb); | ||
| --hsds-token-color-grey-800: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-color-grey-800-rgb: var(--hsds-token-color-charcoal-500-rgb); | ||
| --hsds-token-color-indigo-200: var(--hsds-token-color-cobalt-100); | ||
| --hsds-token-color-indigo-200-rgb: var(--hsds-token-color-cobalt-100-rgb); | ||
| --hsds-token-color-indigo-300: var(--hsds-token-color-cobalt-200); | ||
| --hsds-token-color-indigo-300-rgb: var(--hsds-token-color-cobalt-200-rgb); | ||
| --hsds-token-color-indigo-400: var(--hsds-token-color-cobalt-300); | ||
| --hsds-token-color-indigo-400-rgb: var(--hsds-token-color-cobalt-300-rgb); | ||
| --hsds-token-color-indigo-500: var(--hsds-token-color-cobalt-400); | ||
| --hsds-token-color-indigo-500-rgb: var(--hsds-token-color-cobalt-400-rgb); | ||
| --hsds-token-color-indigo-600: var(--hsds-token-color-cobalt-500); | ||
| --hsds-token-color-indigo-600-rgb: var(--hsds-token-color-cobalt-500-rgb); | ||
| --hsds-token-color-indigo-700: var(--hsds-token-color-cobalt-600); | ||
| --hsds-token-color-indigo-700-rgb: var(--hsds-token-color-cobalt-600-rgb); | ||
| --hsds-token-color-indigo-800: var(--hsds-token-color-cobalt-700); | ||
| --hsds-token-color-indigo-800-rgb: var(--hsds-token-color-cobalt-700-rgb); | ||
| --hsds-token-color-indigo-900: var(--hsds-token-color-cobalt-800); | ||
| --hsds-token-color-indigo-900-rgb: var(--hsds-token-color-cobalt-800-rgb); | ||
| --hsds-token-color-indigo-1000: var(--hsds-token-color-cobalt-900); | ||
| --hsds-token-color-indigo-1000-rgb: var(--hsds-token-color-cobalt-900-rgb); | ||
| --hsds-token-color-indigo-default: var(--hsds-token-color-indigo-500); | ||
| --hsds-token-color-lavender-100: var(--hsds-token-color-purple-100); | ||
| --hsds-token-color-lavender-100-rgb: var(--hsds-token-color-purple-100-rgb); | ||
| --hsds-token-color-lavender-200: var(--hsds-token-color-purple-200); | ||
| --hsds-token-color-lavender-200-rgb: var(--hsds-token-color-purple-200-rgb); | ||
| --hsds-token-color-lavender-300: var(--hsds-token-color-purple-300); | ||
| --hsds-token-color-lavender-300-rgb: var(--hsds-token-color-purple-300-rgb); | ||
| --hsds-token-color-lavender-400: var(--hsds-token-color-purple-400); | ||
| --hsds-token-color-lavender-400-rgb: var(--hsds-token-color-purple-400-rgb); | ||
| --hsds-token-color-lavender-500: var(--hsds-token-color-purple-500); | ||
| --hsds-token-color-lavender-500-rgb: var(--hsds-token-color-purple-500-rgb); | ||
| --hsds-token-color-lavender-600: var(--hsds-token-color-purple-600); | ||
| --hsds-token-color-lavender-600-rgb: var(--hsds-token-color-purple-600-rgb); | ||
| --hsds-token-color-lavender-700: var(--hsds-token-color-purple-700); | ||
| --hsds-token-color-lavender-700-rgb: var(--hsds-token-color-purple-700-rgb); | ||
| --hsds-token-color-lavender-800: var(--hsds-token-color-purple-800); | ||
| --hsds-token-color-lavender-800-rgb: var(--hsds-token-color-purple-800-rgb); | ||
| --hsds-token-color-lavender-900: var(--hsds-token-color-purple-900); | ||
| --hsds-token-color-lavender-900-rgb: var(--hsds-token-color-purple-900-rgb); | ||
| --hsds-token-color-lavender-default: var(--hsds-token-color-lavender-500); | ||
| --hsds-token-color-pink-100: var(--hsds-token-color-red-100); | ||
| --hsds-token-color-pink-100-rgb: var(--hsds-token-color-red-100-rgb); | ||
| --hsds-token-color-pink-200: var(--hsds-token-color-red-200); | ||
| --hsds-token-color-pink-200-rgb: var(--hsds-token-color-red-200-rgb); | ||
| --hsds-token-color-pink-300: var(--hsds-token-color-red-300); | ||
| --hsds-token-color-pink-300-rgb: var(--hsds-token-color-red-300-rgb); | ||
| --hsds-token-color-pink-400: var(--hsds-token-color-red-400); | ||
| --hsds-token-color-pink-400-rgb: var(--hsds-token-color-red-400-rgb); | ||
| --hsds-token-color-pink-500: var(--hsds-token-color-red-500); | ||
| --hsds-token-color-pink-500-rgb: var(--hsds-token-color-red-500-rgb); | ||
| --hsds-token-color-pink-600: var(--hsds-token-color-red-600); | ||
| --hsds-token-color-pink-600-rgb: var(--hsds-token-color-red-600-rgb); | ||
| --hsds-token-color-pink-700: var(--hsds-token-color-red-700); | ||
| --hsds-token-color-pink-700-rgb: var(--hsds-token-color-red-700-rgb); | ||
| --hsds-token-color-pink-800: var(--hsds-token-color-red-800); | ||
| --hsds-token-color-pink-800-rgb: var(--hsds-token-color-red-800-rgb); | ||
| --hsds-token-color-pink-900: var(--hsds-token-color-red-900); | ||
| --hsds-token-color-pink-900-rgb: var(--hsds-token-color-red-900-rgb); | ||
| --hsds-token-color-pink-950: var(--hsds-token-color-red-900); | ||
| --hsds-token-color-pink-950-rgb: var(--hsds-token-color-red-900-rgb); | ||
| --hsds-token-color-pink-1000: var(--hsds-token-color-red-900); | ||
| --hsds-token-color-pink-1000-rgb: var(--hsds-token-color-red-900-rgb); | ||
| --hsds-token-color-green-100: #f2fff0ff; | ||
| --hsds-token-color-green-100-rgb: 242,255,240; | ||
| --hsds-token-color-green-200: #e0fcdeff; | ||
| --hsds-token-color-green-200-rgb: 224,252,222; | ||
| --hsds-token-color-green-300: #b9edbdff; | ||
| --hsds-token-color-green-300-rgb: 185,237,189; | ||
| --hsds-token-color-green-400: #83db9cff; | ||
| --hsds-token-color-green-400-rgb: 131,219,156; | ||
| --hsds-token-color-green-500: #47c47dff; | ||
| --hsds-token-color-green-500-rgb: 71,196,125; | ||
| --hsds-token-color-green-600: #2d8556ff; | ||
| --hsds-token-color-green-600-rgb: 45,133,86; | ||
| --hsds-token-color-green-700: #28704cff; | ||
| --hsds-token-color-green-700-rgb: 40,112,76; | ||
| --hsds-token-color-green-750: var(--hsds-token-color-green-800); | ||
| --hsds-token-color-green-750-rgb: var(--hsds-token-color-green-800-rgb); | ||
| --hsds-token-color-green-800: #2e5940ff; | ||
| --hsds-token-color-green-800-rgb: 46,89,64; | ||
| --hsds-token-color-green-900: #283b2dff; | ||
| --hsds-token-color-green-900-rgb: 40,59,45; | ||
| --hsds-token-color-green-1000: #222923ff; | ||
| --hsds-token-color-green-1000-rgb: 34,41,35; | ||
| --hsds-token-color-green-accent: #56f09eff; | ||
| --hsds-token-color-yellow-50: var(--hsds-token-color-yellow-100); | ||
| --hsds-token-color-yellow-100: #fff6e5ff; | ||
| --hsds-token-color-yellow-100-rgb: 255,246,229; | ||
| --hsds-token-color-yellow-200: #ffeeccff; | ||
| --hsds-token-color-yellow-200-rgb: 255,238,204; | ||
| --hsds-token-color-yellow-300: #ffdd99ff; | ||
| --hsds-token-color-yellow-300-rgb: 255,221,153; | ||
| --hsds-token-color-yellow-400: #fabf5aff; | ||
| --hsds-token-color-yellow-400-rgb: 250,191,90; | ||
| --hsds-token-color-yellow-500: #e09c24ff; | ||
| --hsds-token-color-yellow-500-rgb: 224,156,36; | ||
| --hsds-token-color-yellow-600: #ac771bff; | ||
| --hsds-token-color-yellow-600-rgb: 172,119,27; | ||
| --hsds-token-color-yellow-700: #7a581dff; | ||
| --hsds-token-color-yellow-700-rgb: 122,88,29; | ||
| --hsds-token-color-yellow-800: #574323ff; | ||
| --hsds-token-color-yellow-800-rgb: 87,67,35; | ||
| --hsds-token-color-yellow-900: #403521ff; | ||
| --hsds-token-color-yellow-900-rgb: 64,53,33; | ||
| --hsds-token-color-yellow-950: var(--hsds-token-color-yellow-900); | ||
| --hsds-token-color-yellow-950-rgb: var(--hsds-token-color-yellow-900-rgb); | ||
| --hsds-token-color-yellow-1000: #2b261dff; | ||
| --hsds-token-color-yellow-1000-rgb: 43,38,29; | ||
| --hsds-token-color-yellow-accent: #ffb83dff; | ||
| --hsds-token-color-link-default: var(--hsds-token-color-cobalt-600); | ||
| --hsds-token-color-link-base: var(--hsds-token-color-cobalt-600); | ||
| --hsds-token-color-link-hover: var(--hsds-token-color-cobalt-700); | ||
| --hsds-token-color-link-active: var(--hsds-token-color-cobalt-800); | ||
| --hsds-token-color-link-focus: var(--hsds-token-color-cobalt-600); | ||
| --hsds-token-color-link-disabled: var(--hsds-token-color-charcoal-800); | ||
| --hsds-token-color-focusRing-default-innerColor: var(--hsds-token-color-cobalt-600); | ||
| --hsds-token-color-focusRing-default-outerColor: var(--hsds-token-color-cobalt-200); | ||
| --hsds-token-color-focusRing-default-innerColorOverDark: var(--hsds-token-color-cobalt-accent); | ||
| --hsds-token-color-focusRing-default-outerColorOverDark: var(--hsds-token-color-charcoal-900); | ||
| --hsds-token-color-focusRing-error-innerColor: var(--hsds-token-color-state-error-borderColor); | ||
| --hsds-token-color-focusRing-error-outerColor: var(--hsds-token-color-state-error-backgroundLight); | ||
| --hsds-token-color-focusRing-error-innerColorOverDark: var(--hsds-token-color-state-error-borderColor); | ||
| --hsds-token-color-focusRing-error-outerColorOverDark: var(--hsds-token-color-state-error-backgroundLight); | ||
| --hsds-token-color-focusRing-warning-innerColor: var(--hsds-token-color-state-warning-borderColor); | ||
| --hsds-token-color-focusRing-warning-outerColor: var(--hsds-token-color-state-warning-backgroundLight); | ||
| --hsds-token-color-focusRing-warning-innerColorOverDark: var(--hsds-token-color-state-warning-borderColor); | ||
| --hsds-token-color-focusRing-warning-outerColorOverDark: var(--hsds-token-color-state-warning-backgroundLight); | ||
| --hsds-token-color-focusRing-success-innerColor: var(--hsds-token-color-state-success-borderColor); | ||
| --hsds-token-color-focusRing-success-outerColor: var(--hsds-token-color-state-success-backgroundLight); | ||
| --hsds-token-color-focusRing-success-innerColorOverDark: var(--hsds-token-color-state-success-borderColor); | ||
| --hsds-token-color-focusRing-success-outerColorOverDark: var(--hsds-token-color-state-success-backgroundLight); | ||
| --hsds-token-color-text-default: var(--hsds-token-color-charcoal-800); | ||
| --hsds-token-color-text-headline: var(--hsds-token-color-charcoal-1200); | ||
| --hsds-token-color-text-dark: var(--hsds-token-color-charcoal-900); | ||
| --hsds-token-color-text-light: var(--hsds-token-color-charcoal-700); | ||
| --hsds-token-color-text-disabled: var(--hsds-token-color-charcoal-600); | ||
| --hsds-token-color-text-subtle: var(--hsds-token-color-text-default); | ||
| --hsds-token-color-text-slightlyMuted: var(--hsds-token-color-text-light); | ||
| --hsds-token-color-text-muted: var(--hsds-token-color-text-light); | ||
| --hsds-token-color-text-faint: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-color-text-extraMuted: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-color-border-default: var(--hsds-token-color-grey-400); | ||
| --hsds-token-color-border-divider: var(--hsds-token-color-grey-300); | ||
| --hsds-token-color-border-ui-default: var(--hsds-token-color-grey-500); | ||
| --hsds-token-color-border-ui-dark: var(--hsds-token-color-grey-600); | ||
| --hsds-token-color-state-error-text: var(--hsds-token-color-red-600); | ||
| --hsds-token-color-state-error-backgroundDark: var(--hsds-token-color-red-600); | ||
| --hsds-token-color-state-error-icon: var(--hsds-token-color-red-accent); | ||
| --hsds-token-color-state-error-borderColor: var(--hsds-token-color-red-500); | ||
| --hsds-token-color-state-error-backgroundLight: #FA7A6428; | ||
| --hsds-token-color-state-error-default: var(--hsds-token-color-red-600); | ||
| --hsds-token-color-state-error-color: var(--hsds-token-color-red-600); | ||
| --hsds-token-color-state-info-text: var(--hsds-token-color-cobalt-700); | ||
| --hsds-token-color-state-info-backgroundDark: var(--hsds-token-color-cobalt-600); | ||
| --hsds-token-color-state-info-icon: var(--hsds-token-color-cobalt-500); | ||
| --hsds-token-color-state-info-borderColor: var(--hsds-token-color-cobalt-500); | ||
| --hsds-token-color-state-info-backgroundLight: var(--hsds-token-color-cobalt-100); | ||
| --hsds-token-color-state-info-default: var(--hsds-token-color-cobalt-700); | ||
| --hsds-token-color-state-info-color: var(--hsds-token-color-cobalt-700); | ||
| --hsds-token-color-state-success-text: var(--hsds-token-color-green-800); | ||
| --hsds-token-color-state-success-backgroundDark: var(--hsds-token-color-green-600); | ||
| --hsds-token-color-state-success-icon: var(--hsds-token-color-green-500); | ||
| --hsds-token-color-state-success-borderColor: var(--hsds-token-color-green-500); | ||
| --hsds-token-color-state-success-backgroundLight: var(--hsds-token-color-green-100); | ||
| --hsds-token-color-state-success-default: var(--hsds-token-color-green-800); | ||
| --hsds-token-color-state-success-color: var(--hsds-token-color-green-800); | ||
| --hsds-token-color-state-warning-text: var(--hsds-token-color-orange-600); | ||
| --hsds-token-color-state-warning-backgroundDark: var(--hsds-token-color-orange-600); | ||
| --hsds-token-color-state-warning-icon: var(--hsds-token-color-yellow-accent); | ||
| --hsds-token-color-state-warning-borderColor: var(--hsds-token-color-yellow-400); | ||
| --hsds-token-color-state-warning-backgroundLight: var(--hsds-token-color-yellow-100); | ||
| --hsds-token-color-state-warning-color: var(--hsds-token-color-orange-600); | ||
| --hsds-token-color-state-warning-default: var(--hsds-token-color-yellow-500); | ||
| --hsds-token-color-state-danger-default: var(--hsds-token-color-state-error-default); | ||
| --hsds-token-color-state-danger-backgroundLight: var(--hsds-token-color-state-error-backgroundLight); | ||
| --hsds-token-color-state-danger-backgroundDark: var(--hsds-token-color-state-error-backgroundDark); | ||
| --hsds-token-color-state-danger-borderColor: var(--hsds-token-color-state-error-borderColor); | ||
| --hsds-token-color-state-danger-color: var(--hsds-token-color-state-error-color); | ||
| --hsds-token-color-state-danger-text: var(--hsds-token-color-state-error-text); | ||
| --hsds-token-color-state-danger-icon: var(--hsds-token-color-state-error-icon); | ||
| --hsds-token-color-background-surface: #ffffffff; | ||
| --hsds-token-color-background-body: var(--hsds-token-color-grey-300); | ||
| --hsds-token-color-red-100: #fff0e8ff; | ||
| --hsds-token-color-red-100-rgb: 255,240,232; | ||
| --hsds-token-color-red-200: #fedfd5ff; | ||
| --hsds-token-color-red-200-rgb: 254,223,213; | ||
| --hsds-token-color-red-300: #ffbcadff; | ||
| --hsds-token-color-red-300-rgb: 255,188,173; | ||
| --hsds-token-color-red-400: #fa7a64ff; | ||
| --hsds-token-color-red-400-rgb: 250,122,100; | ||
| --hsds-token-color-red-500: #e54a32ff; | ||
| --hsds-token-color-red-500-rgb: 229,74,50; | ||
| --hsds-token-color-red-600: #b83525ff; | ||
| --hsds-token-color-red-600-rgb: 184,53,37; | ||
| --hsds-token-color-red-700: #822824ff; | ||
| --hsds-token-color-red-700-rgb: 130,40,36; | ||
| --hsds-token-color-red-800: #592728ff; | ||
| --hsds-token-color-red-800-rgb: 89,39,40; | ||
| --hsds-token-color-red-900: #402629ff; | ||
| --hsds-token-color-red-900-rgb: 64,38,41; | ||
| --hsds-token-color-red-1000: #2b2123ff; | ||
| --hsds-token-color-red-1000-rgb: 43,33,35; | ||
| --hsds-token-color-red-accent: #ff6047ff; | ||
| --hsds-token-color-orange-100: #fff2e8ff; | ||
| --hsds-token-color-orange-100-rgb: 255,242,232; | ||
| --hsds-token-color-orange-200: #ffe4d1ff; | ||
| --hsds-token-color-orange-200-rgb: 255,228,209; | ||
| --hsds-token-color-orange-300: #fac096ff; | ||
| --hsds-token-color-orange-300-rgb: 250,192,150; | ||
| --hsds-token-color-orange-400: #f5964eff; | ||
| --hsds-token-color-orange-400-rgb: 245,150,78; | ||
| --hsds-token-color-orange-500: #d67022ff; | ||
| --hsds-token-color-orange-500-rgb: 214,112,34; | ||
| --hsds-token-color-orange-600: #a35214ff; | ||
| --hsds-token-color-orange-600-rgb: 163,82,20; | ||
| --hsds-token-color-orange-700: #7a4518ff; | ||
| --hsds-token-color-orange-700-rgb: 122,69,24; | ||
| --hsds-token-color-orange-800: #573b23ff; | ||
| --hsds-token-color-orange-800-rgb: 87,59,35; | ||
| --hsds-token-color-orange-900: #3d2f22ff; | ||
| --hsds-token-color-orange-900-rgb: 61,47,34; | ||
| --hsds-token-color-orange-1000: #2b241dff; | ||
| --hsds-token-color-orange-1000-rgb: 43,36,29; | ||
| --hsds-token-color-orange-accent: #ff8b33ff; | ||
| --hsds-token-color-slate-100: #f2f9fcff; | ||
| --hsds-token-color-slate-100-rgb: 242,249,252; | ||
| --hsds-token-color-slate-200: #e1eef5ff; | ||
| --hsds-token-color-slate-200-rgb: 225,238,245; | ||
| --hsds-token-color-slate-300: #ccdee8ff; | ||
| --hsds-token-color-slate-300-rgb: 204,222,232; | ||
| --hsds-token-color-slate-400: #a9c4d4ff; | ||
| --hsds-token-color-slate-400-rgb: 169,196,212; | ||
| --hsds-token-color-slate-500: #82a7baff; | ||
| --hsds-token-color-slate-500-rgb: 130,167,186; | ||
| --hsds-token-color-slate-600: #658b9eff; | ||
| --hsds-token-color-slate-600-rgb: 101,139,158; | ||
| --hsds-token-color-slate-700: #486878ff; | ||
| --hsds-token-color-slate-700-rgb: 72,104,120; | ||
| --hsds-token-color-slate-800: #344852ff; | ||
| --hsds-token-color-slate-800-rgb: 52,72,82; | ||
| --hsds-token-color-slate-900: #283338ff; | ||
| --hsds-token-color-slate-900-rgb: 40,51,56; | ||
| --hsds-token-color-slate-1000: #1f2426ff; | ||
| --hsds-token-color-slate-1000-rgb: 31,36,38; | ||
| --hsds-token-color-slate-accent: #47c2ffff; | ||
| --hsds-token-color-cobalt-100: #ebf5ffff; | ||
| --hsds-token-color-cobalt-100-rgb: 235,245,255; | ||
| --hsds-token-color-cobalt-200: #d1e8ffff; | ||
| --hsds-token-color-cobalt-200-rgb: 209,232,255; | ||
| --hsds-token-color-cobalt-300: #9ecbffff; | ||
| --hsds-token-color-cobalt-300-rgb: 158,203,255; | ||
| --hsds-token-color-cobalt-400: #66a3ffff; | ||
| --hsds-token-color-cobalt-400-rgb: 102,163,255; | ||
| --hsds-token-color-cobalt-500: #4176faff; | ||
| --hsds-token-color-cobalt-500-rgb: 65,118,250; | ||
| --hsds-token-color-cobalt-600: #304ddbff; | ||
| --hsds-token-color-cobalt-600-rgb: 48,77,219; | ||
| --hsds-token-color-cobalt-700: #263aadff; | ||
| --hsds-token-color-cobalt-700-rgb: 38,58,173; | ||
| --hsds-token-color-cobalt-800: #1c2674ff; | ||
| --hsds-token-color-cobalt-800-rgb: 28,38,116; | ||
| --hsds-token-color-cobalt-900: #171952ff; | ||
| --hsds-token-color-cobalt-900-rgb: 23,25,82; | ||
| --hsds-token-color-cobalt-1000: #0e0e33ff; | ||
| --hsds-token-color-cobalt-1000-rgb: 14,14,51; | ||
| --hsds-token-color-cobalt-accent: #47a3ffff; | ||
| --hsds-token-color-purple-100: #f9f2ffff; | ||
| --hsds-token-color-purple-100-rgb: 249,242,255; | ||
| --hsds-token-color-purple-200: #f2e5ffff; | ||
| --hsds-token-color-purple-200-rgb: 242,229,255; | ||
| --hsds-token-color-purple-300: #d7baf5ff; | ||
| --hsds-token-color-purple-300-rgb: 215,186,245; | ||
| --hsds-token-color-purple-400: #ad82d8ff; | ||
| --hsds-token-color-purple-400-rgb: 173,130,216; | ||
| --hsds-token-color-purple-500: #9163bfff; | ||
| --hsds-token-color-purple-500-rgb: 145,99,191; | ||
| --hsds-token-color-purple-600: #774ba3ff; | ||
| --hsds-token-color-purple-600-rgb: 119,75,163; | ||
| --hsds-token-color-purple-700: #5d407aff; | ||
| --hsds-token-color-purple-700-rgb: 93,64,122; | ||
| --hsds-token-color-purple-800: #48335cff; | ||
| --hsds-token-color-purple-800-rgb: 72,51,92; | ||
| --hsds-token-color-purple-900: #31253dff; | ||
| --hsds-token-color-purple-900-rgb: 49,37,61; | ||
| --hsds-token-color-purple-1000: #271f2eff; | ||
| --hsds-token-color-purple-1000-rgb: 39,31,46; | ||
| --hsds-token-color-purple-accent: #c285ffff; | ||
| --hsds-token-color-magenta-100: #fff2f4ff; | ||
| --hsds-token-color-magenta-100-rgb: 255,242,244; | ||
| --hsds-token-color-magenta-200: #ffe5eaff; | ||
| --hsds-token-color-magenta-200-rgb: 255,229,234; | ||
| --hsds-token-color-magenta-300: #ffc7d3ff; | ||
| --hsds-token-color-magenta-300-rgb: 255,199,211; | ||
| --hsds-token-color-magenta-400: #e5859fff; | ||
| --hsds-token-color-magenta-400-rgb: 229,133,159; | ||
| --hsds-token-color-magenta-500: #bf5878ff; | ||
| --hsds-token-color-magenta-500-rgb: 191,88,120; | ||
| --hsds-token-color-magenta-600: #a34b6bff; | ||
| --hsds-token-color-magenta-600-rgb: 163,75,107; | ||
| --hsds-token-color-magenta-700: #863e5cff; | ||
| --hsds-token-color-magenta-700-rgb: 134,62,92; | ||
| --hsds-token-color-magenta-800: #5e3146ff; | ||
| --hsds-token-color-magenta-800-rgb: 94,49,70; | ||
| --hsds-token-color-magenta-900: #3d2531ff; | ||
| --hsds-token-color-magenta-900-rgb: 61,37,49; | ||
| --hsds-token-color-magenta-1000: #2e2126ff; | ||
| --hsds-token-color-magenta-1000-rgb: 46,33,38; | ||
| --hsds-token-color-magenta-accent: #ff5caaff; | ||
| --hsds-token-color-clay-100: #faf8f7ff; | ||
| --hsds-token-color-clay-100-rgb: 250,248,247; | ||
| --hsds-token-color-clay-200: #f5f2f0ff; | ||
| --hsds-token-color-clay-200-rgb: 245,242,240; | ||
| --hsds-token-color-clay-300: #ede8e6ff; | ||
| --hsds-token-color-clay-300-rgb: 237,232,230; | ||
| --hsds-token-color-clay-400: #ded5d1ff; | ||
| --hsds-token-color-clay-400-rgb: 222,213,209; | ||
| --hsds-token-color-clay-500: #c2b4acff; | ||
| --hsds-token-color-clay-500-rgb: 194,180,172; | ||
| --hsds-token-color-clay-600: #9e8f88ff; | ||
| --hsds-token-color-clay-600-rgb: 158,143,136; | ||
| --hsds-token-color-clay-700: #8a7b74ff; | ||
| --hsds-token-color-clay-700-rgb: 138,123,116; | ||
| --hsds-token-color-clay-800: #756963ff; | ||
| --hsds-token-color-clay-800-rgb: 117,105,99; | ||
| --hsds-token-color-clay-900: #574f4bff; | ||
| --hsds-token-color-clay-900-rgb: 87,79,75; | ||
| --hsds-token-color-clay-1000: #4a4441ff; | ||
| --hsds-token-color-clay-1000-rgb: 74,68,65; | ||
| --hsds-token-color-clay-1100: #33302eff; | ||
| --hsds-token-color-clay-1100-rgb: 51,48,46; | ||
| --hsds-token-color-clay-1200: #262423ff; | ||
| --hsds-token-color-clay-1200-rgb: 38,36,35; | ||
| --hsds-token-color-functional-link-default: var(--hsds-token-color-cobalt-600); | ||
| --hsds-token-color-functional-link-hovered: var(--hsds-token-color-cobalt-700); | ||
| --hsds-token-color-functional-link-pressed: var(--hsds-token-color-cobalt-800); | ||
| --hsds-token-color-functional-link-disabled: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-color-functional-text-headline: var(--hsds-token-color-charcoal-1200); | ||
| --hsds-token-color-functional-text-dark: var(--hsds-token-color-charcoal-900); | ||
| --hsds-token-color-functional-text-default: var(--hsds-token-color-charcoal-800); | ||
| --hsds-token-color-functional-text-light: var(--hsds-token-color-charcoal-700); | ||
| --hsds-token-color-functional-success-text: var(--hsds-token-color-green-800); | ||
| --hsds-token-color-functional-success-icon: var(--hsds-token-color-green-500); | ||
| --hsds-token-color-functional-success-border: var(--hsds-token-color-green-300); | ||
| --hsds-token-color-functional-success-background: var(--hsds-token-color-green-100); | ||
| --hsds-token-color-functional-error-text: var(--hsds-token-color-red-700); | ||
| --hsds-token-color-functional-error-icon: var(--hsds-token-color-red-500); | ||
| --hsds-token-color-functional-error-border: var(--hsds-token-color-red-300); | ||
| --hsds-token-color-functional-error-background: var(--hsds-token-color-red-100); | ||
| --hsds-token-color-functional-warning-text: var(--hsds-token-color-yellow-800); | ||
| --hsds-token-color-functional-warning-icon: var(--hsds-token-color-yellow-400); | ||
| --hsds-token-color-functional-warning-border: var(--hsds-token-color-yellow-200); | ||
| --hsds-token-color-functional-warning-background: var(--hsds-token-color-yellow-100); | ||
| --hsds-token-color-basics-white: #ffffffff; | ||
| --hsds-token-color-basics-black: #000000ff; | ||
| --hsds-token-color-basics-magenta: #ff00ffff; | ||
| --hsds-token-color-basics-cyan: #00ffffff; | ||
| --hsds-token-font-family: "Aktiv Grotesk", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; | ||
| --hsds-token-font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; | ||
| --hsds-token-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; | ||
| --hsds-token-font-size: 13px; | ||
| --hsds-token-measure-focusRing-innerBoxShadowSize: 1px; | ||
| --hsds-token-measure-focusRing-outerBoxShadowSize: 3px; | ||
| --hsds-token-measure-focusRing-insetBoxShadowSize: 2px; | ||
| `; | ||
| exports.tokens = tokens; |
| { | ||
| "name": "@hsds/tokens", | ||
| "version": "2.4.1-prov.0", | ||
| "version": "2.4.1-prov.1", | ||
| "peerDependencies": { | ||
@@ -5,0 +5,0 @@ "prop-types": "~15.7.2", |
| export const tokens = ` | ||
| --hsds-token-accordion-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-accordion-color-text-default: var(--hsds-token-color-text-default); | ||
| --hsds-token-attachment-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-attachment-color-removeButton-hover: var(--hsds-token-color-pink-1000); | ||
| --hsds-token-attachment-color-removeButton-borderHover: var(--hsds-token-color-pink-900); | ||
| --hsds-token-attachment-color-error: var(--hsds-token-color-red-500); | ||
| --hsds-token-attachment-color-brokenButton-text: var(--hsds-token-color-text-light); | ||
| --hsds-token-attachment-color-brokenButton-icon: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-attachment-color-downloadAll-icon: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-attachment-color-downloadAll-iconHover: var(--hsds-token-color-text-light); | ||
| --hsds-token-attachment-color-downloadAll-backgroundHover: var(--hsds-token-color-charcoal-200); | ||
| --hsds-token-avatar-color-initials-text: var(--hsds-token-color-text-light); | ||
| --hsds-token-avatar-color-initials-light: var(--hsds-token-color-charcoal-400); | ||
| --hsds-token-avatarRow-color-counter-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-badge-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-badge-color-fill-text: #ffffffff; | ||
| --hsds-token-badge-color-square-text: var(--hsds-token-color-text-light); | ||
| --hsds-token-badge-color-square-background: var(--hsds-token-color-charcoal-100); | ||
| --hsds-token-badge-color-default: var(--hsds-token-color-charcoal-600); | ||
| --hsds-token-badge-default: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-blankSlate-color-heading: var(--hsds-token-color-text-headline); | ||
| --hsds-token-blankSlate-color-text: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-blankSlate-color-textBold: var(--hsds-token-color-text-default); | ||
| --hsds-token-blankSlate-color-light-background: var(--hsds-token-color-charcoal-100); | ||
| --hsds-token-blankSlate-color-light-text: var(--hsds-token-color-text-light); | ||
| --hsds-token-blankSlate-color-light-textBold: var(--hsds-token-color-text-dark); | ||
| --hsds-token-button-color-blue-main: var(--hsds-token-color-blue-500); | ||
| --hsds-token-button-color-blue-hover: var(--hsds-token-color-blue-600); | ||
| --hsds-token-button-color-blue-text: #ffffffff; | ||
| --hsds-token-button-color-blue-outline-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-button-color-blue-outline-border: var(--hsds-token-color-blue-500); | ||
| --hsds-token-button-color-blue-outline-borderHover: var(--hsds-token-color-blue-500); | ||
| --hsds-token-button-color-blue-outline-text: var(--hsds-token-color-blue-600); | ||
| --hsds-token-button-color-blue-outline-textHover: var(--hsds-token-color-blue-700); | ||
| --hsds-token-button-color-blue-outline-hover: var(--hsds-token-color-blue-100); | ||
| --hsds-token-button-color-blue-outline-hoverIconOnly: var(--hsds-token-color-blue-200); | ||
| --hsds-token-button-color-blue-outline-textSeamlessHover: var(--hsds-token-color-blue-800); | ||
| --hsds-token-button-color-red-main: var(--hsds-token-color-pink-950); | ||
| --hsds-token-button-color-red-hover: var(--hsds-token-color-pink-1000); | ||
| --hsds-token-button-color-red-text: #ffffffff; | ||
| --hsds-token-button-color-red-outline-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-button-color-red-outline-border: var(--hsds-token-color-pink-900); | ||
| --hsds-token-button-color-red-outline-borderHover: var(--hsds-token-color-pink-900); | ||
| --hsds-token-button-color-red-outline-text: var(--hsds-token-color-pink-950); | ||
| --hsds-token-button-color-red-outline-textHover: var(--hsds-token-color-pink-1000); | ||
| --hsds-token-button-color-red-outline-hover: var(--hsds-token-color-pink-100); | ||
| --hsds-token-button-color-red-outline-hoverIconOnly: var(--hsds-token-color-pink-200); | ||
| --hsds-token-button-color-red-outline-textSeamlessHover: var(--hsds-token-color-pink-1000); | ||
| --hsds-token-button-color-green-main: var(--hsds-token-color-green-750); | ||
| --hsds-token-button-color-green-hover: var(--hsds-token-color-green-800); | ||
| --hsds-token-button-color-green-text: #ffffffff; | ||
| --hsds-token-button-color-green-outline-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-button-color-green-outline-border: var(--hsds-token-color-green-500); | ||
| --hsds-token-button-color-green-outline-borderHover: var(--hsds-token-color-green-500); | ||
| --hsds-token-button-color-green-outline-text: var(--hsds-token-color-green-750); | ||
| --hsds-token-button-color-green-outline-textHover: var(--hsds-token-color-green-800); | ||
| --hsds-token-button-color-green-outline-hover: var(--hsds-token-color-green-100); | ||
| --hsds-token-button-color-green-outline-hoverIconOnly: var(--hsds-token-color-green-200); | ||
| --hsds-token-button-color-green-outline-textSeamlessHover: var(--hsds-token-color-green-900); | ||
| --hsds-token-button-color-grey-main: var(--hsds-token-color-charcoal-700); | ||
| --hsds-token-button-color-grey-hover: var(--hsds-token-color-charcoal-800); | ||
| --hsds-token-button-color-grey-text: #ffffffff; | ||
| --hsds-token-button-color-grey-outline-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-button-color-grey-outline-border: var(--hsds-token-color-grey-700); | ||
| --hsds-token-button-color-grey-outline-borderHover: var(--hsds-token-color-grey-800); | ||
| --hsds-token-button-color-grey-outline-text: var(--hsds-token-color-charcoal-700); | ||
| --hsds-token-button-color-grey-outline-textHover: var(--hsds-token-color-charcoal-800); | ||
| --hsds-token-button-color-grey-outline-hover: var(--hsds-token-color-grey-200); | ||
| --hsds-token-button-color-grey-outline-hoverIconOnly: var(--hsds-token-color-grey-300); | ||
| --hsds-token-button-color-grey-outline-textSeamlessHover: var(--hsds-token-color-charcoal-1100); | ||
| --hsds-token-button-color-yellow-main: var(--hsds-token-color-orange-600); | ||
| --hsds-token-button-color-yellow-hover: var(--hsds-token-color-orange-700); | ||
| --hsds-token-button-color-yellow-text: #ffffffff; | ||
| --hsds-token-button-color-yellow-outline-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-button-color-yellow-outline-border: var(--hsds-token-color-yellow-400); | ||
| --hsds-token-button-color-yellow-outline-borderHover: var(--hsds-token-color-yellow-400); | ||
| --hsds-token-button-color-yellow-outline-text: var(--hsds-token-color-orange-600); | ||
| --hsds-token-button-color-yellow-outline-textHover: var(--hsds-token-color-orange-700); | ||
| --hsds-token-button-color-yellow-outline-hover: var(--hsds-token-color-yellow-100); | ||
| --hsds-token-button-color-yellow-outline-hoverIconOnly: var(--hsds-token-color-yellow-100); | ||
| --hsds-token-button-color-yellow-outline-textSeamlessHover: var(--hsds-token-color-orange-700); | ||
| --hsds-token-button-color-disabled-main: var(--hsds-token-color-grey-500); | ||
| --hsds-token-button-color-disabled-text: #ffffffff; | ||
| --hsds-token-button-color-disabled-outline-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-button-color-disabled-outline-border: var(--hsds-token-color-grey-600); | ||
| --hsds-token-button-color-disabled-outline-text: var(--hsds-token-color-grey-800); | ||
| --hsds-token-card-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-checkmarkCard-color-text-heading: var(--hsds-token-color-text-dark); | ||
| --hsds-token-checkmarkCard-color-text-subtitle: var(--hsds-token-color-text-light); | ||
| --hsds-token-checkmarkCard-color-text-disabled: var(--hsds-token-color-text-light); | ||
| --hsds-token-choice-color-disabled: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-closeButton-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-condition-color-selected-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-copyValue-color-icon: var(--hsds-token-color-text-default); | ||
| --hsds-token-copyValue-color-text: var(--hsds-token-color-text-light); | ||
| --hsds-token-copyValue-color-prefix: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-datePicker-color-range-background: var(--hsds-token-color-blue-200); | ||
| --hsds-token-datePicker-color-range-selectedBackground: var(--hsds-token-color-blue-500); | ||
| --hsds-token-datePicker-color-range-text: var(--hsds-token-color-blue-500); | ||
| --hsds-token-datePicker-color-range-textHover: var(--hsds-token-color-blue-600); | ||
| --hsds-token-datePicker-color-currentDay-background: var(--hsds-token-color-grey-400); | ||
| --hsds-token-datePicker-color-currentDay-text: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-datePicker-color-deepNavigator-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-datePicker-color-nav-text: var(--hsds-token-color-text-default); | ||
| --hsds-token-datePicker-color-nav-disabled: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-datePicker-color-weekdays-text: var(--hsds-token-color-text-default); | ||
| --hsds-token-datePicker-color-day-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-datePicker-color-day-disabled: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-datePicker-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-datePicker-color-current-background: var(--hsds-token-color-grey-300); | ||
| --hsds-token-datePicker-color-current-text: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-dropList-color-wrapper-border: var(--hsds-token-color-grey-600); | ||
| --hsds-token-dropList-color-wrapper-text: var(--hsds-token-color-grey-600); | ||
| --hsds-token-dropList-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-dropList-color-input-text: var(--hsds-token-color-charcoal-900); | ||
| --hsds-token-dropList-color-listItem-text: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-dropList-color-listItem-disabled-text: var(--hsds-token-color-charcoal-650); | ||
| --hsds-token-dropList-color-listItem-selected-text: #ffffffff; | ||
| --hsds-token-dropList-color-listItem-selected-background: var(--hsds-token-color-blue-600); | ||
| --hsds-token-dropList-color-listItem-highlighted-text: var(--hsds-token-color-charcoal-1100); | ||
| --hsds-token-dropList-color-listItem-highlighted-background: var(--hsds-token-color-blue-100); | ||
| --hsds-token-dropList-color-listItem-multiple-highlighted-text: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-dropList-color-selectedBadge-border: var(--hsds-token-color-grey-600); | ||
| --hsds-token-dropList-color-selectedBadge-hover: var(--hsds-token-color-blue-500); | ||
| --hsds-token-dropList-color-selectedBadge-disabled-border: var(--hsds-token-color-grey-600); | ||
| --hsds-token-dropList-color-selectedBadge-disabled-shadow: var(--hsds-token-color-grey-500); | ||
| --hsds-token-dropList-color-selectedBadge-disabled-background: var(--hsds-token-color-grey-200); | ||
| --hsds-token-dropList-color-divider: var(--hsds-token-color-grey-500); | ||
| --hsds-token-dropList-color-groupLabel: var(--hsds-token-color-charcoal-600); | ||
| --hsds-token-dropList-color-togglers-navLink-text: var(--hsds-token-color-blue-300); | ||
| --hsds-token-dropList-color-togglers-splitButton-shadowDisabled: var(--hsds-token-button-color-disabled-outline-border); | ||
| --hsds-token-dropList-color-togglers-select-shadow: var(--hsds-token-color-grey-800); | ||
| --hsds-token-dropList-color-togglers-select-text: var(--hsds-token-color-charcoal-900); | ||
| --hsds-token-dropList-color-togglers-select-shadowError: var(--hsds-token-color-state-error-borderColor); | ||
| --hsds-token-dropList-color-togglers-select-disabled: var(--hsds-token-color-charcoal-600); | ||
| --hsds-token-dropList-color-togglers-selectArrow-border: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-editableField-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-emojiPicker-color-icon: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-filteredList-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-filteredList-color-item-text: var(--hsds-token-color-text-light); | ||
| --hsds-token-filteredList-color-badge-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-filteredList-color-separator: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-floatingBar-color-background: var(--hsds-token-color-charcoal-1100); | ||
| --hsds-token-floatingBar-color-button-iconDefault: var(--hsds-token-color-charcoal-600); | ||
| --hsds-token-floatingBar-color-button-iconHover: #ffffffff; | ||
| --hsds-token-floatingBar-color-button-backgroundDefault: transparent; | ||
| --hsds-token-floatingBar-color-button-backgroundHover: var(--hsds-token-color-charcoal-900); | ||
| --hsds-token-floatingBar-color-divider: var(--hsds-token-color-charcoal-800); | ||
| --hsds-token-formField-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-formField-color-label-text: var(--hsds-token-color-text-default); | ||
| --hsds-token-formField-color-itemMain-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-formField-color-itemSecondary-text: var(--hsds-token-color-text-light); | ||
| --hsds-token-heading-color-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-heading-color-small-text: var(--hsds-token-color-text-default); | ||
| --hsds-token-input-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-input-color-text: var(--hsds-token-color-text-default); | ||
| --hsds-token-input-color-addOn-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-input-color-placeholder: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-keyboardBadge-color-text: var(--hsds-token-color-text-default); | ||
| --hsds-token-loadingDots-color-icon: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-message-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-message-color-action: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-message-color-bubble-text: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-message-color-bubble-embedBodyText: var(--hsds-token-color-text-default); | ||
| --hsds-token-message-color-bubble-embedFromText: var(--hsds-token-color-text-default); | ||
| --hsds-token-message-color-embed: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-message-color-media: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-messageCard-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-messageCard-color-subtitle: var(--hsds-token-color-text-light); | ||
| --hsds-token-messageCard-color-body: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-messageCard-color-blockquote: var(--hsds-token-color-text-light); | ||
| --hsds-token-messageCard-color-pre: var(--hsds-token-color-charcoal-1100); | ||
| --hsds-token-messageCard-color-strong: var(--hsds-token-color-charcoal-1100); | ||
| --hsds-token-messageCard-color-articleCard-title: var(--hsds-token-color-text-dark); | ||
| --hsds-token-messageCard-color-articleCard-meta: var(--hsds-token-color-text-light); | ||
| --hsds-token-messageCard-color-articleCard-content: var(--hsds-token-color-text-light); | ||
| --hsds-token-messageCard-color-surveyNps: var(--hsds-token-color-text-light); | ||
| --hsds-token-messageCard-color-survey-feedback: var(--hsds-token-color-text-default); | ||
| --hsds-token-messageCard-color-survey-spinner: var(--hsds-token-color-text-default); | ||
| --hsds-token-messageCard-color-survey-confirmation: var(--hsds-token-color-text-default); | ||
| --hsds-token-messageCard-color-survey-multiple: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-messageCard-color-modal-title: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-messageCard-color-modal-label: var(--hsds-token-color-text-light); | ||
| --hsds-token-messageCard-color-modal-body: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-messageCard-color-modal-closeButton: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-messageCard-color-modal-closeButtonHover: var(--hsds-token-color-text-dark); | ||
| --hsds-token-messageCard-color-nps-poweredby: var(--hsds-token-color-text-light); | ||
| --hsds-token-messageCard-color-nps-question: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-messageCard-color-nps-feedback: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-modal-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-modal-color-header-title: var(--hsds-token-color-text-default); | ||
| --hsds-token-modal-color-header-description: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-nav-color-item-text: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-nav-color-item-hover: var(--hsds-token-color-text-light); | ||
| --hsds-token-nav-color-item-active: var(--hsds-token-color-text-default); | ||
| --hsds-token-nav-color-text: var(--hsds-token-color-text-default); | ||
| --hsds-token-page-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-page-color-header-title: var(--hsds-token-color-text-headline); | ||
| --hsds-token-page-color-header-subtitle: var(--hsds-token-color-text-dark); | ||
| --hsds-token-page-minWidth: 480px; | ||
| --hsds-token-page-maxWidth-default: 700px; | ||
| --hsds-token-page-maxWidth-wide: 1000px; | ||
| --hsds-token-page-actions-margin-bottom: 100px; | ||
| --hsds-token-page-actions-margin-top: 30px; | ||
| --hsds-token-page-actions-spacing: 10px; | ||
| --hsds-token-page-card-radius: 4px; | ||
| --hsds-token-page-card-padding-default-top: 50px; | ||
| --hsds-token-page-card-padding-default-bottom: 65px; | ||
| --hsds-token-page-card-padding-default-side: 100px; | ||
| --hsds-token-page-card-padding-narrow-top: 40px; | ||
| --hsds-token-page-card-padding-narrow-bottom: 50px; | ||
| --hsds-token-page-card-padding-narrow-side: 50px; | ||
| --hsds-token-page-card-padding-wide-top: 60px; | ||
| --hsds-token-page-card-padding-wide-bottom: 80px; | ||
| --hsds-token-page-card-padding-wide-side: 175px; | ||
| --hsds-token-pagination-color-information: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-pagination-color-range: var(--hsds-token-color-text-dark); | ||
| --hsds-token-pagination-color-buttonOutlined: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-popover-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-popover-color-heading: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-radioCard-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-radioCard-color-icon: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-radioCard-color-checked: var(--hsds-token-color-text-dark); | ||
| --hsds-token-radioCard-color-heading: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-radioCard-color-content: var(--hsds-token-color-text-default); | ||
| --hsds-token-radioCard-color-contentWithHeading: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-scrollable-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-scrollableContainer-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-sidePanel-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-sidePanel-color-heading: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-sidePanel-color-subheading: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-sidePanel-color-close: var(--hsds-token-color-text-light); | ||
| --hsds-token-sidePanel-color-closeHover: var(--hsds-token-color-text-dark); | ||
| --hsds-token-simpleModal-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-simpleModal-color-heading: var(--hsds-token-color-text-headline); | ||
| --hsds-token-simpleModal-color-confirmationBody: var(--hsds-token-color-text-dark); | ||
| --hsds-token-sortable-color-dragHandler-default: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-sortable-color-dragHandler-active: var(--hsds-token-color-text-light); | ||
| --hsds-token-sortable-color-dragHandler-disabled: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-statusBar-color-light-error-border: var(--hsds-token-color-red-300); | ||
| --hsds-token-statusBar-color-light-info-border: var(--hsds-token-color-blue-300); | ||
| --hsds-token-statusBar-color-light-success-border: var(--hsds-token-color-green-300); | ||
| --hsds-token-statusBar-color-light-warning-border: var(--hsds-token-color-yellow-300); | ||
| --hsds-token-statusBar-color-bold-error-border: var(--hsds-token-color-red-600); | ||
| --hsds-token-statusBar-color-bold-error-button: var(--hsds-token-color-red-700); | ||
| --hsds-token-statusBar-color-bold-info-border: var(--hsds-token-color-blue-600); | ||
| --hsds-token-statusBar-color-bold-info-button: var(--hsds-token-color-blue-700); | ||
| --hsds-token-statusBar-color-bold-success-border: var(--hsds-token-color-green-600); | ||
| --hsds-token-statusBar-color-bold-success-button: var(--hsds-token-color-green-700); | ||
| --hsds-token-statusBar-color-bold-warning-border: var(--hsds-token-color-yellow-600); | ||
| --hsds-token-statusBar-color-bold-warning-button: var(--hsds-token-color-yellow-700); | ||
| --hsds-token-statusDot-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-statusDot-color-light-default: var(--hsds-token-color-grey-600); | ||
| --hsds-token-statusDot-color-light-active: var(--hsds-token-color-green-500); | ||
| --hsds-token-statusDot-color-light-inactive: var(--hsds-token-color-grey-600); | ||
| --hsds-token-statusDot-color-light-offline: var(--hsds-token-color-red-500); | ||
| --hsds-token-statusDot-color-light-busy: var(--hsds-token-color-yellow-500); | ||
| --hsds-token-statusDot-color-light-custom: var(--hsds-token-color-purple-400); | ||
| --hsds-token-statusDot-color-dark-default: var(--hsds-token-color-grey-600); | ||
| --hsds-token-statusDot-color-dark-active: var(--hsds-token-color-green-500); | ||
| --hsds-token-statusDot-color-dark-inactive: var(--hsds-token-color-grey-600); | ||
| --hsds-token-statusDot-color-dark-offline: var(--hsds-token-color-red-500); | ||
| --hsds-token-statusDot-color-dark-busy: var(--hsds-token-color-yellow-500); | ||
| --hsds-token-statusDot-color-dark-custom: var(--hsds-token-color-purple-400); | ||
| --hsds-token-stepper-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-switchComponent-color-error: var(--hsds-token-color-pink-900); | ||
| --hsds-token-switchComponent-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-tabBar-color-secContent: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-tabBar-color-strong: var(--hsds-token-color-text-dark); | ||
| --hsds-token-table-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-table-color-typeAction: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-table-color-sortableCell: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-tag-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-tag-color-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-tag-color-showAll: var(--hsds-token-color-text-dark); | ||
| --hsds-token-tag-color-clearAll: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-tag-color-clearAllHover: var(--hsds-token-color-text-light); | ||
| --hsds-token-timeline-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-toolbar-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-typingDots-color-icon: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-verificationCode-color-error: var(--hsds-token-color-pink-900); | ||
| --hsds-token-verificationCode-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-verificationCode-color-digit: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-color-blue-100: #F3FBFF; | ||
| --hsds-token-color-blue-100-rgb: 243,251,255; | ||
| --hsds-token-color-blue-200: #D6EDFF; | ||
| --hsds-token-color-blue-200-rgb: 214,237,255; | ||
| --hsds-token-color-blue-300: #A0D4FF; | ||
| --hsds-token-color-blue-300-rgb: 160,212,255; | ||
| --hsds-token-color-blue-400: #57B0FB; | ||
| --hsds-token-color-blue-400-rgb: 87,176,251; | ||
| --hsds-token-color-blue-500: #1292EE; | ||
| --hsds-token-color-blue-500-rgb: 18,146,238; | ||
| --hsds-token-color-blue-600: #0077CC; | ||
| --hsds-token-color-blue-600-rgb: 0,119,204; | ||
| --hsds-token-color-blue-700: #005CA4; | ||
| --hsds-token-color-blue-700-rgb: 0,92,164; | ||
| --hsds-token-color-blue-800: #034077; | ||
| --hsds-token-color-blue-800-rgb: 3,64,119; | ||
| --hsds-token-color-blue-900: #002651; | ||
| --hsds-token-color-blue-900-rgb: 0,38,81; | ||
| --hsds-token-color-blue-default: var(--hsds-token-color-blue-500); | ||
| --hsds-token-color-blue-accent: var(--hsds-token-color-blue-500); | ||
| --hsds-token-color-charcoal-100: #f9fafa; | ||
| --hsds-token-color-charcoal-100-rgb: 249,250,250; | ||
| --hsds-token-color-charcoal-200: #f1f3f5; | ||
| --hsds-token-color-charcoal-200-rgb: 241,243,245; | ||
| --hsds-token-color-charcoal-300: #e1e7eb; | ||
| --hsds-token-color-charcoal-300-rgb: 225,231,235; | ||
| --hsds-token-color-charcoal-400: #ccd6de; | ||
| --hsds-token-color-charcoal-400-rgb: 204,214,222; | ||
| --hsds-token-color-charcoal-500: #C5CED6; | ||
| --hsds-token-color-charcoal-500-rgb: 197,206,214; | ||
| --hsds-token-color-charcoal-530: #B7C2CC; | ||
| --hsds-token-color-charcoal-530-rgb: 183,194,204; | ||
| --hsds-token-color-charcoal-550: #A5B2BD; | ||
| --hsds-token-color-charcoal-550-rgb: 165,178,189; | ||
| --hsds-token-color-charcoal-600: #93A1B0; | ||
| --hsds-token-color-charcoal-600-rgb: 147,161,176; | ||
| --hsds-token-color-charcoal-650: #748494; | ||
| --hsds-token-color-charcoal-650-rgb: 116,132,148; | ||
| --hsds-token-color-charcoal-700: #556575; | ||
| --hsds-token-color-charcoal-700-rgb: 85,101,117; | ||
| --hsds-token-color-charcoal-800: #405261; | ||
| --hsds-token-color-charcoal-800-rgb: 64,82,97; | ||
| --hsds-token-color-charcoal-900: #314351; | ||
| --hsds-token-color-charcoal-900-rgb: 49,67,81; | ||
| --hsds-token-color-charcoal-1000: #253642; | ||
| --hsds-token-color-charcoal-1000-rgb: 37,54,66; | ||
| --hsds-token-color-charcoal-1100: #1d2b36; | ||
| --hsds-token-color-charcoal-1100-rgb: 29,43,54; | ||
| --hsds-token-color-charcoal-1200: #1d2b36; | ||
| --hsds-token-color-charcoal-1200-rgb: 29,43,54; | ||
| --hsds-token-color-charcoal-default: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-color-charcoal-accent: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-color-grey-200: var(--hsds-token-color-charcoal-100); | ||
| --hsds-token-color-grey-200-rgb: var(--hsds-token-color-charcoal-100-rgb); | ||
| --hsds-token-color-grey-300: var(--hsds-token-color-charcoal-200); | ||
| --hsds-token-color-grey-300-rgb: var(--hsds-token-color-charcoal-200-rgb); | ||
| --hsds-token-color-grey-400: var(--hsds-token-color-charcoal-300); | ||
| --hsds-token-color-grey-400-rgb: var(--hsds-token-color-charcoal-300-rgb); | ||
| --hsds-token-color-grey-500: var(--hsds-token-color-charcoal-400); | ||
| --hsds-token-color-grey-500-rgb: var(--hsds-token-color-charcoal-400-rgb); | ||
| --hsds-token-color-grey-600: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-color-grey-600-rgb: var(--hsds-token-color-charcoal-500-rgb); | ||
| --hsds-token-color-grey-700: var(--hsds-token-color-charcoal-530); | ||
| --hsds-token-color-grey-700-rgb: var(--hsds-token-color-charcoal-530-rgb); | ||
| --hsds-token-color-grey-800: var(--hsds-token-color-charcoal-550); | ||
| --hsds-token-color-grey-800-rgb: var(--hsds-token-color-charcoal-550-rgb); | ||
| --hsds-token-color-grey-default: var(--hsds-token-color-charcoal-400); | ||
| --hsds-token-color-grey-accent: var(--hsds-token-color-charcoal-400); | ||
| --hsds-token-color-indigo-100: #F2F6FF; | ||
| --hsds-token-color-indigo-100-rgb: 242,246,255; | ||
| --hsds-token-color-indigo-200: #DFE7FF; | ||
| --hsds-token-color-indigo-200-rgb: 223,231,255; | ||
| --hsds-token-color-indigo-300: #B2C8FB; | ||
| --hsds-token-color-indigo-300-rgb: 178,200,251; | ||
| --hsds-token-color-indigo-400: #79A1F8; | ||
| --hsds-token-color-indigo-400-rgb: 121,161,248; | ||
| --hsds-token-color-indigo-500: #527CEB; | ||
| --hsds-token-color-indigo-500-rgb: 82,124,235; | ||
| --hsds-token-color-indigo-600: #3B64D2; | ||
| --hsds-token-color-indigo-600-rgb: 59,100,210; | ||
| --hsds-token-color-indigo-700: #2549A8; | ||
| --hsds-token-color-indigo-700-rgb: 37,73,168; | ||
| --hsds-token-color-indigo-800: #16337F; | ||
| --hsds-token-color-indigo-800-rgb: 22,51,127; | ||
| --hsds-token-color-indigo-900: #071E57; | ||
| --hsds-token-color-indigo-900-rgb: 7,30,87; | ||
| --hsds-token-color-indigo-1000: var(--hsds-token-color-cobalt-900); | ||
| --hsds-token-color-indigo-1000-rgb: var(--hsds-token-color-cobalt-900-rgb); | ||
| --hsds-token-color-indigo-default: var(--hsds-token-color-indigo-500); | ||
| --hsds-token-color-indigo-accent: var(--hsds-token-color-indigo-500); | ||
| --hsds-token-color-lavender-100: #F9F9FF; | ||
| --hsds-token-color-lavender-100-rgb: 249,249,255; | ||
| --hsds-token-color-lavender-200: #EBECFF; | ||
| --hsds-token-color-lavender-200-rgb: 235,236,255; | ||
| --hsds-token-color-lavender-300: #D9DCFD; | ||
| --hsds-token-color-lavender-300-rgb: 217,220,253; | ||
| --hsds-token-color-lavender-400: #B9BEFF; | ||
| --hsds-token-color-lavender-400-rgb: 185,190,255; | ||
| --hsds-token-color-lavender-500: #9FA6FF; | ||
| --hsds-token-color-lavender-500-rgb: 159,166,255; | ||
| --hsds-token-color-lavender-600: #818AEC; | ||
| --hsds-token-color-lavender-600-rgb: 129,138,236; | ||
| --hsds-token-color-lavender-700: #6269C5; | ||
| --hsds-token-color-lavender-700-rgb: 98,105,197; | ||
| --hsds-token-color-lavender-800: #404996; | ||
| --hsds-token-color-lavender-800-rgb: 64,73,150; | ||
| --hsds-token-color-lavender-900: #232A5C; | ||
| --hsds-token-color-lavender-900-rgb: 35,42,92; | ||
| --hsds-token-color-lavender-default: var(--hsds-token-color-lavender-500); | ||
| --hsds-token-color-lavender-accent: var(--hsds-token-color-lavender-500); | ||
| --hsds-token-color-pink-100: #FFF9FB; | ||
| --hsds-token-color-pink-100-rgb: 255,249,251; | ||
| --hsds-token-color-pink-200: #FFEEF1; | ||
| --hsds-token-color-pink-200-rgb: 255,238,241; | ||
| --hsds-token-color-pink-300: #FFE1E7; | ||
| --hsds-token-color-pink-300-rgb: 255,225,231; | ||
| --hsds-token-color-pink-400: #FFCCD7; | ||
| --hsds-token-color-pink-400-rgb: 255,204,215; | ||
| --hsds-token-color-pink-500: #FFB3C3; | ||
| --hsds-token-color-pink-500-rgb: 255,179,195; | ||
| --hsds-token-color-pink-600: #FD9AAE; | ||
| --hsds-token-color-pink-600-rgb: 253,154,174; | ||
| --hsds-token-color-pink-700: #FD9AAE; | ||
| --hsds-token-color-pink-700-rgb: 253,154,174; | ||
| --hsds-token-color-pink-800: #FC5D7D; | ||
| --hsds-token-color-pink-800-rgb: 252,93,125; | ||
| --hsds-token-color-pink-900: #F23459; | ||
| --hsds-token-color-pink-900-rgb: 242,52,89; | ||
| --hsds-token-color-pink-950: #E9074B; | ||
| --hsds-token-color-pink-950-rgb: 233,7,75; | ||
| --hsds-token-color-pink-1000: #C5003B; | ||
| --hsds-token-color-pink-1000-rgb: 197,0,59; | ||
| --hsds-token-color-pink-default: var(--hsds-token-color-pink-500); | ||
| --hsds-token-color-pink-accent: var(--hsds-token-color-pink-500); | ||
| --hsds-token-color-green-100: #F5FFF9; | ||
| --hsds-token-color-green-100-rgb: 245,255,249; | ||
| --hsds-token-color-green-200: #E3FBEE; | ||
| --hsds-token-color-green-200-rgb: 227,251,238; | ||
| --hsds-token-color-green-300: #C2F0D7; | ||
| --hsds-token-color-green-300-rgb: 194,240,215; | ||
| --hsds-token-color-green-400: #87DBAE; | ||
| --hsds-token-color-green-400-rgb: 135,219,174; | ||
| --hsds-token-color-green-500: #56C288; | ||
| --hsds-token-color-green-500-rgb: 86,194,136; | ||
| --hsds-token-color-green-600: #39AC6E; | ||
| --hsds-token-color-green-600-rgb: 57,172,110; | ||
| --hsds-token-color-green-700: #268C55; | ||
| --hsds-token-color-green-700-rgb: 38,140,85; | ||
| --hsds-token-color-green-750: #248451; | ||
| --hsds-token-color-green-750-rgb: 36,132,81; | ||
| --hsds-token-color-green-800: #106236; | ||
| --hsds-token-color-green-800-rgb: 16,98,54; | ||
| --hsds-token-color-green-900: #003C1C; | ||
| --hsds-token-color-green-900-rgb: 0,60,28; | ||
| --hsds-token-color-green-1000: #222923ff; | ||
| --hsds-token-color-green-1000-rgb: 34,41,35; | ||
| --hsds-token-color-green-accent: var(--hsds-token-color-green-500); | ||
| --hsds-token-color-green-default: var(--hsds-token-color-green-500); | ||
| --hsds-token-color-yellow-50: #FFFBF3; | ||
| --hsds-token-color-yellow-100: #FFF9EF; | ||
| --hsds-token-color-yellow-100-rgb: 255,249,239; | ||
| --hsds-token-color-yellow-200: #FFF2D7; | ||
| --hsds-token-color-yellow-200-rgb: 255,242,215; | ||
| --hsds-token-color-yellow-300: #FFE7B8; | ||
| --hsds-token-color-yellow-300-rgb: 255,231,184; | ||
| --hsds-token-color-yellow-400: #FDD88E; | ||
| --hsds-token-color-yellow-400-rgb: 253,216,142; | ||
| --hsds-token-color-yellow-500: #FFC555; | ||
| --hsds-token-color-yellow-500-rgb: 255,197,85; | ||
| --hsds-token-color-yellow-600: #FAB347; | ||
| --hsds-token-color-yellow-600-rgb: 250,179,71; | ||
| --hsds-token-color-yellow-700: #E89635; | ||
| --hsds-token-color-yellow-700-rgb: 232,150,53; | ||
| --hsds-token-color-yellow-800: #CE7129; | ||
| --hsds-token-color-yellow-800-rgb: 206,113,41; | ||
| --hsds-token-color-yellow-900: #B24319; | ||
| --hsds-token-color-yellow-900-rgb: 178,67,25; | ||
| --hsds-token-color-yellow-950: #84142D; | ||
| --hsds-token-color-yellow-950-rgb: 132,20,45; | ||
| --hsds-token-color-yellow-1000: #2b261dff; | ||
| --hsds-token-color-yellow-1000-rgb: 43,38,29; | ||
| --hsds-token-color-yellow-accent: var(--hsds-token-color-yellow-500); | ||
| --hsds-token-color-yellow-default: var(--hsds-token-color-yellow-500); | ||
| --hsds-token-color-link-default: var(--hsds-token-color-blue-600); | ||
| --hsds-token-color-link-base: var(--hsds-token-color-blue-600); | ||
| --hsds-token-color-link-hover: var(--hsds-token-color-blue-500); | ||
| --hsds-token-color-link-active: var(--hsds-token-color-blue-500); | ||
| --hsds-token-color-link-focus: var(--hsds-token-color-blue-500); | ||
| --hsds-token-color-link-disabled: var(--hsds-token-color-grey-800); | ||
| --hsds-token-color-focusRing-default-innerColor: var(--hsds-token-color-blue-500); | ||
| --hsds-token-color-focusRing-default-outerColor: var(--hsds-token-color-blue-500); | ||
| --hsds-token-color-focusRing-default-innerColorOverDark: var(--hsds-token-color-blue-500); | ||
| --hsds-token-color-focusRing-default-outerColorOverDark: var(--hsds-token-color-blue-500); | ||
| --hsds-token-color-focusRing-error-innerColor: var(--hsds-token-color-state-error-borderColor); | ||
| --hsds-token-color-focusRing-error-outerColor: var(--hsds-token-color-state-error-borderColor); | ||
| --hsds-token-color-focusRing-error-innerColorOverDark: var(--hsds-token-color-state-error-borderColor); | ||
| --hsds-token-color-focusRing-error-outerColorOverDark: var(--hsds-token-color-state-error-borderColor); | ||
| --hsds-token-color-focusRing-warning-innerColor: var(--hsds-token-color-state-warning-borderColor); | ||
| --hsds-token-color-focusRing-warning-outerColor: var(--hsds-token-color-state-warning-borderColor); | ||
| --hsds-token-color-focusRing-warning-innerColorOverDark: var(--hsds-token-color-state-warning-borderColor); | ||
| --hsds-token-color-focusRing-warning-outerColorOverDark: var(--hsds-token-color-state-warning-borderColor); | ||
| --hsds-token-color-focusRing-success-innerColor: var(--hsds-token-color-state-success-borderColor); | ||
| --hsds-token-color-focusRing-success-outerColor: var(--hsds-token-color-state-success-borderColor); | ||
| --hsds-token-color-focusRing-success-innerColorOverDark: var(--hsds-token-color-state-success-borderColor); | ||
| --hsds-token-color-focusRing-success-outerColorOverDark: var(--hsds-token-color-state-success-borderColor); | ||
| --hsds-token-color-text-default: currentColor; | ||
| --hsds-token-color-text-headline: var(--hsds-token-color-charcoal-1200); | ||
| --hsds-token-color-text-dark: var(--hsds-token-color-charcoal-900); | ||
| --hsds-token-color-text-light: var(--hsds-token-color-charcoal-700); | ||
| --hsds-token-color-text-disabled: var(--hsds-token-color-charcoal-600); | ||
| --hsds-token-color-text-subtle: var(--hsds-token-color-charcoal-800); | ||
| --hsds-token-color-text-slightlyMuted: var(--hsds-token-color-charcoal-700); | ||
| --hsds-token-color-text-muted: var(--hsds-token-color-charcoal-650); | ||
| --hsds-token-color-text-faint: var(--hsds-token-color-charcoal-600); | ||
| --hsds-token-color-text-extraMuted: var(--hsds-token-color-grey-600); | ||
| --hsds-token-color-border-default: var(--hsds-token-color-grey-400); | ||
| --hsds-token-color-border-divider: var(--hsds-token-color-grey-300); | ||
| --hsds-token-color-border-ui-default: var(--hsds-token-color-grey-500); | ||
| --hsds-token-color-border-ui-dark: var(--hsds-token-color-grey-600); | ||
| --hsds-token-color-state-error-text: var(--hsds-token-color-red-500); | ||
| --hsds-token-color-state-error-backgroundDark: var(--hsds-token-color-red-500); | ||
| --hsds-token-color-state-error-icon: var(--hsds-token-color-red-500); | ||
| --hsds-token-color-state-error-borderColor: var(--hsds-token-color-red-500); | ||
| --hsds-token-color-state-error-backgroundLight: var(--hsds-token-color-red-200); | ||
| --hsds-token-color-state-error-default: var(--hsds-token-color-red-500); | ||
| --hsds-token-color-state-error-color: var(--hsds-token-color-red-500); | ||
| --hsds-token-color-state-error-backgroundColor: var(--hsds-token-color-red-200); | ||
| --hsds-token-color-state-info-text: var(--hsds-token-color-blue-500); | ||
| --hsds-token-color-state-info-backgroundDark: var(--hsds-token-color-state-info-borderColor); | ||
| --hsds-token-color-state-info-icon: var(--hsds-token-color-blue-500); | ||
| --hsds-token-color-state-info-borderColor: var(--hsds-token-color-blue-500); | ||
| --hsds-token-color-state-info-backgroundLight: var(--hsds-token-color-blue-200); | ||
| --hsds-token-color-state-info-default: var(--hsds-token-color-blue-500); | ||
| --hsds-token-color-state-info-color: var(--hsds-token-color-blue-500); | ||
| --hsds-token-color-state-info-backgroundColor: var(--hsds-token-color-blue-200); | ||
| --hsds-token-color-state-success-text: var(--hsds-token-color-green-500); | ||
| --hsds-token-color-state-success-backgroundDark: var(--hsds-token-color-state-success-borderColor); | ||
| --hsds-token-color-state-success-icon: var(--hsds-token-color-green-500); | ||
| --hsds-token-color-state-success-borderColor: var(--hsds-token-color-green-500); | ||
| --hsds-token-color-state-success-backgroundLight: var(--hsds-token-color-green-200); | ||
| --hsds-token-color-state-success-default: var(--hsds-token-color-green-500); | ||
| --hsds-token-color-state-success-color: var(--hsds-token-color-green-500); | ||
| --hsds-token-color-state-success-backgroundColor: var(--hsds-token-color-green-200); | ||
| --hsds-token-color-state-warning-text: var(--hsds-token-color-yellow-500); | ||
| --hsds-token-color-state-warning-backgroundDark: var(--hsds-token-color-state-warning-borderColor); | ||
| --hsds-token-color-state-warning-icon: var(--hsds-token-color-yellow-500); | ||
| --hsds-token-color-state-warning-borderColor: var(--hsds-token-color-yellow-500); | ||
| --hsds-token-color-state-warning-backgroundLight: var(--hsds-token-color-yellow-200); | ||
| --hsds-token-color-state-warning-color: var(--hsds-token-color-yellow-500); | ||
| --hsds-token-color-state-warning-default: var(--hsds-token-color-yellow-500); | ||
| --hsds-token-color-state-warning-backgroundColor: var(--hsds-token-color-yellow-200); | ||
| --hsds-token-color-state-danger-default: var(--hsds-token-color-state-error-default); | ||
| --hsds-token-color-state-danger-backgroundLight: var(--hsds-token-color-state-error-backgroundColor); | ||
| --hsds-token-color-state-danger-backgroundDark: var(--hsds-token-color-state-error-borderColor); | ||
| --hsds-token-color-state-danger-borderColor: var(--hsds-token-color-state-error-borderColor); | ||
| --hsds-token-color-state-danger-color: var(--hsds-token-color-state-error-borderColor); | ||
| --hsds-token-color-state-danger-text: var(--hsds-token-color-state-error-borderColor); | ||
| --hsds-token-color-state-danger-icon: var(--hsds-token-color-state-error-borderColor); | ||
| --hsds-token-color-state-danger-backgroundColor: var(--hsds-token-color-state-error-backgroundColor); | ||
| --hsds-token-color-background-surface: #ffffffff; | ||
| --hsds-token-color-background-body: var(--hsds-token-color-grey-300); | ||
| --hsds-token-color-red-100: #fef7f6; | ||
| --hsds-token-color-red-100-rgb: 254,247,246; | ||
| --hsds-token-color-red-200: #ffe3e2; | ||
| --hsds-token-color-red-200-rgb: 255,227,226; | ||
| --hsds-token-color-red-300: #ffa2a2; | ||
| --hsds-token-color-red-300-rgb: 255,162,162; | ||
| --hsds-token-color-red-400: #f45b55; | ||
| --hsds-token-color-red-400-rgb: 244,91,85; | ||
| --hsds-token-color-red-500: #e52f28; | ||
| --hsds-token-color-red-500-rgb: 229,47,40; | ||
| --hsds-token-color-red-600: #d21b14; | ||
| --hsds-token-color-red-600-rgb: 210,27,20; | ||
| --hsds-token-color-red-700: #ba1f19; | ||
| --hsds-token-color-red-700-rgb: 186,31,25; | ||
| --hsds-token-color-red-800: #9d1f1a; | ||
| --hsds-token-color-red-800-rgb: 157,31,26; | ||
| --hsds-token-color-red-900: #731814; | ||
| --hsds-token-color-red-900-rgb: 115,24,20; | ||
| --hsds-token-color-red-1000: #2b2123ff; | ||
| --hsds-token-color-red-1000-rgb: 43,33,35; | ||
| --hsds-token-color-red-accent: var(--hsds-token-color-red-500); | ||
| --hsds-token-color-red-default: var(--hsds-token-color-red-500); | ||
| --hsds-token-color-orange-100: #fff8f2; | ||
| --hsds-token-color-orange-100-rgb: 255,248,242; | ||
| --hsds-token-color-orange-200: #ffead8; | ||
| --hsds-token-color-orange-200-rgb: 255,234,216; | ||
| --hsds-token-color-orange-300: #ffd3ae; | ||
| --hsds-token-color-orange-300-rgb: 255,211,174; | ||
| --hsds-token-color-orange-400: #ffa75a; | ||
| --hsds-token-color-orange-400-rgb: 255,167,90; | ||
| --hsds-token-color-orange-500: #ff9139; | ||
| --hsds-token-color-orange-500-rgb: 255,145,57; | ||
| --hsds-token-color-orange-600: #e87800; | ||
| --hsds-token-color-orange-600-rgb: 232,120,0; | ||
| --hsds-token-color-orange-700: #c76400; | ||
| --hsds-token-color-orange-700-rgb: 199,100,0; | ||
| --hsds-token-color-orange-800: #a45300; | ||
| --hsds-token-color-orange-800-rgb: 164,83,0; | ||
| --hsds-token-color-orange-900: #813c00; | ||
| --hsds-token-color-orange-900-rgb: 129,60,0; | ||
| --hsds-token-color-orange-1000: #2b241dff; | ||
| --hsds-token-color-orange-1000-rgb: 43,36,29; | ||
| --hsds-token-color-orange-accent: var(--hsds-token-color-orange-500); | ||
| --hsds-token-color-orange-default: var(--hsds-token-color-orange-500); | ||
| --hsds-token-color-slate-100: #f2f9fcff; | ||
| --hsds-token-color-slate-100-rgb: 242,249,252; | ||
| --hsds-token-color-slate-200: #e1eef5ff; | ||
| --hsds-token-color-slate-200-rgb: 225,238,245; | ||
| --hsds-token-color-slate-300: #ccdee8ff; | ||
| --hsds-token-color-slate-300-rgb: 204,222,232; | ||
| --hsds-token-color-slate-400: #a9c4d4ff; | ||
| --hsds-token-color-slate-400-rgb: 169,196,212; | ||
| --hsds-token-color-slate-500: #82a7baff; | ||
| --hsds-token-color-slate-500-rgb: 130,167,186; | ||
| --hsds-token-color-slate-600: #658b9eff; | ||
| --hsds-token-color-slate-600-rgb: 101,139,158; | ||
| --hsds-token-color-slate-700: #486878ff; | ||
| --hsds-token-color-slate-700-rgb: 72,104,120; | ||
| --hsds-token-color-slate-800: #344852ff; | ||
| --hsds-token-color-slate-800-rgb: 52,72,82; | ||
| --hsds-token-color-slate-900: #283338ff; | ||
| --hsds-token-color-slate-900-rgb: 40,51,56; | ||
| --hsds-token-color-slate-1000: #1f2426ff; | ||
| --hsds-token-color-slate-1000-rgb: 31,36,38; | ||
| --hsds-token-color-slate-accent: #47c2ffff; | ||
| --hsds-token-color-cobalt-100: #ebf5ffff; | ||
| --hsds-token-color-cobalt-100-rgb: 235,245,255; | ||
| --hsds-token-color-cobalt-200: #d1e8ffff; | ||
| --hsds-token-color-cobalt-200-rgb: 209,232,255; | ||
| --hsds-token-color-cobalt-300: #9ecbffff; | ||
| --hsds-token-color-cobalt-300-rgb: 158,203,255; | ||
| --hsds-token-color-cobalt-400: #66a3ffff; | ||
| --hsds-token-color-cobalt-400-rgb: 102,163,255; | ||
| --hsds-token-color-cobalt-500: #4176faff; | ||
| --hsds-token-color-cobalt-500-rgb: 65,118,250; | ||
| --hsds-token-color-cobalt-600: #304ddbff; | ||
| --hsds-token-color-cobalt-600-rgb: 48,77,219; | ||
| --hsds-token-color-cobalt-700: #263aadff; | ||
| --hsds-token-color-cobalt-700-rgb: 38,58,173; | ||
| --hsds-token-color-cobalt-800: #1c2674ff; | ||
| --hsds-token-color-cobalt-800-rgb: 28,38,116; | ||
| --hsds-token-color-cobalt-900: #171952ff; | ||
| --hsds-token-color-cobalt-900-rgb: 23,25,82; | ||
| --hsds-token-color-cobalt-1000: #0e0e33ff; | ||
| --hsds-token-color-cobalt-1000-rgb: 14,14,51; | ||
| --hsds-token-color-cobalt-accent: #47a3ffff; | ||
| --hsds-token-color-purple-100: #fbfbfe; | ||
| --hsds-token-color-purple-100-rgb: 251,251,254; | ||
| --hsds-token-color-purple-200: #eaeafc; | ||
| --hsds-token-color-purple-200-rgb: 234,234,252; | ||
| --hsds-token-color-purple-300: #d1d2f6; | ||
| --hsds-token-color-purple-300-rgb: 209,210,246; | ||
| --hsds-token-color-purple-400: #a3a4f3; | ||
| --hsds-token-color-purple-400-rgb: 163,164,243; | ||
| --hsds-token-color-purple-500: #7e80e7; | ||
| --hsds-token-color-purple-500-rgb: 126,128,231; | ||
| --hsds-token-color-purple-600: #696aca; | ||
| --hsds-token-color-purple-600-rgb: 105,106,202; | ||
| --hsds-token-color-purple-700: #585b9e; | ||
| --hsds-token-color-purple-700-rgb: 88,91,158; | ||
| --hsds-token-color-purple-800: #45467d; | ||
| --hsds-token-color-purple-800-rgb: 69,70,125; | ||
| --hsds-token-color-purple-900: #383966; | ||
| --hsds-token-color-purple-900-rgb: 56,57,102; | ||
| --hsds-token-color-purple-1000: #271f2eff; | ||
| --hsds-token-color-purple-1000-rgb: 39,31,46; | ||
| --hsds-token-color-purple-accent: var(--hsds-token-color-purple-500); | ||
| --hsds-token-color-purple-default: var(--hsds-token-color-purple-500); | ||
| --hsds-token-color-magenta-100: #fff2f4ff; | ||
| --hsds-token-color-magenta-100-rgb: 255,242,244; | ||
| --hsds-token-color-magenta-200: #ffe5eaff; | ||
| --hsds-token-color-magenta-200-rgb: 255,229,234; | ||
| --hsds-token-color-magenta-300: #ffc7d3ff; | ||
| --hsds-token-color-magenta-300-rgb: 255,199,211; | ||
| --hsds-token-color-magenta-400: #e5859fff; | ||
| --hsds-token-color-magenta-400-rgb: 229,133,159; | ||
| --hsds-token-color-magenta-500: #bf5878ff; | ||
| --hsds-token-color-magenta-500-rgb: 191,88,120; | ||
| --hsds-token-color-magenta-600: #a34b6bff; | ||
| --hsds-token-color-magenta-600-rgb: 163,75,107; | ||
| --hsds-token-color-magenta-700: #863e5cff; | ||
| --hsds-token-color-magenta-700-rgb: 134,62,92; | ||
| --hsds-token-color-magenta-800: #5e3146ff; | ||
| --hsds-token-color-magenta-800-rgb: 94,49,70; | ||
| --hsds-token-color-magenta-900: #3d2531ff; | ||
| --hsds-token-color-magenta-900-rgb: 61,37,49; | ||
| --hsds-token-color-magenta-1000: #2e2126ff; | ||
| --hsds-token-color-magenta-1000-rgb: 46,33,38; | ||
| --hsds-token-color-magenta-accent: #ff5caaff; | ||
| --hsds-token-color-clay-100: #faf8f7ff; | ||
| --hsds-token-color-clay-100-rgb: 250,248,247; | ||
| --hsds-token-color-clay-200: #f5f2f0ff; | ||
| --hsds-token-color-clay-200-rgb: 245,242,240; | ||
| --hsds-token-color-clay-300: #ede8e6ff; | ||
| --hsds-token-color-clay-300-rgb: 237,232,230; | ||
| --hsds-token-color-clay-400: #ded5d1ff; | ||
| --hsds-token-color-clay-400-rgb: 222,213,209; | ||
| --hsds-token-color-clay-500: #c2b4acff; | ||
| --hsds-token-color-clay-500-rgb: 194,180,172; | ||
| --hsds-token-color-clay-600: #9e8f88ff; | ||
| --hsds-token-color-clay-600-rgb: 158,143,136; | ||
| --hsds-token-color-clay-700: #8a7b74ff; | ||
| --hsds-token-color-clay-700-rgb: 138,123,116; | ||
| --hsds-token-color-clay-800: #756963ff; | ||
| --hsds-token-color-clay-800-rgb: 117,105,99; | ||
| --hsds-token-color-clay-900: #574f4bff; | ||
| --hsds-token-color-clay-900-rgb: 87,79,75; | ||
| --hsds-token-color-clay-1000: #4a4441ff; | ||
| --hsds-token-color-clay-1000-rgb: 74,68,65; | ||
| --hsds-token-color-clay-1100: #33302eff; | ||
| --hsds-token-color-clay-1100-rgb: 51,48,46; | ||
| --hsds-token-color-clay-1200: #262423ff; | ||
| --hsds-token-color-clay-1200-rgb: 38,36,35; | ||
| --hsds-token-color-functional-link-default: var(--hsds-token-color-cobalt-600); | ||
| --hsds-token-color-functional-link-hovered: var(--hsds-token-color-cobalt-700); | ||
| --hsds-token-color-functional-link-pressed: var(--hsds-token-color-cobalt-800); | ||
| --hsds-token-color-functional-link-disabled: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-color-functional-text-headline: var(--hsds-token-color-charcoal-1200); | ||
| --hsds-token-color-functional-text-dark: var(--hsds-token-color-charcoal-900); | ||
| --hsds-token-color-functional-text-default: var(--hsds-token-color-charcoal-800); | ||
| --hsds-token-color-functional-text-light: var(--hsds-token-color-charcoal-700); | ||
| --hsds-token-color-functional-success-text: var(--hsds-token-color-green-800); | ||
| --hsds-token-color-functional-success-icon: var(--hsds-token-color-green-500); | ||
| --hsds-token-color-functional-success-border: var(--hsds-token-color-green-300); | ||
| --hsds-token-color-functional-success-background: var(--hsds-token-color-green-100); | ||
| --hsds-token-color-functional-error-text: var(--hsds-token-color-red-700); | ||
| --hsds-token-color-functional-error-icon: var(--hsds-token-color-red-500); | ||
| --hsds-token-color-functional-error-border: var(--hsds-token-color-red-300); | ||
| --hsds-token-color-functional-error-background: var(--hsds-token-color-red-100); | ||
| --hsds-token-color-functional-warning-text: var(--hsds-token-color-yellow-800); | ||
| --hsds-token-color-functional-warning-icon: var(--hsds-token-color-yellow-400); | ||
| --hsds-token-color-functional-warning-border: var(--hsds-token-color-yellow-200); | ||
| --hsds-token-color-functional-warning-background: var(--hsds-token-color-yellow-100); | ||
| --hsds-token-color-basics-white: #ffffffff; | ||
| --hsds-token-color-basics-black: #000000ff; | ||
| --hsds-token-color-basics-magenta: #ff00ffff; | ||
| --hsds-token-color-basics-cyan: #00ffffff; | ||
| --hsds-token-color-ash-200: var(--hsds-token-color-charcoal-100); | ||
| --hsds-token-color-ash-200-rgb: var(--hsds-token-color-charcoal-100-rgb); | ||
| --hsds-token-color-ash-300: var(--hsds-token-color-charcoal-200); | ||
| --hsds-token-color-ash-300-rgb: var(--hsds-token-color-charcoal-200-rgb); | ||
| --hsds-token-color-ash-400: var(--hsds-token-color-charcoal-300); | ||
| --hsds-token-color-ash-400-rgb: var(--hsds-token-color-charcoal-300-rgb); | ||
| --hsds-token-color-ash-500: var(--hsds-token-color-charcoal-400); | ||
| --hsds-token-color-ash-500-rgb: var(--hsds-token-color-charcoal-400-rgb); | ||
| --hsds-token-color-ash-600: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-color-ash-600-rgb: var(--hsds-token-color-charcoal-500-rgb); | ||
| --hsds-token-color-ash-700: var(--hsds-token-color-charcoal-530); | ||
| --hsds-token-color-ash-700-rgb: var(--hsds-token-color-charcoal-530-rgb); | ||
| --hsds-token-color-ash-800: var(--hsds-token-color-charcoal-550); | ||
| --hsds-token-color-ash-800-rgb: var(--hsds-token-color-charcoal-550-rgb); | ||
| --hsds-token-color-ash-default: var(--hsds-token-color-charcoal-400); | ||
| --hsds-token-color-ash-accent: var(--hsds-token-color-charcoal-400); | ||
| --hsds-token-color-whaletail-100: #F3F7FF; | ||
| --hsds-token-color-whaletail-100-rgb: 243,247,255; | ||
| --hsds-token-color-whaletail-200: #E5EDFE; | ||
| --hsds-token-color-whaletail-200-rgb: 229,237,254; | ||
| --hsds-token-color-whaletail-300: #D0DEFD; | ||
| --hsds-token-color-whaletail-300-rgb: 208,222,253; | ||
| --hsds-token-color-whaletail-400: #AFC7F9; | ||
| --hsds-token-color-whaletail-400-rgb: 175,199,249; | ||
| --hsds-token-color-whaletail-500: #8AABF1; | ||
| --hsds-token-color-whaletail-500-rgb: 138,171,241; | ||
| --hsds-token-color-whaletail-600: #7296E1; | ||
| --hsds-token-color-whaletail-600-rgb: 114,150,225; | ||
| --hsds-token-color-whaletail-700: #5174BB; | ||
| --hsds-token-color-whaletail-700-rgb: 81,116,187; | ||
| --hsds-token-color-whaletail-800: #304F8B; | ||
| --hsds-token-color-whaletail-800-rgb: 48,79,139; | ||
| --hsds-token-color-whaletail-900: #142F5E; | ||
| --hsds-token-color-whaletail-900-rgb: 20,47,94; | ||
| --hsds-token-color-whaletail-default: var(--hsds-token-color-whaletail-500); | ||
| --hsds-token-color-whaletail-accent: var(--hsds-token-color-whaletail-500); | ||
| --hsds-token-color-button-border: #d5d5d5; | ||
| --hsds-token-color-button-hover: #e6e6e6; | ||
| --hsds-token-color-button-active: #b6b6b6; | ||
| --hsds-token-font-family: "Aktiv Grotesk", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; | ||
| --hsds-token-font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; | ||
| --hsds-token-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; | ||
| --hsds-token-font-size: 13px; | ||
| --hsds-token-measure-focusRing-innerBoxShadowSize: 1px; | ||
| --hsds-token-measure-focusRing-outerBoxShadowSize: 2px; | ||
| --hsds-token-measure-focusRing-insetBoxShadowSize: 2px; | ||
| ` |
| export const tokens = ` | ||
| --hsds-token-accordion-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-accordion-color-text-default: var(--hsds-token-color-text-default); | ||
| --hsds-token-attachment-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-attachment-color-removeButton-hover: var(--hsds-token-color-red-700); | ||
| --hsds-token-attachment-color-removeButton-borderHover: var(--hsds-token-color-red-600); | ||
| --hsds-token-attachment-color-error: var(--hsds-token-color-red-600); | ||
| --hsds-token-attachment-color-brokenButton-text: var(--hsds-token-color-text-light); | ||
| --hsds-token-attachment-color-brokenButton-icon: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-attachment-color-downloadAll-icon: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-attachment-color-downloadAll-iconHover: var(--hsds-token-color-text-light); | ||
| --hsds-token-attachment-color-downloadAll-backgroundHover: var(--hsds-token-color-charcoal-200); | ||
| --hsds-token-avatar-color-initials-text: var(--hsds-token-color-text-light); | ||
| --hsds-token-avatar-color-initials-light: var(--hsds-token-color-charcoal-400); | ||
| --hsds-token-avatarRow-color-counter-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-badge-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-badge-color-fill-text: #ffffffff; | ||
| --hsds-token-badge-color-square-text: var(--hsds-token-color-text-light); | ||
| --hsds-token-badge-color-square-background: var(--hsds-token-color-charcoal-100); | ||
| --hsds-token-badge-default: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-blankSlate-color-heading: var(--hsds-token-color-text-headline); | ||
| --hsds-token-blankSlate-color-text: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-blankSlate-color-textBold: var(--hsds-token-color-text-default); | ||
| --hsds-token-blankSlate-color-light-background: var(--hsds-token-color-charcoal-100); | ||
| --hsds-token-blankSlate-color-light-text: var(--hsds-token-color-text-light); | ||
| --hsds-token-blankSlate-color-light-textBold: var(--hsds-token-color-text-dark); | ||
| --hsds-token-button-color-blue-main: var(--hsds-token-color-cobalt-600); | ||
| --hsds-token-button-color-blue-hover: var(--hsds-token-color-cobalt-700); | ||
| --hsds-token-button-color-blue-text: #ffffffff; | ||
| --hsds-token-button-color-blue-outline-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-button-color-blue-outline-border: var(--hsds-token-color-cobalt-500); | ||
| --hsds-token-button-color-blue-outline-borderHover: var(--hsds-token-color-cobalt-500); | ||
| --hsds-token-button-color-blue-outline-text: var(--hsds-token-color-cobalt-600); | ||
| --hsds-token-button-color-blue-outline-textHover: var(--hsds-token-color-cobalt-700); | ||
| --hsds-token-button-color-blue-outline-hover: var(--hsds-token-color-cobalt-100); | ||
| --hsds-token-button-color-blue-outline-hoverIconOnly: var(--hsds-token-color-cobalt-100); | ||
| --hsds-token-button-color-blue-outline-textSeamlessHover: var(--hsds-token-color-cobalt-800); | ||
| --hsds-token-button-color-red-main: var(--hsds-token-color-red-600); | ||
| --hsds-token-button-color-red-hover: var(--hsds-token-color-red-700); | ||
| --hsds-token-button-color-red-text: #ffffffff; | ||
| --hsds-token-button-color-red-outline-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-button-color-red-outline-border: var(--hsds-token-color-red-500); | ||
| --hsds-token-button-color-red-outline-borderHover: var(--hsds-token-color-red-500); | ||
| --hsds-token-button-color-red-outline-text: var(--hsds-token-color-red-600); | ||
| --hsds-token-button-color-red-outline-textHover: var(--hsds-token-color-red-700); | ||
| --hsds-token-button-color-red-outline-hover: var(--hsds-token-color-red-100); | ||
| --hsds-token-button-color-red-outline-hoverIconOnly: var(--hsds-token-color-red-100); | ||
| --hsds-token-button-color-red-outline-textSeamlessHover: var(--hsds-token-color-red-700); | ||
| --hsds-token-button-color-green-main: var(--hsds-token-color-green-750); | ||
| --hsds-token-button-color-green-hover: var(--hsds-token-color-green-900); | ||
| --hsds-token-button-color-green-text: #ffffffff; | ||
| --hsds-token-button-color-green-outline-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-button-color-green-outline-border: var(--hsds-token-color-green-500); | ||
| --hsds-token-button-color-green-outline-borderHover: var(--hsds-token-color-green-500); | ||
| --hsds-token-button-color-green-outline-text: var(--hsds-token-color-green-750); | ||
| --hsds-token-button-color-green-outline-textHover: var(--hsds-token-color-green-800); | ||
| --hsds-token-button-color-green-outline-hover: var(--hsds-token-color-green-100); | ||
| --hsds-token-button-color-green-outline-hoverIconOnly: var(--hsds-token-color-green-100); | ||
| --hsds-token-button-color-green-outline-textSeamlessHover: var(--hsds-token-color-green-900); | ||
| --hsds-token-button-color-grey-main: var(--hsds-token-color-charcoal-700); | ||
| --hsds-token-button-color-grey-hover: var(--hsds-token-color-charcoal-800); | ||
| --hsds-token-button-color-grey-text: #ffffffff; | ||
| --hsds-token-button-color-grey-outline-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-button-color-grey-outline-border: var(--hsds-token-color-grey-500); | ||
| --hsds-token-button-color-grey-outline-borderHover: var(--hsds-token-color-grey-600); | ||
| --hsds-token-button-color-grey-outline-text: var(--hsds-token-color-charcoal-800); | ||
| --hsds-token-button-color-grey-outline-textHover: var(--hsds-token-color-charcoal-800); | ||
| --hsds-token-button-color-grey-outline-hover: var(--hsds-token-color-grey-200); | ||
| --hsds-token-button-color-grey-outline-hoverIconOnly: var(--hsds-token-color-grey-300); | ||
| --hsds-token-button-color-grey-outline-textSeamlessHover: var(--hsds-token-color-charcoal-1100); | ||
| --hsds-token-button-color-yellow-main: var(--hsds-token-color-orange-600); | ||
| --hsds-token-button-color-yellow-hover: var(--hsds-token-color-orange-700); | ||
| --hsds-token-button-color-yellow-text: #ffffffff; | ||
| --hsds-token-button-color-yellow-outline-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-button-color-yellow-outline-border: var(--hsds-token-color-yellow-400); | ||
| --hsds-token-button-color-yellow-outline-borderHover: var(--hsds-token-color-yellow-400); | ||
| --hsds-token-button-color-yellow-outline-text: var(--hsds-token-color-orange-600); | ||
| --hsds-token-button-color-yellow-outline-textHover: var(--hsds-token-color-orange-700); | ||
| --hsds-token-button-color-yellow-outline-hover: var(--hsds-token-color-yellow-100); | ||
| --hsds-token-button-color-yellow-outline-hoverIconOnly: var(--hsds-token-color-yellow-100); | ||
| --hsds-token-button-color-yellow-outline-textSeamlessHover: var(--hsds-token-color-orange-700); | ||
| --hsds-token-button-color-disabled-main: var(--hsds-token-color-grey-500); | ||
| --hsds-token-button-color-disabled-text: #ffffffff; | ||
| --hsds-token-button-color-disabled-outline-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-button-color-disabled-outline-border: var(--hsds-token-color-grey-600); | ||
| --hsds-token-button-color-disabled-outline-text: var(--hsds-token-color-grey-800); | ||
| --hsds-token-card-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-checkmarkCard-color-text-heading: var(--hsds-token-color-text-dark); | ||
| --hsds-token-checkmarkCard-color-text-subtitle: var(--hsds-token-color-text-light); | ||
| --hsds-token-checkmarkCard-color-text-disabled: var(--hsds-token-color-text-light); | ||
| --hsds-token-choice-color-disabled: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-closeButton-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-condition-color-selected-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-copyValue-color-icon: var(--hsds-token-color-text-default); | ||
| --hsds-token-copyValue-color-text: var(--hsds-token-color-text-light); | ||
| --hsds-token-copyValue-color-prefix: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-datePicker-color-range-background: var(--hsds-token-color-cobalt-100); | ||
| --hsds-token-datePicker-color-range-selectedBackground: var(--hsds-token-color-cobalt-600); | ||
| --hsds-token-datePicker-color-range-text: var(--hsds-token-color-cobalt-600); | ||
| --hsds-token-datePicker-color-range-textHover: var(--hsds-token-color-cobalt-700); | ||
| --hsds-token-datePicker-color-currentDay-background: var(--hsds-token-color-grey-400); | ||
| --hsds-token-datePicker-color-currentDay-text: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-datePicker-color-deepNavigator-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-datePicker-color-nav-text: var(--hsds-token-color-text-default); | ||
| --hsds-token-datePicker-color-nav-disabled: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-datePicker-color-weekdays-text: var(--hsds-token-color-text-default); | ||
| --hsds-token-datePicker-color-day-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-datePicker-color-day-disabled: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-datePicker-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-dropList-color-wrapper-border: var(--hsds-token-color-grey-600); | ||
| --hsds-token-dropList-color-wrapper-text: var(--hsds-token-color-grey-600); | ||
| --hsds-token-dropList-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-dropList-color-input-text: var(--hsds-token-color-charcoal-900); | ||
| --hsds-token-dropList-color-listItem-text: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-dropList-color-listItem-disabled-text: var(--hsds-token-color-charcoal-650); | ||
| --hsds-token-dropList-color-listItem-selected-text: #ffffffff; | ||
| --hsds-token-dropList-color-listItem-selected-background: var(--hsds-token-color-blue-600); | ||
| --hsds-token-dropList-color-listItem-highlighted-text: var(--hsds-token-color-charcoal-1100); | ||
| --hsds-token-dropList-color-listItem-highlighted-background: var(--hsds-token-color-blue-100); | ||
| --hsds-token-dropList-color-listItem-multiple-highlighted-text: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-dropList-color-selectedBadge-border: var(--hsds-token-color-grey-600); | ||
| --hsds-token-dropList-color-selectedBadge-hover: var(--hsds-token-color-blue-500); | ||
| --hsds-token-dropList-color-selectedBadge-disabled-border: var(--hsds-token-color-grey-600); | ||
| --hsds-token-dropList-color-selectedBadge-disabled-shadow: var(--hsds-token-color-grey-500); | ||
| --hsds-token-dropList-color-selectedBadge-disabled-background: var(--hsds-token-color-grey-200); | ||
| --hsds-token-dropList-color-divider: var(--hsds-token-color-grey-500); | ||
| --hsds-token-dropList-color-groupLabel: var(--hsds-token-color-charcoal-600); | ||
| --hsds-token-dropList-color-togglers-navLink-text: var(--hsds-token-color-blue-300); | ||
| --hsds-token-dropList-color-togglers-splitButton-shadowDisabled: var(--hsds-token-button-color-disabled-outline-border); | ||
| --hsds-token-dropList-color-togglers-select-shadow: var(--hsds-token-color-grey-800); | ||
| --hsds-token-dropList-color-togglers-select-text: var(--hsds-token-color-charcoal-900); | ||
| --hsds-token-dropList-color-togglers-select-shadowError: var(--hsds-token-color-state-error-borderColor); | ||
| --hsds-token-dropList-color-togglers-select-disabled: var(--hsds-token-color-charcoal-600); | ||
| --hsds-token-dropList-color-togglers-selectArrow-border: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-editableField-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-emojiPicker-color-icon: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-filteredList-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-filteredList-color-item-text: var(--hsds-token-color-text-light); | ||
| --hsds-token-filteredList-color-badge-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-filteredList-color-separator: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-floatingBar-color-background: var(--hsds-token-color-charcoal-1200); | ||
| --hsds-token-floatingBar-color-button-iconDefault: var(--hsds-token-color-charcoal-600); | ||
| --hsds-token-floatingBar-color-button-iconHover: #ffffffff; | ||
| --hsds-token-floatingBar-color-button-backgroundDefault: transparent; | ||
| --hsds-token-floatingBar-color-button-backgroundHover: transparent; | ||
| --hsds-token-floatingBar-color-divider: var(--hsds-token-color-charcoal-900); | ||
| --hsds-token-formField-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-formField-color-label-text: var(--hsds-token-color-text-default); | ||
| --hsds-token-formField-color-itemMain-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-formField-color-itemSecondary-text: var(--hsds-token-color-text-light); | ||
| --hsds-token-heading-color-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-heading-color-small-text: var(--hsds-token-color-text-default); | ||
| --hsds-token-input-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-input-color-text: var(--hsds-token-color-text-default); | ||
| --hsds-token-input-color-addOn-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-input-color-placeholder: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-keyboardBadge-color-text: var(--hsds-token-color-text-default); | ||
| --hsds-token-loadingDots-color-icon: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-message-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-message-color-action: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-message-color-bubble-text: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-message-color-bubble-embedBodyText: var(--hsds-token-color-text-default); | ||
| --hsds-token-message-color-bubble-embedFromText: var(--hsds-token-color-text-default); | ||
| --hsds-token-message-color-embed: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-message-color-media: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-messageCard-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-messageCard-color-subtitle: var(--hsds-token-color-text-light); | ||
| --hsds-token-messageCard-color-body: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-messageCard-color-blockquote: var(--hsds-token-color-text-light); | ||
| --hsds-token-messageCard-color-pre: var(--hsds-token-color-charcoal-1100); | ||
| --hsds-token-messageCard-color-strong: var(--hsds-token-color-charcoal-1100); | ||
| --hsds-token-messageCard-color-articleCard-title: var(--hsds-token-color-text-dark); | ||
| --hsds-token-messageCard-color-articleCard-meta: var(--hsds-token-color-text-light); | ||
| --hsds-token-messageCard-color-articleCard-content: var(--hsds-token-color-text-light); | ||
| --hsds-token-messageCard-color-surveyNps: var(--hsds-token-color-text-light); | ||
| --hsds-token-messageCard-color-survey-feedback: var(--hsds-token-color-text-default); | ||
| --hsds-token-messageCard-color-survey-spinner: var(--hsds-token-color-text-default); | ||
| --hsds-token-messageCard-color-survey-confirmation: var(--hsds-token-color-text-default); | ||
| --hsds-token-messageCard-color-survey-multiple: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-messageCard-color-modal-title: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-messageCard-color-modal-label: var(--hsds-token-color-text-light); | ||
| --hsds-token-messageCard-color-modal-body: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-messageCard-color-modal-closeButton: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-messageCard-color-modal-closeButtonHover: var(--hsds-token-color-text-dark); | ||
| --hsds-token-messageCard-color-nps-poweredby: var(--hsds-token-color-text-light); | ||
| --hsds-token-messageCard-color-nps-question: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-messageCard-color-nps-feedback: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-modal-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-modal-color-header-title: var(--hsds-token-color-text-default); | ||
| --hsds-token-modal-color-header-description: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-nav-color-item-text: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-nav-color-item-hover: var(--hsds-token-color-text-light); | ||
| --hsds-token-nav-color-item-active: var(--hsds-token-color-text-default); | ||
| --hsds-token-nav-color-text: var(--hsds-token-color-text-default); | ||
| --hsds-token-page-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-page-color-header-title: var(--hsds-token-color-text-headline); | ||
| --hsds-token-page-color-header-subtitle: var(--hsds-token-color-text-dark); | ||
| --hsds-token-page-minWidth: 480px; | ||
| --hsds-token-page-maxWidth-default: 700px; | ||
| --hsds-token-page-maxWidth-wide: 1000px; | ||
| --hsds-token-page-actions-margin-bottom: 100px; | ||
| --hsds-token-page-actions-margin-top: 30px; | ||
| --hsds-token-page-actions-spacing: 10px; | ||
| --hsds-token-page-card-radius: 4px; | ||
| --hsds-token-page-card-padding-default-top: 50px; | ||
| --hsds-token-page-card-padding-default-bottom: 65px; | ||
| --hsds-token-page-card-padding-default-side: 100px; | ||
| --hsds-token-page-card-padding-narrow-top: 40px; | ||
| --hsds-token-page-card-padding-narrow-bottom: 50px; | ||
| --hsds-token-page-card-padding-narrow-side: 50px; | ||
| --hsds-token-page-card-padding-wide-top: 60px; | ||
| --hsds-token-page-card-padding-wide-bottom: 80px; | ||
| --hsds-token-page-card-padding-wide-side: 175px; | ||
| --hsds-token-pagination-color-information: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-pagination-color-range: var(--hsds-token-color-text-dark); | ||
| --hsds-token-pagination-color-buttonOutlined: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-popover-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-popover-color-heading: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-radioCard-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-radioCard-color-icon: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-radioCard-color-checked: var(--hsds-token-color-text-dark); | ||
| --hsds-token-radioCard-color-heading: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-radioCard-color-content: var(--hsds-token-color-text-default); | ||
| --hsds-token-radioCard-color-contentWithHeading: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-scrollable-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-scrollableContainer-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-sidePanel-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-sidePanel-color-heading: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-sidePanel-color-subheading: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-sidePanel-color-close: var(--hsds-token-color-text-light); | ||
| --hsds-token-sidePanel-color-closeHover: var(--hsds-token-color-text-dark); | ||
| --hsds-token-simpleModal-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-simpleModal-color-heading: var(--hsds-token-color-text-headline); | ||
| --hsds-token-simpleModal-color-confirmationBody: var(--hsds-token-color-text-dark); | ||
| --hsds-token-sortable-color-dragHandler-default: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-sortable-color-dragHandler-active: var(--hsds-token-color-text-light); | ||
| --hsds-token-sortable-color-dragHandler-disabled: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-statusBar-color-light-error-border: var(--hsds-token-color-red-200); | ||
| --hsds-token-statusBar-color-light-info-border: var(--hsds-token-color-cobalt-200); | ||
| --hsds-token-statusBar-color-light-success-border: var(--hsds-token-color-green-200); | ||
| --hsds-token-statusBar-color-light-warning-border: var(--hsds-token-color-yellow-200); | ||
| --hsds-token-statusBar-color-bold-error-border: var(--hsds-token-color-red-700); | ||
| --hsds-token-statusBar-color-bold-error-button: var(--hsds-token-color-red-700); | ||
| --hsds-token-statusBar-color-bold-info-border: var(--hsds-token-color-cobalt-700); | ||
| --hsds-token-statusBar-color-bold-info-button: var(--hsds-token-color-cobalt-700); | ||
| --hsds-token-statusBar-color-bold-success-border: var(--hsds-token-color-green-700); | ||
| --hsds-token-statusBar-color-bold-success-button: var(--hsds-token-color-green-700); | ||
| --hsds-token-statusBar-color-bold-warning-border: var(--hsds-token-color-orange-700); | ||
| --hsds-token-statusBar-color-bold-warning-button: var(--hsds-token-color-orange-700); | ||
| --hsds-token-statusDot-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-statusDot-color-light-default: var(--hsds-token-color-slate-500); | ||
| --hsds-token-statusDot-color-light-active: var(--hsds-token-color-green-500); | ||
| --hsds-token-statusDot-color-light-inactive: var(--hsds-token-color-slate-500); | ||
| --hsds-token-statusDot-color-light-offline: var(--hsds-token-color-red-500); | ||
| --hsds-token-statusDot-color-light-busy: var(--hsds-token-color-yellow-400); | ||
| --hsds-token-statusDot-color-light-custom: var(--hsds-token-color-purple-400); | ||
| --hsds-token-statusDot-color-dark-default: var(--hsds-token-color-slate-accent); | ||
| --hsds-token-statusDot-color-dark-active: var(--hsds-token-color-green-accent); | ||
| --hsds-token-statusDot-color-dark-inactive: var(--hsds-token-color-slate-accent); | ||
| --hsds-token-statusDot-color-dark-offline: var(--hsds-token-color-red-accent); | ||
| --hsds-token-statusDot-color-dark-busy: var(--hsds-token-color-yellow-accent); | ||
| --hsds-token-statusDot-color-dark-custom: var(--hsds-token-color-purple-accent); | ||
| --hsds-token-stepper-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-switchComponent-color-error: var(--hsds-token-color-state-error-default); | ||
| --hsds-token-switchComponent-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-tabBar-color-secContent: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-tabBar-color-strong: var(--hsds-token-color-text-dark); | ||
| --hsds-token-table-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-table-color-typeAction: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-table-color-sortableCell: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-tag-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-tag-color-text: var(--hsds-token-color-text-dark); | ||
| --hsds-token-tag-color-showAll: var(--hsds-token-color-text-dark); | ||
| --hsds-token-tag-color-clearAll: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-tag-color-clearAllHover: var(--hsds-token-color-text-light); | ||
| --hsds-token-timeline-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-toolbar-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-typingDots-color-icon: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-verificationCode-color-error: var(--hsds-token-color-state-error-default); | ||
| --hsds-token-verificationCode-color-background: var(--hsds-token-color-background-surface); | ||
| --hsds-token-verificationCode-color-digit: var(--hsds-token-color-charcoal-1000); | ||
| --hsds-token-color-blue-100: var(--hsds-token-color-cobalt-100); | ||
| --hsds-token-color-blue-100-rgb: var(--hsds-token-color-cobalt-100-rgb); | ||
| --hsds-token-color-blue-200: var(--hsds-token-color-cobalt-200); | ||
| --hsds-token-color-blue-200-rgb: var(--hsds-token-color-cobalt-200-rgb); | ||
| --hsds-token-color-blue-300: var(--hsds-token-color-cobalt-300); | ||
| --hsds-token-color-blue-300-rgb: var(--hsds-token-color-cobalt-300-rgb); | ||
| --hsds-token-color-blue-400: var(--hsds-token-color-cobalt-400); | ||
| --hsds-token-color-blue-400-rgb: var(--hsds-token-color-cobalt-400-rgb); | ||
| --hsds-token-color-blue-500: var(--hsds-token-color-cobalt-600); | ||
| --hsds-token-color-blue-500-rgb: var(--hsds-token-color-cobalt-600-rgb); | ||
| --hsds-token-color-blue-600: var(--hsds-token-color-cobalt-600); | ||
| --hsds-token-color-blue-600-rgb: var(--hsds-token-color-cobalt-600-rgb); | ||
| --hsds-token-color-blue-700: var(--hsds-token-color-cobalt-700); | ||
| --hsds-token-color-blue-700-rgb: var(--hsds-token-color-cobalt-700-rgb); | ||
| --hsds-token-color-blue-800: var(--hsds-token-color-cobalt-800); | ||
| --hsds-token-color-blue-800-rgb: var(--hsds-token-color-cobalt-800-rgb); | ||
| --hsds-token-color-blue-900: var(--hsds-token-color-cobalt-900); | ||
| --hsds-token-color-blue-900-rgb: var(--hsds-token-color-cobalt-900-rgb); | ||
| --hsds-token-color-blue-default: var(--hsds-token-color-cobalt-500); | ||
| --hsds-token-color-blue-accent: var(--hsds-token-color-cobalt-accent); | ||
| --hsds-token-color-charcoal-100: #f9fafaff; | ||
| --hsds-token-color-charcoal-100-rgb: 249,250,250; | ||
| --hsds-token-color-charcoal-200: #f1f3f5ff; | ||
| --hsds-token-color-charcoal-200-rgb: 241,243,245; | ||
| --hsds-token-color-charcoal-300: #dfe6ebff; | ||
| --hsds-token-color-charcoal-300-rgb: 223,230,235; | ||
| --hsds-token-color-charcoal-400: #c8d3deff; | ||
| --hsds-token-color-charcoal-400-rgb: 200,211,222; | ||
| --hsds-token-color-charcoal-500: #abb9c7ff; | ||
| --hsds-token-color-charcoal-500-rgb: 171,185,199; | ||
| --hsds-token-color-charcoal-530: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-color-charcoal-530-rgb: var(--hsds-token-color-charcoal-500-rgb); | ||
| --hsds-token-color-charcoal-550: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-color-charcoal-550-rgb: var(--hsds-token-color-charcoal-500-rgb); | ||
| --hsds-token-color-charcoal-600: #7e8e9eff; | ||
| --hsds-token-color-charcoal-600-rgb: 126,142,158; | ||
| --hsds-token-color-charcoal-650: var(--hsds-token-color-charcoal-600); | ||
| --hsds-token-color-charcoal-650-rgb: var(--hsds-token-color-charcoal-600-rgb); | ||
| --hsds-token-color-charcoal-700: #556575ff; | ||
| --hsds-token-color-charcoal-700-rgb: 85,101,117; | ||
| --hsds-token-color-charcoal-800: #405261ff; | ||
| --hsds-token-color-charcoal-800-rgb: 64,82,97; | ||
| --hsds-token-color-charcoal-900: #314351ff; | ||
| --hsds-token-color-charcoal-900-rgb: 49,67,81; | ||
| --hsds-token-color-charcoal-1000: #253642ff; | ||
| --hsds-token-color-charcoal-1000-rgb: 37,54,66; | ||
| --hsds-token-color-charcoal-1100: #1d2b36ff; | ||
| --hsds-token-color-charcoal-1100-rgb: 29,43,54; | ||
| --hsds-token-color-charcoal-1200: #131b24ff; | ||
| --hsds-token-color-charcoal-1200-rgb: 19,27,36; | ||
| --hsds-token-color-charcoal-default: var(--hsds-token-color-charcoal-800); | ||
| --hsds-token-color-grey-200: var(--hsds-token-color-charcoal-100); | ||
| --hsds-token-color-grey-200-rgb: var(--hsds-token-color-charcoal-100-rgb); | ||
| --hsds-token-color-grey-300: var(--hsds-token-color-charcoal-200); | ||
| --hsds-token-color-grey-300-rgb: var(--hsds-token-color-charcoal-200-rgb); | ||
| --hsds-token-color-grey-400: var(--hsds-token-color-charcoal-300); | ||
| --hsds-token-color-grey-400-rgb: var(--hsds-token-color-charcoal-300-rgb); | ||
| --hsds-token-color-grey-500: var(--hsds-token-color-charcoal-400); | ||
| --hsds-token-color-grey-500-rgb: var(--hsds-token-color-charcoal-400-rgb); | ||
| --hsds-token-color-grey-600: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-color-grey-600-rgb: var(--hsds-token-color-charcoal-500-rgb); | ||
| --hsds-token-color-grey-700: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-color-grey-700-rgb: var(--hsds-token-color-charcoal-500-rgb); | ||
| --hsds-token-color-grey-800: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-color-grey-800-rgb: var(--hsds-token-color-charcoal-500-rgb); | ||
| --hsds-token-color-indigo-200: var(--hsds-token-color-cobalt-100); | ||
| --hsds-token-color-indigo-200-rgb: var(--hsds-token-color-cobalt-100-rgb); | ||
| --hsds-token-color-indigo-300: var(--hsds-token-color-cobalt-200); | ||
| --hsds-token-color-indigo-300-rgb: var(--hsds-token-color-cobalt-200-rgb); | ||
| --hsds-token-color-indigo-400: var(--hsds-token-color-cobalt-300); | ||
| --hsds-token-color-indigo-400-rgb: var(--hsds-token-color-cobalt-300-rgb); | ||
| --hsds-token-color-indigo-500: var(--hsds-token-color-cobalt-400); | ||
| --hsds-token-color-indigo-500-rgb: var(--hsds-token-color-cobalt-400-rgb); | ||
| --hsds-token-color-indigo-600: var(--hsds-token-color-cobalt-500); | ||
| --hsds-token-color-indigo-600-rgb: var(--hsds-token-color-cobalt-500-rgb); | ||
| --hsds-token-color-indigo-700: var(--hsds-token-color-cobalt-600); | ||
| --hsds-token-color-indigo-700-rgb: var(--hsds-token-color-cobalt-600-rgb); | ||
| --hsds-token-color-indigo-800: var(--hsds-token-color-cobalt-700); | ||
| --hsds-token-color-indigo-800-rgb: var(--hsds-token-color-cobalt-700-rgb); | ||
| --hsds-token-color-indigo-900: var(--hsds-token-color-cobalt-800); | ||
| --hsds-token-color-indigo-900-rgb: var(--hsds-token-color-cobalt-800-rgb); | ||
| --hsds-token-color-indigo-1000: var(--hsds-token-color-cobalt-900); | ||
| --hsds-token-color-indigo-1000-rgb: var(--hsds-token-color-cobalt-900-rgb); | ||
| --hsds-token-color-indigo-default: var(--hsds-token-color-indigo-500); | ||
| --hsds-token-color-lavender-100: var(--hsds-token-color-purple-100); | ||
| --hsds-token-color-lavender-100-rgb: var(--hsds-token-color-purple-100-rgb); | ||
| --hsds-token-color-lavender-200: var(--hsds-token-color-purple-200); | ||
| --hsds-token-color-lavender-200-rgb: var(--hsds-token-color-purple-200-rgb); | ||
| --hsds-token-color-lavender-300: var(--hsds-token-color-purple-300); | ||
| --hsds-token-color-lavender-300-rgb: var(--hsds-token-color-purple-300-rgb); | ||
| --hsds-token-color-lavender-400: var(--hsds-token-color-purple-400); | ||
| --hsds-token-color-lavender-400-rgb: var(--hsds-token-color-purple-400-rgb); | ||
| --hsds-token-color-lavender-500: var(--hsds-token-color-purple-500); | ||
| --hsds-token-color-lavender-500-rgb: var(--hsds-token-color-purple-500-rgb); | ||
| --hsds-token-color-lavender-600: var(--hsds-token-color-purple-600); | ||
| --hsds-token-color-lavender-600-rgb: var(--hsds-token-color-purple-600-rgb); | ||
| --hsds-token-color-lavender-700: var(--hsds-token-color-purple-700); | ||
| --hsds-token-color-lavender-700-rgb: var(--hsds-token-color-purple-700-rgb); | ||
| --hsds-token-color-lavender-800: var(--hsds-token-color-purple-800); | ||
| --hsds-token-color-lavender-800-rgb: var(--hsds-token-color-purple-800-rgb); | ||
| --hsds-token-color-lavender-900: var(--hsds-token-color-purple-900); | ||
| --hsds-token-color-lavender-900-rgb: var(--hsds-token-color-purple-900-rgb); | ||
| --hsds-token-color-lavender-default: var(--hsds-token-color-lavender-500); | ||
| --hsds-token-color-pink-100: var(--hsds-token-color-red-100); | ||
| --hsds-token-color-pink-100-rgb: var(--hsds-token-color-red-100-rgb); | ||
| --hsds-token-color-pink-200: var(--hsds-token-color-red-200); | ||
| --hsds-token-color-pink-200-rgb: var(--hsds-token-color-red-200-rgb); | ||
| --hsds-token-color-pink-300: var(--hsds-token-color-red-300); | ||
| --hsds-token-color-pink-300-rgb: var(--hsds-token-color-red-300-rgb); | ||
| --hsds-token-color-pink-400: var(--hsds-token-color-red-400); | ||
| --hsds-token-color-pink-400-rgb: var(--hsds-token-color-red-400-rgb); | ||
| --hsds-token-color-pink-500: var(--hsds-token-color-red-500); | ||
| --hsds-token-color-pink-500-rgb: var(--hsds-token-color-red-500-rgb); | ||
| --hsds-token-color-pink-600: var(--hsds-token-color-red-600); | ||
| --hsds-token-color-pink-600-rgb: var(--hsds-token-color-red-600-rgb); | ||
| --hsds-token-color-pink-700: var(--hsds-token-color-red-700); | ||
| --hsds-token-color-pink-700-rgb: var(--hsds-token-color-red-700-rgb); | ||
| --hsds-token-color-pink-800: var(--hsds-token-color-red-800); | ||
| --hsds-token-color-pink-800-rgb: var(--hsds-token-color-red-800-rgb); | ||
| --hsds-token-color-pink-900: var(--hsds-token-color-red-900); | ||
| --hsds-token-color-pink-900-rgb: var(--hsds-token-color-red-900-rgb); | ||
| --hsds-token-color-pink-950: var(--hsds-token-color-red-900); | ||
| --hsds-token-color-pink-950-rgb: var(--hsds-token-color-red-900-rgb); | ||
| --hsds-token-color-pink-1000: var(--hsds-token-color-red-900); | ||
| --hsds-token-color-pink-1000-rgb: var(--hsds-token-color-red-900-rgb); | ||
| --hsds-token-color-green-100: #f2fff0ff; | ||
| --hsds-token-color-green-100-rgb: 242,255,240; | ||
| --hsds-token-color-green-200: #e0fcdeff; | ||
| --hsds-token-color-green-200-rgb: 224,252,222; | ||
| --hsds-token-color-green-300: #b9edbdff; | ||
| --hsds-token-color-green-300-rgb: 185,237,189; | ||
| --hsds-token-color-green-400: #83db9cff; | ||
| --hsds-token-color-green-400-rgb: 131,219,156; | ||
| --hsds-token-color-green-500: #47c47dff; | ||
| --hsds-token-color-green-500-rgb: 71,196,125; | ||
| --hsds-token-color-green-600: #2d8556ff; | ||
| --hsds-token-color-green-600-rgb: 45,133,86; | ||
| --hsds-token-color-green-700: #28704cff; | ||
| --hsds-token-color-green-700-rgb: 40,112,76; | ||
| --hsds-token-color-green-750: var(--hsds-token-color-green-800); | ||
| --hsds-token-color-green-750-rgb: var(--hsds-token-color-green-800-rgb); | ||
| --hsds-token-color-green-800: #2e5940ff; | ||
| --hsds-token-color-green-800-rgb: 46,89,64; | ||
| --hsds-token-color-green-900: #283b2dff; | ||
| --hsds-token-color-green-900-rgb: 40,59,45; | ||
| --hsds-token-color-green-1000: #222923ff; | ||
| --hsds-token-color-green-1000-rgb: 34,41,35; | ||
| --hsds-token-color-green-accent: #56f09eff; | ||
| --hsds-token-color-yellow-50: var(--hsds-token-color-yellow-100); | ||
| --hsds-token-color-yellow-100: #fff6e5ff; | ||
| --hsds-token-color-yellow-100-rgb: 255,246,229; | ||
| --hsds-token-color-yellow-200: #ffeeccff; | ||
| --hsds-token-color-yellow-200-rgb: 255,238,204; | ||
| --hsds-token-color-yellow-300: #ffdd99ff; | ||
| --hsds-token-color-yellow-300-rgb: 255,221,153; | ||
| --hsds-token-color-yellow-400: #fabf5aff; | ||
| --hsds-token-color-yellow-400-rgb: 250,191,90; | ||
| --hsds-token-color-yellow-500: #e09c24ff; | ||
| --hsds-token-color-yellow-500-rgb: 224,156,36; | ||
| --hsds-token-color-yellow-600: #ac771bff; | ||
| --hsds-token-color-yellow-600-rgb: 172,119,27; | ||
| --hsds-token-color-yellow-700: #7a581dff; | ||
| --hsds-token-color-yellow-700-rgb: 122,88,29; | ||
| --hsds-token-color-yellow-800: #574323ff; | ||
| --hsds-token-color-yellow-800-rgb: 87,67,35; | ||
| --hsds-token-color-yellow-900: #403521ff; | ||
| --hsds-token-color-yellow-900-rgb: 64,53,33; | ||
| --hsds-token-color-yellow-950: var(--hsds-token-color-yellow-900); | ||
| --hsds-token-color-yellow-950-rgb: var(--hsds-token-color-yellow-900-rgb); | ||
| --hsds-token-color-yellow-1000: #2b261dff; | ||
| --hsds-token-color-yellow-1000-rgb: 43,38,29; | ||
| --hsds-token-color-yellow-accent: #ffb83dff; | ||
| --hsds-token-color-link-default: var(--hsds-token-color-cobalt-600); | ||
| --hsds-token-color-link-base: var(--hsds-token-color-cobalt-600); | ||
| --hsds-token-color-link-hover: var(--hsds-token-color-cobalt-700); | ||
| --hsds-token-color-link-active: var(--hsds-token-color-cobalt-800); | ||
| --hsds-token-color-link-focus: var(--hsds-token-color-cobalt-600); | ||
| --hsds-token-color-link-disabled: var(--hsds-token-color-charcoal-800); | ||
| --hsds-token-color-focusRing-default-innerColor: var(--hsds-token-color-cobalt-600); | ||
| --hsds-token-color-focusRing-default-outerColor: var(--hsds-token-color-cobalt-200); | ||
| --hsds-token-color-focusRing-default-innerColorOverDark: var(--hsds-token-color-cobalt-accent); | ||
| --hsds-token-color-focusRing-default-outerColorOverDark: var(--hsds-token-color-charcoal-900); | ||
| --hsds-token-color-focusRing-error-innerColor: var(--hsds-token-color-state-error-borderColor); | ||
| --hsds-token-color-focusRing-error-outerColor: var(--hsds-token-color-state-error-backgroundLight); | ||
| --hsds-token-color-focusRing-error-innerColorOverDark: var(--hsds-token-color-state-error-borderColor); | ||
| --hsds-token-color-focusRing-error-outerColorOverDark: var(--hsds-token-color-state-error-backgroundLight); | ||
| --hsds-token-color-focusRing-warning-innerColor: var(--hsds-token-color-state-warning-borderColor); | ||
| --hsds-token-color-focusRing-warning-outerColor: var(--hsds-token-color-state-warning-backgroundLight); | ||
| --hsds-token-color-focusRing-warning-innerColorOverDark: var(--hsds-token-color-state-warning-borderColor); | ||
| --hsds-token-color-focusRing-warning-outerColorOverDark: var(--hsds-token-color-state-warning-backgroundLight); | ||
| --hsds-token-color-focusRing-success-innerColor: var(--hsds-token-color-state-success-borderColor); | ||
| --hsds-token-color-focusRing-success-outerColor: var(--hsds-token-color-state-success-backgroundLight); | ||
| --hsds-token-color-focusRing-success-innerColorOverDark: var(--hsds-token-color-state-success-borderColor); | ||
| --hsds-token-color-focusRing-success-outerColorOverDark: var(--hsds-token-color-state-success-backgroundLight); | ||
| --hsds-token-color-text-default: var(--hsds-token-color-charcoal-800); | ||
| --hsds-token-color-text-headline: var(--hsds-token-color-charcoal-1200); | ||
| --hsds-token-color-text-dark: var(--hsds-token-color-charcoal-900); | ||
| --hsds-token-color-text-light: var(--hsds-token-color-charcoal-700); | ||
| --hsds-token-color-text-disabled: var(--hsds-token-color-charcoal-600); | ||
| --hsds-token-color-text-subtle: var(--hsds-token-color-text-default); | ||
| --hsds-token-color-text-slightlyMuted: var(--hsds-token-color-text-light); | ||
| --hsds-token-color-text-muted: var(--hsds-token-color-text-light); | ||
| --hsds-token-color-text-faint: var(--hsds-token-color-text-disabled); | ||
| --hsds-token-color-text-extraMuted: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-color-border-default: var(--hsds-token-color-grey-400); | ||
| --hsds-token-color-border-divider: var(--hsds-token-color-grey-300); | ||
| --hsds-token-color-border-ui-default: var(--hsds-token-color-grey-500); | ||
| --hsds-token-color-border-ui-dark: var(--hsds-token-color-grey-600); | ||
| --hsds-token-color-state-error-text: var(--hsds-token-color-red-600); | ||
| --hsds-token-color-state-error-backgroundDark: var(--hsds-token-color-red-600); | ||
| --hsds-token-color-state-error-icon: var(--hsds-token-color-red-accent); | ||
| --hsds-token-color-state-error-borderColor: var(--hsds-token-color-red-500); | ||
| --hsds-token-color-state-error-backgroundLight: #FA7A6428; | ||
| --hsds-token-color-state-error-default: var(--hsds-token-color-red-600); | ||
| --hsds-token-color-state-error-color: var(--hsds-token-color-red-600); | ||
| --hsds-token-color-state-info-text: var(--hsds-token-color-cobalt-700); | ||
| --hsds-token-color-state-info-backgroundDark: var(--hsds-token-color-cobalt-600); | ||
| --hsds-token-color-state-info-icon: var(--hsds-token-color-cobalt-500); | ||
| --hsds-token-color-state-info-borderColor: var(--hsds-token-color-cobalt-500); | ||
| --hsds-token-color-state-info-backgroundLight: var(--hsds-token-color-cobalt-100); | ||
| --hsds-token-color-state-info-default: var(--hsds-token-color-cobalt-700); | ||
| --hsds-token-color-state-info-color: var(--hsds-token-color-cobalt-700); | ||
| --hsds-token-color-state-success-text: var(--hsds-token-color-green-800); | ||
| --hsds-token-color-state-success-backgroundDark: var(--hsds-token-color-green-600); | ||
| --hsds-token-color-state-success-icon: var(--hsds-token-color-green-500); | ||
| --hsds-token-color-state-success-borderColor: var(--hsds-token-color-green-500); | ||
| --hsds-token-color-state-success-backgroundLight: var(--hsds-token-color-green-100); | ||
| --hsds-token-color-state-success-default: var(--hsds-token-color-green-800); | ||
| --hsds-token-color-state-success-color: var(--hsds-token-color-green-800); | ||
| --hsds-token-color-state-warning-text: var(--hsds-token-color-orange-600); | ||
| --hsds-token-color-state-warning-backgroundDark: var(--hsds-token-color-orange-600); | ||
| --hsds-token-color-state-warning-icon: var(--hsds-token-color-yellow-accent); | ||
| --hsds-token-color-state-warning-borderColor: var(--hsds-token-color-yellow-400); | ||
| --hsds-token-color-state-warning-backgroundLight: var(--hsds-token-color-yellow-100); | ||
| --hsds-token-color-state-warning-color: var(--hsds-token-color-orange-600); | ||
| --hsds-token-color-state-warning-default: var(--hsds-token-color-yellow-500); | ||
| --hsds-token-color-state-danger-default: var(--hsds-token-color-state-error-default); | ||
| --hsds-token-color-state-danger-backgroundLight: var(--hsds-token-color-state-error-backgroundLight); | ||
| --hsds-token-color-state-danger-backgroundDark: var(--hsds-token-color-state-error-backgroundDark); | ||
| --hsds-token-color-state-danger-borderColor: var(--hsds-token-color-state-error-borderColor); | ||
| --hsds-token-color-state-danger-color: var(--hsds-token-color-state-error-color); | ||
| --hsds-token-color-state-danger-text: var(--hsds-token-color-state-error-text); | ||
| --hsds-token-color-state-danger-icon: var(--hsds-token-color-state-error-icon); | ||
| --hsds-token-color-background-surface: #ffffffff; | ||
| --hsds-token-color-background-body: var(--hsds-token-color-grey-300); | ||
| --hsds-token-color-red-100: #fff0e8ff; | ||
| --hsds-token-color-red-100-rgb: 255,240,232; | ||
| --hsds-token-color-red-200: #fedfd5ff; | ||
| --hsds-token-color-red-200-rgb: 254,223,213; | ||
| --hsds-token-color-red-300: #ffbcadff; | ||
| --hsds-token-color-red-300-rgb: 255,188,173; | ||
| --hsds-token-color-red-400: #fa7a64ff; | ||
| --hsds-token-color-red-400-rgb: 250,122,100; | ||
| --hsds-token-color-red-500: #e54a32ff; | ||
| --hsds-token-color-red-500-rgb: 229,74,50; | ||
| --hsds-token-color-red-600: #b83525ff; | ||
| --hsds-token-color-red-600-rgb: 184,53,37; | ||
| --hsds-token-color-red-700: #822824ff; | ||
| --hsds-token-color-red-700-rgb: 130,40,36; | ||
| --hsds-token-color-red-800: #592728ff; | ||
| --hsds-token-color-red-800-rgb: 89,39,40; | ||
| --hsds-token-color-red-900: #402629ff; | ||
| --hsds-token-color-red-900-rgb: 64,38,41; | ||
| --hsds-token-color-red-1000: #2b2123ff; | ||
| --hsds-token-color-red-1000-rgb: 43,33,35; | ||
| --hsds-token-color-red-accent: #ff6047ff; | ||
| --hsds-token-color-orange-100: #fff2e8ff; | ||
| --hsds-token-color-orange-100-rgb: 255,242,232; | ||
| --hsds-token-color-orange-200: #ffe4d1ff; | ||
| --hsds-token-color-orange-200-rgb: 255,228,209; | ||
| --hsds-token-color-orange-300: #fac096ff; | ||
| --hsds-token-color-orange-300-rgb: 250,192,150; | ||
| --hsds-token-color-orange-400: #f5964eff; | ||
| --hsds-token-color-orange-400-rgb: 245,150,78; | ||
| --hsds-token-color-orange-500: #d67022ff; | ||
| --hsds-token-color-orange-500-rgb: 214,112,34; | ||
| --hsds-token-color-orange-600: #a35214ff; | ||
| --hsds-token-color-orange-600-rgb: 163,82,20; | ||
| --hsds-token-color-orange-700: #7a4518ff; | ||
| --hsds-token-color-orange-700-rgb: 122,69,24; | ||
| --hsds-token-color-orange-800: #573b23ff; | ||
| --hsds-token-color-orange-800-rgb: 87,59,35; | ||
| --hsds-token-color-orange-900: #3d2f22ff; | ||
| --hsds-token-color-orange-900-rgb: 61,47,34; | ||
| --hsds-token-color-orange-1000: #2b241dff; | ||
| --hsds-token-color-orange-1000-rgb: 43,36,29; | ||
| --hsds-token-color-orange-accent: #ff8b33ff; | ||
| --hsds-token-color-slate-100: #f2f9fcff; | ||
| --hsds-token-color-slate-100-rgb: 242,249,252; | ||
| --hsds-token-color-slate-200: #e1eef5ff; | ||
| --hsds-token-color-slate-200-rgb: 225,238,245; | ||
| --hsds-token-color-slate-300: #ccdee8ff; | ||
| --hsds-token-color-slate-300-rgb: 204,222,232; | ||
| --hsds-token-color-slate-400: #a9c4d4ff; | ||
| --hsds-token-color-slate-400-rgb: 169,196,212; | ||
| --hsds-token-color-slate-500: #82a7baff; | ||
| --hsds-token-color-slate-500-rgb: 130,167,186; | ||
| --hsds-token-color-slate-600: #658b9eff; | ||
| --hsds-token-color-slate-600-rgb: 101,139,158; | ||
| --hsds-token-color-slate-700: #486878ff; | ||
| --hsds-token-color-slate-700-rgb: 72,104,120; | ||
| --hsds-token-color-slate-800: #344852ff; | ||
| --hsds-token-color-slate-800-rgb: 52,72,82; | ||
| --hsds-token-color-slate-900: #283338ff; | ||
| --hsds-token-color-slate-900-rgb: 40,51,56; | ||
| --hsds-token-color-slate-1000: #1f2426ff; | ||
| --hsds-token-color-slate-1000-rgb: 31,36,38; | ||
| --hsds-token-color-slate-accent: #47c2ffff; | ||
| --hsds-token-color-cobalt-100: #ebf5ffff; | ||
| --hsds-token-color-cobalt-100-rgb: 235,245,255; | ||
| --hsds-token-color-cobalt-200: #d1e8ffff; | ||
| --hsds-token-color-cobalt-200-rgb: 209,232,255; | ||
| --hsds-token-color-cobalt-300: #9ecbffff; | ||
| --hsds-token-color-cobalt-300-rgb: 158,203,255; | ||
| --hsds-token-color-cobalt-400: #66a3ffff; | ||
| --hsds-token-color-cobalt-400-rgb: 102,163,255; | ||
| --hsds-token-color-cobalt-500: #4176faff; | ||
| --hsds-token-color-cobalt-500-rgb: 65,118,250; | ||
| --hsds-token-color-cobalt-600: #304ddbff; | ||
| --hsds-token-color-cobalt-600-rgb: 48,77,219; | ||
| --hsds-token-color-cobalt-700: #263aadff; | ||
| --hsds-token-color-cobalt-700-rgb: 38,58,173; | ||
| --hsds-token-color-cobalt-800: #1c2674ff; | ||
| --hsds-token-color-cobalt-800-rgb: 28,38,116; | ||
| --hsds-token-color-cobalt-900: #171952ff; | ||
| --hsds-token-color-cobalt-900-rgb: 23,25,82; | ||
| --hsds-token-color-cobalt-1000: #0e0e33ff; | ||
| --hsds-token-color-cobalt-1000-rgb: 14,14,51; | ||
| --hsds-token-color-cobalt-accent: #47a3ffff; | ||
| --hsds-token-color-purple-100: #f9f2ffff; | ||
| --hsds-token-color-purple-100-rgb: 249,242,255; | ||
| --hsds-token-color-purple-200: #f2e5ffff; | ||
| --hsds-token-color-purple-200-rgb: 242,229,255; | ||
| --hsds-token-color-purple-300: #d7baf5ff; | ||
| --hsds-token-color-purple-300-rgb: 215,186,245; | ||
| --hsds-token-color-purple-400: #ad82d8ff; | ||
| --hsds-token-color-purple-400-rgb: 173,130,216; | ||
| --hsds-token-color-purple-500: #9163bfff; | ||
| --hsds-token-color-purple-500-rgb: 145,99,191; | ||
| --hsds-token-color-purple-600: #774ba3ff; | ||
| --hsds-token-color-purple-600-rgb: 119,75,163; | ||
| --hsds-token-color-purple-700: #5d407aff; | ||
| --hsds-token-color-purple-700-rgb: 93,64,122; | ||
| --hsds-token-color-purple-800: #48335cff; | ||
| --hsds-token-color-purple-800-rgb: 72,51,92; | ||
| --hsds-token-color-purple-900: #31253dff; | ||
| --hsds-token-color-purple-900-rgb: 49,37,61; | ||
| --hsds-token-color-purple-1000: #271f2eff; | ||
| --hsds-token-color-purple-1000-rgb: 39,31,46; | ||
| --hsds-token-color-purple-accent: #c285ffff; | ||
| --hsds-token-color-magenta-100: #fff2f4ff; | ||
| --hsds-token-color-magenta-100-rgb: 255,242,244; | ||
| --hsds-token-color-magenta-200: #ffe5eaff; | ||
| --hsds-token-color-magenta-200-rgb: 255,229,234; | ||
| --hsds-token-color-magenta-300: #ffc7d3ff; | ||
| --hsds-token-color-magenta-300-rgb: 255,199,211; | ||
| --hsds-token-color-magenta-400: #e5859fff; | ||
| --hsds-token-color-magenta-400-rgb: 229,133,159; | ||
| --hsds-token-color-magenta-500: #bf5878ff; | ||
| --hsds-token-color-magenta-500-rgb: 191,88,120; | ||
| --hsds-token-color-magenta-600: #a34b6bff; | ||
| --hsds-token-color-magenta-600-rgb: 163,75,107; | ||
| --hsds-token-color-magenta-700: #863e5cff; | ||
| --hsds-token-color-magenta-700-rgb: 134,62,92; | ||
| --hsds-token-color-magenta-800: #5e3146ff; | ||
| --hsds-token-color-magenta-800-rgb: 94,49,70; | ||
| --hsds-token-color-magenta-900: #3d2531ff; | ||
| --hsds-token-color-magenta-900-rgb: 61,37,49; | ||
| --hsds-token-color-magenta-1000: #2e2126ff; | ||
| --hsds-token-color-magenta-1000-rgb: 46,33,38; | ||
| --hsds-token-color-magenta-accent: #ff5caaff; | ||
| --hsds-token-color-clay-100: #faf8f7ff; | ||
| --hsds-token-color-clay-100-rgb: 250,248,247; | ||
| --hsds-token-color-clay-200: #f5f2f0ff; | ||
| --hsds-token-color-clay-200-rgb: 245,242,240; | ||
| --hsds-token-color-clay-300: #ede8e6ff; | ||
| --hsds-token-color-clay-300-rgb: 237,232,230; | ||
| --hsds-token-color-clay-400: #ded5d1ff; | ||
| --hsds-token-color-clay-400-rgb: 222,213,209; | ||
| --hsds-token-color-clay-500: #c2b4acff; | ||
| --hsds-token-color-clay-500-rgb: 194,180,172; | ||
| --hsds-token-color-clay-600: #9e8f88ff; | ||
| --hsds-token-color-clay-600-rgb: 158,143,136; | ||
| --hsds-token-color-clay-700: #8a7b74ff; | ||
| --hsds-token-color-clay-700-rgb: 138,123,116; | ||
| --hsds-token-color-clay-800: #756963ff; | ||
| --hsds-token-color-clay-800-rgb: 117,105,99; | ||
| --hsds-token-color-clay-900: #574f4bff; | ||
| --hsds-token-color-clay-900-rgb: 87,79,75; | ||
| --hsds-token-color-clay-1000: #4a4441ff; | ||
| --hsds-token-color-clay-1000-rgb: 74,68,65; | ||
| --hsds-token-color-clay-1100: #33302eff; | ||
| --hsds-token-color-clay-1100-rgb: 51,48,46; | ||
| --hsds-token-color-clay-1200: #262423ff; | ||
| --hsds-token-color-clay-1200-rgb: 38,36,35; | ||
| --hsds-token-color-functional-link-default: var(--hsds-token-color-cobalt-600); | ||
| --hsds-token-color-functional-link-hovered: var(--hsds-token-color-cobalt-700); | ||
| --hsds-token-color-functional-link-pressed: var(--hsds-token-color-cobalt-800); | ||
| --hsds-token-color-functional-link-disabled: var(--hsds-token-color-charcoal-500); | ||
| --hsds-token-color-functional-text-headline: var(--hsds-token-color-charcoal-1200); | ||
| --hsds-token-color-functional-text-dark: var(--hsds-token-color-charcoal-900); | ||
| --hsds-token-color-functional-text-default: var(--hsds-token-color-charcoal-800); | ||
| --hsds-token-color-functional-text-light: var(--hsds-token-color-charcoal-700); | ||
| --hsds-token-color-functional-success-text: var(--hsds-token-color-green-800); | ||
| --hsds-token-color-functional-success-icon: var(--hsds-token-color-green-500); | ||
| --hsds-token-color-functional-success-border: var(--hsds-token-color-green-300); | ||
| --hsds-token-color-functional-success-background: var(--hsds-token-color-green-100); | ||
| --hsds-token-color-functional-error-text: var(--hsds-token-color-red-700); | ||
| --hsds-token-color-functional-error-icon: var(--hsds-token-color-red-500); | ||
| --hsds-token-color-functional-error-border: var(--hsds-token-color-red-300); | ||
| --hsds-token-color-functional-error-background: var(--hsds-token-color-red-100); | ||
| --hsds-token-color-functional-warning-text: var(--hsds-token-color-yellow-800); | ||
| --hsds-token-color-functional-warning-icon: var(--hsds-token-color-yellow-400); | ||
| --hsds-token-color-functional-warning-border: var(--hsds-token-color-yellow-200); | ||
| --hsds-token-color-functional-warning-background: var(--hsds-token-color-yellow-100); | ||
| --hsds-token-color-basics-white: #ffffffff; | ||
| --hsds-token-color-basics-black: #000000ff; | ||
| --hsds-token-color-basics-magenta: #ff00ffff; | ||
| --hsds-token-color-basics-cyan: #00ffffff; | ||
| --hsds-token-font-family: "Aktiv Grotesk", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; | ||
| --hsds-token-font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; | ||
| --hsds-token-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; | ||
| --hsds-token-font-size: 13px; | ||
| --hsds-token-measure-focusRing-innerBoxShadowSize: 1px; | ||
| --hsds-token-measure-focusRing-outerBoxShadowSize: 3px; | ||
| --hsds-token-measure-focusRing-insetBoxShadowSize: 2px; | ||
| ` |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by79.39%
449233
- Lines of code
- increased by36.99%
10910
No dependency changes