From 6d0c7de0c163d0ac6807701c230431a956ba6c88 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 25 Sep 2025 21:28:20 +0100 Subject: [PATCH] [SQUASHED] Mega-squash of all the previous commits on this feature branch (at 18 Mar 2026) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit TODO - added temporary file to main feature branch for phase 1 added temporary changeset to feature branch for `$modes` support TEMP - added `$modes` entry to `color.palette.neutral-0` refactored logic used to provide SD configuration per target progress on logic for handling `$modes` - 1 TEMP - added `modes-testing` tokens TEMP - added `expected-CSS-output` files progress on logic for handling `$modes` - 2 added `attributes/themeable` transformation progress on logic for handling `$modes` - 3 progress on logic for handling `$modes` - 4 TEMP generated temporary dist files for testing TEMP - added examples of generated themed tokens added logic to generate theming CSS files REVERT - Removed `modes-testing` tokens removed `modes-testing` folder from compilation added `carbon-extracted` reference in the `source` definitions TEMP - added `$modes` entries for some color and typography tokens, with references to Carbon tokens, for testing changed `outputReferences` to `false` (temporary) to bypass issue with missing references when using Carbon tokens with theming logic added commented code to `build` to use for debugging issue with missing references and filtering when theming is applied added two new themed tokens generated files, for Scss mixins and for combined strategies fixed issue with `cds` naming missing the `g` fixed some issues with how the “extra” themed CSS files were generated TEMP - Re-generated tokens REVERT - added examples of generated themed tokens This reverts commit 194b9fb75053d9bb2cb7402bdf8298e599ca314f. REVERT - added `expected-CSS-output` files This reverts commit 7462defbc6b5a3ce3d166176ccbd50cbd7072fb9. fixed wrong check for existence of key in object (`0` values would trigger an error, but they’re valid) added `.hds-theme-light/dark` and `[data-hds-theme=“light/dark”]` to generated CSS selectors (later we may decide to remove them, but for the moment we need them for the showcase theming page to work in its current implementation) re-generated themed tokens updated generation of tokens’ CSS helpers to use CSS variables for `font-weight` helpers re-generated CSS helper files updated generation of extra CSS files to include `.hds-theme-hds/[data-hds-theme="hds"]` selectors for default (non-themed) HDS styling (later we will understand if we want to rename the `hds` theme to `default` to avoid this strange class name `hds-theme-hds`) updated design tokens pipeline to generate a `themed-tokens.json` file for documentation, including all the tokens for all the themes (it will be used in the showcase, and potentially the website) re-generated themed tokens updated “src” files to replace `hds` key with `default` in `$modes` definitions updated logic to replace `hds` key with `default` in `$modes` definitions re-generated tokens in `dist` folder tweaked logic for CSS selectors for `@media (prefers-color-scheme)` to use explicit selectors `.hds-theme-system`/`[data-hds-theme="system”]` to avoid specificity issues `:root:not([class*="hds-theme-"]):not([data-hds-theme])` has specificity 030 so when used inside `@media (prefers-color-scheme: light|dark)` it becomes the default compares to other selectors re-generated tokens in `dist` folder updated generation of extra theming CSS files to avoid CSS variables “staleness” updated generation of extra theming CSS files to differentiate between `theme` and `mode` CSS selectors re-generated tokens in `dist` folder removed `[data-hds-theme]` CSS selectors for simplicity asked feedback in Slack (https://ibm-hashicorp.slack.com/archives/C09KZL43EKU/p1762987902565479) and then discussed with Dylan/Kristin; we agreed they’re not really necessary/needed re-generated tokens in `dist` folder updated logic for generation of extra “themed” CSS files (removed `prefers-color-scheme`-only case, generalized `css-selectors`) re-generated tokens in `dist` folder small tweakings before code review renamed `generateExtra***` to `generate***` updated comment updated SCSS files organization for components (split common part) updated `includePaths` for design tokens in Showcase and Website `ember-cli-build.js` removed `rollup-plugin-scss` dev dependency (we use our own custom plugin for every Scss compilation) updated the `prePublish` script in `package.json` of `components` to validate that all the new CSS files are generated too simplified architecture of CSS compilation for HDS components (as agreed) fixed `prepublisOnly` script that was causing error in build (looking for old CSS files that don’t exist anymore) updated `cssFilePath` in blueprints to reflect new Scss file organization, per code review suggestion https://github.com/hashicorp/design-system/pull/3259#discussion_r2469643577 Apply suggestions from code review Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Update packages/components/src/styles/@hashicorp/design-system-components.scss Co-authored-by: Kristin Bradley added `Hds::ThemeSwitcher` component added `Hds::Theming` service added theming to the Showcase itself (and replaced hardcoded values with `—shw` CSS variables) added `Shw::ThemeSwitcher` component for showcase updated `Mock::App` and added new yielded sub-components added `Shw:: ThemeSwitcher` to the Showcase page header added `foundations/theming` showcase page (and a frameless demo) refactored `hds-theming` service to align with the new themes/modes and be open to configurations added `hdsTheming` initialization to main showcase app removed compilation of components Scss and replaced it with static inclusion of pre-compiled (standard and themed) CSS The pre-compiled CSS files have been manually copied in the `public/assets` folder, while waiting to understand what is the best way to proceed to have them added at build time from the `@hashicorp/design-system-components` package added theming options via popover - part 1 added theming options via popover - part 2 added theming options via popover - part 3 added theming options via popover - part 4 added theming options via popover - part 5 big code refactoring for the theme selector, to streamline user selection and expand use cases we can cover updated logic that sets the theming for the showcase itself (without relying on HDS selectors) small fixes here and there for cleanup and linting fixed issue with `pnpm lint:format` (missing newline at the end of `package.json` solution: run `pnpm prettier . --cache --write` locally and then commit fixed accessibility issue in `advanced-table` page, due to changes to “themed” `—shw` colors fixed typescript error due to new mock page being added added fix for tests failing see https://github.com/hashicorp/design-system/pull/3298 started large refactoring/rewrite of the theming switcher and page in the showcase updated logic by creating a `shwTheming` service that extends `hdsTheming` moved theming logic from `ShwThemeSwitcher` component/subcomponents to `hdsTheming` service updated reference CSS files to follow new theming approach/logic further refactoring/rewriting of theming logic updated approach to `light/dark` styles in showcase by using the HDS CSS selectors migrated back the `Contextual` demo content to the index page added a `DebuggingPanel` to the `ShwThemeSwitcher` controls refactored/improved `DebuggingPanel` and added new preferences to advanced options small cleanups and refactorings fixed small issue with `ShwThemeSwitcher` selector removed some outdated comments small refactorings added local storage support for theming options big refactoring of the `hdsTheming` service to simplify logic and reduce redundant methods invocations cleanup of debugging comments and other stuff refactor and cleanup in preparation for PR review refactored code to fix logic flow for theming initialization fixed how the theming options were saved in local storage Apply suggestions from Copilot's code review Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> fixed issue with `setTheme` not being passed `options` by the `ShwThemeSwitcher` fix issue with the popover of the ShwThemeSwitcher component, where the states were potentially out of sync Update showcase/app/services/shw-theming.ts Co-authored-by: Kristin Bradley small tweak to the typing of `HdsModes` per code review suggestion updated how the CSS files (tokens and components, with/without theming) are consumed by the showcase application updated logic for styleshet switching using the `disabled` attribute removed unused import removed `isInitialized` logic from the `hdeTheming` service to avoid bug Assertion Failed: You attempted to update _isInitialized on , but it had already been used previously in the same computation. Attempting to update a value after using it in a computation can cause logical errors, infinite revalidation bugs, and performance issues, and is not supported. _isInitialized was first used: While rendering: {{outlet}} for -top-level -top-level {{outlet}} for application Application TEMP - added temporary `hds-theme-light/dark` selectors while we understand how to do nesting of theming TEMP - Added back custom token values for testing purpose fixed small issue with the `HdsThemeSwitcher` components used in the `Theming` showcase page context: https://github.com/hashicorp/design-system/pull/3240#discussion_r2470073283 added small comment updated `hdsTheming` service to support `default` theme / mode added support for `default` option to HDS ThemeSwitcher component Updated “foundations/theming” showcase page to include variants of HDS ThemeSwitcher with `default` option updated Showcase ThemeSwitcher to use ``default` as theme option updated logic for how CSS selectors are applied to the `html:root` element + scrappy implementation of `isComplex` (to be completed later) updated CSS selectors for local `public/assets` themed tokens CSS files to be in sync with the ones generated by the tokens pipeline added fake theming for display/text typography to `public/assets` themed tokens CSS files (for debugging purpose) updated “foundations/theming” showcase page to include `default` and `system` themes + improved contextual theming using custom typographic theming implemented `ThemeContex` component added demos of `ThemeContext` component to showcase “foundations/theming” page improved type definitions for ThemeContext and showcase “foundations/theming” page refactored how CSS selectors are applied to enable mode-specific overrides updated CSS selectors for local `public/assets` themed tokens CSS files to be in sync with the ones generated by the tokens pipeline updated `ThemeContext` to use a more generic `context` argument updated showcase “theming” page to use the new `@context` argument for the `ThemeContext` component finally defined proper typing for `ThemeContext` component refactored showcase code to remove handling of `[data-hds-theme]` CSS selectors for theming updated CSS selectors for local `public/assets` themed tokens CSS files to use updated selectors and file names refactored theme switching in showcase to use new CSS files updated theme switcher in showcase to allow toggling of the “advanced options” introduced a “carbonization” mixin for applying styles only for certain conditions/modes this is the first implementation, it may see further refinements later it will be used to differentiate styles for the Button component added subtle shadow to `ThemingBasicContainer` fixed small bug that would cause the showcase pages to crash if the value stored in local storage for the `shw-theming-current-stylesheet` value was not found small fix to the control logic for the `HdsThemeSwitcher` demo in showcase page fixed TypeScript issue fix small bug in the logic when the “apply” with “show advanced options” is `false` added `ShwBodyLinkToRoute` component replaced custom link in AdvancedTable showcase page with newly created `ShwBodyLinkToRoute` component reworked the demo frameless for application with theme switcher to avoid collisions between the main page and the frame replaced custom theme switcher with proper `HdsThemeSwitcher` in `AppFooter` demo some cleanup before code review changed how theming is applied to the showcase itself, to limit `prefers-color-scheme` application only to the explict `system` theme selection fixed wrong CSS selector, per code review suggestion prefixed `OnSetThemeCallback` with `Hds` per review suggestion Update packages/components/src/template-registry.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> converted `updatePageStylesheets` function to a private method per Copilot suggestion: https://github.com/hashicorp/design-system/pull/3240#discussion_r2561933900 small cleanup per code reviews suggestions small fixes per code review updated logic that reads the stored theming data for the `HdsThemingService` to make it more robust removed comment updated CSS selectors for local `public/assets` themed tokens CSS files to use updated selectors and file names basic implementation of `` refactored implementation of `` implemented “Carbonization” section for `Badge` page implemented “Carbonization” section for `BadgeCount` page implemented “Carbonization” section for `Button` page implemented “Carbonization” section for `Focus Ring` page implemented “Carbonization” section for `Typography` page implemented “Carbonization” section for (new) `Color` page added `@carbon/web-components` as devDependency to Showcase app added `@carbon/[themes|layout|grid|type]` + `@ibm/plex` as devDependencies to Showcase app refactored `ComparisonGrid` component to add themed background color to the cells/areas added temporary support for IBM Plex font-family refactored code to support theming for reference web components, based on Carbon implementation/specifications small refactoring small refactorings refactored content organization to have the carbonization pages as standalone pages added carbon web components for comparison on `BadgeCount` page added carbon web components for comparison on `Button` page more small fixes for cleanup and linting implemented “Carbonization” section for `Form::TextInput` page implemented “Carbonization” section for `SegmentedGroup` page removed link to “Foundations > Color” page Small update to an `rgba` color Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> moved theming class in ComparisonGrid from item to item content per code review suggestion improved how to apply themed foreground/background colors to content in the comparison grid installed `@carbon/styles` as devDependency to import CSS variables for Carbon theming fixed issue with text color in typography page reorganized carbonized pages so they all live under the `carbonized` folder/route will be used later to detect if we need to do something around theme switcher and CSS to load prepared the ground for controlling the ShwThemeSwitcher on carbonized pages fixed CSS for carbonization pages updated carbonized typography page to show equivalent/mapped Carbon typographic style updated `ShwComparisonGrid` to expose an alternative side-by-side layout updated some components to take into account the new `hideCarbonLabels` argument fixed typescript/glint issue updated a couple of typographic mappings added yielding of `theme` value in the named blocks of the `ComparisonGrid` introduced `ShwCarbonizationStylePreviewTypography` to facilitate comparison of typographic styles refactored `carbonization/foundations/color` page and `ShwCarbonizationTokenPreviewColor` to show actual color values in preview item updated comparison grid to use `default` for original HDS theming instead of `hds` small tweak to the `badge` carbonization page added logic to the application to lock theme switching when loading a “carbonized” page (and restore its previous state when returning to non-carbonized pages) replaced `theme` with `mode` in `ComparisonGrid` fixed issue with the “default” block of the carbonization grid was not rendered as “classic” HDS fixed issue in the carbonization page for colors some cleanup before code review Update showcase/app/components/shw/carbonization/token-preview/color.gts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> updated showcase page for Button carbonization implemented “Carbonization” page for `Modal` component added examples of components with focus state to the carbonization page for focus ring tweaks per code review suggestions implemented “Carbonization” page for `Form/RadioCard` component better visual grouping of carbonization pages links in homepage renamed the `page-carbonization` components files and declarations to add `Index` (for consistency, per review comment) added `disabled` state to `cds-radio-tile` avoid duplicate `name` attributes for different radio groups add missing `{{on "change" this.onChange}}` handled to the `RadioCard` elements when in a group updated logic that converts the Carbon duration value to the DTCG format to use always seconds updated logic that converts the Carbon `cubic-bezier` value to the expected DTCG format see: https://www.designtokens.org/tr/drafts/format/#cubic-bezier re-extracted carbon tokens turned on option to convert `font-size` from `rem` to `px` for extracted Carbon tokens re-extracted carbon tokens [06] [Project Solar / Phase 1 / Dry-run] Migration dry-run for foundations and components (#3332) [Project Solar / Phase 1 / Engineering Follow-ups] Add `localStorage` parsing validation (#3401) added `chalk` as devDependency updated `build.ts` script for design tokens, to have validation of expected `$modes` format improved logging messages for validation warnings/errors of `$modes` [Project Solar / Phase 1 / Engineering Follow-ups] Add tests for HDS theming service and components (#3428) Co-authored-by: Dylan Hyun Co-authored-by: Kristin Bradley re-generated CSS files in output after rebasing on `main` (new styles have been added to the common styles for HDS components) [HDS-5702] - Remove postbuild in favor of rollup copy (#3441) fixed TS issue fixed some linting warnings for `package.json` files post rebase (and conflicts fixing) enabled logging for StyleDictionary abstracted `getSourceFromFileWithRootSelector` implemented custom “CSS variables” format for theme tokens, with logic to handle aliasing (outputReferences) and files splitting (“common” vs “themed”) abstracted `DocsJson` custom format to its own file removed `attributes/themeable` custom transform (not needed anymore) added validation for generated themed tokens (as SD custom action) small tweakings, cleanups and fixes TEMP - Add `test` tokens (to be removed in a follow-up revert commit) Revert "TEMP - Add `test` tokens (to be removed in a follow-up revert commit)" This reverts commit 455d9ec68abba03402b74e7cdf25b0ead53ec2b0. [Project Solar / Phase 1 / Engineering Follow-ups] Converted tests for `HdsThemeSwitcher` and `HdsThemeContext` to `.gts` format (#3447) Refactor `dist` CSS file checks into script (#3462) re-generated all the dist and public files after rebasing on `main` small cleanup of initial commits used to open the PR [07a] [Project Solar / Phase 1] Include IBM Plex fonts as part of the `@hashicorp/design-system-components` package (#3387) removed service which was not used [Project Solar / Phase 1 / Engineering Follow-ups] Remove local storage implementation from `HdsTheming` service and move it to the Showcase consuming app (#3540) Co-authored-by: Kristin Bradley [Project Solar / Phase 1 / Engineering Follow-ups] Remove `globalOnSetTheme` callback from `HdsTheming` service (#3539) Use esm for `dist` file check (#3551) fixes that were missed after rebase on `main` (and conflict resolution) re-built tokens after rebase on `main` (all the `Hds::SideNav` tokens have been removed) fixed yielded component name [Project Solar / Phase 1 / Engineering Follow-ups] Update tokens pipeline to support structured values for the `$modes` entries (#3575) [Project Solar / Phase 1 / Follow-up] Fix small issue in tokens build pipeline (#3595) Reverted temporary commits from PR #3595 Revert "TEMP/REMOVE ME - Added `$modes` to `boundary-50` (referenced as alias by `boundary.surface` and `boundary-gradient-faint-stop`)" This reverts commit eeb1a0a33c9a70f1575fe62cc64dee35bd0c7b0b. Revert "TEMP/REMOVE ME - re-generated tokens in output" This reverts commit 23c9bb01c4d49006baa58ee575ca8d018d73e963. [Project Solar / Phase 1] Align version of carbon web component imports (#3613) [Project Solar / Phase 1 / Components] Support multiple selectors in carbonization mixin (#3630) [Project Solar / Phase 1 / Foundations] Finalize design tokens for Core/Semantic Colors + Typography + Borders (#3572) [Project Solar / Phase 1 / Components] `Badge/BadgeCount` carbonization (#3592) [Project Solar / Phase 1 / Foundations] Flight icons &`Icon` carbonization (#3584) Co-authored-by: Cristiano Rastelli Project solar/icons commit icons (#3643) Small updates to the icons used in the showcase page for the `Icon` component (#3644) [Project Solar / Phase 1 / Components] `Separator` carbonization (HDS-6102) (#3674) Co-authored-by: Cristiano Rastelli [Project Solar / Phase 1 / Foundations] Update tokens with `$modes` for semantic products colors (#3680) [Project Solar / Phase 1 / Icons] Fix copy button showcase status icons (#3694) [Project Solar / Phase 1 / Components] `ApplicationState` carbonization (HDS-6075) (#3686) [Project Solar / Phase 1 / Foundations] Remove `$modes` from "core/palette" product colors (#3695) [Project solar / Phase 1 / Foundations] Elevation (#3693) [Project Solar / Phase 1 / Showcase] Add support for "column" layout to comparison grid and "no equivalent" block (#3682) linting [Project Solar / Phase 1 / Components] `IconTile` carbonization (HDS-6061) (#3588) Co-authored-by: Cristiano Rastelli [Project Solar / Phase 1 / Foundations] Add `high-contrast` core semantic token for surface (#3701) [Project Solar / Phase 1 / Components] `TooltipButton` carbonization (#3622) Co-authored-by: Cristiano Rastelli [Project Solar / Phase 1 / Components] `RichTooltip` carbonization (#3641) Co-authored-by: Cristiano Rastelli [Project Solar / Phase 1 / Components] `DismissButton` carbonization (#3665) Co-authored-by: Cristiano Rastelli fixed AppFooter example in “foundations/theming” showcase page [Project Solar / Phase 1 / Components] `AppFooter` carbonization (HDS-6072) (#3675) Co-authored-by: Cristiano Rastelli fixed issue with themes being applied to the “carbonization” pages Remove prebuild script (#3715) Co-authored-by: Cristiano Rastelli --- .changeset/rotten-trains-hear.md | 10 + .changeset/tough-cows-rule.md | 5 + packages/components/package.json | 62 + packages/components/rollup.config.mjs | 54 + .../components/scripts/check-dist-files.mjs | 2 + packages/components/src/components.ts | 6 + .../src/components/hds/icon-tile/index.gts | 3 +- .../src/components/hds/icon/index.gts | 86 +- .../src/components/hds/icon/types.ts | 10 + .../components/hds/theme-context/index.hbs | 5 + .../src/components/hds/theme-context/index.ts | 69 + .../src/components/hds/theme-context/types.ts | 32 + .../components/hds/theme-switcher/index.hbs | 29 + .../components/hds/theme-switcher/index.ts | 108 + .../load-sprite-empty.ts | 48 + .../components/src/modifiers/hds-tooltip.ts | 5 +- packages/components/src/services.ts | 2 + .../src/services/hds-icon-registry.ts | 322 + .../components/src/services/hds-theming.ts | 171 + .../@hashicorp/design-system-plex-fonts.scss | 58 + .../src/styles/components/alert.scss | 18 +- .../src/styles/components/app-footer.scss | 10 +- .../src/styles/components/badge-count.scss | 103 +- .../src/styles/components/badge.scss | 163 +- .../src/styles/components/button.scss | 5 + .../styles/components/dialog-primitive.scss | 2 + .../src/styles/components/dismiss-button.scss | 33 +- .../src/styles/components/dropdown.scss | 8 +- .../src/styles/components/flyout.scss | 4 +- .../styles/components/form/file-input.scss | 4 +- .../components/form/key-value-inputs.scss | 6 +- .../styles/components/form/radio-card.scss | 2 +- .../src/styles/components/icon-tile.scss | 29 +- .../src/styles/components/index.scss | 1 + .../src/styles/components/rich-tooltip.scss | 74 +- .../src/styles/components/theme-context.scss | 12 + .../src/styles/components/tooltip.scss | 80 +- .../components/src/styles/mixins/_button.scss | 211 +- .../src/styles/mixins/_carbonization.scss | 33 + .../src/styles/mixins/_focus-ring.scss | 4 +- .../mixins/_interactive-dark-theme.scss | 2 +- packages/components/src/template-registry.ts | 10 + .../tokens/dist/cloud-email/helpers/color.css | 1 + .../dist/cloud-email/helpers/typography.css | 4 +- packages/tokens/dist/cloud-email/tokens.scss | 23 +- .../tokens/dist/devdot/css/helpers/color.css | 1 + .../dist/devdot/css/helpers/typography.css | 4 +- packages/tokens/dist/devdot/css/tokens.css | 189 +- .../dist/docs/products/themed-tokens.json | 78048 ++++++++++++++++ .../docs/products/themed-tokens/cds-g0.json | 15608 +++ .../docs/products/themed-tokens/cds-g10.json | 15608 +++ .../docs/products/themed-tokens/cds-g100.json | 15608 +++ .../docs/products/themed-tokens/cds-g90.json | 15608 +++ .../docs/products/themed-tokens/default.json | 15614 ++++ .../tokens/dist/docs/products/tokens.json | 8300 +- .../dist/marketing/css/helpers/color.css | 1 + .../dist/marketing/css/helpers/typography.css | 4 +- packages/tokens/dist/marketing/css/tokens.css | 189 +- packages/tokens/dist/marketing/tokens.json | 9056 +- .../dist/products/css/helpers/color.css | 1 + .../dist/products/css/helpers/typography.css | 4 +- .../with-css-selectors--advanced/tokens.css | 2888 + .../with-css-selectors--migration/tokens.css | 2206 + .../with-css-selectors/tokens.css | 2004 + .../cds-g0/common-tokens.css | 227 + .../cds-g0/themed-tokens.css | 309 + .../cds-g10/common-tokens.css | 227 + .../cds-g10/themed-tokens.css | 309 + .../cds-g100/common-tokens.css | 227 + .../cds-g100/themed-tokens.css | 309 + .../cds-g90/common-tokens.css | 227 + .../cds-g90/themed-tokens.css | 309 + .../default/common-tokens.css | 227 + .../default/themed-tokens.css | 309 + .../themed-tokens/with-scss-mixins/tokens.css | 2888 + packages/tokens/dist/products/css/tokens.css | 189 +- packages/tokens/package.json | 4 +- .../customFormatCssThemedTokens.ts | 189 + .../build-parts/generateThemingCssFiles.ts | 116 + .../build-parts/generateThemingDocsFiles.ts | 40 + .../getSourceFromFileWithRootSelector.ts | 15 + .../build-parts/getStyleDictionaryConfig.ts | 153 +- .../build-parts/validateThemingCssFiles.ts | 70 + packages/tokens/scripts/build.ts | 111 +- packages/tokens/src/global/border/radius.json | 39 +- .../src/global/color/palette-accents.json | 270 +- .../src/global/color/palette-neutrals.json | 144 +- .../src/global/color/palette-products.json | 18 +- .../src/global/color/semantic-border.json | 72 +- .../src/global/color/semantic-focus.json | 36 +- .../src/global/color/semantic-foreground.json | 180 +- .../src/global/color/semantic-page.json | 18 +- .../src/global/color/semantic-surface.json | 120 +- .../src/global/elevation/elevation.json | 54 +- .../tokens/src/global/elevation/surface.json | 63 +- .../src/products/shared/app-footer.json | 21 + .../src/products/shared/badge-count.json | 44 + .../tokens/src/products/shared/badge.json | 622 + .../tokens/src/products/shared/button.json | 888 + .../color/semantic-product-vault-radar.json | 9 +- .../color/semantic-product-vault-secrets.json | 7 + .../shared/color/semantic-product-vault.json | 7 + .../src/products/shared/dismiss-button.json | 97 + .../src/products/shared/form/radiocard.json | 46 +- .../tokens/src/products/shared/icon-tile.json | 45 + .../src/products/shared/rich-tooltip.json | 132 + .../tokens/src/products/shared/tooltip.json | 117 +- .../src/products/shared/typography.json | 476 +- pnpm-lock.yaml | 137 + showcase/.prettierignore | 3 + showcase/.stylelintignore | 3 + .../components/app-footer/index.gts | 131 + .../components/application-state/index.gts | 40 + .../components/badge-count/index.gts | 144 + .../components/badge/index.gts | 356 + .../components/button/index.gts | 258 + .../components/form/radio-card/index.gts | 440 + .../components/form/text-input/index.gts | 573 + .../components/icon-tile/index.gts | 133 + .../components/modal/index.gts | 436 + .../components/rich-tooltip/index.gts | 242 + .../components/segmented-group/index.gts | 548 + .../components/separator/index.gts | 34 + .../components/tooltip/index.gts | 294 + .../foundations/color/index.gts | 38 + .../foundations/focus-ring/index.gts | 1343 + .../foundations/typography/index.gts | 103 + .../utilities/dismiss-button/index.gts | 85 + .../code-fragments/with-action-variants.gts | 39 +- .../page-components/badge-count/index.gts | 1 - .../badge/sub-sections/content.gts | 2 +- .../code-block/sub-sections/base-elements.gts | 19 +- .../button/sub-sections/base-elements.gts | 18 +- .../copy/snippet/sub-sections/states.gts | 19 +- .../icon/sub-sections/library.gts | 32 +- .../page-foundations/theming/index.gts | 34 + .../theming/sub-sections/components.gts | 99 + .../theming/sub-sections/contexts.gts | 335 + .../theming/sub-sections/demo.gts | 29 + .../theming/sub-sections/theme-switcher.gts | 94 + .../typography/sub-sections/styles.gts | 2 +- .../carbonization/comparison-grid/index.gts | 102 + .../carbonization/comparison-grid/item.gts | 100 + .../comparison-grid/no-equivalent.gts | 29 + .../style-preview/typography.gts | 20 + .../shw/carbonization/token-preview/color.gts | 52 + showcase/app/components/shw/text/types.ts | 1 + .../shw/theme-switcher/control/select.gts | 65 + .../shw/theme-switcher/control/toggle.gts | 37 + .../shw/theme-switcher/debugging-panel.gts | 61 + .../components/shw/theme-switcher/index.gts | 129 + .../components/shw/theme-switcher/popover.gts | 199 + .../shw/theme-switcher/selector.gts | 123 + showcase/app/components/shw/yield.gts | 18 + showcase/app/index.html | 80 +- showcase/app/router.ts | 32 + showcase/app/routes/application.ts | 3 + .../demo-application-with-theme-switcher.ts | 24 + showcase/app/services/shw-theming.ts | 191 + showcase/app/styles/_globals.scss | 8 + showcase/app/styles/app.scss | 28 +- .../carbonization/comparison-grid.scss | 185 + .../style-preview-typography.scss | 8 + .../carbonization/token-preview-color.scss | 23 + .../showcase-components/theme-switcher.scss | 235 + .../carbonization/app-footer.scss | 25 + .../showcase-pages/carbonization/badge.scss | 14 + .../carbonization/focus-ring.scss | 47 + .../carbonization/form/radio-card.scss | 24 + .../showcase-pages/carbonization/modal.scss | 35 + .../carbonization/rich-tooltip.scss | 50 + .../carbonization/segmented-group.scss | 15 + .../showcase-pages/carbonization/tooltip.scss | 50 + .../carbonization/typography.scss | 48 + .../styles/showcase-pages/dismiss-button.scss | 14 - showcase/app/styles/showcase-pages/icon.scss | 55 + .../app/styles/showcase-pages/theming.scss | 57 + .../app/styles/showcase-theming/index.scss | 29 +- showcase/app/templates/application.gts | 127 +- showcase/app/templates/index.gts | 106 + .../components/app-footer.gts | 13 + .../components/application-state.gts | 13 + .../components/badge-count.gts | 13 + .../page-carbonization/components/badge.gts | 13 + .../page-carbonization/components/button.gts | 13 + .../components/form/radio-card.gts | 12 + .../components/form/text-input.gts | 12 + .../components/icon-tile.gts | 14 + .../page-carbonization/components/modal.gts | 13 + .../components/rich-tooltip.gts | 13 + .../components/segmented-group.gts | 12 + .../components/separator.gts | 13 + .../page-carbonization/components/tooltip.gts | 13 + .../page-carbonization/foundations/color.gts | 13 + .../foundations/focus-ring.gts | 13 + .../foundations/typography.gts | 9 + .../utilities/dismiss-button.gts | 12 + .../demo-application-with-theme-switcher.gts | 441 + .../page-foundations/theming/index.gts | 8 + showcase/package.json | 6 + .../design-system-components-common.css | 9452 ++ .../@hashicorp/design-system-components.css | 9986 ++ .../@hashicorp/design-system-plex-fonts.css | 362 + .../design-system-power-select-overrides.css | 229 + .../with-css-selectors--advanced/tokens.css | 2888 + .../with-css-selectors--migration/tokens.css | 2206 + .../with-css-selectors/tokens.css | 2004 + .../acceptance/components/hds/theming-test.js | 20 + showcase/tests/acceptance/percy-test.js | 21 + showcase/tests/index.html | 26 + .../components/hds/icon/index-test.gts | 73 +- .../hds/theme-context/index-test.gts | 93 + .../hds/theme-switcher/index-test.gts | 291 + .../hds/tooltip/tooltip-button-test.gts | 15 +- .../tests/unit/services/hds-theming-test.js | 244 + showcase/types/design-token.ts | 19 + .../parts/htmlTemplatesItemPreview.js | 2 +- .../icon/partials/code/how-to-use.md | 2 +- 218 files changed, 228569 insertions(+), 1396 deletions(-) create mode 100644 .changeset/rotten-trains-hear.md create mode 100644 .changeset/tough-cows-rule.md create mode 100644 packages/components/src/components/hds/theme-context/index.hbs create mode 100644 packages/components/src/components/hds/theme-context/index.ts create mode 100644 packages/components/src/components/hds/theme-context/types.ts create mode 100644 packages/components/src/components/hds/theme-switcher/index.hbs create mode 100644 packages/components/src/components/hds/theme-switcher/index.ts create mode 100644 packages/components/src/instance-initializers/load-sprite-empty.ts create mode 100644 packages/components/src/services/hds-icon-registry.ts create mode 100644 packages/components/src/services/hds-theming.ts create mode 100644 packages/components/src/styles/@hashicorp/design-system-plex-fonts.scss create mode 100644 packages/components/src/styles/components/theme-context.scss create mode 100644 packages/components/src/styles/mixins/_carbonization.scss create mode 100644 packages/tokens/dist/docs/products/themed-tokens.json create mode 100644 packages/tokens/dist/docs/products/themed-tokens/cds-g0.json create mode 100644 packages/tokens/dist/docs/products/themed-tokens/cds-g10.json create mode 100644 packages/tokens/dist/docs/products/themed-tokens/cds-g100.json create mode 100644 packages/tokens/dist/docs/products/themed-tokens/cds-g90.json create mode 100644 packages/tokens/dist/docs/products/themed-tokens/default.json create mode 100644 packages/tokens/dist/products/css/themed-tokens/with-css-selectors--advanced/tokens.css create mode 100644 packages/tokens/dist/products/css/themed-tokens/with-css-selectors--migration/tokens.css create mode 100644 packages/tokens/dist/products/css/themed-tokens/with-css-selectors/tokens.css create mode 100644 packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g0/common-tokens.css create mode 100644 packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g0/themed-tokens.css create mode 100644 packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g10/common-tokens.css create mode 100644 packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g10/themed-tokens.css create mode 100644 packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g100/common-tokens.css create mode 100644 packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g100/themed-tokens.css create mode 100644 packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g90/common-tokens.css create mode 100644 packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g90/themed-tokens.css create mode 100644 packages/tokens/dist/products/css/themed-tokens/with-root-selector/default/common-tokens.css create mode 100644 packages/tokens/dist/products/css/themed-tokens/with-root-selector/default/themed-tokens.css create mode 100644 packages/tokens/dist/products/css/themed-tokens/with-scss-mixins/tokens.css create mode 100644 packages/tokens/scripts/build-parts/customFormatCssThemedTokens.ts create mode 100644 packages/tokens/scripts/build-parts/generateThemingCssFiles.ts create mode 100644 packages/tokens/scripts/build-parts/generateThemingDocsFiles.ts create mode 100644 packages/tokens/scripts/build-parts/getSourceFromFileWithRootSelector.ts create mode 100644 packages/tokens/scripts/build-parts/validateThemingCssFiles.ts create mode 100644 packages/tokens/src/products/shared/app-footer.json create mode 100644 packages/tokens/src/products/shared/badge-count.json create mode 100644 packages/tokens/src/products/shared/badge.json create mode 100644 packages/tokens/src/products/shared/button.json create mode 100644 packages/tokens/src/products/shared/dismiss-button.json create mode 100644 packages/tokens/src/products/shared/icon-tile.json create mode 100644 packages/tokens/src/products/shared/rich-tooltip.json create mode 100644 showcase/app/components/page-carbonization/components/app-footer/index.gts create mode 100644 showcase/app/components/page-carbonization/components/application-state/index.gts create mode 100644 showcase/app/components/page-carbonization/components/badge-count/index.gts create mode 100644 showcase/app/components/page-carbonization/components/badge/index.gts create mode 100644 showcase/app/components/page-carbonization/components/button/index.gts create mode 100644 showcase/app/components/page-carbonization/components/form/radio-card/index.gts create mode 100644 showcase/app/components/page-carbonization/components/form/text-input/index.gts create mode 100644 showcase/app/components/page-carbonization/components/icon-tile/index.gts create mode 100644 showcase/app/components/page-carbonization/components/modal/index.gts create mode 100644 showcase/app/components/page-carbonization/components/rich-tooltip/index.gts create mode 100644 showcase/app/components/page-carbonization/components/segmented-group/index.gts create mode 100644 showcase/app/components/page-carbonization/components/separator/index.gts create mode 100644 showcase/app/components/page-carbonization/components/tooltip/index.gts create mode 100644 showcase/app/components/page-carbonization/foundations/color/index.gts create mode 100644 showcase/app/components/page-carbonization/foundations/focus-ring/index.gts create mode 100644 showcase/app/components/page-carbonization/foundations/typography/index.gts create mode 100644 showcase/app/components/page-carbonization/utilities/dismiss-button/index.gts create mode 100644 showcase/app/components/page-foundations/theming/index.gts create mode 100644 showcase/app/components/page-foundations/theming/sub-sections/components.gts create mode 100644 showcase/app/components/page-foundations/theming/sub-sections/contexts.gts create mode 100644 showcase/app/components/page-foundations/theming/sub-sections/demo.gts create mode 100644 showcase/app/components/page-foundations/theming/sub-sections/theme-switcher.gts create mode 100644 showcase/app/components/shw/carbonization/comparison-grid/index.gts create mode 100644 showcase/app/components/shw/carbonization/comparison-grid/item.gts create mode 100644 showcase/app/components/shw/carbonization/comparison-grid/no-equivalent.gts create mode 100644 showcase/app/components/shw/carbonization/style-preview/typography.gts create mode 100644 showcase/app/components/shw/carbonization/token-preview/color.gts create mode 100644 showcase/app/components/shw/theme-switcher/control/select.gts create mode 100644 showcase/app/components/shw/theme-switcher/control/toggle.gts create mode 100644 showcase/app/components/shw/theme-switcher/debugging-panel.gts create mode 100644 showcase/app/components/shw/theme-switcher/index.gts create mode 100644 showcase/app/components/shw/theme-switcher/popover.gts create mode 100644 showcase/app/components/shw/theme-switcher/selector.gts create mode 100644 showcase/app/components/shw/yield.gts create mode 100644 showcase/app/routes/page-foundations/theming/frameless/demo-application-with-theme-switcher.ts create mode 100644 showcase/app/services/shw-theming.ts create mode 100644 showcase/app/styles/showcase-components/carbonization/comparison-grid.scss create mode 100644 showcase/app/styles/showcase-components/carbonization/style-preview-typography.scss create mode 100644 showcase/app/styles/showcase-components/carbonization/token-preview-color.scss create mode 100644 showcase/app/styles/showcase-components/theme-switcher.scss create mode 100644 showcase/app/styles/showcase-pages/carbonization/app-footer.scss create mode 100644 showcase/app/styles/showcase-pages/carbonization/badge.scss create mode 100644 showcase/app/styles/showcase-pages/carbonization/focus-ring.scss create mode 100644 showcase/app/styles/showcase-pages/carbonization/form/radio-card.scss create mode 100644 showcase/app/styles/showcase-pages/carbonization/modal.scss create mode 100644 showcase/app/styles/showcase-pages/carbonization/rich-tooltip.scss create mode 100644 showcase/app/styles/showcase-pages/carbonization/segmented-group.scss create mode 100644 showcase/app/styles/showcase-pages/carbonization/tooltip.scss create mode 100644 showcase/app/styles/showcase-pages/carbonization/typography.scss delete mode 100644 showcase/app/styles/showcase-pages/dismiss-button.scss create mode 100644 showcase/app/styles/showcase-pages/theming.scss create mode 100644 showcase/app/templates/page-carbonization/components/app-footer.gts create mode 100644 showcase/app/templates/page-carbonization/components/application-state.gts create mode 100644 showcase/app/templates/page-carbonization/components/badge-count.gts create mode 100644 showcase/app/templates/page-carbonization/components/badge.gts create mode 100644 showcase/app/templates/page-carbonization/components/button.gts create mode 100644 showcase/app/templates/page-carbonization/components/form/radio-card.gts create mode 100644 showcase/app/templates/page-carbonization/components/form/text-input.gts create mode 100644 showcase/app/templates/page-carbonization/components/icon-tile.gts create mode 100644 showcase/app/templates/page-carbonization/components/modal.gts create mode 100644 showcase/app/templates/page-carbonization/components/rich-tooltip.gts create mode 100644 showcase/app/templates/page-carbonization/components/segmented-group.gts create mode 100644 showcase/app/templates/page-carbonization/components/separator.gts create mode 100644 showcase/app/templates/page-carbonization/components/tooltip.gts create mode 100644 showcase/app/templates/page-carbonization/foundations/color.gts create mode 100644 showcase/app/templates/page-carbonization/foundations/focus-ring.gts create mode 100644 showcase/app/templates/page-carbonization/foundations/typography.gts create mode 100644 showcase/app/templates/page-carbonization/utilities/dismiss-button.gts create mode 100644 showcase/app/templates/page-foundations/theming/frameless/demo-application-with-theme-switcher.gts create mode 100644 showcase/app/templates/page-foundations/theming/index.gts create mode 100644 showcase/public/assets/styles/@hashicorp/design-system-components-common.css create mode 100644 showcase/public/assets/styles/@hashicorp/design-system-components.css create mode 100644 showcase/public/assets/styles/@hashicorp/design-system-plex-fonts.css create mode 100644 showcase/public/assets/styles/@hashicorp/design-system-power-select-overrides.css create mode 100644 showcase/public/assets/styles/@hashicorp/themed-tokens/with-css-selectors--advanced/tokens.css create mode 100644 showcase/public/assets/styles/@hashicorp/themed-tokens/with-css-selectors--migration/tokens.css create mode 100644 showcase/public/assets/styles/@hashicorp/themed-tokens/with-css-selectors/tokens.css create mode 100644 showcase/tests/acceptance/components/hds/theming-test.js create mode 100644 showcase/tests/integration/components/hds/theme-context/index-test.gts create mode 100644 showcase/tests/integration/components/hds/theme-switcher/index-test.gts create mode 100644 showcase/tests/unit/services/hds-theming-test.js create mode 100644 showcase/types/design-token.ts diff --git a/.changeset/rotten-trains-hear.md b/.changeset/rotten-trains-hear.md new file mode 100644 index 00000000000..f1197d0dbdb --- /dev/null +++ b/.changeset/rotten-trains-hear.md @@ -0,0 +1,10 @@ +--- +"@hashicorp/flight-icons": minor +"@hashicorp/design-system-components": minor +--- + + +`Icon` +- Changed the way that icons are loaded in from sprite, to dynamic importing and generation at runtime +- Added support for loading Carbon icons when the user is using a Carbon theme + diff --git a/.changeset/tough-cows-rule.md b/.changeset/tough-cows-rule.md new file mode 100644 index 00000000000..fea282ea1a5 --- /dev/null +++ b/.changeset/tough-cows-rule.md @@ -0,0 +1,5 @@ +--- +"@hashicorp/design-system-tokens": major +--- + +TODO - Add proper changeset entries here \ No newline at end of file diff --git a/packages/components/package.json b/packages/components/package.json index 002ebd9aa84..be730af648c 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -55,6 +55,8 @@ "@floating-ui/dom": "^1.6.12", "@hashicorp/design-system-tokens": "workspace:^4.0.1", "@hashicorp/flight-icons": "workspace:^4.2.1", + "@ibm/plex-mono": "^1.1.0", + "@ibm/plex-sans": "^1.1.0", "@lezer/highlight": "^1.2.1", "@nullvoxpopuli/ember-composable-helpers": "^5.2.11", "clipboard-polyfill": "^4.1.1", @@ -357,6 +359,8 @@ "./components/hds/text/code.js": "./dist/_app_/components/hds/text/code.js", "./components/hds/text/display.js": "./dist/_app_/components/hds/text/display.js", "./components/hds/text.js": "./dist/_app_/components/hds/text.js", + "./components/hds/theme-context.js": "./dist/_app_/components/hds/theme-context.js", + "./components/hds/theme-switcher.js": "./dist/_app_/components/hds/theme-switcher.js", "./components/hds/time.js": "./dist/_app_/components/hds/time.js", "./components/hds/time/range.js": "./dist/_app_/components/hds/time/range.js", "./components/hds/time/single.js": "./dist/_app_/components/hds/time/single.js", @@ -368,6 +372,7 @@ "./helpers/hds-link-to-models.js": "./dist/_app_/helpers/hds-link-to-models.js", "./helpers/hds-link-to-query.js": "./dist/_app_/helpers/hds-link-to-query.js", "./helpers/hds-t.js": "./dist/_app_/helpers/hds-t.js", + "./instance-initializers/load-sprite-empty.js": "./dist/_app_/instance-initializers/load-sprite-empty.js", "./instance-initializers/load-sprite.js": "./dist/_app_/instance-initializers/load-sprite.js", "./modifiers/hds-advanced-table-cell.js": "./dist/_app_/modifiers/hds-advanced-table-cell.js", "./modifiers/hds-advanced-table-cell/dom-management.js": "./dist/_app_/modifiers/hds-advanced-table-cell/dom-management.js", @@ -384,8 +389,65 @@ "./modifiers/hds-code-editor/types.js": "./dist/_app_/modifiers/hds-code-editor/types.js", "./modifiers/hds-register-event.js": "./dist/_app_/modifiers/hds-register-event.js", "./modifiers/hds-tooltip.js": "./dist/_app_/modifiers/hds-tooltip.js", + "./services/hds-icon-registry.js": "./dist/_app_/services/hds-icon-registry.js", "./services/hds-intl.js": "./dist/_app_/services/hds-intl.js", + "./services/hds-theming.js": "./dist/_app_/services/hds-theming.js", "./services/hds-time.js": "./dist/_app_/services/hds-time.js" + }, + "public-assets": { + "dist/public/assets/fonts/LICENSE.txt": "assets/fonts/LICENSE.txt", + "dist/public/assets/fonts/complete/woff2/IBMPlexSans-Italic.woff2": "assets/fonts/complete/woff2/IBMPlexSans-Italic.woff2", + "dist/public/assets/fonts/complete/woff2/IBMPlexSans-Regular.woff2": "assets/fonts/complete/woff2/IBMPlexSans-Regular.woff2", + "dist/public/assets/fonts/complete/woff2/IBMPlexSans-SemiBold.woff2": "assets/fonts/complete/woff2/IBMPlexSans-SemiBold.woff2", + "dist/public/assets/fonts/complete/woff2/IBMPlexSans-SemiBoldItalic.woff2": "assets/fonts/complete/woff2/IBMPlexSans-SemiBoldItalic.woff2", + "dist/public/assets/fonts/complete/woff2/IBMPlexMono-Italic.woff2": "assets/fonts/complete/woff2/IBMPlexMono-Italic.woff2", + "dist/public/assets/fonts/complete/woff2/IBMPlexMono-Regular.woff2": "assets/fonts/complete/woff2/IBMPlexMono-Regular.woff2", + "dist/public/assets/fonts/complete/woff2/IBMPlexMono-SemiBold.woff2": "assets/fonts/complete/woff2/IBMPlexMono-SemiBold.woff2", + "dist/public/assets/fonts/complete/woff2/IBMPlexMono-SemiBoldItalic.woff2": "assets/fonts/complete/woff2/IBMPlexMono-SemiBoldItalic.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexMono-Italic-Cyrillic.woff2": "assets/fonts/split/woff2/IBMPlexMono-Italic-Cyrillic.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexMono-Italic-Latin1.woff2": "assets/fonts/split/woff2/IBMPlexMono-Italic-Latin1.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexMono-Italic-Latin2.woff2": "assets/fonts/split/woff2/IBMPlexMono-Italic-Latin2.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexMono-Italic-Latin3.woff2": "assets/fonts/split/woff2/IBMPlexMono-Italic-Latin3.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexMono-Italic-Pi.woff2": "assets/fonts/split/woff2/IBMPlexMono-Italic-Pi.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexMono-Regular-Cyrillic.woff2": "assets/fonts/split/woff2/IBMPlexMono-Regular-Cyrillic.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexMono-Regular-Latin1.woff2": "assets/fonts/split/woff2/IBMPlexMono-Regular-Latin1.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexMono-Regular-Latin2.woff2": "assets/fonts/split/woff2/IBMPlexMono-Regular-Latin2.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexMono-Regular-Latin3.woff2": "assets/fonts/split/woff2/IBMPlexMono-Regular-Latin3.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexMono-Regular-Pi.woff2": "assets/fonts/split/woff2/IBMPlexMono-Regular-Pi.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexMono-SemiBold-Cyrillic.woff2": "assets/fonts/split/woff2/IBMPlexMono-SemiBold-Cyrillic.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexMono-SemiBold-Latin1.woff2": "assets/fonts/split/woff2/IBMPlexMono-SemiBold-Latin1.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexMono-SemiBold-Latin2.woff2": "assets/fonts/split/woff2/IBMPlexMono-SemiBold-Latin2.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexMono-SemiBold-Latin3.woff2": "assets/fonts/split/woff2/IBMPlexMono-SemiBold-Latin3.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexMono-SemiBold-Pi.woff2": "assets/fonts/split/woff2/IBMPlexMono-SemiBold-Pi.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Cyrillic.woff2": "assets/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Cyrillic.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Latin1.woff2": "assets/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Latin1.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Latin2.woff2": "assets/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Latin2.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Latin3.woff2": "assets/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Latin3.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Pi.woff2": "assets/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Pi.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexSans-Italic-Cyrillic.woff2": "assets/fonts/split/woff2/IBMPlexSans-Italic-Cyrillic.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexSans-Italic-Greek.woff2": "assets/fonts/split/woff2/IBMPlexSans-Italic-Greek.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexSans-Italic-Latin1.woff2": "assets/fonts/split/woff2/IBMPlexSans-Italic-Latin1.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexSans-Italic-Latin2.woff2": "assets/fonts/split/woff2/IBMPlexSans-Italic-Latin2.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexSans-Italic-Latin3.woff2": "assets/fonts/split/woff2/IBMPlexSans-Italic-Latin3.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexSans-Italic-Pi.woff2": "assets/fonts/split/woff2/IBMPlexSans-Italic-Pi.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexSans-Regular-Cyrillic.woff2": "assets/fonts/split/woff2/IBMPlexSans-Regular-Cyrillic.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexSans-Regular-Greek.woff2": "assets/fonts/split/woff2/IBMPlexSans-Regular-Greek.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexSans-Regular-Latin1.woff2": "assets/fonts/split/woff2/IBMPlexSans-Regular-Latin1.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexSans-Regular-Latin2.woff2": "assets/fonts/split/woff2/IBMPlexSans-Regular-Latin2.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexSans-Regular-Latin3.woff2": "assets/fonts/split/woff2/IBMPlexSans-Regular-Latin3.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexSans-Regular-Pi.woff2": "assets/fonts/split/woff2/IBMPlexSans-Regular-Pi.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBold-Cyrillic.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBold-Cyrillic.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBold-Greek.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBold-Greek.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBold-Latin1.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBold-Latin1.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBold-Latin2.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBold-Latin2.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBold-Latin3.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBold-Latin3.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBold-Pi.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBold-Pi.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Cyrillic.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Cyrillic.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Greek.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Greek.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Latin1.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Latin1.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Latin2.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Latin2.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Latin3.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Latin3.woff2", + "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Pi.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Pi.woff2" } }, "exports": { diff --git a/packages/components/rollup.config.mjs b/packages/components/rollup.config.mjs index 7cc3242ea0b..ea608a25741 100644 --- a/packages/components/rollup.config.mjs +++ b/packages/components/rollup.config.mjs @@ -95,10 +95,22 @@ const plugins = [ 'node_modules/@hashicorp/design-system-tokens/dist/products/css', ], }, + { + inputFile: 'design-system-components-common.scss', + outputFile: 'design-system-components-common.css', + loadPaths: [ + 'node_modules/@hashicorp/design-system-tokens/dist/products/css', + ], + }, { inputFile: 'design-system-power-select-overrides.scss', outputFile: 'design-system-power-select-overrides.css', }, + { + inputFile: 'design-system-plex-fonts.scss', + outputFile: 'design-system-plex-fonts.css', + loadPaths: ['node_modules/@ibm'], + }, ] ), @@ -133,12 +145,54 @@ const plugins = [ { src: 'LICENSE.md', dest: 'dist' }, // Copy Sass files for consumers to use directly { src: 'src/styles', dest: 'dist' }, + // Copy the IBM Plex fonts from the @ibm packages to the public folder + { + src: 'node_modules/@ibm/plex-sans/LICENSE.txt', + dest: 'dist/public/assets/fonts', + }, + { + src: [ + 'node_modules/@ibm/plex-sans/fonts/complete/woff2/IBMPlexSans-Italic.woff2', + 'node_modules/@ibm/plex-sans/fonts/complete/woff2/IBMPlexSans-Regular.woff2', + 'node_modules/@ibm/plex-sans/fonts/complete/woff2/IBMPlexSans-SemiBold.woff2', + 'node_modules/@ibm/plex-sans/fonts/complete/woff2/IBMPlexSans-SemiBoldItalic.woff2', + 'node_modules/@ibm/plex-mono/fonts/complete/woff2/IBMPlexMono-Italic.woff2', + 'node_modules/@ibm/plex-mono/fonts/complete/woff2/IBMPlexMono-Regular.woff2', + 'node_modules/@ibm/plex-mono/fonts/complete/woff2/IBMPlexMono-SemiBold.woff2', + 'node_modules/@ibm/plex-mono/fonts/complete/woff2/IBMPlexMono-SemiBoldItalic.woff2', + ], + dest: 'dist/public/assets/fonts/complete/woff2', + }, + { + src: [ + 'node_modules/@ibm/plex-sans/fonts/split/woff2/IBMPlexSans-Regular-*.woff2', + 'node_modules/@ibm/plex-sans/fonts/split/woff2/IBMPlexSans-Italic-*.woff2', + 'node_modules/@ibm/plex-sans/fonts/split/woff2/IBMPlexSans-SemiBold-*.woff2', + 'node_modules/@ibm/plex-sans/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-*.woff2', + 'node_modules/@ibm/plex-mono/fonts/split/woff2/IBMPlexMono-Regular-*.woff2', + 'node_modules/@ibm/plex-mono/fonts/split/woff2/IBMPlexMono-Italic-*.woff2', + 'node_modules/@ibm/plex-mono/fonts/split/woff2/IBMPlexMono-SemiBold-*.woff2', + 'node_modules/@ibm/plex-mono/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-*.woff2', + ], + dest: 'dist/public/assets/fonts/split/woff2', + }, ], hook: 'writeBundle', copySync: true, copyOnce: true, // verbose: true, }), + + // After bundle is written, copy built CSS to Showcase app + copy({ + hook: 'writeBundle', + targets: [ + { + src: 'dist/styles/@hashicorp/*.css', + dest: '../../showcase/public/assets/styles/@hashicorp', + }, + ], + }), ]; if (!process.env.development) { diff --git a/packages/components/scripts/check-dist-files.mjs b/packages/components/scripts/check-dist-files.mjs index b2f8c1eedc6..cb3bdcc1dd8 100644 --- a/packages/components/scripts/check-dist-files.mjs +++ b/packages/components/scripts/check-dist-files.mjs @@ -4,7 +4,9 @@ import { existsSync } from 'node:fs'; const FILES_TO_CHECK = [ 'dist/styles/@hashicorp/design-system-components.css', + 'dist/styles/@hashicorp/design-system-components-common.css', 'dist/styles/@hashicorp/design-system-power-select-overrides.css', + 'dist/styles/@hashicorp/design-system-plex-fonts.css', ]; let hasErrors = false; diff --git a/packages/components/src/components.ts b/packages/components/src/components.ts index 4af8b2ac2f8..721ec92b5f6 100644 --- a/packages/components/src/components.ts +++ b/packages/components/src/components.ts @@ -329,6 +329,12 @@ export { default as HdsTextCode } from './components/hds/text/code.gts'; export { default as HdsTextDisplay } from './components/hds/text/display.gts'; export * from './components/hds/text/types.ts'; +// Theme Context +export { default as HdsThemeContext } from './components/hds/theme-context/index.ts'; + +// Theme Switcher +export { default as HdsThemeSwitcher } from './components/hds/theme-switcher/index.ts'; + // Time export { default as HdsTime } from './components/hds/time/index.gts'; export { default as HdsTimeSingle } from './components/hds/time/single.gts'; diff --git a/packages/components/src/components/hds/icon-tile/index.gts b/packages/components/src/components/hds/icon-tile/index.gts index 1f6bba2fd68..973858fff3a 100644 --- a/packages/components/src/components/hds/icon-tile/index.gts +++ b/packages/components/src/components/hds/icon-tile/index.gts @@ -77,8 +77,7 @@ export default class HdsIconTile extends Component { get icon(): HdsIconSignature['Args']['name'] | undefined { if (this.args.logo) { - // for the logo version we use the colored versions directly - return `${this.args.logo}-color`; + return this.args.logo; } else if (this.args.icon) { return this.args.icon; } else { diff --git a/packages/components/src/components/hds/icon/index.gts b/packages/components/src/components/hds/icon/index.gts index 5fcd06959e7..d4cb7f6b86c 100644 --- a/packages/components/src/components/hds/icon/index.gts +++ b/packages/components/src/components/hds/icon/index.gts @@ -4,13 +4,23 @@ */ import Component from '@glimmer/component'; -import { assert } from '@ember/debug'; +import { service } from '@ember/service'; import { guidFor } from '@ember/object/internals'; +import { assert } from '@ember/debug'; +import { modifier } from 'ember-modifier'; import { iconNames } from '@hashicorp/flight-icons/svg'; -import type { IconName } from '@hashicorp/flight-icons/svg'; -import type Owner from '@ember/owner'; +import { IconRegistry } from '@hashicorp/flight-icons/symbol-js/registry'; +import { + HdsIconSizeValues, + HdsIconColorValues, + HdsIconLibraryValues, +} from './types.ts'; -import { HdsIconSizeValues, HdsIconColorValues } from './types.ts'; +import type { IconName } from '@hashicorp/flight-icons/svg'; +import type { HdsIconRegistryEntry } from '@hashicorp/flight-icons/symbol-js/registry'; +import type HdsThemingService from '@hashicorp/design-system-components/services/hds-theming'; +import type HdsIconRegistryService from '@hashicorp/design-system-components/services/hds-icon-registry'; +import type { HdsIconDefinition } from '@hashicorp/design-system-components/services/hds-icon-registry'; import type { HdsIconSizes, HdsIconColors } from './types.ts'; export const COLORS: HdsIconColors[] = Object.values(HdsIconColorValues); @@ -30,19 +40,50 @@ export interface HdsIconSignature { } export default class HdsIcon extends Component { + @service declare readonly hdsTheming: HdsThemingService; + @service declare readonly hdsIconRegistry: HdsIconRegistryService; + private _iconId = 'icon-' + guidFor(this); private _titleId = 'title-' + guidFor(this); - constructor(owner: Owner, args: HdsIconSignature['Args']) { - super(owner, args); + get definition(): HdsIconDefinition { + return { + name: this.name, + size: this.size, + library: this.isCarbon + ? HdsIconLibraryValues.Carbon + : HdsIconLibraryValues.Flight, + }; + } + + get name(): HdsIconSignature['Args']['name'] { + const { name } = this.args; - if (!this.args.name) { - assert('Please provide to a value for @name'); - } else if (!iconNames.includes(this.args.name)) { - assert( - `The icon @name "${this.args.name}" provided to is not correct. Please verify it exists on https://helios.hashicorp.design/icons/library` - ); - } + assert( + 'Please provide to a value for @name', + name !== undefined + ); + + return name; + } + + get registryEntry(): HdsIconRegistryEntry | undefined { + const registryEntry = IconRegistry[this.name]; + + assert( + `The icon @name "${this.args.name}" or @size "${this.args.size}" provided to is not correct. Please verify it exists on https://helios.hashicorp.design/icons/library`, + registryEntry !== undefined + ); + + return IconRegistry[this.name]; + } + + get hasCarbonEquivalent(): boolean { + return this.registryEntry?.carbon !== null; + } + + get isCarbon(): boolean { + return this.hdsTheming.isCarbonThemeEnabled && this.hasCarbonEquivalent; } get isInline() { @@ -67,7 +108,7 @@ export default class HdsIcon extends Component { } } - get size() { + get size(): HdsIconSizes { return this.args.size ?? HdsIconSizeValues.Sixteen; } @@ -114,13 +155,23 @@ export default class HdsIcon extends Component { return classes.join(' '); } + get symbolId(): string { + return this.hdsIconRegistry.getSymbolId(this.definition) ?? ''; + } + + loadIcon = modifier(() => { + this.hdsIconRegistry.requestLoad(this.definition); + }); + diff --git a/packages/components/src/components/hds/icon/types.ts b/packages/components/src/components/hds/icon/types.ts index 7249ae72109..35a4e85fc57 100644 --- a/packages/components/src/components/hds/icon/types.ts +++ b/packages/components/src/components/hds/icon/types.ts @@ -3,6 +3,8 @@ * SPDX-License-Identifier: MPL-2.0 */ +import type { HdsIconModule } from '@hashicorp/flight-icons/symbol-js/registry'; + export enum HdsIconSizeValues { Sixteen = '16', TwentyFour = '24', @@ -33,3 +35,11 @@ export enum HdsIconColorValues { CriticalHighContrast = 'critical-high-contrast', } export type HdsIconColors = `${HdsIconColorValues}`; + +export enum HdsIconLibraryValues { + Flight = 'flight', + Carbon = 'carbon', +} +export type HdsIconLibraries = `${HdsIconLibraryValues}`; + +export type HdsIconLoader = () => Promise; diff --git a/packages/components/src/components/hds/theme-context/index.hbs b/packages/components/src/components/hds/theme-context/index.hbs new file mode 100644 index 00000000000..3c70900eac7 --- /dev/null +++ b/packages/components/src/components/hds/theme-context/index.hbs @@ -0,0 +1,5 @@ +{{! + Copyright (c) HashiCorp, Inc. + SPDX-License-Identifier: MPL-2.0 +}} +
{{yield}}
\ No newline at end of file diff --git a/packages/components/src/components/hds/theme-context/index.ts b/packages/components/src/components/hds/theme-context/index.ts new file mode 100644 index 00000000000..c47d2625257 --- /dev/null +++ b/packages/components/src/components/hds/theme-context/index.ts @@ -0,0 +1,69 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import Component from '@glimmer/component'; +import { assert } from '@ember/debug'; +import type Owner from '@ember/owner'; + +import { + HdsThemeContextThemesValues, + HdsThemeContextModesValues, +} from './types.ts'; +import type { HdsThemeContexts } from './types.ts'; + +import type { HdsThemes, HdsModes } from '../../../services/hds-theming.ts'; + +export interface HdsThemeContextSignature { + Args: { + // can be either an `HdsTheme` or an `HdsMode` + context: HdsThemeContexts; + }; + Blocks: { + default: []; + }; + Element: HTMLElement; +} + +export const CONTEXTUAL_THEMES: HdsThemes[] = Object.values( + HdsThemeContextThemesValues +); +export const CONTEXTUAL_MODES: HdsModes[] = Object.values( + HdsThemeContextModesValues +); +export const CONTEXTUAL_VALUES: HdsThemeContexts[] = [ + ...CONTEXTUAL_THEMES, + ...CONTEXTUAL_MODES, +]; + +export default class HdsThemeContext extends Component { + constructor(owner: Owner, args: HdsThemeContextSignature['Args']) { + super(owner, args); + + const { context } = args; + + assert( + `@context for "Hds::ThemeContext" must be one of the following: ${CONTEXTUAL_VALUES.join( + ', ' + )}; received: ${context}`, + CONTEXTUAL_VALUES.includes(context) + ); + } + + // Get the class names to apply to the component. + get classNames(): string { + const classes = ['hds-theme-context']; + + const { context } = this.args; + + // add "theme" or "mode" classes based on the @context arguments + if (CONTEXTUAL_THEMES.includes(context as HdsThemes)) { + classes.push(`hds-theme-${context}`); + } else if (CONTEXTUAL_MODES.includes(context as HdsModes)) { + classes.push(`hds-mode-${context}`); + } + + return classes.join(' '); + } +} diff --git a/packages/components/src/components/hds/theme-context/types.ts b/packages/components/src/components/hds/theme-context/types.ts new file mode 100644 index 00000000000..c9262f71ee0 --- /dev/null +++ b/packages/components/src/components/hds/theme-context/types.ts @@ -0,0 +1,32 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import { + HdsThemeValues, + HdsModesLightValues, + HdsModesDarkValues, +} from '../../../services/hds-theming.ts'; + +import type { HdsThemes, HdsModes } from '../../../services/hds-theming.ts'; + +// re-export the enum values for the `HdsThemes` to use in the component +// note: using `as const` ensures Object.values() returns only the values (not keys _and_ values) +export const HdsThemeContextThemesValues = { + Default: HdsThemeValues.Default, + System: HdsThemeValues.System, + Light: HdsThemeValues.Light, + Dark: HdsThemeValues.Dark, +} as const; + +// re-export the enum values for the `HdsModes` to use in the component +// note: using `as const` ensures Object.values() returns only the values (not keys _and_ values) +export const HdsThemeContextModesValues = { + CdsG0: HdsModesLightValues.CdsG0, + CdsG10: HdsModesLightValues.CdsG10, + CdsG90: HdsModesDarkValues.CdsG90, + CdsG100: HdsModesDarkValues.CdsG100, +} as const; + +export type HdsThemeContexts = HdsThemes | Exclude; diff --git a/packages/components/src/components/hds/theme-switcher/index.hbs b/packages/components/src/components/hds/theme-switcher/index.hbs new file mode 100644 index 00000000000..b273f5936dc --- /dev/null +++ b/packages/components/src/components/hds/theme-switcher/index.hbs @@ -0,0 +1,29 @@ +{{! + Copyright (c) HashiCorp, Inc. + SPDX-License-Identifier: MPL-2.0 +}} + +{{! + ------------------------------------------------------------------------------------------ + IMPORTANT: this is a temporary implementation, while we wait for the design specifications + ------------------------------------------------------------------------------------------ +}} + + + + {{#each-in this._options as |key data|}} + {{data.label}} + {{/each-in}} + \ No newline at end of file diff --git a/packages/components/src/components/hds/theme-switcher/index.ts b/packages/components/src/components/hds/theme-switcher/index.ts new file mode 100644 index 00000000000..440238efda8 --- /dev/null +++ b/packages/components/src/components/hds/theme-switcher/index.ts @@ -0,0 +1,108 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +// ------------------------------------------------------------------------------------------ +// IMPORTANT: this is a temporary implementation, while we wait for the design specifications +// ------------------------------------------------------------------------------------------ + +import Component from '@glimmer/component'; +import { inject as service } from '@ember/service'; +import { action } from '@ember/object'; + +import type { HdsDropdownSignature } from '../dropdown/index.ts'; +import type { HdsDropdownToggleButtonSignature } from '../dropdown/toggle/button.ts'; +import type { HdsIconSignature } from '../icon/index.ts'; +import type HdsThemingService from '../../../services/hds-theming.ts'; +import type { + HdsThemes, + HdsOnSetThemeCallback, +} from '../../../services/hds-theming.ts'; + +interface ThemeOption { + theme: HdsThemes | undefined; + icon: HdsIconSignature['Args']['name']; + label: string; +} + +const OPTIONS: Record = { + default: { theme: 'default', icon: 'hashicorp', label: 'Default' }, + system: { theme: 'system', icon: 'monitor', label: 'System' }, + light: { theme: 'light', icon: 'sun', label: 'Light' }, + dark: { theme: 'dark', icon: 'moon', label: 'Dark' }, +}; + +export interface HdsThemeSwitcherSignature { + Args: { + toggleSize?: HdsDropdownToggleButtonSignature['Args']['size']; + toggleIsFullWidth?: HdsDropdownToggleButtonSignature['Args']['isFullWidth']; + hasDefaultOption?: boolean; + hasSystemOption?: boolean; + onSetTheme?: HdsOnSetThemeCallback; + }; + Element: HdsDropdownSignature['Element']; +} + +export default class HdsThemeSwitcher extends Component { + @service declare readonly hdsTheming: HdsThemingService; + + get toggleSize() { + return this.args.toggleSize ?? 'small'; + } + + get toggleIsFullWidth() { + return this.args.toggleIsFullWidth ?? false; + } + + get toggleContent() { + if ( + (this.currentTheme === 'default' && this.hasDefaultOption) || + (this.currentTheme === 'system' && this.hasSystemOption) || + this.currentTheme === 'light' || + this.currentTheme === 'dark' + ) { + return { + label: OPTIONS[this.currentTheme].label, + icon: OPTIONS[this.currentTheme].icon, + }; + } else { + return { label: 'Theme', icon: undefined }; + } + } + + // note: we will use the `default` option in development, while migrating to the `cds` theming + // during this process, consumers will enable/disable this option via code logic or feature flag + get hasDefaultOption() { + return this.args.hasDefaultOption ?? false; + } + + get hasSystemOption() { + return this.args.hasSystemOption ?? true; + } + + get _options() { + const options: Partial = { ...OPTIONS }; + + if (!this.hasDefaultOption) { + delete options.default; + } + + if (!this.hasSystemOption) { + delete options.system; + } + + return options; + } + + get currentTheme() { + // we get the theme from the global service + return this.hdsTheming.currentTheme; + } + + @action + onSelectTheme(theme: HdsThemes | undefined): void { + // we set the theme in the global service (and provide an optional user-defined callback) + this.hdsTheming.setTheme({ theme, onSetTheme: this.args.onSetTheme }); + } +} diff --git a/packages/components/src/instance-initializers/load-sprite-empty.ts b/packages/components/src/instance-initializers/load-sprite-empty.ts new file mode 100644 index 00000000000..352a417d52e --- /dev/null +++ b/packages/components/src/instance-initializers/load-sprite-empty.ts @@ -0,0 +1,48 @@ +/** + * Copyright IBM Corp. 2021, 2025 + * SPDX-License-Identifier: MPL-2.0 + */ + +import { isTesting } from '@embroider/macros'; + +export const ROOT_ID = 'flight-sprite-empty-container'; + +function buildHostMarkup(): string { + // One hidden SVG element that hosts all nodes + // This is intentionally "DOM-only" and not an Ember component so that consumers + // don't need to mount anything in templates or call initializers manually. + return ` + +`.trim(); +} + +export function initialize() { + if (typeof window === 'undefined' || typeof document === 'undefined') { + return; + } + + if (isTesting()) { + const container = window.document?.getElementById('ember-testing'); + + if (container && !container.querySelector(`#${ROOT_ID}`)) { + container.insertAdjacentHTML('afterbegin', buildHostMarkup()); + } + } else { + const container = window.document?.body; + + if (container && !container.querySelector(`#${ROOT_ID}`)) { + container.insertAdjacentHTML('beforeend', buildHostMarkup()); + } + } +} + +export default { + initialize, +}; diff --git a/packages/components/src/modifiers/hds-tooltip.ts b/packages/components/src/modifiers/hds-tooltip.ts index 23f8525a71f..90d7485c2fd 100644 --- a/packages/components/src/modifiers/hds-tooltip.ts +++ b/packages/components/src/modifiers/hds-tooltip.ts @@ -217,10 +217,7 @@ export default class HdsTooltipModifier extends Modifier - - `, + arrow: true, // keeps tooltip itself open on hover: interactive: true, appendTo: this._containerElement, diff --git a/packages/components/src/services.ts b/packages/components/src/services.ts index a6f6da9c6bc..10484d26cf3 100644 --- a/packages/components/src/services.ts +++ b/packages/components/src/services.ts @@ -4,3 +4,5 @@ */ // This file is used to expose public services + +export * from './services/hds-theming.ts'; diff --git a/packages/components/src/services/hds-icon-registry.ts b/packages/components/src/services/hds-icon-registry.ts new file mode 100644 index 00000000000..5c75b2ab8a7 --- /dev/null +++ b/packages/components/src/services/hds-icon-registry.ts @@ -0,0 +1,322 @@ +import Service from '@ember/service'; +import { assert } from '@ember/debug'; +import { TrackedMap } from 'tracked-built-ins'; +import { ROOT_ID } from '../instance-initializers/load-sprite-empty.ts'; +import { HdsIconLibraryValues } from '../components.ts'; +import { IconRegistry } from '@hashicorp/flight-icons/symbol-js/registry'; + +import type { IconName } from '@hashicorp/flight-icons/svg/index'; +import type { + HdsIconLoader, + HdsIconLibraries, + HdsIconSizes, +} from '../components'; + +enum HdsIconRegistryLoadStatusValues { + Queued = 'queued', // request received and waiting in the queue + Loaded = 'loaded', // icon has been loaded and injected into the DOM + Error = 'error', // icon failed to load or inject +} + +type HdsIconRegistryEntry = { + status: HdsIconRegistryLoadStatusValues; + symbolId: string; + error?: unknown; +}; + +export interface HdsIconDefinition { + name: IconName; + library: HdsIconLibraries; + size: HdsIconSizes; +} + +const HAS_DOM = + typeof window !== 'undefined' && typeof document !== 'undefined'; + +// important: if you update this function, update the identical one in `packages/flight-icons/scripts/build-parts/generateBundleSymbolJS.ts` as well (and vice versa) +function makeDomSafeId(value: string): string { + return value.replace(/[^a-zA-Z0-9_-]/g, '-'); +} + +// important: if you update this function, update the identical one in `packages/flight-icons/scripts/build-parts/generateBundleSymbolJS.ts` as well (and vice versa) +function makeSymbolIdFromKey(key: string): string { + return `hds-icon-${makeDomSafeId(key)}`; +} + +// we scale with available CPU cores when possible, clamped to a safe range. +const MAX_CONCURRENT_LOADS_CAP = 32; +const MAX_CONCURRENT_LOADS = Math.min( + MAX_CONCURRENT_LOADS_CAP, + Math.max( + 8, + (typeof navigator !== 'undefined' ? navigator.hardwareConcurrency : 0) * 2 + ) +); + +const PARSER = new DOMParser(); + +export default class HdsIconRegistryService extends Service { + private _entries = new TrackedMap(); + + // queue + private _queue: Array<{ key: string; loader: HdsIconLoader }> = []; + private _activeCount = 0; + private readonly _maxConcurrent = MAX_CONCURRENT_LOADS; + + // batched DOM injection + private _pendingByKey = new Map< + string, + { symbolId: string; markup: string } + >(); + private _flushScheduled = false; + + private _spriteRoot: SVGSVGElement | null = null; + + private _setEntryStatus( + key: string, + symbolId: string, + status: HdsIconRegistryLoadStatusValues, + error?: unknown + ): void { + this._entries.set(key, { + symbolId, + status, + error, + }); + } + + private _getSpriteRoot(): SVGSVGElement | null { + if (!HAS_DOM) { + return null; + } + + if (this._spriteRoot) { + return this._spriteRoot; + } + + this._spriteRoot = document.getElementById(ROOT_ID) as SVGSVGElement | null; + + if (this._spriteRoot === null) { + console.warn( + `HDS Icon Registry: Sprite root element with ID "${ROOT_ID}" not found in DOM.` + ); + } + + return this._spriteRoot; + } + + private _makeKey({ library, name, size }: HdsIconDefinition): string { + return library === HdsIconLibraryValues.Flight + ? `${library}-${name}-${size}` + : `${library}-${name}`; + } + + getSymbolId(definition: HdsIconDefinition): string | null { + const key = this._makeKey(definition); + const entry = this._entries.get(key); + + // if loaded, return the ID + if (entry?.status === HdsIconRegistryLoadStatusValues.Loaded) { + return entry.symbolId; + } + + return null; + } + + requestLoad(definition: HdsIconDefinition): void { + const key = this._makeKey(definition); + + if (this._entries.has(key)) { + return; + } + + const loader = this._resolveLoader(definition); + + // defer the write to a microtask + void Promise.resolve().then(() => { + // re-check existence (state might have changed in the microsecond interim) + if (this._entries.has(key)) { + return; + } + + const symbolId = makeSymbolIdFromKey(key); + + if (this._symbolExists(symbolId)) { + this._setEntryStatus( + key, + symbolId, + HdsIconRegistryLoadStatusValues.Loaded + ); + return; + } + + if (!HAS_DOM) { + return; + } + + this._setEntryStatus( + key, + symbolId, + HdsIconRegistryLoadStatusValues.Queued + ); + + this._queue.push({ key, loader }); + this._drainQueue(); + }); + } + + private _resolveLoader({ + name, + library, + size, + }: HdsIconDefinition): HdsIconLoader { + const entry = IconRegistry[name]; + + if (library === HdsIconLibraryValues.Carbon) { + const carbonLoader = entry.carbon; + + assert(`Carbon icon not available for "${name}".`, carbonLoader !== null); + + return carbonLoader; + } else { + const flightLoader = entry.flight[size]; + + assert( + `Flight icon not available for "${name}" with size "${size}".`, + flightLoader !== undefined + ); + + return flightLoader; + } + } + + private _drainQueue(): void { + while (this._activeCount < this._maxConcurrent && this._queue.length > 0) { + const next = this._queue.shift()!; + + void this._runQueuedLoad(next.key, next.loader); + } + } + + private async _runQueuedLoad( + key: string, + loader: HdsIconLoader + ): Promise { + const entry = this._entries.get(key); + + if (entry === undefined) { + return; + } + + const { symbolId } = entry; + + if (this._symbolExists(symbolId)) { + this._setEntryStatus( + key, + symbolId, + HdsIconRegistryLoadStatusValues.Loaded + ); + return; + } + + this._activeCount++; + + try { + const mod = await loader(); + const markup = mod.default; + + // buffer markup for batched injection + this._pendingByKey.set(key, { symbolId, markup }); + this._scheduleFlush(); + } catch (error) { + this._setEntryStatus( + key, + symbolId, + HdsIconRegistryLoadStatusValues.Error, + error + ); + } finally { + this._activeCount--; + this._drainQueue(); + } + } + + private _symbolExists(symbolId: string): boolean { + return HAS_DOM ? document.getElementById(symbolId) !== null : false; + } + + private _scheduleFlush(): void { + if (this._flushScheduled || !HAS_DOM) { + return; + } + + this._flushScheduled = true; + + // one flush per frame + window.requestAnimationFrame(() => { + this._flushScheduled = false; + + const root = this._getSpriteRoot(); + + if (root === null || this._pendingByKey.size === 0) { + return; + } + + // combine into one insertion + let combined = ''; + const keysToUpdate: string[] = []; + + for (const [key, { symbolId, markup }] of this._pendingByKey) { + if (!this._symbolExists(symbolId)) { + combined += markup; + + keysToUpdate.push(key); + } + } + + this._pendingByKey.clear(); + + if (combined.length > 0) { + try { + const svgDoc = PARSER.parseFromString( + `${combined}`, + 'image/svg+xml' + ); + + const fragment = document.createDocumentFragment(); + while (svgDoc.documentElement.firstChild) { + fragment.appendChild(svgDoc.documentElement.firstChild); + } + + root.appendChild(fragment); + + for (const key of keysToUpdate) { + const entry = this._entries.get(key); + if (entry) { + this._setEntryStatus( + key, + entry.symbolId, + HdsIconRegistryLoadStatusValues.Loaded + ); + } + } + } catch (error) { + console.error('HDS Icon Registry: Failed to inject batch', error); + + for (const key of keysToUpdate) { + const entry = this._entries.get(key); + + if (entry) { + this._setEntryStatus( + key, + entry.symbolId, + HdsIconRegistryLoadStatusValues.Error, + error + ); + } + } + } + } + }); + } +} diff --git a/packages/components/src/services/hds-theming.ts b/packages/components/src/services/hds-theming.ts new file mode 100644 index 00000000000..3235e9f8e2b --- /dev/null +++ b/packages/components/src/services/hds-theming.ts @@ -0,0 +1,171 @@ +import Service from '@ember/service'; +import { tracked } from '@glimmer/tracking'; + +export enum HdsThemeValues { + // default (original HDS) + Default = 'default', + // system settings (prefers-color-scheme) + System = 'system', + // user settings for dark/light + Light = 'light', + Dark = 'dark', +} + +export enum HdsModesBaseValues { + Default = 'default', +} + +export enum HdsModesLightValues { + CdsG0 = 'cds-g0', + CdsG10 = 'cds-g10', +} + +export enum HdsModesDarkValues { + CdsG90 = 'cds-g90', + CdsG100 = 'cds-g100', +} + +export type HdsThemes = `${HdsThemeValues}`; +export type HdsModes = + | `${HdsModesBaseValues}` + | `${HdsModesLightValues}` + | `${HdsModesDarkValues}`; +export type HdsModesLight = `${HdsModesLightValues}`; +export type HdsModesDark = `${HdsModesDarkValues}`; + +export type HdsThemingOptions = { + lightTheme: HdsModesLight; + darkTheme: HdsModesDark; +}; + +export type HdsSetThemeArgs = { + theme: HdsThemes | undefined; + options?: HdsThemingOptions; + onSetTheme?: HdsOnSetThemeCallback; +}; + +export type HdsOnSetThemeCallbackArgs = { + currentTheme: HdsThemes | undefined; + currentMode: HdsModes | undefined; +}; + +export type HdsOnSetThemeCallback = (args: HdsOnSetThemeCallbackArgs) => void; + +export const THEMES: HdsThemes[] = Object.values(HdsThemeValues); +export const MODES_LIGHT: HdsModesLight[] = Object.values(HdsModesLightValues); +export const MODES_DARK: HdsModesDark[] = Object.values(HdsModesDarkValues); +export const MODES: HdsModes[] = [ + ...Object.values(HdsModesBaseValues), + ...MODES_LIGHT, + ...MODES_DARK, +]; + +export const DEFAULT_THEMING_OPTION_LIGHT_THEME = HdsModesLightValues.CdsG0; +export const DEFAULT_THEMING_OPTION_DARK_THEME = HdsModesDarkValues.CdsG100; + +export default class HdsThemingService extends Service { + @tracked _currentTheme: HdsThemes | undefined = undefined; + @tracked _currentMode: HdsModes | undefined = undefined; + @tracked _currentLightTheme: HdsModesLight = + DEFAULT_THEMING_OPTION_LIGHT_THEME; + @tracked _currentDarkTheme: HdsModesDark = DEFAULT_THEMING_OPTION_DARK_THEME; + + setTheme({ theme, options, onSetTheme }: HdsSetThemeArgs) { + if (options !== undefined) { + // if we have new options, we override the current ones (`lightTheme` / `darkTheme`) + // these options can be used by consumers that want to customize how they apply theming + // (and used by the showcase for the custom theming / theme switching logic) + if ( + Object.hasOwn(options, 'lightTheme') && + Object.hasOwn(options, 'darkTheme') + ) { + const { lightTheme, darkTheme } = options; + + this._currentLightTheme = lightTheme; + this._currentDarkTheme = darkTheme; + } else { + // fallback if something goes wrong + this._currentLightTheme = DEFAULT_THEMING_OPTION_LIGHT_THEME; + this._currentDarkTheme = DEFAULT_THEMING_OPTION_DARK_THEME; + } + } + + // set the current theme/mode (`currentTheme` / `currentMode`) + if ( + theme === undefined || // standard (no theming) + !THEMES.includes(theme) // handle possible errors + ) { + this._currentTheme = undefined; + this._currentMode = undefined; + } else if ( + theme === HdsThemeValues.Default // default (original HDS) + ) { + this._currentTheme = HdsThemeValues.Default; + this._currentMode = undefined; + } else if ( + theme === HdsThemeValues.System // system (prefers-color-scheme) + ) { + this._currentTheme = HdsThemeValues.System; + this._currentMode = undefined; + } else { + this._currentTheme = theme; + if (this._currentTheme === HdsThemeValues.Light) { + this._currentMode = this._currentLightTheme; + } + if (this._currentTheme === HdsThemeValues.Dark) { + this._currentMode = this._currentDarkTheme; + } + } + + // IMPORTANT: for this to work, it needs to be the `` tag (it's the `:root` in CSS) + const rootElement = document.querySelector('html'); + + if (!rootElement) { + return; + } + // remove or update the CSS selectors applied to the root element (depending on the `theme`/`mode` arguments) + const hdsThemingClassesToRemove = Array.from(rootElement.classList).filter( + (className) => className.match(/^hds-(theme|mode)/) + ); + rootElement.classList.remove(...hdsThemingClassesToRemove); + if (this._currentTheme !== undefined) { + rootElement.classList.add(`hds-theme-${this._currentTheme}`); + } + if (this._currentMode !== undefined) { + rootElement.classList.add(`hds-mode-${this._currentMode}`); + } + + if (onSetTheme) { + onSetTheme({ + currentTheme: this._currentTheme, + currentMode: this._currentMode, + }); + } + } + + // getters used for reactivity in the components/services using this service + + get currentTheme(): HdsThemes | undefined { + return this._currentTheme; + } + + get isCarbonThemeEnabled(): boolean { + return [ + HdsThemeValues.System, + HdsThemeValues.Light, + HdsThemeValues.Dark, + ].includes(this._currentTheme as HdsThemeValues); + } + + get currentMode(): HdsModes | undefined { + return this._currentMode; + } + + get currentLightTheme(): HdsModesLight { + return this._currentLightTheme; + } + + get currentDarkTheme(): HdsModesDark { + return this._currentDarkTheme; + } +} diff --git a/packages/components/src/styles/@hashicorp/design-system-plex-fonts.scss b/packages/components/src/styles/@hashicorp/design-system-plex-fonts.scss new file mode 100644 index 00000000000..3a73beab441 --- /dev/null +++ b/packages/components/src/styles/@hashicorp/design-system-plex-fonts.scss @@ -0,0 +1,58 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +// +// IBM PLEX FONTS +// + +// We use only a few selected weights, per design specs +/* stylelint-disable value-keyword-case */ +$selected-weights: ( + // ❌ 100 + thin: false, + thinItalic: false, + // ❌ 200 + extralight: false, + extralightItalic: false, + // ❌ 300 + light: false, + lightItalic: false, + // ✅ 400 + regular: true, + italic: true, + // ❌ 500 + medium: false, + mediumItalic: false, + // ❌ 450 + text: false, + textItalic: false, + // ✅ 600 + semibold: true, + semiboldItalic: true, + // ❌ 700 + bold: false, + boldItalic: false +); +/* stylelint-enable value-keyword-case */ + +// Plex Sans (imported from `node_modules/@ibm/plex-sans`) +// +@use "plex-sans/scss/index.scss" as PlexSans with ( + $font-prefix: "/assets", + $font-weights: $selected-weights +); + +// Plex Mono (imported from `node_modules/@ibm/plex-mono`) +// +@use "plex-mono/scss/index.scss" as PlexMono with ( + $font-prefix: "/assets", + $font-weights: $selected-weights +); + +// Add the `@font-face` definitions +// see: https://github.com/IBM/plex/tree/master/packages/plex-sans#font-weights +// +@include PlexSans.all(); +@include PlexMono.all(); diff --git a/packages/components/src/styles/components/alert.scss b/packages/components/src/styles/components/alert.scss index 13ba94cdbba..badd1119cb8 100644 --- a/packages/components/src/styles/components/alert.scss +++ b/packages/components/src/styles/components/alert.scss @@ -98,11 +98,11 @@ // DISMISS .hds-alert__dismiss { - margin-top: 2px; // for alignment with the main icon and text - margin-left: 16px; + // for visual alignment with the main icon and text + margin: -2px -4px -4px 12px; .hds-alert--type-compact & { - margin-top: 1px; + margin-top: -3px; } } @@ -110,6 +110,8 @@ .hds-alert--type-page { padding: 16px 48px; // by design + border-bottom-width: 1px; + border-bottom-style: solid; } .hds-alert--type-inline { @@ -140,7 +142,7 @@ .hds-alert--color-neutral { &.hds-alert--type-page { background-color: var(--token-color-surface-faint); - box-shadow: 0 1px 0 0 var(--token-color-palette-alpha-300); + border-bottom-color: var(--token-color-palette-alpha-300); } &.hds-alert--type-inline { @@ -162,7 +164,7 @@ .hds-alert--color-highlight { &.hds-alert--type-page { background-color: var(--token-color-surface-highlight); - box-shadow: 0 1px 0 0 var(--token-color-border-highlight); + border-bottom-color: var(--token-color-border-highlight); } &.hds-alert--type-inline { @@ -179,7 +181,7 @@ .hds-alert--color-success { &.hds-alert--type-page { background-color: var(--token-color-surface-success); - box-shadow: 0 1px 0 0 var(--token-color-border-success); + border-bottom-color: var(--token-color-border-success); } &.hds-alert--type-inline { @@ -196,7 +198,7 @@ .hds-alert--color-warning { &.hds-alert--type-page { background-color: var(--token-color-surface-warning); - box-shadow: 0 1px 0 0 var(--token-color-border-warning); + border-bottom-color: var(--token-color-border-warning); } &.hds-alert--type-inline { @@ -213,7 +215,7 @@ .hds-alert--color-critical { &.hds-alert--type-page { background-color: var(--token-color-surface-critical); - box-shadow: 0 1px 0 0 var(--token-color-border-critical); + border-bottom-color: var(--token-color-border-critical); } &.hds-alert--type-inline { diff --git a/packages/components/src/styles/components/app-footer.scss b/packages/components/src/styles/components/app-footer.scss index b4ce7f27167..cc6298a40bb 100644 --- a/packages/components/src/styles/components/app-footer.scss +++ b/packages/components/src/styles/components/app-footer.scss @@ -123,6 +123,8 @@ $hds-app-footer-icon-text-gap: 6px; // THEMING +// Note: Custom property values for each theme are defined here vs. in a JSON file as tokens so do not follow --token naming + // Light .hds-app-footer--theme-light { --app-footer-foreground-color: var(--token-color-foreground-primary); @@ -130,13 +132,13 @@ $hds-app-footer-icon-text-gap: 6px; // Overriding default Secondary Link colors --app-footer-link-default-color: var(--token-color-foreground-faint); - --app-footer-link-hover-color: var(--token-color-palette-neutral-600); - --app-footer-link-active-color: var(--token-color-palette-neutral-700); + --app-footer-link-hover-color: var(--token-color-foreground-primary); + --app-footer-link-active-color: var(--token-color-foreground-strong); --app-footer-link-focus-color: var(--token-color-foreground-faint); - --app-footer-link-focus-outline-color: var(--token-color-focus-action-internal); + --app-footer-link-focus-outline-color: var(--token-app-footer-focus-color-action-internal); // Copyright - --app-footer-copyright-text-color: var(--token-color-foreground-primary); + --app-footer-copyright-text-color: var(--token-color-foreground-faint); --app-footer-copyright-icon-color: var(--token-color-hashicorp-brand); // StatusLink icon colors diff --git a/packages/components/src/styles/components/badge-count.scss b/packages/components/src/styles/components/badge-count.scss index 179cef2b786..93699524120 100644 --- a/packages/components/src/styles/components/badge-count.scss +++ b/packages/components/src/styles/components/badge-count.scss @@ -7,12 +7,9 @@ // BADGE-COUNT COMPONENT // -@use "sass:math"; -@use "sass:map"; - -$hds-badge-count-types: ("flat", "inverted", "outlined"); $hds-badge-count-sizes: ("small", "medium", "large"); -$hds-badge-count-border-width: 1px; +$hds-badge-count-colors: ("neutral", "neutral-dark-mode"); +$hds-badge-count-types: ("filled", "inverted", "outlined"); .hds-badge-count { display: inline-flex; @@ -20,87 +17,41 @@ $hds-badge-count-border-width: 1px; max-width: 100%; font-weight: var(--token-typography-font-weight-medium); font-family: var(--token-typography-font-stack-text); - border: $hds-badge-count-border-width solid transparent; + border-style: solid; + border-width: 1px; } // SIZE -// these values later may come from the design tokens -$hds-badge-count-size-props: ( - "small": ( - // 13px = 0.8125rem - "font-size": 0.8125rem, - "height": 1.25rem, - // 16px = 1.2308 - "line-height": 1.2308, - "padding-vertical": 0.125rem, - "padding-horizontal": 0.5rem, - ), - "medium": ( - // 13px = 0.8125rem - "font-size": 0.8125rem, - "height": 1.5rem, - // 16px = 1.2308 - "line-height": 1.2308, - "padding-vertical": 0.25rem, - "padding-horizontal": 0.75rem, - ), - "large": ( - // 16px = 1rem - "font-size": 1rem, - "height": 2rem, - // 24px = 1.5 - "line-height": 1.5, - "padding-vertical": 0.25rem, - "padding-horizontal": 0.875rem, - ), -); - @each $size in $hds-badge-count-sizes { .hds-badge-count--size-#{$size} { - min-height: map.get($hds-badge-count-size-props, $size, "height"); - padding: calc(#{map.get($hds-badge-count-size-props, $size, "padding-vertical")} - #{$hds-badge-count-border-width}) - calc(#{map.get($hds-badge-count-size-props, $size, "padding-horizontal")} - #{$hds-badge-count-border-width}); - font-size: map.get($hds-badge-count-size-props, $size, "font-size"); - line-height: map.get($hds-badge-count-size-props, $size, "line-height"); - border-radius: math.div(map.get($hds-badge-count-size-props, $size, "height"), 2); + min-height: var(--token-badge-height-#{$size}); + // we need to account for the `1px` border when calculating the actual padding + padding: calc(var(--token-badge-padding-vertical-#{$size}) - 1px) + // note: for the horizontal padding, we're using a specific design token for the `BadgeCount` component + calc(var(--token-badge-count-padding-horizontal-#{$size}) - 1px); + font-size: var(--token-badge-typography-font-size-#{$size}); + line-height: var(--token-badge-typography-line-height-#{$size}); + border-radius: calc(var(--token-badge-height-#{$size}) / 2); } } // COLOR + TYPE COMBINATIONS -.hds-badge-count--color-neutral { - &.hds-badge-count--type-filled { - color: var(--token-color-foreground-primary); - background-color: var(--token-color-palette-neutral-200); - } - - &.hds-badge-count--type-inverted { - color: var(--token-color-foreground-high-contrast); - background-color: var(--token-color-palette-neutral-500); - } - - &.hds-badge-count--type-outlined { - color: var(--token-color-foreground-primary); - background-color: transparent; - border-color: var(--token-color-palette-neutral-500); - } -} - -.hds-badge-count--color-neutral-dark-mode { - &.hds-badge-count--type-filled { - color: var(--token-color-foreground-high-contrast); - background-color: var(--token-color-palette-neutral-500); - } - - &.hds-badge-count--type-inverted { - color: var(--token-color-foreground-primary); - background-color: var(--token-color-surface-faint); - } - - &.hds-badge-count--type-outlined { - color: var(--token-color-foreground-high-contrast); - background-color: transparent; - border-color: var(--token-color-palette-neutral-50); +@each $color in $hds-badge-count-colors { + .hds-badge-count--color-#{$color} { + @each $type in $hds-badge-count-types { + &.hds-badge-count--type-#{$type} { + color: var(--token-badge-foreground-color-#{$color}-#{$type}); + + @if $type == "outlined" { + background-color: transparent; + border-color: var(--token-badge-foreground-color-#{$color}-#{$type}); + } @else { + background-color: var(--token-badge-surface-color-#{$color}-#{$type}); + border-color: transparent; + } + } + } } } diff --git a/packages/components/src/styles/components/badge.scss b/packages/components/src/styles/components/badge.scss index 0b0f1c64eff..c4392937227 100644 --- a/packages/components/src/styles/components/badge.scss +++ b/packages/components/src/styles/components/badge.scss @@ -7,48 +7,18 @@ // BADGE COMPONENT // -@use "sass:map"; - -$hds-badge-types: ("flat", "inverted", "outlined"); -$hds-badge-colors-accents: ("highlight", "success", "warning", "critical"); $hds-badge-sizes: ("small", "medium", "large"); -$hds-badge-border-width: 1px; -$hds-badge-colors-props: ( - "highlight": ( - "inverted-background-color": var(--token-color-palette-purple-200), - "outlined-border-color": var(--token-color-palette-purple-200), - ), - "success": ( - "inverted-background-color": var(--token-color-palette-green-200), - "outlined-border-color": var(--token-color-palette-green-200), - ), - "warning": ( - "inverted-background-color": var(--token-color-palette-amber-200), - "outlined-border-color": var(--token-color-palette-amber-200), - ), - "critical": ( - "inverted-background-color": var(--token-color-palette-red-200), - "outlined-border-color": var(--token-color-palette-red-200), - ), -); +$hds-badge-colors: ("neutral", "neutral-dark-mode", "highlight", "success", "warning", "critical"); +$hds-badge-types: ("filled", "inverted", "outlined"); .hds-badge { - // Redefine color values to increase contrast - --token-color-surface-success: var(--token-color-palette-green-100); - --token-color-foreground-success-on-surface: var(--token-color-palette-green-400); - --token-color-surface-warning: var(--token-color-palette-amber-100); - --token-color-foreground-warning-on-surface: var(--token-color-palette-amber-400); - --token-color-surface-critical: var(--token-color-palette-red-100); - --token-color-foreground-critical-on-surface: var(--token-color-palette-red-400); - --token-color-surface-highlight: var(--token-color-palette-purple-100); - --token-color-foreground-highlight-on-surface: var(--token-color-palette-purple-400); - display: inline-flex; align-items: center; max-width: 100%; vertical-align: middle; - border: $hds-badge-border-width solid transparent; - border-radius: var(--token-border-radius-small); + border-style: solid; + border-width: 1px; + border-radius: var(--token-badge-border-radius); } .hds-badge__icon { @@ -64,116 +34,47 @@ $hds-badge-colors-props: ( // SIZE -// these values later may come from the design tokens -$hds-badge-size-props: ( - "small": ( - // 13px = 0.8125rem - "font-size": 0.8125rem, - "gap": 0.25rem, - "height": 1.25rem, - "icon-size": 0.75rem, - // 16px = 1.2308 - "line-height": 1.2308, - "padding-vertical": 0.125rem, - "padding-horizontal": 0.375rem, - ), - "medium": ( - // 13px = 0.8125rem - "font-size": 0.8125rem, - "gap": 0.25rem, - "height": 1.5rem, - "icon-size": 1rem, - // 16px = 1.2308 - "line-height": 1.2308, - "padding-vertical": 0.25rem, - "padding-horizontal": 0.5rem, - ), - "large": ( - // 16px = 1rem - "font-size": 1rem, - "gap": 0.375rem, - "height": 2rem, - "icon-size": 1rem, - // 24px = 1.5 - "line-height": 1.5, - "padding-vertical": 0.25rem, - "padding-horizontal": 0.5rem, - ), -); - @each $size in $hds-badge-sizes { .hds-badge--size-#{$size} { - gap: map.get($hds-badge-size-props, $size, "gap"); - min-height: map.get($hds-badge-size-props, $size, "height"); - padding: calc(#{map.get($hds-badge-size-props, $size, "padding-vertical")} - #{$hds-badge-border-width}) - calc(#{map.get($hds-badge-size-props, $size, "padding-horizontal")} - #{$hds-badge-border-width}); + gap: var(--token-badge-gap-#{$size}); + min-height: var(--token-badge-height-#{$size}); + // we need to account for the `1px` border when calculating the actual padding + padding: calc(var(--token-badge-padding-vertical-#{$size}) - 1px) + calc(var(--token-badge-padding-horizontal-#{$size}) - 1px); .hds-badge__icon { - width: map.get($hds-badge-size-props, $size, "icon-size"); - height: map.get($hds-badge-size-props, $size, "icon-size"); + width: var(--token-badge-icon-size-#{$size}); + height: var(--token-badge-icon-size-#{$size}); } .hds-badge__text { - font-size: map.get($hds-badge-size-props, $size, "font-size"); - line-height: map.get($hds-badge-size-props, $size, "line-height"); + font-size: var(--token-badge-typography-font-size-#{$size}); + line-height: var(--token-badge-typography-line-height-#{$size}); } } } // COLOR + TYPE COMBINATIONS -.hds-badge--color-neutral { - &.hds-badge--type-filled { - color: var(--token-color-foreground-primary); - background-color: var(--token-color-palette-neutral-200); - } - - &.hds-badge--type-inverted { - color: var(--token-color-foreground-high-contrast); - background-color: var(--token-color-palette-neutral-500); - } - - &.hds-badge--type-outlined { - color: var(--token-color-foreground-primary); - background-color: transparent; - border-color: var(--token-color-palette-neutral-500); - } -} - -.hds-badge--color-neutral-dark-mode { - &.hds-badge--type-filled { - color: var(--token-color-foreground-high-contrast); - background-color: var(--token-color-palette-neutral-500); - } - - &.hds-badge--type-inverted { - color: var(--token-color-foreground-primary); - background-color: var(--token-color-surface-faint); - } - - &.hds-badge--type-outlined { - color: var(--token-color-foreground-high-contrast); - background-color: transparent; - border-color: var(--token-color-palette-neutral-50); - } -} - -@each $color in $hds-badge-colors-accents { +@each $color in $hds-badge-colors { .hds-badge--color-#{$color} { - &.hds-badge--type-filled { - color: var(--token-color-foreground-#{$color}-on-surface); - background-color: var(--token-color-surface-#{$color}); - } - - &.hds-badge--type-inverted { - color: var(--token-color-foreground-high-contrast); - background-color: map.get($hds-badge-colors-props, $color, "inverted-background-color"); - } - - &.hds-badge--type-outlined { - color: var(--token-color-foreground-#{$color}); - background-color: transparent; - border-color: map.get($hds-badge-colors-props, $color, "outlined-border-color"); + @each $type in $hds-badge-types { + &.hds-badge--type-#{$type} { + color: var(--token-badge-foreground-color-#{$color}-#{$type}); + + @if $type == "outlined" { + // only the `neutral` and `neutral-dark-mode` have explicit backgrounds + @if ($color == "neutral" or $color == "neutral-dark-mode") { + background-color: var(--token-badge-surface-color-#{$color}-#{$type}); + } @else { + background-color: transparent; + } + border-color: var(--token-badge-foreground-color-#{$color}-#{$type}); + } @else { + background-color: var(--token-badge-surface-color-#{$color}-#{$type}); + border-color: transparent; + } + } } } } diff --git a/packages/components/src/styles/components/button.scss b/packages/components/src/styles/components/button.scss index 6f20316c993..5f6002d1b48 100644 --- a/packages/components/src/styles/components/button.scss +++ b/packages/components/src/styles/components/button.scss @@ -10,6 +10,7 @@ // @use "../mixins/button" as *; +@use "../mixins/carbonization" as *; .hds-button { @include hds-button(); @@ -51,6 +52,10 @@ width: 100%; max-width: 100%; + @include hds-apply-only-if-carbon() { + justify-content: space-between; + } + .hds-button__text { flex: 0 0 auto; } diff --git a/packages/components/src/styles/components/dialog-primitive.scss b/packages/components/src/styles/components/dialog-primitive.scss index 0b61a4f8ae2..6bbd28ac72c 100644 --- a/packages/components/src/styles/components/dialog-primitive.scss +++ b/packages/components/src/styles/components/dialog-primitive.scss @@ -97,6 +97,8 @@ $hds-dialog-primitive-vertical-padding: 16px; .hds-dialog-primitive__dismiss { align-self: flex-start; + // for visual alignment + margin: -4px; } // DESCRIPTION diff --git a/packages/components/src/styles/components/dismiss-button.scss b/packages/components/src/styles/components/dismiss-button.scss index 58bffa7ed38..10c254f284e 100644 --- a/packages/components/src/styles/components/dismiss-button.scss +++ b/packages/components/src/styles/components/dismiss-button.scss @@ -10,31 +10,36 @@ @use "../mixins/focus-ring" as *; .hds-dismiss-button { + display: inline-flex; flex: none; + align-items: center; + justify-content: center; + width: var(--token-dismiss-button-size); + height: var(--token-dismiss-button-size); padding: 0; - color: var(--token-color-foreground-faint); + color: var(--token-dismiss-button-foreground-color-default); background-color: transparent; - border: none; + border: 1px solid transparent; + border-radius: var(--token-border-radius-medium); cursor: pointer; + .hds-icon { + width: var(--token-dismiss-button-icon-size); + height: var(--token-dismiss-button-icon-size); + } + &:hover, &.mock-hover { - // we re-use the pseudo-element created by the "focus-ring" mixin - &::before { - background-color: rgba(#dedfe3, 0.4); - } + background-color: var(--token-dismiss-button-surface-color-hover); } - // notice: this is used not only for the focus, but also to increase the clickable area - @include hds-focus-ring-with-pseudo-element($top: -4px, $right: -4px, $bottom: -4px, $left: -4px); + // we use `-1px` here so the dark blue line seems the border of the button + @include hds-focus-ring-with-pseudo-element($top: -1px, $right: -1px, $bottom: -1px, $left: -1px); &:active, &.mock-active { - color: var(--token-color-foreground-secondary); - - &::before { - background-color: rgba(#dedfe3, 0.4); - border: 1px solid var(--token-color-border-strong); - } + color: var(--token-dismiss-button-foreground-color-active); + background-color: var(--token-dismiss-button-surface-color-active); + border-color: var(--token-dismiss-button-border-color-active); } } diff --git a/packages/components/src/styles/components/dropdown.scss b/packages/components/src/styles/components/dropdown.scss index 6ab9767a51b..bb0c5ed9028 100644 --- a/packages/components/src/styles/components/dropdown.scss +++ b/packages/components/src/styles/components/dropdown.scss @@ -12,8 +12,6 @@ @use "../mixins/button" as *; @use "../mixins/focus-ring" as *; -$hds-dropdown-toggle-border-radius: $hds-button-border-radius; - // DROPDOWN .hds-dropdown--is-inline { @@ -39,7 +37,7 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius; color: var(--token-color-foreground-primary); background-color: var(--token-color-surface-faint); border: 1px solid var(--token-color-border-strong); - border-radius: $hds-dropdown-toggle-border-radius; + border-radius: var(--token-button-border-radius); outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656) outline-color: transparent; // We need this to be transparent for a11y isolation: isolate; // used to create a new stacking context (needed to have the pseudo element below text/icon but not the parent container) @@ -81,8 +79,8 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius; align-items: center; justify-content: center; border-radius: calc( - #{$hds-dropdown-toggle-border-radius} - 2px - ); // $hds-dropdown-toggle-border-radius - (1px padding + 1px border) (= 3px) + var(--token-button-border-radius) - 2px + ); // var(--token-button-border-radius) - (1px padding + 1px border) (= 3px) img { width: 100%; diff --git a/packages/components/src/styles/components/flyout.scss b/packages/components/src/styles/components/flyout.scss index e6557502e85..f548656b12d 100644 --- a/packages/components/src/styles/components/flyout.scss +++ b/packages/components/src/styles/components/flyout.scss @@ -26,9 +26,7 @@ $hds-flyout-max-width: calc(100vw - var(--hds-app-side-nav-width-minimized) / 2) max-height: 100vh; background: var(--token-color-surface-primary); border: none; - box-shadow: - 0 2px 3px 0 #3b3d4540, - 0 12px 24px 0 #3b3d4559; // TODO: convert to token + box-shadow: var(--token-elevation-overlay-box-shadow); // the `` element uses a special "open" attribute to determine its visibility status &:not([open]) { diff --git a/packages/components/src/styles/components/form/file-input.scss b/packages/components/src/styles/components/form/file-input.scss index 59231180a7b..f1854c51758 100644 --- a/packages/components/src/styles/components/form/file-input.scss +++ b/packages/components/src/styles/components/form/file-input.scss @@ -37,8 +37,8 @@ background-repeat: no-repeat; background-position: 15px 50%; background-size: var(--token-form-text-input-background-image-size); - border: $hds-button-border-width solid var(--token-color-border-strong); - border-radius: $hds-button-border-radius; + border: var(--token-button-border-width) solid var(--token-color-border-strong); + border-radius: var(--token-button-border-radius); box-shadow: var(--token-elevation-low-box-shadow); cursor: pointer; } diff --git a/packages/components/src/styles/components/form/key-value-inputs.scss b/packages/components/src/styles/components/form/key-value-inputs.scss index 5de3b4b56f8..43509f24d54 100644 --- a/packages/components/src/styles/components/form/key-value-inputs.scss +++ b/packages/components/src/styles/components/form/key-value-inputs.scss @@ -12,9 +12,6 @@ @use "../../mixins/button" as *; @use "../../mixins/screen-reader-only" as *; -// this is the width of the icon-only button -$hds-delete-button-width: map.get($hds-button-size-props, "medium", "min-height"); - // notice: this is a
element .hds-form-key-value-inputs { display: flex; @@ -43,7 +40,8 @@ $hds-delete-button-width: map.get($hds-button-size-props, "medium", "min-height" @include hds-breakpoint-above("md") { display: grid; flex-grow: 1; - grid-template-columns: var(--hds-key-value-inputs-columns, 1fr 1fr $hds-delete-button-width); + // `var(--token-button-height-medium)` is the width/height of the icon-only button + grid-template-columns: var(--hds-key-value-inputs-columns, 1fr 1fr var(--token-button-height-medium)); align-items: flex-end; column-gap: 8px; row-gap: 0; diff --git a/packages/components/src/styles/components/form/radio-card.scss b/packages/components/src/styles/components/form/radio-card.scss index 65307076275..90740419afe 100644 --- a/packages/components/src/styles/components/form/radio-card.scss +++ b/packages/components/src/styles/components/form/radio-card.scss @@ -58,7 +58,7 @@ &:focus-within, &.mock-focus { border-color: var(--token-color-focus-action-internal); - box-shadow: 0 0 0 3px var(--token-color-focus-action-external); + outline: 3px solid var(--token-color-focus-action-external); } &.hds-form-radio-card--checked { diff --git a/packages/components/src/styles/components/icon-tile.scss b/packages/components/src/styles/components/icon-tile.scss index f690063d0f6..07c128e4b2d 100644 --- a/packages/components/src/styles/components/icon-tile.scss +++ b/packages/components/src/styles/components/icon-tile.scss @@ -39,14 +39,15 @@ $hds-icon-tile-border-width: 1px; margin: auto; } +// secondary overlay icon .hds-icon-tile__extra { position: absolute; right: -6px; bottom: -6px; display: flex; box-sizing: content-box; // the border is outside - background-color: var(--token-color-surface-primary); - border: 1px solid var(--token-color-border-primary); + background-color: var(--token-icon-tile-surface-color-overlay); + border: 1px solid var(--token-icon-tile-border-color-overlay); } .hds-icon-tile__extra-icon { @@ -62,41 +63,41 @@ $hds-icon-tile-size-props: ( "small": ( // 28px = 1.75rem "size": 1.75rem, - "border-radius": 5px, + "border-radius": var(--token-border-radius-small), // 16px = 1rem "icon-size": 1rem, // 18px = 1.125rem "logo-size": 1.125rem, // 18px = 1.125rem "extra-size": 1.125rem, - "extra-border-radius": 4px, + "extra-border-radius": var(--token-border-radius-small), "extra-icon-size": 0.75rem, ), "medium": ( // 40px = 2.5rem "size": 2.5rem, - "border-radius": 6px, + "border-radius": var(--token-border-radius-medium), // 24px = 1.5rem "icon-size": 1.5rem, // 28px = 1.75rem "logo-size": 1.75rem, // 20px = 1.25rem "extra-size": 1.25rem, - "extra-border-radius": 5px, + "extra-border-radius": var(--token-border-radius-small), // 12px = .75rem "extra-icon-size": 0.75rem, ), "large": ( // 48px = 3rem "size": 3rem, - "border-radius": 6px, + "border-radius": var(--token-border-radius-medium), // 24px = 1.5rem "icon-size": 1.5rem, // 32px = 2rem "logo-size": 2rem, // 24px = 1.5rem "extra-size": 1.5rem, - "extra-border-radius": 5px, + "extra-border-radius": var(--token-border-radius-small), "extra-icon-size": 1rem, ), ); @@ -133,9 +134,15 @@ $hds-icon-tile-size-props: ( // LOGO - COLOR .hds-icon-tile--logo { - // notice: we are using colored icons so we don't need to set the "color" property here background-color: var(--token-color-surface-primary); - border-color: var(--token-color-border-primary); + border-color: var(--token-icon-tile-border-color-logo); + + // We use the non-colored logos and apply the brand color via CSS + @each $product in $hds-icon-tile-colors-products { + &.hds-icon-tile--color-#{$product} { + color: var(--token-color-#{$product}-brand); + } + } } // ICON - COLOR @@ -150,7 +157,7 @@ $hds-icon-tile-size-props: ( @if ($product == "hcp") { // exception for HCP (we use neutral colors, we don't have specific product colors for foreground/background) &.hds-icon-tile--color-hcp { - color: var(--token-color-palette-#{$product}-brand); + color: var(--token-color-#{$product}-brand); background-color: var(--token-color-surface-strong); } } @else { diff --git a/packages/components/src/styles/components/index.scss b/packages/components/src/styles/components/index.scss index bb043678048..8e00b46520e 100644 --- a/packages/components/src/styles/components/index.scss +++ b/packages/components/src/styles/components/index.scss @@ -45,6 +45,7 @@ @use "./tabs"; @use "./tag"; @use "./text"; +@use "./theme-context"; @use "./time"; @use "./toast"; @use "./tooltip"; diff --git a/packages/components/src/styles/components/rich-tooltip.scss b/packages/components/src/styles/components/rich-tooltip.scss index 492e406600a..a9f7a93f615 100644 --- a/packages/components/src/styles/components/rich-tooltip.scss +++ b/packages/components/src/styles/components/rich-tooltip.scss @@ -8,6 +8,7 @@ // @use "../mixins/focus-ring" as *; +@use "../mixins/carbonization" as *; .hds-rich-tooltip { display: contents; @@ -38,19 +39,19 @@ // we don't want to apply styles to the yielded content // so we use these variables that allow us to target only // the (decorated) text and the icon - --text-color: var(--token-color-foreground-strong); - --icon-color: var(--token-color-foreground-strong); + --text-color: var(--token-rich-tooltip-toggle-foreground-color-default); + --icon-color: var(--token-rich-tooltip-toggle-foreground-color-default); &:hover, &.mock-hover { - --text-color: var(--token-color-foreground-primary); - --icon-color: var(--token-color-foreground-primary); + --text-color: var(--token-rich-tooltip-toggle-foreground-color-hover); + --icon-color: var(--token-rich-tooltip-toggle-foreground-color-hover); } &:active, &.mock-active { - --text-color: var(--token-color-foreground-faint); - --icon-color: var(--token-color-foreground-faint); + --text-color: var(--token-rich-tooltip-toggle-foreground-color-active); + --icon-color: var(--token-rich-tooltip-toggle-foreground-color-active); } @include hds-focus-ring-with-pseudo-element($top: -2px, $right: -2px, $bottom: -2px, $left: -2px); @@ -64,22 +65,26 @@ text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; + + @include hds-apply-only-if-carbon() { + text-decoration: none; + } } // icon .hds-rich-tooltip__toggle-icon { flex: none; - width: 1em; - height: 1em; + width: var(--token-rich-tooltip-toggle-icon-size); + height: var(--token-rich-tooltip-toggle-icon-size); color: var(--icon-color); &:first-child:not(:only-child) { - margin-right: 0.25rem; + margin-right: var(--token-rich-tooltip-toggle-gap-horizontal); } &:last-child:not(:only-child) { - margin-left: 0.25rem; + margin-left: var(--token-rich-tooltip-toggle-gap-horizontal); } } @@ -131,12 +136,12 @@ .hds-rich-tooltip__bubble { position: relative; width: fit-content; - max-width: var(--token-tooltip-max-width); + max-width: var(--token-rich-tooltip-bubble-max-width); height: fit-content; max-height: none; padding: 16px; - background: var(--token-color-surface-primary); - border-radius: var(--token-border-radius-small); + background-color: var(--token-color-surface-primary); + border-radius: var(--token-rich-tooltip-bubble-border-radius); box-shadow: var(--token-surface-higher-box-shadow); // fade-in animation (we can't do fade-out because `isOpen` removes the content of the bubble immediately from the DOM) @@ -145,6 +150,12 @@ transition: opacity 0.3s; will-change: opacity; + @include hds-apply-only-if-carbon() { + border: 1px solid var(--token-rich-tooltip-bubble-border-color); + box-shadow: none; + transition: none; + } + // the "popover" attributes comes with pre-defined styling so we need to override it :where(&[popover]) { width: fit-content; @@ -162,34 +173,53 @@ // arrow .hds-rich-tooltip__bubble-arrow { - // notice: floating-ui assumes the "arrow" container is square - $arrow-size: 20px; position: absolute; z-index: 1; display: block; - width: $arrow-size; - height: $arrow-size; + width: var(--token-rich-tooltip-bubble-arrow-size); + height: var(--token-rich-tooltip-bubble-arrow-size); background: url('data:image/svg+xml,') - no-repeat 0 0 / #{$arrow-size} #{$arrow-size}; + no-repeat 0 0 / var(--token-rich-tooltip-bubble-arrow-size) var(--token-rich-tooltip-bubble-arrow-size); pointer-events: none; + @include hds-apply-only-if-carbon() { + background-image: none; + + &::before { + position: absolute; + inset: 0; + background-color: var(--token-rich-tooltip-bubble-border-color); + content: ""; + clip-path: polygon(0 12px, 6px 6px, 12px 12px); + } + + &::after { + position: absolute; + inset: 0; + background-color: var(--token-color-surface-primary); + transform: translateY(1px); + content: ""; + clip-path: polygon(0 12px, 6px 6px, 12px 12px); + } + } + &[data-hds-anchored-arrow-placement^="top"] { - bottom: (-1 * $arrow-size); + bottom: calc(-1 * var(--token-rich-tooltip-bubble-arrow-size)); transform: rotate(180deg); } &[data-hds-anchored-arrow-placement^="right"] { - left: (-1 * $arrow-size); + left: calc(-1 * var(--token-rich-tooltip-bubble-arrow-size)); transform: rotate(-90deg); } &[data-hds-anchored-arrow-placement^="bottom"] { - top: (-1 * $arrow-size); + top: calc(-1 * var(--token-rich-tooltip-bubble-arrow-size)); transform: rotate(0deg); // this fixes a rendering issue in Safari } &[data-hds-anchored-arrow-placement^="left"] { - right: (-1 * $arrow-size); + right: calc(-1 * var(--token-rich-tooltip-bubble-arrow-size)); transform: rotate(90deg); } } diff --git a/packages/components/src/styles/components/theme-context.scss b/packages/components/src/styles/components/theme-context.scss new file mode 100644 index 00000000000..d2bc5b3d5d0 --- /dev/null +++ b/packages/components/src/styles/components/theme-context.scss @@ -0,0 +1,12 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +// +// THEME CONTEXT +// + +.hds-theme-context { + display: contents; +} diff --git a/packages/components/src/styles/components/tooltip.scss b/packages/components/src/styles/components/tooltip.scss index e8fa88442cb..f0bb9ce9d2c 100644 --- a/packages/components/src/styles/components/tooltip.scss +++ b/packages/components/src/styles/components/tooltip.scss @@ -8,6 +8,7 @@ // @use "../mixins/focus-ring" as *; +@use "../mixins/carbonization" as *; .hds-tooltip-button { @include hds-focus-ring-with-pseudo-element( @@ -50,17 +51,21 @@ .tippy-box[data-theme~="hds"] { padding: var(--token-tooltip-padding-vertical) var(--token-tooltip-padding-horizontal); - color: var(--token-tooltip-color-foreground-primary); + color: var(--token-color-foreground-high-contrast); font-weight: var(--token-typography-font-weight-regular); font-size: var(--token-typography-body-200-font-size); font-family: var(--token-typography-body-200-font-family); line-height: var(--token-typography-body-200-line-height); overflow-wrap: break-word; - background-color: var(--token-tooltip-color-surface-primary); + background-color: var(--token-color-surface-high-contrast); border-radius: var(--token-tooltip-border-radius); box-shadow: var(--token-elevation-higher-box-shadow); transition-property: transform, visibility, opacity; + @include hds-apply-only-if-carbon() { + transition: none; + } + &[data-animation="fade"][data-state="hidden"] { opacity: 0; } @@ -83,56 +88,81 @@ } // works with Tippy's custom SVG arrow variation: - .tippy-svg-arrow { - width: 16px; - height: 16px; + .tippy-arrow { + position: relative; + width: var(--token-tooltip-caret-width); + height: var(--token-tooltip-caret-height); text-align: initial; - fill: var(--token-tooltip-color-surface-primary); - &, - & > svg { + &::before { position: absolute; + width: var(--token-tooltip-caret-width); + height: var(--token-tooltip-caret-height); + background-color: var(--token-color-surface-high-contrast); + content: ""; + clip-path: var(--token-tooltip-caret-clip-path); } } // Arrow positioning styles taken from tippy.js (tippy.js/dist/svg-arrow.css) - &[data-placement^="top"] > .tippy-svg-arrow { + &[data-placement^="left"] > .tippy-arrow, + &[data-placement^="right"] > .tippy-arrow { + width: var(--token-tooltip-caret-height); + height: var(--token-tooltip-caret-width); + } + + &[data-placement^="left"] > .tippy-arrow::before, + &[data-placement^="right"] > .tippy-arrow::before { + transform-origin: calc(var(--token-tooltip-caret-width) / 2) calc(var(--token-tooltip-caret-width) / 2); + } + + &[data-placement="left-start"] > .tippy-arrow::before, + &[data-placement="right-start"] > .tippy-arrow::before { + top: calc(var(--token-tooltip-caret-height) / 2); + } + + &[data-placement="left-end"] > .tippy-arrow::before, + &[data-placement="right-end"] > .tippy-arrow::before { + top: calc(-1 * var(--token-tooltip-caret-height) / 2); + } + + &[data-placement^="top"] > .tippy-arrow::before, + &[data-placement^="bottom"] > .tippy-arrow::before { + transform-origin: unset; + } + + &[data-placement^="top"] > .tippy-arrow { bottom: 0; } - &[data-placement^="top"] > .tippy-svg-arrow::after, - &[data-placement^="top"] > .tippy-svg-arrow > svg { - top: 16px; + &[data-placement^="top"] > .tippy-arrow::before { + bottom: calc(-1 * var(--token-tooltip-caret-height)); transform: rotate(180deg); } - &[data-placement^="bottom"] > .tippy-svg-arrow { + &[data-placement^="bottom"] > .tippy-arrow { top: 0; } - &[data-placement^="bottom"] > .tippy-svg-arrow > svg { - bottom: 16px; + &[data-placement^="bottom"] > .tippy-arrow::before { + top: calc(-1 * var(--token-tooltip-caret-height)); } - &[data-placement^="left"] > .tippy-svg-arrow { + &[data-placement^="left"] > .tippy-arrow { right: 0; } - &[data-placement^="left"] > .tippy-svg-arrow::after, - &[data-placement^="left"] > .tippy-svg-arrow > svg { - top: calc(50% - 3px); - left: 11px; + &[data-placement^="left"] > .tippy-arrow::before { + right: calc(-1 * var(--token-tooltip-caret-height)); transform: rotate(90deg); } - &[data-placement^="right"] > .tippy-svg-arrow { + &[data-placement^="right"] > .tippy-arrow { left: 0; } - &[data-placement^="right"] > .tippy-svg-arrow::after, - &[data-placement^="right"] > .tippy-svg-arrow > svg { - top: calc(50% - 3px); - right: 11px; + &[data-placement^="right"] > .tippy-arrow::before { + left: calc(-1 * var(--token-tooltip-caret-height)); transform: rotate(-90deg); } } diff --git a/packages/components/src/styles/mixins/_button.scss b/packages/components/src/styles/mixins/_button.scss index 7c6dcfbcc4e..5e9ceecdc4b 100644 --- a/packages/components/src/styles/mixins/_button.scss +++ b/packages/components/src/styles/mixins/_button.scss @@ -6,60 +6,11 @@ @use "sass:map"; $hds-button-sizes: ("small", "medium", "large"); -$hds-button-border-radius: var(--token-border-radius-small); -$hds-button-border-width: 1px; -$hds-button-focus-border-width: 3px; - -// these values later may come from the design tokens -$hds-button-size-props: ( - "small": ( - // 13px = 0.8125rem - "font-size": 0.8125rem, - // 14px = 0.875rem; we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) - "line-height": 0.875rem, - // 28px = 1.75rem - "min-height": 1.75rem, - // 6px = 0.375rem; here we're taking into account the 1px border - "padding-vertical": 0.375rem, - // 11px = 0.6875rem; here we're taking into account the 1px border - "padding-horizontal": 0.6875rem, - // 12px = 0.75rem - "icon-size": 0.75rem, - ), - "medium": ( - // 14px = 0.875rem - "font-size": 0.875rem, - // 16px = 1rem - "line-height": 1rem, - // 36px = 2.25rem - "min-height": 2.25rem, - // 9px = 0.5625rem; here we're taking into account the 1px border - "padding-vertical": 0.5625rem, - // 15px = 0.9375rem; here we're taking into account the 1px border - "padding-horizontal": 0.9375rem, - // 16px - "icon-size": 1rem, - ), - "large": ( - // 16px = 1rem - "font-size": 1rem, - // 24px = 1.5rem - "line-height": 1.5rem, - // 48px = 3rem - "min-height": 3rem, - // 11px = 0.6875rem; here we're taking into account the 1px border - "padding-vertical": 0.6875rem, - // 19px = 1.1875rem; here we're taking into account the 1px border - "padding-horizontal": 1.1875rem, - // 24px = 1.5rem - "icon-size": 1.5rem, - ), -); @mixin hds-button() { position: relative; display: flex; - gap: 0.375rem; + gap: var(--token-button-gap); align-items: center; justify-content: center; width: auto; @@ -71,17 +22,17 @@ $hds-button-size-props: ( font-weight: var(--token-typography-font-weight-regular); font-family: var(--token-typography-font-stack-text); text-decoration: none; - border: $hds-button-border-width solid transparent; // We need this to be transparent for a11y - border-radius: $hds-button-border-radius; + border: var(--token-button-border-width) solid transparent; // We need this to be transparent for a11y + border-radius: var(--token-button-border-radius); outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656) outline-color: transparent; // We need this to be transparent for a11y isolation: isolate; } @mixin hds-button-state-disabled() { - color: var(--token-color-foreground-disabled); - background-color: var(--token-color-surface-faint); - border-color: var(--token-color-border-primary); + color: var(--token-button-foreground-color-disabled); + background-color: var(--token-button-surface-color-disabled); + border-color: var(--token-button-border-color-disabled); box-shadow: none; cursor: not-allowed; } @@ -92,58 +43,60 @@ $hds-button-size-props: ( &::before { // the position absolute of an element is computed from the inside of the border of the container // so we have to take in account the border width of the pseudo-element container itself - $shift: $hds-button-border-width + $hds-button-focus-border-width; + $shift: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + $radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width)); position: absolute; - top: -$shift; - right: -$shift; - bottom: -$shift; - left: -$shift; + top: $shift; + right: $shift; + bottom: $shift; + left: $shift; z-index: -1; - border: $hds-button-focus-border-width solid transparent; - border-radius: calc(#{$hds-button-border-radius} + #{$hds-button-focus-border-width}); + border: var(--token-button-focus-border-width) solid transparent; + border-radius: $radius; content: ""; } } @mixin hds-button-color-primary() { - color: var(--token-color-foreground-high-contrast); - background-color: var(--token-color-palette-blue-200); - border-color: var(--token-color-palette-blue-300); + color: var(--token-button-foreground-color-primary-default); + background-color: var(--token-button-surface-color-primary-default); + border-color: var(--token-button-border-color-primary-default); box-shadow: var(--token-elevation-low-box-shadow); &:hover, &.mock-hover { - color: var(--token-color-foreground-high-contrast); - background-color: var(--token-color-palette-blue-300); - border-color: var(--token-color-palette-blue-400); + color: var(--token-button-foreground-color-primary-hover); + background-color: var(--token-button-surface-color-primary-hover); + border-color: var(--token-button-border-color-primary-hover); cursor: pointer; } &:focus, &.mock-focus { - color: var(--token-color-foreground-high-contrast); - background-color: var(--token-color-palette-blue-200); - border-color: var(--token-color-focus-action-internal); + color: var(--token-button-foreground-color-primary-focus); + background-color: var(--token-button-surface-color-primary-focus); + border-color: var(--token-button-border-color-primary-focus-internal); &::before { // the position absolute of an element is computed from the inside of the border of the container // so we have to take in account the border width of the pseudo-element container itself // plus for the primary button we want to have a 2px gap between the button and the focus - $shift: $hds-button-border-width + $hds-button-focus-border-width + 2px; - top: -$shift; - right: -$shift; - bottom: -$shift; - left: -$shift; - border-color: var(--token-color-focus-action-external); - border-radius: calc(#{$hds-button-border-radius} + #{$hds-button-focus-border-width} + 2px); + $shift: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px)); + $radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width) + 2px); + top: $shift; + right: $shift; + bottom: $shift; + left: $shift; + border-color: var(--token-button-border-color-primary-focus-external); + border-radius: $radius; } } &:active, &.mock-active { - color: var(--token-color-foreground-high-contrast); - background-color: var(--token-color-palette-blue-400); - border-color: var(--token-color-palette-blue-400); + color: var(--token-button-foreground-color-primary-active); + background-color: var(--token-button-surface-color-primary-active); + border-color: var(--token-button-border-color-primary-active); box-shadow: none; &::before { @@ -153,35 +106,35 @@ $hds-button-size-props: ( } @mixin hds-button-color-secondary() { - color: var(--token-color-foreground-primary); - background-color: var(--token-color-surface-faint); - border-color: var(--token-color-border-strong); + color: var(--token-button-foreground-color-secondary-default); + background-color: var(--token-button-surface-color-secondary-default); + border-color: var(--token-button-border-color-secondary-default); box-shadow: var(--token-elevation-low-box-shadow); &:hover, &.mock-hover { - color: var(--token-color-foreground-primary); - background-color: var(--token-color-surface-primary); - border-color: var(--token-color-border-strong); + color: var(--token-button-foreground-color-secondary-hover); + background-color: var(--token-button-surface-color-secondary-hover); + border-color: var(--token-button-border-color-secondary-hover); cursor: pointer; } &:focus, &.mock-focus { - color: var(--token-color-foreground-primary); - background-color: var(--token-color-surface-faint); - border-color: var(--token-color-focus-action-internal); + color: var(--token-button-foreground-color-secondary-focus); + background-color: var(--token-button-surface-color-secondary-focus); + border-color: var(--token-button-border-color-secondary-focus-internal); &::before { - border-color: var(--token-color-focus-action-external); + border-color: var(--token-button-border-color-secondary-focus-external); } } &:active, &.mock-active { - color: var(--token-color-foreground-primary); - background-color: var(--token-color-surface-interactive-active); - border-color: var(--token-color-border-strong); + color: var(--token-button-foreground-color-secondary-active); + background-color: var(--token-button-surface-color-secondary-active); + border-color: var(--token-button-border-color-secondary-active); box-shadow: none; &::before { @@ -191,33 +144,34 @@ $hds-button-size-props: ( } @mixin hds-button-color-tertiary() { - color: var(--token-color-foreground-action); - background-color: transparent; - border-color: transparent; + color: var(--token-button-foreground-color-tertiary-default); + background-color: var(--token-button-surface-color-tertiary-default); + border-color: var(--token-button-border-color-tertiary-default); &:hover, &.mock-hover { - color: var(--token-color-foreground-action-hover); - background-color: var(--token-color-surface-primary); - border-color: var(--token-color-border-strong); + color: var(--token-button-foreground-color-tertiary-hover); + background-color: var(--token-button-surface-color-tertiary-hover); + border-color: var(--token-button-border-color-tertiary-hover); cursor: pointer; } &:focus, &.mock-focus { - color: var(--token-color-foreground-action); - border-color: var(--token-color-focus-action-internal); + color: var(--token-button-foreground-color-tertiary-focus); + background-color: var(--token-button-surface-color-tertiary-focus); + border-color: var(--token-button-border-color-tertiary-focus-internal); &::before { - border-color: var(--token-color-focus-action-external); + border-color: var(--token-button-border-color-tertiary-focus-external); } } &:active, &.mock-active { - color: var(--token-color-foreground-action-active); - background-color: var(--token-color-surface-interactive-active); - border-color: var(--token-color-border-strong); + color: var(--token-button-foreground-color-tertiary-active); + background-color: var(--token-button-surface-color-tertiary-active); + border-color: var(--token-button-border-color-tertiary-active); box-shadow: none; &::before { @@ -249,35 +203,35 @@ $hds-button-size-props: ( } @mixin hds-button-color-critical() { - color: var(--token-color-foreground-critical-on-surface); - background-color: var(--token-color-surface-critical); - border-color: var(--token-color-foreground-critical-on-surface); + color: var(--token-button-foreground-color-critical-default); + background-color: var(--token-button-surface-color-critical-default); + border-color: var(--token-button-border-color-critical-default); box-shadow: var(--token-elevation-low-box-shadow); &:hover, &.mock-hover { - color: var(--token-color-foreground-high-contrast); - background-color: var(--token-color-palette-red-300); - border-color: var(--token-color-palette-red-400); + color: var(--token-button-foreground-color-critical-hover); + background-color: var(--token-button-surface-color-critical-hover); + border-color: var(--token-button-border-color-critical-hover); cursor: pointer; } &:focus, &.mock-focus { - color: var(--token-color-foreground-critical-on-surface); - background-color: var(--token-color-surface-critical); - border-color: var(--token-color-focus-critical-internal); + color: var(--token-button-foreground-color-critical-focus); + background-color: var(--token-button-surface-color-critical-focus); + border-color: var(--token-button-border-color-critical-focus-internal); &::before { - border-color: var(--token-color-focus-critical-external); + border-color: var(--token-button-border-color-critical-focus-external); } } &:active, &.mock-active { - color: var(--token-color-foreground-high-contrast); - background-color: var(--token-color-palette-red-400); - border-color: var(--token-color-palette-red-400); + color: var(--token-button-foreground-color-critical-active); + background-color: var(--token-button-surface-color-critical-active); + border-color: var(--token-button-border-color-critical-active); box-shadow: none; &::before { @@ -289,25 +243,24 @@ $hds-button-size-props: ( @mixin hds-button-size-classes($blockName) { @each $size in $hds-button-sizes { .#{$blockName}--size-#{$size} { - min-height: map.get($hds-button-size-props, $size, "min-height"); - padding: map.get($hds-button-size-props, $size, "padding-vertical") - map.get($hds-button-size-props, $size, "padding-horizontal"); + min-height: var(--token-button-height-#{$size}); + padding: var(--token-button-padding-vertical-#{$size}) var(--token-button-padding-horizontal-#{$size}); .#{$blockName}__icon { - width: map.get($hds-button-size-props, $size, "icon-size"); - height: map.get($hds-button-size-props, $size, "icon-size"); + width: var(--token-button-icon-size-#{$size}); + height: var(--token-button-icon-size-#{$size}); } .#{$blockName}__text { - font-size: map.get($hds-button-size-props, $size, "font-size"); - line-height: map.get($hds-button-size-props, $size, "line-height"); + font-size: var(--token-button-typography-font-size-#{$size}); + line-height: var(--token-button-typography-line-height-#{$size}); } &.#{$blockName}--is-icon-only { // overrides to have the icon-only button squared - min-width: map.get($hds-button-size-props, $size, "min-height"); - padding-right: map.get($hds-button-size-props, $size, "padding-vertical"); - padding-left: map.get($hds-button-size-props, $size, "padding-vertical"); + min-width: var(--token-button-height-#{$size}); + padding-right: var(--token-button-padding-vertical-#{$size}); + padding-left: var(--token-button-padding-vertical-#{$size}); } } } diff --git a/packages/components/src/styles/mixins/_carbonization.scss b/packages/components/src/styles/mixins/_carbonization.scss new file mode 100644 index 00000000000..acca30a019d --- /dev/null +++ b/packages/components/src/styles/mixins/_carbonization.scss @@ -0,0 +1,33 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +@use "sass:selector"; + +@mixin hds-apply-only-if-carbon($mode: false) { + @if $mode == "cds-g0" { + @at-root #{selector.nest(".hds-mode-cds-g0", &)} { + @content; + } + } @else if $mode == "cds-g10" { + @at-root #{selector.nest(".hds-mode-cds-g10", &)} { + @content; + } + } @else if $mode == "cds-g90" { + @at-root #{selector.nest(".hds-mode-cds-g90", &)} { + @content; + } + } @else if $mode == "cds-g100" { + @at-root #{selector.nest(".hds-mode-cds-g100", &)} { + @content; + } + } @else { + @at-root #{selector.nest(".hds-mode-cds-g0", &)}, + #{selector.nest(".hds-mode-cds-g10", &)}, + #{selector.nest(".hds-mode-cds-g90", &)}, + #{selector.nest(".hds-mode-cds-g100", &)} { + @content; + } + } +} diff --git a/packages/components/src/styles/mixins/_focus-ring.scss b/packages/components/src/styles/mixins/_focus-ring.scss index 7507e501121..f938d7aa999 100644 --- a/packages/components/src/styles/mixins/_focus-ring.scss +++ b/packages/components/src/styles/mixins/_focus-ring.scss @@ -36,7 +36,7 @@ $right: 0, $bottom: 0, $left: 0, - $radius: 5px, + $radius: var(--token-border-radius-medium), $color: action, $position: relative ) { @@ -90,7 +90,7 @@ $right: 0, $bottom: 0, $left: 0, - $radius: 5px, + $radius: var(--token-border-radius-medium), $color: action, $position: relative ) { diff --git a/packages/components/src/styles/mixins/_interactive-dark-theme.scss b/packages/components/src/styles/mixins/_interactive-dark-theme.scss index 8abb83a729b..132928ddfb5 100644 --- a/packages/components/src/styles/mixins/_interactive-dark-theme.scss +++ b/packages/components/src/styles/mixins/_interactive-dark-theme.scss @@ -35,7 +35,7 @@ $hds-interactive-dark-theme-focus-ring-action-box-shadow: // general dark theme tokens color: var(--token-color-foreground-high-contrast); background-color: var(--token-color-palette-neutral-700); - border-radius: $hds-button-border-radius; // We don't have a button border-radius token so we use the button mixin sass variable + border-radius: var(--token-button-border-radius); } // Hover: diff --git a/packages/components/src/template-registry.ts b/packages/components/src/template-registry.ts index 0dcc6476c12..b57106844c9 100644 --- a/packages/components/src/template-registry.ts +++ b/packages/components/src/template-registry.ts @@ -226,6 +226,8 @@ import type HdsTagComponent from './components/hds/tag'; import type HdsTooltipButtonComponent from './components/hds/tooltip-button'; import type HdsToastComponent from './components/hds/toast'; import type HdsTextCodeComponent from './components/hds/text/code'; +import type HdsThemeContextComponent from './components/hds/theme-context'; +import type HdsThemeSwitcherComponent from './components/hds/theme-switcher'; import type HdsTimeComponent from './components/hds/time'; import type HdsTimeSingleComponent from './components/hds/time/single'; import type HdsTimeRangeComponent from './components/hds/time/range'; @@ -964,6 +966,14 @@ export default interface HdsComponentsRegistry { 'Hds::Toast': typeof HdsToastComponent; 'hds/toast': typeof HdsToastComponent; + // ThemeContext + 'Hds::ThemeContext': typeof HdsThemeContextComponent; + 'hds/theme-context': typeof HdsThemeContextComponent; + + // ThemeSwitcher + 'Hds::ThemeSwitcher': typeof HdsThemeSwitcherComponent; + 'hds/theme-switcher': typeof HdsThemeSwitcherComponent; + // Time 'Hds::Time': typeof HdsTimeComponent; 'hds/time': typeof HdsTimeComponent; diff --git a/packages/tokens/dist/cloud-email/helpers/color.css b/packages/tokens/dist/cloud-email/helpers/color.css index ddfd7479df8..69b443964f8 100644 --- a/packages/tokens/dist/cloud-email/helpers/color.css +++ b/packages/tokens/dist/cloud-email/helpers/color.css @@ -35,6 +35,7 @@ .hds-surface-primary { background-color: #ffffff; } .hds-surface-faint { background-color: #fafafa; } .hds-surface-strong { background-color: #f1f2f3; } +.hds-surface-high-contrast { background-color: #0c0c0e; } .hds-surface-interactive { background-color: #ffffff; } .hds-surface-interactive-hover { background-color: #f1f2f3; } .hds-surface-interactive-active { background-color: #dedfe3; } diff --git a/packages/tokens/dist/cloud-email/helpers/typography.css b/packages/tokens/dist/cloud-email/helpers/typography.css index 7adb62f4fd0..3d71bb8637e 100644 --- a/packages/tokens/dist/cloud-email/helpers/typography.css +++ b/packages/tokens/dist/cloud-email/helpers/typography.css @@ -17,6 +17,6 @@ .hds-typography-body-300 { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; font-size: 16px; line-height: 1.5; margin: 0; padding: 0; } .hds-typography-body-200 { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; font-size: 14px; line-height: 1.4286; margin: 0; padding: 0; } .hds-typography-body-100 { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; font-size: 13px; line-height: 1.3846; margin: 0; padding: 0; } -.hds-typography-code-100 { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.23; margin: 0; padding: 0; } -.hds-typography-code-200 { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.125; margin: 0; padding: 0; } .hds-typography-code-300 { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 16px; line-height: 1.25; margin: 0; padding: 0; } +.hds-typography-code-200 { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.125; margin: 0; padding: 0; } +.hds-typography-code-100 { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.23; margin: 0; padding: 0; } diff --git a/packages/tokens/dist/cloud-email/tokens.scss b/packages/tokens/dist/cloud-email/tokens.scss index b56f31f8c2b..7e2b949b583 100644 --- a/packages/tokens/dist/cloud-email/tokens.scss +++ b/packages/tokens/dist/cloud-email/tokens.scss @@ -5,6 +5,7 @@ $token-border-radius-x-small: 3px; $token-border-radius-small: 5px; $token-border-radius-medium: 6px; $token-border-radius-large: 8px; +$token-border-radius-rounded: 1000000000px; $token-color-palette-blue-500: #1c345f; $token-color-palette-blue-400: #0046d1; $token-color-palette-blue-300: #0c56e9; @@ -84,6 +85,7 @@ $token-color-page-faint: #fafafa; $token-color-surface-primary: #ffffff; $token-color-surface-faint: #fafafa; $token-color-surface-strong: #f1f2f3; +$token-color-surface-high-contrast: #0c0c0e; $token-color-surface-interactive: #ffffff; $token-color-surface-interactive-hover: #f1f2f3; $token-color-surface-interactive-active: #dedfe3; @@ -145,7 +147,7 @@ $token-color-vagrant-gradient-primary-stop: #2e71e5; $token-color-vagrant-gradient-faint-start: #f4faff; // this is the 'vagrant-50' value at 25% opacity on white $token-color-vagrant-gradient-faint-stop: #d6ebff; $token-color-vault-radar-brand: #ffcf25; -$token-color-vault-radar-brand-alt: #000000; // this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault radar would not work +$token-color-vault-radar-brand-alt: #000000; // this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work $token-color-vault-radar-foreground: #9a6f00; $token-color-vault-radar-surface: #fff9cf; $token-color-vault-radar-border: #feec7b; @@ -204,20 +206,23 @@ $token-typography-font-weight-bold: 700; $token-typography-display-500-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; $token-typography-display-500-font-size: 30px; // 30px/1.875rem $token-typography-display-500-line-height: 1.2666; // 38px +$token-typography-display-500-letter-spacing: -0.5px; $token-typography-display-400-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; $token-typography-display-400-font-size: 24px; // 24px/1.5rem $token-typography-display-400-line-height: 1.3333; // 32px +$token-typography-display-400-letter-spacing: 0px; $token-typography-display-300-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; $token-typography-display-300-font-size: 18px; // 18px/1.125rem $token-typography-display-300-line-height: 1.3333; // 24px -$token-typography-display-300-letter-spacing: -0.5px; // this is `tracking` +$token-typography-display-300-letter-spacing: -0.5px; $token-typography-display-200-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; $token-typography-display-200-font-size: 16px; // 16px/1rem $token-typography-display-200-line-height: 1.5; // 24px -$token-typography-display-200-letter-spacing: -0.5px; // this is `tracking` +$token-typography-display-200-letter-spacing: -0.5px; $token-typography-display-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; $token-typography-display-100-font-size: 13px; // 13px/0.8125rem $token-typography-display-100-line-height: 1.3846; // 18px +$token-typography-display-100-letter-spacing: 0px; $token-typography-body-300-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; $token-typography-body-300-font-size: 16px; // 16px/1rem $token-typography-body-300-line-height: 1.5; // 24px @@ -227,12 +232,12 @@ $token-typography-body-200-line-height: 1.4286; // 20px $token-typography-body-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; $token-typography-body-100-font-size: 13px; // 13px/0.8125rem $token-typography-body-100-line-height: 1.3846; // 18px -$token-typography-code-100-font-family: ui-monospace, Menlo, Consolas, monospace; -$token-typography-code-100-font-size: 13px; // 13px/0.8125rem -$token-typography-code-100-line-height: 1.23; // 16px -$token-typography-code-200-font-family: ui-monospace, Menlo, Consolas, monospace; -$token-typography-code-200-font-size: 14px; // 14px/0.875rem -$token-typography-code-200-line-height: 1.125; // 18px $token-typography-code-300-font-family: ui-monospace, Menlo, Consolas, monospace; $token-typography-code-300-font-size: 16px; // 16px/1rem $token-typography-code-300-line-height: 1.25; // 20px +$token-typography-code-200-font-family: ui-monospace, Menlo, Consolas, monospace; +$token-typography-code-200-font-size: 14px; // 14px/0.875rem +$token-typography-code-200-line-height: 1.125; // 18px +$token-typography-code-100-font-family: ui-monospace, Menlo, Consolas, monospace; +$token-typography-code-100-font-size: 13px; // 13px/0.8125rem +$token-typography-code-100-line-height: 1.23; // 16px diff --git a/packages/tokens/dist/devdot/css/helpers/color.css b/packages/tokens/dist/devdot/css/helpers/color.css index 37dea04d982..4913023c873 100644 --- a/packages/tokens/dist/devdot/css/helpers/color.css +++ b/packages/tokens/dist/devdot/css/helpers/color.css @@ -37,6 +37,7 @@ .hds-surface-primary { background-color: var(--token-color-surface-primary); } .hds-surface-faint { background-color: var(--token-color-surface-faint); } .hds-surface-strong { background-color: var(--token-color-surface-strong); } +.hds-surface-high-contrast { background-color: var(--token-color-surface-high-contrast); } .hds-surface-interactive { background-color: var(--token-color-surface-interactive); } .hds-surface-interactive-hover { background-color: var(--token-color-surface-interactive-hover); } .hds-surface-interactive-active { background-color: var(--token-color-surface-interactive-active); } diff --git a/packages/tokens/dist/devdot/css/helpers/typography.css b/packages/tokens/dist/devdot/css/helpers/typography.css index c0913ef1a67..63dd3021863 100644 --- a/packages/tokens/dist/devdot/css/helpers/typography.css +++ b/packages/tokens/dist/devdot/css/helpers/typography.css @@ -17,6 +17,6 @@ .hds-typography-body-300 { font-family: var(--token-typography-body-300-font-family); font-size: var(--token-typography-body-300-font-size); line-height: var(--token-typography-body-300-line-height); margin: 0; padding: 0; } .hds-typography-body-200 { font-family: var(--token-typography-body-200-font-family); font-size: var(--token-typography-body-200-font-size); line-height: var(--token-typography-body-200-line-height); margin: 0; padding: 0; } .hds-typography-body-100 { font-family: var(--token-typography-body-100-font-family); font-size: var(--token-typography-body-100-font-size); line-height: var(--token-typography-body-100-line-height); margin: 0; padding: 0; } -.hds-typography-code-100 { font-family: var(--token-typography-code-100-font-family); font-size: var(--token-typography-code-100-font-size); line-height: var(--token-typography-code-100-line-height); margin: 0; padding: 0; } -.hds-typography-code-200 { font-family: var(--token-typography-code-200-font-family); font-size: var(--token-typography-code-200-font-size); line-height: var(--token-typography-code-200-line-height); margin: 0; padding: 0; } .hds-typography-code-300 { font-family: var(--token-typography-code-300-font-family); font-size: var(--token-typography-code-300-font-size); line-height: var(--token-typography-code-300-line-height); margin: 0; padding: 0; } +.hds-typography-code-200 { font-family: var(--token-typography-code-200-font-family); font-size: var(--token-typography-code-200-font-size); line-height: var(--token-typography-code-200-line-height); margin: 0; padding: 0; } +.hds-typography-code-100 { font-family: var(--token-typography-code-100-font-family); font-size: var(--token-typography-code-100-font-size); line-height: var(--token-typography-code-100-line-height); margin: 0; padding: 0; } diff --git a/packages/tokens/dist/devdot/css/tokens.css b/packages/tokens/dist/devdot/css/tokens.css index 0d4f670eba2..9f66f634fb4 100644 --- a/packages/tokens/dist/devdot/css/tokens.css +++ b/packages/tokens/dist/devdot/css/tokens.css @@ -7,6 +7,7 @@ --token-border-radius-small: 5px; --token-border-radius-medium: 6px; --token-border-radius-large: 8px; + --token-border-radius-rounded: 1000000000px; --token-color-palette-blue-500: #1c345f; --token-color-palette-blue-400: #0046d1; --token-color-palette-blue-300: #0c56e9; @@ -88,6 +89,7 @@ --token-color-surface-primary: #ffffff; --token-color-surface-faint: #fafafa; --token-color-surface-strong: #f1f2f3; + --token-color-surface-high-contrast: #0c0c0e; --token-color-surface-interactive: #ffffff; --token-color-surface-interactive-hover: #f1f2f3; --token-color-surface-interactive-active: #dedfe3; @@ -149,7 +151,7 @@ --token-color-vagrant-gradient-faint-start: #f4faff; /** this is the 'vagrant-50' value at 25% opacity on white */ --token-color-vagrant-gradient-faint-stop: #d6ebff; --token-color-vault-radar-brand: #ffcf25; - --token-color-vault-radar-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault radar would not work */ + --token-color-vault-radar-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ --token-color-vault-radar-foreground: #9a6f00; --token-color-vault-radar-surface: #fff9cf; --token-color-vault-radar-border: #feec7b; @@ -198,6 +200,7 @@ --token-surface-overlay-box-shadow: 0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; --token-focus-ring-action-box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff; --token-focus-ring-critical-box-shadow: inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578; + --token-app-footer-focus-color-action-internal: var(--token-color-focus-action-internal); --token-app-header-height: 60px; --token-app-header-home-link-size: 36px; --token-app-header-logo-size: 28px; @@ -225,6 +228,147 @@ --token-app-side-nav-color-surface-primary: var(--token-color-surface-faint); --token-app-side-nav-color-surface-interactive-hover: var(--token-color-surface-interactive-hover); --token-app-side-nav-color-surface-interactive-active: var(--token-color-palette-neutral-300); + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-count-padding-horizontal-medium: 12px; + --token-badge-count-padding-horizontal-large: 14px; + --token-badge-height-small: 20px; + --token-badge-height-medium: 24px; + --token-badge-height-large: 32px; + --token-badge-padding-horizontal-small: 6px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-large: 8px; + --token-badge-padding-vertical-small: 2px; + --token-badge-padding-vertical-medium: 4px; + --token-badge-padding-vertical-large: 4px; + --token-badge-gap-small: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-large: 6px; + --token-badge-typography-font-size-small: 0.8125rem; + --token-badge-typography-font-size-medium: 0.8125rem; + --token-badge-typography-font-size-large: 1rem; + --token-badge-typography-line-height-small: 1.2308; /** 16px = 1.2308 */ + --token-badge-typography-line-height-medium: 1.2308; /** 16px = 1.2308 */ + --token-badge-typography-line-height-large: 1.5; /** 24px = 1.5 */ + --token-badge-foreground-color-neutral-filled: #3b3d45; + --token-badge-foreground-color-neutral-inverted: #ffffff; + --token-badge-foreground-color-neutral-outlined: #3b3d45; + --token-badge-foreground-color-neutral-dark-mode-filled: #ffffff; + --token-badge-foreground-color-neutral-dark-mode-inverted: #3b3d45; + --token-badge-foreground-color-neutral-dark-mode-outlined: #ffffff; + --token-badge-foreground-color-highlight-filled: #7b00db; /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: #ffffff; + --token-badge-foreground-color-highlight-outlined: #a737ff; + --token-badge-foreground-color-success-filled: #006619; /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: #ffffff; + --token-badge-foreground-color-success-outlined: #008a22; + --token-badge-foreground-color-warning-filled: #803d00; + --token-badge-foreground-color-warning-inverted: #ffffff; + --token-badge-foreground-color-warning-outlined: #bb5a00; + --token-badge-foreground-color-critical-filled: #940004; /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: #ffffff; + --token-badge-foreground-color-critical-outlined: #e52228; + --token-badge-surface-color-neutral-filled: #dedfe3; + --token-badge-surface-color-neutral-inverted: #656a76; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-neutral-outlined: rgba(0, 0, 0, 0); + --token-badge-surface-color-neutral-dark-mode-filled: #656a76; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: #fafafa; + --token-badge-surface-color-neutral-dark-mode-outlined: rgba(0, 0, 0, 0); + --token-badge-surface-color-highlight-filled: #ead2fe; /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: #a737ff; + --token-badge-surface-color-success-filled: #cceeda; /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: #008a22; + --token-badge-surface-color-warning-filled: #fbeabf; /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: #bb5a00; + --token-badge-surface-color-critical-filled: #fbd4d4; /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: #e52228; + --token-badge-border-radius: 5px; + --token-badge-icon-size-small: 12px; + --token-badge-icon-size-medium: 16px; + --token-badge-icon-size-large: 16px; + --token-button-height-small: 28px; + --token-button-height-medium: 36px; + --token-button-height-large: 48px; + --token-button-padding-horizontal-small: 11px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-large: 19px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 9px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 11px; /** here we're taking into account the 1px border */ + --token-button-gap: 6px; + --token-button-typography-font-size-small: 0.8125rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-large: 1rem; + --token-button-typography-line-height-small: 0.9286; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-button-typography-line-height-medium: 1.1429; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-large: 1.5; /** 24px = 1.5 */ + --token-button-foreground-color-primary-default: #ffffff; + --token-button-foreground-color-primary-hover: #ffffff; + --token-button-foreground-color-primary-focus: #ffffff; + --token-button-foreground-color-primary-active: #ffffff; + --token-button-foreground-color-secondary-default: #3b3d45; + --token-button-foreground-color-secondary-hover: #3b3d45; + --token-button-foreground-color-secondary-focus: #3b3d45; + --token-button-foreground-color-secondary-active: #3b3d45; + --token-button-foreground-color-tertiary-default: #1060ff; + --token-button-foreground-color-tertiary-hover: #0c56e9; + --token-button-foreground-color-tertiary-focus: #1060ff; + --token-button-foreground-color-tertiary-active: #0046d1; + --token-button-foreground-color-critical-default: #c00005; + --token-button-foreground-color-critical-hover: #ffffff; + --token-button-foreground-color-critical-focus: #c00005; + --token-button-foreground-color-critical-active: #ffffff; + --token-button-foreground-color-disabled: #8c909c; + --token-button-surface-color-primary-default: #1060ff; + --token-button-surface-color-primary-hover: #0c56e9; + --token-button-surface-color-primary-focus: #1060ff; + --token-button-surface-color-primary-active: #0046d1; + --token-button-surface-color-secondary-default: #fafafa; + --token-button-surface-color-secondary-hover: #ffffff; + --token-button-surface-color-secondary-focus: #fafafa; + --token-button-surface-color-secondary-active: #dedfe3; + --token-button-surface-color-tertiary-default: rgba(0, 0, 0, 0); + --token-button-surface-color-tertiary-hover: #ffffff; + --token-button-surface-color-tertiary-focus: rgba(0, 0, 0, 0); + --token-button-surface-color-tertiary-active: #dedfe3; + --token-button-surface-color-critical-default: #fff5f5; + --token-button-surface-color-critical-hover: #c00005; + --token-button-surface-color-critical-focus: #fff5f5; + --token-button-surface-color-critical-active: #940004; + --token-button-surface-color-disabled: #fafafa; + --token-button-border-width: 1px; + --token-button-border-radius: 5px; + --token-button-border-color-primary-default: #0c56e9; + --token-button-border-color-primary-hover: #0c56e9; + --token-button-border-color-primary-focus-internal: #0c56e9; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-focus-external: #5990ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-active: #0046d1; + --token-button-border-color-secondary-default: #3b3d4566; + --token-button-border-color-secondary-hover: #3b3d4566; + --token-button-border-color-secondary-focus-internal: #0c56e9; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-focus-external: #5990ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-active: #3b3d4566; + --token-button-border-color-tertiary-default: rgba(0, 0, 0, 0); + --token-button-border-color-tertiary-hover: #3b3d4566; + --token-button-border-color-tertiary-focus-internal: #0c56e9; + --token-button-border-color-tertiary-focus-external: #5990ff; + --token-button-border-color-tertiary-active: #3b3d4566; + --token-button-border-color-critical-default: #c00005; + --token-button-border-color-critical-hover: #940004; + --token-button-border-color-critical-focus-internal: #c00005; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-focus-external: #dd7578; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-active: #940004; + --token-button-border-color-disabled: #656a7633; + --token-button-focus-border-width: 3px; + --token-button-icon-size-small: 12px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-large: 24px; + --token-dismiss-button-size: 24px; + --token-dismiss-button-foreground-color-default: #656a76; + --token-dismiss-button-foreground-color-active: #0c0c0e; + --token-dismiss-button-surface-color-hover: rgba(222, 223, 227, 0.4); + --token-dismiss-button-surface-color-active: rgba(222, 223, 227, 0.4); + --token-dismiss-button-border-color-active: #3b3d4566; + --token-dismiss-button-icon-size: 16px; --token-form-label-color: #0c0c0e; --token-form-legend-color: #0c0c0e; --token-form-helper-text-color: #656a76; @@ -269,6 +413,9 @@ --token-form-radiocard-group-gap: 16px; --token-form-radiocard-border-width: 1px; --token-form-radiocard-border-radius: 6px; + --token-form-radiocard-border-color-default: #ffffff; + --token-form-radiocard-border-color-focus: #0c56e9; + --token-form-radiocard-border-color-default-checked: #0c56e9; --token-form-radiocard-content-padding: 24px; --token-form-radiocard-control-padding: 8px; --token-form-radiocard-transition-duration: 0.2s; @@ -296,6 +443,9 @@ --token-form-toggle-transition-duration: 0.2s; --token-form-toggle-transition-timing-function: cubic-bezier(0.68, -0.2, 0.265, 1.15); --token-form-toggle-thumb-size: 16px; + --token-icon-tile-border-color-overlay: #656a7633; + --token-icon-tile-border-color-logo: #656a7633; + --token-icon-tile-surface-color-overlay: #ffffff; --token-pagination-nav-control-height: 36px; --token-pagination-nav-control-padding-horizontal: 12px; --token-pagination-nav-control-focus-inset: 4px; @@ -304,6 +454,15 @@ --token-pagination-nav-indicator-spacing: 6px; --token-pagination-child-spacing-vertical: 8px; --token-pagination-child-spacing-horizontal: 20px; + --token-rich-tooltip-bubble-max-width: 280px; + --token-rich-tooltip-bubble-border-color: #656a7633; + --token-rich-tooltip-bubble-border-radius: 5px; + --token-rich-tooltip-bubble-arrow-size: 20px; + --token-rich-tooltip-toggle-gap-horizontal: 4px; + --token-rich-tooltip-toggle-foreground-color-default: #0c0c0e; + --token-rich-tooltip-toggle-foreground-color-hover: #3b3d45; + --token-rich-tooltip-toggle-foreground-color-active: #656a76; + --token-rich-tooltip-toggle-icon-size: 1em; --token-tabs-tab-height-medium: 36px; --token-tabs-tab-height-large: 48px; --token-tabs-tab-padding-horizontal-medium: 12px; @@ -316,13 +475,14 @@ --token-tabs-indicator-transition-function: cubic-bezier(0.5, 1, 0.89, 1); --token-tabs-indicator-transition-duration: 0.6s; --token-tabs-divider-height: 1px; - --token-tooltip-border-radius: 5px; - --token-tooltip-color-foreground-primary: var(--token-color-foreground-high-contrast); - --token-tooltip-color-surface-primary: var(--token-color-palette-neutral-700); - --token-tooltip-focus-offset: -2px; --token-tooltip-max-width: 280px; --token-tooltip-padding-horizontal: 12px; --token-tooltip-padding-vertical: 8px; + --token-tooltip-border-radius: 5px; + --token-tooltip-caret-clip-path: path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z'); + --token-tooltip-caret-height: 7px; + --token-tooltip-caret-width: 16px; + --token-tooltip-focus-offset: -2px; --token-tooltip-transition-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); --token-typography-font-stack-display: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-font-stack-text: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; @@ -334,20 +494,23 @@ --token-typography-display-500-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-display-500-font-size: 1.875rem; /** 30px/1.875rem */ --token-typography-display-500-line-height: 1.2666; /** 38px */ + --token-typography-display-500-letter-spacing: -0.5px; --token-typography-display-400-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-display-400-font-size: 1.5rem; /** 24px/1.5rem */ --token-typography-display-400-line-height: 1.3333; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; --token-typography-display-300-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-display-300-font-size: 1.125rem; /** 18px/1.125rem */ --token-typography-display-300-line-height: 1.3333; /** 24px */ - --token-typography-display-300-letter-spacing: -0.5px; /** this is `tracking` */ + --token-typography-display-300-letter-spacing: -0.5px; --token-typography-display-200-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ --token-typography-display-200-line-height: 1.5; /** 24px */ - --token-typography-display-200-letter-spacing: -0.5px; /** this is `tracking` */ + --token-typography-display-200-letter-spacing: -0.5px; --token-typography-display-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-display-100-font-size: 0.8125rem; /** 13px/0.8125rem */ --token-typography-display-100-line-height: 1.3846; /** 18px */ + --token-typography-display-100-letter-spacing: 0px; --token-typography-body-300-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ --token-typography-body-300-line-height: 1.5; /** 24px */ @@ -357,13 +520,13 @@ --token-typography-body-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-body-100-font-size: 0.8125rem; /** 13px/0.8125rem */ --token-typography-body-100-line-height: 1.3846; /** 18px */ - --token-typography-code-100-font-family: ui-monospace, Menlo, Consolas, monospace; - --token-typography-code-100-font-size: 0.8125rem; /** 13px/0.8125rem */ - --token-typography-code-100-line-height: 1.23; /** 16px */ - --token-typography-code-200-font-family: ui-monospace, Menlo, Consolas, monospace; - --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ - --token-typography-code-200-line-height: 1.125; /** 18px */ --token-typography-code-300-font-family: ui-monospace, Menlo, Consolas, monospace; --token-typography-code-300-font-size: 1rem; /** 16px/1rem */ --token-typography-code-300-line-height: 1.25; /** 20px */ + --token-typography-code-200-font-family: ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.125; /** 18px */ + --token-typography-code-100-font-family: ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-100-font-size: 0.8125rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.23; /** 16px */ } diff --git a/packages/tokens/dist/docs/products/themed-tokens.json b/packages/tokens/dist/docs/products/themed-tokens.json new file mode 100644 index 00000000000..1dd257f3d2d --- /dev/null +++ b/packages/tokens/dist/docs/products/themed-tokens.json @@ -0,0 +1,78048 @@ +{ + "default": { + "token-border-radius-x-small": { + "key": "{border.radius.x-small}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.x-small}" + }, + "name": "token-border-radius-x-small", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "x-small" + ] + }, + "token-border-radius-small": { + "key": "{border.radius.small}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.small}" + }, + "name": "token-border-radius-small", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "small" + ] + }, + "token-border-radius-medium": { + "key": "{border.radius.medium}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.medium}" + }, + "name": "token-border-radius-medium", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "medium" + ] + }, + "token-border-radius-large": { + "key": "{border.radius.large}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.large}" + }, + "name": "token-border-radius-large", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "large" + ] + }, + "token-border-radius-rounded": { + "key": "{border.radius.rounded}", + "$type": "dimension", + "$value": "1000000000px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1000000000", + "unit": "px", + "key": "{border.radius.rounded}" + }, + "name": "token-border-radius-rounded", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "rounded" + ] + }, + "token-color-palette-blue-500": { + "key": "{color.palette.blue-500}", + "$type": "color", + "$value": "#1c345f", + "group": "palette", + "$modes": { + "default": "#1c345f", + "cds-g0": "#001141", + "cds-g10": "#001141", + "cds-g90": "#001141", + "cds-g100": "#001141" + }, + "original": { + "$type": "color", + "$value": "#1c345f", + "group": "palette", + "$modes": { + "default": "#1c345f", + "cds-g0": "{carbon.color.blue.100}", + "cds-g10": "{carbon.color.blue.100}", + "cds-g90": "{carbon.color.blue.100}", + "cds-g100": "{carbon.color.blue.100}" + }, + "key": "{color.palette.blue-500}" + }, + "name": "token-color-palette-blue-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-500" + ] + }, + "token-color-palette-blue-400": { + "key": "{color.palette.blue-400}", + "$type": "color", + "$value": "#0046d1", + "group": "palette", + "$modes": { + "default": "#0046d1", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#002d9c", + "cds-g100": "#002d9c" + }, + "original": { + "$type": "color", + "$value": "#0046d1", + "group": "palette", + "$modes": { + "default": "#0046d1", + "cds-g0": "{carbon.color.blue.80}", + "cds-g10": "{carbon.color.blue.80}", + "cds-g90": "{carbon.color.blue.80}", + "cds-g100": "{carbon.color.blue.80}" + }, + "key": "{color.palette.blue-400}" + }, + "name": "token-color-palette-blue-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-400" + ] + }, + "token-color-palette-blue-300": { + "key": "{color.palette.blue-300}", + "$type": "color", + "$value": "#0c56e9", + "group": "palette", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, + "original": { + "$type": "color", + "$value": "#0c56e9", + "group": "palette", + "$modes": { + "default": "#0c56e9", + "cds-g0": "{carbon.color.blue.70}", + "cds-g10": "{carbon.color.blue.70}", + "cds-g90": "{carbon.color.blue.70}", + "cds-g100": "{carbon.color.blue.70}" + }, + "key": "{color.palette.blue-300}" + }, + "name": "token-color-palette-blue-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-300" + ] + }, + "token-color-palette-blue-200": { + "key": "{color.palette.blue-200}", + "$type": "color", + "$value": "#1060ff", + "group": "palette", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "#1060ff", + "group": "palette", + "$modes": { + "default": "#1060ff", + "cds-g0": "{carbon.color.blue.60}", + "cds-g10": "{carbon.color.blue.60}", + "cds-g90": "{carbon.color.blue.60}", + "cds-g100": "{carbon.color.blue.60}" + }, + "key": "{color.palette.blue-200}" + }, + "name": "token-color-palette-blue-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-200" + ] + }, + "token-color-palette-blue-100": { + "key": "{color.palette.blue-100}", + "$type": "color", + "$value": "#cce3fe", + "group": "palette", + "$modes": { + "default": "#cce3fe", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "#cce3fe", + "group": "palette", + "$modes": { + "default": "#cce3fe", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.20}", + "cds-g100": "{carbon.color.blue.20}" + }, + "key": "{color.palette.blue-100}" + }, + "name": "token-color-palette-blue-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-100" + ] + }, + "token-color-palette-blue-50": { + "key": "{color.palette.blue-50}", + "$type": "color", + "$value": "#f2f8ff", + "group": "palette", + "$modes": { + "default": "#f2f8ff", + "cds-g0": "#edf5ff", + "cds-g10": "#edf5ff", + "cds-g90": "#edf5ff", + "cds-g100": "#edf5ff" + }, + "original": { + "$type": "color", + "$value": "#f2f8ff", + "group": "palette", + "$modes": { + "default": "#f2f8ff", + "cds-g0": "{carbon.color.blue.10}", + "cds-g10": "{carbon.color.blue.10}", + "cds-g90": "{carbon.color.blue.10}", + "cds-g100": "{carbon.color.blue.10}" + }, + "key": "{color.palette.blue-50}" + }, + "name": "token-color-palette-blue-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-50" + ] + }, + "token-color-palette-purple-500": { + "key": "{color.palette.purple-500}", + "$type": "color", + "$value": "#42215b", + "group": "palette", + "$modes": { + "default": "#42215b", + "cds-g0": "#31135e", + "cds-g10": "#31135e", + "cds-g90": "#31135e", + "cds-g100": "#31135e" + }, + "original": { + "$type": "color", + "$value": "#42215b", + "group": "palette", + "$modes": { + "default": "#42215b", + "cds-g0": "{carbon.color.purple.90}", + "cds-g10": "{carbon.color.purple.90}", + "cds-g90": "{carbon.color.purple.90}", + "cds-g100": "{carbon.color.purple.90}" + }, + "key": "{color.palette.purple-500}" + }, + "name": "token-color-palette-purple-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-500" + ] + }, + "token-color-palette-purple-400": { + "key": "{color.palette.purple-400}", + "$type": "color", + "$value": "#7b00db", + "group": "palette", + "$modes": { + "default": "#7b00db", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "#7b00db", + "group": "palette", + "$modes": { + "default": "#7b00db", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, + "key": "{color.palette.purple-400}" + }, + "name": "token-color-palette-purple-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-400" + ] + }, + "token-color-palette-purple-300": { + "key": "{color.palette.purple-300}", + "$type": "color", + "$value": "#911ced", + "group": "palette", + "$modes": { + "default": "#911ced", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#8a3ffc", + "cds-g100": "#8a3ffc" + }, + "original": { + "$type": "color", + "$value": "#911ced", + "group": "palette", + "$modes": { + "default": "#911ced", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.60}", + "cds-g100": "{carbon.color.purple.60}" + }, + "key": "{color.palette.purple-300}" + }, + "name": "token-color-palette-purple-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-300" + ] + }, + "token-color-palette-purple-200": { + "key": "{color.palette.purple-200}", + "$type": "color", + "$value": "#a737ff", + "group": "palette", + "$modes": { + "default": "#a737ff", + "cds-g0": "#a56eff", + "cds-g10": "#a56eff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, + "original": { + "$type": "color", + "$value": "#a737ff", + "group": "palette", + "$modes": { + "default": "#a737ff", + "cds-g0": "{carbon.color.purple.50}", + "cds-g10": "{carbon.color.purple.50}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, + "key": "{color.palette.purple-200}" + }, + "name": "token-color-palette-purple-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-200" + ] + }, + "token-color-palette-purple-100": { + "key": "{color.palette.purple-100}", + "$type": "color", + "$value": "#ead2fe", + "group": "palette", + "$modes": { + "default": "#ead2fe", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "#ead2fe", + "group": "palette", + "$modes": { + "default": "#ead2fe", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.20}" + }, + "key": "{color.palette.purple-100}" + }, + "name": "token-color-palette-purple-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-100" + ] + }, + "token-color-palette-purple-50": { + "key": "{color.palette.purple-50}", + "$type": "color", + "$value": "#f9f2ff", + "group": "palette", + "$modes": { + "default": "#f9f2ff", + "cds-g0": "#f6f2ff", + "cds-g10": "#f6f2ff", + "cds-g90": "#f6f2ff", + "cds-g100": "#f6f2ff" + }, + "original": { + "$type": "color", + "$value": "#f9f2ff", + "group": "palette", + "$modes": { + "default": "#f9f2ff", + "cds-g0": "{carbon.color.purple.10}", + "cds-g10": "{carbon.color.purple.10}", + "cds-g90": "{carbon.color.purple.10}", + "cds-g100": "{carbon.color.purple.10}" + }, + "key": "{color.palette.purple-50}" + }, + "name": "token-color-palette-purple-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-50" + ] + }, + "token-color-palette-green-500": { + "key": "{color.palette.green-500}", + "$type": "color", + "$value": "#054220", + "group": "palette", + "$modes": { + "default": "#054220", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#044317", + "cds-g100": "#044317" + }, + "original": { + "$type": "color", + "$value": "#054220", + "group": "palette", + "$modes": { + "default": "#054220", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.80}", + "cds-g100": "{carbon.color.green.80}" + }, + "key": "{color.palette.green-500}" + }, + "name": "token-color-palette-green-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-500" + ] + }, + "token-color-palette-green-400": { + "key": "{color.palette.green-400}", + "$type": "color", + "$value": "#006619", + "group": "palette", + "$modes": { + "default": "#006619", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "#006619", + "group": "palette", + "$modes": { + "default": "#006619", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, + "key": "{color.palette.green-400}" + }, + "name": "token-color-palette-green-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-400" + ] + }, + "token-color-palette-green-300": { + "key": "{color.palette.green-300}", + "$type": "color", + "$value": "#00781e", + "group": "palette", + "$modes": { + "default": "#00781e", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#198038", + "cds-g100": "#198038" + }, + "original": { + "$type": "color", + "$value": "#00781e", + "group": "palette", + "$modes": { + "default": "#00781e", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.60}", + "cds-g100": "{carbon.color.green.60}" + }, + "key": "{color.palette.green-300}" + }, + "name": "token-color-palette-green-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-300" + ] + }, + "token-color-palette-green-200": { + "key": "{color.palette.green-200}", + "$type": "color", + "$value": "#008a22", + "group": "palette", + "$modes": { + "default": "#008a22", + "cds-g0": "#24a148", + "cds-g10": "#24a148", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, + "original": { + "$type": "color", + "$value": "#008a22", + "group": "palette", + "$modes": { + "default": "#008a22", + "cds-g0": "{carbon.color.green.50}", + "cds-g10": "{carbon.color.green.50}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, + "key": "{color.palette.green-200}" + }, + "name": "token-color-palette-green-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-200" + ] + }, + "token-color-palette-green-100": { + "key": "{color.palette.green-100}", + "$type": "color", + "$value": "#cceeda", + "group": "palette", + "$modes": { + "default": "#cceeda", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "#cceeda", + "group": "palette", + "$modes": { + "default": "#cceeda", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, + "key": "{color.palette.green-100}" + }, + "name": "token-color-palette-green-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-100" + ] + }, + "token-color-palette-green-50": { + "key": "{color.palette.green-50}", + "$type": "color", + "$value": "#f2fbf6", + "group": "palette", + "$modes": { + "default": "#f2fbf6", + "cds-g0": "#defbe6", + "cds-g10": "#defbe6", + "cds-g90": "#defbe6", + "cds-g100": "#defbe6" + }, + "original": { + "$type": "color", + "$value": "#f2fbf6", + "group": "palette", + "$modes": { + "default": "#f2fbf6", + "cds-g0": "{carbon.color.green.10}", + "cds-g10": "{carbon.color.green.10}", + "cds-g90": "{carbon.color.green.10}", + "cds-g100": "{carbon.color.green.10}" + }, + "key": "{color.palette.green-50}" + }, + "name": "token-color-palette-green-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-50" + ] + }, + "token-color-palette-amber-500": { + "key": "{color.palette.amber-500}", + "$type": "color", + "$value": "#542800", + "group": "palette", + "$modes": { + "default": "#542800", + "cds-g0": "#3e1a00", + "cds-g10": "#3e1a00", + "cds-g90": "#3e1a00", + "cds-g100": "#3e1a00" + }, + "original": { + "$type": "color", + "$value": "#542800", + "group": "palette", + "$modes": { + "default": "#542800", + "cds-g0": "{carbon.color.orange.90}", + "cds-g10": "{carbon.color.orange.90}", + "cds-g90": "{carbon.color.orange.90}", + "cds-g100": "{carbon.color.orange.90}" + }, + "key": "{color.palette.amber-500}" + }, + "name": "token-color-palette-amber-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-500" + ] + }, + "token-color-palette-amber-400": { + "key": "{color.palette.amber-400}", + "$type": "color", + "$value": "#803d00", + "group": "palette", + "$modes": { + "default": "#803d00", + "cds-g0": "#5e2900", + "cds-g10": "#5e2900", + "cds-g90": "#5e2900", + "cds-g100": "#5e2900" + }, + "original": { + "$type": "color", + "$value": "#803d00", + "group": "palette", + "$modes": { + "default": "#803d00", + "cds-g0": "{carbon.color.orange.80}", + "cds-g10": "{carbon.color.orange.80}", + "cds-g90": "{carbon.color.orange.80}", + "cds-g100": "{carbon.color.orange.80}" + }, + "key": "{color.palette.amber-400}" + }, + "name": "token-color-palette-amber-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-400" + ] + }, + "token-color-palette-amber-300": { + "key": "{color.palette.amber-300}", + "$type": "color", + "$value": "#9e4b00", + "group": "palette", + "$modes": { + "default": "#9e4b00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, + "original": { + "$type": "color", + "$value": "#9e4b00", + "group": "palette", + "$modes": { + "default": "#9e4b00", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, + "key": "{color.palette.amber-300}" + }, + "name": "token-color-palette-amber-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-300" + ] + }, + "token-color-palette-amber-200": { + "key": "{color.palette.amber-200}", + "$type": "color", + "$value": "#bb5a00", + "group": "palette", + "$modes": { + "default": "#bb5a00", + "cds-g0": "#ba4e00", + "cds-g10": "#ba4e00", + "cds-g90": "#ba4e00", + "cds-g100": "#ba4e00" + }, + "original": { + "$type": "color", + "$value": "#bb5a00", + "group": "palette", + "$modes": { + "default": "#bb5a00", + "cds-g0": "{carbon.color.orange.60}", + "cds-g10": "{carbon.color.orange.60}", + "cds-g90": "{carbon.color.orange.60}", + "cds-g100": "{carbon.color.orange.60}" + }, + "key": "{color.palette.amber-200}" + }, + "name": "token-color-palette-amber-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-200" + ] + }, + "token-color-palette-amber-100": { + "key": "{color.palette.amber-100}", + "$type": "color", + "$value": "#fbeabf", + "group": "palette", + "$modes": { + "default": "#fbeabf", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "original": { + "$type": "color", + "$value": "#fbeabf", + "group": "palette", + "$modes": { + "default": "#fbeabf", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "key": "{color.palette.amber-100}" + }, + "name": "token-color-palette-amber-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-100" + ] + }, + "token-color-palette-amber-50": { + "key": "{color.palette.amber-50}", + "$type": "color", + "$value": "#fff9e8", + "group": "palette", + "$modes": { + "default": "#fff9e8", + "cds-g0": "#fff2e8", + "cds-g10": "#fff2e8", + "cds-g90": "#fff2e8", + "cds-g100": "#fff2e8" + }, + "original": { + "$type": "color", + "$value": "#fff9e8", + "group": "palette", + "$modes": { + "default": "#fff9e8", + "cds-g0": "{carbon.color.orange.10}", + "cds-g10": "{carbon.color.orange.10}", + "cds-g90": "{carbon.color.orange.10}", + "cds-g100": "{carbon.color.orange.10}" + }, + "key": "{color.palette.amber-50}" + }, + "name": "token-color-palette-amber-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-50" + ] + }, + "token-color-palette-red-500": { + "key": "{color.palette.red-500}", + "$type": "color", + "$value": "#51130a", + "group": "palette", + "$modes": { + "default": "#51130a", + "cds-g0": "#520408", + "cds-g10": "#520408", + "cds-g90": "#520408", + "cds-g100": "#520408" + }, + "original": { + "$type": "color", + "$value": "#51130a", + "group": "palette", + "$modes": { + "default": "#51130a", + "cds-g0": "{carbon.color.red.90}", + "cds-g10": "{carbon.color.red.90}", + "cds-g90": "{carbon.color.red.90}", + "cds-g100": "{carbon.color.red.90}" + }, + "key": "{color.palette.red-500}" + }, + "name": "token-color-palette-red-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-500" + ] + }, + "token-color-palette-red-400": { + "key": "{color.palette.red-400}", + "$type": "color", + "$value": "#940004", + "group": "palette", + "$modes": { + "default": "#940004", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#750e13", + "cds-g100": "#750e13" + }, + "original": { + "$type": "color", + "$value": "#940004", + "group": "palette", + "$modes": { + "default": "#940004", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.80}", + "cds-g100": "{carbon.color.red.80}" + }, + "key": "{color.palette.red-400}" + }, + "name": "token-color-palette-red-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-400" + ] + }, + "token-color-palette-red-300": { + "key": "{color.palette.red-300}", + "$type": "color", + "$value": "#c00005", + "group": "palette", + "$modes": { + "default": "#c00005", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "#c00005", + "group": "palette", + "$modes": { + "default": "#c00005", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, + "key": "{color.palette.red-300}" + }, + "name": "token-color-palette-red-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-300" + ] + }, + "token-color-palette-red-200": { + "key": "{color.palette.red-200}", + "$type": "color", + "$value": "#e52228", + "group": "palette", + "$modes": { + "default": "#e52228", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "#e52228", + "group": "palette", + "$modes": { + "default": "#e52228", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.60}", + "cds-g100": "{carbon.color.red.60}" + }, + "key": "{color.palette.red-200}" + }, + "name": "token-color-palette-red-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-200" + ] + }, + "token-color-palette-red-100": { + "key": "{color.palette.red-100}", + "$type": "color", + "$value": "#fbd4d4", + "group": "palette", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "#fbd4d4", + "group": "palette", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, + "key": "{color.palette.red-100}" + }, + "name": "token-color-palette-red-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-100" + ] + }, + "token-color-palette-red-50": { + "key": "{color.palette.red-50}", + "$type": "color", + "$value": "#fff5f5", + "group": "palette", + "$modes": { + "default": "#fff5f5", + "cds-g0": "#fff1f1", + "cds-g10": "#fff1f1", + "cds-g90": "#fff1f1", + "cds-g100": "#fff1f1" + }, + "original": { + "$type": "color", + "$value": "#fff5f5", + "group": "palette", + "$modes": { + "default": "#fff5f5", + "cds-g0": "{carbon.color.red.10}", + "cds-g10": "{carbon.color.red.10}", + "cds-g90": "{carbon.color.red.10}", + "cds-g100": "{carbon.color.red.10}" + }, + "key": "{color.palette.red-50}" + }, + "name": "token-color-palette-red-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-50" + ] + }, + "token-color-palette-neutral-700": { + "key": "{color.palette.neutral-700}", + "$type": "color", + "$value": "#0c0c0e", + "group": "palette", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "#0c0c0e", + "group": "palette", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "{carbon.color.gray.100}", + "cds-g10": "{carbon.color.gray.100}", + "cds-g90": "{carbon.color.gray.100}", + "cds-g100": "{carbon.color.gray.100}" + }, + "key": "{color.palette.neutral-700}" + }, + "name": "token-color-palette-neutral-700", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-700" + ] + }, + "token-color-palette-neutral-600": { + "key": "{color.palette.neutral-600}", + "$type": "color", + "$value": "#3b3d45", + "group": "palette", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#393939", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "#3b3d45", + "group": "palette", + "$modes": { + "default": "#3b3d45", + "cds-g0": "{carbon.color.gray.80}", + "cds-g10": "{carbon.color.gray.80}", + "cds-g90": "{carbon.color.gray.80}", + "cds-g100": "{carbon.color.gray.80}" + }, + "key": "{color.palette.neutral-600}" + }, + "name": "token-color-palette-neutral-600", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-600" + ] + }, + "token-color-palette-neutral-500": { + "key": "{color.palette.neutral-500}", + "$type": "color", + "$value": "#656a76", + "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "#656a76", + "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": "{carbon.color.gray.70}", + "cds-g10": "{carbon.color.gray.70}", + "cds-g90": "{carbon.color.gray.70}", + "cds-g100": "{carbon.color.gray.70}" + }, + "key": "{color.palette.neutral-500}" + }, + "name": "token-color-palette-neutral-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-500" + ] + }, + "token-color-palette-neutral-400": { + "key": "{color.palette.neutral-400}", + "$type": "color", + "$value": "#8c909c", + "group": "palette", + "$modes": { + "default": "#8c909c", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, + "original": { + "$type": "color", + "$value": "#8c909c", + "group": "palette", + "$modes": { + "default": "#8c909c", + "cds-g0": "{carbon.color.gray.50}", + "cds-g10": "{carbon.color.gray.50}", + "cds-g90": "{carbon.color.gray.50}", + "cds-g100": "{carbon.color.gray.50}" + }, + "key": "{color.palette.neutral-400}" + }, + "name": "token-color-palette-neutral-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-400" + ] + }, + "token-color-palette-neutral-300": { + "key": "{color.palette.neutral-300}", + "$type": "color", + "$value": "#c2c5cb", + "group": "palette", + "$modes": { + "default": "#c2c5cb", + "cds-g0": "#a8a8a8", + "cds-g10": "#a8a8a8", + "cds-g90": "#a8a8a8", + "cds-g100": "#a8a8a8" + }, + "original": { + "$type": "color", + "$value": "#c2c5cb", + "group": "palette", + "$modes": { + "default": "#c2c5cb", + "cds-g0": "{carbon.color.gray.40}", + "cds-g10": "{carbon.color.gray.40}", + "cds-g90": "{carbon.color.gray.40}", + "cds-g100": "{carbon.color.gray.40}" + }, + "key": "{color.palette.neutral-300}" + }, + "name": "token-color-palette-neutral-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-300" + ] + }, + "token-color-palette-neutral-200": { + "key": "{color.palette.neutral-200}", + "$type": "color", + "$value": "#dedfe3", + "group": "palette", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "#dedfe3", + "group": "palette", + "$modes": { + "default": "#dedfe3", + "cds-g0": "{carbon.color.gray.30}", + "cds-g10": "{carbon.color.gray.30}", + "cds-g90": "{carbon.color.gray.30}", + "cds-g100": "{carbon.color.gray.30}" + }, + "key": "{color.palette.neutral-200}" + }, + "name": "token-color-palette-neutral-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-200" + ] + }, + "token-color-palette-neutral-100": { + "key": "{color.palette.neutral-100}", + "$type": "color", + "$value": "#f1f2f3", + "group": "palette", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#e0e0e0", + "cds-g100": "#e0e0e0" + }, + "original": { + "$type": "color", + "$value": "#f1f2f3", + "group": "palette", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "{carbon.color.gray.20}", + "cds-g10": "{carbon.color.gray.20}", + "cds-g90": "{carbon.color.gray.20}", + "cds-g100": "{carbon.color.gray.20}" + }, + "key": "{color.palette.neutral-100}" + }, + "name": "token-color-palette-neutral-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-100" + ] + }, + "token-color-palette-neutral-50": { + "key": "{color.palette.neutral-50}", + "$type": "color", + "$value": "#fafafa", + "group": "palette", + "$modes": { + "default": "#fafafa", + "cds-g0": "#f4f4f4", + "cds-g10": "#f4f4f4", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "#fafafa", + "group": "palette", + "$modes": { + "default": "#fafafa", + "cds-g0": "{carbon.color.gray.10}", + "cds-g10": "{carbon.color.gray.10}", + "cds-g90": "{carbon.color.gray.10}", + "cds-g100": "{carbon.color.gray.10}" + }, + "key": "{color.palette.neutral-50}" + }, + "name": "token-color-palette-neutral-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-50" + ] + }, + "token-color-palette-neutral-0": { + "key": "{color.palette.neutral-0}", + "$type": "color", + "$value": "#ffffff", + "group": "palette", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "#ffffff", + "group": "palette", + "$modes": { + "default": "#ffffff", + "cds-g0": "{carbon.color.white.0}", + "cds-g10": "{carbon.color.white.0}", + "cds-g90": "{carbon.color.white.0}", + "cds-g100": "{carbon.color.white.0}" + }, + "key": "{color.palette.neutral-0}" + }, + "name": "token-color-palette-neutral-0", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-0" + ] + }, + "token-color-palette-alpha-300": { + "key": "{color.palette.alpha-300}", + "$type": "color", + "$value": "#3b3d4566", + "alpha": "0.4", + "group": "palette", + "$modes": { + "default": "#3b3d45", + "cds-g0": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#6f6f6f", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-600}", + "alpha": "0.4", + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-600}", + "cds-g0": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.60}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "key": "{color.palette.alpha-300}" + }, + "name": "token-color-palette-alpha-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "alpha-300" + ] + }, + "token-color-palette-alpha-200": { + "key": "{color.palette.alpha-200}", + "$type": "color", + "$value": "#656a7633", + "alpha": "0.2", + "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": { + "$value": "#c6c6c6", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#e0e0e0", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#6f6f6f", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#525252", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "alpha": "0.2", + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": { + "$value": "{carbon.color.gray.30}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.20}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.60}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.70}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "key": "{color.palette.alpha-200}" + }, + "name": "token-color-palette-alpha-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "alpha-200" + ] + }, + "token-color-palette-alpha-100": { + "key": "{color.palette.alpha-100}", + "$type": "color", + "$value": "#656a761a", + "alpha": "0.1", + "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": { + "$value": "#e0e0e0", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#c6c6c6", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#525252", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#393939", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "alpha": "0.1", + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": { + "$value": "{carbon.color.gray.20}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.30}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.70}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.80}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "key": "{color.palette.alpha-100}" + }, + "name": "token-color-palette-alpha-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "alpha-100" + ] + }, + "token-color-border-primary": { + "key": "{color.border.primary}", + "$type": "color", + "$value": "#656a7633", + "group": "semantic", + "$modes": { + "default": "#656a7633", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{color.palette.alpha-200}", + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-200}", + "cds-g0": "{carbon.themes.white.borderSubtle03}", + "cds-g10": "{carbon.themes.g10.borderSubtle03}", + "cds-g90": "{carbon.themes.g90.borderSubtle03}", + "cds-g100": "{carbon.themes.g100.borderSubtle03}" + }, + "key": "{color.border.primary}" + }, + "name": "token-color-border-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "primary" + ] + }, + "token-color-border-faint": { + "key": "{color.border.faint}", + "$type": "color", + "$value": "#656a761a", + "group": "semantic", + "$modes": { + "default": "#656a761a", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{color.palette.alpha-100}", + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-100}", + "cds-g0": "{carbon.themes.white.borderSubtle00}", + "cds-g10": "{carbon.themes.g10.borderSubtle00}", + "cds-g90": "{carbon.themes.g90.borderSubtle00}", + "cds-g100": "{carbon.themes.g100.borderSubtle00}" + }, + "key": "{color.border.faint}" + }, + "name": "token-color-border-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "faint" + ] + }, + "token-color-border-strong": { + "key": "{color.border.strong}", + "$type": "color", + "$value": "#3b3d4566", + "group": "semantic", + "$modes": { + "default": "#3b3d4566", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{color.palette.alpha-300}", + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-300}", + "cds-g0": "{carbon.themes.white.borderStrong01}", + "cds-g10": "{carbon.themes.g10.borderStrong01}", + "cds-g90": "{carbon.themes.g90.borderStrong01}", + "cds-g100": "{carbon.themes.g100.borderStrong01}" + }, + "key": "{color.border.strong}" + }, + "name": "token-color-border-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "strong" + ] + }, + "token-color-border-action": { + "key": "{color.border.action}", + "$type": "color", + "$value": "#cce3fe", + "group": "semantic", + "$modes": { + "default": "#cce3fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-100}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-100}", + "cds-g0": "{carbon.themes.white.borderInteractive}", + "cds-g10": "{carbon.themes.g10.borderInteractive}", + "cds-g90": "{carbon.themes.g90.borderInteractive}", + "cds-g100": "{carbon.themes.g100.borderInteractive}" + }, + "key": "{color.border.action}" + }, + "name": "token-color-border-action", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "action" + ] + }, + "token-color-border-highlight": { + "key": "{color.border.highlight}", + "$type": "color", + "$value": "#ead2fe", + "group": "semantic", + "$modes": { + "default": "#ead2fe", + "cds-g0": "#be95ff", + "cds-g10": "#be95ff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, + "original": { + "$type": "color", + "$value": "{color.palette.purple-100}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-100}", + "cds-g0": "{carbon.color.purple.40}", + "cds-g10": "{carbon.color.purple.40}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, + "key": "{color.border.highlight}" + }, + "name": "token-color-border-highlight", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "highlight" + ] + }, + "token-color-border-success": { + "key": "{color.border.success}", + "$type": "color", + "$value": "#cceeda", + "group": "semantic", + "$modes": { + "default": "#cceeda", + "cds-g0": "#42be65", + "cds-g10": "#42be65", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, + "original": { + "$type": "color", + "$value": "{color.palette.green-100}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-100}", + "cds-g0": "{carbon.color.green.40}", + "cds-g10": "{carbon.color.green.40}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, + "key": "{color.border.success}" + }, + "name": "token-color-border-success", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "success" + ] + }, + "token-color-border-warning": { + "key": "{color.border.warning}", + "$type": "color", + "$value": "#fbeabf", + "group": "semantic", + "$modes": { + "default": "#fbeabf", + "cds-g0": "#d2a106", + "cds-g10": "#d2a106", + "cds-g90": "#b28600", + "cds-g100": "#b28600" + }, + "original": { + "$type": "color", + "$value": "{color.palette.amber-100}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.yellow.40}", + "cds-g10": "{carbon.color.yellow.40}", + "cds-g90": "{carbon.color.yellow.50}", + "cds-g100": "{carbon.color.yellow.50}" + }, + "key": "{color.border.warning}" + }, + "name": "token-color-border-warning", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "warning" + ] + }, + "token-color-border-critical": { + "key": "{color.border.critical}", + "$type": "color", + "$value": "#fbd4d4", + "group": "semantic", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "#ff8389", + "cds-g10": "#ff8389", + "cds-g90": "#fa4d56", + "cds-g100": "#fa4d56" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-100}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-100}", + "cds-g0": "{carbon.color.red.40}", + "cds-g10": "{carbon.color.red.40}", + "cds-g90": "{carbon.color.red.50}", + "cds-g100": "{carbon.color.red.50}" + }, + "key": "{color.border.critical}" + }, + "name": "token-color-border-critical", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "critical" + ] + }, + "token-color-focus-action-internal": { + "key": "{color.focus.action.internal}", + "$type": "color", + "$value": "#0c56e9", + "group": "semantic", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, + "key": "{color.focus.action.internal}" + }, + "name": "token-color-focus-action-internal", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "action", + "internal" + ] + }, + "token-color-focus-action-external": { + "key": "{color.focus.action.external}", + "$type": "color", + "$value": "#5990ff", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "#5990ff", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{color.focus.action.external}" + }, + "name": "token-color-focus-action-external", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "action", + "external" + ] + }, + "token-color-focus-critical-internal": { + "key": "{color.focus.critical.internal}", + "$type": "color", + "$value": "#c00005", + "group": "semantic", + "$modes": { + "default": "#c00005", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, + "key": "{color.focus.critical.internal}" + }, + "name": "token-color-focus-critical-internal", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "critical", + "internal" + ] + }, + "token-color-focus-critical-external": { + "key": "{color.focus.critical.external}", + "$type": "color", + "$value": "#dd7578", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#dd7578", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "#dd7578", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#dd7578", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{color.focus.critical.external}" + }, + "name": "token-color-focus-critical-external", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "critical", + "external" + ] + }, + "token-color-foreground-strong": { + "key": "{color.foreground.strong}", + "$type": "color", + "$value": "#0c0c0e", + "group": "semantic", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-700}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{color.foreground.strong}" + }, + "name": "token-color-foreground-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "strong" + ] + }, + "token-color-foreground-primary": { + "key": "{color.foreground.primary}", + "$type": "color", + "$value": "#3b3d45", + "group": "semantic", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-600}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-600}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{color.foreground.primary}" + }, + "name": "token-color-foreground-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "primary" + ] + }, + "token-color-foreground-faint": { + "key": "{color.foreground.faint}", + "$type": "color", + "$value": "#656a76", + "group": "semantic", + "$modes": { + "default": "#656a76", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{color.foreground.faint}" + }, + "name": "token-color-foreground-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "faint" + ] + }, + "token-color-foreground-high-contrast": { + "key": "{color.foreground.high-contrast}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{color.foreground.high-contrast}" + }, + "name": "token-color-foreground-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "high-contrast" + ] + }, + "token-color-foreground-disabled": { + "key": "{color.foreground.disabled}", + "$type": "color", + "$value": "#8c909c", + "group": "semantic", + "$modes": { + "default": "#8c909c", + "cds-g0": "rgba(22, 22, 22, 0.25)", + "cds-g10": "rgba(22, 22, 22, 0.25)", + "cds-g90": "rgba(244, 244, 244, 0.25)", + "cds-g100": "rgba(244, 244, 244, 0.25)" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-400}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textDisabled}", + "cds-g10": "{carbon.themes.g10.textDisabled}", + "cds-g90": "{carbon.themes.g90.textDisabled}", + "cds-g100": "{carbon.themes.g100.textDisabled}" + }, + "key": "{color.foreground.disabled}" + }, + "name": "token-color-foreground-disabled", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "disabled" + ] + }, + "token-color-foreground-action": { + "key": "{color.foreground.action}", + "$type": "color", + "$value": "#1060ff", + "group": "semantic", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#78a9ff", + "cds-g100": "#78a9ff" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.white.linkPrimary}", + "cds-g10": "{carbon.themes.g10.linkPrimary}", + "cds-g90": "{carbon.themes.g90.linkPrimary}", + "cds-g100": "{carbon.themes.g100.linkPrimary}" + }, + "key": "{color.foreground.action}" + }, + "name": "token-color-foreground-action", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "action" + ] + }, + "token-color-foreground-action-hover": { + "key": "{color.foreground.action-hover}", + "$type": "color", + "$value": "#0c56e9", + "group": "semantic", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, + "key": "{color.foreground.action-hover}" + }, + "name": "token-color-foreground-action-hover", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "action-hover" + ] + }, + "token-color-foreground-action-active": { + "key": "{color.foreground.action-active}", + "$type": "color", + "$value": "#0046d1", + "group": "semantic", + "$modes": { + "default": "#0046d1", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, + "key": "{color.foreground.action-active}" + }, + "name": "token-color-foreground-action-active", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "action-active" + ] + }, + "token-color-foreground-highlight": { + "key": "{color.foreground.highlight}", + "$type": "color", + "$value": "#a737ff", + "group": "semantic", + "$modes": { + "default": "#a737ff", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, + "original": { + "$type": "color", + "$value": "{color.palette.purple-200}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, + "key": "{color.foreground.highlight}" + }, + "name": "token-color-foreground-highlight", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "highlight" + ] + }, + "token-color-foreground-highlight-on-surface": { + "key": "{color.foreground.highlight-on-surface}", + "$type": "color", + "$value": "#911ced", + "group": "semantic", + "$modes": { + "default": "#911ced", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#d4bbff", + "cds-g100": "#d4bbff" + }, + "original": { + "$type": "color", + "$value": "{color.palette.purple-300}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-300}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.30}", + "cds-g100": "{carbon.color.purple.30}" + }, + "key": "{color.foreground.highlight-on-surface}" + }, + "name": "token-color-foreground-highlight-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "highlight-on-surface" + ] + }, + "token-color-foreground-highlight-high-contrast": { + "key": "{color.foreground.highlight-high-contrast}", + "$type": "color", + "$value": "#42215b", + "group": "semantic", + "$modes": { + "default": "#42215b", + "cds-g0": "#491d8b", + "cds-g10": "#491d8b", + "cds-g90": "#e8daff", + "cds-g100": "#d4bbff" + }, + "original": { + "$type": "color", + "$value": "{color.palette.purple-500}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-500}", + "cds-g0": "{carbon.color.purple.80}", + "cds-g10": "{carbon.color.purple.80}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.30}" + }, + "key": "{color.foreground.highlight-high-contrast}" + }, + "name": "token-color-foreground-highlight-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "highlight-high-contrast" + ] + }, + "token-color-foreground-success": { + "key": "{color.foreground.success}", + "$type": "color", + "$value": "#008a22", + "group": "semantic", + "$modes": { + "default": "#008a22", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#42be65", + "cds-g100": "#42be65" + }, + "original": { + "$type": "color", + "$value": "{color.palette.green-200}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-200}", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.40}", + "cds-g100": "{carbon.color.green.40}" + }, + "key": "{color.foreground.success}" + }, + "name": "token-color-foreground-success", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "success" + ] + }, + "token-color-foreground-success-on-surface": { + "key": "{color.foreground.success-on-surface}", + "$type": "color", + "$value": "#00781e", + "group": "semantic", + "$modes": { + "default": "#00781e", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#6fdc8c", + "cds-g100": "#6fdc8c" + }, + "original": { + "$type": "color", + "$value": "{color.palette.green-300}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-300}", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.30}", + "cds-g100": "{carbon.color.green.30}" + }, + "key": "{color.foreground.success-on-surface}" + }, + "name": "token-color-foreground-success-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "success-on-surface" + ] + }, + "token-color-foreground-success-high-contrast": { + "key": "{color.foreground.success-high-contrast}", + "$type": "color", + "$value": "#054220", + "group": "semantic", + "$modes": { + "default": "#054220", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{color.palette.green-500}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-500}", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, + "key": "{color.foreground.success-high-contrast}" + }, + "name": "token-color-foreground-success-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "success-high-contrast" + ] + }, + "token-color-foreground-warning": { + "key": "{color.foreground.warning}", + "$type": "color", + "$value": "#bb5a00", + "group": "semantic", + "$modes": { + "default": "#bb5a00", + "cds-g0": "#8e6a00", + "cds-g10": "#8e6a00", + "cds-g90": "#d2a106", + "cds-g100": "#d2a106" + }, + "original": { + "$type": "color", + "$value": "{color.palette.amber-200}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.yellow.60}", + "cds-g10": "{carbon.color.yellow.60}", + "cds-g90": "{carbon.color.yellow.40}", + "cds-g100": "{carbon.color.yellow.40}" + }, + "key": "{color.foreground.warning}" + }, + "name": "token-color-foreground-warning", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "warning" + ] + }, + "token-color-foreground-warning-on-surface": { + "key": "{color.foreground.warning-on-surface}", + "$type": "color", + "$value": "#9e4b00", + "group": "semantic", + "$modes": { + "default": "#9e4b00", + "cds-g0": "#684e00", + "cds-g10": "#684e00", + "cds-g90": "#f1c21b", + "cds-g100": "#f1c21b" + }, + "original": { + "$type": "color", + "$value": "{color.palette.amber-300}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-300}", + "cds-g0": "{carbon.color.yellow.70}", + "cds-g10": "{carbon.color.yellow.70}", + "cds-g90": "{carbon.color.yellow.30}", + "cds-g100": "{carbon.color.yellow.30}" + }, + "key": "{color.foreground.warning-on-surface}" + }, + "name": "token-color-foreground-warning-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "warning-on-surface" + ] + }, + "token-color-foreground-warning-high-contrast": { + "key": "{color.foreground.warning-high-contrast}", + "$type": "color", + "$value": "#542800", + "group": "semantic", + "$modes": { + "default": "#542800", + "cds-g0": "#483700", + "cds-g10": "#483700", + "cds-g90": "#fddc69", + "cds-g100": "#fddc69" + }, + "original": { + "$type": "color", + "$value": "{color.palette.amber-500}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-500}", + "cds-g0": "{carbon.color.yellow.80}", + "cds-g10": "{carbon.color.yellow.80}", + "cds-g90": "{carbon.color.yellow.20}", + "cds-g100": "{carbon.color.yellow.20}" + }, + "key": "{color.foreground.warning-high-contrast}" + }, + "name": "token-color-foreground-warning-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "warning-high-contrast" + ] + }, + "token-color-foreground-critical": { + "key": "{color.foreground.critical}", + "$type": "color", + "$value": "#e52228", + "group": "semantic", + "$modes": { + "default": "#e52228", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#ff8389", + "cds-g100": "#ff8389" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-200}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-200}", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.40}", + "cds-g100": "{carbon.color.red.40}" + }, + "key": "{color.foreground.critical}" + }, + "name": "token-color-foreground-critical", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "critical" + ] + }, + "token-color-foreground-critical-on-surface": { + "key": "{color.foreground.critical-on-surface}", + "$type": "color", + "$value": "#c00005", + "group": "semantic", + "$modes": { + "default": "#c00005", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffb3b8", + "cds-g100": "#ffb3b8" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.30}", + "cds-g100": "{carbon.color.red.30}" + }, + "key": "{color.foreground.critical-on-surface}" + }, + "name": "token-color-foreground-critical-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "critical-on-surface" + ] + }, + "token-color-foreground-critical-high-contrast": { + "key": "{color.foreground.critical-high-contrast}", + "$type": "color", + "$value": "#51130a", + "group": "semantic", + "$modes": { + "default": "#51130a", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-500}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-500}", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, + "key": "{color.foreground.critical-high-contrast}" + }, + "name": "token-color-foreground-critical-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "critical-high-contrast" + ] + }, + "token-color-page-primary": { + "key": "{color.page.primary}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, + "key": "{color.page.primary}" + }, + "name": "token-color-page-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "page", + "primary" + ] + }, + "token-color-page-faint": { + "key": "{color.page.faint}", + "$type": "color", + "$value": "#fafafa", + "group": "semantic", + "$modes": { + "default": "#fafafa", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, + "key": "{color.page.faint}" + }, + "name": "token-color-page-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "page", + "faint" + ] + }, + "token-color-surface-primary": { + "key": "{color.surface.primary}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, + "key": "{color.surface.primary}" + }, + "name": "token-color-surface-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "primary" + ] + }, + "token-color-surface-faint": { + "key": "{color.surface.faint}", + "$type": "color", + "$value": "#fafafa", + "group": "semantic", + "$modes": { + "default": "#fafafa", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, + "key": "{color.surface.faint}" + }, + "name": "token-color-surface-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "faint" + ] + }, + "token-color-surface-strong": { + "key": "{color.surface.strong}", + "$type": "color", + "$value": "#f1f2f3", + "group": "semantic", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-100}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerAccent01}", + "cds-g10": "{carbon.themes.g10.layerAccent01}", + "cds-g90": "{carbon.themes.g90.layerAccent01}", + "cds-g100": "{carbon.themes.g100.layerAccent01}" + }, + "key": "{color.surface.strong}" + }, + "name": "token-color-surface-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "strong" + ] + }, + "token-color-surface-high-contrast": { + "key": "{color.surface.high-contrast}", + "$type": "color", + "$value": "#0c0c0e", + "group": "semantic", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-700}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "key": "{color.surface.high-contrast}" + }, + "name": "token-color-surface-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "high-contrast" + ] + }, + "token-color-surface-interactive": { + "key": "{color.surface.interactive}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, + "key": "{color.surface.interactive}" + }, + "name": "token-color-surface-interactive", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive" + ] + }, + "token-color-surface-interactive-hover": { + "key": "{color.surface.interactive-hover}", + "$type": "color", + "$value": "#f1f2f3", + "group": "semantic", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "#e8e8e8", + "cds-g10": "#e8e8e8", + "cds-g90": "#474747", + "cds-g100": "#333333" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-100}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerHover01}", + "cds-g10": "{carbon.themes.g10.layerHover01}", + "cds-g90": "{carbon.themes.g90.layerHover01}", + "cds-g100": "{carbon.themes.g100.layerHover01}" + }, + "key": "{color.surface.interactive-hover}" + }, + "name": "token-color-surface-interactive-hover", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive-hover" + ] + }, + "token-color-surface-interactive-active": { + "key": "{color.surface.interactive-active}", + "$type": "color", + "$value": "#dedfe3", + "group": "semantic", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-200}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.white.layerActive01}", + "cds-g10": "{carbon.themes.g10.layerActive01}", + "cds-g90": "{carbon.themes.g90.layerActive01}", + "cds-g100": "{carbon.themes.g100.layerActive01}" + }, + "key": "{color.surface.interactive-active}" + }, + "name": "token-color-surface-interactive-active", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive-active" + ] + }, + "token-color-surface-interactive-disabled": { + "key": "{color.surface.interactive-disabled}", + "$type": "color", + "$value": "#fafafa", + "group": "semantic", + "$modes": { + "default": "#fafafa", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.color.gray.30}", + "cds-g10": "{carbon.color.gray.30}", + "cds-g90": "{carbon.color.gray.60}", + "cds-g100": "{carbon.color.gray.70}" + }, + "key": "{color.surface.interactive-disabled}" + }, + "name": "token-color-surface-interactive-disabled", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive-disabled" + ] + }, + "token-color-surface-action": { + "key": "{color.surface.action}", + "$type": "color", + "$value": "#f2f8ff", + "group": "semantic", + "$modes": { + "default": "#f2f8ff", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0f62fe", + "cds-g100": "#0043ce" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-50}", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.60}", + "cds-g100": "{carbon.color.blue.70}" + }, + "key": "{color.surface.action}" + }, + "name": "token-color-surface-action", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "action" + ] + }, + "token-color-surface-highlight": { + "key": "{color.surface.highlight}", + "$type": "color", + "$value": "#f9f2ff", + "group": "semantic", + "$modes": { + "default": "#f9f2ff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "{color.palette.purple-50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-50}", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, + "key": "{color.surface.highlight}" + }, + "name": "token-color-surface-highlight", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "highlight" + ] + }, + "token-color-surface-success": { + "key": "{color.surface.success}", + "$type": "color", + "$value": "#f2fbf6", + "group": "semantic", + "$modes": { + "default": "#f2fbf6", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "{color.palette.green-50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-50}", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, + "key": "{color.surface.success}" + }, + "name": "token-color-surface-success", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "success" + ] + }, + "token-color-surface-warning": { + "key": "{color.surface.warning}", + "$type": "color", + "$value": "#fff9e8", + "group": "semantic", + "$modes": { + "default": "#fff9e8", + "cds-g0": "#fcf4d6", + "cds-g10": "#fcf4d6", + "cds-g90": "#684e00", + "cds-g100": "#684e00" + }, + "original": { + "$type": "color", + "$value": "{color.palette.amber-50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-50}", + "cds-g0": "{carbon.color.yellow.10}", + "cds-g10": "{carbon.color.yellow.10}", + "cds-g90": "{carbon.color.yellow.70}", + "cds-g100": "{carbon.color.yellow.70}" + }, + "key": "{color.surface.warning}" + }, + "name": "token-color-surface-warning", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "warning" + ] + }, + "token-color-surface-critical": { + "key": "{color.surface.critical}", + "$type": "color", + "$value": "#fff5f5", + "group": "semantic", + "$modes": { + "default": "#fff5f5", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-50}", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, + "key": "{color.surface.critical}" + }, + "name": "token-color-surface-critical", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "critical" + ] + }, + "token-color-hashicorp-brand": { + "key": "{color.hashicorp.brand}", + "$type": "color", + "$value": "#000000", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.hashicorp-brand}", + "group": "branding", + "key": "{color.hashicorp.brand}" + }, + "name": "token-color-hashicorp-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "hashicorp", + "brand" + ] + }, + "token-color-boundary-brand": { + "key": "{color.boundary.brand}", + "$type": "color", + "$value": "#f24c53", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-brand}", + "group": "branding", + "key": "{color.boundary.brand}" + }, + "name": "token-color-boundary-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "brand" + ] + }, + "token-color-boundary-foreground": { + "key": "{color.boundary.foreground}", + "$type": "color", + "$value": "#cf2d32", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-500}", + "group": "branding", + "key": "{color.boundary.foreground}" + }, + "name": "token-color-boundary-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "foreground" + ] + }, + "token-color-boundary-surface": { + "key": "{color.boundary.surface}", + "$type": "color", + "$value": "#ffecec", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-50}", + "group": "branding", + "key": "{color.boundary.surface}" + }, + "name": "token-color-boundary-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "surface" + ] + }, + "token-color-boundary-border": { + "key": "{color.boundary.border}", + "$type": "color", + "$value": "#fbd7d8", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-100}", + "group": "branding", + "key": "{color.boundary.border}" + }, + "name": "token-color-boundary-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "border" + ] + }, + "token-color-boundary-gradient-primary-start": { + "key": "{color.boundary.gradient.primary.start}", + "$type": "color", + "$value": "#f97076", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-300}", + "group": "branding", + "key": "{color.boundary.gradient.primary.start}" + }, + "name": "token-color-boundary-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "primary", + "start" + ] + }, + "token-color-boundary-gradient-primary-stop": { + "key": "{color.boundary.gradient.primary.stop}", + "$type": "color", + "$value": "#db363b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-400}", + "group": "branding", + "key": "{color.boundary.gradient.primary.stop}" + }, + "name": "token-color-boundary-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "primary", + "stop" + ] + }, + "token-color-boundary-gradient-faint-start": { + "key": "{color.boundary.gradient.faint.start}", + "$type": "color", + "$value": "#fffafa", + "group": "branding", + "comment": "this is the 'boundary-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffafa", + "group": "branding", + "comment": "this is the 'boundary-50' value at 25% opacity on white", + "key": "{color.boundary.gradient.faint.start}" + }, + "name": "token-color-boundary-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "faint", + "start" + ] + }, + "token-color-boundary-gradient-faint-stop": { + "key": "{color.boundary.gradient.faint.stop}", + "$type": "color", + "$value": "#ffecec", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-50}", + "group": "branding", + "key": "{color.boundary.gradient.faint.stop}" + }, + "name": "token-color-boundary-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "faint", + "stop" + ] + }, + "token-color-consul-brand": { + "key": "{color.consul.brand}", + "$type": "color", + "$value": "#e03875", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-brand}", + "group": "branding", + "key": "{color.consul.brand}" + }, + "name": "token-color-consul-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "brand" + ] + }, + "token-color-consul-foreground": { + "key": "{color.consul.foreground}", + "$type": "color", + "$value": "#d01c5b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-500}", + "group": "branding", + "key": "{color.consul.foreground}" + }, + "name": "token-color-consul-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "foreground" + ] + }, + "token-color-consul-surface": { + "key": "{color.consul.surface}", + "$type": "color", + "$value": "#ffe9f1", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-50}", + "group": "branding", + "key": "{color.consul.surface}" + }, + "name": "token-color-consul-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "surface" + ] + }, + "token-color-consul-border": { + "key": "{color.consul.border}", + "$type": "color", + "$value": "#ffcede", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-100}", + "group": "branding", + "key": "{color.consul.border}" + }, + "name": "token-color-consul-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "border" + ] + }, + "token-color-consul-gradient-primary-start": { + "key": "{color.consul.gradient.primary.start}", + "$type": "color", + "$value": "#ff99be", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-300}", + "group": "branding", + "key": "{color.consul.gradient.primary.start}" + }, + "name": "token-color-consul-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "primary", + "start" + ] + }, + "token-color-consul-gradient-primary-stop": { + "key": "{color.consul.gradient.primary.stop}", + "$type": "color", + "$value": "#da306e", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-400}", + "group": "branding", + "key": "{color.consul.gradient.primary.stop}" + }, + "name": "token-color-consul-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "primary", + "stop" + ] + }, + "token-color-consul-gradient-faint-start": { + "key": "{color.consul.gradient.faint.start}", + "$type": "color", + "$value": "#fff9fb", + "group": "branding", + "comment": "this is the 'consul-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fff9fb", + "group": "branding", + "comment": "this is the 'consul-50' value at 25% opacity on white", + "key": "{color.consul.gradient.faint.start}" + }, + "name": "token-color-consul-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "faint", + "start" + ] + }, + "token-color-consul-gradient-faint-stop": { + "key": "{color.consul.gradient.faint.stop}", + "$type": "color", + "$value": "#ffe9f1", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-50}", + "group": "branding", + "key": "{color.consul.gradient.faint.stop}" + }, + "name": "token-color-consul-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "faint", + "stop" + ] + }, + "token-color-hcp-brand": { + "key": "{color.hcp.brand}", + "$type": "color", + "$value": "#000000", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.hcp-brand}", + "group": "branding", + "key": "{color.hcp.brand}" + }, + "name": "token-color-hcp-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "hcp", + "brand" + ] + }, + "token-color-nomad-brand": { + "key": "{color.nomad.brand}", + "$type": "color", + "$value": "#06d092", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-brand}", + "group": "branding", + "key": "{color.nomad.brand}" + }, + "name": "token-color-nomad-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "brand" + ] + }, + "token-color-nomad-foreground": { + "key": "{color.nomad.foreground}", + "$type": "color", + "$value": "#008661", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-500}", + "group": "branding", + "key": "{color.nomad.foreground}" + }, + "name": "token-color-nomad-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "foreground" + ] + }, + "token-color-nomad-surface": { + "key": "{color.nomad.surface}", + "$type": "color", + "$value": "#d3fdeb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-50}", + "group": "branding", + "key": "{color.nomad.surface}" + }, + "name": "token-color-nomad-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "surface" + ] + }, + "token-color-nomad-border": { + "key": "{color.nomad.border}", + "$type": "color", + "$value": "#bff3dd", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-100}", + "group": "branding", + "key": "{color.nomad.border}" + }, + "name": "token-color-nomad-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "border" + ] + }, + "token-color-nomad-gradient-primary-start": { + "key": "{color.nomad.gradient.primary.start}", + "$type": "color", + "$value": "#bff3dd", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-100}", + "group": "branding", + "key": "{color.nomad.gradient.primary.start}" + }, + "name": "token-color-nomad-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "primary", + "start" + ] + }, + "token-color-nomad-gradient-primary-stop": { + "key": "{color.nomad.gradient.primary.stop}", + "$type": "color", + "$value": "#60dea9", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-200}", + "group": "branding", + "key": "{color.nomad.gradient.primary.stop}" + }, + "name": "token-color-nomad-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "primary", + "stop" + ] + }, + "token-color-nomad-gradient-faint-start": { + "key": "{color.nomad.gradient.faint.start}", + "$type": "color", + "$value": "#f3fff9", + "group": "branding", + "comment": "this is the 'nomad-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#f3fff9", + "group": "branding", + "comment": "this is the 'nomad-50' value at 25% opacity on white", + "key": "{color.nomad.gradient.faint.start}" + }, + "name": "token-color-nomad-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "faint", + "start" + ] + }, + "token-color-nomad-gradient-faint-stop": { + "key": "{color.nomad.gradient.faint.stop}", + "$type": "color", + "$value": "#d3fdeb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-50}", + "group": "branding", + "key": "{color.nomad.gradient.faint.stop}" + }, + "name": "token-color-nomad-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "faint", + "stop" + ] + }, + "token-color-packer-brand": { + "key": "{color.packer.brand}", + "$type": "color", + "$value": "#02a8ef", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-brand}", + "group": "branding", + "key": "{color.packer.brand}" + }, + "name": "token-color-packer-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "brand" + ] + }, + "token-color-packer-foreground": { + "key": "{color.packer.foreground}", + "$type": "color", + "$value": "#007eb4", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-500}", + "group": "branding", + "key": "{color.packer.foreground}" + }, + "name": "token-color-packer-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "foreground" + ] + }, + "token-color-packer-surface": { + "key": "{color.packer.surface}", + "$type": "color", + "$value": "#d4f2ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-50}", + "group": "branding", + "key": "{color.packer.surface}" + }, + "name": "token-color-packer-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "surface" + ] + }, + "token-color-packer-border": { + "key": "{color.packer.border}", + "$type": "color", + "$value": "#b4e4ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-100}", + "group": "branding", + "key": "{color.packer.border}" + }, + "name": "token-color-packer-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "border" + ] + }, + "token-color-packer-gradient-primary-start": { + "key": "{color.packer.gradient.primary.start}", + "$type": "color", + "$value": "#b4e4ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-100}", + "group": "branding", + "key": "{color.packer.gradient.primary.start}" + }, + "name": "token-color-packer-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "primary", + "start" + ] + }, + "token-color-packer-gradient-primary-stop": { + "key": "{color.packer.gradient.primary.stop}", + "$type": "color", + "$value": "#63d0ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-200}", + "group": "branding", + "key": "{color.packer.gradient.primary.stop}" + }, + "name": "token-color-packer-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "primary", + "stop" + ] + }, + "token-color-packer-gradient-faint-start": { + "key": "{color.packer.gradient.faint.start}", + "$type": "color", + "$value": "#f3fcff", + "group": "branding", + "comment": "this is the 'packer-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#F3FCFF", + "group": "branding", + "comment": "this is the 'packer-50' value at 25% opacity on white", + "key": "{color.packer.gradient.faint.start}" + }, + "name": "token-color-packer-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "faint", + "start" + ] + }, + "token-color-packer-gradient-faint-stop": { + "key": "{color.packer.gradient.faint.stop}", + "$type": "color", + "$value": "#d4f2ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-50}", + "group": "branding", + "key": "{color.packer.gradient.faint.stop}" + }, + "name": "token-color-packer-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "faint", + "stop" + ] + }, + "token-color-terraform-brand": { + "key": "{color.terraform.brand}", + "$type": "color", + "$value": "#7b42bc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-brand}", + "group": "branding", + "key": "{color.terraform.brand}" + }, + "name": "token-color-terraform-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "brand" + ] + }, + "token-color-terraform-brand-on-dark": { + "key": "{color.terraform.brand-on-dark}", + "$type": "color", + "$value": "#a067da", + "group": "branding", + "comment": "this is an alternative brand color meant to be used on dark backgrounds", + "original": { + "$type": "color", + "$value": "#a067da", + "group": "branding", + "comment": "this is an alternative brand color meant to be used on dark backgrounds", + "key": "{color.terraform.brand-on-dark}" + }, + "name": "token-color-terraform-brand-on-dark", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "brand-on-dark" + ] + }, + "token-color-terraform-foreground": { + "key": "{color.terraform.foreground}", + "$type": "color", + "$value": "#773cb4", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-500}", + "group": "branding", + "key": "{color.terraform.foreground}" + }, + "name": "token-color-terraform-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "foreground" + ] + }, + "token-color-terraform-surface": { + "key": "{color.terraform.surface}", + "$type": "color", + "$value": "#f4ecff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-50}", + "group": "branding", + "key": "{color.terraform.surface}" + }, + "name": "token-color-terraform-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "surface" + ] + }, + "token-color-terraform-border": { + "key": "{color.terraform.border}", + "$type": "color", + "$value": "#ebdbfc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-100}", + "group": "branding", + "key": "{color.terraform.border}" + }, + "name": "token-color-terraform-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "border" + ] + }, + "token-color-terraform-gradient-primary-start": { + "key": "{color.terraform.gradient.primary.start}", + "$type": "color", + "$value": "#bb8deb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-300}", + "group": "branding", + "key": "{color.terraform.gradient.primary.start}" + }, + "name": "token-color-terraform-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "primary", + "start" + ] + }, + "token-color-terraform-gradient-primary-stop": { + "key": "{color.terraform.gradient.primary.stop}", + "$type": "color", + "$value": "#844fba", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-400}", + "group": "branding", + "key": "{color.terraform.gradient.primary.stop}" + }, + "name": "token-color-terraform-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "primary", + "stop" + ] + }, + "token-color-terraform-gradient-faint-start": { + "key": "{color.terraform.gradient.faint.start}", + "$type": "color", + "$value": "#fcfaff", + "group": "branding", + "comment": "this is the 'terraform-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fcfaff", + "group": "branding", + "comment": "this is the 'terraform-50' value at 25% opacity on white", + "key": "{color.terraform.gradient.faint.start}" + }, + "name": "token-color-terraform-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "faint", + "start" + ] + }, + "token-color-terraform-gradient-faint-stop": { + "key": "{color.terraform.gradient.faint.stop}", + "$type": "color", + "$value": "#f4ecff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-50}", + "group": "branding", + "key": "{color.terraform.gradient.faint.stop}" + }, + "name": "token-color-terraform-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "faint", + "stop" + ] + }, + "token-color-vagrant-brand": { + "key": "{color.vagrant.brand}", + "$type": "color", + "$value": "#1868f2", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-brand}", + "group": "branding", + "key": "{color.vagrant.brand}" + }, + "name": "token-color-vagrant-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "brand" + ] + }, + "token-color-vagrant-foreground": { + "key": "{color.vagrant.foreground}", + "$type": "color", + "$value": "#1c61d8", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-500}", + "group": "branding", + "key": "{color.vagrant.foreground}" + }, + "name": "token-color-vagrant-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "foreground" + ] + }, + "token-color-vagrant-surface": { + "key": "{color.vagrant.surface}", + "$type": "color", + "$value": "#d6ebff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-50}", + "group": "branding", + "key": "{color.vagrant.surface}" + }, + "name": "token-color-vagrant-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "surface" + ] + }, + "token-color-vagrant-border": { + "key": "{color.vagrant.border}", + "$type": "color", + "$value": "#c7dbfc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-100}", + "group": "branding", + "key": "{color.vagrant.border}" + }, + "name": "token-color-vagrant-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "border" + ] + }, + "token-color-vagrant-gradient-primary-start": { + "key": "{color.vagrant.gradient.primary.start}", + "$type": "color", + "$value": "#639cff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-300}", + "group": "branding", + "key": "{color.vagrant.gradient.primary.start}" + }, + "name": "token-color-vagrant-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "primary", + "start" + ] + }, + "token-color-vagrant-gradient-primary-stop": { + "key": "{color.vagrant.gradient.primary.stop}", + "$type": "color", + "$value": "#2e71e5", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-400}", + "group": "branding", + "key": "{color.vagrant.gradient.primary.stop}" + }, + "name": "token-color-vagrant-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "primary", + "stop" + ] + }, + "token-color-vagrant-gradient-faint-start": { + "key": "{color.vagrant.gradient.faint.start}", + "$type": "color", + "$value": "#f4faff", + "group": "branding", + "comment": "this is the 'vagrant-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#f4faff", + "group": "branding", + "comment": "this is the 'vagrant-50' value at 25% opacity on white", + "key": "{color.vagrant.gradient.faint.start}" + }, + "name": "token-color-vagrant-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "faint", + "start" + ] + }, + "token-color-vagrant-gradient-faint-stop": { + "key": "{color.vagrant.gradient.faint.stop}", + "$type": "color", + "$value": "#d6ebff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-50}", + "group": "branding", + "key": "{color.vagrant.gradient.faint.stop}" + }, + "name": "token-color-vagrant-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "faint", + "stop" + ] + }, + "token-color-vault-radar-brand": { + "key": "{color.vault-radar.brand}", + "$type": "color", + "$value": "#ffcf25", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-brand}", + "group": "branding", + "key": "{color.vault-radar.brand}" + }, + "name": "token-color-vault-radar-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "brand" + ] + }, + "token-color-vault-radar-brand-alt": { + "key": "{color.vault-radar.brand-alt}", + "$type": "color", + "$value": "#000000", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work", + "original": { + "$type": "color", + "$value": "#000", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work", + "key": "{color.vault-radar.brand-alt}" + }, + "name": "token-color-vault-radar-brand-alt", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "brand-alt" + ] + }, + "token-color-vault-radar-foreground": { + "key": "{color.vault-radar.foreground}", + "$type": "color", + "$value": "#9a6f00", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-500}", + "group": "branding", + "key": "{color.vault-radar.foreground}" + }, + "name": "token-color-vault-radar-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "foreground" + ] + }, + "token-color-vault-radar-surface": { + "key": "{color.vault-radar.surface}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-50}", + "group": "branding", + "key": "{color.vault-radar.surface}" + }, + "name": "token-color-vault-radar-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "surface" + ] + }, + "token-color-vault-radar-border": { + "key": "{color.vault-radar.border}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-100}", + "group": "branding", + "key": "{color.vault-radar.border}" + }, + "name": "token-color-vault-radar-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "border" + ] + }, + "token-color-vault-radar-gradient-primary-start": { + "key": "{color.vault-radar.gradient.primary.start}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-100}", + "group": "branding", + "key": "{color.vault-radar.gradient.primary.start}" + }, + "name": "token-color-vault-radar-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "primary", + "start" + ] + }, + "token-color-vault-radar-gradient-primary-stop": { + "key": "{color.vault-radar.gradient.primary.stop}", + "$type": "color", + "$value": "#ffe543", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-200}", + "group": "branding", + "key": "{color.vault-radar.gradient.primary.stop}" + }, + "name": "token-color-vault-radar-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "primary", + "stop" + ] + }, + "token-color-vault-radar-gradient-faint-start": { + "key": "{color.vault-radar.gradient.faint.start}", + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-radar-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-radar-50' value at 25% opacity on white", + "key": "{color.vault-radar.gradient.faint.start}" + }, + "name": "token-color-vault-radar-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "faint", + "start" + ] + }, + "token-color-vault-radar-gradient-faint-stop": { + "key": "{color.vault-radar.gradient.faint.stop}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-50}", + "group": "branding", + "key": "{color.vault-radar.gradient.faint.stop}" + }, + "name": "token-color-vault-radar-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "faint", + "stop" + ] + }, + "token-color-vault-secrets-brand": { + "key": "{color.vault-secrets.brand}", + "$type": "color", + "$value": "#ffcf25", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-brand}", + "group": "branding", + "key": "{color.vault-secrets.brand}" + }, + "name": "token-color-vault-secrets-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "brand" + ] + }, + "token-color-vault-secrets-brand-alt": { + "key": "{color.vault-secrets.brand-alt}", + "group": "branding", + "$type": "color", + "$value": "#000000", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work", + "original": { + "group": "branding", + "$type": "color", + "$value": "#000", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work", + "key": "{color.vault-secrets.brand-alt}" + }, + "name": "token-color-vault-secrets-brand-alt", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "brand-alt" + ] + }, + "token-color-vault-secrets-foreground": { + "key": "{color.vault-secrets.foreground}", + "$type": "color", + "$value": "#9a6f00", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-500}", + "group": "branding", + "key": "{color.vault-secrets.foreground}" + }, + "name": "token-color-vault-secrets-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "foreground" + ] + }, + "token-color-vault-secrets-surface": { + "key": "{color.vault-secrets.surface}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-50}", + "group": "branding", + "key": "{color.vault-secrets.surface}" + }, + "name": "token-color-vault-secrets-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "surface" + ] + }, + "token-color-vault-secrets-border": { + "key": "{color.vault-secrets.border}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-100}", + "group": "branding", + "key": "{color.vault-secrets.border}" + }, + "name": "token-color-vault-secrets-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "border" + ] + }, + "token-color-vault-secrets-gradient-primary-start": { + "key": "{color.vault-secrets.gradient.primary.start}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-100}", + "group": "branding", + "key": "{color.vault-secrets.gradient.primary.start}" + }, + "name": "token-color-vault-secrets-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "primary", + "start" + ] + }, + "token-color-vault-secrets-gradient-primary-stop": { + "key": "{color.vault-secrets.gradient.primary.stop}", + "$type": "color", + "$value": "#ffe543", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-200}", + "group": "branding", + "key": "{color.vault-secrets.gradient.primary.stop}" + }, + "name": "token-color-vault-secrets-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "primary", + "stop" + ] + }, + "token-color-vault-secrets-gradient-faint-start": { + "key": "{color.vault-secrets.gradient.faint.start}", + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-secrets-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-secrets-50' value at 25% opacity on white", + "key": "{color.vault-secrets.gradient.faint.start}" + }, + "name": "token-color-vault-secrets-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "faint", + "start" + ] + }, + "token-color-vault-secrets-gradient-faint-stop": { + "key": "{color.vault-secrets.gradient.faint.stop}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-50}", + "group": "branding", + "key": "{color.vault-secrets.gradient.faint.stop}" + }, + "name": "token-color-vault-secrets-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "faint", + "stop" + ] + }, + "token-color-vault-brand": { + "key": "{color.vault.brand}", + "$type": "color", + "$value": "#ffcf25", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-brand}", + "group": "branding", + "key": "{color.vault.brand}" + }, + "name": "token-color-vault-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "brand" + ] + }, + "token-color-vault-brand-alt": { + "key": "{color.vault.brand-alt}", + "$type": "color", + "$value": "#000000", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work", + "original": { + "$type": "color", + "$value": "#000", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work", + "key": "{color.vault.brand-alt}" + }, + "name": "token-color-vault-brand-alt", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "brand-alt" + ] + }, + "token-color-vault-foreground": { + "key": "{color.vault.foreground}", + "$type": "color", + "$value": "#9a6f00", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-500}", + "group": "branding", + "key": "{color.vault.foreground}" + }, + "name": "token-color-vault-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "foreground" + ] + }, + "token-color-vault-surface": { + "key": "{color.vault.surface}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-50}", + "group": "branding", + "key": "{color.vault.surface}" + }, + "name": "token-color-vault-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "surface" + ] + }, + "token-color-vault-border": { + "key": "{color.vault.border}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-100}", + "group": "branding", + "key": "{color.vault.border}" + }, + "name": "token-color-vault-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "border" + ] + }, + "token-color-vault-gradient-primary-start": { + "key": "{color.vault.gradient.primary.start}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-100}", + "group": "branding", + "key": "{color.vault.gradient.primary.start}" + }, + "name": "token-color-vault-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "primary", + "start" + ] + }, + "token-color-vault-gradient-primary-stop": { + "key": "{color.vault.gradient.primary.stop}", + "$type": "color", + "$value": "#ffe543", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-200}", + "group": "branding", + "key": "{color.vault.gradient.primary.stop}" + }, + "name": "token-color-vault-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "primary", + "stop" + ] + }, + "token-color-vault-gradient-faint-start": { + "key": "{color.vault.gradient.faint.start}", + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-50' value at 25% opacity on white", + "key": "{color.vault.gradient.faint.start}" + }, + "name": "token-color-vault-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "faint", + "start" + ] + }, + "token-color-vault-gradient-faint-stop": { + "key": "{color.vault.gradient.faint.stop}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-50}", + "group": "branding", + "key": "{color.vault.gradient.faint.stop}" + }, + "name": "token-color-vault-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "faint", + "stop" + ] + }, + "token-color-waypoint-brand": { + "key": "{color.waypoint.brand}", + "$type": "color", + "$value": "#14c6cb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-brand}", + "group": "branding", + "key": "{color.waypoint.brand}" + }, + "name": "token-color-waypoint-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "brand" + ] + }, + "token-color-waypoint-foreground": { + "key": "{color.waypoint.foreground}", + "$type": "color", + "$value": "#008196", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-500}", + "group": "branding", + "key": "{color.waypoint.foreground}" + }, + "name": "token-color-waypoint-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "foreground" + ] + }, + "token-color-waypoint-surface": { + "key": "{color.waypoint.surface}", + "$type": "color", + "$value": "#e0fcff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-50}", + "group": "branding", + "key": "{color.waypoint.surface}" + }, + "name": "token-color-waypoint-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "surface" + ] + }, + "token-color-waypoint-border": { + "key": "{color.waypoint.border}", + "$type": "color", + "$value": "#cbf1f3", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-100}", + "group": "branding", + "key": "{color.waypoint.border}" + }, + "name": "token-color-waypoint-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "border" + ] + }, + "token-color-waypoint-gradient-primary-start": { + "key": "{color.waypoint.gradient.primary.start}", + "$type": "color", + "$value": "#cbf1f3", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-100}", + "group": "branding", + "key": "{color.waypoint.gradient.primary.start}" + }, + "name": "token-color-waypoint-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "primary", + "start" + ] + }, + "token-color-waypoint-gradient-primary-stop": { + "key": "{color.waypoint.gradient.primary.stop}", + "$type": "color", + "$value": "#62d4dc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-200}", + "group": "branding", + "key": "{color.waypoint.gradient.primary.stop}" + }, + "name": "token-color-waypoint-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "primary", + "stop" + ] + }, + "token-color-waypoint-gradient-faint-start": { + "key": "{color.waypoint.gradient.faint.start}", + "$type": "color", + "$value": "#f6feff", + "group": "branding", + "comment": "this is the 'waypoint-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#f6feff", + "group": "branding", + "comment": "this is the 'waypoint-50' value at 25% opacity on white", + "key": "{color.waypoint.gradient.faint.start}" + }, + "name": "token-color-waypoint-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "faint", + "start" + ] + }, + "token-color-waypoint-gradient-faint-stop": { + "key": "{color.waypoint.gradient.faint.stop}", + "$type": "color", + "$value": "#e0fcff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-50}", + "group": "branding", + "key": "{color.waypoint.gradient.faint.stop}" + }, + "name": "token-color-waypoint-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "faint", + "stop" + ] + }, + "token-elevation-inset-box-shadow": { + "key": "{elevation.inset.box-shadow}", + "$value": "inset 0px 1px 2px 1px #656a761a", + "$modes": { + "default": "inset 0px 1px 2px 1px #656a761a", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "{elevation.inset.box-shadow-01}", + "$modes": { + "default": "{elevation.inset.box-shadow-01}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.inset.box-shadow}" + }, + "name": "token-elevation-inset-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "inset", + "box-shadow" + ] + }, + "token-elevation-low-box-shadow": { + "key": "{elevation.low.box-shadow}", + "$value": "0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d", + "$modes": { + "default": "0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "{elevation.low.box-shadow-01}, {elevation.low.box-shadow-02}", + "$modes": { + "default": "{elevation.low.box-shadow-01}, {elevation.low.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.low.box-shadow}" + }, + "name": "token-elevation-low-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "low", + "box-shadow" + ] + }, + "token-elevation-mid-box-shadow": { + "key": "{elevation.mid.box-shadow}", + "$value": "0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633", + "$modes": { + "default": "0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "{elevation.mid.box-shadow-01}, {elevation.mid.box-shadow-02}", + "$modes": { + "default": "{elevation.mid.box-shadow-01}, {elevation.mid.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.mid.box-shadow}" + }, + "name": "token-elevation-mid-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "mid", + "box-shadow" + ] + }, + "token-elevation-high-box-shadow": { + "key": "{elevation.high.box-shadow}", + "$value": "0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633", + "$modes": { + "default": "0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "{elevation.high.box-shadow-01}, {elevation.high.box-shadow-02}", + "$modes": { + "default": "{elevation.high.box-shadow-01}, {elevation.high.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.high.box-shadow}" + }, + "name": "token-elevation-high-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "high", + "box-shadow" + ] + }, + "token-elevation-higher-box-shadow": { + "key": "{elevation.higher.box-shadow}", + "$value": "0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640", + "$modes": { + "default": "0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "{elevation.higher.box-shadow-01}, {elevation.higher.box-shadow-02}", + "$modes": { + "default": "{elevation.higher.box-shadow-01}, {elevation.higher.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.higher.box-shadow}" + }, + "name": "token-elevation-higher-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "higher", + "box-shadow" + ] + }, + "token-elevation-overlay-box-shadow": { + "key": "{elevation.overlay.box-shadow}", + "$value": "0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559", + "$modes": { + "default": "0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "{elevation.overlay.box-shadow-01}, {elevation.overlay.box-shadow-02}", + "$modes": { + "default": "{elevation.overlay.box-shadow-01}, {elevation.overlay.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.overlay.box-shadow}" + }, + "name": "token-elevation-overlay-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "overlay", + "box-shadow" + ] + }, + "token-surface-inset-box-shadow": { + "key": "{surface.inset.box-shadow}", + "$value": "inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a", + "$modes": { + "default": "inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "{elevation.inset.box-shadow-border}, {elevation.inset.box-shadow}", + "$modes": { + "default": "{elevation.inset.box-shadow-border}, {elevation.inset.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.inset.box-shadow}" + }, + "name": "token-surface-inset-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "inset", + "box-shadow" + ] + }, + "token-surface-base-box-shadow": { + "key": "{surface.base.box-shadow}", + "$value": "0 0 0 1px #656a7633", + "$modes": { + "default": "0 0 0 1px #656a7633", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "{elevation.base.box-shadow-border}", + "$modes": { + "default": "{elevation.base.box-shadow-border}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.base.box-shadow}" + }, + "name": "token-surface-base-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "base", + "box-shadow" + ] + }, + "token-surface-low-box-shadow": { + "key": "{surface.low.box-shadow}", + "$value": "0 0 0 1px #656a7626, 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d", + "$modes": { + "default": "0 0 0 1px #656a7626, 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "{elevation.low.box-shadow-border}, {elevation.low.box-shadow}", + "$modes": { + "default": "{elevation.low.box-shadow-border}, {elevation.low.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.low.box-shadow}" + }, + "name": "token-surface-low-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "low", + "box-shadow" + ] + }, + "token-surface-mid-box-shadow": { + "key": "{surface.mid.box-shadow}", + "$value": "0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633", + "$modes": { + "default": "0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "{elevation.mid.box-shadow-border}, {elevation.mid.box-shadow}", + "$modes": { + "default": "{elevation.mid.box-shadow-border}, {elevation.mid.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.mid.box-shadow}" + }, + "name": "token-surface-mid-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "mid", + "box-shadow" + ] + }, + "token-surface-high-box-shadow": { + "key": "{surface.high.box-shadow}", + "$value": "0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633", + "$modes": { + "default": "0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "{elevation.high.box-shadow-border}, {elevation.high.box-shadow}", + "$modes": { + "default": "{elevation.high.box-shadow-border}, {elevation.high.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.high.box-shadow}" + }, + "name": "token-surface-high-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "high", + "box-shadow" + ] + }, + "token-surface-higher-box-shadow": { + "key": "{surface.higher.box-shadow}", + "$value": "0 0 0 1px #656a7633, 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640", + "$modes": { + "default": "0 0 0 1px #656a7633, 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "{elevation.higher.box-shadow-border}, {elevation.higher.box-shadow}", + "$modes": { + "default": "{elevation.higher.box-shadow-border}, {elevation.higher.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.higher.box-shadow}" + }, + "name": "token-surface-higher-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "higher", + "box-shadow" + ] + }, + "token-surface-overlay-box-shadow": { + "key": "{surface.overlay.box-shadow}", + "$value": "0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559", + "$modes": { + "default": "0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "{elevation.overlay.box-shadow-border}, {elevation.overlay.box-shadow}", + "$modes": { + "default": "{elevation.overlay.box-shadow-border}, {elevation.overlay.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.overlay.box-shadow}" + }, + "name": "token-surface-overlay-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "overlay", + "box-shadow" + ] + }, + "token-focus-ring-action-box-shadow": { + "key": "{focus-ring.action.box-shadow}", + "$value": "inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff", + "original": { + "$value": "{focus-ring.action.internal-box-shadow}, {focus-ring.action.external-box-shadow}", + "key": "{focus-ring.action.box-shadow}" + }, + "name": "token-focus-ring-action-box-shadow", + "attributes": { + "category": "focus-ring" + }, + "path": [ + "focus-ring", + "action", + "box-shadow" + ] + }, + "token-focus-ring-critical-box-shadow": { + "key": "{focus-ring.critical.box-shadow}", + "$value": "inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578", + "original": { + "$value": "{focus-ring.critical.internal-box-shadow}, {focus-ring.critical.external-box-shadow}", + "key": "{focus-ring.critical.box-shadow}" + }, + "name": "token-focus-ring-critical-box-shadow", + "attributes": { + "category": "focus-ring" + }, + "path": [ + "focus-ring", + "critical", + "box-shadow" + ] + }, + "token-app-footer-focus-color-action-internal": { + "key": "{app-footer.focus.color.action.internal}", + "$type": "color", + "$value": "var(--token-color-focus-action-internal)", + "$modes": { + "default": "var(--token-color-focus-action-internal)", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "var(--token-color-focus-action-internal)", + "$modes": { + "default": "var(--token-color-focus-action-internal)", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{app-footer.focus.color.action.internal}" + }, + "name": "token-app-footer-focus-color-action-internal", + "attributes": { + "category": "app-footer" + }, + "path": [ + "app-footer", + "focus", + "color", + "action", + "internal" + ] + }, + "token-app-header-height": { + "key": "{app-header.height}", + "$type": "dimension", + "$value": "60px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "60", + "unit": "px", + "key": "{app-header.height}" + }, + "name": "token-app-header-height", + "attributes": { + "category": "app-header" + }, + "path": [ + "app-header", + "height" + ] + }, + "token-app-header-home-link-size": { + "key": "{app-header.home-link.size}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{app-header.home-link.size}" + }, + "name": "token-app-header-home-link-size", + "attributes": { + "category": "app-header" + }, + "path": [ + "app-header", + "home-link", + "size" + ] + }, + "token-app-header-logo-size": { + "key": "{app-header.logo.size}", + "$type": "dimension", + "$value": "28px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "28", + "unit": "px", + "key": "{app-header.logo.size}" + }, + "name": "token-app-header-logo-size", + "attributes": { + "category": "app-header" + }, + "path": [ + "app-header", + "logo", + "size" + ] + }, + "token-app-side-nav-wrapper-border-width": { + "key": "{app-side-nav.wrapper.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{app-side-nav.wrapper.border.width}" + }, + "name": "token-app-side-nav-wrapper-border-width", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "border", + "width" + ] + }, + "token-app-side-nav-wrapper-border-color": { + "key": "{app-side-nav.wrapper.border.color}", + "$type": "color", + "$value": "var(--token-color-palette-neutral-200)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-palette-neutral-200)", + "group": "components", + "key": "{app-side-nav.wrapper.border.color}" + }, + "name": "token-app-side-nav-wrapper-border-color", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "border", + "color" + ] + }, + "token-app-side-nav-wrapper-padding-horizontal": { + "key": "{app-side-nav.wrapper.padding.horizontal}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.horizontal}" + }, + "name": "token-app-side-nav-wrapper-padding-horizontal", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "horizontal" + ] + }, + "token-app-side-nav-wrapper-padding-vertical": { + "key": "{app-side-nav.wrapper.padding.vertical}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.vertical}" + }, + "name": "token-app-side-nav-wrapper-padding-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "vertical" + ] + }, + "token-app-side-nav-wrapper-padding-horizontal-minimized": { + "key": "{app-side-nav.wrapper.padding.horizontal-minimized}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.horizontal-minimized}" + }, + "name": "token-app-side-nav-wrapper-padding-horizontal-minimized", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "horizontal-minimized" + ] + }, + "token-app-side-nav-wrapper-padding-vertical-minimized": { + "key": "{app-side-nav.wrapper.padding.vertical-minimized}", + "$type": "dimension", + "$value": "22px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "22", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.vertical-minimized}" + }, + "name": "token-app-side-nav-wrapper-padding-vertical-minimized", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "vertical-minimized" + ] + }, + "token-app-side-nav-toggle-button-border-radius": { + "key": "{app-side-nav.toggle-button.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{app-side-nav.toggle-button.border.radius}" + }, + "name": "token-app-side-nav-toggle-button-border-radius", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "toggle-button", + "border", + "radius" + ] + }, + "token-app-side-nav-header-home-link-padding": { + "key": "{app-side-nav.header.home-link.padding}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{app-side-nav.header.home-link.padding}" + }, + "name": "token-app-side-nav-header-home-link-padding", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "home-link", + "padding" + ] + }, + "token-app-side-nav-header-home-link-logo-size": { + "key": "{app-side-nav.header.home-link.logo-size}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{app-side-nav.header.home-link.logo-size}" + }, + "name": "token-app-side-nav-header-home-link-logo-size", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "home-link", + "logo-size" + ] + }, + "token-app-side-nav-header-home-link-logo-size-minimized": { + "key": "{app-side-nav.header.home-link.logo-size-minimized}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{app-side-nav.header.home-link.logo-size-minimized}" + }, + "name": "token-app-side-nav-header-home-link-logo-size-minimized", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "home-link", + "logo-size-minimized" + ] + }, + "token-app-side-nav-header-actions-spacing": { + "key": "{app-side-nav.header.actions.spacing}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.header.actions.spacing}" + }, + "name": "token-app-side-nav-header-actions-spacing", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "actions", + "spacing" + ] + }, + "token-app-side-nav-body-list-margin-vertical": { + "key": "{app-side-nav.body.list.margin-vertical}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{app-side-nav.body.list.margin-vertical}" + }, + "name": "token-app-side-nav-body-list-margin-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list", + "margin-vertical" + ] + }, + "token-app-side-nav-body-list-item-height": { + "key": "{app-side-nav.body.list-item.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{app-side-nav.body.list-item.height}" + }, + "name": "token-app-side-nav-body-list-item-height", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "height" + ] + }, + "token-app-side-nav-body-list-item-padding-horizontal": { + "key": "{app-side-nav.body.list-item.padding.horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.body.list-item.padding.horizontal}" + }, + "name": "token-app-side-nav-body-list-item-padding-horizontal", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "padding", + "horizontal" + ] + }, + "token-app-side-nav-body-list-item-padding-vertical": { + "key": "{app-side-nav.body.list-item.padding.vertical}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{app-side-nav.body.list-item.padding.vertical}" + }, + "name": "token-app-side-nav-body-list-item-padding-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "padding", + "vertical" + ] + }, + "token-app-side-nav-body-list-item-spacing-vertical": { + "key": "{app-side-nav.body.list-item.spacing-vertical}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{app-side-nav.body.list-item.spacing-vertical}" + }, + "name": "token-app-side-nav-body-list-item-spacing-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "spacing-vertical" + ] + }, + "token-app-side-nav-body-list-item-content-spacing-horizontal": { + "key": "{app-side-nav.body.list-item.content-spacing-horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.body.list-item.content-spacing-horizontal}" + }, + "name": "token-app-side-nav-body-list-item-content-spacing-horizontal", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "content-spacing-horizontal" + ] + }, + "token-app-side-nav-body-list-item-border-radius": { + "key": "{app-side-nav.body.list-item.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{app-side-nav.body.list-item.border-radius}" + }, + "name": "token-app-side-nav-body-list-item-border-radius", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "border-radius" + ] + }, + "token-app-side-nav-color-foreground-primary": { + "key": "{app-side-nav.color.foreground.primary}", + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "key": "{app-side-nav.color.foreground.primary}" + }, + "name": "token-app-side-nav-color-foreground-primary", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "foreground", + "primary" + ] + }, + "token-app-side-nav-color-foreground-strong": { + "key": "{app-side-nav.color.foreground.strong}", + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "key": "{app-side-nav.color.foreground.strong}" + }, + "name": "token-app-side-nav-color-foreground-strong", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "foreground", + "strong" + ] + }, + "token-app-side-nav-color-foreground-faint": { + "key": "{app-side-nav.color.foreground.faint}", + "$type": "color", + "$value": "var(--token-color-foreground-faint)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-foreground-faint)", + "group": "components", + "key": "{app-side-nav.color.foreground.faint}" + }, + "name": "token-app-side-nav-color-foreground-faint", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "foreground", + "faint" + ] + }, + "token-app-side-nav-color-surface-primary": { + "key": "{app-side-nav.color.surface.primary}", + "$type": "color", + "$value": "var(--token-color-surface-faint)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-surface-faint)", + "group": "components", + "key": "{app-side-nav.color.surface.primary}" + }, + "name": "token-app-side-nav-color-surface-primary", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "surface", + "primary" + ] + }, + "token-app-side-nav-color-surface-interactive-hover": { + "key": "{app-side-nav.color.surface.interactive-hover}", + "$type": "color", + "$value": "var(--token-color-surface-interactive-hover)", + "group": "semantic", + "original": { + "$type": "color", + "$value": "var(--token-color-surface-interactive-hover)", + "group": "semantic", + "key": "{app-side-nav.color.surface.interactive-hover}" + }, + "name": "token-app-side-nav-color-surface-interactive-hover", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "surface", + "interactive-hover" + ] + }, + "token-app-side-nav-color-surface-interactive-active": { + "key": "{app-side-nav.color.surface.interactive-active}", + "$type": "color", + "$value": "var(--token-color-palette-neutral-300)", + "group": "semantic", + "original": { + "$type": "color", + "$value": "var(--token-color-palette-neutral-300)", + "group": "semantic", + "key": "{app-side-nav.color.surface.interactive-active}" + }, + "name": "token-app-side-nav-color-surface-interactive-active", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "surface", + "interactive-active" + ] + }, + "token-badge-count-padding-horizontal-small": { + "key": "{badge-count.padding.horizontal.small}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge-count.padding.horizontal.small}" + }, + "name": "token-badge-count-padding-horizontal-small", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "small" + ] + }, + "token-badge-count-padding-horizontal-medium": { + "key": "{badge-count.padding.horizontal.medium}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge-count.padding.horizontal.medium}" + }, + "name": "token-badge-count-padding-horizontal-medium", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "medium" + ] + }, + "token-badge-count-padding-horizontal-large": { + "key": "{badge-count.padding.horizontal.large}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "14", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge-count.padding.horizontal.large}" + }, + "name": "token-badge-count-padding-horizontal-large", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "large" + ] + }, + "token-badge-height-small": { + "key": "{badge.height.small}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "18", + "cds-g10": "18", + "cds-g90": "18", + "cds-g100": "18" + }, + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "18", + "cds-g10": "18", + "cds-g90": "18", + "cds-g100": "18" + }, + "key": "{badge.height.small}" + }, + "name": "token-badge-height-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "small" + ] + }, + "token-badge-height-medium": { + "key": "{badge.height.medium}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{badge.height.medium}" + }, + "name": "token-badge-height-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "medium" + ] + }, + "token-badge-height-large": { + "key": "{badge.height.large}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{badge.height.large}" + }, + "name": "token-badge-height-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "large" + ] + }, + "token-badge-padding-horizontal-small": { + "key": "{badge.padding.horizontal.small}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge.padding.horizontal.small}" + }, + "name": "token-badge-padding-horizontal-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "small" + ] + }, + "token-badge-padding-horizontal-medium": { + "key": "{badge.padding.horizontal.medium}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge.padding.horizontal.medium}" + }, + "name": "token-badge-padding-horizontal-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "medium" + ] + }, + "token-badge-padding-horizontal-large": { + "key": "{badge.padding.horizontal.large}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.padding.horizontal.large}" + }, + "name": "token-badge-padding-horizontal-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "large" + ] + }, + "token-badge-padding-vertical-small": { + "key": "{badge.padding.vertical.small}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "$modes": { + "default": "2", + "cds-g0": "1", + "cds-g10": "1", + "cds-g90": "1", + "cds-g100": "1" + }, + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "$modes": { + "default": "2", + "cds-g0": "1", + "cds-g10": "1", + "cds-g90": "1", + "cds-g100": "1" + }, + "key": "{badge.padding.vertical.small}" + }, + "name": "token-badge-padding-vertical-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "small" + ] + }, + "token-badge-padding-vertical-medium": { + "key": "{badge.padding.vertical.medium}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{badge.padding.vertical.medium}" + }, + "name": "token-badge-padding-vertical-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "medium" + ] + }, + "token-badge-padding-vertical-large": { + "key": "{badge.padding.vertical.large}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{badge.padding.vertical.large}" + }, + "name": "token-badge-padding-vertical-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "large" + ] + }, + "token-badge-gap-small": { + "key": "{badge.gap.small}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.small}" + }, + "name": "token-badge-gap-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "small" + ] + }, + "token-badge-gap-medium": { + "key": "{badge.gap.medium}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.medium}" + }, + "name": "token-badge-gap-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "medium" + ] + }, + "token-badge-gap-large": { + "key": "{badge.gap.large}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.large}" + }, + "name": "token-badge-gap-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "large" + ] + }, + "token-badge-typography-font-size-small": { + "key": "{badge.typography.font-size.small}", + "$type": "font-size", + "$value": "0.8125rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.small}" + }, + "name": "token-badge-typography-font-size-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "small" + ] + }, + "token-badge-typography-font-size-medium": { + "key": "{badge.typography.font-size.medium}", + "$type": "font-size", + "$value": "0.8125rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.medium}" + }, + "name": "token-badge-typography-font-size-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "medium" + ] + }, + "token-badge-typography-font-size-large": { + "key": "{badge.typography.font-size.large}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.large}" + }, + "name": "token-badge-typography-font-size-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "large" + ] + }, + "token-badge-typography-line-height-small": { + "key": "{badge.typography.line-height.small}", + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "original": { + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "key": "{badge.typography.line-height.small}" + }, + "name": "token-badge-typography-line-height-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "small" + ] + }, + "token-badge-typography-line-height-medium": { + "key": "{badge.typography.line-height.medium}", + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "original": { + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "key": "{badge.typography.line-height.medium}" + }, + "name": "token-badge-typography-line-height-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "medium" + ] + }, + "token-badge-typography-line-height-large": { + "key": "{badge.typography.line-height.large}", + "$type": "number", + "$value": 1.5, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1, + "cds-g10": 1, + "cds-g90": 1, + "cds-g100": 1 + }, + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1, + "cds-g10": 1, + "cds-g90": 1, + "cds-g100": 1 + }, + "key": "{badge.typography.line-height.large}" + }, + "name": "token-badge-typography-line-height-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "large" + ] + }, + "token-badge-foreground-color-neutral-filled": { + "key": "{badge.foreground.color.neutral.filled}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral.filled}" + }, + "name": "token-badge-foreground-color-neutral-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "filled" + ] + }, + "token-badge-foreground-color-neutral-inverted": { + "key": "{badge.foreground.color.neutral.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.color.gray.20}", + "cds-g10": "{carbon.color.gray.20}", + "cds-g90": "{carbon.color.gray.100}", + "cds-g100": "{carbon.color.gray.100}" + }, + "key": "{badge.foreground.color.neutral.inverted}" + }, + "name": "token-badge-foreground-color-neutral-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "inverted" + ] + }, + "token-badge-foreground-color-neutral-outlined": { + "key": "{badge.foreground.color.neutral.outlined}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral.outlined}" + }, + "name": "token-badge-foreground-color-neutral-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "outlined" + ] + }, + "token-badge-foreground-color-neutral-dark-mode-filled": { + "key": "{badge.foreground.color.neutral-dark-mode.filled}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.neutral-dark-mode.filled}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "filled" + ] + }, + "token-badge-foreground-color-neutral-dark-mode-inverted": { + "key": "{badge.foreground.color.neutral-dark-mode.inverted}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral-dark-mode.inverted}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "inverted" + ] + }, + "token-badge-foreground-color-neutral-dark-mode-outlined": { + "key": "{badge.foreground.color.neutral-dark-mode.outlined}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "comments": { + "cds": "In Figma the `cds` value uses a token `Tag/HighContrast/TagColor` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "comments": { + "cds": "In Figma the `cds` value uses a token `Tag/HighContrast/TagColor` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.neutral-dark-mode.outlined}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "outlined" + ] + }, + "token-badge-foreground-color-highlight-filled": { + "key": "{badge.foreground.color.highlight.filled}", + "$type": "color", + "$value": "#7b00db", + "comment": "we don't use `highlight-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#7b00db", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "{color.palette.purple-400}", + "comment": "we don't use `highlight-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.purple-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorPurple.g100}" + }, + "key": "{badge.foreground.color.highlight.filled}" + }, + "name": "token-badge-foreground-color-highlight-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "filled" + ] + }, + "token-badge-foreground-color-highlight-inverted": { + "key": "{badge.foreground.color.highlight.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.highlight.inverted}" + }, + "name": "token-badge-foreground-color-highlight-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "inverted" + ] + }, + "token-badge-foreground-color-highlight-outlined": { + "key": "{badge.foreground.color.highlight.outlined}", + "$type": "color", + "$value": "#a737ff", + "$modes": { + "default": "#a737ff", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.highlight}", + "$modes": { + "default": "{color.foreground.highlight}", + "cds-g0": "{carbon.themes.tagTokens.tagColorPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorPurple.g100}" + }, + "key": "{badge.foreground.color.highlight.outlined}" + }, + "name": "token-badge-foreground-color-highlight-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "outlined" + ] + }, + "token-badge-foreground-color-success-filled": { + "key": "{badge.foreground.color.success.filled}", + "$type": "color", + "$value": "#006619", + "comment": "we don't use `success-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#006619", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{color.palette.green-400}", + "comment": "we don't use `success-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.green-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.foreground.color.success.filled}" + }, + "name": "token-badge-foreground-color-success-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "filled" + ] + }, + "token-badge-foreground-color-success-inverted": { + "key": "{badge.foreground.color.success.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.success.inverted}" + }, + "name": "token-badge-foreground-color-success-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "inverted" + ] + }, + "token-badge-foreground-color-success-outlined": { + "key": "{badge.foreground.color.success.outlined}", + "$type": "color", + "$value": "#008a22", + "$modes": { + "default": "#008a22", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.success}", + "$modes": { + "default": "{color.foreground.success}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.foreground.color.success.outlined}" + }, + "name": "token-badge-foreground-color-success-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "outlined" + ] + }, + "token-badge-foreground-color-warning-filled": { + "key": "{badge.foreground.color.warning.filled}", + "$type": "color", + "$value": "#803d00", + "$modes": { + "default": "#803d00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "hds": "we don't use `warning-on-surface` for accessibility (better contrast)", + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{color.palette.amber-400}", + "$modes": { + "default": "{color.palette.amber-400}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "hds": "we don't use `warning-on-surface` for accessibility (better contrast)", + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.warning.filled}" + }, + "name": "token-badge-foreground-color-warning-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "filled" + ] + }, + "token-badge-foreground-color-warning-inverted": { + "key": "{badge.foreground.color.warning.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.warning.inverted}" + }, + "name": "token-badge-foreground-color-warning-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "inverted" + ] + }, + "token-badge-foreground-color-warning-outlined": { + "key": "{badge.foreground.color.warning.outlined}", + "$type": "color", + "$value": "#bb5a00", + "$modes": { + "default": "#bb5a00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.warning}", + "$modes": { + "default": "{color.foreground.warning}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.warning.outlined}" + }, + "name": "token-badge-foreground-color-warning-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "outlined" + ] + }, + "token-badge-foreground-color-critical-filled": { + "key": "{badge.foreground.color.critical.filled}", + "$type": "color", + "$value": "#940004", + "comment": "we don't use `critical-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#940004", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-400}", + "comment": "we don't use `critical-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.foreground.color.critical.filled}" + }, + "name": "token-badge-foreground-color-critical-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "filled" + ] + }, + "token-badge-foreground-color-critical-inverted": { + "key": "{badge.foreground.color.critical.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.critical.inverted}" + }, + "name": "token-badge-foreground-color-critical-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "inverted" + ] + }, + "token-badge-foreground-color-critical-outlined": { + "key": "{badge.foreground.color.critical.outlined}", + "$type": "color", + "$value": "#e52228", + "$modes": { + "default": "#e52228", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.critical}", + "$modes": { + "default": "{color.foreground.critical}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.foreground.color.critical.outlined}" + }, + "name": "token-badge-foreground-color-critical-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "outlined" + ] + }, + "token-badge-surface-color-neutral-filled": { + "key": "{badge.surface.color.neutral.filled}", + "$type": "color", + "$value": "#dedfe3", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-200}", + "$modes": { + "default": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{badge.surface.color.neutral.filled}" + }, + "name": "token-badge-surface-color-neutral-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "filled" + ] + }, + "token-badge-surface-color-neutral-inverted": { + "key": "{badge.surface.color.neutral.inverted}", + "$type": "color", + "$value": "#656a76", + "$modes": { + "default": "#656a76", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead", + "key": "{badge.surface.color.neutral.inverted}" + }, + "name": "token-badge-surface-color-neutral-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "inverted" + ] + }, + "token-badge-surface-color-neutral-outlined": { + "key": "{badge.surface.color.neutral.outlined}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{badge.surface.color.neutral.outlined}" + }, + "name": "token-badge-surface-color-neutral-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "outlined" + ] + }, + "token-badge-surface-color-neutral-dark-mode-filled": { + "key": "{badge.surface.color.neutral-dark-mode.filled}", + "$type": "color", + "$value": "#656a76", + "$modes": { + "default": "#656a76", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component", + "key": "{badge.surface.color.neutral-dark-mode.filled}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "filled" + ] + }, + "token-badge-surface-color-neutral-dark-mode-inverted": { + "key": "{badge.surface.color.neutral-dark-mode.inverted}", + "$type": "color", + "$value": "#fafafa", + "$modes": { + "default": "#fafafa", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{color.surface.faint}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{badge.surface.color.neutral-dark-mode.inverted}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "inverted" + ] + }, + "token-badge-surface-color-neutral-dark-mode-outlined": { + "key": "{badge.surface.color.neutral-dark-mode.outlined}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{badge.surface.color.neutral-dark-mode.outlined}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "outlined" + ] + }, + "token-badge-surface-color-highlight-filled": { + "key": "{badge.surface.color.highlight.filled}", + "$type": "color", + "$value": "#ead2fe", + "comment": "we don't use `surface-highlight` for accessibility (better contrast)", + "$modes": { + "default": "#ead2fe", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "{color.palette.purple-100}", + "comment": "we don't use `surface-highlight` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.purple-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundPurple.g100}" + }, + "key": "{badge.surface.color.highlight.filled}" + }, + "name": "token-badge-surface-color-highlight-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "highlight", + "filled" + ] + }, + "token-badge-surface-color-highlight-inverted": { + "key": "{badge.surface.color.highlight.inverted}", + "$type": "color", + "$value": "#a737ff", + "$modes": { + "default": "#a737ff", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, + "original": { + "$type": "color", + "$value": "{color.palette.purple-200}", + "$modes": { + "default": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, + "key": "{badge.surface.color.highlight.inverted}" + }, + "name": "token-badge-surface-color-highlight-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "highlight", + "inverted" + ] + }, + "token-badge-surface-color-success-filled": { + "key": "{badge.surface.color.success.filled}", + "$type": "color", + "$value": "#cceeda", + "comment": "we don't use `surface-success` for accessibility (better contrast)", + "$modes": { + "default": "#cceeda", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "{color.palette.green-100}", + "comment": "we don't use `surface-success` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.green-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGreen.g100}" + }, + "key": "{badge.surface.color.success.filled}" + }, + "name": "token-badge-surface-color-success-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "success", + "filled" + ] + }, + "token-badge-surface-color-success-inverted": { + "key": "{badge.surface.color.success.inverted}", + "$type": "color", + "$value": "#008a22", + "$modes": { + "default": "#008a22", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{color.palette.green-200}", + "$modes": { + "default": "{color.palette.green-200}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.surface.color.success.inverted}" + }, + "name": "token-badge-surface-color-success-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "success", + "inverted" + ] + }, + "token-badge-surface-color-warning-filled": { + "key": "{badge.surface.color.warning.filled}", + "$type": "color", + "$value": "#fbeabf", + "comment": "we don't use `surface-warning` for accessibility (better contrast)", + "$modes": { + "default": "#fbeabf", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{color.palette.amber-100}", + "comment": "we don't use `surface-warning` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.surface.color.warning.filled}" + }, + "name": "token-badge-surface-color-warning-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "warning", + "filled" + ] + }, + "token-badge-surface-color-warning-inverted": { + "key": "{badge.surface.color.warning.inverted}", + "$type": "color", + "$value": "#bb5a00", + "$modes": { + "default": "#bb5a00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{color.palette.amber-200}", + "$modes": { + "default": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.surface.color.warning.inverted}" + }, + "name": "token-badge-surface-color-warning-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "warning", + "inverted" + ] + }, + "token-badge-surface-color-critical-filled": { + "key": "{badge.surface.color.critical.filled}", + "$type": "color", + "$value": "#fbd4d4", + "comment": "we don't use `surface-critical` for accessibility (better contrast)", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-100}", + "comment": "we don't use `surface-critical` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.red-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundRed.g100}" + }, + "key": "{badge.surface.color.critical.filled}" + }, + "name": "token-badge-surface-color-critical-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "critical", + "filled" + ] + }, + "token-badge-surface-color-critical-inverted": { + "key": "{badge.surface.color.critical.inverted}", + "$type": "color", + "$value": "#e52228", + "$modes": { + "default": "#e52228", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-200}", + "$modes": { + "default": "{color.palette.red-200}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.surface.color.critical.inverted}" + }, + "name": "token-badge-surface-color-critical-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "critical", + "inverted" + ] + }, + "token-badge-border-radius": { + "key": "{badge.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "$modes": { + "default": "5px", + "cds-g0": "1000000000px", + "cds-g10": "1000000000px", + "cds-g90": "1000000000px", + "cds-g100": "1000000000px" + }, + "original": { + "$type": "dimension", + "$value": "{border.radius.small}", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "{border.radius.rounded}", + "cds-g10": "{border.radius.rounded}", + "cds-g90": "{border.radius.rounded}", + "cds-g100": "{border.radius.rounded}" + }, + "key": "{badge.border.radius}" + }, + "name": "token-badge-border-radius", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "border", + "radius" + ] + }, + "token-badge-icon-size-small": { + "key": "{badge.icon.size.small}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{badge.icon.size.small}" + }, + "name": "token-badge-icon-size-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "small" + ] + }, + "token-badge-icon-size-medium": { + "key": "{badge.icon.size.medium}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{badge.icon.size.medium}" + }, + "name": "token-badge-icon-size-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "medium" + ] + }, + "token-badge-icon-size-large": { + "key": "{badge.icon.size.large}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{badge.icon.size.large}" + }, + "name": "token-badge-icon-size-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "large" + ] + }, + "token-button-height-small": { + "key": "{button.height.small}", + "$type": "dimension", + "$value": "28px", + "unit": "px", + "$modes": { + "default": "28", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "original": { + "$type": "dimension", + "$value": "28", + "unit": "px", + "$modes": { + "default": "28", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "key": "{button.height.small}" + }, + "name": "token-button-height-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "small" + ] + }, + "token-button-height-medium": { + "key": "{button.height.medium}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "$modes": { + "default": "36", + "cds-g0": "40", + "cds-g10": "40", + "cds-g90": "40", + "cds-g100": "40" + }, + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "$modes": { + "default": "36", + "cds-g0": "40", + "cds-g10": "40", + "cds-g90": "40", + "cds-g100": "40" + }, + "key": "{button.height.medium}" + }, + "name": "token-button-height-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "medium" + ] + }, + "token-button-height-large": { + "key": "{button.height.large}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "$modes": { + "default": "48", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "$modes": { + "default": "48", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "key": "{button.height.large}" + }, + "name": "token-button-height-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "large" + ] + }, + "token-button-padding-horizontal-small": { + "key": "{button.padding.horizontal.small}", + "$type": "dimension", + "$value": "11px", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "11", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.small}" + }, + "name": "token-button-padding-horizontal-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "small" + ] + }, + "token-button-padding-horizontal-medium": { + "key": "{button.padding.horizontal.medium}", + "$type": "dimension", + "$value": "15px", + "unit": "px", + "$modes": { + "default": "15", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "15", + "unit": "px", + "$modes": { + "default": "15", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.medium}" + }, + "name": "token-button-padding-horizontal-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "medium" + ] + }, + "token-button-padding-horizontal-large": { + "key": "{button.padding.horizontal.large}", + "$type": "dimension", + "$value": "19px", + "unit": "px", + "$modes": { + "default": "19", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "19", + "unit": "px", + "$modes": { + "default": "19", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.large}" + }, + "name": "token-button-padding-horizontal-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "large" + ] + }, + "token-button-padding-vertical-small": { + "key": "{button.padding.vertical.small}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.small}" + }, + "name": "token-button-padding-vertical-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "small" + ] + }, + "token-button-padding-vertical-medium": { + "key": "{button.padding.vertical.medium}", + "$type": "dimension", + "$value": "9px", + "unit": "px", + "$modes": { + "default": "9", + "cds-g0": "10", + "cds-g10": "10", + "cds-g90": "10", + "cds-g100": "10" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "9", + "unit": "px", + "$modes": { + "default": "9", + "cds-g0": "10", + "cds-g10": "10", + "cds-g90": "10", + "cds-g100": "10" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.medium}" + }, + "name": "token-button-padding-vertical-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "medium" + ] + }, + "token-button-padding-vertical-large": { + "key": "{button.padding.vertical.large}", + "$type": "dimension", + "$value": "11px", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "11", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.large}" + }, + "name": "token-button-padding-vertical-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "large" + ] + }, + "token-button-gap": { + "key": "{button.gap}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "key": "{button.gap}" + }, + "name": "token-button-gap", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "gap" + ] + }, + "token-button-typography-font-size-small": { + "key": "{button.typography.font-size.small}", + "$type": "font-size", + "$value": "0.8125rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.small}" + }, + "name": "token-button-typography-font-size-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "small" + ] + }, + "token-button-typography-font-size-medium": { + "key": "{button.typography.font-size.medium}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.medium}" + }, + "name": "token-button-typography-font-size-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "medium" + ] + }, + "token-button-typography-font-size-large": { + "key": "{button.typography.font-size.large}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.large}" + }, + "name": "token-button-typography-font-size-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "large" + ] + }, + "token-button-typography-line-height-small": { + "key": "{button.typography.line-height.small}", + "$type": "number", + "$value": 0.9286, + "comment": "14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)", + "$modes": { + "default": 0.9286, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 0.9286, + "comment": "14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)", + "$modes": { + "default": 0.9286, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.small}" + }, + "name": "token-button-typography-line-height-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "small" + ] + }, + "token-button-typography-line-height-medium": { + "key": "{button.typography.line-height.medium}", + "$type": "number", + "$value": 1.1429, + "comment": "14px ~ 1.1429", + "$modes": { + "default": 1.1429, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 1.1429, + "comment": "14px ~ 1.1429", + "$modes": { + "default": 1.1429, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.medium}" + }, + "name": "token-button-typography-line-height-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "medium" + ] + }, + "token-button-typography-line-height-large": { + "key": "{button.typography.line-height.large}", + "$type": "number", + "$value": 1.5, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.large}" + }, + "name": "token-button-typography-line-height-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "large" + ] + }, + "token-button-foreground-color-primary-default": { + "key": "{button.foreground.color.primary.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.default}" + }, + "name": "token-button-foreground-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "default" + ] + }, + "token-button-foreground-color-primary-hover": { + "key": "{button.foreground.color.primary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.hover}" + }, + "name": "token-button-foreground-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "hover" + ] + }, + "token-button-foreground-color-primary-focus": { + "key": "{button.foreground.color.primary.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.focus}" + }, + "name": "token-button-foreground-color-primary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "focus" + ] + }, + "token-button-foreground-color-primary-active": { + "key": "{button.foreground.color.primary.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.active}" + }, + "name": "token-button-foreground-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "active" + ] + }, + "token-button-foreground-color-secondary-default": { + "key": "{button.foreground.color.secondary.default}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.default}" + }, + "name": "token-button-foreground-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "default" + ] + }, + "token-button-foreground-color-secondary-hover": { + "key": "{button.foreground.color.secondary.hover}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.hover}" + }, + "name": "token-button-foreground-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "hover" + ] + }, + "token-button-foreground-color-secondary-focus": { + "key": "{button.foreground.color.secondary.focus}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.focus}" + }, + "name": "token-button-foreground-color-secondary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "focus" + ] + }, + "token-button-foreground-color-secondary-active": { + "key": "{button.foreground.color.secondary.active}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.active}" + }, + "name": "token-button-foreground-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "active" + ] + }, + "token-button-foreground-color-tertiary-default": { + "key": "{button.foreground.color.tertiary.default}", + "$type": "color", + "$value": "#1060ff", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.action}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiary.g100}" + }, + "key": "{button.foreground.color.tertiary.default}" + }, + "name": "token-button-foreground-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "default" + ] + }, + "token-button-foreground-color-tertiary-hover": { + "key": "{button.foreground.color.tertiary.hover}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.action-hover}", + "$modes": { + "default": "{color.foreground.action-hover}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.hover}" + }, + "name": "token-button-foreground-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "hover" + ] + }, + "token-button-foreground-color-tertiary-focus": { + "key": "{button.foreground.color.tertiary.focus}", + "$type": "color", + "$value": "#1060ff", + "$modes": { + "default": "#1060ff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.action}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.focus}" + }, + "name": "token-button-foreground-color-tertiary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "focus" + ] + }, + "token-button-foreground-color-tertiary-active": { + "key": "{button.foreground.color.tertiary.active}", + "$type": "color", + "$value": "#0046d1", + "$modes": { + "default": "#0046d1", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.action-active}", + "$modes": { + "default": "{color.foreground.action-active}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.active}" + }, + "name": "token-button-foreground-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "active" + ] + }, + "token-button-foreground-color-critical-default": { + "key": "{button.foreground.color.critical.default}", + "$type": "color", + "$value": "#c00005", + "$modes": { + "default": "#c00005", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.critical-on-surface}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.default}" + }, + "name": "token-button-foreground-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "default" + ] + }, + "token-button-foreground-color-critical-hover": { + "key": "{button.foreground.color.critical.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.hover}" + }, + "name": "token-button-foreground-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "hover" + ] + }, + "token-button-foreground-color-critical-focus": { + "key": "{button.foreground.color.critical.focus}", + "$type": "color", + "$value": "#c00005", + "$modes": { + "default": "#c00005", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.critical-on-surface}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.focus}" + }, + "name": "token-button-foreground-color-critical-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "focus" + ] + }, + "token-button-foreground-color-critical-active": { + "key": "{button.foreground.color.critical.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.active}" + }, + "name": "token-button-foreground-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "active" + ] + }, + "token-button-foreground-color-disabled": { + "key": "{button.foreground.color.disabled}", + "$type": "color", + "$value": "#8c909c", + "$modes": { + "default": "#8c909c", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "rgba(255, 255, 255, 0.25)", + "cds-g100": "rgba(255, 255, 255, 0.25)" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.disabled}", + "$modes": { + "default": "{color.foreground.disabled}", + "cds-g0": "{carbon.themes.white.textOnColorDisabled}", + "cds-g10": "{carbon.themes.g10.textOnColorDisabled}", + "cds-g90": "{carbon.themes.g90.textOnColorDisabled}", + "cds-g100": "{carbon.themes.g100.textOnColorDisabled}" + }, + "key": "{button.foreground.color.disabled}" + }, + "name": "token-button-foreground-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "disabled" + ] + }, + "token-button-surface-color-primary-default": { + "key": "{button.surface.color.primary.default}", + "$type": "color", + "$value": "#1060ff", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimary.g100}" + }, + "key": "{button.surface.color.primary.default}" + }, + "name": "token-button-surface-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "default" + ] + }, + "token-button-surface-color-primary-hover": { + "key": "{button.surface.color.primary.hover}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#0050e6", + "cds-g100": "#0050e6" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimaryHover.g100}" + }, + "key": "{button.surface.color.primary.hover}" + }, + "name": "token-button-surface-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "hover" + ] + }, + "token-button-surface-color-primary-focus": { + "key": "{button.surface.color.primary.focus}", + "$type": "color", + "$value": "#1060ff", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimary.g100}" + }, + "key": "{button.surface.color.primary.focus}" + }, + "name": "token-button-surface-color-primary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "focus" + ] + }, + "token-button-surface-color-primary-active": { + "key": "{button.surface.color.primary.active}", + "$type": "color", + "$value": "#0046d1", + "$modes": { + "default": "#0046d1", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#002d9c", + "cds-g100": "#002d9c" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimaryActive.g100}" + }, + "key": "{button.surface.color.primary.active}" + }, + "name": "token-button-surface-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "active" + ] + }, + "token-button-surface-color-secondary-default": { + "key": "{button.surface.color.secondary.default}", + "$type": "color", + "$value": "#fafafa", + "$modes": { + "default": "#fafafa", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#6f6f6f", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{color.surface.faint}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondary.g100}" + }, + "key": "{button.surface.color.secondary.default}" + }, + "name": "token-button-surface-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "default" + ] + }, + "token-button-surface-color-secondary-hover": { + "key": "{button.surface.color.secondary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#474747", + "cds-g10": "#474747", + "cds-g90": "#5e5e5e", + "cds-g100": "#5e5e5e" + }, + "original": { + "$type": "color", + "$value": "{color.surface.primary}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondaryHover.g100}" + }, + "key": "{button.surface.color.secondary.hover}" + }, + "name": "token-button-surface-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "hover" + ] + }, + "token-button-surface-color-secondary-focus": { + "key": "{button.surface.color.secondary.focus}", + "$type": "color", + "$value": "#fafafa", + "$modes": { + "default": "#fafafa", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#6f6f6f", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{color.surface.faint}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondary.g100}" + }, + "key": "{button.surface.color.secondary.focus}" + }, + "name": "token-button-surface-color-secondary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "focus" + ] + }, + "token-button-surface-color-secondary-active": { + "key": "{button.surface.color.secondary.active}", + "$type": "color", + "$value": "#dedfe3", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#6f6f6f", + "cds-g10": "#6f6f6f", + "cds-g90": "#393939", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{color.surface.interactive-active}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondaryActive.g100}" + }, + "key": "{button.surface.color.secondary.active}" + }, + "name": "token-button-surface-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "active" + ] + }, + "token-button-surface-color-tertiary-default": { + "key": "{button.surface.color.tertiary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{button.surface.color.tertiary.default}" + }, + "name": "token-button-surface-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "default" + ] + }, + "token-button-surface-color-tertiary-hover": { + "key": "{button.surface.color.tertiary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.surface.primary}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryHover.g100}" + }, + "key": "{button.surface.color.tertiary.hover}" + }, + "name": "token-button-surface-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "hover" + ] + }, + "token-button-surface-color-tertiary-focus": { + "key": "{button.surface.color.tertiary.focus}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "transparent", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "transparent", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryHover.g100}" + }, + "key": "{button.surface.color.tertiary.focus}" + }, + "name": "token-button-surface-color-tertiary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "focus" + ] + }, + "token-button-surface-color-tertiary-active": { + "key": "{button.surface.color.tertiary.active}", + "$type": "color", + "$value": "#dedfe3", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "{color.surface.interactive-active}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryActive.g100}" + }, + "key": "{button.surface.color.tertiary.active}" + }, + "name": "token-button-surface-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "active" + ] + }, + "token-button-surface-color-critical-default": { + "key": "{button.surface.color.critical.default}", + "$type": "color", + "$value": "#fff5f5", + "$modes": { + "default": "#fff5f5", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "{color.surface.critical}", + "$modes": { + "default": "{color.surface.critical}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerPrimary.g100}" + }, + "key": "{button.surface.color.critical.default}" + }, + "name": "token-button-surface-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "default" + ] + }, + "token-button-surface-color-critical-hover": { + "key": "{button.surface.color.critical.hover}", + "$type": "color", + "$value": "#c00005", + "$modes": { + "default": "#c00005", + "cds-g0": "#b81921", + "cds-g10": "#b81921", + "cds-g90": "#b81921", + "cds-g100": "#b81921" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerHover.g100}" + }, + "key": "{button.surface.color.critical.hover}" + }, + "name": "token-button-surface-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "hover" + ] + }, + "token-button-surface-color-critical-focus": { + "key": "{button.surface.color.critical.focus}", + "$type": "color", + "$value": "#fff5f5", + "$modes": { + "default": "#fff5f5", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "{color.surface.critical}", + "$modes": { + "default": "{color.surface.critical}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerPrimary.g100}" + }, + "key": "{button.surface.color.critical.focus}" + }, + "name": "token-button-surface-color-critical-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "focus" + ] + }, + "token-button-surface-color-critical-active": { + "key": "{button.surface.color.critical.active}", + "$type": "color", + "$value": "#940004", + "$modes": { + "default": "#940004", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#750e13", + "cds-g100": "#750e13" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-400}", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerActive.g100}" + }, + "key": "{button.surface.color.critical.active}" + }, + "name": "token-button-surface-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "active" + ] + }, + "token-button-surface-color-disabled": { + "key": "{button.surface.color.disabled}", + "$type": "color", + "$value": "#fafafa", + "$modes": { + "default": "#fafafa", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, + "original": { + "$type": "color", + "$value": "{color.surface.faint}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDisabled.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDisabled.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDisabled.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDisabled.g100}" + }, + "key": "{button.surface.color.disabled}" + }, + "name": "token-button-surface-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "disabled" + ] + }, + "token-button-border-width": { + "key": "{button.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{button.border.width}" + }, + "name": "token-button-border-width", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "width" + ] + }, + "token-button-border-radius": { + "key": "{button.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "$modes": { + "default": "5px", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "{border.radius.small}", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{button.border.radius}" + }, + "name": "token-button-border-radius", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "radius" + ] + }, + "token-button-border-color-primary-default": { + "key": "{button.border.color.primary.default}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.default}" + }, + "name": "token-button-border-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "default" + ] + }, + "token-button-border-color-primary-hover": { + "key": "{button.border.color.primary.hover}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.hover}" + }, + "name": "token-button-border-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "hover" + ] + }, + "token-button-border-color-primary-focus-internal": { + "key": "{button.border.color.primary.focus.internal}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "{color.focus.action.internal}", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.primary.focus.internal}" + }, + "name": "token-button-border-color-primary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "focus", + "internal" + ] + }, + "token-button-border-color-primary-focus-external": { + "key": "{button.border.color.primary.focus.external}", + "$type": "color", + "$value": "#5990ff", + "$modes": { + "default": "#5990ff", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "{color.focus.action.external}", + "$modes": { + "default": "{color.focus.action.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.primary.focus.external}" + }, + "name": "token-button-border-color-primary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "focus", + "external" + ] + }, + "token-button-border-color-primary-active": { + "key": "{button.border.color.primary.active}", + "$type": "color", + "$value": "#0046d1", + "$modes": { + "default": "#0046d1", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.active}" + }, + "name": "token-button-border-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "active" + ] + }, + "token-button-border-color-secondary-default": { + "key": "{button.border.color.secondary.default}", + "$type": "color", + "$value": "#3b3d4566", + "$modes": { + "default": "#3b3d4566", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.default}" + }, + "name": "token-button-border-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "default" + ] + }, + "token-button-border-color-secondary-hover": { + "key": "{button.border.color.secondary.hover}", + "$type": "color", + "$value": "#3b3d4566", + "$modes": { + "default": "#3b3d4566", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.hover}" + }, + "name": "token-button-border-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "hover" + ] + }, + "token-button-border-color-secondary-focus-internal": { + "key": "{button.border.color.secondary.focus.internal}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "{color.focus.action.internal}", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.secondary.focus.internal}" + }, + "name": "token-button-border-color-secondary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "focus", + "internal" + ] + }, + "token-button-border-color-secondary-focus-external": { + "key": "{button.border.color.secondary.focus.external}", + "$type": "color", + "$value": "#5990ff", + "$modes": { + "default": "#5990ff", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "{color.focus.action.external}", + "$modes": { + "default": "{color.focus.action.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.secondary.focus.external}" + }, + "name": "token-button-border-color-secondary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "focus", + "external" + ] + }, + "token-button-border-color-secondary-active": { + "key": "{button.border.color.secondary.active}", + "$type": "color", + "$value": "#3b3d4566", + "$modes": { + "default": "#3b3d4566", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.active}" + }, + "name": "token-button-border-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "active" + ] + }, + "token-button-border-color-tertiary-default": { + "key": "{button.border.color.tertiary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{button.border.color.tertiary.default}" + }, + "name": "token-button-border-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "default" + ] + }, + "token-button-border-color-tertiary-hover": { + "key": "{button.border.color.tertiary.hover}", + "$type": "color", + "$value": "#3b3d4566", + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "key": "{button.border.color.tertiary.hover}" + }, + "name": "token-button-border-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "hover" + ] + }, + "token-button-border-color-tertiary-focus-internal": { + "key": "{button.border.color.tertiary.focus.internal}", + "$type": "color", + "$value": "#0c56e9", + "original": { + "$type": "color", + "$value": "{color.focus.action.internal}", + "key": "{button.border.color.tertiary.focus.internal}" + }, + "name": "token-button-border-color-tertiary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "focus", + "internal" + ] + }, + "token-button-border-color-tertiary-focus-external": { + "key": "{button.border.color.tertiary.focus.external}", + "$type": "color", + "$value": "#5990ff", + "original": { + "$type": "color", + "$value": "{color.focus.action.external}", + "key": "{button.border.color.tertiary.focus.external}" + }, + "name": "token-button-border-color-tertiary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "focus", + "external" + ] + }, + "token-button-border-color-tertiary-active": { + "key": "{button.border.color.tertiary.active}", + "$type": "color", + "$value": "#3b3d4566", + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "key": "{button.border.color.tertiary.active}" + }, + "name": "token-button-border-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "active" + ] + }, + "token-button-border-color-critical-default": { + "key": "{button.border.color.critical.default}", + "$type": "color", + "$value": "#c00005", + "$modes": { + "default": "#c00005", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.critical-on-surface}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.default}" + }, + "name": "token-button-border-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "default" + ] + }, + "token-button-border-color-critical-hover": { + "key": "{button.border.color.critical.hover}", + "$type": "color", + "$value": "#940004", + "$modes": { + "default": "#940004", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-400}", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.hover}" + }, + "name": "token-button-border-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "hover" + ] + }, + "token-button-border-color-critical-focus-internal": { + "key": "{button.border.color.critical.focus.internal}", + "$type": "color", + "$value": "#c00005", + "$modes": { + "default": "#c00005", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "{color.focus.critical.internal}", + "$modes": { + "default": "{color.focus.critical.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.critical.focus.internal}" + }, + "name": "token-button-border-color-critical-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "focus", + "internal" + ] + }, + "token-button-border-color-critical-focus-external": { + "key": "{button.border.color.critical.focus.external}", + "$type": "color", + "$value": "#dd7578", + "$modes": { + "default": "#dd7578", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "{color.focus.critical.external}", + "$modes": { + "default": "{color.focus.critical.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.critical.focus.external}" + }, + "name": "token-button-border-color-critical-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "focus", + "external" + ] + }, + "token-button-border-color-critical-active": { + "key": "{button.border.color.critical.active}", + "$type": "color", + "$value": "#940004", + "$modes": { + "default": "#940004", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-400}", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.active}" + }, + "name": "token-button-border-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "active" + ] + }, + "token-button-border-color-disabled": { + "key": "{button.border.color.disabled}", + "$type": "color", + "$value": "#656a7633", + "original": { + "$type": "color", + "$value": "{color.border.primary}", + "key": "{button.border.color.disabled}" + }, + "name": "token-button-border-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "disabled" + ] + }, + "token-button-focus-border-width": { + "key": "{button.focus.border.width}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{button.focus.border.width}" + }, + "name": "token-button-focus-border-width", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "focus", + "border", + "width" + ] + }, + "token-button-icon-size-small": { + "key": "{button.icon.size.small}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.small}" + }, + "name": "token-button-icon-size-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "small" + ] + }, + "token-button-icon-size-medium": { + "key": "{button.icon.size.medium}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.medium}" + }, + "name": "token-button-icon-size-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "medium" + ] + }, + "token-button-icon-size-large": { + "key": "{button.icon.size.large}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.large}" + }, + "name": "token-button-icon-size-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "large" + ] + }, + "token-dismiss-button-size": { + "key": "{dismiss-button.size}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "key": "{dismiss-button.size}" + }, + "name": "token-dismiss-button-size", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "size" + ] + }, + "token-dismiss-button-foreground-color-default": { + "key": "{dismiss-button.foreground.color.default}", + "$type": "color", + "$value": "#656a76", + "$modes": { + "default": "#656a76", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "$modes": { + "default": "{color.foreground.faint}", + "cds-g0": "{carbon.themes.white.iconPrimary}", + "cds-g10": "{carbon.themes.g10.iconPrimary}", + "cds-g90": "{carbon.themes.g90.iconPrimary}", + "cds-g100": "{carbon.themes.g100.iconPrimary}" + }, + "key": "{dismiss-button.foreground.color.default}" + }, + "name": "token-dismiss-button-foreground-color-default", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "foreground", + "color", + "default" + ] + }, + "token-dismiss-button-foreground-color-active": { + "key": "{dismiss-button.foreground.color.active}", + "$type": "color", + "$value": "#0c0c0e", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.strong}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.white.iconPrimary}", + "cds-g10": "{carbon.themes.g10.iconPrimary}", + "cds-g90": "{carbon.themes.g90.iconPrimary}", + "cds-g100": "{carbon.themes.g100.iconPrimary}" + }, + "key": "{dismiss-button.foreground.color.active}" + }, + "name": "token-dismiss-button-foreground-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "foreground", + "color", + "active" + ] + }, + "token-dismiss-button-surface-color-hover": { + "key": "{dismiss-button.surface.color.hover}", + "$type": "color", + "$value": "rgba(222, 223, 227, 0.4)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "rgba(141, 141, 141, 0.12)", + "cds-g10": "rgba(141, 141, 141, 0.12)", + "cds-g90": "rgba(141, 141, 141, 0.16)", + "cds-g100": "rgba(141, 141, 141, 0.16)" + }, + "original": { + "$type": "color", + "$value": "rgba(222, 223, 227, 0.4)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "{carbon.themes.white.backgroundHover}", + "cds-g10": "{carbon.themes.g10.backgroundHover}", + "cds-g90": "{carbon.themes.g90.backgroundHover}", + "cds-g100": "{carbon.themes.g100.backgroundHover}" + }, + "key": "{dismiss-button.surface.color.hover}" + }, + "name": "token-dismiss-button-surface-color-hover", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "surface", + "color", + "hover" + ] + }, + "token-dismiss-button-surface-color-active": { + "key": "{dismiss-button.surface.color.active}", + "$type": "color", + "$value": "rgba(222, 223, 227, 0.4)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "rgba(141, 141, 141, 0.5)", + "cds-g10": "rgba(141, 141, 141, 0.5)", + "cds-g90": "rgba(141, 141, 141, 0.4)", + "cds-g100": "rgba(141, 141, 141, 0.4)" + }, + "original": { + "$type": "color", + "$value": "rgba(222, 223, 227, 0.4)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "{carbon.themes.white.backgroundActive}", + "cds-g10": "{carbon.themes.g10.backgroundActive}", + "cds-g90": "{carbon.themes.g90.backgroundActive}", + "cds-g100": "{carbon.themes.g100.backgroundActive}" + }, + "key": "{dismiss-button.surface.color.active}" + }, + "name": "token-dismiss-button-surface-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "surface", + "color", + "active" + ] + }, + "token-dismiss-button-border-color-active": { + "key": "{dismiss-button.border.color.active}", + "$type": "color", + "$value": "#3b3d4566", + "$modes": { + "default": "#3b3d4566", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{dismiss-button.border.color.active}" + }, + "name": "token-dismiss-button-border-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "border", + "color", + "active" + ] + }, + "token-dismiss-button-icon-size": { + "key": "{dismiss-button.icon.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "20", + "cds-g10": "20", + "cds-g90": "20", + "cds-g100": "20" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "20", + "cds-g10": "20", + "cds-g90": "20", + "cds-g100": "20" + }, + "key": "{dismiss-button.icon.size}" + }, + "name": "token-dismiss-button-icon-size", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "icon", + "size" + ] + }, + "token-form-label-color": { + "key": "{form.label.color}", + "$type": "color", + "$value": "#0c0c0e", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.strong}", + "group": "components", + "key": "{form.label.color}" + }, + "name": "token-form-label-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "label", + "color" + ] + }, + "token-form-legend-color": { + "key": "{form.legend.color}", + "$type": "color", + "$value": "#0c0c0e", + "group": "components", + "original": { + "$type": "color", + "$value": "{form.label.color}", + "group": "components", + "key": "{form.legend.color}" + }, + "name": "token-form-legend-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "legend", + "color" + ] + }, + "token-form-helper-text-color": { + "key": "{form.helper-text.color}", + "$type": "color", + "$value": "#656a76", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.helper-text.color}" + }, + "name": "token-form-helper-text-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "helper-text", + "color" + ] + }, + "token-form-indicator-optional-color": { + "key": "{form.indicator.optional.color}", + "$type": "color", + "$value": "#656a76", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.indicator.optional.color}" + }, + "name": "token-form-indicator-optional-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "indicator", + "optional", + "color" + ] + }, + "token-form-error-color": { + "key": "{form.error.color}", + "$type": "color", + "$value": "#c00005", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "components", + "key": "{form.error.color}" + }, + "name": "token-form-error-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "error", + "color" + ] + }, + "token-form-error-icon-size": { + "key": "{form.error.icon-size}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "14", + "unit": "px", + "key": "{form.error.icon-size}" + }, + "name": "token-form-error-icon-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "error", + "icon-size" + ] + }, + "token-form-checkbox-size": { + "key": "{form.checkbox.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.checkbox.size}" + }, + "name": "token-form-checkbox-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "size" + ] + }, + "token-form-checkbox-border-radius": { + "key": "{form.checkbox.border.radius}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{form.checkbox.border.radius}" + }, + "name": "token-form-checkbox-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "border", + "radius" + ] + }, + "token-form-checkbox-border-width": { + "key": "{form.checkbox.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.checkbox.border.width}" + }, + "name": "token-form-checkbox-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "border", + "width" + ] + }, + "token-form-checkbox-background-image-size": { + "key": "{form.checkbox.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.checkbox.background-image.size}" + }, + "name": "token-form-checkbox-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "size" + ] + }, + "token-form-checkbox-background-image-data-url": { + "key": "{form.checkbox.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url}" + }, + "name": "token-form-checkbox-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url" + ] + }, + "token-form-checkbox-background-image-data-url-indeterminate": { + "key": "{form.checkbox.background-image.data-url-indeterminate}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url-indeterminate}" + }, + "name": "token-form-checkbox-background-image-data-url-indeterminate", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url-indeterminate" + ] + }, + "token-form-checkbox-background-image-data-url-disabled": { + "key": "{form.checkbox.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url-disabled}" + }, + "name": "token-form-checkbox-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url-disabled" + ] + }, + "token-form-checkbox-background-image-data-url-indeterminate-disabled": { + "key": "{form.checkbox.background-image.data-url-indeterminate-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url-indeterminate-disabled}" + }, + "name": "token-form-checkbox-background-image-data-url-indeterminate-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url-indeterminate-disabled" + ] + }, + "token-form-control-base-foreground-value-color": { + "key": "{form.control.base.foreground.value-color}", + "$type": "color", + "$value": "#0c0c0e", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.strong}", + "group": "components", + "key": "{form.control.base.foreground.value-color}" + }, + "name": "token-form-control-base-foreground-value-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "foreground", + "value-color" + ] + }, + "token-form-control-base-foreground-placeholder-color": { + "key": "{form.control.base.foreground.placeholder-color}", + "$type": "color", + "$value": "#656a76", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.control.base.foreground.placeholder-color}" + }, + "name": "token-form-control-base-foreground-placeholder-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "foreground", + "placeholder-color" + ] + }, + "token-form-control-base-surface-color-default": { + "key": "{form.control.base.surface-color.default}", + "$type": "color", + "$value": "#ffffff", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.interactive}", + "group": "components", + "key": "{form.control.base.surface-color.default}" + }, + "name": "token-form-control-base-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "surface-color", + "default" + ] + }, + "token-form-control-base-surface-color-hover": { + "key": "{form.control.base.surface-color.hover}", + "$type": "color", + "$value": "#f1f2f3", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.interactive-hover}", + "group": "components", + "key": "{form.control.base.surface-color.hover}" + }, + "name": "token-form-control-base-surface-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "surface-color", + "hover" + ] + }, + "token-form-control-base-border-color-default": { + "key": "{form.control.base.border-color.default}", + "$type": "color", + "$value": "#8c909c", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-400}", + "group": "components", + "key": "{form.control.base.border-color.default}" + }, + "name": "token-form-control-base-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "border-color", + "default" + ] + }, + "token-form-control-base-border-color-hover": { + "key": "{form.control.base.border-color.hover}", + "$type": "color", + "$value": "#656a76", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "group": "components", + "key": "{form.control.base.border-color.hover}" + }, + "name": "token-form-control-base-border-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "border-color", + "hover" + ] + }, + "token-form-control-checked-foreground-color": { + "key": "{form.control.checked.foreground-color}", + "$type": "color", + "$value": "#ffffff", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "group": "components", + "key": "{form.control.checked.foreground-color}" + }, + "name": "token-form-control-checked-foreground-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "foreground-color" + ] + }, + "token-form-control-checked-surface-color-default": { + "key": "{form.control.checked.surface-color.default}", + "$type": "color", + "$value": "#1060ff", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "group": "components", + "key": "{form.control.checked.surface-color.default}" + }, + "name": "token-form-control-checked-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "surface-color", + "default" + ] + }, + "token-form-control-checked-surface-color-hover": { + "key": "{form.control.checked.surface-color.hover}", + "$type": "color", + "$value": "#0c56e9", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "components", + "key": "{form.control.checked.surface-color.hover}" + }, + "name": "token-form-control-checked-surface-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "surface-color", + "hover" + ] + }, + "token-form-control-checked-border-color-default": { + "key": "{form.control.checked.border-color.default}", + "$type": "color", + "$value": "#0c56e9", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "components", + "key": "{form.control.checked.border-color.default}" + }, + "name": "token-form-control-checked-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "border-color", + "default" + ] + }, + "token-form-control-checked-border-color-hover": { + "key": "{form.control.checked.border-color.hover}", + "$type": "color", + "$value": "#0046d1", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "group": "components", + "key": "{form.control.checked.border-color.hover}" + }, + "name": "token-form-control-checked-border-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "border-color", + "hover" + ] + }, + "token-form-control-invalid-border-color-default": { + "key": "{form.control.invalid.border-color.default}", + "$type": "color", + "$value": "#c00005", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "components", + "key": "{form.control.invalid.border-color.default}" + }, + "name": "token-form-control-invalid-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "invalid", + "border-color", + "default" + ] + }, + "token-form-control-invalid-border-color-hover": { + "key": "{form.control.invalid.border-color.hover}", + "$type": "color", + "$value": "#940004", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.red-400}", + "group": "components", + "key": "{form.control.invalid.border-color.hover}" + }, + "name": "token-form-control-invalid-border-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "invalid", + "border-color", + "hover" + ] + }, + "token-form-control-readonly-foreground-color": { + "key": "{form.control.readonly.foreground-color}", + "$type": "color", + "$value": "#3b3d45", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "group": "components", + "key": "{form.control.readonly.foreground-color}" + }, + "name": "token-form-control-readonly-foreground-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "readonly", + "foreground-color" + ] + }, + "token-form-control-readonly-surface-color": { + "key": "{form.control.readonly.surface-color}", + "$type": "color", + "$value": "#f1f2f3", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.strong}", + "group": "components", + "key": "{form.control.readonly.surface-color}" + }, + "name": "token-form-control-readonly-surface-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "readonly", + "surface-color" + ] + }, + "token-form-control-readonly-border-color": { + "key": "{form.control.readonly.border-color}", + "$type": "color", + "$value": "#656a761a", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.border.faint}", + "group": "components", + "key": "{form.control.readonly.border-color}" + }, + "name": "token-form-control-readonly-border-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "readonly", + "border-color" + ] + }, + "token-form-control-disabled-foreground-color": { + "key": "{form.control.disabled.foreground-color}", + "$type": "color", + "$value": "#8c909c", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.disabled}", + "group": "components", + "key": "{form.control.disabled.foreground-color}" + }, + "name": "token-form-control-disabled-foreground-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "disabled", + "foreground-color" + ] + }, + "token-form-control-disabled-surface-color": { + "key": "{form.control.disabled.surface-color}", + "$type": "color", + "$value": "#fafafa", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.interactive-disabled}", + "group": "components", + "key": "{form.control.disabled.surface-color}" + }, + "name": "token-form-control-disabled-surface-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "disabled", + "surface-color" + ] + }, + "token-form-control-disabled-border-color": { + "key": "{form.control.disabled.border-color}", + "$type": "color", + "$value": "#656a7633", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.border.primary}", + "group": "components", + "key": "{form.control.disabled.border-color}" + }, + "name": "token-form-control-disabled-border-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "disabled", + "border-color" + ] + }, + "token-form-control-padding": { + "key": "{form.control.padding}", + "$type": "dimension", + "$value": "7px", + "unit": "px", + "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma.", + "original": { + "$type": "dimension", + "$value": "7", + "unit": "px", + "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma.", + "key": "{form.control.padding}" + }, + "name": "token-form-control-padding", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "padding" + ] + }, + "token-form-control-border-radius": { + "key": "{form.control.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{form.control.border.radius}" + }, + "name": "token-form-control-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "border", + "radius" + ] + }, + "token-form-control-border-width": { + "key": "{form.control.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.control.border.width}" + }, + "name": "token-form-control-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "border", + "width" + ] + }, + "token-form-radio-size": { + "key": "{form.radio.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.radio.size}" + }, + "name": "token-form-radio-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "size" + ] + }, + "token-form-radio-border-width": { + "key": "{form.radio.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.radio.border.width}" + }, + "name": "token-form-radio-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "border", + "width" + ] + }, + "token-form-radio-background-image-size": { + "key": "{form.radio.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.radio.background-image.size}" + }, + "name": "token-form-radio-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "background-image", + "size" + ] + }, + "token-form-radio-background-image-data-url": { + "key": "{form.radio.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "key": "{form.radio.background-image.data-url}" + }, + "name": "token-form-radio-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "background-image", + "data-url" + ] + }, + "token-form-radio-background-image-data-url-disabled": { + "key": "{form.radio.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "key": "{form.radio.background-image.data-url-disabled}" + }, + "name": "token-form-radio-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "background-image", + "data-url-disabled" + ] + }, + "token-form-radiocard-group-gap": { + "key": "{form.radiocard-group.gap}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.radiocard-group.gap}" + }, + "name": "token-form-radiocard-group-gap", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard-group", + "gap" + ] + }, + "token-form-radiocard-border-width": { + "key": "{form.radiocard.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.radiocard.border.width}" + }, + "name": "token-form-radiocard-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "width" + ] + }, + "token-form-radiocard-border-radius": { + "key": "{form.radiocard.border.radius}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{form.radiocard.border.radius}" + }, + "name": "token-form-radiocard-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "radius" + ] + }, + "token-form-radiocard-border-color-default": { + "key": "{form.radiocard.border.color.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.surface.primary}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{form.radiocard.border.color.default}" + }, + "name": "token-form-radiocard-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "default" + ] + }, + "token-form-radiocard-border-color-focus": { + "key": "{form.radiocard.border.color.focus}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "original": { + "$type": "color", + "$value": "{color.focus.action.internal}", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "key": "{form.radiocard.border.color.focus}" + }, + "name": "token-form-radiocard-border-color-focus", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "focus" + ] + }, + "token-form-radiocard-border-color-default-checked": { + "key": "{form.radiocard.border.color.default-checked}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "key": "{form.radiocard.border.color.default-checked}" + }, + "name": "token-form-radiocard-border-color-default-checked", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "default-checked" + ] + }, + "token-form-radiocard-content-padding": { + "key": "{form.radiocard.content-padding}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{form.radiocard.content-padding}" + }, + "name": "token-form-radiocard-content-padding", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "content-padding" + ] + }, + "token-form-radiocard-control-padding": { + "key": "{form.radiocard.control-padding}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{form.radiocard.control-padding}" + }, + "name": "token-form-radiocard-control-padding", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "control-padding" + ] + }, + "token-form-radiocard-transition-duration": { + "key": "{form.radiocard.transition.duration}", + "$type": "duration", + "$value": "0.2s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.2", + "unit": "s", + "key": "{form.radiocard.transition.duration}" + }, + "name": "token-form-radiocard-transition-duration", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "transition", + "duration" + ] + }, + "token-form-select-background-image-size": { + "key": "{form.select.background-image.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.select.background-image.size}" + }, + "name": "token-form-select-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "size" + ] + }, + "token-form-select-background-image-position-right-x": { + "key": "{form.select.background-image.position-right-x}", + "$type": "dimension", + "$value": "7px", + "original": { + "$type": "dimension", + "$value": "{form.control.padding}", + "key": "{form.select.background-image.position-right-x}" + }, + "name": "token-form-select-background-image-position-right-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "position-right-x" + ] + }, + "token-form-select-background-image-position-top-y": { + "key": "{form.select.background-image.position-top-y}", + "$type": "dimension", + "$value": "9px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "9", + "unit": "px", + "key": "{form.select.background-image.position-top-y}" + }, + "name": "token-form-select-background-image-position-top-y", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "position-top-y" + ] + }, + "token-form-select-background-image-data-url": { + "key": "{form.select.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "key": "{form.select.background-image.data-url}" + }, + "name": "token-form-select-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "data-url" + ] + }, + "token-form-select-background-image-data-url-disabled": { + "key": "{form.select.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "key": "{form.select.background-image.data-url-disabled}" + }, + "name": "token-form-select-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "data-url-disabled" + ] + }, + "token-form-text-input-background-image-size": { + "key": "{form.text-input.background-image.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.text-input.background-image.size}" + }, + "name": "token-form-text-input-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "size" + ] + }, + "token-form-text-input-background-image-position-x": { + "key": "{form.text-input.background-image.position-x}", + "$type": "dimension", + "$value": "7px", + "original": { + "$type": "dimension", + "$value": "{form.control.padding}", + "key": "{form.text-input.background-image.position-x}" + }, + "name": "token-form-text-input-background-image-position-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "position-x" + ] + }, + "token-form-text-input-background-image-data-url-date": { + "key": "{form.text-input.background-image.data-url-date}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-date}" + }, + "name": "token-form-text-input-background-image-data-url-date", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-date" + ] + }, + "token-form-text-input-background-image-data-url-time": { + "key": "{form.text-input.background-image.data-url-time}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-time}" + }, + "name": "token-form-text-input-background-image-data-url-time", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-time" + ] + }, + "token-form-text-input-background-image-data-url-search": { + "key": "{form.text-input.background-image.data-url-search}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-search}" + }, + "name": "token-form-text-input-background-image-data-url-search", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search" + ] + }, + "token-form-text-input-background-image-data-url-search-cancel": { + "key": "{form.text-input.background-image.data-url-search-cancel}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-search-cancel}" + }, + "name": "token-form-text-input-background-image-data-url-search-cancel", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search-cancel" + ] + }, + "token-form-text-input-background-image-data-url-search-loading": { + "key": "{form.text-input.background-image.data-url-search-loading}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color and animation are hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color and animation are hardcoded here!", + "key": "{form.text-input.background-image.data-url-search-loading}" + }, + "name": "token-form-text-input-background-image-data-url-search-loading", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search-loading" + ] + }, + "token-form-toggle-width": { + "key": "{form.toggle.width}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{form.toggle.width}" + }, + "name": "token-form-toggle-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "width" + ] + }, + "token-form-toggle-height": { + "key": "{form.toggle.height}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.toggle.height}" + }, + "name": "token-form-toggle-height", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "height" + ] + }, + "token-form-toggle-base-surface-color-default": { + "key": "{form.toggle.base.surface-color.default}", + "$type": "color", + "$value": "#f1f2f3", + "group": "components", + "comment": "the toggle has a different base surface color, compared to the other controls", + "original": { + "$type": "color", + "$value": "{color.surface.strong}", + "group": "components", + "comment": "the toggle has a different base surface color, compared to the other controls", + "key": "{form.toggle.base.surface-color.default}" + }, + "name": "token-form-toggle-base-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "base", + "surface-color", + "default" + ] + }, + "token-form-toggle-border-radius": { + "key": "{form.toggle.border.radius}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{form.toggle.border.radius}" + }, + "name": "token-form-toggle-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "border", + "radius" + ] + }, + "token-form-toggle-border-width": { + "key": "{form.toggle.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.toggle.border.width}" + }, + "name": "token-form-toggle-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "border", + "width" + ] + }, + "token-form-toggle-background-image-size": { + "key": "{form.toggle.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.toggle.background-image.size}" + }, + "name": "token-form-toggle-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "size" + ] + }, + "token-form-toggle-background-image-position-x": { + "key": "{form.toggle.background-image.position-x}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{form.toggle.background-image.position-x}" + }, + "name": "token-form-toggle-background-image-position-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "position-x" + ] + }, + "token-form-toggle-background-image-data-url": { + "key": "{form.toggle.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.toggle.background-image.data-url}" + }, + "name": "token-form-toggle-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "data-url" + ] + }, + "token-form-toggle-background-image-data-url-disabled": { + "key": "{form.toggle.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.toggle.background-image.data-url-disabled}" + }, + "name": "token-form-toggle-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "data-url-disabled" + ] + }, + "token-form-toggle-transition-duration": { + "key": "{form.toggle.transition.duration}", + "$type": "duration", + "$value": "0.2s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.2", + "unit": "s", + "key": "{form.toggle.transition.duration}" + }, + "name": "token-form-toggle-transition-duration", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "transition", + "duration" + ] + }, + "token-form-toggle-transition-timing-function": { + "key": "{form.toggle.transition.timing-function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.68, -0.2, 0.265, 1.15)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.68, + -0.2, + 0.265, + 1.15 + ], + "key": "{form.toggle.transition.timing-function}" + }, + "name": "token-form-toggle-transition-timing-function", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "transition", + "timing-function" + ] + }, + "token-form-toggle-thumb-size": { + "key": "{form.toggle.thumb-size}", + "$type": "dimension", + "$value": "16px", + "original": { + "$type": "dimension", + "$value": "{form.toggle.height}", + "key": "{form.toggle.thumb-size}" + }, + "name": "token-form-toggle-thumb-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "thumb-size" + ] + }, + "token-icon-tile-border-color-overlay": { + "key": "{icon-tile.border.color.overlay}", + "$type": "color", + "$value": "#656a7633", + "$modes": { + "default": "#656a7633", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{color.border.primary}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle02}", + "cds-g10": "{carbon.themes.g10.borderSubtle02}", + "cds-g90": "{carbon.themes.g90.borderSubtle02}", + "cds-g100": "{carbon.themes.g100.borderSubtle02}" + }, + "key": "{icon-tile.border.color.overlay}" + }, + "name": "token-icon-tile-border-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "overlay" + ] + }, + "token-icon-tile-border-color-logo": { + "key": "{icon-tile.border.color.logo}", + "$type": "color", + "$value": "#656a7633", + "$modes": { + "default": "#656a7633", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{color.border.primary}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle01}", + "cds-g10": "{carbon.themes.g10.borderSubtle01}", + "cds-g90": "{carbon.themes.g90.borderSubtle01}", + "cds-g100": "{carbon.themes.g100.borderSubtle01}" + }, + "key": "{icon-tile.border.color.logo}" + }, + "name": "token-icon-tile-border-color-logo", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "logo" + ] + }, + "token-icon-tile-surface-color-overlay": { + "key": "{icon-tile.surface.color.overlay}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{color.surface.primary}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.white.layer02}", + "cds-g10": "{carbon.themes.g10.layer02}", + "cds-g90": "{carbon.themes.g90.layer02}", + "cds-g100": "{carbon.themes.g100.layer02}" + }, + "key": "{icon-tile.surface.color.overlay}" + }, + "name": "token-icon-tile-surface-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "surface", + "color", + "overlay" + ] + }, + "token-pagination-nav-control-height": { + "key": "{pagination.nav.control.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{pagination.nav.control.height}" + }, + "name": "token-pagination-nav-control-height", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "height" + ] + }, + "token-pagination-nav-control-padding-horizontal": { + "key": "{pagination.nav.control.padding.horizontal}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{pagination.nav.control.padding.horizontal}" + }, + "name": "token-pagination-nav-control-padding-horizontal", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "padding", + "horizontal" + ] + }, + "token-pagination-nav-control-focus-inset": { + "key": "{pagination.nav.control.focus-inset}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{pagination.nav.control.focus-inset}" + }, + "name": "token-pagination-nav-control-focus-inset", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "focus-inset" + ] + }, + "token-pagination-nav-control-icon-spacing": { + "key": "{pagination.nav.control.icon-spacing}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{pagination.nav.control.icon-spacing}" + }, + "name": "token-pagination-nav-control-icon-spacing", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "icon-spacing" + ] + }, + "token-pagination-nav-indicator-height": { + "key": "{pagination.nav.indicator.height}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{pagination.nav.indicator.height}" + }, + "name": "token-pagination-nav-indicator-height", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "indicator", + "height" + ] + }, + "token-pagination-nav-indicator-spacing": { + "key": "{pagination.nav.indicator.spacing}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{pagination.nav.indicator.spacing}" + }, + "name": "token-pagination-nav-indicator-spacing", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "indicator", + "spacing" + ] + }, + "token-pagination-child-spacing-vertical": { + "key": "{pagination.child.spacing.vertical}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{pagination.child.spacing.vertical}" + }, + "name": "token-pagination-child-spacing-vertical", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "child", + "spacing", + "vertical" + ] + }, + "token-pagination-child-spacing-horizontal": { + "key": "{pagination.child.spacing.horizontal}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "key": "{pagination.child.spacing.horizontal}" + }, + "name": "token-pagination-child-spacing-horizontal", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "child", + "spacing", + "horizontal" + ] + }, + "token-rich-tooltip-bubble-max-width": { + "key": "{rich-tooltip.bubble.max-width}", + "$type": "dimension", + "$value": "280px", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "original": { + "$type": "dimension", + "$value": "280", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "key": "{rich-tooltip.bubble.max-width}" + }, + "name": "token-rich-tooltip-bubble-max-width", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "max-width" + ] + }, + "token-rich-tooltip-bubble-border-color": { + "key": "{rich-tooltip.bubble.border.color}", + "$value": "#656a7633", + "$modes": { + "default": "#656a7633", + "cds-g0": "#656a7633", + "cds-g10": "#656a7633", + "cds-g90": "#656a7633", + "cds-g100": "#656a7633" + }, + "original": { + "$value": "{elevation.higher.border.color}", + "$modes": { + "default": "{elevation.higher.border.color}", + "cds-g0": "{color.palette.alpha-200}", + "cds-g10": "{color.palette.alpha-200}", + "cds-g90": "{color.palette.alpha-200}", + "cds-g100": "{color.palette.alpha-200}" + }, + "key": "{rich-tooltip.bubble.border.color}" + }, + "name": "token-rich-tooltip-bubble-border-color", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "border", + "color" + ] + }, + "token-rich-tooltip-bubble-border-radius": { + "key": "{rich-tooltip.bubble.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "$modes": { + "default": "5px", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "original": { + "$type": "dimension", + "$value": "{border.radius.small}", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "key": "{rich-tooltip.bubble.border.radius}" + }, + "name": "token-rich-tooltip-bubble-border-radius", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "border", + "radius" + ] + }, + "token-rich-tooltip-bubble-arrow-size": { + "key": "{rich-tooltip.bubble.arrow.size}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{rich-tooltip.bubble.arrow.size}" + }, + "name": "token-rich-tooltip-bubble-arrow-size", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "arrow", + "size" + ] + }, + "token-rich-tooltip-toggle-gap-horizontal": { + "key": "{rich-tooltip.toggle.gap.horizontal}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{rich-tooltip.toggle.gap.horizontal}" + }, + "name": "token-rich-tooltip-toggle-gap-horizontal", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "gap", + "horizontal" + ] + }, + "token-rich-tooltip-toggle-foreground-color-default": { + "key": "{rich-tooltip.toggle.foreground.color.default}", + "$value": "#0c0c0e", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$value": "{color.foreground.strong}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.default}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-default", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "default" + ] + }, + "token-rich-tooltip-toggle-foreground-color-hover": { + "key": "{rich-tooltip.toggle.foreground.color.hover}", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.hover}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-hover", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "hover" + ] + }, + "token-rich-tooltip-toggle-foreground-color-active": { + "key": "{rich-tooltip.toggle.foreground.color.active}", + "$value": "#656a76", + "$modes": { + "default": "#656a76", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$value": "{color.foreground.faint}", + "$modes": { + "default": "{color.foreground.faint}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.active}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-active", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "active" + ] + }, + "token-rich-tooltip-toggle-icon-size": { + "key": "{rich-tooltip.toggle.icon.size}", + "$type": "dimension", + "$value": "1em", + "unit": "em", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, + "original": { + "$type": "dimension", + "$value": "1", + "unit": "em", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, + "key": "{rich-tooltip.toggle.icon.size}" + }, + "name": "token-rich-tooltip-toggle-icon-size", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "icon", + "size" + ] + }, + "token-tabs-tab-height-medium": { + "key": "{tabs.tab.height.medium}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{tabs.tab.height.medium}" + }, + "name": "token-tabs-tab-height-medium", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "height", + "medium" + ] + }, + "token-tabs-tab-height-large": { + "key": "{tabs.tab.height.large}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{tabs.tab.height.large}" + }, + "name": "token-tabs-tab-height-large", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "height", + "large" + ] + }, + "token-tabs-tab-padding-horizontal-medium": { + "key": "{tabs.tab.padding.horizontal.medium}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{tabs.tab.padding.horizontal.medium}" + }, + "name": "token-tabs-tab-padding-horizontal-medium", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "padding", + "horizontal", + "medium" + ] + }, + "token-tabs-tab-padding-horizontal-large": { + "key": "{tabs.tab.padding.horizontal.large}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "key": "{tabs.tab.padding.horizontal.large}" + }, + "name": "token-tabs-tab-padding-horizontal-large", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "padding", + "horizontal", + "large" + ] + }, + "token-tabs-tab-padding-vertical": { + "key": "{tabs.tab.padding.vertical}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "key": "{tabs.tab.padding.vertical}" + }, + "name": "token-tabs-tab-padding-vertical", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "padding", + "vertical" + ] + }, + "token-tabs-tab-border-radius": { + "key": "{tabs.tab.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{tabs.tab.border-radius}" + }, + "name": "token-tabs-tab-border-radius", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "border-radius" + ] + }, + "token-tabs-tab-focus-inset": { + "key": "{tabs.tab.focus-inset}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{tabs.tab.focus-inset}" + }, + "name": "token-tabs-tab-focus-inset", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "focus-inset" + ] + }, + "token-tabs-tab-gutter": { + "key": "{tabs.tab.gutter}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{tabs.tab.gutter}" + }, + "name": "token-tabs-tab-gutter", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "gutter" + ] + }, + "token-tabs-indicator-height": { + "key": "{tabs.indicator.height}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{tabs.indicator.height}" + }, + "name": "token-tabs-indicator-height", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "indicator", + "height" + ] + }, + "token-tabs-indicator-transition-function": { + "key": "{tabs.indicator.transition.function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.5, 1, 0.89, 1)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.5, + 1, + 0.89, + 1 + ], + "key": "{tabs.indicator.transition.function}" + }, + "name": "token-tabs-indicator-transition-function", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "indicator", + "transition", + "function" + ] + }, + "token-tabs-indicator-transition-duration": { + "key": "{tabs.indicator.transition.duration}", + "$type": "duration", + "$value": "0.6s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.6", + "unit": "s", + "key": "{tabs.indicator.transition.duration}" + }, + "name": "token-tabs-indicator-transition-duration", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "indicator", + "transition", + "duration" + ] + }, + "token-tabs-divider-height": { + "key": "{tabs.divider.height}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{tabs.divider.height}" + }, + "name": "token-tabs-divider-height", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "divider", + "height" + ] + }, + "token-tooltip-max-width": { + "key": "{tooltip.max-width}", + "$type": "dimension", + "$value": "280px", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "original": { + "$type": "dimension", + "$value": "280", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "key": "{tooltip.max-width}" + }, + "name": "token-tooltip-max-width", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "max-width" + ] + }, + "token-tooltip-padding-horizontal": { + "key": "{tooltip.padding.horizontal}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16px", + "cds-g10": "16px", + "cds-g90": "16px", + "cds-g100": "16px" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "{carbon.themes.white.spacing05}", + "cds-g10": "{carbon.themes.g10.spacing05}", + "cds-g90": "{carbon.themes.g90.spacing05}", + "cds-g100": "{carbon.themes.g100.spacing05}" + }, + "key": "{tooltip.padding.horizontal}" + }, + "name": "token-tooltip-padding-horizontal", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "horizontal" + ] + }, + "token-tooltip-padding-vertical": { + "key": "{tooltip.padding.vertical}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "16px", + "cds-g10": "16px", + "cds-g90": "16px", + "cds-g100": "16px" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "{carbon.themes.white.spacing05}", + "cds-g10": "{carbon.themes.g10.spacing05}", + "cds-g90": "{carbon.themes.g90.spacing05}", + "cds-g100": "{carbon.themes.g100.spacing05}" + }, + "key": "{tooltip.padding.vertical}" + }, + "name": "token-tooltip-padding-vertical", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "vertical" + ] + }, + "token-tooltip-border-radius": { + "key": "{tooltip.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "$modes": { + "default": "5px", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "original": { + "$type": "dimension", + "$value": "{border.radius.small}", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "key": "{tooltip.border.radius}" + }, + "name": "token-tooltip-border-radius", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "border", + "radius" + ] + }, + "token-tooltip-caret-clip-path": { + "key": "{tooltip.caret.clip-path}", + "$value": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "$modes": { + "default": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "cds-g0": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g10": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g90": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g100": "polygon(0 100%, 50% 0, 100% 100%)" + }, + "original": { + "$value": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "$modes": { + "default": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "cds-g0": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g10": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g90": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g100": "polygon(0 100%, 50% 0, 100% 100%)" + }, + "key": "{tooltip.caret.clip-path}" + }, + "name": "token-tooltip-caret-clip-path", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "clip-path" + ] + }, + "token-tooltip-caret-height": { + "key": "{tooltip.caret.height}", + "$type": "dimension", + "$value": "7px", + "unit": "px", + "$modes": { + "default": "7", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "original": { + "$type": "dimension", + "$value": "7", + "unit": "px", + "$modes": { + "default": "7", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "key": "{tooltip.caret.height}" + }, + "name": "token-tooltip-caret-height", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "height" + ] + }, + "token-tooltip-caret-width": { + "key": "{tooltip.caret.width}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{tooltip.caret.width}" + }, + "name": "token-tooltip-caret-width", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "width" + ] + }, + "token-tooltip-focus-offset": { + "key": "{tooltip.focus-offset}", + "$type": "dimension", + "$value": "-2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "-2", + "unit": "px", + "key": "{tooltip.focus-offset}" + }, + "name": "token-tooltip-focus-offset", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "focus-offset" + ] + }, + "token-tooltip-transition-function": { + "key": "{tooltip.transition.function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.54, 1.5, 0.38, 1.11)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.54, + 1.5, + 0.38, + 1.11 + ], + "key": "{tooltip.transition.function}" + }, + "name": "token-tooltip-transition-function", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "transition", + "function" + ] + }, + "token-typography-font-stack-display": { + "key": "{typography.font-stack.display}", + "$type": "font-family", + "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.sans.display.combined}", + "$modes": { + "default": "{typography.font-stack.sans.display.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.font-stack.display}" + }, + "name": "token-typography-font-stack-display", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-stack", + "display" + ] + }, + "token-typography-font-stack-text": { + "key": "{typography.font-stack.text}", + "$type": "font-family", + "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.sans.text.combined}", + "$modes": { + "default": "{typography.font-stack.sans.text.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.font-stack.text}" + }, + "name": "token-typography-font-stack-text", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-stack", + "text" + ] + }, + "token-typography-font-stack-code": { + "key": "{typography.font-stack.code}", + "$type": "font-family", + "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "default": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.monospace.code.combined}", + "$modes": { + "default": "{typography.font-stack.monospace.code.combined}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.font-stack.code}" + }, + "name": "token-typography-font-stack-code", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-stack", + "code" + ] + }, + "token-typography-font-weight-regular": { + "key": "{typography.font-weight.regular}", + "$type": "font-weight", + "$value": "400", + "$modes": { + "default": "400", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "400", + "$modes": { + "default": "400", + "cds-g0": "{carbon.typography.font-weight.regular}", + "cds-g10": "{carbon.typography.font-weight.regular}", + "cds-g90": "{carbon.typography.font-weight.regular}", + "cds-g100": "{carbon.typography.font-weight.regular}" + }, + "key": "{typography.font-weight.regular}" + }, + "name": "token-typography-font-weight-regular", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "regular" + ] + }, + "token-typography-font-weight-medium": { + "key": "{typography.font-weight.medium}", + "$type": "font-weight", + "$value": "500", + "$modes": { + "default": "500", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "500", + "$modes": { + "default": "500", + "cds-g0": "{carbon.typography.font-weight.regular}", + "cds-g10": "{carbon.typography.font-weight.regular}", + "cds-g90": "{carbon.typography.font-weight.regular}", + "cds-g100": "{carbon.typography.font-weight.regular}" + }, + "key": "{typography.font-weight.medium}" + }, + "name": "token-typography-font-weight-medium", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "medium" + ] + }, + "token-typography-font-weight-semibold": { + "key": "{typography.font-weight.semibold}", + "$type": "font-weight", + "$value": "600", + "$modes": { + "default": "600", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "600", + "$modes": { + "default": "600", + "cds-g0": "{carbon.typography.font-weight.semibold}", + "cds-g10": "{carbon.typography.font-weight.semibold}", + "cds-g90": "{carbon.typography.font-weight.semibold}", + "cds-g100": "{carbon.typography.font-weight.semibold}" + }, + "key": "{typography.font-weight.semibold}" + }, + "name": "token-typography-font-weight-semibold", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "semibold" + ] + }, + "token-typography-font-weight-bold": { + "key": "{typography.font-weight.bold}", + "$type": "font-weight", + "$value": "700", + "$modes": { + "default": "700", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "700", + "$modes": { + "default": "700", + "cds-g0": "{carbon.typography.font-weight.semibold}", + "cds-g10": "{carbon.typography.font-weight.semibold}", + "cds-g90": "{carbon.typography.font-weight.semibold}", + "cds-g100": "{carbon.typography.font-weight.semibold}" + }, + "key": "{typography.font-weight.bold}" + }, + "name": "token-typography-font-weight-bold", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "bold" + ] + }, + "token-typography-display-500-font-family": { + "key": "{typography.display-500.font-family}", + "$type": "font-family", + "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-500.font-family}" + }, + "name": "token-typography-display-500-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "font-family" + ] + }, + "token-typography-display-500-font-size": { + "key": "{typography.display-500.font-size}", + "$type": "font-size", + "$value": "1.875rem", + "unit": "px", + "comment": "30px/1.875rem", + "$modes": { + "default": "30", + "cds-g0": "2rem", + "cds-g10": "2rem", + "cds-g90": "2rem", + "cds-g100": "2rem" + }, + "original": { + "$type": "font-size", + "$value": "30", + "unit": "px", + "comment": "30px/1.875rem", + "$modes": { + "default": "30", + "cds-g0": "{carbon.typography.heading05.font-size}", + "cds-g10": "{carbon.typography.heading05.font-size}", + "cds-g90": "{carbon.typography.heading05.font-size}", + "cds-g100": "{carbon.typography.heading05.font-size}" + }, + "key": "{typography.display-500.font-size}" + }, + "name": "token-typography-display-500-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "font-size" + ] + }, + "token-typography-display-500-line-height": { + "key": "{typography.display-500.line-height}", + "$type": "number", + "$value": 1.2666, + "comment": "38px", + "$modes": { + "default": 1.2666, + "cds-g0": 1.25, + "cds-g10": 1.25, + "cds-g90": 1.25, + "cds-g100": 1.25 + }, + "original": { + "$type": "number", + "$value": 1.2666, + "comment": "38px", + "$modes": { + "default": 1.2666, + "cds-g0": "{carbon.typography.heading05.line-height}", + "cds-g10": "{carbon.typography.heading05.line-height}", + "cds-g90": "{carbon.typography.heading05.line-height}", + "cds-g100": "{carbon.typography.heading05.line-height}" + }, + "key": "{typography.display-500.line-height}" + }, + "name": "token-typography-display-500-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "line-height" + ] + }, + "token-typography-display-500-letter-spacing": { + "key": "{typography.display-500.letter-spacing}", + "$type": "letter-spacing", + "$value": "-0.5px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading05.letter-spacing}", + "cds-g10": "{carbon.typography.heading05.letter-spacing}", + "cds-g90": "{carbon.typography.heading05.letter-spacing}", + "cds-g100": "{carbon.typography.heading05.letter-spacing}" + }, + "key": "{typography.display-500.letter-spacing}" + }, + "name": "token-typography-display-500-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "letter-spacing" + ] + }, + "token-typography-display-400-font-family": { + "key": "{typography.display-400.font-family}", + "$type": "font-family", + "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-400.font-family}" + }, + "name": "token-typography-display-400-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "font-family" + ] + }, + "token-typography-display-400-font-size": { + "key": "{typography.display-400.font-size}", + "$type": "font-size", + "$value": "1.5rem", + "unit": "px", + "comment": "24px/1.5rem", + "$modes": { + "default": "24", + "cds-g0": "1.75rem", + "cds-g10": "1.75rem", + "cds-g90": "1.75rem", + "cds-g100": "1.75rem" + }, + "original": { + "$type": "font-size", + "$value": "24", + "unit": "px", + "comment": "24px/1.5rem", + "$modes": { + "default": "24", + "cds-g0": "{carbon.typography.heading04.font-size}", + "cds-g10": "{carbon.typography.heading04.font-size}", + "cds-g90": "{carbon.typography.heading04.font-size}", + "cds-g100": "{carbon.typography.heading04.font-size}" + }, + "key": "{typography.display-400.font-size}" + }, + "name": "token-typography-display-400-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "font-size" + ] + }, + "token-typography-display-400-line-height": { + "key": "{typography.display-400.line-height}", + "$type": "number", + "$value": 1.3333, + "comment": "32px", + "$modes": { + "default": 1.3333, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, + "original": { + "$type": "number", + "$value": 1.3333, + "comment": "32px", + "$modes": { + "default": 1.3333, + "cds-g0": "{carbon.typography.heading04.line-height}", + "cds-g10": "{carbon.typography.heading04.line-height}", + "cds-g90": "{carbon.typography.heading04.line-height}", + "cds-g100": "{carbon.typography.heading04.line-height}" + }, + "key": "{typography.display-400.line-height}" + }, + "name": "token-typography-display-400-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "line-height" + ] + }, + "token-typography-display-400-letter-spacing": { + "key": "{typography.display-400.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": 0, + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.heading04.letter-spacing}", + "cds-g10": "{carbon.typography.heading04.letter-spacing}", + "cds-g90": "{carbon.typography.heading04.letter-spacing}", + "cds-g100": "{carbon.typography.heading04.letter-spacing}" + }, + "key": "{typography.display-400.letter-spacing}" + }, + "name": "token-typography-display-400-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "letter-spacing" + ] + }, + "token-typography-display-300-font-family": { + "key": "{typography.display-300.font-family}", + "$type": "font-family", + "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-300.font-family}" + }, + "name": "token-typography-display-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "font-family" + ] + }, + "token-typography-display-300-font-size": { + "key": "{typography.display-300.font-size}", + "$type": "font-size", + "$value": "1.125rem", + "unit": "px", + "comment": "18px/1.125rem", + "$modes": { + "default": "18", + "cds-g0": "1.25rem", + "cds-g10": "1.25rem", + "cds-g90": "1.25rem", + "cds-g100": "1.25rem" + }, + "original": { + "$type": "font-size", + "$value": "18", + "unit": "px", + "comment": "18px/1.125rem", + "$modes": { + "default": "18", + "cds-g0": "{carbon.typography.heading03.font-size}", + "cds-g10": "{carbon.typography.heading03.font-size}", + "cds-g90": "{carbon.typography.heading03.font-size}", + "cds-g100": "{carbon.typography.heading03.font-size}" + }, + "key": "{typography.display-300.font-size}" + }, + "name": "token-typography-display-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "font-size" + ] + }, + "token-typography-display-300-line-height": { + "key": "{typography.display-300.line-height}", + "$type": "number", + "$value": 1.3333, + "comment": "24px", + "$modes": { + "default": 1.3333, + "cds-g0": 1.4, + "cds-g10": 1.4, + "cds-g90": 1.4, + "cds-g100": 1.4 + }, + "original": { + "$type": "number", + "$value": 1.3333, + "comment": "24px", + "$modes": { + "default": 1.3333, + "cds-g0": "{carbon.typography.heading03.line-height}", + "cds-g10": "{carbon.typography.heading03.line-height}", + "cds-g90": "{carbon.typography.heading03.line-height}", + "cds-g100": "{carbon.typography.heading03.line-height}" + }, + "key": "{typography.display-300.line-height}" + }, + "name": "token-typography-display-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "line-height" + ] + }, + "token-typography-display-300-letter-spacing": { + "key": "{typography.display-300.letter-spacing}", + "$type": "letter-spacing", + "$value": "-0.5px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading03.letter-spacing}", + "cds-g10": "{carbon.typography.heading03.letter-spacing}", + "cds-g90": "{carbon.typography.heading03.letter-spacing}", + "cds-g100": "{carbon.typography.heading03.letter-spacing}" + }, + "key": "{typography.display-300.letter-spacing}" + }, + "name": "token-typography-display-300-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "letter-spacing" + ] + }, + "token-typography-display-200-font-family": { + "key": "{typography.display-200.font-family}", + "$type": "font-family", + "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-200.font-family}" + }, + "name": "token-typography-display-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "font-family" + ] + }, + "token-typography-display-200-font-size": { + "key": "{typography.display-200.font-size}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.heading02.font-size}", + "cds-g10": "{carbon.typography.heading02.font-size}", + "cds-g90": "{carbon.typography.heading02.font-size}", + "cds-g100": "{carbon.typography.heading02.font-size}" + }, + "key": "{typography.display-200.font-size}" + }, + "name": "token-typography-display-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "font-size" + ] + }, + "token-typography-display-200-line-height": { + "key": "{typography.display-200.line-height}", + "$type": "number", + "$value": 1.5, + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": "{carbon.typography.heading02.line-height}", + "cds-g10": "{carbon.typography.heading02.line-height}", + "cds-g90": "{carbon.typography.heading02.line-height}", + "cds-g100": "{carbon.typography.heading02.line-height}" + }, + "key": "{typography.display-200.line-height}" + }, + "name": "token-typography-display-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "line-height" + ] + }, + "token-typography-display-200-letter-spacing": { + "key": "{typography.display-200.letter-spacing}", + "$type": "letter-spacing", + "$value": "-0.5px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading02.letter-spacing}", + "cds-g10": "{carbon.typography.heading02.letter-spacing}", + "cds-g90": "{carbon.typography.heading02.letter-spacing}", + "cds-g100": "{carbon.typography.heading02.letter-spacing}" + }, + "key": "{typography.display-200.letter-spacing}" + }, + "name": "token-typography-display-200-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "letter-spacing" + ] + }, + "token-typography-display-100-font-family": { + "key": "{typography.display-100.font-family}", + "$type": "font-family", + "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-100.font-family}" + }, + "name": "token-typography-display-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "font-family" + ] + }, + "token-typography-display-100-font-size": { + "key": "{typography.display-100.font-size}", + "$type": "font-size", + "$value": "0.8125rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.heading01.font-size}", + "cds-g10": "{carbon.typography.heading01.font-size}", + "cds-g90": "{carbon.typography.heading01.font-size}", + "cds-g100": "{carbon.typography.heading01.font-size}" + }, + "key": "{typography.display-100.font-size}" + }, + "name": "token-typography-display-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "font-size" + ] + }, + "token-typography-display-100-line-height": { + "key": "{typography.display-100.line-height}", + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": "{carbon.typography.heading01.line-height}", + "cds-g10": "{carbon.typography.heading01.line-height}", + "cds-g90": "{carbon.typography.heading01.line-height}", + "cds-g100": "{carbon.typography.heading01.line-height}" + }, + "key": "{typography.display-100.line-height}" + }, + "name": "token-typography-display-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "line-height" + ] + }, + "token-typography-display-100-letter-spacing": { + "key": "{typography.display-100.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0.16px", + "cds-g10": "0.16px", + "cds-g90": "0.16px", + "cds-g100": "0.16px" + }, + "original": { + "$type": "letter-spacing", + "$value": 0, + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.heading01.letter-spacing}", + "cds-g10": "{carbon.typography.heading01.letter-spacing}", + "cds-g90": "{carbon.typography.heading01.letter-spacing}", + "cds-g100": "{carbon.typography.heading01.letter-spacing}" + }, + "key": "{typography.display-100.letter-spacing}" + }, + "name": "token-typography-display-100-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "letter-spacing" + ] + }, + "token-typography-body-300-font-family": { + "key": "{typography.body-300.font-family}", + "$type": "font-family", + "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-300.font-family}" + }, + "name": "token-typography-body-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "font-family" + ] + }, + "token-typography-body-300-font-size": { + "key": "{typography.body-300.font-size}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.body02.font-size}", + "cds-g10": "{carbon.typography.body02.font-size}", + "cds-g90": "{carbon.typography.body02.font-size}", + "cds-g100": "{carbon.typography.body02.font-size}" + }, + "key": "{typography.body-300.font-size}" + }, + "name": "token-typography-body-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "font-size" + ] + }, + "token-typography-body-300-line-height": { + "key": "{typography.body-300.line-height}", + "$type": "number", + "$value": 1.5, + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": "{carbon.typography.body02.line-height}", + "cds-g10": "{carbon.typography.body02.line-height}", + "cds-g90": "{carbon.typography.body02.line-height}", + "cds-g100": "{carbon.typography.body02.line-height}" + }, + "key": "{typography.body-300.line-height}" + }, + "name": "token-typography-body-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "line-height" + ] + }, + "token-typography-body-200-font-family": { + "key": "{typography.body-200.font-family}", + "$type": "font-family", + "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-200.font-family}" + }, + "name": "token-typography-body-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "font-family" + ] + }, + "token-typography-body-200-font-size": { + "key": "{typography.body-200.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "{carbon.typography.body01.font-size}", + "cds-g10": "{carbon.typography.body01.font-size}", + "cds-g90": "{carbon.typography.body01.font-size}", + "cds-g100": "{carbon.typography.body01.font-size}" + }, + "key": "{typography.body-200.font-size}" + }, + "name": "token-typography-body-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "font-size" + ] + }, + "token-typography-body-200-line-height": { + "key": "{typography.body-200.line-height}", + "$type": "number", + "$value": 1.4286, + "comment": "20px", + "$modes": { + "default": 1.4286, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": 1.4286, + "comment": "20px", + "$modes": { + "default": 1.4286, + "cds-g0": "{carbon.typography.body01.line-height}", + "cds-g10": "{carbon.typography.body01.line-height}", + "cds-g90": "{carbon.typography.body01.line-height}", + "cds-g100": "{carbon.typography.body01.line-height}" + }, + "key": "{typography.body-200.line-height}" + }, + "name": "token-typography-body-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "line-height" + ] + }, + "token-typography-body-100-font-family": { + "key": "{typography.body-100.font-family}", + "$type": "font-family", + "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-100.font-family}" + }, + "name": "token-typography-body-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "font-family" + ] + }, + "token-typography-body-100-font-size": { + "key": "{typography.body-100.font-size}", + "$type": "font-size", + "$value": "0.8125rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.bodyCompact01.font-size}", + "cds-g10": "{carbon.typography.bodyCompact01.font-size}", + "cds-g90": "{carbon.typography.bodyCompact01.font-size}", + "cds-g100": "{carbon.typography.bodyCompact01.font-size}" + }, + "key": "{typography.body-100.font-size}" + }, + "name": "token-typography-body-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "font-size" + ] + }, + "token-typography-body-100-line-height": { + "key": "{typography.body-100.line-height}", + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, + "original": { + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": "{carbon.typography.bodyCompact01.line-height}", + "cds-g10": "{carbon.typography.bodyCompact01.line-height}", + "cds-g90": "{carbon.typography.bodyCompact01.line-height}", + "cds-g100": "{carbon.typography.bodyCompact01.line-height}" + }, + "key": "{typography.body-100.line-height}" + }, + "name": "token-typography-body-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "line-height" + ] + }, + "token-typography-code-300-font-family": { + "key": "{typography.code-300.font-family}", + "$type": "font-family", + "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "default": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-300.font-family}" + }, + "name": "token-typography-code-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "font-family" + ] + }, + "token-typography-code-300-font-size": { + "key": "{typography.code-300.font-size}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-300.font-size}" + }, + "name": "token-typography-code-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "font-size" + ] + }, + "token-typography-code-300-line-height": { + "key": "{typography.code-300.line-height}", + "$type": "number", + "$value": 1.25, + "comment": "20px", + "$modes": { + "default": 1.25, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": 1.25, + "comment": "20px", + "$modes": { + "default": 1.25, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-300.line-height}" + }, + "name": "token-typography-code-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "line-height" + ] + }, + "token-typography-code-200-font-family": { + "key": "{typography.code-200.font-family}", + "$type": "font-family", + "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "default": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-200.font-family}" + }, + "name": "token-typography-code-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "font-family" + ] + }, + "token-typography-code-200-font-size": { + "key": "{typography.code-200.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-200.font-size}" + }, + "name": "token-typography-code-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "font-size" + ] + }, + "token-typography-code-200-line-height": { + "key": "{typography.code-200.line-height}", + "$type": "number", + "$value": 1.125, + "comment": "18px", + "$modes": { + "default": 1.125, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": 1.125, + "comment": "18px", + "$modes": { + "default": 1.125, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-200.line-height}" + }, + "name": "token-typography-code-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "line-height" + ] + }, + "token-typography-code-100-font-family": { + "key": "{typography.code-100.font-family}", + "$type": "font-family", + "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "default": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-100.font-family}" + }, + "name": "token-typography-code-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "font-family" + ] + }, + "token-typography-code-100-font-size": { + "key": "{typography.code-100.font-size}", + "$type": "font-size", + "$value": "0.8125rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-100.font-size}" + }, + "name": "token-typography-code-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "font-size" + ] + }, + "token-typography-code-100-line-height": { + "key": "{typography.code-100.line-height}", + "$type": "number", + "$value": 1.23, + "comment": "16px", + "$modes": { + "default": 1.23, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, + "original": { + "$type": "number", + "$value": 1.23, + "comment": "16px", + "$modes": { + "default": 1.23, + "cds-g0": "{carbon.typography.code01.line-height}", + "cds-g10": "{carbon.typography.code01.line-height}", + "cds-g90": "{carbon.typography.code01.line-height}", + "cds-g100": "{carbon.typography.code01.line-height}" + }, + "key": "{typography.code-100.line-height}" + }, + "name": "token-typography-code-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "line-height" + ] + } + }, + "cds-g0": { + "token-border-radius-x-small": { + "key": "{border.radius.x-small}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.x-small}" + }, + "name": "token-border-radius-x-small", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "x-small" + ] + }, + "token-border-radius-small": { + "key": "{border.radius.small}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.small}" + }, + "name": "token-border-radius-small", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "small" + ] + }, + "token-border-radius-medium": { + "key": "{border.radius.medium}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.medium}" + }, + "name": "token-border-radius-medium", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "medium" + ] + }, + "token-border-radius-large": { + "key": "{border.radius.large}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.large}" + }, + "name": "token-border-radius-large", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "large" + ] + }, + "token-border-radius-rounded": { + "key": "{border.radius.rounded}", + "$type": "dimension", + "$value": "1000000000px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1000000000", + "unit": "px", + "key": "{border.radius.rounded}" + }, + "name": "token-border-radius-rounded", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "rounded" + ] + }, + "token-color-palette-blue-500": { + "key": "{color.palette.blue-500}", + "$type": "color", + "$value": "#001141", + "group": "palette", + "$modes": { + "default": "#1c345f", + "cds-g0": "#001141", + "cds-g10": "#001141", + "cds-g90": "#001141", + "cds-g100": "#001141" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.100}", + "group": "palette", + "$modes": { + "default": "#1c345f", + "cds-g0": "{carbon.color.blue.100}", + "cds-g10": "{carbon.color.blue.100}", + "cds-g90": "{carbon.color.blue.100}", + "cds-g100": "{carbon.color.blue.100}" + }, + "key": "{color.palette.blue-500}" + }, + "name": "token-color-palette-blue-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-500" + ] + }, + "token-color-palette-blue-400": { + "key": "{color.palette.blue-400}", + "$type": "color", + "$value": "#002d9c", + "group": "palette", + "$modes": { + "default": "#0046d1", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#002d9c", + "cds-g100": "#002d9c" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.80}", + "group": "palette", + "$modes": { + "default": "#0046d1", + "cds-g0": "{carbon.color.blue.80}", + "cds-g10": "{carbon.color.blue.80}", + "cds-g90": "{carbon.color.blue.80}", + "cds-g100": "{carbon.color.blue.80}" + }, + "key": "{color.palette.blue-400}" + }, + "name": "token-color-palette-blue-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-400" + ] + }, + "token-color-palette-blue-300": { + "key": "{color.palette.blue-300}", + "$type": "color", + "$value": "#0043ce", + "group": "palette", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.70}", + "group": "palette", + "$modes": { + "default": "#0c56e9", + "cds-g0": "{carbon.color.blue.70}", + "cds-g10": "{carbon.color.blue.70}", + "cds-g90": "{carbon.color.blue.70}", + "cds-g100": "{carbon.color.blue.70}" + }, + "key": "{color.palette.blue-300}" + }, + "name": "token-color-palette-blue-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-300" + ] + }, + "token-color-palette-blue-200": { + "key": "{color.palette.blue-200}", + "$type": "color", + "$value": "#0f62fe", + "group": "palette", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.60}", + "group": "palette", + "$modes": { + "default": "#1060ff", + "cds-g0": "{carbon.color.blue.60}", + "cds-g10": "{carbon.color.blue.60}", + "cds-g90": "{carbon.color.blue.60}", + "cds-g100": "{carbon.color.blue.60}" + }, + "key": "{color.palette.blue-200}" + }, + "name": "token-color-palette-blue-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-200" + ] + }, + "token-color-palette-blue-100": { + "key": "{color.palette.blue-100}", + "$type": "color", + "$value": "#d0e2ff", + "group": "palette", + "$modes": { + "default": "#cce3fe", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.20}", + "group": "palette", + "$modes": { + "default": "#cce3fe", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.20}", + "cds-g100": "{carbon.color.blue.20}" + }, + "key": "{color.palette.blue-100}" + }, + "name": "token-color-palette-blue-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-100" + ] + }, + "token-color-palette-blue-50": { + "key": "{color.palette.blue-50}", + "$type": "color", + "$value": "#edf5ff", + "group": "palette", + "$modes": { + "default": "#f2f8ff", + "cds-g0": "#edf5ff", + "cds-g10": "#edf5ff", + "cds-g90": "#edf5ff", + "cds-g100": "#edf5ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.10}", + "group": "palette", + "$modes": { + "default": "#f2f8ff", + "cds-g0": "{carbon.color.blue.10}", + "cds-g10": "{carbon.color.blue.10}", + "cds-g90": "{carbon.color.blue.10}", + "cds-g100": "{carbon.color.blue.10}" + }, + "key": "{color.palette.blue-50}" + }, + "name": "token-color-palette-blue-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-50" + ] + }, + "token-color-palette-purple-500": { + "key": "{color.palette.purple-500}", + "$type": "color", + "$value": "#31135e", + "group": "palette", + "$modes": { + "default": "#42215b", + "cds-g0": "#31135e", + "cds-g10": "#31135e", + "cds-g90": "#31135e", + "cds-g100": "#31135e" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.90}", + "group": "palette", + "$modes": { + "default": "#42215b", + "cds-g0": "{carbon.color.purple.90}", + "cds-g10": "{carbon.color.purple.90}", + "cds-g90": "{carbon.color.purple.90}", + "cds-g100": "{carbon.color.purple.90}" + }, + "key": "{color.palette.purple-500}" + }, + "name": "token-color-palette-purple-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-500" + ] + }, + "token-color-palette-purple-400": { + "key": "{color.palette.purple-400}", + "$type": "color", + "$value": "#6929c4", + "group": "palette", + "$modes": { + "default": "#7b00db", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.70}", + "group": "palette", + "$modes": { + "default": "#7b00db", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, + "key": "{color.palette.purple-400}" + }, + "name": "token-color-palette-purple-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-400" + ] + }, + "token-color-palette-purple-300": { + "key": "{color.palette.purple-300}", + "$type": "color", + "$value": "#8a3ffc", + "group": "palette", + "$modes": { + "default": "#911ced", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#8a3ffc", + "cds-g100": "#8a3ffc" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.60}", + "group": "palette", + "$modes": { + "default": "#911ced", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.60}", + "cds-g100": "{carbon.color.purple.60}" + }, + "key": "{color.palette.purple-300}" + }, + "name": "token-color-palette-purple-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-300" + ] + }, + "token-color-palette-purple-200": { + "key": "{color.palette.purple-200}", + "$type": "color", + "$value": "#a56eff", + "group": "palette", + "$modes": { + "default": "#a737ff", + "cds-g0": "#a56eff", + "cds-g10": "#a56eff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.50}", + "group": "palette", + "$modes": { + "default": "#a737ff", + "cds-g0": "{carbon.color.purple.50}", + "cds-g10": "{carbon.color.purple.50}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, + "key": "{color.palette.purple-200}" + }, + "name": "token-color-palette-purple-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-200" + ] + }, + "token-color-palette-purple-100": { + "key": "{color.palette.purple-100}", + "$type": "color", + "$value": "#e8daff", + "group": "palette", + "$modes": { + "default": "#ead2fe", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.20}", + "group": "palette", + "$modes": { + "default": "#ead2fe", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.20}" + }, + "key": "{color.palette.purple-100}" + }, + "name": "token-color-palette-purple-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-100" + ] + }, + "token-color-palette-purple-50": { + "key": "{color.palette.purple-50}", + "$type": "color", + "$value": "#f6f2ff", + "group": "palette", + "$modes": { + "default": "#f9f2ff", + "cds-g0": "#f6f2ff", + "cds-g10": "#f6f2ff", + "cds-g90": "#f6f2ff", + "cds-g100": "#f6f2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.10}", + "group": "palette", + "$modes": { + "default": "#f9f2ff", + "cds-g0": "{carbon.color.purple.10}", + "cds-g10": "{carbon.color.purple.10}", + "cds-g90": "{carbon.color.purple.10}", + "cds-g100": "{carbon.color.purple.10}" + }, + "key": "{color.palette.purple-50}" + }, + "name": "token-color-palette-purple-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-50" + ] + }, + "token-color-palette-green-500": { + "key": "{color.palette.green-500}", + "$type": "color", + "$value": "#044317", + "group": "palette", + "$modes": { + "default": "#054220", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#044317", + "cds-g100": "#044317" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.80}", + "group": "palette", + "$modes": { + "default": "#054220", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.80}", + "cds-g100": "{carbon.color.green.80}" + }, + "key": "{color.palette.green-500}" + }, + "name": "token-color-palette-green-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-500" + ] + }, + "token-color-palette-green-400": { + "key": "{color.palette.green-400}", + "$type": "color", + "$value": "#0e6027", + "group": "palette", + "$modes": { + "default": "#006619", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.70}", + "group": "palette", + "$modes": { + "default": "#006619", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, + "key": "{color.palette.green-400}" + }, + "name": "token-color-palette-green-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-400" + ] + }, + "token-color-palette-green-300": { + "key": "{color.palette.green-300}", + "$type": "color", + "$value": "#198038", + "group": "palette", + "$modes": { + "default": "#00781e", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#198038", + "cds-g100": "#198038" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.60}", + "group": "palette", + "$modes": { + "default": "#00781e", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.60}", + "cds-g100": "{carbon.color.green.60}" + }, + "key": "{color.palette.green-300}" + }, + "name": "token-color-palette-green-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-300" + ] + }, + "token-color-palette-green-200": { + "key": "{color.palette.green-200}", + "$type": "color", + "$value": "#24a148", + "group": "palette", + "$modes": { + "default": "#008a22", + "cds-g0": "#24a148", + "cds-g10": "#24a148", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.50}", + "group": "palette", + "$modes": { + "default": "#008a22", + "cds-g0": "{carbon.color.green.50}", + "cds-g10": "{carbon.color.green.50}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, + "key": "{color.palette.green-200}" + }, + "name": "token-color-palette-green-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-200" + ] + }, + "token-color-palette-green-100": { + "key": "{color.palette.green-100}", + "$type": "color", + "$value": "#a7f0ba", + "group": "palette", + "$modes": { + "default": "#cceeda", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.20}", + "group": "palette", + "$modes": { + "default": "#cceeda", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, + "key": "{color.palette.green-100}" + }, + "name": "token-color-palette-green-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-100" + ] + }, + "token-color-palette-green-50": { + "key": "{color.palette.green-50}", + "$type": "color", + "$value": "#defbe6", + "group": "palette", + "$modes": { + "default": "#f2fbf6", + "cds-g0": "#defbe6", + "cds-g10": "#defbe6", + "cds-g90": "#defbe6", + "cds-g100": "#defbe6" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.10}", + "group": "palette", + "$modes": { + "default": "#f2fbf6", + "cds-g0": "{carbon.color.green.10}", + "cds-g10": "{carbon.color.green.10}", + "cds-g90": "{carbon.color.green.10}", + "cds-g100": "{carbon.color.green.10}" + }, + "key": "{color.palette.green-50}" + }, + "name": "token-color-palette-green-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-50" + ] + }, + "token-color-palette-amber-500": { + "key": "{color.palette.amber-500}", + "$type": "color", + "$value": "#3e1a00", + "group": "palette", + "$modes": { + "default": "#542800", + "cds-g0": "#3e1a00", + "cds-g10": "#3e1a00", + "cds-g90": "#3e1a00", + "cds-g100": "#3e1a00" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.90}", + "group": "palette", + "$modes": { + "default": "#542800", + "cds-g0": "{carbon.color.orange.90}", + "cds-g10": "{carbon.color.orange.90}", + "cds-g90": "{carbon.color.orange.90}", + "cds-g100": "{carbon.color.orange.90}" + }, + "key": "{color.palette.amber-500}" + }, + "name": "token-color-palette-amber-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-500" + ] + }, + "token-color-palette-amber-400": { + "key": "{color.palette.amber-400}", + "$type": "color", + "$value": "#5e2900", + "group": "palette", + "$modes": { + "default": "#803d00", + "cds-g0": "#5e2900", + "cds-g10": "#5e2900", + "cds-g90": "#5e2900", + "cds-g100": "#5e2900" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.80}", + "group": "palette", + "$modes": { + "default": "#803d00", + "cds-g0": "{carbon.color.orange.80}", + "cds-g10": "{carbon.color.orange.80}", + "cds-g90": "{carbon.color.orange.80}", + "cds-g100": "{carbon.color.orange.80}" + }, + "key": "{color.palette.amber-400}" + }, + "name": "token-color-palette-amber-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-400" + ] + }, + "token-color-palette-amber-300": { + "key": "{color.palette.amber-300}", + "$type": "color", + "$value": "#8a3800", + "group": "palette", + "$modes": { + "default": "#9e4b00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.70}", + "group": "palette", + "$modes": { + "default": "#9e4b00", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, + "key": "{color.palette.amber-300}" + }, + "name": "token-color-palette-amber-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-300" + ] + }, + "token-color-palette-amber-200": { + "key": "{color.palette.amber-200}", + "$type": "color", + "$value": "#ba4e00", + "group": "palette", + "$modes": { + "default": "#bb5a00", + "cds-g0": "#ba4e00", + "cds-g10": "#ba4e00", + "cds-g90": "#ba4e00", + "cds-g100": "#ba4e00" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.60}", + "group": "palette", + "$modes": { + "default": "#bb5a00", + "cds-g0": "{carbon.color.orange.60}", + "cds-g10": "{carbon.color.orange.60}", + "cds-g90": "{carbon.color.orange.60}", + "cds-g100": "{carbon.color.orange.60}" + }, + "key": "{color.palette.amber-200}" + }, + "name": "token-color-palette-amber-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-200" + ] + }, + "token-color-palette-amber-100": { + "key": "{color.palette.amber-100}", + "$type": "color", + "$value": "#ffd9be", + "group": "palette", + "$modes": { + "default": "#fbeabf", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.20}", + "group": "palette", + "$modes": { + "default": "#fbeabf", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "key": "{color.palette.amber-100}" + }, + "name": "token-color-palette-amber-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-100" + ] + }, + "token-color-palette-amber-50": { + "key": "{color.palette.amber-50}", + "$type": "color", + "$value": "#fff2e8", + "group": "palette", + "$modes": { + "default": "#fff9e8", + "cds-g0": "#fff2e8", + "cds-g10": "#fff2e8", + "cds-g90": "#fff2e8", + "cds-g100": "#fff2e8" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.10}", + "group": "palette", + "$modes": { + "default": "#fff9e8", + "cds-g0": "{carbon.color.orange.10}", + "cds-g10": "{carbon.color.orange.10}", + "cds-g90": "{carbon.color.orange.10}", + "cds-g100": "{carbon.color.orange.10}" + }, + "key": "{color.palette.amber-50}" + }, + "name": "token-color-palette-amber-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-50" + ] + }, + "token-color-palette-red-500": { + "key": "{color.palette.red-500}", + "$type": "color", + "$value": "#520408", + "group": "palette", + "$modes": { + "default": "#51130a", + "cds-g0": "#520408", + "cds-g10": "#520408", + "cds-g90": "#520408", + "cds-g100": "#520408" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.90}", + "group": "palette", + "$modes": { + "default": "#51130a", + "cds-g0": "{carbon.color.red.90}", + "cds-g10": "{carbon.color.red.90}", + "cds-g90": "{carbon.color.red.90}", + "cds-g100": "{carbon.color.red.90}" + }, + "key": "{color.palette.red-500}" + }, + "name": "token-color-palette-red-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-500" + ] + }, + "token-color-palette-red-400": { + "key": "{color.palette.red-400}", + "$type": "color", + "$value": "#750e13", + "group": "palette", + "$modes": { + "default": "#940004", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#750e13", + "cds-g100": "#750e13" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.80}", + "group": "palette", + "$modes": { + "default": "#940004", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.80}", + "cds-g100": "{carbon.color.red.80}" + }, + "key": "{color.palette.red-400}" + }, + "name": "token-color-palette-red-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-400" + ] + }, + "token-color-palette-red-300": { + "key": "{color.palette.red-300}", + "$type": "color", + "$value": "#a2191f", + "group": "palette", + "$modes": { + "default": "#c00005", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.70}", + "group": "palette", + "$modes": { + "default": "#c00005", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, + "key": "{color.palette.red-300}" + }, + "name": "token-color-palette-red-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-300" + ] + }, + "token-color-palette-red-200": { + "key": "{color.palette.red-200}", + "$type": "color", + "$value": "#da1e28", + "group": "palette", + "$modes": { + "default": "#e52228", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.60}", + "group": "palette", + "$modes": { + "default": "#e52228", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.60}", + "cds-g100": "{carbon.color.red.60}" + }, + "key": "{color.palette.red-200}" + }, + "name": "token-color-palette-red-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-200" + ] + }, + "token-color-palette-red-100": { + "key": "{color.palette.red-100}", + "$type": "color", + "$value": "#ffd7d9", + "group": "palette", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.20}", + "group": "palette", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, + "key": "{color.palette.red-100}" + }, + "name": "token-color-palette-red-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-100" + ] + }, + "token-color-palette-red-50": { + "key": "{color.palette.red-50}", + "$type": "color", + "$value": "#fff1f1", + "group": "palette", + "$modes": { + "default": "#fff5f5", + "cds-g0": "#fff1f1", + "cds-g10": "#fff1f1", + "cds-g90": "#fff1f1", + "cds-g100": "#fff1f1" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.10}", + "group": "palette", + "$modes": { + "default": "#fff5f5", + "cds-g0": "{carbon.color.red.10}", + "cds-g10": "{carbon.color.red.10}", + "cds-g90": "{carbon.color.red.10}", + "cds-g100": "{carbon.color.red.10}" + }, + "key": "{color.palette.red-50}" + }, + "name": "token-color-palette-red-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-50" + ] + }, + "token-color-palette-neutral-700": { + "key": "{color.palette.neutral-700}", + "$type": "color", + "$value": "#161616", + "group": "palette", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.100}", + "group": "palette", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "{carbon.color.gray.100}", + "cds-g10": "{carbon.color.gray.100}", + "cds-g90": "{carbon.color.gray.100}", + "cds-g100": "{carbon.color.gray.100}" + }, + "key": "{color.palette.neutral-700}" + }, + "name": "token-color-palette-neutral-700", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-700" + ] + }, + "token-color-palette-neutral-600": { + "key": "{color.palette.neutral-600}", + "$type": "color", + "$value": "#393939", + "group": "palette", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#393939", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.80}", + "group": "palette", + "$modes": { + "default": "#3b3d45", + "cds-g0": "{carbon.color.gray.80}", + "cds-g10": "{carbon.color.gray.80}", + "cds-g90": "{carbon.color.gray.80}", + "cds-g100": "{carbon.color.gray.80}" + }, + "key": "{color.palette.neutral-600}" + }, + "name": "token-color-palette-neutral-600", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-600" + ] + }, + "token-color-palette-neutral-500": { + "key": "{color.palette.neutral-500}", + "$type": "color", + "$value": "#525252", + "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.70}", + "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": "{carbon.color.gray.70}", + "cds-g10": "{carbon.color.gray.70}", + "cds-g90": "{carbon.color.gray.70}", + "cds-g100": "{carbon.color.gray.70}" + }, + "key": "{color.palette.neutral-500}" + }, + "name": "token-color-palette-neutral-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-500" + ] + }, + "token-color-palette-neutral-400": { + "key": "{color.palette.neutral-400}", + "$type": "color", + "$value": "#8d8d8d", + "group": "palette", + "$modes": { + "default": "#8c909c", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.50}", + "group": "palette", + "$modes": { + "default": "#8c909c", + "cds-g0": "{carbon.color.gray.50}", + "cds-g10": "{carbon.color.gray.50}", + "cds-g90": "{carbon.color.gray.50}", + "cds-g100": "{carbon.color.gray.50}" + }, + "key": "{color.palette.neutral-400}" + }, + "name": "token-color-palette-neutral-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-400" + ] + }, + "token-color-palette-neutral-300": { + "key": "{color.palette.neutral-300}", + "$type": "color", + "$value": "#a8a8a8", + "group": "palette", + "$modes": { + "default": "#c2c5cb", + "cds-g0": "#a8a8a8", + "cds-g10": "#a8a8a8", + "cds-g90": "#a8a8a8", + "cds-g100": "#a8a8a8" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.40}", + "group": "palette", + "$modes": { + "default": "#c2c5cb", + "cds-g0": "{carbon.color.gray.40}", + "cds-g10": "{carbon.color.gray.40}", + "cds-g90": "{carbon.color.gray.40}", + "cds-g100": "{carbon.color.gray.40}" + }, + "key": "{color.palette.neutral-300}" + }, + "name": "token-color-palette-neutral-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-300" + ] + }, + "token-color-palette-neutral-200": { + "key": "{color.palette.neutral-200}", + "$type": "color", + "$value": "#c6c6c6", + "group": "palette", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.30}", + "group": "palette", + "$modes": { + "default": "#dedfe3", + "cds-g0": "{carbon.color.gray.30}", + "cds-g10": "{carbon.color.gray.30}", + "cds-g90": "{carbon.color.gray.30}", + "cds-g100": "{carbon.color.gray.30}" + }, + "key": "{color.palette.neutral-200}" + }, + "name": "token-color-palette-neutral-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-200" + ] + }, + "token-color-palette-neutral-100": { + "key": "{color.palette.neutral-100}", + "$type": "color", + "$value": "#e0e0e0", + "group": "palette", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#e0e0e0", + "cds-g100": "#e0e0e0" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.20}", + "group": "palette", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "{carbon.color.gray.20}", + "cds-g10": "{carbon.color.gray.20}", + "cds-g90": "{carbon.color.gray.20}", + "cds-g100": "{carbon.color.gray.20}" + }, + "key": "{color.palette.neutral-100}" + }, + "name": "token-color-palette-neutral-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-100" + ] + }, + "token-color-palette-neutral-50": { + "key": "{color.palette.neutral-50}", + "$type": "color", + "$value": "#f4f4f4", + "group": "palette", + "$modes": { + "default": "#fafafa", + "cds-g0": "#f4f4f4", + "cds-g10": "#f4f4f4", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.10}", + "group": "palette", + "$modes": { + "default": "#fafafa", + "cds-g0": "{carbon.color.gray.10}", + "cds-g10": "{carbon.color.gray.10}", + "cds-g90": "{carbon.color.gray.10}", + "cds-g100": "{carbon.color.gray.10}" + }, + "key": "{color.palette.neutral-50}" + }, + "name": "token-color-palette-neutral-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-50" + ] + }, + "token-color-palette-neutral-0": { + "key": "{color.palette.neutral-0}", + "$type": "color", + "$value": "#ffffff", + "group": "palette", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.white.0}", + "group": "palette", + "$modes": { + "default": "#ffffff", + "cds-g0": "{carbon.color.white.0}", + "cds-g10": "{carbon.color.white.0}", + "cds-g90": "{carbon.color.white.0}", + "cds-g100": "{carbon.color.white.0}" + }, + "key": "{color.palette.neutral-0}" + }, + "name": "token-color-palette-neutral-0", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-0" + ] + }, + "token-color-palette-alpha-300": { + "key": "{color.palette.alpha-300}", + "$type": "color", + "$value": "#8d8d8d", + "group": "palette", + "$modes": { + "default": "#393939", + "cds-g0": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#6f6f6f", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.50}", + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-600}", + "cds-g0": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.60}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "key": "{color.palette.alpha-300}" + }, + "name": "token-color-palette-alpha-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "alpha-300" + ] + }, + "token-color-palette-alpha-200": { + "key": "{color.palette.alpha-200}", + "$type": "color", + "$value": "#c6c6c6", + "group": "palette", + "$modes": { + "default": "#525252", + "cds-g0": { + "$value": "#c6c6c6", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#e0e0e0", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#6f6f6f", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#525252", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.30}", + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": { + "$value": "{carbon.color.gray.30}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.20}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.60}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.70}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "key": "{color.palette.alpha-200}" + }, + "name": "token-color-palette-alpha-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "alpha-200" + ] + }, + "token-color-palette-alpha-100": { + "key": "{color.palette.alpha-100}", + "$type": "color", + "$value": "#e0e0e0", + "group": "palette", + "$modes": { + "default": "#525252", + "cds-g0": { + "$value": "#e0e0e0", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#c6c6c6", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#525252", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#393939", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.20}", + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": { + "$value": "{carbon.color.gray.20}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.30}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.70}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.80}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "key": "{color.palette.alpha-100}" + }, + "name": "token-color-palette-alpha-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "alpha-100" + ] + }, + "token-color-border-primary": { + "key": "{color.border.primary}", + "$type": "color", + "$value": "#c6c6c6", + "group": "semantic", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.borderSubtle03}", + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-200}", + "cds-g0": "{carbon.themes.white.borderSubtle03}", + "cds-g10": "{carbon.themes.g10.borderSubtle03}", + "cds-g90": "{carbon.themes.g90.borderSubtle03}", + "cds-g100": "{carbon.themes.g100.borderSubtle03}" + }, + "key": "{color.border.primary}" + }, + "name": "token-color-border-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "primary" + ] + }, + "token-color-border-faint": { + "key": "{color.border.faint}", + "$type": "color", + "$value": "#e0e0e0", + "group": "semantic", + "$modes": { + "default": "#e0e0e0", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.borderSubtle00}", + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-100}", + "cds-g0": "{carbon.themes.white.borderSubtle00}", + "cds-g10": "{carbon.themes.g10.borderSubtle00}", + "cds-g90": "{carbon.themes.g90.borderSubtle00}", + "cds-g100": "{carbon.themes.g100.borderSubtle00}" + }, + "key": "{color.border.faint}" + }, + "name": "token-color-border-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "faint" + ] + }, + "token-color-border-strong": { + "key": "{color.border.strong}", + "$type": "color", + "$value": "#8d8d8d", + "group": "semantic", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.borderStrong01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-300}", + "cds-g0": "{carbon.themes.white.borderStrong01}", + "cds-g10": "{carbon.themes.g10.borderStrong01}", + "cds-g90": "{carbon.themes.g90.borderStrong01}", + "cds-g100": "{carbon.themes.g100.borderStrong01}" + }, + "key": "{color.border.strong}" + }, + "name": "token-color-border-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "strong" + ] + }, + "token-color-border-action": { + "key": "{color.border.action}", + "$type": "color", + "$value": "#0f62fe", + "group": "semantic", + "$modes": { + "default": "#d0e2ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.borderInteractive}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-100}", + "cds-g0": "{carbon.themes.white.borderInteractive}", + "cds-g10": "{carbon.themes.g10.borderInteractive}", + "cds-g90": "{carbon.themes.g90.borderInteractive}", + "cds-g100": "{carbon.themes.g100.borderInteractive}" + }, + "key": "{color.border.action}" + }, + "name": "token-color-border-action", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "action" + ] + }, + "token-color-border-highlight": { + "key": "{color.border.highlight}", + "$type": "color", + "$value": "#be95ff", + "group": "semantic", + "$modes": { + "default": "#e8daff", + "cds-g0": "#be95ff", + "cds-g10": "#be95ff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-100}", + "cds-g0": "{carbon.color.purple.40}", + "cds-g10": "{carbon.color.purple.40}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, + "key": "{color.border.highlight}" + }, + "name": "token-color-border-highlight", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "highlight" + ] + }, + "token-color-border-success": { + "key": "{color.border.success}", + "$type": "color", + "$value": "#42be65", + "group": "semantic", + "$modes": { + "default": "#a7f0ba", + "cds-g0": "#42be65", + "cds-g10": "#42be65", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-100}", + "cds-g0": "{carbon.color.green.40}", + "cds-g10": "{carbon.color.green.40}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, + "key": "{color.border.success}" + }, + "name": "token-color-border-success", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "success" + ] + }, + "token-color-border-warning": { + "key": "{color.border.warning}", + "$type": "color", + "$value": "#d2a106", + "group": "semantic", + "$modes": { + "default": "#ffd9be", + "cds-g0": "#d2a106", + "cds-g10": "#d2a106", + "cds-g90": "#b28600", + "cds-g100": "#b28600" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.yellow.40}", + "cds-g10": "{carbon.color.yellow.40}", + "cds-g90": "{carbon.color.yellow.50}", + "cds-g100": "{carbon.color.yellow.50}" + }, + "key": "{color.border.warning}" + }, + "name": "token-color-border-warning", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "warning" + ] + }, + "token-color-border-critical": { + "key": "{color.border.critical}", + "$type": "color", + "$value": "#ff8389", + "group": "semantic", + "$modes": { + "default": "#ffd7d9", + "cds-g0": "#ff8389", + "cds-g10": "#ff8389", + "cds-g90": "#fa4d56", + "cds-g100": "#fa4d56" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-100}", + "cds-g0": "{carbon.color.red.40}", + "cds-g10": "{carbon.color.red.40}", + "cds-g90": "{carbon.color.red.50}", + "cds-g100": "{carbon.color.red.50}" + }, + "key": "{color.border.critical}" + }, + "name": "token-color-border-critical", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "critical" + ] + }, + "token-color-focus-action-internal": { + "key": "{color.focus.action.internal}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "default": "#0043ce", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.focusInset}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, + "key": "{color.focus.action.internal}" + }, + "name": "token-color-focus-action-internal", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "action", + "internal" + ] + }, + "token-color-focus-action-external": { + "key": "{color.focus.action.external}", + "$type": "color", + "$value": "#0f62fe", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.focus}", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{color.focus.action.external}" + }, + "name": "token-color-focus-action-external", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "action", + "external" + ] + }, + "token-color-focus-critical-internal": { + "key": "{color.focus.critical.internal}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "default": "#a2191f", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.focusInset}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, + "key": "{color.focus.critical.internal}" + }, + "name": "token-color-focus-critical-internal", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "critical", + "internal" + ] + }, + "token-color-focus-critical-external": { + "key": "{color.focus.critical.external}", + "$type": "color", + "$value": "#0f62fe", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#dd7578", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.focus}", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#dd7578", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{color.focus.critical.external}" + }, + "name": "token-color-focus-critical-external", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "critical", + "external" + ] + }, + "token-color-foreground-strong": { + "key": "{color.foreground.strong}", + "$type": "color", + "$value": "#161616", + "group": "semantic", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textPrimary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{color.foreground.strong}" + }, + "name": "token-color-foreground-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "strong" + ] + }, + "token-color-foreground-primary": { + "key": "{color.foreground.primary}", + "$type": "color", + "$value": "#161616", + "group": "semantic", + "$modes": { + "default": "#393939", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textPrimary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-600}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{color.foreground.primary}" + }, + "name": "token-color-foreground-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "primary" + ] + }, + "token-color-foreground-faint": { + "key": "{color.foreground.faint}", + "$type": "color", + "$value": "#525252", + "group": "semantic", + "$modes": { + "default": "#525252", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textSecondary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{color.foreground.faint}" + }, + "name": "token-color-foreground-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "faint" + ] + }, + "token-color-foreground-high-contrast": { + "key": "{color.foreground.high-contrast}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textInverse}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{color.foreground.high-contrast}" + }, + "name": "token-color-foreground-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "high-contrast" + ] + }, + "token-color-foreground-disabled": { + "key": "{color.foreground.disabled}", + "$type": "color", + "$value": "rgba(22, 22, 22, 0.25)", + "group": "semantic", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "rgba(22, 22, 22, 0.25)", + "cds-g10": "rgba(22, 22, 22, 0.25)", + "cds-g90": "rgba(244, 244, 244, 0.25)", + "cds-g100": "rgba(244, 244, 244, 0.25)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textDisabled}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textDisabled}", + "cds-g10": "{carbon.themes.g10.textDisabled}", + "cds-g90": "{carbon.themes.g90.textDisabled}", + "cds-g100": "{carbon.themes.g100.textDisabled}" + }, + "key": "{color.foreground.disabled}" + }, + "name": "token-color-foreground-disabled", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "disabled" + ] + }, + "token-color-foreground-action": { + "key": "{color.foreground.action}", + "$type": "color", + "$value": "#0f62fe", + "group": "semantic", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#78a9ff", + "cds-g100": "#78a9ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.linkPrimary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.white.linkPrimary}", + "cds-g10": "{carbon.themes.g10.linkPrimary}", + "cds-g90": "{carbon.themes.g90.linkPrimary}", + "cds-g100": "{carbon.themes.g100.linkPrimary}" + }, + "key": "{color.foreground.action}" + }, + "name": "token-color-foreground-action", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "action" + ] + }, + "token-color-foreground-action-hover": { + "key": "{color.foreground.action-hover}", + "$type": "color", + "$value": "#0043ce", + "group": "semantic", + "$modes": { + "default": "#0043ce", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.linkPrimaryHover}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, + "key": "{color.foreground.action-hover}" + }, + "name": "token-color-foreground-action-hover", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "action-hover" + ] + }, + "token-color-foreground-action-active": { + "key": "{color.foreground.action-active}", + "$type": "color", + "$value": "#0043ce", + "group": "semantic", + "$modes": { + "default": "#002d9c", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.linkPrimaryHover}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, + "key": "{color.foreground.action-active}" + }, + "name": "token-color-foreground-action-active", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "action-active" + ] + }, + "token-color-foreground-highlight": { + "key": "{color.foreground.highlight}", + "$type": "color", + "$value": "#8a3ffc", + "group": "semantic", + "$modes": { + "default": "#a56eff", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.60}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, + "key": "{color.foreground.highlight}" + }, + "name": "token-color-foreground-highlight", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "highlight" + ] + }, + "token-color-foreground-highlight-on-surface": { + "key": "{color.foreground.highlight-on-surface}", + "$type": "color", + "$value": "#6929c4", + "group": "semantic", + "$modes": { + "default": "#8a3ffc", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#d4bbff", + "cds-g100": "#d4bbff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-300}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.30}", + "cds-g100": "{carbon.color.purple.30}" + }, + "key": "{color.foreground.highlight-on-surface}" + }, + "name": "token-color-foreground-highlight-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "highlight-on-surface" + ] + }, + "token-color-foreground-highlight-high-contrast": { + "key": "{color.foreground.highlight-high-contrast}", + "$type": "color", + "$value": "#491d8b", + "group": "semantic", + "$modes": { + "default": "#31135e", + "cds-g0": "#491d8b", + "cds-g10": "#491d8b", + "cds-g90": "#e8daff", + "cds-g100": "#d4bbff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.80}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-500}", + "cds-g0": "{carbon.color.purple.80}", + "cds-g10": "{carbon.color.purple.80}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.30}" + }, + "key": "{color.foreground.highlight-high-contrast}" + }, + "name": "token-color-foreground-highlight-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "highlight-high-contrast" + ] + }, + "token-color-foreground-success": { + "key": "{color.foreground.success}", + "$type": "color", + "$value": "#198038", + "group": "semantic", + "$modes": { + "default": "#24a148", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#42be65", + "cds-g100": "#42be65" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.60}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-200}", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.40}", + "cds-g100": "{carbon.color.green.40}" + }, + "key": "{color.foreground.success}" + }, + "name": "token-color-foreground-success", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "success" + ] + }, + "token-color-foreground-success-on-surface": { + "key": "{color.foreground.success-on-surface}", + "$type": "color", + "$value": "#0e6027", + "group": "semantic", + "$modes": { + "default": "#198038", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#6fdc8c", + "cds-g100": "#6fdc8c" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-300}", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.30}", + "cds-g100": "{carbon.color.green.30}" + }, + "key": "{color.foreground.success-on-surface}" + }, + "name": "token-color-foreground-success-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "success-on-surface" + ] + }, + "token-color-foreground-success-high-contrast": { + "key": "{color.foreground.success-high-contrast}", + "$type": "color", + "$value": "#044317", + "group": "semantic", + "$modes": { + "default": "#044317", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.80}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-500}", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, + "key": "{color.foreground.success-high-contrast}" + }, + "name": "token-color-foreground-success-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "success-high-contrast" + ] + }, + "token-color-foreground-warning": { + "key": "{color.foreground.warning}", + "$type": "color", + "$value": "#8e6a00", + "group": "semantic", + "$modes": { + "default": "#ba4e00", + "cds-g0": "#8e6a00", + "cds-g10": "#8e6a00", + "cds-g90": "#d2a106", + "cds-g100": "#d2a106" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.60}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.yellow.60}", + "cds-g10": "{carbon.color.yellow.60}", + "cds-g90": "{carbon.color.yellow.40}", + "cds-g100": "{carbon.color.yellow.40}" + }, + "key": "{color.foreground.warning}" + }, + "name": "token-color-foreground-warning", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "warning" + ] + }, + "token-color-foreground-warning-on-surface": { + "key": "{color.foreground.warning-on-surface}", + "$type": "color", + "$value": "#684e00", + "group": "semantic", + "$modes": { + "default": "#8a3800", + "cds-g0": "#684e00", + "cds-g10": "#684e00", + "cds-g90": "#f1c21b", + "cds-g100": "#f1c21b" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-300}", + "cds-g0": "{carbon.color.yellow.70}", + "cds-g10": "{carbon.color.yellow.70}", + "cds-g90": "{carbon.color.yellow.30}", + "cds-g100": "{carbon.color.yellow.30}" + }, + "key": "{color.foreground.warning-on-surface}" + }, + "name": "token-color-foreground-warning-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "warning-on-surface" + ] + }, + "token-color-foreground-warning-high-contrast": { + "key": "{color.foreground.warning-high-contrast}", + "$type": "color", + "$value": "#483700", + "group": "semantic", + "$modes": { + "default": "#3e1a00", + "cds-g0": "#483700", + "cds-g10": "#483700", + "cds-g90": "#fddc69", + "cds-g100": "#fddc69" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.80}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-500}", + "cds-g0": "{carbon.color.yellow.80}", + "cds-g10": "{carbon.color.yellow.80}", + "cds-g90": "{carbon.color.yellow.20}", + "cds-g100": "{carbon.color.yellow.20}" + }, + "key": "{color.foreground.warning-high-contrast}" + }, + "name": "token-color-foreground-warning-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "warning-high-contrast" + ] + }, + "token-color-foreground-critical": { + "key": "{color.foreground.critical}", + "$type": "color", + "$value": "#da1e28", + "group": "semantic", + "$modes": { + "default": "#da1e28", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#ff8389", + "cds-g100": "#ff8389" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.60}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-200}", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.40}", + "cds-g100": "{carbon.color.red.40}" + }, + "key": "{color.foreground.critical}" + }, + "name": "token-color-foreground-critical", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "critical" + ] + }, + "token-color-foreground-critical-on-surface": { + "key": "{color.foreground.critical-on-surface}", + "$type": "color", + "$value": "#a2191f", + "group": "semantic", + "$modes": { + "default": "#a2191f", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffb3b8", + "cds-g100": "#ffb3b8" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.30}", + "cds-g100": "{carbon.color.red.30}" + }, + "key": "{color.foreground.critical-on-surface}" + }, + "name": "token-color-foreground-critical-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "critical-on-surface" + ] + }, + "token-color-foreground-critical-high-contrast": { + "key": "{color.foreground.critical-high-contrast}", + "$type": "color", + "$value": "#750e13", + "group": "semantic", + "$modes": { + "default": "#520408", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.80}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-500}", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, + "key": "{color.foreground.critical-high-contrast}" + }, + "name": "token-color-foreground-critical-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "critical-high-contrast" + ] + }, + "token-color-page-primary": { + "key": "{color.page.primary}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.background}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, + "key": "{color.page.primary}" + }, + "name": "token-color-page-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "page", + "primary" + ] + }, + "token-color-page-faint": { + "key": "{color.page.faint}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.background}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, + "key": "{color.page.faint}" + }, + "name": "token-color-page-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "page", + "faint" + ] + }, + "token-color-surface-primary": { + "key": "{color.surface.primary}", + "$type": "color", + "$value": "#f4f4f4", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.layer01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, + "key": "{color.surface.primary}" + }, + "name": "token-color-surface-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "primary" + ] + }, + "token-color-surface-faint": { + "key": "{color.surface.faint}", + "$type": "color", + "$value": "#f4f4f4", + "group": "semantic", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.layer01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, + "key": "{color.surface.faint}" + }, + "name": "token-color-surface-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "faint" + ] + }, + "token-color-surface-strong": { + "key": "{color.surface.strong}", + "$type": "color", + "$value": "#e0e0e0", + "group": "semantic", + "$modes": { + "default": "#e0e0e0", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.layerAccent01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerAccent01}", + "cds-g10": "{carbon.themes.g10.layerAccent01}", + "cds-g90": "{carbon.themes.g90.layerAccent01}", + "cds-g100": "{carbon.themes.g100.layerAccent01}" + }, + "key": "{color.surface.strong}" + }, + "name": "token-color-surface-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "strong" + ] + }, + "token-color-surface-high-contrast": { + "key": "{color.surface.high-contrast}", + "$type": "color", + "$value": "#393939", + "group": "semantic", + "$modes": { + "default": "#161616", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.backgroundInverse}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "key": "{color.surface.high-contrast}" + }, + "name": "token-color-surface-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "high-contrast" + ] + }, + "token-color-surface-interactive": { + "key": "{color.surface.interactive}", + "$type": "color", + "$value": "#f4f4f4", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.layer01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, + "key": "{color.surface.interactive}" + }, + "name": "token-color-surface-interactive", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive" + ] + }, + "token-color-surface-interactive-hover": { + "key": "{color.surface.interactive-hover}", + "$type": "color", + "$value": "#e8e8e8", + "group": "semantic", + "$modes": { + "default": "#e0e0e0", + "cds-g0": "#e8e8e8", + "cds-g10": "#e8e8e8", + "cds-g90": "#474747", + "cds-g100": "#333333" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.layerHover01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerHover01}", + "cds-g10": "{carbon.themes.g10.layerHover01}", + "cds-g90": "{carbon.themes.g90.layerHover01}", + "cds-g100": "{carbon.themes.g100.layerHover01}" + }, + "key": "{color.surface.interactive-hover}" + }, + "name": "token-color-surface-interactive-hover", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive-hover" + ] + }, + "token-color-surface-interactive-active": { + "key": "{color.surface.interactive-active}", + "$type": "color", + "$value": "#c6c6c6", + "group": "semantic", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.layerActive01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.white.layerActive01}", + "cds-g10": "{carbon.themes.g10.layerActive01}", + "cds-g90": "{carbon.themes.g90.layerActive01}", + "cds-g100": "{carbon.themes.g100.layerActive01}" + }, + "key": "{color.surface.interactive-active}" + }, + "name": "token-color-surface-interactive-active", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive-active" + ] + }, + "token-color-surface-interactive-disabled": { + "key": "{color.surface.interactive-disabled}", + "$type": "color", + "$value": "#c6c6c6", + "group": "semantic", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.30}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.color.gray.30}", + "cds-g10": "{carbon.color.gray.30}", + "cds-g90": "{carbon.color.gray.60}", + "cds-g100": "{carbon.color.gray.70}" + }, + "key": "{color.surface.interactive-disabled}" + }, + "name": "token-color-surface-interactive-disabled", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive-disabled" + ] + }, + "token-color-surface-action": { + "key": "{color.surface.action}", + "$type": "color", + "$value": "#d0e2ff", + "group": "semantic", + "$modes": { + "default": "#edf5ff", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0f62fe", + "cds-g100": "#0043ce" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.20}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-50}", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.60}", + "cds-g100": "{carbon.color.blue.70}" + }, + "key": "{color.surface.action}" + }, + "name": "token-color-surface-action", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "action" + ] + }, + "token-color-surface-highlight": { + "key": "{color.surface.highlight}", + "$type": "color", + "$value": "#e8daff", + "group": "semantic", + "$modes": { + "default": "#f6f2ff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.20}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-50}", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, + "key": "{color.surface.highlight}" + }, + "name": "token-color-surface-highlight", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "highlight" + ] + }, + "token-color-surface-success": { + "key": "{color.surface.success}", + "$type": "color", + "$value": "#a7f0ba", + "group": "semantic", + "$modes": { + "default": "#defbe6", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.20}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-50}", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, + "key": "{color.surface.success}" + }, + "name": "token-color-surface-success", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "success" + ] + }, + "token-color-surface-warning": { + "key": "{color.surface.warning}", + "$type": "color", + "$value": "#fcf4d6", + "group": "semantic", + "$modes": { + "default": "#fff2e8", + "cds-g0": "#fcf4d6", + "cds-g10": "#fcf4d6", + "cds-g90": "#684e00", + "cds-g100": "#684e00" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.10}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-50}", + "cds-g0": "{carbon.color.yellow.10}", + "cds-g10": "{carbon.color.yellow.10}", + "cds-g90": "{carbon.color.yellow.70}", + "cds-g100": "{carbon.color.yellow.70}" + }, + "key": "{color.surface.warning}" + }, + "name": "token-color-surface-warning", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "warning" + ] + }, + "token-color-surface-critical": { + "key": "{color.surface.critical}", + "$type": "color", + "$value": "#ffd7d9", + "group": "semantic", + "$modes": { + "default": "#fff1f1", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.20}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-50}", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, + "key": "{color.surface.critical}" + }, + "name": "token-color-surface-critical", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "critical" + ] + }, + "token-color-hashicorp-brand": { + "key": "{color.hashicorp.brand}", + "$type": "color", + "$value": "#000000", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.hashicorp-brand}", + "group": "branding", + "key": "{color.hashicorp.brand}" + }, + "name": "token-color-hashicorp-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "hashicorp", + "brand" + ] + }, + "token-color-boundary-brand": { + "key": "{color.boundary.brand}", + "$type": "color", + "$value": "#f24c53", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-brand}", + "group": "branding", + "key": "{color.boundary.brand}" + }, + "name": "token-color-boundary-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "brand" + ] + }, + "token-color-boundary-foreground": { + "key": "{color.boundary.foreground}", + "$type": "color", + "$value": "#cf2d32", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-500}", + "group": "branding", + "key": "{color.boundary.foreground}" + }, + "name": "token-color-boundary-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "foreground" + ] + }, + "token-color-boundary-surface": { + "key": "{color.boundary.surface}", + "$type": "color", + "$value": "#ffecec", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-50}", + "group": "branding", + "key": "{color.boundary.surface}" + }, + "name": "token-color-boundary-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "surface" + ] + }, + "token-color-boundary-border": { + "key": "{color.boundary.border}", + "$type": "color", + "$value": "#fbd7d8", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-100}", + "group": "branding", + "key": "{color.boundary.border}" + }, + "name": "token-color-boundary-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "border" + ] + }, + "token-color-boundary-gradient-primary-start": { + "key": "{color.boundary.gradient.primary.start}", + "$type": "color", + "$value": "#f97076", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-300}", + "group": "branding", + "key": "{color.boundary.gradient.primary.start}" + }, + "name": "token-color-boundary-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "primary", + "start" + ] + }, + "token-color-boundary-gradient-primary-stop": { + "key": "{color.boundary.gradient.primary.stop}", + "$type": "color", + "$value": "#db363b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-400}", + "group": "branding", + "key": "{color.boundary.gradient.primary.stop}" + }, + "name": "token-color-boundary-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "primary", + "stop" + ] + }, + "token-color-boundary-gradient-faint-start": { + "key": "{color.boundary.gradient.faint.start}", + "$type": "color", + "$value": "#fffafa", + "group": "branding", + "comment": "this is the 'boundary-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffafa", + "group": "branding", + "comment": "this is the 'boundary-50' value at 25% opacity on white", + "key": "{color.boundary.gradient.faint.start}" + }, + "name": "token-color-boundary-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "faint", + "start" + ] + }, + "token-color-boundary-gradient-faint-stop": { + "key": "{color.boundary.gradient.faint.stop}", + "$type": "color", + "$value": "#ffecec", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-50}", + "group": "branding", + "key": "{color.boundary.gradient.faint.stop}" + }, + "name": "token-color-boundary-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "faint", + "stop" + ] + }, + "token-color-consul-brand": { + "key": "{color.consul.brand}", + "$type": "color", + "$value": "#e03875", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-brand}", + "group": "branding", + "key": "{color.consul.brand}" + }, + "name": "token-color-consul-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "brand" + ] + }, + "token-color-consul-foreground": { + "key": "{color.consul.foreground}", + "$type": "color", + "$value": "#d01c5b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-500}", + "group": "branding", + "key": "{color.consul.foreground}" + }, + "name": "token-color-consul-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "foreground" + ] + }, + "token-color-consul-surface": { + "key": "{color.consul.surface}", + "$type": "color", + "$value": "#ffe9f1", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-50}", + "group": "branding", + "key": "{color.consul.surface}" + }, + "name": "token-color-consul-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "surface" + ] + }, + "token-color-consul-border": { + "key": "{color.consul.border}", + "$type": "color", + "$value": "#ffcede", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-100}", + "group": "branding", + "key": "{color.consul.border}" + }, + "name": "token-color-consul-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "border" + ] + }, + "token-color-consul-gradient-primary-start": { + "key": "{color.consul.gradient.primary.start}", + "$type": "color", + "$value": "#ff99be", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-300}", + "group": "branding", + "key": "{color.consul.gradient.primary.start}" + }, + "name": "token-color-consul-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "primary", + "start" + ] + }, + "token-color-consul-gradient-primary-stop": { + "key": "{color.consul.gradient.primary.stop}", + "$type": "color", + "$value": "#da306e", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-400}", + "group": "branding", + "key": "{color.consul.gradient.primary.stop}" + }, + "name": "token-color-consul-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "primary", + "stop" + ] + }, + "token-color-consul-gradient-faint-start": { + "key": "{color.consul.gradient.faint.start}", + "$type": "color", + "$value": "#fff9fb", + "group": "branding", + "comment": "this is the 'consul-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fff9fb", + "group": "branding", + "comment": "this is the 'consul-50' value at 25% opacity on white", + "key": "{color.consul.gradient.faint.start}" + }, + "name": "token-color-consul-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "faint", + "start" + ] + }, + "token-color-consul-gradient-faint-stop": { + "key": "{color.consul.gradient.faint.stop}", + "$type": "color", + "$value": "#ffe9f1", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-50}", + "group": "branding", + "key": "{color.consul.gradient.faint.stop}" + }, + "name": "token-color-consul-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "faint", + "stop" + ] + }, + "token-color-hcp-brand": { + "key": "{color.hcp.brand}", + "$type": "color", + "$value": "#000000", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.hcp-brand}", + "group": "branding", + "key": "{color.hcp.brand}" + }, + "name": "token-color-hcp-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "hcp", + "brand" + ] + }, + "token-color-nomad-brand": { + "key": "{color.nomad.brand}", + "$type": "color", + "$value": "#06d092", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-brand}", + "group": "branding", + "key": "{color.nomad.brand}" + }, + "name": "token-color-nomad-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "brand" + ] + }, + "token-color-nomad-foreground": { + "key": "{color.nomad.foreground}", + "$type": "color", + "$value": "#008661", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-500}", + "group": "branding", + "key": "{color.nomad.foreground}" + }, + "name": "token-color-nomad-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "foreground" + ] + }, + "token-color-nomad-surface": { + "key": "{color.nomad.surface}", + "$type": "color", + "$value": "#d3fdeb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-50}", + "group": "branding", + "key": "{color.nomad.surface}" + }, + "name": "token-color-nomad-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "surface" + ] + }, + "token-color-nomad-border": { + "key": "{color.nomad.border}", + "$type": "color", + "$value": "#bff3dd", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-100}", + "group": "branding", + "key": "{color.nomad.border}" + }, + "name": "token-color-nomad-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "border" + ] + }, + "token-color-nomad-gradient-primary-start": { + "key": "{color.nomad.gradient.primary.start}", + "$type": "color", + "$value": "#bff3dd", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-100}", + "group": "branding", + "key": "{color.nomad.gradient.primary.start}" + }, + "name": "token-color-nomad-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "primary", + "start" + ] + }, + "token-color-nomad-gradient-primary-stop": { + "key": "{color.nomad.gradient.primary.stop}", + "$type": "color", + "$value": "#60dea9", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-200}", + "group": "branding", + "key": "{color.nomad.gradient.primary.stop}" + }, + "name": "token-color-nomad-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "primary", + "stop" + ] + }, + "token-color-nomad-gradient-faint-start": { + "key": "{color.nomad.gradient.faint.start}", + "$type": "color", + "$value": "#f3fff9", + "group": "branding", + "comment": "this is the 'nomad-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#f3fff9", + "group": "branding", + "comment": "this is the 'nomad-50' value at 25% opacity on white", + "key": "{color.nomad.gradient.faint.start}" + }, + "name": "token-color-nomad-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "faint", + "start" + ] + }, + "token-color-nomad-gradient-faint-stop": { + "key": "{color.nomad.gradient.faint.stop}", + "$type": "color", + "$value": "#d3fdeb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-50}", + "group": "branding", + "key": "{color.nomad.gradient.faint.stop}" + }, + "name": "token-color-nomad-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "faint", + "stop" + ] + }, + "token-color-packer-brand": { + "key": "{color.packer.brand}", + "$type": "color", + "$value": "#02a8ef", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-brand}", + "group": "branding", + "key": "{color.packer.brand}" + }, + "name": "token-color-packer-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "brand" + ] + }, + "token-color-packer-foreground": { + "key": "{color.packer.foreground}", + "$type": "color", + "$value": "#007eb4", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-500}", + "group": "branding", + "key": "{color.packer.foreground}" + }, + "name": "token-color-packer-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "foreground" + ] + }, + "token-color-packer-surface": { + "key": "{color.packer.surface}", + "$type": "color", + "$value": "#d4f2ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-50}", + "group": "branding", + "key": "{color.packer.surface}" + }, + "name": "token-color-packer-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "surface" + ] + }, + "token-color-packer-border": { + "key": "{color.packer.border}", + "$type": "color", + "$value": "#b4e4ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-100}", + "group": "branding", + "key": "{color.packer.border}" + }, + "name": "token-color-packer-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "border" + ] + }, + "token-color-packer-gradient-primary-start": { + "key": "{color.packer.gradient.primary.start}", + "$type": "color", + "$value": "#b4e4ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-100}", + "group": "branding", + "key": "{color.packer.gradient.primary.start}" + }, + "name": "token-color-packer-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "primary", + "start" + ] + }, + "token-color-packer-gradient-primary-stop": { + "key": "{color.packer.gradient.primary.stop}", + "$type": "color", + "$value": "#63d0ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-200}", + "group": "branding", + "key": "{color.packer.gradient.primary.stop}" + }, + "name": "token-color-packer-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "primary", + "stop" + ] + }, + "token-color-packer-gradient-faint-start": { + "key": "{color.packer.gradient.faint.start}", + "$type": "color", + "$value": "#f3fcff", + "group": "branding", + "comment": "this is the 'packer-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#F3FCFF", + "group": "branding", + "comment": "this is the 'packer-50' value at 25% opacity on white", + "key": "{color.packer.gradient.faint.start}" + }, + "name": "token-color-packer-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "faint", + "start" + ] + }, + "token-color-packer-gradient-faint-stop": { + "key": "{color.packer.gradient.faint.stop}", + "$type": "color", + "$value": "#d4f2ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-50}", + "group": "branding", + "key": "{color.packer.gradient.faint.stop}" + }, + "name": "token-color-packer-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "faint", + "stop" + ] + }, + "token-color-terraform-brand": { + "key": "{color.terraform.brand}", + "$type": "color", + "$value": "#7b42bc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-brand}", + "group": "branding", + "key": "{color.terraform.brand}" + }, + "name": "token-color-terraform-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "brand" + ] + }, + "token-color-terraform-brand-on-dark": { + "key": "{color.terraform.brand-on-dark}", + "$type": "color", + "$value": "#a067da", + "group": "branding", + "comment": "this is an alternative brand color meant to be used on dark backgrounds", + "original": { + "$type": "color", + "$value": "#a067da", + "group": "branding", + "comment": "this is an alternative brand color meant to be used on dark backgrounds", + "key": "{color.terraform.brand-on-dark}" + }, + "name": "token-color-terraform-brand-on-dark", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "brand-on-dark" + ] + }, + "token-color-terraform-foreground": { + "key": "{color.terraform.foreground}", + "$type": "color", + "$value": "#773cb4", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-500}", + "group": "branding", + "key": "{color.terraform.foreground}" + }, + "name": "token-color-terraform-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "foreground" + ] + }, + "token-color-terraform-surface": { + "key": "{color.terraform.surface}", + "$type": "color", + "$value": "#f4ecff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-50}", + "group": "branding", + "key": "{color.terraform.surface}" + }, + "name": "token-color-terraform-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "surface" + ] + }, + "token-color-terraform-border": { + "key": "{color.terraform.border}", + "$type": "color", + "$value": "#ebdbfc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-100}", + "group": "branding", + "key": "{color.terraform.border}" + }, + "name": "token-color-terraform-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "border" + ] + }, + "token-color-terraform-gradient-primary-start": { + "key": "{color.terraform.gradient.primary.start}", + "$type": "color", + "$value": "#bb8deb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-300}", + "group": "branding", + "key": "{color.terraform.gradient.primary.start}" + }, + "name": "token-color-terraform-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "primary", + "start" + ] + }, + "token-color-terraform-gradient-primary-stop": { + "key": "{color.terraform.gradient.primary.stop}", + "$type": "color", + "$value": "#844fba", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-400}", + "group": "branding", + "key": "{color.terraform.gradient.primary.stop}" + }, + "name": "token-color-terraform-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "primary", + "stop" + ] + }, + "token-color-terraform-gradient-faint-start": { + "key": "{color.terraform.gradient.faint.start}", + "$type": "color", + "$value": "#fcfaff", + "group": "branding", + "comment": "this is the 'terraform-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fcfaff", + "group": "branding", + "comment": "this is the 'terraform-50' value at 25% opacity on white", + "key": "{color.terraform.gradient.faint.start}" + }, + "name": "token-color-terraform-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "faint", + "start" + ] + }, + "token-color-terraform-gradient-faint-stop": { + "key": "{color.terraform.gradient.faint.stop}", + "$type": "color", + "$value": "#f4ecff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-50}", + "group": "branding", + "key": "{color.terraform.gradient.faint.stop}" + }, + "name": "token-color-terraform-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "faint", + "stop" + ] + }, + "token-color-vagrant-brand": { + "key": "{color.vagrant.brand}", + "$type": "color", + "$value": "#1868f2", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-brand}", + "group": "branding", + "key": "{color.vagrant.brand}" + }, + "name": "token-color-vagrant-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "brand" + ] + }, + "token-color-vagrant-foreground": { + "key": "{color.vagrant.foreground}", + "$type": "color", + "$value": "#1c61d8", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-500}", + "group": "branding", + "key": "{color.vagrant.foreground}" + }, + "name": "token-color-vagrant-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "foreground" + ] + }, + "token-color-vagrant-surface": { + "key": "{color.vagrant.surface}", + "$type": "color", + "$value": "#d6ebff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-50}", + "group": "branding", + "key": "{color.vagrant.surface}" + }, + "name": "token-color-vagrant-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "surface" + ] + }, + "token-color-vagrant-border": { + "key": "{color.vagrant.border}", + "$type": "color", + "$value": "#c7dbfc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-100}", + "group": "branding", + "key": "{color.vagrant.border}" + }, + "name": "token-color-vagrant-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "border" + ] + }, + "token-color-vagrant-gradient-primary-start": { + "key": "{color.vagrant.gradient.primary.start}", + "$type": "color", + "$value": "#639cff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-300}", + "group": "branding", + "key": "{color.vagrant.gradient.primary.start}" + }, + "name": "token-color-vagrant-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "primary", + "start" + ] + }, + "token-color-vagrant-gradient-primary-stop": { + "key": "{color.vagrant.gradient.primary.stop}", + "$type": "color", + "$value": "#2e71e5", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-400}", + "group": "branding", + "key": "{color.vagrant.gradient.primary.stop}" + }, + "name": "token-color-vagrant-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "primary", + "stop" + ] + }, + "token-color-vagrant-gradient-faint-start": { + "key": "{color.vagrant.gradient.faint.start}", + "$type": "color", + "$value": "#f4faff", + "group": "branding", + "comment": "this is the 'vagrant-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#f4faff", + "group": "branding", + "comment": "this is the 'vagrant-50' value at 25% opacity on white", + "key": "{color.vagrant.gradient.faint.start}" + }, + "name": "token-color-vagrant-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "faint", + "start" + ] + }, + "token-color-vagrant-gradient-faint-stop": { + "key": "{color.vagrant.gradient.faint.stop}", + "$type": "color", + "$value": "#d6ebff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-50}", + "group": "branding", + "key": "{color.vagrant.gradient.faint.stop}" + }, + "name": "token-color-vagrant-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "faint", + "stop" + ] + }, + "token-color-vault-radar-brand": { + "key": "{color.vault-radar.brand}", + "$type": "color", + "$value": "#ffcf25", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-brand}", + "group": "branding", + "key": "{color.vault-radar.brand}" + }, + "name": "token-color-vault-radar-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "brand" + ] + }, + "token-color-vault-radar-brand-alt": { + "key": "{color.vault-radar.brand-alt}", + "$type": "color", + "$value": "#000000", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work", + "original": { + "$type": "color", + "$value": "#000", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work", + "key": "{color.vault-radar.brand-alt}" + }, + "name": "token-color-vault-radar-brand-alt", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "brand-alt" + ] + }, + "token-color-vault-radar-foreground": { + "key": "{color.vault-radar.foreground}", + "$type": "color", + "$value": "#9a6f00", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-500}", + "group": "branding", + "key": "{color.vault-radar.foreground}" + }, + "name": "token-color-vault-radar-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "foreground" + ] + }, + "token-color-vault-radar-surface": { + "key": "{color.vault-radar.surface}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-50}", + "group": "branding", + "key": "{color.vault-radar.surface}" + }, + "name": "token-color-vault-radar-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "surface" + ] + }, + "token-color-vault-radar-border": { + "key": "{color.vault-radar.border}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-100}", + "group": "branding", + "key": "{color.vault-radar.border}" + }, + "name": "token-color-vault-radar-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "border" + ] + }, + "token-color-vault-radar-gradient-primary-start": { + "key": "{color.vault-radar.gradient.primary.start}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-100}", + "group": "branding", + "key": "{color.vault-radar.gradient.primary.start}" + }, + "name": "token-color-vault-radar-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "primary", + "start" + ] + }, + "token-color-vault-radar-gradient-primary-stop": { + "key": "{color.vault-radar.gradient.primary.stop}", + "$type": "color", + "$value": "#ffe543", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-200}", + "group": "branding", + "key": "{color.vault-radar.gradient.primary.stop}" + }, + "name": "token-color-vault-radar-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "primary", + "stop" + ] + }, + "token-color-vault-radar-gradient-faint-start": { + "key": "{color.vault-radar.gradient.faint.start}", + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-radar-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-radar-50' value at 25% opacity on white", + "key": "{color.vault-radar.gradient.faint.start}" + }, + "name": "token-color-vault-radar-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "faint", + "start" + ] + }, + "token-color-vault-radar-gradient-faint-stop": { + "key": "{color.vault-radar.gradient.faint.stop}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-50}", + "group": "branding", + "key": "{color.vault-radar.gradient.faint.stop}" + }, + "name": "token-color-vault-radar-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "faint", + "stop" + ] + }, + "token-color-vault-secrets-brand": { + "key": "{color.vault-secrets.brand}", + "$type": "color", + "$value": "#ffcf25", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-brand}", + "group": "branding", + "key": "{color.vault-secrets.brand}" + }, + "name": "token-color-vault-secrets-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "brand" + ] + }, + "token-color-vault-secrets-brand-alt": { + "key": "{color.vault-secrets.brand-alt}", + "group": "branding", + "$type": "color", + "$value": "#000000", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work", + "original": { + "group": "branding", + "$type": "color", + "$value": "#000", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work", + "key": "{color.vault-secrets.brand-alt}" + }, + "name": "token-color-vault-secrets-brand-alt", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "brand-alt" + ] + }, + "token-color-vault-secrets-foreground": { + "key": "{color.vault-secrets.foreground}", + "$type": "color", + "$value": "#9a6f00", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-500}", + "group": "branding", + "key": "{color.vault-secrets.foreground}" + }, + "name": "token-color-vault-secrets-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "foreground" + ] + }, + "token-color-vault-secrets-surface": { + "key": "{color.vault-secrets.surface}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-50}", + "group": "branding", + "key": "{color.vault-secrets.surface}" + }, + "name": "token-color-vault-secrets-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "surface" + ] + }, + "token-color-vault-secrets-border": { + "key": "{color.vault-secrets.border}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-100}", + "group": "branding", + "key": "{color.vault-secrets.border}" + }, + "name": "token-color-vault-secrets-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "border" + ] + }, + "token-color-vault-secrets-gradient-primary-start": { + "key": "{color.vault-secrets.gradient.primary.start}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-100}", + "group": "branding", + "key": "{color.vault-secrets.gradient.primary.start}" + }, + "name": "token-color-vault-secrets-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "primary", + "start" + ] + }, + "token-color-vault-secrets-gradient-primary-stop": { + "key": "{color.vault-secrets.gradient.primary.stop}", + "$type": "color", + "$value": "#ffe543", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-200}", + "group": "branding", + "key": "{color.vault-secrets.gradient.primary.stop}" + }, + "name": "token-color-vault-secrets-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "primary", + "stop" + ] + }, + "token-color-vault-secrets-gradient-faint-start": { + "key": "{color.vault-secrets.gradient.faint.start}", + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-secrets-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-secrets-50' value at 25% opacity on white", + "key": "{color.vault-secrets.gradient.faint.start}" + }, + "name": "token-color-vault-secrets-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "faint", + "start" + ] + }, + "token-color-vault-secrets-gradient-faint-stop": { + "key": "{color.vault-secrets.gradient.faint.stop}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-50}", + "group": "branding", + "key": "{color.vault-secrets.gradient.faint.stop}" + }, + "name": "token-color-vault-secrets-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "faint", + "stop" + ] + }, + "token-color-vault-brand": { + "key": "{color.vault.brand}", + "$type": "color", + "$value": "#ffcf25", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-brand}", + "group": "branding", + "key": "{color.vault.brand}" + }, + "name": "token-color-vault-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "brand" + ] + }, + "token-color-vault-brand-alt": { + "key": "{color.vault.brand-alt}", + "$type": "color", + "$value": "#000000", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work", + "original": { + "$type": "color", + "$value": "#000", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work", + "key": "{color.vault.brand-alt}" + }, + "name": "token-color-vault-brand-alt", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "brand-alt" + ] + }, + "token-color-vault-foreground": { + "key": "{color.vault.foreground}", + "$type": "color", + "$value": "#9a6f00", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-500}", + "group": "branding", + "key": "{color.vault.foreground}" + }, + "name": "token-color-vault-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "foreground" + ] + }, + "token-color-vault-surface": { + "key": "{color.vault.surface}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-50}", + "group": "branding", + "key": "{color.vault.surface}" + }, + "name": "token-color-vault-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "surface" + ] + }, + "token-color-vault-border": { + "key": "{color.vault.border}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-100}", + "group": "branding", + "key": "{color.vault.border}" + }, + "name": "token-color-vault-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "border" + ] + }, + "token-color-vault-gradient-primary-start": { + "key": "{color.vault.gradient.primary.start}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-100}", + "group": "branding", + "key": "{color.vault.gradient.primary.start}" + }, + "name": "token-color-vault-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "primary", + "start" + ] + }, + "token-color-vault-gradient-primary-stop": { + "key": "{color.vault.gradient.primary.stop}", + "$type": "color", + "$value": "#ffe543", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-200}", + "group": "branding", + "key": "{color.vault.gradient.primary.stop}" + }, + "name": "token-color-vault-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "primary", + "stop" + ] + }, + "token-color-vault-gradient-faint-start": { + "key": "{color.vault.gradient.faint.start}", + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-50' value at 25% opacity on white", + "key": "{color.vault.gradient.faint.start}" + }, + "name": "token-color-vault-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "faint", + "start" + ] + }, + "token-color-vault-gradient-faint-stop": { + "key": "{color.vault.gradient.faint.stop}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-50}", + "group": "branding", + "key": "{color.vault.gradient.faint.stop}" + }, + "name": "token-color-vault-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "faint", + "stop" + ] + }, + "token-color-waypoint-brand": { + "key": "{color.waypoint.brand}", + "$type": "color", + "$value": "#14c6cb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-brand}", + "group": "branding", + "key": "{color.waypoint.brand}" + }, + "name": "token-color-waypoint-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "brand" + ] + }, + "token-color-waypoint-foreground": { + "key": "{color.waypoint.foreground}", + "$type": "color", + "$value": "#008196", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-500}", + "group": "branding", + "key": "{color.waypoint.foreground}" + }, + "name": "token-color-waypoint-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "foreground" + ] + }, + "token-color-waypoint-surface": { + "key": "{color.waypoint.surface}", + "$type": "color", + "$value": "#e0fcff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-50}", + "group": "branding", + "key": "{color.waypoint.surface}" + }, + "name": "token-color-waypoint-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "surface" + ] + }, + "token-color-waypoint-border": { + "key": "{color.waypoint.border}", + "$type": "color", + "$value": "#cbf1f3", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-100}", + "group": "branding", + "key": "{color.waypoint.border}" + }, + "name": "token-color-waypoint-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "border" + ] + }, + "token-color-waypoint-gradient-primary-start": { + "key": "{color.waypoint.gradient.primary.start}", + "$type": "color", + "$value": "#cbf1f3", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-100}", + "group": "branding", + "key": "{color.waypoint.gradient.primary.start}" + }, + "name": "token-color-waypoint-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "primary", + "start" + ] + }, + "token-color-waypoint-gradient-primary-stop": { + "key": "{color.waypoint.gradient.primary.stop}", + "$type": "color", + "$value": "#62d4dc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-200}", + "group": "branding", + "key": "{color.waypoint.gradient.primary.stop}" + }, + "name": "token-color-waypoint-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "primary", + "stop" + ] + }, + "token-color-waypoint-gradient-faint-start": { + "key": "{color.waypoint.gradient.faint.start}", + "$type": "color", + "$value": "#f6feff", + "group": "branding", + "comment": "this is the 'waypoint-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#f6feff", + "group": "branding", + "comment": "this is the 'waypoint-50' value at 25% opacity on white", + "key": "{color.waypoint.gradient.faint.start}" + }, + "name": "token-color-waypoint-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "faint", + "start" + ] + }, + "token-color-waypoint-gradient-faint-stop": { + "key": "{color.waypoint.gradient.faint.stop}", + "$type": "color", + "$value": "#e0fcff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-50}", + "group": "branding", + "key": "{color.waypoint.gradient.faint.stop}" + }, + "name": "token-color-waypoint-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "faint", + "stop" + ] + }, + "token-elevation-inset-box-shadow": { + "key": "{elevation.inset.box-shadow}", + "$value": "none", + "$modes": { + "default": "inset 0px 1px 2px 1px #5252521a", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.inset.box-shadow-01}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.inset.box-shadow}" + }, + "name": "token-elevation-inset-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "inset", + "box-shadow" + ] + }, + "token-elevation-low-box-shadow": { + "key": "{elevation.low.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 1px 1px 0px #5252520d, 0px 2px 2px 0px #5252520d", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.low.box-shadow-01}, {elevation.low.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.low.box-shadow}" + }, + "name": "token-elevation-low-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "low", + "box-shadow" + ] + }, + "token-elevation-mid-box-shadow": { + "key": "{elevation.mid.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #5252521a, 0px 8px 16px -10px #52525233", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.mid.box-shadow-01}, {elevation.mid.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.mid.box-shadow}" + }, + "name": "token-elevation-mid-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "mid", + "box-shadow" + ] + }, + "token-elevation-high-box-shadow": { + "key": "{elevation.high.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #52525226, 0px 16px 16px -10px #52525233", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.high.box-shadow-01}, {elevation.high.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.high.box-shadow}" + }, + "name": "token-elevation-high-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "high", + "box-shadow" + ] + }, + "token-elevation-higher-box-shadow": { + "key": "{elevation.higher.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #5252521a, 0px 12px 28px 0px #52525240", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.higher.box-shadow-01}, {elevation.higher.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.higher.box-shadow}" + }, + "name": "token-elevation-higher-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "higher", + "box-shadow" + ] + }, + "token-elevation-overlay-box-shadow": { + "key": "{elevation.overlay.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #39393940, 0px 12px 24px 0px #39393959", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.overlay.box-shadow-01}, {elevation.overlay.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.overlay.box-shadow}" + }, + "name": "token-elevation-overlay-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "overlay", + "box-shadow" + ] + }, + "token-surface-inset-box-shadow": { + "key": "{surface.inset.box-shadow}", + "$value": "none", + "$modes": { + "default": "inset 0 0 0 1px #5252524d, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.inset.box-shadow-border}, {elevation.inset.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.inset.box-shadow}" + }, + "name": "token-surface-inset-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "inset", + "box-shadow" + ] + }, + "token-surface-base-box-shadow": { + "key": "{surface.base.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525233", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.base.box-shadow-border}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.base.box-shadow}" + }, + "name": "token-surface-base-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "base", + "box-shadow" + ] + }, + "token-surface-low-box-shadow": { + "key": "{surface.low.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525226, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.low.box-shadow-border}, {elevation.low.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.low.box-shadow}" + }, + "name": "token-surface-low-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "low", + "box-shadow" + ] + }, + "token-surface-mid-box-shadow": { + "key": "{surface.mid.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525226, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.mid.box-shadow-border}, {elevation.mid.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.mid.box-shadow}" + }, + "name": "token-surface-mid-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "mid", + "box-shadow" + ] + }, + "token-surface-high-box-shadow": { + "key": "{surface.high.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525240, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.high.box-shadow-border}, {elevation.high.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.high.box-shadow}" + }, + "name": "token-surface-high-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "high", + "box-shadow" + ] + }, + "token-surface-higher-box-shadow": { + "key": "{surface.higher.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525233, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.higher.box-shadow-border}, {elevation.higher.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.higher.box-shadow}" + }, + "name": "token-surface-higher-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "higher", + "box-shadow" + ] + }, + "token-surface-overlay-box-shadow": { + "key": "{surface.overlay.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #39393940, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.overlay.box-shadow-border}, {elevation.overlay.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.overlay.box-shadow}" + }, + "name": "token-surface-overlay-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "overlay", + "box-shadow" + ] + }, + "token-focus-ring-action-box-shadow": { + "key": "{focus-ring.action.box-shadow}", + "$value": "inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe", + "original": { + "$value": "{focus-ring.action.internal-box-shadow}, {focus-ring.action.external-box-shadow}", + "key": "{focus-ring.action.box-shadow}" + }, + "name": "token-focus-ring-action-box-shadow", + "attributes": { + "category": "focus-ring" + }, + "path": [ + "focus-ring", + "action", + "box-shadow" + ] + }, + "token-focus-ring-critical-box-shadow": { + "key": "{focus-ring.critical.box-shadow}", + "$value": "inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe", + "original": { + "$value": "{focus-ring.critical.internal-box-shadow}, {focus-ring.critical.external-box-shadow}", + "key": "{focus-ring.critical.box-shadow}" + }, + "name": "token-focus-ring-critical-box-shadow", + "attributes": { + "category": "focus-ring" + }, + "path": [ + "focus-ring", + "critical", + "box-shadow" + ] + }, + "token-app-footer-focus-color-action-internal": { + "key": "{app-footer.focus.color.action.internal}", + "$type": "color", + "$value": "#0f62fe", + "$modes": { + "default": "var(--token-color-focus-action-internal)", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.focus}", + "$modes": { + "default": "var(--token-color-focus-action-internal)", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{app-footer.focus.color.action.internal}" + }, + "name": "token-app-footer-focus-color-action-internal", + "attributes": { + "category": "app-footer" + }, + "path": [ + "app-footer", + "focus", + "color", + "action", + "internal" + ] + }, + "token-app-header-height": { + "key": "{app-header.height}", + "$type": "dimension", + "$value": "60px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "60", + "unit": "px", + "key": "{app-header.height}" + }, + "name": "token-app-header-height", + "attributes": { + "category": "app-header" + }, + "path": [ + "app-header", + "height" + ] + }, + "token-app-header-home-link-size": { + "key": "{app-header.home-link.size}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{app-header.home-link.size}" + }, + "name": "token-app-header-home-link-size", + "attributes": { + "category": "app-header" + }, + "path": [ + "app-header", + "home-link", + "size" + ] + }, + "token-app-header-logo-size": { + "key": "{app-header.logo.size}", + "$type": "dimension", + "$value": "28px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "28", + "unit": "px", + "key": "{app-header.logo.size}" + }, + "name": "token-app-header-logo-size", + "attributes": { + "category": "app-header" + }, + "path": [ + "app-header", + "logo", + "size" + ] + }, + "token-app-side-nav-wrapper-border-width": { + "key": "{app-side-nav.wrapper.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{app-side-nav.wrapper.border.width}" + }, + "name": "token-app-side-nav-wrapper-border-width", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "border", + "width" + ] + }, + "token-app-side-nav-wrapper-border-color": { + "key": "{app-side-nav.wrapper.border.color}", + "$type": "color", + "$value": "var(--token-color-palette-neutral-200)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-palette-neutral-200)", + "group": "components", + "key": "{app-side-nav.wrapper.border.color}" + }, + "name": "token-app-side-nav-wrapper-border-color", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "border", + "color" + ] + }, + "token-app-side-nav-wrapper-padding-horizontal": { + "key": "{app-side-nav.wrapper.padding.horizontal}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.horizontal}" + }, + "name": "token-app-side-nav-wrapper-padding-horizontal", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "horizontal" + ] + }, + "token-app-side-nav-wrapper-padding-vertical": { + "key": "{app-side-nav.wrapper.padding.vertical}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.vertical}" + }, + "name": "token-app-side-nav-wrapper-padding-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "vertical" + ] + }, + "token-app-side-nav-wrapper-padding-horizontal-minimized": { + "key": "{app-side-nav.wrapper.padding.horizontal-minimized}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.horizontal-minimized}" + }, + "name": "token-app-side-nav-wrapper-padding-horizontal-minimized", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "horizontal-minimized" + ] + }, + "token-app-side-nav-wrapper-padding-vertical-minimized": { + "key": "{app-side-nav.wrapper.padding.vertical-minimized}", + "$type": "dimension", + "$value": "22px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "22", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.vertical-minimized}" + }, + "name": "token-app-side-nav-wrapper-padding-vertical-minimized", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "vertical-minimized" + ] + }, + "token-app-side-nav-toggle-button-border-radius": { + "key": "{app-side-nav.toggle-button.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{app-side-nav.toggle-button.border.radius}" + }, + "name": "token-app-side-nav-toggle-button-border-radius", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "toggle-button", + "border", + "radius" + ] + }, + "token-app-side-nav-header-home-link-padding": { + "key": "{app-side-nav.header.home-link.padding}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{app-side-nav.header.home-link.padding}" + }, + "name": "token-app-side-nav-header-home-link-padding", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "home-link", + "padding" + ] + }, + "token-app-side-nav-header-home-link-logo-size": { + "key": "{app-side-nav.header.home-link.logo-size}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{app-side-nav.header.home-link.logo-size}" + }, + "name": "token-app-side-nav-header-home-link-logo-size", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "home-link", + "logo-size" + ] + }, + "token-app-side-nav-header-home-link-logo-size-minimized": { + "key": "{app-side-nav.header.home-link.logo-size-minimized}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{app-side-nav.header.home-link.logo-size-minimized}" + }, + "name": "token-app-side-nav-header-home-link-logo-size-minimized", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "home-link", + "logo-size-minimized" + ] + }, + "token-app-side-nav-header-actions-spacing": { + "key": "{app-side-nav.header.actions.spacing}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.header.actions.spacing}" + }, + "name": "token-app-side-nav-header-actions-spacing", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "actions", + "spacing" + ] + }, + "token-app-side-nav-body-list-margin-vertical": { + "key": "{app-side-nav.body.list.margin-vertical}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{app-side-nav.body.list.margin-vertical}" + }, + "name": "token-app-side-nav-body-list-margin-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list", + "margin-vertical" + ] + }, + "token-app-side-nav-body-list-item-height": { + "key": "{app-side-nav.body.list-item.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{app-side-nav.body.list-item.height}" + }, + "name": "token-app-side-nav-body-list-item-height", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "height" + ] + }, + "token-app-side-nav-body-list-item-padding-horizontal": { + "key": "{app-side-nav.body.list-item.padding.horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.body.list-item.padding.horizontal}" + }, + "name": "token-app-side-nav-body-list-item-padding-horizontal", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "padding", + "horizontal" + ] + }, + "token-app-side-nav-body-list-item-padding-vertical": { + "key": "{app-side-nav.body.list-item.padding.vertical}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{app-side-nav.body.list-item.padding.vertical}" + }, + "name": "token-app-side-nav-body-list-item-padding-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "padding", + "vertical" + ] + }, + "token-app-side-nav-body-list-item-spacing-vertical": { + "key": "{app-side-nav.body.list-item.spacing-vertical}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{app-side-nav.body.list-item.spacing-vertical}" + }, + "name": "token-app-side-nav-body-list-item-spacing-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "spacing-vertical" + ] + }, + "token-app-side-nav-body-list-item-content-spacing-horizontal": { + "key": "{app-side-nav.body.list-item.content-spacing-horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.body.list-item.content-spacing-horizontal}" + }, + "name": "token-app-side-nav-body-list-item-content-spacing-horizontal", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "content-spacing-horizontal" + ] + }, + "token-app-side-nav-body-list-item-border-radius": { + "key": "{app-side-nav.body.list-item.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{app-side-nav.body.list-item.border-radius}" + }, + "name": "token-app-side-nav-body-list-item-border-radius", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "border-radius" + ] + }, + "token-app-side-nav-color-foreground-primary": { + "key": "{app-side-nav.color.foreground.primary}", + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "key": "{app-side-nav.color.foreground.primary}" + }, + "name": "token-app-side-nav-color-foreground-primary", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "foreground", + "primary" + ] + }, + "token-app-side-nav-color-foreground-strong": { + "key": "{app-side-nav.color.foreground.strong}", + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "key": "{app-side-nav.color.foreground.strong}" + }, + "name": "token-app-side-nav-color-foreground-strong", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "foreground", + "strong" + ] + }, + "token-app-side-nav-color-foreground-faint": { + "key": "{app-side-nav.color.foreground.faint}", + "$type": "color", + "$value": "var(--token-color-foreground-faint)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-foreground-faint)", + "group": "components", + "key": "{app-side-nav.color.foreground.faint}" + }, + "name": "token-app-side-nav-color-foreground-faint", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "foreground", + "faint" + ] + }, + "token-app-side-nav-color-surface-primary": { + "key": "{app-side-nav.color.surface.primary}", + "$type": "color", + "$value": "var(--token-color-surface-faint)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-surface-faint)", + "group": "components", + "key": "{app-side-nav.color.surface.primary}" + }, + "name": "token-app-side-nav-color-surface-primary", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "surface", + "primary" + ] + }, + "token-app-side-nav-color-surface-interactive-hover": { + "key": "{app-side-nav.color.surface.interactive-hover}", + "$type": "color", + "$value": "var(--token-color-surface-interactive-hover)", + "group": "semantic", + "original": { + "$type": "color", + "$value": "var(--token-color-surface-interactive-hover)", + "group": "semantic", + "key": "{app-side-nav.color.surface.interactive-hover}" + }, + "name": "token-app-side-nav-color-surface-interactive-hover", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "surface", + "interactive-hover" + ] + }, + "token-app-side-nav-color-surface-interactive-active": { + "key": "{app-side-nav.color.surface.interactive-active}", + "$type": "color", + "$value": "var(--token-color-palette-neutral-300)", + "group": "semantic", + "original": { + "$type": "color", + "$value": "var(--token-color-palette-neutral-300)", + "group": "semantic", + "key": "{app-side-nav.color.surface.interactive-active}" + }, + "name": "token-app-side-nav-color-surface-interactive-active", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "surface", + "interactive-active" + ] + }, + "token-badge-count-padding-horizontal-small": { + "key": "{badge-count.padding.horizontal.small}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge-count.padding.horizontal.small}" + }, + "name": "token-badge-count-padding-horizontal-small", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "small" + ] + }, + "token-badge-count-padding-horizontal-medium": { + "key": "{badge-count.padding.horizontal.medium}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge-count.padding.horizontal.medium}" + }, + "name": "token-badge-count-padding-horizontal-medium", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "medium" + ] + }, + "token-badge-count-padding-horizontal-large": { + "key": "{badge-count.padding.horizontal.large}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge-count.padding.horizontal.large}" + }, + "name": "token-badge-count-padding-horizontal-large", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "large" + ] + }, + "token-badge-height-small": { + "key": "{badge.height.small}", + "$type": "dimension", + "$value": "18px", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "18", + "cds-g10": "18", + "cds-g90": "18", + "cds-g100": "18" + }, + "original": { + "$type": "dimension", + "$value": "18", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "18", + "cds-g10": "18", + "cds-g90": "18", + "cds-g100": "18" + }, + "key": "{badge.height.small}" + }, + "name": "token-badge-height-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "small" + ] + }, + "token-badge-height-medium": { + "key": "{badge.height.medium}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{badge.height.medium}" + }, + "name": "token-badge-height-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "medium" + ] + }, + "token-badge-height-large": { + "key": "{badge.height.large}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{badge.height.large}" + }, + "name": "token-badge-height-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "large" + ] + }, + "token-badge-padding-horizontal-small": { + "key": "{badge.padding.horizontal.small}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge.padding.horizontal.small}" + }, + "name": "token-badge-padding-horizontal-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "small" + ] + }, + "token-badge-padding-horizontal-medium": { + "key": "{badge.padding.horizontal.medium}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge.padding.horizontal.medium}" + }, + "name": "token-badge-padding-horizontal-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "medium" + ] + }, + "token-badge-padding-horizontal-large": { + "key": "{badge.padding.horizontal.large}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.padding.horizontal.large}" + }, + "name": "token-badge-padding-horizontal-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "large" + ] + }, + "token-badge-padding-vertical-small": { + "key": "{badge.padding.vertical.small}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "$modes": { + "default": "2", + "cds-g0": "1", + "cds-g10": "1", + "cds-g90": "1", + "cds-g100": "1" + }, + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "$modes": { + "default": "2", + "cds-g0": "1", + "cds-g10": "1", + "cds-g90": "1", + "cds-g100": "1" + }, + "key": "{badge.padding.vertical.small}" + }, + "name": "token-badge-padding-vertical-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "small" + ] + }, + "token-badge-padding-vertical-medium": { + "key": "{badge.padding.vertical.medium}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{badge.padding.vertical.medium}" + }, + "name": "token-badge-padding-vertical-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "medium" + ] + }, + "token-badge-padding-vertical-large": { + "key": "{badge.padding.vertical.large}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{badge.padding.vertical.large}" + }, + "name": "token-badge-padding-vertical-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "large" + ] + }, + "token-badge-gap-small": { + "key": "{badge.gap.small}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.small}" + }, + "name": "token-badge-gap-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "small" + ] + }, + "token-badge-gap-medium": { + "key": "{badge.gap.medium}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.medium}" + }, + "name": "token-badge-gap-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "medium" + ] + }, + "token-badge-gap-large": { + "key": "{badge.gap.large}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.large}" + }, + "name": "token-badge-gap-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "large" + ] + }, + "token-badge-typography-font-size-small": { + "key": "{badge.typography.font-size.small}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "12", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.small}" + }, + "name": "token-badge-typography-font-size-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "small" + ] + }, + "token-badge-typography-font-size-medium": { + "key": "{badge.typography.font-size.medium}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "12", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.medium}" + }, + "name": "token-badge-typography-font-size-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "medium" + ] + }, + "token-badge-typography-font-size-large": { + "key": "{badge.typography.font-size.large}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "12", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.large}" + }, + "name": "token-badge-typography-font-size-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "large" + ] + }, + "token-badge-typography-line-height-small": { + "key": "{badge.typography.line-height.small}", + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "original": { + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "key": "{badge.typography.line-height.small}" + }, + "name": "token-badge-typography-line-height-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "small" + ] + }, + "token-badge-typography-line-height-medium": { + "key": "{badge.typography.line-height.medium}", + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "original": { + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "key": "{badge.typography.line-height.medium}" + }, + "name": "token-badge-typography-line-height-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "medium" + ] + }, + "token-badge-typography-line-height-large": { + "key": "{badge.typography.line-height.large}", + "$type": "number", + "$value": 1, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1, + "cds-g10": 1, + "cds-g90": 1, + "cds-g100": 1 + }, + "original": { + "$type": "number", + "$value": 1, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1, + "cds-g10": 1, + "cds-g90": 1, + "cds-g100": 1 + }, + "key": "{badge.typography.line-height.large}" + }, + "name": "token-badge-typography-line-height-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "large" + ] + }, + "token-badge-foreground-color-neutral-filled": { + "key": "{badge.foreground.color.neutral.filled}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.white}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral.filled}" + }, + "name": "token-badge-foreground-color-neutral-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "filled" + ] + }, + "token-badge-foreground-color-neutral-inverted": { + "key": "{badge.foreground.color.neutral.inverted}", + "$type": "color", + "$value": "#e0e0e0", + "$modes": { + "default": "#ffffff", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.20}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.color.gray.20}", + "cds-g10": "{carbon.color.gray.20}", + "cds-g90": "{carbon.color.gray.100}", + "cds-g100": "{carbon.color.gray.100}" + }, + "key": "{badge.foreground.color.neutral.inverted}" + }, + "name": "token-badge-foreground-color-neutral-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "inverted" + ] + }, + "token-badge-foreground-color-neutral-outlined": { + "key": "{badge.foreground.color.neutral.outlined}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.white}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral.outlined}" + }, + "name": "token-badge-foreground-color-neutral-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "outlined" + ] + }, + "token-badge-foreground-color-neutral-dark-mode-filled": { + "key": "{badge.foreground.color.neutral-dark-mode.filled}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.neutral-dark-mode.filled}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "filled" + ] + }, + "token-badge-foreground-color-neutral-dark-mode-inverted": { + "key": "{badge.foreground.color.neutral-dark-mode.inverted}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.white}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral-dark-mode.inverted}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "inverted" + ] + }, + "token-badge-foreground-color-neutral-dark-mode-outlined": { + "key": "{badge.foreground.color.neutral-dark-mode.outlined}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "comments": { + "cds": "In Figma the `cds` value uses a token `Tag/HighContrast/TagColor` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "comments": { + "cds": "In Figma the `cds` value uses a token `Tag/HighContrast/TagColor` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.neutral-dark-mode.outlined}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "outlined" + ] + }, + "token-badge-foreground-color-highlight-filled": { + "key": "{badge.foreground.color.highlight.filled}", + "$type": "color", + "$value": "#6929c4", + "comment": "we don't use `highlight-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#6929c4", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorPurple.white}", + "comment": "we don't use `highlight-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.purple-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorPurple.g100}" + }, + "key": "{badge.foreground.color.highlight.filled}" + }, + "name": "token-badge-foreground-color-highlight-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "filled" + ] + }, + "token-badge-foreground-color-highlight-inverted": { + "key": "{badge.foreground.color.highlight.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.highlight.inverted}" + }, + "name": "token-badge-foreground-color-highlight-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "inverted" + ] + }, + "token-badge-foreground-color-highlight-outlined": { + "key": "{badge.foreground.color.highlight.outlined}", + "$type": "color", + "$value": "#6929c4", + "$modes": { + "default": "#8a3ffc", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorPurple.white}", + "$modes": { + "default": "{color.foreground.highlight}", + "cds-g0": "{carbon.themes.tagTokens.tagColorPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorPurple.g100}" + }, + "key": "{badge.foreground.color.highlight.outlined}" + }, + "name": "token-badge-foreground-color-highlight-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "outlined" + ] + }, + "token-badge-foreground-color-success-filled": { + "key": "{badge.foreground.color.success.filled}", + "$type": "color", + "$value": "#0e6027", + "comment": "we don't use `success-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#0e6027", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGreen.white}", + "comment": "we don't use `success-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.green-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.foreground.color.success.filled}" + }, + "name": "token-badge-foreground-color-success-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "filled" + ] + }, + "token-badge-foreground-color-success-inverted": { + "key": "{badge.foreground.color.success.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.success.inverted}" + }, + "name": "token-badge-foreground-color-success-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "inverted" + ] + }, + "token-badge-foreground-color-success-outlined": { + "key": "{badge.foreground.color.success.outlined}", + "$type": "color", + "$value": "#0e6027", + "$modes": { + "default": "#198038", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGreen.white}", + "$modes": { + "default": "{color.foreground.success}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.foreground.color.success.outlined}" + }, + "name": "token-badge-foreground-color-success-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "outlined" + ] + }, + "token-badge-foreground-color-warning-filled": { + "key": "{badge.foreground.color.warning.filled}", + "$type": "color", + "$value": "#8a3800", + "$modes": { + "default": "#5e2900", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "hds": "we don't use `warning-on-surface` for accessibility (better contrast)", + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.70}", + "$modes": { + "default": "{color.palette.amber-400}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "hds": "we don't use `warning-on-surface` for accessibility (better contrast)", + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.warning.filled}" + }, + "name": "token-badge-foreground-color-warning-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "filled" + ] + }, + "token-badge-foreground-color-warning-inverted": { + "key": "{badge.foreground.color.warning.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.warning.inverted}" + }, + "name": "token-badge-foreground-color-warning-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "inverted" + ] + }, + "token-badge-foreground-color-warning-outlined": { + "key": "{badge.foreground.color.warning.outlined}", + "$type": "color", + "$value": "#8a3800", + "$modes": { + "default": "#8e6a00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.70}", + "$modes": { + "default": "{color.foreground.warning}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.warning.outlined}" + }, + "name": "token-badge-foreground-color-warning-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "outlined" + ] + }, + "token-badge-foreground-color-critical-filled": { + "key": "{badge.foreground.color.critical.filled}", + "$type": "color", + "$value": "#a2191f", + "comment": "we don't use `critical-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#750e13", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorRed.white}", + "comment": "we don't use `critical-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.foreground.color.critical.filled}" + }, + "name": "token-badge-foreground-color-critical-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "filled" + ] + }, + "token-badge-foreground-color-critical-inverted": { + "key": "{badge.foreground.color.critical.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.critical.inverted}" + }, + "name": "token-badge-foreground-color-critical-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "inverted" + ] + }, + "token-badge-foreground-color-critical-outlined": { + "key": "{badge.foreground.color.critical.outlined}", + "$type": "color", + "$value": "#a2191f", + "$modes": { + "default": "#da1e28", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorRed.white}", + "$modes": { + "default": "{color.foreground.critical}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.foreground.color.critical.outlined}" + }, + "name": "token-badge-foreground-color-critical-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "outlined" + ] + }, + "token-badge-surface-color-neutral-filled": { + "key": "{badge.surface.color.neutral.filled}", + "$type": "color", + "$value": "#e0e0e0", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "$modes": { + "default": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{badge.surface.color.neutral.filled}" + }, + "name": "token-badge-surface-color-neutral-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "filled" + ] + }, + "token-badge-surface-color-neutral-inverted": { + "key": "{badge.surface.color.neutral.inverted}", + "$type": "color", + "$value": "#393939", + "$modes": { + "default": "#525252", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead", + "original": { + "$type": "color", + "$value": "{carbon.themes.white.backgroundInverse}", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead", + "key": "{badge.surface.color.neutral.inverted}" + }, + "name": "token-badge-surface-color-neutral-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "inverted" + ] + }, + "token-badge-surface-color-neutral-outlined": { + "key": "{badge.surface.color.neutral.outlined}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{badge.surface.color.neutral.outlined}" + }, + "name": "token-badge-surface-color-neutral-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "outlined" + ] + }, + "token-badge-surface-color-neutral-dark-mode-filled": { + "key": "{badge.surface.color.neutral-dark-mode.filled}", + "$type": "color", + "$value": "#393939", + "$modes": { + "default": "#525252", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component", + "original": { + "$type": "color", + "$value": "{carbon.themes.white.backgroundInverse}", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component", + "key": "{badge.surface.color.neutral-dark-mode.filled}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "filled" + ] + }, + "token-badge-surface-color-neutral-dark-mode-inverted": { + "key": "{badge.surface.color.neutral-dark-mode.inverted}", + "$type": "color", + "$value": "#e0e0e0", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{badge.surface.color.neutral-dark-mode.inverted}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "inverted" + ] + }, + "token-badge-surface-color-neutral-dark-mode-outlined": { + "key": "{badge.surface.color.neutral-dark-mode.outlined}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{badge.surface.color.neutral-dark-mode.outlined}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "outlined" + ] + }, + "token-badge-surface-color-highlight-filled": { + "key": "{badge.surface.color.highlight.filled}", + "$type": "color", + "$value": "#e8daff", + "comment": "we don't use `surface-highlight` for accessibility (better contrast)", + "$modes": { + "default": "#e8daff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundPurple.white}", + "comment": "we don't use `surface-highlight` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.purple-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundPurple.g100}" + }, + "key": "{badge.surface.color.highlight.filled}" + }, + "name": "token-badge-surface-color-highlight-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "highlight", + "filled" + ] + }, + "token-badge-surface-color-highlight-inverted": { + "key": "{badge.surface.color.highlight.inverted}", + "$type": "color", + "$value": "#6929c4", + "$modes": { + "default": "#a56eff", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.70}", + "$modes": { + "default": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, + "key": "{badge.surface.color.highlight.inverted}" + }, + "name": "token-badge-surface-color-highlight-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "highlight", + "inverted" + ] + }, + "token-badge-surface-color-success-filled": { + "key": "{badge.surface.color.success.filled}", + "$type": "color", + "$value": "#a7f0ba", + "comment": "we don't use `surface-success` for accessibility (better contrast)", + "$modes": { + "default": "#a7f0ba", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGreen.white}", + "comment": "we don't use `surface-success` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.green-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGreen.g100}" + }, + "key": "{badge.surface.color.success.filled}" + }, + "name": "token-badge-surface-color-success-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "success", + "filled" + ] + }, + "token-badge-surface-color-success-inverted": { + "key": "{badge.surface.color.success.inverted}", + "$type": "color", + "$value": "#0e6027", + "$modes": { + "default": "#24a148", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGreen.white}", + "$modes": { + "default": "{color.palette.green-200}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.surface.color.success.inverted}" + }, + "name": "token-badge-surface-color-success-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "success", + "inverted" + ] + }, + "token-badge-surface-color-warning-filled": { + "key": "{badge.surface.color.warning.filled}", + "$type": "color", + "$value": "#ffd9be", + "comment": "we don't use `surface-warning` for accessibility (better contrast)", + "$modes": { + "default": "#ffd9be", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.20}", + "comment": "we don't use `surface-warning` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.surface.color.warning.filled}" + }, + "name": "token-badge-surface-color-warning-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "warning", + "filled" + ] + }, + "token-badge-surface-color-warning-inverted": { + "key": "{badge.surface.color.warning.inverted}", + "$type": "color", + "$value": "#8a3800", + "$modes": { + "default": "#ba4e00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.70}", + "$modes": { + "default": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.surface.color.warning.inverted}" + }, + "name": "token-badge-surface-color-warning-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "warning", + "inverted" + ] + }, + "token-badge-surface-color-critical-filled": { + "key": "{badge.surface.color.critical.filled}", + "$type": "color", + "$value": "#ffd7d9", + "comment": "we don't use `surface-critical` for accessibility (better contrast)", + "$modes": { + "default": "#ffd7d9", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundRed.white}", + "comment": "we don't use `surface-critical` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.red-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundRed.g100}" + }, + "key": "{badge.surface.color.critical.filled}" + }, + "name": "token-badge-surface-color-critical-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "critical", + "filled" + ] + }, + "token-badge-surface-color-critical-inverted": { + "key": "{badge.surface.color.critical.inverted}", + "$type": "color", + "$value": "#a2191f", + "$modes": { + "default": "#da1e28", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorRed.white}", + "$modes": { + "default": "{color.palette.red-200}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.surface.color.critical.inverted}" + }, + "name": "token-badge-surface-color-critical-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "critical", + "inverted" + ] + }, + "token-badge-border-radius": { + "key": "{badge.border.radius}", + "$type": "dimension", + "$value": "1000000000px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "1000000000px", + "cds-g10": "1000000000px", + "cds-g90": "1000000000px", + "cds-g100": "1000000000px" + }, + "original": { + "$type": "dimension", + "$value": "{border.radius.rounded}", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "{border.radius.rounded}", + "cds-g10": "{border.radius.rounded}", + "cds-g90": "{border.radius.rounded}", + "cds-g100": "{border.radius.rounded}" + }, + "key": "{badge.border.radius}" + }, + "name": "token-badge-border-radius", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "border", + "radius" + ] + }, + "token-badge-icon-size-small": { + "key": "{badge.icon.size.small}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{badge.icon.size.small}" + }, + "name": "token-badge-icon-size-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "small" + ] + }, + "token-badge-icon-size-medium": { + "key": "{badge.icon.size.medium}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{badge.icon.size.medium}" + }, + "name": "token-badge-icon-size-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "medium" + ] + }, + "token-badge-icon-size-large": { + "key": "{badge.icon.size.large}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{badge.icon.size.large}" + }, + "name": "token-badge-icon-size-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "large" + ] + }, + "token-button-height-small": { + "key": "{button.height.small}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "$modes": { + "default": "28", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "$modes": { + "default": "28", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "key": "{button.height.small}" + }, + "name": "token-button-height-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "small" + ] + }, + "token-button-height-medium": { + "key": "{button.height.medium}", + "$type": "dimension", + "$value": "40px", + "unit": "px", + "$modes": { + "default": "36", + "cds-g0": "40", + "cds-g10": "40", + "cds-g90": "40", + "cds-g100": "40" + }, + "original": { + "$type": "dimension", + "$value": "40", + "unit": "px", + "$modes": { + "default": "36", + "cds-g0": "40", + "cds-g10": "40", + "cds-g90": "40", + "cds-g100": "40" + }, + "key": "{button.height.medium}" + }, + "name": "token-button-height-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "medium" + ] + }, + "token-button-height-large": { + "key": "{button.height.large}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "$modes": { + "default": "48", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "$modes": { + "default": "48", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "key": "{button.height.large}" + }, + "name": "token-button-height-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "large" + ] + }, + "token-button-padding-horizontal-small": { + "key": "{button.padding.horizontal.small}", + "$type": "dimension", + "$value": "15px", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "15", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.small}" + }, + "name": "token-button-padding-horizontal-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "small" + ] + }, + "token-button-padding-horizontal-medium": { + "key": "{button.padding.horizontal.medium}", + "$type": "dimension", + "$value": "15px", + "unit": "px", + "$modes": { + "default": "15", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "15", + "unit": "px", + "$modes": { + "default": "15", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.medium}" + }, + "name": "token-button-padding-horizontal-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "medium" + ] + }, + "token-button-padding-horizontal-large": { + "key": "{button.padding.horizontal.large}", + "$type": "dimension", + "$value": "15px", + "unit": "px", + "$modes": { + "default": "19", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "15", + "unit": "px", + "$modes": { + "default": "19", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.large}" + }, + "name": "token-button-padding-horizontal-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "large" + ] + }, + "token-button-padding-vertical-small": { + "key": "{button.padding.vertical.small}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.small}" + }, + "name": "token-button-padding-vertical-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "small" + ] + }, + "token-button-padding-vertical-medium": { + "key": "{button.padding.vertical.medium}", + "$type": "dimension", + "$value": "10px", + "unit": "px", + "$modes": { + "default": "9", + "cds-g0": "10", + "cds-g10": "10", + "cds-g90": "10", + "cds-g100": "10" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "10", + "unit": "px", + "$modes": { + "default": "9", + "cds-g0": "10", + "cds-g10": "10", + "cds-g90": "10", + "cds-g100": "10" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.medium}" + }, + "name": "token-button-padding-vertical-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "medium" + ] + }, + "token-button-padding-vertical-large": { + "key": "{button.padding.vertical.large}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "14", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.large}" + }, + "name": "token-button-padding-vertical-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "large" + ] + }, + "token-button-gap": { + "key": "{button.gap}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "key": "{button.gap}" + }, + "name": "token-button-gap", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "gap" + ] + }, + "token-button-typography-font-size-small": { + "key": "{button.typography.font-size.small}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.small}" + }, + "name": "token-button-typography-font-size-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "small" + ] + }, + "token-button-typography-font-size-medium": { + "key": "{button.typography.font-size.medium}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.medium}" + }, + "name": "token-button-typography-font-size-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "medium" + ] + }, + "token-button-typography-font-size-large": { + "key": "{button.typography.font-size.large}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.large}" + }, + "name": "token-button-typography-font-size-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "large" + ] + }, + "token-button-typography-line-height-small": { + "key": "{button.typography.line-height.small}", + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)", + "$modes": { + "default": 0.9286, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)", + "$modes": { + "default": 0.9286, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.small}" + }, + "name": "token-button-typography-line-height-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "small" + ] + }, + "token-button-typography-line-height-medium": { + "key": "{button.typography.line-height.medium}", + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 1.1429", + "$modes": { + "default": 1.1429, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 1.1429", + "$modes": { + "default": 1.1429, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.medium}" + }, + "name": "token-button-typography-line-height-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "medium" + ] + }, + "token-button-typography-line-height-large": { + "key": "{button.typography.line-height.large}", + "$type": "number", + "$value": 1.2858, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 1.2858, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.large}" + }, + "name": "token-button-typography-line-height-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "large" + ] + }, + "token-button-foreground-color-primary-default": { + "key": "{button.foreground.color.primary.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.default}" + }, + "name": "token-button-foreground-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "default" + ] + }, + "token-button-foreground-color-primary-hover": { + "key": "{button.foreground.color.primary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.hover}" + }, + "name": "token-button-foreground-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "hover" + ] + }, + "token-button-foreground-color-primary-focus": { + "key": "{button.foreground.color.primary.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.focus}" + }, + "name": "token-button-foreground-color-primary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "focus" + ] + }, + "token-button-foreground-color-primary-active": { + "key": "{button.foreground.color.primary.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.active}" + }, + "name": "token-button-foreground-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "active" + ] + }, + "token-button-foreground-color-secondary-default": { + "key": "{button.foreground.color.secondary.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.default}" + }, + "name": "token-button-foreground-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "default" + ] + }, + "token-button-foreground-color-secondary-hover": { + "key": "{button.foreground.color.secondary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.hover}" + }, + "name": "token-button-foreground-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "hover" + ] + }, + "token-button-foreground-color-secondary-focus": { + "key": "{button.foreground.color.secondary.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.focus}" + }, + "name": "token-button-foreground-color-secondary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "focus" + ] + }, + "token-button-foreground-color-secondary-active": { + "key": "{button.foreground.color.secondary.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.active}" + }, + "name": "token-button-foreground-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "active" + ] + }, + "token-button-foreground-color-tertiary-default": { + "key": "{button.foreground.color.tertiary.default}", + "$type": "color", + "$value": "#0f62fe", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiary.white}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiary.g100}" + }, + "key": "{button.foreground.color.tertiary.default}" + }, + "name": "token-button-foreground-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "default" + ] + }, + "token-button-foreground-color-tertiary-hover": { + "key": "{button.foreground.color.tertiary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#0043ce", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textInverse}", + "$modes": { + "default": "{color.foreground.action-hover}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.hover}" + }, + "name": "token-button-foreground-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "hover" + ] + }, + "token-button-foreground-color-tertiary-focus": { + "key": "{button.foreground.color.tertiary.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textInverse}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.focus}" + }, + "name": "token-button-foreground-color-tertiary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "focus" + ] + }, + "token-button-foreground-color-tertiary-active": { + "key": "{button.foreground.color.tertiary.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#0043ce", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textInverse}", + "$modes": { + "default": "{color.foreground.action-active}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.active}" + }, + "name": "token-button-foreground-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "active" + ] + }, + "token-button-foreground-color-critical-default": { + "key": "{button.foreground.color.critical.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#a2191f", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textOnColor}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.default}" + }, + "name": "token-button-foreground-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "default" + ] + }, + "token-button-foreground-color-critical-hover": { + "key": "{button.foreground.color.critical.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.hover}" + }, + "name": "token-button-foreground-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "hover" + ] + }, + "token-button-foreground-color-critical-focus": { + "key": "{button.foreground.color.critical.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#a2191f", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textOnColor}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.focus}" + }, + "name": "token-button-foreground-color-critical-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "focus" + ] + }, + "token-button-foreground-color-critical-active": { + "key": "{button.foreground.color.critical.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.active}" + }, + "name": "token-button-foreground-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "active" + ] + }, + "token-button-foreground-color-disabled": { + "key": "{button.foreground.color.disabled}", + "$type": "color", + "$value": "#8d8d8d", + "$modes": { + "default": "rgba(22, 22, 22, 0.25)", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "rgba(255, 255, 255, 0.25)", + "cds-g100": "rgba(255, 255, 255, 0.25)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textOnColorDisabled}", + "$modes": { + "default": "{color.foreground.disabled}", + "cds-g0": "{carbon.themes.white.textOnColorDisabled}", + "cds-g10": "{carbon.themes.g10.textOnColorDisabled}", + "cds-g90": "{carbon.themes.g90.textOnColorDisabled}", + "cds-g100": "{carbon.themes.g100.textOnColorDisabled}" + }, + "key": "{button.foreground.color.disabled}" + }, + "name": "token-button-foreground-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "disabled" + ] + }, + "token-button-surface-color-primary-default": { + "key": "{button.surface.color.primary.default}", + "$type": "color", + "$value": "#0f62fe", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimary.white}", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimary.g100}" + }, + "key": "{button.surface.color.primary.default}" + }, + "name": "token-button-surface-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "default" + ] + }, + "token-button-surface-color-primary-hover": { + "key": "{button.surface.color.primary.hover}", + "$type": "color", + "$value": "#0050e6", + "$modes": { + "default": "#0043ce", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#0050e6", + "cds-g100": "#0050e6" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimaryHover.white}", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimaryHover.g100}" + }, + "key": "{button.surface.color.primary.hover}" + }, + "name": "token-button-surface-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "hover" + ] + }, + "token-button-surface-color-primary-focus": { + "key": "{button.surface.color.primary.focus}", + "$type": "color", + "$value": "#0f62fe", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimary.white}", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimary.g100}" + }, + "key": "{button.surface.color.primary.focus}" + }, + "name": "token-button-surface-color-primary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "focus" + ] + }, + "token-button-surface-color-primary-active": { + "key": "{button.surface.color.primary.active}", + "$type": "color", + "$value": "#002d9c", + "$modes": { + "default": "#002d9c", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#002d9c", + "cds-g100": "#002d9c" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimaryActive.white}", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimaryActive.g100}" + }, + "key": "{button.surface.color.primary.active}" + }, + "name": "token-button-surface-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "active" + ] + }, + "token-button-surface-color-secondary-default": { + "key": "{button.surface.color.secondary.default}", + "$type": "color", + "$value": "#393939", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#6f6f6f", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondary.white}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondary.g100}" + }, + "key": "{button.surface.color.secondary.default}" + }, + "name": "token-button-surface-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "default" + ] + }, + "token-button-surface-color-secondary-hover": { + "key": "{button.surface.color.secondary.hover}", + "$type": "color", + "$value": "#474747", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#474747", + "cds-g10": "#474747", + "cds-g90": "#5e5e5e", + "cds-g100": "#5e5e5e" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondaryHover.white}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondaryHover.g100}" + }, + "key": "{button.surface.color.secondary.hover}" + }, + "name": "token-button-surface-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "hover" + ] + }, + "token-button-surface-color-secondary-focus": { + "key": "{button.surface.color.secondary.focus}", + "$type": "color", + "$value": "#393939", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#6f6f6f", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondary.white}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondary.g100}" + }, + "key": "{button.surface.color.secondary.focus}" + }, + "name": "token-button-surface-color-secondary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "focus" + ] + }, + "token-button-surface-color-secondary-active": { + "key": "{button.surface.color.secondary.active}", + "$type": "color", + "$value": "#6f6f6f", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#6f6f6f", + "cds-g10": "#6f6f6f", + "cds-g90": "#393939", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondaryActive.white}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondaryActive.g100}" + }, + "key": "{button.surface.color.secondary.active}" + }, + "name": "token-button-surface-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "active" + ] + }, + "token-button-surface-color-tertiary-default": { + "key": "{button.surface.color.tertiary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{button.surface.color.tertiary.default}" + }, + "name": "token-button-surface-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "default" + ] + }, + "token-button-surface-color-tertiary-hover": { + "key": "{button.surface.color.tertiary.hover}", + "$type": "color", + "$value": "#0050e6", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiaryHover.white}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryHover.g100}" + }, + "key": "{button.surface.color.tertiary.hover}" + }, + "name": "token-button-surface-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "hover" + ] + }, + "token-button-surface-color-tertiary-focus": { + "key": "{button.surface.color.tertiary.focus}", + "$type": "color", + "$value": "#0050e6", + "$modes": { + "default": "transparent", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiaryHover.white}", + "$modes": { + "default": "transparent", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryHover.g100}" + }, + "key": "{button.surface.color.tertiary.focus}" + }, + "name": "token-button-surface-color-tertiary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "focus" + ] + }, + "token-button-surface-color-tertiary-active": { + "key": "{button.surface.color.tertiary.active}", + "$type": "color", + "$value": "#002d9c", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiaryActive.white}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryActive.g100}" + }, + "key": "{button.surface.color.tertiary.active}" + }, + "name": "token-button-surface-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "active" + ] + }, + "token-button-surface-color-critical-default": { + "key": "{button.surface.color.critical.default}", + "$type": "color", + "$value": "#da1e28", + "$modes": { + "default": "#ffd7d9", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerPrimary.white}", + "$modes": { + "default": "{color.surface.critical}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerPrimary.g100}" + }, + "key": "{button.surface.color.critical.default}" + }, + "name": "token-button-surface-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "default" + ] + }, + "token-button-surface-color-critical-hover": { + "key": "{button.surface.color.critical.hover}", + "$type": "color", + "$value": "#b81921", + "$modes": { + "default": "#a2191f", + "cds-g0": "#b81921", + "cds-g10": "#b81921", + "cds-g90": "#b81921", + "cds-g100": "#b81921" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerHover.white}", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerHover.g100}" + }, + "key": "{button.surface.color.critical.hover}" + }, + "name": "token-button-surface-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "hover" + ] + }, + "token-button-surface-color-critical-focus": { + "key": "{button.surface.color.critical.focus}", + "$type": "color", + "$value": "#da1e28", + "$modes": { + "default": "#ffd7d9", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerPrimary.white}", + "$modes": { + "default": "{color.surface.critical}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerPrimary.g100}" + }, + "key": "{button.surface.color.critical.focus}" + }, + "name": "token-button-surface-color-critical-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "focus" + ] + }, + "token-button-surface-color-critical-active": { + "key": "{button.surface.color.critical.active}", + "$type": "color", + "$value": "#750e13", + "$modes": { + "default": "#750e13", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#750e13", + "cds-g100": "#750e13" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerActive.white}", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerActive.g100}" + }, + "key": "{button.surface.color.critical.active}" + }, + "name": "token-button-surface-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "active" + ] + }, + "token-button-surface-color-disabled": { + "key": "{button.surface.color.disabled}", + "$type": "color", + "$value": "#c6c6c6", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDisabled.white}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDisabled.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDisabled.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDisabled.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDisabled.g100}" + }, + "key": "{button.surface.color.disabled}" + }, + "name": "token-button-surface-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "disabled" + ] + }, + "token-button-border-width": { + "key": "{button.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{button.border.width}" + }, + "name": "token-button-border-width", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "width" + ] + }, + "token-button-border-radius": { + "key": "{button.border.radius}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{button.border.radius}" + }, + "name": "token-button-border-radius", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "radius" + ] + }, + "token-button-border-color-primary-default": { + "key": "{button.border.color.primary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#0043ce", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.default}" + }, + "name": "token-button-border-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "default" + ] + }, + "token-button-border-color-primary-hover": { + "key": "{button.border.color.primary.hover}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#0043ce", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.hover}" + }, + "name": "token-button-border-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "hover" + ] + }, + "token-button-border-color-primary-focus-internal": { + "key": "{button.border.color.primary.focus.internal}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#ffffff", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.primary.focus.internal}" + }, + "name": "token-button-border-color-primary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "focus", + "internal" + ] + }, + "token-button-border-color-primary-focus-external": { + "key": "{button.border.color.primary.focus.external}", + "$type": "color", + "$value": "#ff00ff", + "$modes": { + "default": "#0f62fe", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "magenta", + "$modes": { + "default": "{color.focus.action.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.primary.focus.external}" + }, + "name": "token-button-border-color-primary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "focus", + "external" + ] + }, + "token-button-border-color-primary-active": { + "key": "{button.border.color.primary.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#002d9c", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.active}" + }, + "name": "token-button-border-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "active" + ] + }, + "token-button-border-color-secondary-default": { + "key": "{button.border.color.secondary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.default}" + }, + "name": "token-button-border-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "default" + ] + }, + "token-button-border-color-secondary-hover": { + "key": "{button.border.color.secondary.hover}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.hover}" + }, + "name": "token-button-border-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "hover" + ] + }, + "token-button-border-color-secondary-focus-internal": { + "key": "{button.border.color.secondary.focus.internal}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#ffffff", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.secondary.focus.internal}" + }, + "name": "token-button-border-color-secondary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "focus", + "internal" + ] + }, + "token-button-border-color-secondary-focus-external": { + "key": "{button.border.color.secondary.focus.external}", + "$type": "color", + "$value": "#ff00ff", + "$modes": { + "default": "#0f62fe", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "magenta", + "$modes": { + "default": "{color.focus.action.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.secondary.focus.external}" + }, + "name": "token-button-border-color-secondary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "focus", + "external" + ] + }, + "token-button-border-color-secondary-active": { + "key": "{button.border.color.secondary.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.active}" + }, + "name": "token-button-border-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "active" + ] + }, + "token-button-border-color-tertiary-default": { + "key": "{button.border.color.tertiary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{button.border.color.tertiary.default}" + }, + "name": "token-button-border-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "default" + ] + }, + "token-button-border-color-tertiary-hover": { + "key": "{button.border.color.tertiary.hover}", + "$type": "color", + "$value": "#8d8d8d", + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "key": "{button.border.color.tertiary.hover}" + }, + "name": "token-button-border-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "hover" + ] + }, + "token-button-border-color-tertiary-focus-internal": { + "key": "{button.border.color.tertiary.focus.internal}", + "$type": "color", + "$value": "#ffffff", + "original": { + "$type": "color", + "$value": "{color.focus.action.internal}", + "key": "{button.border.color.tertiary.focus.internal}" + }, + "name": "token-button-border-color-tertiary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "focus", + "internal" + ] + }, + "token-button-border-color-tertiary-focus-external": { + "key": "{button.border.color.tertiary.focus.external}", + "$type": "color", + "$value": "#0f62fe", + "original": { + "$type": "color", + "$value": "{color.focus.action.external}", + "key": "{button.border.color.tertiary.focus.external}" + }, + "name": "token-button-border-color-tertiary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "focus", + "external" + ] + }, + "token-button-border-color-tertiary-active": { + "key": "{button.border.color.tertiary.active}", + "$type": "color", + "$value": "#8d8d8d", + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "key": "{button.border.color.tertiary.active}" + }, + "name": "token-button-border-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "active" + ] + }, + "token-button-border-color-critical-default": { + "key": "{button.border.color.critical.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#a2191f", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.default}" + }, + "name": "token-button-border-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "default" + ] + }, + "token-button-border-color-critical-hover": { + "key": "{button.border.color.critical.hover}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#750e13", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.hover}" + }, + "name": "token-button-border-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "hover" + ] + }, + "token-button-border-color-critical-focus-internal": { + "key": "{button.border.color.critical.focus.internal}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#ffffff", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.critical.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.critical.focus.internal}" + }, + "name": "token-button-border-color-critical-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "focus", + "internal" + ] + }, + "token-button-border-color-critical-focus-external": { + "key": "{button.border.color.critical.focus.external}", + "$type": "color", + "$value": "#ff00ff", + "$modes": { + "default": "#0f62fe", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "magenta", + "$modes": { + "default": "{color.focus.critical.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.critical.focus.external}" + }, + "name": "token-button-border-color-critical-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "focus", + "external" + ] + }, + "token-button-border-color-critical-active": { + "key": "{button.border.color.critical.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#750e13", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.active}" + }, + "name": "token-button-border-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "active" + ] + }, + "token-button-border-color-disabled": { + "key": "{button.border.color.disabled}", + "$type": "color", + "$value": "#c6c6c6", + "original": { + "$type": "color", + "$value": "{color.border.primary}", + "key": "{button.border.color.disabled}" + }, + "name": "token-button-border-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "disabled" + ] + }, + "token-button-focus-border-width": { + "key": "{button.focus.border.width}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{button.focus.border.width}" + }, + "name": "token-button-focus-border-width", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "focus", + "border", + "width" + ] + }, + "token-button-icon-size-small": { + "key": "{button.icon.size.small}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.small}" + }, + "name": "token-button-icon-size-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "small" + ] + }, + "token-button-icon-size-medium": { + "key": "{button.icon.size.medium}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.medium}" + }, + "name": "token-button-icon-size-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "medium" + ] + }, + "token-button-icon-size-large": { + "key": "{button.icon.size.large}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.large}" + }, + "name": "token-button-icon-size-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "large" + ] + }, + "token-dismiss-button-size": { + "key": "{dismiss-button.size}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "key": "{dismiss-button.size}" + }, + "name": "token-dismiss-button-size", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "size" + ] + }, + "token-dismiss-button-foreground-color-default": { + "key": "{dismiss-button.foreground.color.default}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#525252", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.iconPrimary}", + "$modes": { + "default": "{color.foreground.faint}", + "cds-g0": "{carbon.themes.white.iconPrimary}", + "cds-g10": "{carbon.themes.g10.iconPrimary}", + "cds-g90": "{carbon.themes.g90.iconPrimary}", + "cds-g100": "{carbon.themes.g100.iconPrimary}" + }, + "key": "{dismiss-button.foreground.color.default}" + }, + "name": "token-dismiss-button-foreground-color-default", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "foreground", + "color", + "default" + ] + }, + "token-dismiss-button-foreground-color-active": { + "key": "{dismiss-button.foreground.color.active}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.iconPrimary}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.white.iconPrimary}", + "cds-g10": "{carbon.themes.g10.iconPrimary}", + "cds-g90": "{carbon.themes.g90.iconPrimary}", + "cds-g100": "{carbon.themes.g100.iconPrimary}" + }, + "key": "{dismiss-button.foreground.color.active}" + }, + "name": "token-dismiss-button-foreground-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "foreground", + "color", + "active" + ] + }, + "token-dismiss-button-surface-color-hover": { + "key": "{dismiss-button.surface.color.hover}", + "$type": "color", + "$value": "rgba(141, 141, 141, 0.12)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "rgba(141, 141, 141, 0.12)", + "cds-g10": "rgba(141, 141, 141, 0.12)", + "cds-g90": "rgba(141, 141, 141, 0.16)", + "cds-g100": "rgba(141, 141, 141, 0.16)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.backgroundHover}", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "{carbon.themes.white.backgroundHover}", + "cds-g10": "{carbon.themes.g10.backgroundHover}", + "cds-g90": "{carbon.themes.g90.backgroundHover}", + "cds-g100": "{carbon.themes.g100.backgroundHover}" + }, + "key": "{dismiss-button.surface.color.hover}" + }, + "name": "token-dismiss-button-surface-color-hover", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "surface", + "color", + "hover" + ] + }, + "token-dismiss-button-surface-color-active": { + "key": "{dismiss-button.surface.color.active}", + "$type": "color", + "$value": "rgba(141, 141, 141, 0.5)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "rgba(141, 141, 141, 0.5)", + "cds-g10": "rgba(141, 141, 141, 0.5)", + "cds-g90": "rgba(141, 141, 141, 0.4)", + "cds-g100": "rgba(141, 141, 141, 0.4)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.backgroundActive}", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "{carbon.themes.white.backgroundActive}", + "cds-g10": "{carbon.themes.g10.backgroundActive}", + "cds-g90": "{carbon.themes.g90.backgroundActive}", + "cds-g100": "{carbon.themes.g100.backgroundActive}" + }, + "key": "{dismiss-button.surface.color.active}" + }, + "name": "token-dismiss-button-surface-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "surface", + "color", + "active" + ] + }, + "token-dismiss-button-border-color-active": { + "key": "{dismiss-button.border.color.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{dismiss-button.border.color.active}" + }, + "name": "token-dismiss-button-border-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "border", + "color", + "active" + ] + }, + "token-dismiss-button-icon-size": { + "key": "{dismiss-button.icon.size}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "20", + "cds-g10": "20", + "cds-g90": "20", + "cds-g100": "20" + }, + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "20", + "cds-g10": "20", + "cds-g90": "20", + "cds-g100": "20" + }, + "key": "{dismiss-button.icon.size}" + }, + "name": "token-dismiss-button-icon-size", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "icon", + "size" + ] + }, + "token-form-label-color": { + "key": "{form.label.color}", + "$type": "color", + "$value": "#161616", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.strong}", + "group": "components", + "key": "{form.label.color}" + }, + "name": "token-form-label-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "label", + "color" + ] + }, + "token-form-legend-color": { + "key": "{form.legend.color}", + "$type": "color", + "$value": "#161616", + "group": "components", + "original": { + "$type": "color", + "$value": "{form.label.color}", + "group": "components", + "key": "{form.legend.color}" + }, + "name": "token-form-legend-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "legend", + "color" + ] + }, + "token-form-helper-text-color": { + "key": "{form.helper-text.color}", + "$type": "color", + "$value": "#525252", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.helper-text.color}" + }, + "name": "token-form-helper-text-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "helper-text", + "color" + ] + }, + "token-form-indicator-optional-color": { + "key": "{form.indicator.optional.color}", + "$type": "color", + "$value": "#525252", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.indicator.optional.color}" + }, + "name": "token-form-indicator-optional-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "indicator", + "optional", + "color" + ] + }, + "token-form-error-color": { + "key": "{form.error.color}", + "$type": "color", + "$value": "#a2191f", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "components", + "key": "{form.error.color}" + }, + "name": "token-form-error-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "error", + "color" + ] + }, + "token-form-error-icon-size": { + "key": "{form.error.icon-size}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "14", + "unit": "px", + "key": "{form.error.icon-size}" + }, + "name": "token-form-error-icon-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "error", + "icon-size" + ] + }, + "token-form-checkbox-size": { + "key": "{form.checkbox.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.checkbox.size}" + }, + "name": "token-form-checkbox-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "size" + ] + }, + "token-form-checkbox-border-radius": { + "key": "{form.checkbox.border.radius}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{form.checkbox.border.radius}" + }, + "name": "token-form-checkbox-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "border", + "radius" + ] + }, + "token-form-checkbox-border-width": { + "key": "{form.checkbox.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.checkbox.border.width}" + }, + "name": "token-form-checkbox-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "border", + "width" + ] + }, + "token-form-checkbox-background-image-size": { + "key": "{form.checkbox.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.checkbox.background-image.size}" + }, + "name": "token-form-checkbox-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "size" + ] + }, + "token-form-checkbox-background-image-data-url": { + "key": "{form.checkbox.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url}" + }, + "name": "token-form-checkbox-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url" + ] + }, + "token-form-checkbox-background-image-data-url-indeterminate": { + "key": "{form.checkbox.background-image.data-url-indeterminate}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url-indeterminate}" + }, + "name": "token-form-checkbox-background-image-data-url-indeterminate", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url-indeterminate" + ] + }, + "token-form-checkbox-background-image-data-url-disabled": { + "key": "{form.checkbox.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url-disabled}" + }, + "name": "token-form-checkbox-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url-disabled" + ] + }, + "token-form-checkbox-background-image-data-url-indeterminate-disabled": { + "key": "{form.checkbox.background-image.data-url-indeterminate-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url-indeterminate-disabled}" + }, + "name": "token-form-checkbox-background-image-data-url-indeterminate-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url-indeterminate-disabled" + ] + }, + "token-form-control-base-foreground-value-color": { + "key": "{form.control.base.foreground.value-color}", + "$type": "color", + "$value": "#161616", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.strong}", + "group": "components", + "key": "{form.control.base.foreground.value-color}" + }, + "name": "token-form-control-base-foreground-value-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "foreground", + "value-color" + ] + }, + "token-form-control-base-foreground-placeholder-color": { + "key": "{form.control.base.foreground.placeholder-color}", + "$type": "color", + "$value": "#525252", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.control.base.foreground.placeholder-color}" + }, + "name": "token-form-control-base-foreground-placeholder-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "foreground", + "placeholder-color" + ] + }, + "token-form-control-base-surface-color-default": { + "key": "{form.control.base.surface-color.default}", + "$type": "color", + "$value": "#f4f4f4", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.interactive}", + "group": "components", + "key": "{form.control.base.surface-color.default}" + }, + "name": "token-form-control-base-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "surface-color", + "default" + ] + }, + "token-form-control-base-surface-color-hover": { + "key": "{form.control.base.surface-color.hover}", + "$type": "color", + "$value": "#e8e8e8", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.interactive-hover}", + "group": "components", + "key": "{form.control.base.surface-color.hover}" + }, + "name": "token-form-control-base-surface-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "surface-color", + "hover" + ] + }, + "token-form-control-base-border-color-default": { + "key": "{form.control.base.border-color.default}", + "$type": "color", + "$value": "#8d8d8d", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-400}", + "group": "components", + "key": "{form.control.base.border-color.default}" + }, + "name": "token-form-control-base-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "border-color", + "default" + ] + }, + "token-form-control-base-border-color-hover": { + "key": "{form.control.base.border-color.hover}", + "$type": "color", + "$value": "#525252", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "group": "components", + "key": "{form.control.base.border-color.hover}" + }, + "name": "token-form-control-base-border-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "border-color", + "hover" + ] + }, + "token-form-control-checked-foreground-color": { + "key": "{form.control.checked.foreground-color}", + "$type": "color", + "$value": "#ffffff", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "group": "components", + "key": "{form.control.checked.foreground-color}" + }, + "name": "token-form-control-checked-foreground-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "foreground-color" + ] + }, + "token-form-control-checked-surface-color-default": { + "key": "{form.control.checked.surface-color.default}", + "$type": "color", + "$value": "#0f62fe", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "group": "components", + "key": "{form.control.checked.surface-color.default}" + }, + "name": "token-form-control-checked-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "surface-color", + "default" + ] + }, + "token-form-control-checked-surface-color-hover": { + "key": "{form.control.checked.surface-color.hover}", + "$type": "color", + "$value": "#0043ce", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "components", + "key": "{form.control.checked.surface-color.hover}" + }, + "name": "token-form-control-checked-surface-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "surface-color", + "hover" + ] + }, + "token-form-control-checked-border-color-default": { + "key": "{form.control.checked.border-color.default}", + "$type": "color", + "$value": "#0043ce", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "components", + "key": "{form.control.checked.border-color.default}" + }, + "name": "token-form-control-checked-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "border-color", + "default" + ] + }, + "token-form-control-checked-border-color-hover": { + "key": "{form.control.checked.border-color.hover}", + "$type": "color", + "$value": "#002d9c", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "group": "components", + "key": "{form.control.checked.border-color.hover}" + }, + "name": "token-form-control-checked-border-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "border-color", + "hover" + ] + }, + "token-form-control-invalid-border-color-default": { + "key": "{form.control.invalid.border-color.default}", + "$type": "color", + "$value": "#a2191f", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "components", + "key": "{form.control.invalid.border-color.default}" + }, + "name": "token-form-control-invalid-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "invalid", + "border-color", + "default" + ] + }, + "token-form-control-invalid-border-color-hover": { + "key": "{form.control.invalid.border-color.hover}", + "$type": "color", + "$value": "#750e13", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.red-400}", + "group": "components", + "key": "{form.control.invalid.border-color.hover}" + }, + "name": "token-form-control-invalid-border-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "invalid", + "border-color", + "hover" + ] + }, + "token-form-control-readonly-foreground-color": { + "key": "{form.control.readonly.foreground-color}", + "$type": "color", + "$value": "#161616", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "group": "components", + "key": "{form.control.readonly.foreground-color}" + }, + "name": "token-form-control-readonly-foreground-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "readonly", + "foreground-color" + ] + }, + "token-form-control-readonly-surface-color": { + "key": "{form.control.readonly.surface-color}", + "$type": "color", + "$value": "#e0e0e0", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.strong}", + "group": "components", + "key": "{form.control.readonly.surface-color}" + }, + "name": "token-form-control-readonly-surface-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "readonly", + "surface-color" + ] + }, + "token-form-control-readonly-border-color": { + "key": "{form.control.readonly.border-color}", + "$type": "color", + "$value": "#e0e0e0", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.border.faint}", + "group": "components", + "key": "{form.control.readonly.border-color}" + }, + "name": "token-form-control-readonly-border-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "readonly", + "border-color" + ] + }, + "token-form-control-disabled-foreground-color": { + "key": "{form.control.disabled.foreground-color}", + "$type": "color", + "$value": "rgba(22, 22, 22, 0.25)", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.disabled}", + "group": "components", + "key": "{form.control.disabled.foreground-color}" + }, + "name": "token-form-control-disabled-foreground-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "disabled", + "foreground-color" + ] + }, + "token-form-control-disabled-surface-color": { + "key": "{form.control.disabled.surface-color}", + "$type": "color", + "$value": "#c6c6c6", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.interactive-disabled}", + "group": "components", + "key": "{form.control.disabled.surface-color}" + }, + "name": "token-form-control-disabled-surface-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "disabled", + "surface-color" + ] + }, + "token-form-control-disabled-border-color": { + "key": "{form.control.disabled.border-color}", + "$type": "color", + "$value": "#c6c6c6", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.border.primary}", + "group": "components", + "key": "{form.control.disabled.border-color}" + }, + "name": "token-form-control-disabled-border-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "disabled", + "border-color" + ] + }, + "token-form-control-padding": { + "key": "{form.control.padding}", + "$type": "dimension", + "$value": "7px", + "unit": "px", + "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma.", + "original": { + "$type": "dimension", + "$value": "7", + "unit": "px", + "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma.", + "key": "{form.control.padding}" + }, + "name": "token-form-control-padding", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "padding" + ] + }, + "token-form-control-border-radius": { + "key": "{form.control.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{form.control.border.radius}" + }, + "name": "token-form-control-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "border", + "radius" + ] + }, + "token-form-control-border-width": { + "key": "{form.control.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.control.border.width}" + }, + "name": "token-form-control-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "border", + "width" + ] + }, + "token-form-radio-size": { + "key": "{form.radio.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.radio.size}" + }, + "name": "token-form-radio-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "size" + ] + }, + "token-form-radio-border-width": { + "key": "{form.radio.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.radio.border.width}" + }, + "name": "token-form-radio-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "border", + "width" + ] + }, + "token-form-radio-background-image-size": { + "key": "{form.radio.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.radio.background-image.size}" + }, + "name": "token-form-radio-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "background-image", + "size" + ] + }, + "token-form-radio-background-image-data-url": { + "key": "{form.radio.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "key": "{form.radio.background-image.data-url}" + }, + "name": "token-form-radio-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "background-image", + "data-url" + ] + }, + "token-form-radio-background-image-data-url-disabled": { + "key": "{form.radio.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "key": "{form.radio.background-image.data-url-disabled}" + }, + "name": "token-form-radio-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "background-image", + "data-url-disabled" + ] + }, + "token-form-radiocard-group-gap": { + "key": "{form.radiocard-group.gap}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.radiocard-group.gap}" + }, + "name": "token-form-radiocard-group-gap", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard-group", + "gap" + ] + }, + "token-form-radiocard-border-width": { + "key": "{form.radiocard.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.radiocard.border.width}" + }, + "name": "token-form-radiocard-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "width" + ] + }, + "token-form-radiocard-border-radius": { + "key": "{form.radiocard.border.radius}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{form.radiocard.border.radius}" + }, + "name": "token-form-radiocard-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "radius" + ] + }, + "token-form-radiocard-border-color-default": { + "key": "{form.radiocard.border.color.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{form.radiocard.border.color.default}" + }, + "name": "token-form-radiocard-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "default" + ] + }, + "token-form-radiocard-border-color-focus": { + "key": "{form.radiocard.border.color.focus}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#ffffff", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "key": "{form.radiocard.border.color.focus}" + }, + "name": "token-form-radiocard-border-color-focus", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "focus" + ] + }, + "token-form-radiocard-border-color-default-checked": { + "key": "{form.radiocard.border.color.default-checked}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#0043ce", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "key": "{form.radiocard.border.color.default-checked}" + }, + "name": "token-form-radiocard-border-color-default-checked", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "default-checked" + ] + }, + "token-form-radiocard-content-padding": { + "key": "{form.radiocard.content-padding}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{form.radiocard.content-padding}" + }, + "name": "token-form-radiocard-content-padding", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "content-padding" + ] + }, + "token-form-radiocard-control-padding": { + "key": "{form.radiocard.control-padding}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{form.radiocard.control-padding}" + }, + "name": "token-form-radiocard-control-padding", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "control-padding" + ] + }, + "token-form-radiocard-transition-duration": { + "key": "{form.radiocard.transition.duration}", + "$type": "duration", + "$value": "0.2s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.2", + "unit": "s", + "key": "{form.radiocard.transition.duration}" + }, + "name": "token-form-radiocard-transition-duration", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "transition", + "duration" + ] + }, + "token-form-select-background-image-size": { + "key": "{form.select.background-image.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.select.background-image.size}" + }, + "name": "token-form-select-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "size" + ] + }, + "token-form-select-background-image-position-right-x": { + "key": "{form.select.background-image.position-right-x}", + "$type": "dimension", + "$value": "7px", + "original": { + "$type": "dimension", + "$value": "{form.control.padding}", + "key": "{form.select.background-image.position-right-x}" + }, + "name": "token-form-select-background-image-position-right-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "position-right-x" + ] + }, + "token-form-select-background-image-position-top-y": { + "key": "{form.select.background-image.position-top-y}", + "$type": "dimension", + "$value": "9px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "9", + "unit": "px", + "key": "{form.select.background-image.position-top-y}" + }, + "name": "token-form-select-background-image-position-top-y", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "position-top-y" + ] + }, + "token-form-select-background-image-data-url": { + "key": "{form.select.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "key": "{form.select.background-image.data-url}" + }, + "name": "token-form-select-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "data-url" + ] + }, + "token-form-select-background-image-data-url-disabled": { + "key": "{form.select.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "key": "{form.select.background-image.data-url-disabled}" + }, + "name": "token-form-select-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "data-url-disabled" + ] + }, + "token-form-text-input-background-image-size": { + "key": "{form.text-input.background-image.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.text-input.background-image.size}" + }, + "name": "token-form-text-input-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "size" + ] + }, + "token-form-text-input-background-image-position-x": { + "key": "{form.text-input.background-image.position-x}", + "$type": "dimension", + "$value": "7px", + "original": { + "$type": "dimension", + "$value": "{form.control.padding}", + "key": "{form.text-input.background-image.position-x}" + }, + "name": "token-form-text-input-background-image-position-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "position-x" + ] + }, + "token-form-text-input-background-image-data-url-date": { + "key": "{form.text-input.background-image.data-url-date}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-date}" + }, + "name": "token-form-text-input-background-image-data-url-date", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-date" + ] + }, + "token-form-text-input-background-image-data-url-time": { + "key": "{form.text-input.background-image.data-url-time}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-time}" + }, + "name": "token-form-text-input-background-image-data-url-time", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-time" + ] + }, + "token-form-text-input-background-image-data-url-search": { + "key": "{form.text-input.background-image.data-url-search}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-search}" + }, + "name": "token-form-text-input-background-image-data-url-search", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search" + ] + }, + "token-form-text-input-background-image-data-url-search-cancel": { + "key": "{form.text-input.background-image.data-url-search-cancel}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-search-cancel}" + }, + "name": "token-form-text-input-background-image-data-url-search-cancel", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search-cancel" + ] + }, + "token-form-text-input-background-image-data-url-search-loading": { + "key": "{form.text-input.background-image.data-url-search-loading}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color and animation are hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color and animation are hardcoded here!", + "key": "{form.text-input.background-image.data-url-search-loading}" + }, + "name": "token-form-text-input-background-image-data-url-search-loading", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search-loading" + ] + }, + "token-form-toggle-width": { + "key": "{form.toggle.width}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{form.toggle.width}" + }, + "name": "token-form-toggle-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "width" + ] + }, + "token-form-toggle-height": { + "key": "{form.toggle.height}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.toggle.height}" + }, + "name": "token-form-toggle-height", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "height" + ] + }, + "token-form-toggle-base-surface-color-default": { + "key": "{form.toggle.base.surface-color.default}", + "$type": "color", + "$value": "#e0e0e0", + "group": "components", + "comment": "the toggle has a different base surface color, compared to the other controls", + "original": { + "$type": "color", + "$value": "{color.surface.strong}", + "group": "components", + "comment": "the toggle has a different base surface color, compared to the other controls", + "key": "{form.toggle.base.surface-color.default}" + }, + "name": "token-form-toggle-base-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "base", + "surface-color", + "default" + ] + }, + "token-form-toggle-border-radius": { + "key": "{form.toggle.border.radius}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{form.toggle.border.radius}" + }, + "name": "token-form-toggle-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "border", + "radius" + ] + }, + "token-form-toggle-border-width": { + "key": "{form.toggle.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.toggle.border.width}" + }, + "name": "token-form-toggle-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "border", + "width" + ] + }, + "token-form-toggle-background-image-size": { + "key": "{form.toggle.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.toggle.background-image.size}" + }, + "name": "token-form-toggle-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "size" + ] + }, + "token-form-toggle-background-image-position-x": { + "key": "{form.toggle.background-image.position-x}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{form.toggle.background-image.position-x}" + }, + "name": "token-form-toggle-background-image-position-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "position-x" + ] + }, + "token-form-toggle-background-image-data-url": { + "key": "{form.toggle.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.toggle.background-image.data-url}" + }, + "name": "token-form-toggle-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "data-url" + ] + }, + "token-form-toggle-background-image-data-url-disabled": { + "key": "{form.toggle.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.toggle.background-image.data-url-disabled}" + }, + "name": "token-form-toggle-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "data-url-disabled" + ] + }, + "token-form-toggle-transition-duration": { + "key": "{form.toggle.transition.duration}", + "$type": "duration", + "$value": "0.2s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.2", + "unit": "s", + "key": "{form.toggle.transition.duration}" + }, + "name": "token-form-toggle-transition-duration", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "transition", + "duration" + ] + }, + "token-form-toggle-transition-timing-function": { + "key": "{form.toggle.transition.timing-function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.68, -0.2, 0.265, 1.15)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.68, + -0.2, + 0.265, + 1.15 + ], + "key": "{form.toggle.transition.timing-function}" + }, + "name": "token-form-toggle-transition-timing-function", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "transition", + "timing-function" + ] + }, + "token-form-toggle-thumb-size": { + "key": "{form.toggle.thumb-size}", + "$type": "dimension", + "$value": "16px", + "original": { + "$type": "dimension", + "$value": "{form.toggle.height}", + "key": "{form.toggle.thumb-size}" + }, + "name": "token-form-toggle-thumb-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "thumb-size" + ] + }, + "token-icon-tile-border-color-overlay": { + "key": "{icon-tile.border.color.overlay}", + "$type": "color", + "$value": "#e0e0e0", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.borderSubtle02}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle02}", + "cds-g10": "{carbon.themes.g10.borderSubtle02}", + "cds-g90": "{carbon.themes.g90.borderSubtle02}", + "cds-g100": "{carbon.themes.g100.borderSubtle02}" + }, + "key": "{icon-tile.border.color.overlay}" + }, + "name": "token-icon-tile-border-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "overlay" + ] + }, + "token-icon-tile-border-color-logo": { + "key": "{icon-tile.border.color.logo}", + "$type": "color", + "$value": "#c6c6c6", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.borderSubtle01}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle01}", + "cds-g10": "{carbon.themes.g10.borderSubtle01}", + "cds-g90": "{carbon.themes.g90.borderSubtle01}", + "cds-g100": "{carbon.themes.g100.borderSubtle01}" + }, + "key": "{icon-tile.border.color.logo}" + }, + "name": "token-icon-tile-border-color-logo", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "logo" + ] + }, + "token-icon-tile-surface-color-overlay": { + "key": "{icon-tile.surface.color.overlay}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.layer02}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.white.layer02}", + "cds-g10": "{carbon.themes.g10.layer02}", + "cds-g90": "{carbon.themes.g90.layer02}", + "cds-g100": "{carbon.themes.g100.layer02}" + }, + "key": "{icon-tile.surface.color.overlay}" + }, + "name": "token-icon-tile-surface-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "surface", + "color", + "overlay" + ] + }, + "token-pagination-nav-control-height": { + "key": "{pagination.nav.control.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{pagination.nav.control.height}" + }, + "name": "token-pagination-nav-control-height", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "height" + ] + }, + "token-pagination-nav-control-padding-horizontal": { + "key": "{pagination.nav.control.padding.horizontal}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{pagination.nav.control.padding.horizontal}" + }, + "name": "token-pagination-nav-control-padding-horizontal", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "padding", + "horizontal" + ] + }, + "token-pagination-nav-control-focus-inset": { + "key": "{pagination.nav.control.focus-inset}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{pagination.nav.control.focus-inset}" + }, + "name": "token-pagination-nav-control-focus-inset", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "focus-inset" + ] + }, + "token-pagination-nav-control-icon-spacing": { + "key": "{pagination.nav.control.icon-spacing}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{pagination.nav.control.icon-spacing}" + }, + "name": "token-pagination-nav-control-icon-spacing", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "icon-spacing" + ] + }, + "token-pagination-nav-indicator-height": { + "key": "{pagination.nav.indicator.height}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{pagination.nav.indicator.height}" + }, + "name": "token-pagination-nav-indicator-height", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "indicator", + "height" + ] + }, + "token-pagination-nav-indicator-spacing": { + "key": "{pagination.nav.indicator.spacing}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{pagination.nav.indicator.spacing}" + }, + "name": "token-pagination-nav-indicator-spacing", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "indicator", + "spacing" + ] + }, + "token-pagination-child-spacing-vertical": { + "key": "{pagination.child.spacing.vertical}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{pagination.child.spacing.vertical}" + }, + "name": "token-pagination-child-spacing-vertical", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "child", + "spacing", + "vertical" + ] + }, + "token-pagination-child-spacing-horizontal": { + "key": "{pagination.child.spacing.horizontal}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "key": "{pagination.child.spacing.horizontal}" + }, + "name": "token-pagination-child-spacing-horizontal", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "child", + "spacing", + "horizontal" + ] + }, + "token-rich-tooltip-bubble-max-width": { + "key": "{rich-tooltip.bubble.max-width}", + "$type": "dimension", + "$value": "288px", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "original": { + "$type": "dimension", + "$value": "288", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "key": "{rich-tooltip.bubble.max-width}" + }, + "name": "token-rich-tooltip-bubble-max-width", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "max-width" + ] + }, + "token-rich-tooltip-bubble-border-color": { + "key": "{rich-tooltip.bubble.border.color}", + "$value": "#c6c6c6", + "$modes": { + "default": "#52525233", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$value": "{color.palette.alpha-200}", + "$modes": { + "default": "{elevation.higher.border.color}", + "cds-g0": "{color.palette.alpha-200}", + "cds-g10": "{color.palette.alpha-200}", + "cds-g90": "{color.palette.alpha-200}", + "cds-g100": "{color.palette.alpha-200}" + }, + "key": "{rich-tooltip.bubble.border.color}" + }, + "name": "token-rich-tooltip-bubble-border-color", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "border", + "color" + ] + }, + "token-rich-tooltip-bubble-border-radius": { + "key": "{rich-tooltip.bubble.border.radius}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "key": "{rich-tooltip.bubble.border.radius}" + }, + "name": "token-rich-tooltip-bubble-border-radius", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "border", + "radius" + ] + }, + "token-rich-tooltip-bubble-arrow-size": { + "key": "{rich-tooltip.bubble.arrow.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{rich-tooltip.bubble.arrow.size}" + }, + "name": "token-rich-tooltip-bubble-arrow-size", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "arrow", + "size" + ] + }, + "token-rich-tooltip-toggle-gap-horizontal": { + "key": "{rich-tooltip.toggle.gap.horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{rich-tooltip.toggle.gap.horizontal}" + }, + "name": "token-rich-tooltip-toggle-gap-horizontal", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "gap", + "horizontal" + ] + }, + "token-rich-tooltip-toggle-foreground-color-default": { + "key": "{rich-tooltip.toggle.foreground.color.default}", + "$value": "#525252", + "$modes": { + "default": "#161616", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$value": "{carbon.themes.white.textSecondary}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.default}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-default", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "default" + ] + }, + "token-rich-tooltip-toggle-foreground-color-hover": { + "key": "{rich-tooltip.toggle.foreground.color.hover}", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$value": "{carbon.themes.white.textPrimary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.hover}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-hover", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "hover" + ] + }, + "token-rich-tooltip-toggle-foreground-color-active": { + "key": "{rich-tooltip.toggle.foreground.color.active}", + "$value": "#525252", + "$modes": { + "default": "#525252", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$value": "{carbon.themes.white.textSecondary}", + "$modes": { + "default": "{color.foreground.faint}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.active}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-active", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "active" + ] + }, + "token-rich-tooltip-toggle-icon-size": { + "key": "{rich-tooltip.toggle.icon.size}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, + "original": { + "$type": "dimension", + "$value": "14", + "unit": "px", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, + "key": "{rich-tooltip.toggle.icon.size}" + }, + "name": "token-rich-tooltip-toggle-icon-size", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "icon", + "size" + ] + }, + "token-tabs-tab-height-medium": { + "key": "{tabs.tab.height.medium}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{tabs.tab.height.medium}" + }, + "name": "token-tabs-tab-height-medium", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "height", + "medium" + ] + }, + "token-tabs-tab-height-large": { + "key": "{tabs.tab.height.large}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{tabs.tab.height.large}" + }, + "name": "token-tabs-tab-height-large", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "height", + "large" + ] + }, + "token-tabs-tab-padding-horizontal-medium": { + "key": "{tabs.tab.padding.horizontal.medium}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{tabs.tab.padding.horizontal.medium}" + }, + "name": "token-tabs-tab-padding-horizontal-medium", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "padding", + "horizontal", + "medium" + ] + }, + "token-tabs-tab-padding-horizontal-large": { + "key": "{tabs.tab.padding.horizontal.large}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "key": "{tabs.tab.padding.horizontal.large}" + }, + "name": "token-tabs-tab-padding-horizontal-large", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "padding", + "horizontal", + "large" + ] + }, + "token-tabs-tab-padding-vertical": { + "key": "{tabs.tab.padding.vertical}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "key": "{tabs.tab.padding.vertical}" + }, + "name": "token-tabs-tab-padding-vertical", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "padding", + "vertical" + ] + }, + "token-tabs-tab-border-radius": { + "key": "{tabs.tab.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{tabs.tab.border-radius}" + }, + "name": "token-tabs-tab-border-radius", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "border-radius" + ] + }, + "token-tabs-tab-focus-inset": { + "key": "{tabs.tab.focus-inset}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{tabs.tab.focus-inset}" + }, + "name": "token-tabs-tab-focus-inset", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "focus-inset" + ] + }, + "token-tabs-tab-gutter": { + "key": "{tabs.tab.gutter}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{tabs.tab.gutter}" + }, + "name": "token-tabs-tab-gutter", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "gutter" + ] + }, + "token-tabs-indicator-height": { + "key": "{tabs.indicator.height}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{tabs.indicator.height}" + }, + "name": "token-tabs-indicator-height", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "indicator", + "height" + ] + }, + "token-tabs-indicator-transition-function": { + "key": "{tabs.indicator.transition.function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.5, 1, 0.89, 1)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.5, + 1, + 0.89, + 1 + ], + "key": "{tabs.indicator.transition.function}" + }, + "name": "token-tabs-indicator-transition-function", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "indicator", + "transition", + "function" + ] + }, + "token-tabs-indicator-transition-duration": { + "key": "{tabs.indicator.transition.duration}", + "$type": "duration", + "$value": "0.6s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.6", + "unit": "s", + "key": "{tabs.indicator.transition.duration}" + }, + "name": "token-tabs-indicator-transition-duration", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "indicator", + "transition", + "duration" + ] + }, + "token-tabs-divider-height": { + "key": "{tabs.divider.height}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{tabs.divider.height}" + }, + "name": "token-tabs-divider-height", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "divider", + "height" + ] + }, + "token-tooltip-max-width": { + "key": "{tooltip.max-width}", + "$type": "dimension", + "$value": "288px", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "original": { + "$type": "dimension", + "$value": "288", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "key": "{tooltip.max-width}" + }, + "name": "token-tooltip-max-width", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "max-width" + ] + }, + "token-tooltip-padding-horizontal": { + "key": "{tooltip.padding.horizontal}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16px", + "cds-g10": "16px", + "cds-g90": "16px", + "cds-g100": "16px" + }, + "original": { + "$type": "dimension", + "$value": "{carbon.themes.white.spacing05}", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "{carbon.themes.white.spacing05}", + "cds-g10": "{carbon.themes.g10.spacing05}", + "cds-g90": "{carbon.themes.g90.spacing05}", + "cds-g100": "{carbon.themes.g100.spacing05}" + }, + "key": "{tooltip.padding.horizontal}" + }, + "name": "token-tooltip-padding-horizontal", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "horizontal" + ] + }, + "token-tooltip-padding-vertical": { + "key": "{tooltip.padding.vertical}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "16px", + "cds-g10": "16px", + "cds-g90": "16px", + "cds-g100": "16px" + }, + "original": { + "$type": "dimension", + "$value": "{carbon.themes.white.spacing05}", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "{carbon.themes.white.spacing05}", + "cds-g10": "{carbon.themes.g10.spacing05}", + "cds-g90": "{carbon.themes.g90.spacing05}", + "cds-g100": "{carbon.themes.g100.spacing05}" + }, + "key": "{tooltip.padding.vertical}" + }, + "name": "token-tooltip-padding-vertical", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "vertical" + ] + }, + "token-tooltip-border-radius": { + "key": "{tooltip.border.radius}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "key": "{tooltip.border.radius}" + }, + "name": "token-tooltip-border-radius", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "border", + "radius" + ] + }, + "token-tooltip-caret-clip-path": { + "key": "{tooltip.caret.clip-path}", + "$value": "polygon(0 100%, 50% 0, 100% 100%)", + "$modes": { + "default": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "cds-g0": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g10": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g90": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g100": "polygon(0 100%, 50% 0, 100% 100%)" + }, + "original": { + "$value": "polygon(0 100%, 50% 0, 100% 100%)", + "$modes": { + "default": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "cds-g0": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g10": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g90": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g100": "polygon(0 100%, 50% 0, 100% 100%)" + }, + "key": "{tooltip.caret.clip-path}" + }, + "name": "token-tooltip-caret-clip-path", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "clip-path" + ] + }, + "token-tooltip-caret-height": { + "key": "{tooltip.caret.height}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "7", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "7", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "key": "{tooltip.caret.height}" + }, + "name": "token-tooltip-caret-height", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "height" + ] + }, + "token-tooltip-caret-width": { + "key": "{tooltip.caret.width}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{tooltip.caret.width}" + }, + "name": "token-tooltip-caret-width", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "width" + ] + }, + "token-tooltip-focus-offset": { + "key": "{tooltip.focus-offset}", + "$type": "dimension", + "$value": "-2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "-2", + "unit": "px", + "key": "{tooltip.focus-offset}" + }, + "name": "token-tooltip-focus-offset", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "focus-offset" + ] + }, + "token-tooltip-transition-function": { + "key": "{tooltip.transition.function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.54, 1.5, 0.38, 1.11)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.54, + 1.5, + 0.38, + 1.11 + ], + "key": "{tooltip.transition.function}" + }, + "name": "token-tooltip-transition-function", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "transition", + "function" + ] + }, + "token-typography-font-stack-display": { + "key": "{typography.font-stack.display}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.sans.display.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.font-stack.display}" + }, + "name": "token-typography-font-stack-display", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-stack", + "display" + ] + }, + "token-typography-font-stack-text": { + "key": "{typography.font-stack.text}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.sans.text.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.font-stack.text}" + }, + "name": "token-typography-font-stack-text", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-stack", + "text" + ] + }, + "token-typography-font-stack-code": { + "key": "{typography.font-stack.code}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.monospace.code.combined}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.font-stack.code}" + }, + "name": "token-typography-font-stack-code", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-stack", + "code" + ] + }, + "token-typography-font-weight-regular": { + "key": "{typography.font-weight.regular}", + "$type": "font-weight", + "$value": 400, + "$modes": { + "default": "400", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "default": "400", + "cds-g0": "{carbon.typography.font-weight.regular}", + "cds-g10": "{carbon.typography.font-weight.regular}", + "cds-g90": "{carbon.typography.font-weight.regular}", + "cds-g100": "{carbon.typography.font-weight.regular}" + }, + "key": "{typography.font-weight.regular}" + }, + "name": "token-typography-font-weight-regular", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "regular" + ] + }, + "token-typography-font-weight-medium": { + "key": "{typography.font-weight.medium}", + "$type": "font-weight", + "$value": 400, + "$modes": { + "default": "500", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "default": "500", + "cds-g0": "{carbon.typography.font-weight.regular}", + "cds-g10": "{carbon.typography.font-weight.regular}", + "cds-g90": "{carbon.typography.font-weight.regular}", + "cds-g100": "{carbon.typography.font-weight.regular}" + }, + "key": "{typography.font-weight.medium}" + }, + "name": "token-typography-font-weight-medium", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "medium" + ] + }, + "token-typography-font-weight-semibold": { + "key": "{typography.font-weight.semibold}", + "$type": "font-weight", + "$value": 600, + "$modes": { + "default": "600", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "default": "600", + "cds-g0": "{carbon.typography.font-weight.semibold}", + "cds-g10": "{carbon.typography.font-weight.semibold}", + "cds-g90": "{carbon.typography.font-weight.semibold}", + "cds-g100": "{carbon.typography.font-weight.semibold}" + }, + "key": "{typography.font-weight.semibold}" + }, + "name": "token-typography-font-weight-semibold", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "semibold" + ] + }, + "token-typography-font-weight-bold": { + "key": "{typography.font-weight.bold}", + "$type": "font-weight", + "$value": 600, + "$modes": { + "default": "700", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "default": "700", + "cds-g0": "{carbon.typography.font-weight.semibold}", + "cds-g10": "{carbon.typography.font-weight.semibold}", + "cds-g90": "{carbon.typography.font-weight.semibold}", + "cds-g100": "{carbon.typography.font-weight.semibold}" + }, + "key": "{typography.font-weight.bold}" + }, + "name": "token-typography-font-weight-bold", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "bold" + ] + }, + "token-typography-display-500-font-family": { + "key": "{typography.display-500.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-500.font-family}" + }, + "name": "token-typography-display-500-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "font-family" + ] + }, + "token-typography-display-500-font-size": { + "key": "{typography.display-500.font-size}", + "$type": "font-size", + "$value": "2rem", + "unit": "px", + "comment": "30px/1.875rem", + "$modes": { + "default": "30", + "cds-g0": "2rem", + "cds-g10": "2rem", + "cds-g90": "2rem", + "cds-g100": "2rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading05.font-size}", + "unit": "px", + "comment": "30px/1.875rem", + "$modes": { + "default": "30", + "cds-g0": "{carbon.typography.heading05.font-size}", + "cds-g10": "{carbon.typography.heading05.font-size}", + "cds-g90": "{carbon.typography.heading05.font-size}", + "cds-g100": "{carbon.typography.heading05.font-size}" + }, + "key": "{typography.display-500.font-size}" + }, + "name": "token-typography-display-500-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "font-size" + ] + }, + "token-typography-display-500-line-height": { + "key": "{typography.display-500.line-height}", + "$type": "number", + "$value": 1.25, + "comment": "38px", + "$modes": { + "default": 1.2666, + "cds-g0": 1.25, + "cds-g10": 1.25, + "cds-g90": 1.25, + "cds-g100": 1.25 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading05.line-height}", + "comment": "38px", + "$modes": { + "default": 1.2666, + "cds-g0": "{carbon.typography.heading05.line-height}", + "cds-g10": "{carbon.typography.heading05.line-height}", + "cds-g90": "{carbon.typography.heading05.line-height}", + "cds-g100": "{carbon.typography.heading05.line-height}" + }, + "key": "{typography.display-500.line-height}" + }, + "name": "token-typography-display-500-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "line-height" + ] + }, + "token-typography-display-500-letter-spacing": { + "key": "{typography.display-500.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading05.letter-spacing}", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading05.letter-spacing}", + "cds-g10": "{carbon.typography.heading05.letter-spacing}", + "cds-g90": "{carbon.typography.heading05.letter-spacing}", + "cds-g100": "{carbon.typography.heading05.letter-spacing}" + }, + "key": "{typography.display-500.letter-spacing}" + }, + "name": "token-typography-display-500-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "letter-spacing" + ] + }, + "token-typography-display-400-font-family": { + "key": "{typography.display-400.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-400.font-family}" + }, + "name": "token-typography-display-400-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "font-family" + ] + }, + "token-typography-display-400-font-size": { + "key": "{typography.display-400.font-size}", + "$type": "font-size", + "$value": "1.75rem", + "unit": "px", + "comment": "24px/1.5rem", + "$modes": { + "default": "24", + "cds-g0": "1.75rem", + "cds-g10": "1.75rem", + "cds-g90": "1.75rem", + "cds-g100": "1.75rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading04.font-size}", + "unit": "px", + "comment": "24px/1.5rem", + "$modes": { + "default": "24", + "cds-g0": "{carbon.typography.heading04.font-size}", + "cds-g10": "{carbon.typography.heading04.font-size}", + "cds-g90": "{carbon.typography.heading04.font-size}", + "cds-g100": "{carbon.typography.heading04.font-size}" + }, + "key": "{typography.display-400.font-size}" + }, + "name": "token-typography-display-400-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "font-size" + ] + }, + "token-typography-display-400-line-height": { + "key": "{typography.display-400.line-height}", + "$type": "number", + "$value": 1.28572, + "comment": "32px", + "$modes": { + "default": 1.3333, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading04.line-height}", + "comment": "32px", + "$modes": { + "default": 1.3333, + "cds-g0": "{carbon.typography.heading04.line-height}", + "cds-g10": "{carbon.typography.heading04.line-height}", + "cds-g90": "{carbon.typography.heading04.line-height}", + "cds-g100": "{carbon.typography.heading04.line-height}" + }, + "key": "{typography.display-400.line-height}" + }, + "name": "token-typography-display-400-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "line-height" + ] + }, + "token-typography-display-400-letter-spacing": { + "key": "{typography.display-400.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading04.letter-spacing}", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.heading04.letter-spacing}", + "cds-g10": "{carbon.typography.heading04.letter-spacing}", + "cds-g90": "{carbon.typography.heading04.letter-spacing}", + "cds-g100": "{carbon.typography.heading04.letter-spacing}" + }, + "key": "{typography.display-400.letter-spacing}" + }, + "name": "token-typography-display-400-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "letter-spacing" + ] + }, + "token-typography-display-300-font-family": { + "key": "{typography.display-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-300.font-family}" + }, + "name": "token-typography-display-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "font-family" + ] + }, + "token-typography-display-300-font-size": { + "key": "{typography.display-300.font-size}", + "$type": "font-size", + "$value": "1.25rem", + "unit": "px", + "comment": "18px/1.125rem", + "$modes": { + "default": "18", + "cds-g0": "1.25rem", + "cds-g10": "1.25rem", + "cds-g90": "1.25rem", + "cds-g100": "1.25rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading03.font-size}", + "unit": "px", + "comment": "18px/1.125rem", + "$modes": { + "default": "18", + "cds-g0": "{carbon.typography.heading03.font-size}", + "cds-g10": "{carbon.typography.heading03.font-size}", + "cds-g90": "{carbon.typography.heading03.font-size}", + "cds-g100": "{carbon.typography.heading03.font-size}" + }, + "key": "{typography.display-300.font-size}" + }, + "name": "token-typography-display-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "font-size" + ] + }, + "token-typography-display-300-line-height": { + "key": "{typography.display-300.line-height}", + "$type": "number", + "$value": 1.4, + "comment": "24px", + "$modes": { + "default": 1.3333, + "cds-g0": 1.4, + "cds-g10": 1.4, + "cds-g90": 1.4, + "cds-g100": 1.4 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading03.line-height}", + "comment": "24px", + "$modes": { + "default": 1.3333, + "cds-g0": "{carbon.typography.heading03.line-height}", + "cds-g10": "{carbon.typography.heading03.line-height}", + "cds-g90": "{carbon.typography.heading03.line-height}", + "cds-g100": "{carbon.typography.heading03.line-height}" + }, + "key": "{typography.display-300.line-height}" + }, + "name": "token-typography-display-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "line-height" + ] + }, + "token-typography-display-300-letter-spacing": { + "key": "{typography.display-300.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading03.letter-spacing}", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading03.letter-spacing}", + "cds-g10": "{carbon.typography.heading03.letter-spacing}", + "cds-g90": "{carbon.typography.heading03.letter-spacing}", + "cds-g100": "{carbon.typography.heading03.letter-spacing}" + }, + "key": "{typography.display-300.letter-spacing}" + }, + "name": "token-typography-display-300-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "letter-spacing" + ] + }, + "token-typography-display-200-font-family": { + "key": "{typography.display-200.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-200.font-family}" + }, + "name": "token-typography-display-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "font-family" + ] + }, + "token-typography-display-200-font-size": { + "key": "{typography.display-200.font-size}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading02.font-size}", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.heading02.font-size}", + "cds-g10": "{carbon.typography.heading02.font-size}", + "cds-g90": "{carbon.typography.heading02.font-size}", + "cds-g100": "{carbon.typography.heading02.font-size}" + }, + "key": "{typography.display-200.font-size}" + }, + "name": "token-typography-display-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "font-size" + ] + }, + "token-typography-display-200-line-height": { + "key": "{typography.display-200.line-height}", + "$type": "number", + "$value": 1.5, + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading02.line-height}", + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": "{carbon.typography.heading02.line-height}", + "cds-g10": "{carbon.typography.heading02.line-height}", + "cds-g90": "{carbon.typography.heading02.line-height}", + "cds-g100": "{carbon.typography.heading02.line-height}" + }, + "key": "{typography.display-200.line-height}" + }, + "name": "token-typography-display-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "line-height" + ] + }, + "token-typography-display-200-letter-spacing": { + "key": "{typography.display-200.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading02.letter-spacing}", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading02.letter-spacing}", + "cds-g10": "{carbon.typography.heading02.letter-spacing}", + "cds-g90": "{carbon.typography.heading02.letter-spacing}", + "cds-g100": "{carbon.typography.heading02.letter-spacing}" + }, + "key": "{typography.display-200.letter-spacing}" + }, + "name": "token-typography-display-200-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "letter-spacing" + ] + }, + "token-typography-display-100-font-family": { + "key": "{typography.display-100.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-100.font-family}" + }, + "name": "token-typography-display-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "font-family" + ] + }, + "token-typography-display-100-font-size": { + "key": "{typography.display-100.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading01.font-size}", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.heading01.font-size}", + "cds-g10": "{carbon.typography.heading01.font-size}", + "cds-g90": "{carbon.typography.heading01.font-size}", + "cds-g100": "{carbon.typography.heading01.font-size}" + }, + "key": "{typography.display-100.font-size}" + }, + "name": "token-typography-display-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "font-size" + ] + }, + "token-typography-display-100-line-height": { + "key": "{typography.display-100.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading01.line-height}", + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": "{carbon.typography.heading01.line-height}", + "cds-g10": "{carbon.typography.heading01.line-height}", + "cds-g90": "{carbon.typography.heading01.line-height}", + "cds-g100": "{carbon.typography.heading01.line-height}" + }, + "key": "{typography.display-100.line-height}" + }, + "name": "token-typography-display-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "line-height" + ] + }, + "token-typography-display-100-letter-spacing": { + "key": "{typography.display-100.letter-spacing}", + "$type": "letter-spacing", + "$value": "0.16px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0.16px", + "cds-g10": "0.16px", + "cds-g90": "0.16px", + "cds-g100": "0.16px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading01.letter-spacing}", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.heading01.letter-spacing}", + "cds-g10": "{carbon.typography.heading01.letter-spacing}", + "cds-g90": "{carbon.typography.heading01.letter-spacing}", + "cds-g100": "{carbon.typography.heading01.letter-spacing}" + }, + "key": "{typography.display-100.letter-spacing}" + }, + "name": "token-typography-display-100-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "letter-spacing" + ] + }, + "token-typography-body-300-font-family": { + "key": "{typography.body-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-300.font-family}" + }, + "name": "token-typography-body-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "font-family" + ] + }, + "token-typography-body-300-font-size": { + "key": "{typography.body-300.font-size}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.body02.font-size}", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.body02.font-size}", + "cds-g10": "{carbon.typography.body02.font-size}", + "cds-g90": "{carbon.typography.body02.font-size}", + "cds-g100": "{carbon.typography.body02.font-size}" + }, + "key": "{typography.body-300.font-size}" + }, + "name": "token-typography-body-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "font-size" + ] + }, + "token-typography-body-300-line-height": { + "key": "{typography.body-300.line-height}", + "$type": "number", + "$value": 1.5, + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.body02.line-height}", + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": "{carbon.typography.body02.line-height}", + "cds-g10": "{carbon.typography.body02.line-height}", + "cds-g90": "{carbon.typography.body02.line-height}", + "cds-g100": "{carbon.typography.body02.line-height}" + }, + "key": "{typography.body-300.line-height}" + }, + "name": "token-typography-body-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "line-height" + ] + }, + "token-typography-body-200-font-family": { + "key": "{typography.body-200.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-200.font-family}" + }, + "name": "token-typography-body-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "font-family" + ] + }, + "token-typography-body-200-font-size": { + "key": "{typography.body-200.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.body01.font-size}", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "{carbon.typography.body01.font-size}", + "cds-g10": "{carbon.typography.body01.font-size}", + "cds-g90": "{carbon.typography.body01.font-size}", + "cds-g100": "{carbon.typography.body01.font-size}" + }, + "key": "{typography.body-200.font-size}" + }, + "name": "token-typography-body-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "font-size" + ] + }, + "token-typography-body-200-line-height": { + "key": "{typography.body-200.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "20px", + "$modes": { + "default": 1.4286, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.body01.line-height}", + "comment": "20px", + "$modes": { + "default": 1.4286, + "cds-g0": "{carbon.typography.body01.line-height}", + "cds-g10": "{carbon.typography.body01.line-height}", + "cds-g90": "{carbon.typography.body01.line-height}", + "cds-g100": "{carbon.typography.body01.line-height}" + }, + "key": "{typography.body-200.line-height}" + }, + "name": "token-typography-body-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "line-height" + ] + }, + "token-typography-body-100-font-family": { + "key": "{typography.body-100.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-100.font-family}" + }, + "name": "token-typography-body-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "font-family" + ] + }, + "token-typography-body-100-font-size": { + "key": "{typography.body-100.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.bodyCompact01.font-size}", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.bodyCompact01.font-size}", + "cds-g10": "{carbon.typography.bodyCompact01.font-size}", + "cds-g90": "{carbon.typography.bodyCompact01.font-size}", + "cds-g100": "{carbon.typography.bodyCompact01.font-size}" + }, + "key": "{typography.body-100.font-size}" + }, + "name": "token-typography-body-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "font-size" + ] + }, + "token-typography-body-100-line-height": { + "key": "{typography.body-100.line-height}", + "$type": "number", + "$value": 1.28572, + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.bodyCompact01.line-height}", + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": "{carbon.typography.bodyCompact01.line-height}", + "cds-g10": "{carbon.typography.bodyCompact01.line-height}", + "cds-g90": "{carbon.typography.bodyCompact01.line-height}", + "cds-g100": "{carbon.typography.bodyCompact01.line-height}" + }, + "key": "{typography.body-100.line-height}" + }, + "name": "token-typography-body-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "line-height" + ] + }, + "token-typography-code-300-font-family": { + "key": "{typography.code-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-300.font-family}" + }, + "name": "token-typography-code-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "font-family" + ] + }, + "token-typography-code-300-font-size": { + "key": "{typography.code-300.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.code02.font-size}", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-300.font-size}" + }, + "name": "token-typography-code-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "font-size" + ] + }, + "token-typography-code-300-line-height": { + "key": "{typography.code-300.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "20px", + "$modes": { + "default": 1.25, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.code02.line-height}", + "comment": "20px", + "$modes": { + "default": 1.25, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-300.line-height}" + }, + "name": "token-typography-code-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "line-height" + ] + }, + "token-typography-code-200-font-family": { + "key": "{typography.code-200.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-200.font-family}" + }, + "name": "token-typography-code-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "font-family" + ] + }, + "token-typography-code-200-font-size": { + "key": "{typography.code-200.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.code02.font-size}", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-200.font-size}" + }, + "name": "token-typography-code-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "font-size" + ] + }, + "token-typography-code-200-line-height": { + "key": "{typography.code-200.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "18px", + "$modes": { + "default": 1.125, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.code02.line-height}", + "comment": "18px", + "$modes": { + "default": 1.125, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-200.line-height}" + }, + "name": "token-typography-code-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "line-height" + ] + }, + "token-typography-code-100-font-family": { + "key": "{typography.code-100.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-100.font-family}" + }, + "name": "token-typography-code-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "font-family" + ] + }, + "token-typography-code-100-font-size": { + "key": "{typography.code-100.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.code02.font-size}", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-100.font-size}" + }, + "name": "token-typography-code-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "font-size" + ] + }, + "token-typography-code-100-line-height": { + "key": "{typography.code-100.line-height}", + "$type": "number", + "$value": 1.33333, + "comment": "16px", + "$modes": { + "default": 1.23, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.code01.line-height}", + "comment": "16px", + "$modes": { + "default": 1.23, + "cds-g0": "{carbon.typography.code01.line-height}", + "cds-g10": "{carbon.typography.code01.line-height}", + "cds-g90": "{carbon.typography.code01.line-height}", + "cds-g100": "{carbon.typography.code01.line-height}" + }, + "key": "{typography.code-100.line-height}" + }, + "name": "token-typography-code-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "line-height" + ] + } + }, + "cds-g10": { + "token-border-radius-x-small": { + "key": "{border.radius.x-small}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.x-small}" + }, + "name": "token-border-radius-x-small", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "x-small" + ] + }, + "token-border-radius-small": { + "key": "{border.radius.small}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.small}" + }, + "name": "token-border-radius-small", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "small" + ] + }, + "token-border-radius-medium": { + "key": "{border.radius.medium}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.medium}" + }, + "name": "token-border-radius-medium", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "medium" + ] + }, + "token-border-radius-large": { + "key": "{border.radius.large}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.large}" + }, + "name": "token-border-radius-large", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "large" + ] + }, + "token-border-radius-rounded": { + "key": "{border.radius.rounded}", + "$type": "dimension", + "$value": "1000000000px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1000000000", + "unit": "px", + "key": "{border.radius.rounded}" + }, + "name": "token-border-radius-rounded", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "rounded" + ] + }, + "token-color-palette-blue-500": { + "key": "{color.palette.blue-500}", + "$type": "color", + "$value": "#001141", + "group": "palette", + "$modes": { + "default": "#1c345f", + "cds-g0": "#001141", + "cds-g10": "#001141", + "cds-g90": "#001141", + "cds-g100": "#001141" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.100}", + "group": "palette", + "$modes": { + "default": "#1c345f", + "cds-g0": "{carbon.color.blue.100}", + "cds-g10": "{carbon.color.blue.100}", + "cds-g90": "{carbon.color.blue.100}", + "cds-g100": "{carbon.color.blue.100}" + }, + "key": "{color.palette.blue-500}" + }, + "name": "token-color-palette-blue-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-500" + ] + }, + "token-color-palette-blue-400": { + "key": "{color.palette.blue-400}", + "$type": "color", + "$value": "#002d9c", + "group": "palette", + "$modes": { + "default": "#0046d1", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#002d9c", + "cds-g100": "#002d9c" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.80}", + "group": "palette", + "$modes": { + "default": "#0046d1", + "cds-g0": "{carbon.color.blue.80}", + "cds-g10": "{carbon.color.blue.80}", + "cds-g90": "{carbon.color.blue.80}", + "cds-g100": "{carbon.color.blue.80}" + }, + "key": "{color.palette.blue-400}" + }, + "name": "token-color-palette-blue-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-400" + ] + }, + "token-color-palette-blue-300": { + "key": "{color.palette.blue-300}", + "$type": "color", + "$value": "#0043ce", + "group": "palette", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.70}", + "group": "palette", + "$modes": { + "default": "#0c56e9", + "cds-g0": "{carbon.color.blue.70}", + "cds-g10": "{carbon.color.blue.70}", + "cds-g90": "{carbon.color.blue.70}", + "cds-g100": "{carbon.color.blue.70}" + }, + "key": "{color.palette.blue-300}" + }, + "name": "token-color-palette-blue-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-300" + ] + }, + "token-color-palette-blue-200": { + "key": "{color.palette.blue-200}", + "$type": "color", + "$value": "#0f62fe", + "group": "palette", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.60}", + "group": "palette", + "$modes": { + "default": "#1060ff", + "cds-g0": "{carbon.color.blue.60}", + "cds-g10": "{carbon.color.blue.60}", + "cds-g90": "{carbon.color.blue.60}", + "cds-g100": "{carbon.color.blue.60}" + }, + "key": "{color.palette.blue-200}" + }, + "name": "token-color-palette-blue-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-200" + ] + }, + "token-color-palette-blue-100": { + "key": "{color.palette.blue-100}", + "$type": "color", + "$value": "#d0e2ff", + "group": "palette", + "$modes": { + "default": "#cce3fe", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.20}", + "group": "palette", + "$modes": { + "default": "#cce3fe", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.20}", + "cds-g100": "{carbon.color.blue.20}" + }, + "key": "{color.palette.blue-100}" + }, + "name": "token-color-palette-blue-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-100" + ] + }, + "token-color-palette-blue-50": { + "key": "{color.palette.blue-50}", + "$type": "color", + "$value": "#edf5ff", + "group": "palette", + "$modes": { + "default": "#f2f8ff", + "cds-g0": "#edf5ff", + "cds-g10": "#edf5ff", + "cds-g90": "#edf5ff", + "cds-g100": "#edf5ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.10}", + "group": "palette", + "$modes": { + "default": "#f2f8ff", + "cds-g0": "{carbon.color.blue.10}", + "cds-g10": "{carbon.color.blue.10}", + "cds-g90": "{carbon.color.blue.10}", + "cds-g100": "{carbon.color.blue.10}" + }, + "key": "{color.palette.blue-50}" + }, + "name": "token-color-palette-blue-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-50" + ] + }, + "token-color-palette-purple-500": { + "key": "{color.palette.purple-500}", + "$type": "color", + "$value": "#31135e", + "group": "palette", + "$modes": { + "default": "#42215b", + "cds-g0": "#31135e", + "cds-g10": "#31135e", + "cds-g90": "#31135e", + "cds-g100": "#31135e" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.90}", + "group": "palette", + "$modes": { + "default": "#42215b", + "cds-g0": "{carbon.color.purple.90}", + "cds-g10": "{carbon.color.purple.90}", + "cds-g90": "{carbon.color.purple.90}", + "cds-g100": "{carbon.color.purple.90}" + }, + "key": "{color.palette.purple-500}" + }, + "name": "token-color-palette-purple-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-500" + ] + }, + "token-color-palette-purple-400": { + "key": "{color.palette.purple-400}", + "$type": "color", + "$value": "#6929c4", + "group": "palette", + "$modes": { + "default": "#7b00db", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.70}", + "group": "palette", + "$modes": { + "default": "#7b00db", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, + "key": "{color.palette.purple-400}" + }, + "name": "token-color-palette-purple-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-400" + ] + }, + "token-color-palette-purple-300": { + "key": "{color.palette.purple-300}", + "$type": "color", + "$value": "#8a3ffc", + "group": "palette", + "$modes": { + "default": "#911ced", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#8a3ffc", + "cds-g100": "#8a3ffc" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.60}", + "group": "palette", + "$modes": { + "default": "#911ced", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.60}", + "cds-g100": "{carbon.color.purple.60}" + }, + "key": "{color.palette.purple-300}" + }, + "name": "token-color-palette-purple-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-300" + ] + }, + "token-color-palette-purple-200": { + "key": "{color.palette.purple-200}", + "$type": "color", + "$value": "#a56eff", + "group": "palette", + "$modes": { + "default": "#a737ff", + "cds-g0": "#a56eff", + "cds-g10": "#a56eff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.50}", + "group": "palette", + "$modes": { + "default": "#a737ff", + "cds-g0": "{carbon.color.purple.50}", + "cds-g10": "{carbon.color.purple.50}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, + "key": "{color.palette.purple-200}" + }, + "name": "token-color-palette-purple-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-200" + ] + }, + "token-color-palette-purple-100": { + "key": "{color.palette.purple-100}", + "$type": "color", + "$value": "#e8daff", + "group": "palette", + "$modes": { + "default": "#ead2fe", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.20}", + "group": "palette", + "$modes": { + "default": "#ead2fe", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.20}" + }, + "key": "{color.palette.purple-100}" + }, + "name": "token-color-palette-purple-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-100" + ] + }, + "token-color-palette-purple-50": { + "key": "{color.palette.purple-50}", + "$type": "color", + "$value": "#f6f2ff", + "group": "palette", + "$modes": { + "default": "#f9f2ff", + "cds-g0": "#f6f2ff", + "cds-g10": "#f6f2ff", + "cds-g90": "#f6f2ff", + "cds-g100": "#f6f2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.10}", + "group": "palette", + "$modes": { + "default": "#f9f2ff", + "cds-g0": "{carbon.color.purple.10}", + "cds-g10": "{carbon.color.purple.10}", + "cds-g90": "{carbon.color.purple.10}", + "cds-g100": "{carbon.color.purple.10}" + }, + "key": "{color.palette.purple-50}" + }, + "name": "token-color-palette-purple-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-50" + ] + }, + "token-color-palette-green-500": { + "key": "{color.palette.green-500}", + "$type": "color", + "$value": "#044317", + "group": "palette", + "$modes": { + "default": "#054220", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#044317", + "cds-g100": "#044317" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.80}", + "group": "palette", + "$modes": { + "default": "#054220", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.80}", + "cds-g100": "{carbon.color.green.80}" + }, + "key": "{color.palette.green-500}" + }, + "name": "token-color-palette-green-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-500" + ] + }, + "token-color-palette-green-400": { + "key": "{color.palette.green-400}", + "$type": "color", + "$value": "#0e6027", + "group": "palette", + "$modes": { + "default": "#006619", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.70}", + "group": "palette", + "$modes": { + "default": "#006619", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, + "key": "{color.palette.green-400}" + }, + "name": "token-color-palette-green-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-400" + ] + }, + "token-color-palette-green-300": { + "key": "{color.palette.green-300}", + "$type": "color", + "$value": "#198038", + "group": "palette", + "$modes": { + "default": "#00781e", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#198038", + "cds-g100": "#198038" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.60}", + "group": "palette", + "$modes": { + "default": "#00781e", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.60}", + "cds-g100": "{carbon.color.green.60}" + }, + "key": "{color.palette.green-300}" + }, + "name": "token-color-palette-green-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-300" + ] + }, + "token-color-palette-green-200": { + "key": "{color.palette.green-200}", + "$type": "color", + "$value": "#24a148", + "group": "palette", + "$modes": { + "default": "#008a22", + "cds-g0": "#24a148", + "cds-g10": "#24a148", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.50}", + "group": "palette", + "$modes": { + "default": "#008a22", + "cds-g0": "{carbon.color.green.50}", + "cds-g10": "{carbon.color.green.50}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, + "key": "{color.palette.green-200}" + }, + "name": "token-color-palette-green-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-200" + ] + }, + "token-color-palette-green-100": { + "key": "{color.palette.green-100}", + "$type": "color", + "$value": "#a7f0ba", + "group": "palette", + "$modes": { + "default": "#cceeda", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.20}", + "group": "palette", + "$modes": { + "default": "#cceeda", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, + "key": "{color.palette.green-100}" + }, + "name": "token-color-palette-green-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-100" + ] + }, + "token-color-palette-green-50": { + "key": "{color.palette.green-50}", + "$type": "color", + "$value": "#defbe6", + "group": "palette", + "$modes": { + "default": "#f2fbf6", + "cds-g0": "#defbe6", + "cds-g10": "#defbe6", + "cds-g90": "#defbe6", + "cds-g100": "#defbe6" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.10}", + "group": "palette", + "$modes": { + "default": "#f2fbf6", + "cds-g0": "{carbon.color.green.10}", + "cds-g10": "{carbon.color.green.10}", + "cds-g90": "{carbon.color.green.10}", + "cds-g100": "{carbon.color.green.10}" + }, + "key": "{color.palette.green-50}" + }, + "name": "token-color-palette-green-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-50" + ] + }, + "token-color-palette-amber-500": { + "key": "{color.palette.amber-500}", + "$type": "color", + "$value": "#3e1a00", + "group": "palette", + "$modes": { + "default": "#542800", + "cds-g0": "#3e1a00", + "cds-g10": "#3e1a00", + "cds-g90": "#3e1a00", + "cds-g100": "#3e1a00" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.90}", + "group": "palette", + "$modes": { + "default": "#542800", + "cds-g0": "{carbon.color.orange.90}", + "cds-g10": "{carbon.color.orange.90}", + "cds-g90": "{carbon.color.orange.90}", + "cds-g100": "{carbon.color.orange.90}" + }, + "key": "{color.palette.amber-500}" + }, + "name": "token-color-palette-amber-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-500" + ] + }, + "token-color-palette-amber-400": { + "key": "{color.palette.amber-400}", + "$type": "color", + "$value": "#5e2900", + "group": "palette", + "$modes": { + "default": "#803d00", + "cds-g0": "#5e2900", + "cds-g10": "#5e2900", + "cds-g90": "#5e2900", + "cds-g100": "#5e2900" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.80}", + "group": "palette", + "$modes": { + "default": "#803d00", + "cds-g0": "{carbon.color.orange.80}", + "cds-g10": "{carbon.color.orange.80}", + "cds-g90": "{carbon.color.orange.80}", + "cds-g100": "{carbon.color.orange.80}" + }, + "key": "{color.palette.amber-400}" + }, + "name": "token-color-palette-amber-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-400" + ] + }, + "token-color-palette-amber-300": { + "key": "{color.palette.amber-300}", + "$type": "color", + "$value": "#8a3800", + "group": "palette", + "$modes": { + "default": "#9e4b00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.70}", + "group": "palette", + "$modes": { + "default": "#9e4b00", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, + "key": "{color.palette.amber-300}" + }, + "name": "token-color-palette-amber-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-300" + ] + }, + "token-color-palette-amber-200": { + "key": "{color.palette.amber-200}", + "$type": "color", + "$value": "#ba4e00", + "group": "palette", + "$modes": { + "default": "#bb5a00", + "cds-g0": "#ba4e00", + "cds-g10": "#ba4e00", + "cds-g90": "#ba4e00", + "cds-g100": "#ba4e00" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.60}", + "group": "palette", + "$modes": { + "default": "#bb5a00", + "cds-g0": "{carbon.color.orange.60}", + "cds-g10": "{carbon.color.orange.60}", + "cds-g90": "{carbon.color.orange.60}", + "cds-g100": "{carbon.color.orange.60}" + }, + "key": "{color.palette.amber-200}" + }, + "name": "token-color-palette-amber-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-200" + ] + }, + "token-color-palette-amber-100": { + "key": "{color.palette.amber-100}", + "$type": "color", + "$value": "#ffd9be", + "group": "palette", + "$modes": { + "default": "#fbeabf", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.20}", + "group": "palette", + "$modes": { + "default": "#fbeabf", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "key": "{color.palette.amber-100}" + }, + "name": "token-color-palette-amber-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-100" + ] + }, + "token-color-palette-amber-50": { + "key": "{color.palette.amber-50}", + "$type": "color", + "$value": "#fff2e8", + "group": "palette", + "$modes": { + "default": "#fff9e8", + "cds-g0": "#fff2e8", + "cds-g10": "#fff2e8", + "cds-g90": "#fff2e8", + "cds-g100": "#fff2e8" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.10}", + "group": "palette", + "$modes": { + "default": "#fff9e8", + "cds-g0": "{carbon.color.orange.10}", + "cds-g10": "{carbon.color.orange.10}", + "cds-g90": "{carbon.color.orange.10}", + "cds-g100": "{carbon.color.orange.10}" + }, + "key": "{color.palette.amber-50}" + }, + "name": "token-color-palette-amber-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-50" + ] + }, + "token-color-palette-red-500": { + "key": "{color.palette.red-500}", + "$type": "color", + "$value": "#520408", + "group": "palette", + "$modes": { + "default": "#51130a", + "cds-g0": "#520408", + "cds-g10": "#520408", + "cds-g90": "#520408", + "cds-g100": "#520408" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.90}", + "group": "palette", + "$modes": { + "default": "#51130a", + "cds-g0": "{carbon.color.red.90}", + "cds-g10": "{carbon.color.red.90}", + "cds-g90": "{carbon.color.red.90}", + "cds-g100": "{carbon.color.red.90}" + }, + "key": "{color.palette.red-500}" + }, + "name": "token-color-palette-red-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-500" + ] + }, + "token-color-palette-red-400": { + "key": "{color.palette.red-400}", + "$type": "color", + "$value": "#750e13", + "group": "palette", + "$modes": { + "default": "#940004", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#750e13", + "cds-g100": "#750e13" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.80}", + "group": "palette", + "$modes": { + "default": "#940004", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.80}", + "cds-g100": "{carbon.color.red.80}" + }, + "key": "{color.palette.red-400}" + }, + "name": "token-color-palette-red-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-400" + ] + }, + "token-color-palette-red-300": { + "key": "{color.palette.red-300}", + "$type": "color", + "$value": "#a2191f", + "group": "palette", + "$modes": { + "default": "#c00005", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.70}", + "group": "palette", + "$modes": { + "default": "#c00005", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, + "key": "{color.palette.red-300}" + }, + "name": "token-color-palette-red-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-300" + ] + }, + "token-color-palette-red-200": { + "key": "{color.palette.red-200}", + "$type": "color", + "$value": "#da1e28", + "group": "palette", + "$modes": { + "default": "#e52228", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.60}", + "group": "palette", + "$modes": { + "default": "#e52228", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.60}", + "cds-g100": "{carbon.color.red.60}" + }, + "key": "{color.palette.red-200}" + }, + "name": "token-color-palette-red-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-200" + ] + }, + "token-color-palette-red-100": { + "key": "{color.palette.red-100}", + "$type": "color", + "$value": "#ffd7d9", + "group": "palette", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.20}", + "group": "palette", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, + "key": "{color.palette.red-100}" + }, + "name": "token-color-palette-red-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-100" + ] + }, + "token-color-palette-red-50": { + "key": "{color.palette.red-50}", + "$type": "color", + "$value": "#fff1f1", + "group": "palette", + "$modes": { + "default": "#fff5f5", + "cds-g0": "#fff1f1", + "cds-g10": "#fff1f1", + "cds-g90": "#fff1f1", + "cds-g100": "#fff1f1" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.10}", + "group": "palette", + "$modes": { + "default": "#fff5f5", + "cds-g0": "{carbon.color.red.10}", + "cds-g10": "{carbon.color.red.10}", + "cds-g90": "{carbon.color.red.10}", + "cds-g100": "{carbon.color.red.10}" + }, + "key": "{color.palette.red-50}" + }, + "name": "token-color-palette-red-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-50" + ] + }, + "token-color-palette-neutral-700": { + "key": "{color.palette.neutral-700}", + "$type": "color", + "$value": "#161616", + "group": "palette", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.100}", + "group": "palette", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "{carbon.color.gray.100}", + "cds-g10": "{carbon.color.gray.100}", + "cds-g90": "{carbon.color.gray.100}", + "cds-g100": "{carbon.color.gray.100}" + }, + "key": "{color.palette.neutral-700}" + }, + "name": "token-color-palette-neutral-700", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-700" + ] + }, + "token-color-palette-neutral-600": { + "key": "{color.palette.neutral-600}", + "$type": "color", + "$value": "#393939", + "group": "palette", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#393939", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.80}", + "group": "palette", + "$modes": { + "default": "#3b3d45", + "cds-g0": "{carbon.color.gray.80}", + "cds-g10": "{carbon.color.gray.80}", + "cds-g90": "{carbon.color.gray.80}", + "cds-g100": "{carbon.color.gray.80}" + }, + "key": "{color.palette.neutral-600}" + }, + "name": "token-color-palette-neutral-600", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-600" + ] + }, + "token-color-palette-neutral-500": { + "key": "{color.palette.neutral-500}", + "$type": "color", + "$value": "#525252", + "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.70}", + "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": "{carbon.color.gray.70}", + "cds-g10": "{carbon.color.gray.70}", + "cds-g90": "{carbon.color.gray.70}", + "cds-g100": "{carbon.color.gray.70}" + }, + "key": "{color.palette.neutral-500}" + }, + "name": "token-color-palette-neutral-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-500" + ] + }, + "token-color-palette-neutral-400": { + "key": "{color.palette.neutral-400}", + "$type": "color", + "$value": "#8d8d8d", + "group": "palette", + "$modes": { + "default": "#8c909c", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.50}", + "group": "palette", + "$modes": { + "default": "#8c909c", + "cds-g0": "{carbon.color.gray.50}", + "cds-g10": "{carbon.color.gray.50}", + "cds-g90": "{carbon.color.gray.50}", + "cds-g100": "{carbon.color.gray.50}" + }, + "key": "{color.palette.neutral-400}" + }, + "name": "token-color-palette-neutral-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-400" + ] + }, + "token-color-palette-neutral-300": { + "key": "{color.palette.neutral-300}", + "$type": "color", + "$value": "#a8a8a8", + "group": "palette", + "$modes": { + "default": "#c2c5cb", + "cds-g0": "#a8a8a8", + "cds-g10": "#a8a8a8", + "cds-g90": "#a8a8a8", + "cds-g100": "#a8a8a8" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.40}", + "group": "palette", + "$modes": { + "default": "#c2c5cb", + "cds-g0": "{carbon.color.gray.40}", + "cds-g10": "{carbon.color.gray.40}", + "cds-g90": "{carbon.color.gray.40}", + "cds-g100": "{carbon.color.gray.40}" + }, + "key": "{color.palette.neutral-300}" + }, + "name": "token-color-palette-neutral-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-300" + ] + }, + "token-color-palette-neutral-200": { + "key": "{color.palette.neutral-200}", + "$type": "color", + "$value": "#c6c6c6", + "group": "palette", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.30}", + "group": "palette", + "$modes": { + "default": "#dedfe3", + "cds-g0": "{carbon.color.gray.30}", + "cds-g10": "{carbon.color.gray.30}", + "cds-g90": "{carbon.color.gray.30}", + "cds-g100": "{carbon.color.gray.30}" + }, + "key": "{color.palette.neutral-200}" + }, + "name": "token-color-palette-neutral-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-200" + ] + }, + "token-color-palette-neutral-100": { + "key": "{color.palette.neutral-100}", + "$type": "color", + "$value": "#e0e0e0", + "group": "palette", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#e0e0e0", + "cds-g100": "#e0e0e0" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.20}", + "group": "palette", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "{carbon.color.gray.20}", + "cds-g10": "{carbon.color.gray.20}", + "cds-g90": "{carbon.color.gray.20}", + "cds-g100": "{carbon.color.gray.20}" + }, + "key": "{color.palette.neutral-100}" + }, + "name": "token-color-palette-neutral-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-100" + ] + }, + "token-color-palette-neutral-50": { + "key": "{color.palette.neutral-50}", + "$type": "color", + "$value": "#f4f4f4", + "group": "palette", + "$modes": { + "default": "#fafafa", + "cds-g0": "#f4f4f4", + "cds-g10": "#f4f4f4", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.10}", + "group": "palette", + "$modes": { + "default": "#fafafa", + "cds-g0": "{carbon.color.gray.10}", + "cds-g10": "{carbon.color.gray.10}", + "cds-g90": "{carbon.color.gray.10}", + "cds-g100": "{carbon.color.gray.10}" + }, + "key": "{color.palette.neutral-50}" + }, + "name": "token-color-palette-neutral-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-50" + ] + }, + "token-color-palette-neutral-0": { + "key": "{color.palette.neutral-0}", + "$type": "color", + "$value": "#ffffff", + "group": "palette", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.white.0}", + "group": "palette", + "$modes": { + "default": "#ffffff", + "cds-g0": "{carbon.color.white.0}", + "cds-g10": "{carbon.color.white.0}", + "cds-g90": "{carbon.color.white.0}", + "cds-g100": "{carbon.color.white.0}" + }, + "key": "{color.palette.neutral-0}" + }, + "name": "token-color-palette-neutral-0", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-0" + ] + }, + "token-color-palette-alpha-300": { + "key": "{color.palette.alpha-300}", + "$type": "color", + "$value": "#8d8d8d", + "group": "palette", + "$modes": { + "default": "#393939", + "cds-g0": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#6f6f6f", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.50}", + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-600}", + "cds-g0": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.60}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "key": "{color.palette.alpha-300}" + }, + "name": "token-color-palette-alpha-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "alpha-300" + ] + }, + "token-color-palette-alpha-200": { + "key": "{color.palette.alpha-200}", + "$type": "color", + "$value": "#e0e0e0", + "group": "palette", + "$modes": { + "default": "#525252", + "cds-g0": { + "$value": "#c6c6c6", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#e0e0e0", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#6f6f6f", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#525252", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.20}", + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": { + "$value": "{carbon.color.gray.30}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.20}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.60}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.70}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "key": "{color.palette.alpha-200}" + }, + "name": "token-color-palette-alpha-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "alpha-200" + ] + }, + "token-color-palette-alpha-100": { + "key": "{color.palette.alpha-100}", + "$type": "color", + "$value": "#c6c6c6", + "group": "palette", + "$modes": { + "default": "#525252", + "cds-g0": { + "$value": "#e0e0e0", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#c6c6c6", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#525252", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#393939", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.30}", + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": { + "$value": "{carbon.color.gray.20}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.30}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.70}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.80}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "key": "{color.palette.alpha-100}" + }, + "name": "token-color-palette-alpha-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "alpha-100" + ] + }, + "token-color-border-primary": { + "key": "{color.border.primary}", + "$type": "color", + "$value": "#e0e0e0", + "group": "semantic", + "$modes": { + "default": "#e0e0e0", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.borderSubtle03}", + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-200}", + "cds-g0": "{carbon.themes.white.borderSubtle03}", + "cds-g10": "{carbon.themes.g10.borderSubtle03}", + "cds-g90": "{carbon.themes.g90.borderSubtle03}", + "cds-g100": "{carbon.themes.g100.borderSubtle03}" + }, + "key": "{color.border.primary}" + }, + "name": "token-color-border-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "primary" + ] + }, + "token-color-border-faint": { + "key": "{color.border.faint}", + "$type": "color", + "$value": "#c6c6c6", + "group": "semantic", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.borderSubtle00}", + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-100}", + "cds-g0": "{carbon.themes.white.borderSubtle00}", + "cds-g10": "{carbon.themes.g10.borderSubtle00}", + "cds-g90": "{carbon.themes.g90.borderSubtle00}", + "cds-g100": "{carbon.themes.g100.borderSubtle00}" + }, + "key": "{color.border.faint}" + }, + "name": "token-color-border-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "faint" + ] + }, + "token-color-border-strong": { + "key": "{color.border.strong}", + "$type": "color", + "$value": "#8d8d8d", + "group": "semantic", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.borderStrong01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-300}", + "cds-g0": "{carbon.themes.white.borderStrong01}", + "cds-g10": "{carbon.themes.g10.borderStrong01}", + "cds-g90": "{carbon.themes.g90.borderStrong01}", + "cds-g100": "{carbon.themes.g100.borderStrong01}" + }, + "key": "{color.border.strong}" + }, + "name": "token-color-border-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "strong" + ] + }, + "token-color-border-action": { + "key": "{color.border.action}", + "$type": "color", + "$value": "#0f62fe", + "group": "semantic", + "$modes": { + "default": "#d0e2ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.borderInteractive}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-100}", + "cds-g0": "{carbon.themes.white.borderInteractive}", + "cds-g10": "{carbon.themes.g10.borderInteractive}", + "cds-g90": "{carbon.themes.g90.borderInteractive}", + "cds-g100": "{carbon.themes.g100.borderInteractive}" + }, + "key": "{color.border.action}" + }, + "name": "token-color-border-action", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "action" + ] + }, + "token-color-border-highlight": { + "key": "{color.border.highlight}", + "$type": "color", + "$value": "#be95ff", + "group": "semantic", + "$modes": { + "default": "#e8daff", + "cds-g0": "#be95ff", + "cds-g10": "#be95ff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-100}", + "cds-g0": "{carbon.color.purple.40}", + "cds-g10": "{carbon.color.purple.40}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, + "key": "{color.border.highlight}" + }, + "name": "token-color-border-highlight", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "highlight" + ] + }, + "token-color-border-success": { + "key": "{color.border.success}", + "$type": "color", + "$value": "#42be65", + "group": "semantic", + "$modes": { + "default": "#a7f0ba", + "cds-g0": "#42be65", + "cds-g10": "#42be65", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-100}", + "cds-g0": "{carbon.color.green.40}", + "cds-g10": "{carbon.color.green.40}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, + "key": "{color.border.success}" + }, + "name": "token-color-border-success", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "success" + ] + }, + "token-color-border-warning": { + "key": "{color.border.warning}", + "$type": "color", + "$value": "#d2a106", + "group": "semantic", + "$modes": { + "default": "#ffd9be", + "cds-g0": "#d2a106", + "cds-g10": "#d2a106", + "cds-g90": "#b28600", + "cds-g100": "#b28600" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.yellow.40}", + "cds-g10": "{carbon.color.yellow.40}", + "cds-g90": "{carbon.color.yellow.50}", + "cds-g100": "{carbon.color.yellow.50}" + }, + "key": "{color.border.warning}" + }, + "name": "token-color-border-warning", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "warning" + ] + }, + "token-color-border-critical": { + "key": "{color.border.critical}", + "$type": "color", + "$value": "#ff8389", + "group": "semantic", + "$modes": { + "default": "#ffd7d9", + "cds-g0": "#ff8389", + "cds-g10": "#ff8389", + "cds-g90": "#fa4d56", + "cds-g100": "#fa4d56" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-100}", + "cds-g0": "{carbon.color.red.40}", + "cds-g10": "{carbon.color.red.40}", + "cds-g90": "{carbon.color.red.50}", + "cds-g100": "{carbon.color.red.50}" + }, + "key": "{color.border.critical}" + }, + "name": "token-color-border-critical", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "critical" + ] + }, + "token-color-focus-action-internal": { + "key": "{color.focus.action.internal}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "default": "#0043ce", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.focusInset}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, + "key": "{color.focus.action.internal}" + }, + "name": "token-color-focus-action-internal", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "action", + "internal" + ] + }, + "token-color-focus-action-external": { + "key": "{color.focus.action.external}", + "$type": "color", + "$value": "#0f62fe", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.focus}", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{color.focus.action.external}" + }, + "name": "token-color-focus-action-external", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "action", + "external" + ] + }, + "token-color-focus-critical-internal": { + "key": "{color.focus.critical.internal}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "default": "#a2191f", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.focusInset}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, + "key": "{color.focus.critical.internal}" + }, + "name": "token-color-focus-critical-internal", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "critical", + "internal" + ] + }, + "token-color-focus-critical-external": { + "key": "{color.focus.critical.external}", + "$type": "color", + "$value": "#0f62fe", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#dd7578", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.focus}", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#dd7578", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{color.focus.critical.external}" + }, + "name": "token-color-focus-critical-external", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "critical", + "external" + ] + }, + "token-color-foreground-strong": { + "key": "{color.foreground.strong}", + "$type": "color", + "$value": "#161616", + "group": "semantic", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textPrimary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{color.foreground.strong}" + }, + "name": "token-color-foreground-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "strong" + ] + }, + "token-color-foreground-primary": { + "key": "{color.foreground.primary}", + "$type": "color", + "$value": "#161616", + "group": "semantic", + "$modes": { + "default": "#393939", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textPrimary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-600}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{color.foreground.primary}" + }, + "name": "token-color-foreground-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "primary" + ] + }, + "token-color-foreground-faint": { + "key": "{color.foreground.faint}", + "$type": "color", + "$value": "#525252", + "group": "semantic", + "$modes": { + "default": "#525252", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textSecondary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{color.foreground.faint}" + }, + "name": "token-color-foreground-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "faint" + ] + }, + "token-color-foreground-high-contrast": { + "key": "{color.foreground.high-contrast}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textInverse}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{color.foreground.high-contrast}" + }, + "name": "token-color-foreground-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "high-contrast" + ] + }, + "token-color-foreground-disabled": { + "key": "{color.foreground.disabled}", + "$type": "color", + "$value": "rgba(22, 22, 22, 0.25)", + "group": "semantic", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "rgba(22, 22, 22, 0.25)", + "cds-g10": "rgba(22, 22, 22, 0.25)", + "cds-g90": "rgba(244, 244, 244, 0.25)", + "cds-g100": "rgba(244, 244, 244, 0.25)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textDisabled}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textDisabled}", + "cds-g10": "{carbon.themes.g10.textDisabled}", + "cds-g90": "{carbon.themes.g90.textDisabled}", + "cds-g100": "{carbon.themes.g100.textDisabled}" + }, + "key": "{color.foreground.disabled}" + }, + "name": "token-color-foreground-disabled", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "disabled" + ] + }, + "token-color-foreground-action": { + "key": "{color.foreground.action}", + "$type": "color", + "$value": "#0f62fe", + "group": "semantic", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#78a9ff", + "cds-g100": "#78a9ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.linkPrimary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.white.linkPrimary}", + "cds-g10": "{carbon.themes.g10.linkPrimary}", + "cds-g90": "{carbon.themes.g90.linkPrimary}", + "cds-g100": "{carbon.themes.g100.linkPrimary}" + }, + "key": "{color.foreground.action}" + }, + "name": "token-color-foreground-action", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "action" + ] + }, + "token-color-foreground-action-hover": { + "key": "{color.foreground.action-hover}", + "$type": "color", + "$value": "#0043ce", + "group": "semantic", + "$modes": { + "default": "#0043ce", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.linkPrimaryHover}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, + "key": "{color.foreground.action-hover}" + }, + "name": "token-color-foreground-action-hover", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "action-hover" + ] + }, + "token-color-foreground-action-active": { + "key": "{color.foreground.action-active}", + "$type": "color", + "$value": "#0043ce", + "group": "semantic", + "$modes": { + "default": "#002d9c", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.linkPrimaryHover}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, + "key": "{color.foreground.action-active}" + }, + "name": "token-color-foreground-action-active", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "action-active" + ] + }, + "token-color-foreground-highlight": { + "key": "{color.foreground.highlight}", + "$type": "color", + "$value": "#8a3ffc", + "group": "semantic", + "$modes": { + "default": "#a56eff", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.60}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, + "key": "{color.foreground.highlight}" + }, + "name": "token-color-foreground-highlight", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "highlight" + ] + }, + "token-color-foreground-highlight-on-surface": { + "key": "{color.foreground.highlight-on-surface}", + "$type": "color", + "$value": "#6929c4", + "group": "semantic", + "$modes": { + "default": "#8a3ffc", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#d4bbff", + "cds-g100": "#d4bbff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-300}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.30}", + "cds-g100": "{carbon.color.purple.30}" + }, + "key": "{color.foreground.highlight-on-surface}" + }, + "name": "token-color-foreground-highlight-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "highlight-on-surface" + ] + }, + "token-color-foreground-highlight-high-contrast": { + "key": "{color.foreground.highlight-high-contrast}", + "$type": "color", + "$value": "#491d8b", + "group": "semantic", + "$modes": { + "default": "#31135e", + "cds-g0": "#491d8b", + "cds-g10": "#491d8b", + "cds-g90": "#e8daff", + "cds-g100": "#d4bbff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.80}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-500}", + "cds-g0": "{carbon.color.purple.80}", + "cds-g10": "{carbon.color.purple.80}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.30}" + }, + "key": "{color.foreground.highlight-high-contrast}" + }, + "name": "token-color-foreground-highlight-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "highlight-high-contrast" + ] + }, + "token-color-foreground-success": { + "key": "{color.foreground.success}", + "$type": "color", + "$value": "#198038", + "group": "semantic", + "$modes": { + "default": "#24a148", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#42be65", + "cds-g100": "#42be65" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.60}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-200}", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.40}", + "cds-g100": "{carbon.color.green.40}" + }, + "key": "{color.foreground.success}" + }, + "name": "token-color-foreground-success", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "success" + ] + }, + "token-color-foreground-success-on-surface": { + "key": "{color.foreground.success-on-surface}", + "$type": "color", + "$value": "#0e6027", + "group": "semantic", + "$modes": { + "default": "#198038", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#6fdc8c", + "cds-g100": "#6fdc8c" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-300}", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.30}", + "cds-g100": "{carbon.color.green.30}" + }, + "key": "{color.foreground.success-on-surface}" + }, + "name": "token-color-foreground-success-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "success-on-surface" + ] + }, + "token-color-foreground-success-high-contrast": { + "key": "{color.foreground.success-high-contrast}", + "$type": "color", + "$value": "#044317", + "group": "semantic", + "$modes": { + "default": "#044317", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.80}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-500}", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, + "key": "{color.foreground.success-high-contrast}" + }, + "name": "token-color-foreground-success-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "success-high-contrast" + ] + }, + "token-color-foreground-warning": { + "key": "{color.foreground.warning}", + "$type": "color", + "$value": "#8e6a00", + "group": "semantic", + "$modes": { + "default": "#ba4e00", + "cds-g0": "#8e6a00", + "cds-g10": "#8e6a00", + "cds-g90": "#d2a106", + "cds-g100": "#d2a106" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.60}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.yellow.60}", + "cds-g10": "{carbon.color.yellow.60}", + "cds-g90": "{carbon.color.yellow.40}", + "cds-g100": "{carbon.color.yellow.40}" + }, + "key": "{color.foreground.warning}" + }, + "name": "token-color-foreground-warning", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "warning" + ] + }, + "token-color-foreground-warning-on-surface": { + "key": "{color.foreground.warning-on-surface}", + "$type": "color", + "$value": "#684e00", + "group": "semantic", + "$modes": { + "default": "#8a3800", + "cds-g0": "#684e00", + "cds-g10": "#684e00", + "cds-g90": "#f1c21b", + "cds-g100": "#f1c21b" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-300}", + "cds-g0": "{carbon.color.yellow.70}", + "cds-g10": "{carbon.color.yellow.70}", + "cds-g90": "{carbon.color.yellow.30}", + "cds-g100": "{carbon.color.yellow.30}" + }, + "key": "{color.foreground.warning-on-surface}" + }, + "name": "token-color-foreground-warning-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "warning-on-surface" + ] + }, + "token-color-foreground-warning-high-contrast": { + "key": "{color.foreground.warning-high-contrast}", + "$type": "color", + "$value": "#483700", + "group": "semantic", + "$modes": { + "default": "#3e1a00", + "cds-g0": "#483700", + "cds-g10": "#483700", + "cds-g90": "#fddc69", + "cds-g100": "#fddc69" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.80}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-500}", + "cds-g0": "{carbon.color.yellow.80}", + "cds-g10": "{carbon.color.yellow.80}", + "cds-g90": "{carbon.color.yellow.20}", + "cds-g100": "{carbon.color.yellow.20}" + }, + "key": "{color.foreground.warning-high-contrast}" + }, + "name": "token-color-foreground-warning-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "warning-high-contrast" + ] + }, + "token-color-foreground-critical": { + "key": "{color.foreground.critical}", + "$type": "color", + "$value": "#da1e28", + "group": "semantic", + "$modes": { + "default": "#da1e28", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#ff8389", + "cds-g100": "#ff8389" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.60}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-200}", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.40}", + "cds-g100": "{carbon.color.red.40}" + }, + "key": "{color.foreground.critical}" + }, + "name": "token-color-foreground-critical", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "critical" + ] + }, + "token-color-foreground-critical-on-surface": { + "key": "{color.foreground.critical-on-surface}", + "$type": "color", + "$value": "#a2191f", + "group": "semantic", + "$modes": { + "default": "#a2191f", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffb3b8", + "cds-g100": "#ffb3b8" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.30}", + "cds-g100": "{carbon.color.red.30}" + }, + "key": "{color.foreground.critical-on-surface}" + }, + "name": "token-color-foreground-critical-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "critical-on-surface" + ] + }, + "token-color-foreground-critical-high-contrast": { + "key": "{color.foreground.critical-high-contrast}", + "$type": "color", + "$value": "#750e13", + "group": "semantic", + "$modes": { + "default": "#520408", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.80}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-500}", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, + "key": "{color.foreground.critical-high-contrast}" + }, + "name": "token-color-foreground-critical-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "critical-high-contrast" + ] + }, + "token-color-page-primary": { + "key": "{color.page.primary}", + "$type": "color", + "$value": "#f4f4f4", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.background}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, + "key": "{color.page.primary}" + }, + "name": "token-color-page-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "page", + "primary" + ] + }, + "token-color-page-faint": { + "key": "{color.page.faint}", + "$type": "color", + "$value": "#f4f4f4", + "group": "semantic", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.background}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, + "key": "{color.page.faint}" + }, + "name": "token-color-page-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "page", + "faint" + ] + }, + "token-color-surface-primary": { + "key": "{color.surface.primary}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.layer01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, + "key": "{color.surface.primary}" + }, + "name": "token-color-surface-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "primary" + ] + }, + "token-color-surface-faint": { + "key": "{color.surface.faint}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.layer01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, + "key": "{color.surface.faint}" + }, + "name": "token-color-surface-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "faint" + ] + }, + "token-color-surface-strong": { + "key": "{color.surface.strong}", + "$type": "color", + "$value": "#e0e0e0", + "group": "semantic", + "$modes": { + "default": "#e0e0e0", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.layerAccent01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerAccent01}", + "cds-g10": "{carbon.themes.g10.layerAccent01}", + "cds-g90": "{carbon.themes.g90.layerAccent01}", + "cds-g100": "{carbon.themes.g100.layerAccent01}" + }, + "key": "{color.surface.strong}" + }, + "name": "token-color-surface-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "strong" + ] + }, + "token-color-surface-high-contrast": { + "key": "{color.surface.high-contrast}", + "$type": "color", + "$value": "#393939", + "group": "semantic", + "$modes": { + "default": "#161616", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.backgroundInverse}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "key": "{color.surface.high-contrast}" + }, + "name": "token-color-surface-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "high-contrast" + ] + }, + "token-color-surface-interactive": { + "key": "{color.surface.interactive}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.layer01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, + "key": "{color.surface.interactive}" + }, + "name": "token-color-surface-interactive", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive" + ] + }, + "token-color-surface-interactive-hover": { + "key": "{color.surface.interactive-hover}", + "$type": "color", + "$value": "#e8e8e8", + "group": "semantic", + "$modes": { + "default": "#e0e0e0", + "cds-g0": "#e8e8e8", + "cds-g10": "#e8e8e8", + "cds-g90": "#474747", + "cds-g100": "#333333" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.layerHover01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerHover01}", + "cds-g10": "{carbon.themes.g10.layerHover01}", + "cds-g90": "{carbon.themes.g90.layerHover01}", + "cds-g100": "{carbon.themes.g100.layerHover01}" + }, + "key": "{color.surface.interactive-hover}" + }, + "name": "token-color-surface-interactive-hover", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive-hover" + ] + }, + "token-color-surface-interactive-active": { + "key": "{color.surface.interactive-active}", + "$type": "color", + "$value": "#c6c6c6", + "group": "semantic", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.layerActive01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.white.layerActive01}", + "cds-g10": "{carbon.themes.g10.layerActive01}", + "cds-g90": "{carbon.themes.g90.layerActive01}", + "cds-g100": "{carbon.themes.g100.layerActive01}" + }, + "key": "{color.surface.interactive-active}" + }, + "name": "token-color-surface-interactive-active", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive-active" + ] + }, + "token-color-surface-interactive-disabled": { + "key": "{color.surface.interactive-disabled}", + "$type": "color", + "$value": "#c6c6c6", + "group": "semantic", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.30}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.color.gray.30}", + "cds-g10": "{carbon.color.gray.30}", + "cds-g90": "{carbon.color.gray.60}", + "cds-g100": "{carbon.color.gray.70}" + }, + "key": "{color.surface.interactive-disabled}" + }, + "name": "token-color-surface-interactive-disabled", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive-disabled" + ] + }, + "token-color-surface-action": { + "key": "{color.surface.action}", + "$type": "color", + "$value": "#d0e2ff", + "group": "semantic", + "$modes": { + "default": "#edf5ff", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0f62fe", + "cds-g100": "#0043ce" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.20}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-50}", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.60}", + "cds-g100": "{carbon.color.blue.70}" + }, + "key": "{color.surface.action}" + }, + "name": "token-color-surface-action", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "action" + ] + }, + "token-color-surface-highlight": { + "key": "{color.surface.highlight}", + "$type": "color", + "$value": "#e8daff", + "group": "semantic", + "$modes": { + "default": "#f6f2ff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.20}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-50}", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, + "key": "{color.surface.highlight}" + }, + "name": "token-color-surface-highlight", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "highlight" + ] + }, + "token-color-surface-success": { + "key": "{color.surface.success}", + "$type": "color", + "$value": "#a7f0ba", + "group": "semantic", + "$modes": { + "default": "#defbe6", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.20}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-50}", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, + "key": "{color.surface.success}" + }, + "name": "token-color-surface-success", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "success" + ] + }, + "token-color-surface-warning": { + "key": "{color.surface.warning}", + "$type": "color", + "$value": "#fcf4d6", + "group": "semantic", + "$modes": { + "default": "#fff2e8", + "cds-g0": "#fcf4d6", + "cds-g10": "#fcf4d6", + "cds-g90": "#684e00", + "cds-g100": "#684e00" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.10}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-50}", + "cds-g0": "{carbon.color.yellow.10}", + "cds-g10": "{carbon.color.yellow.10}", + "cds-g90": "{carbon.color.yellow.70}", + "cds-g100": "{carbon.color.yellow.70}" + }, + "key": "{color.surface.warning}" + }, + "name": "token-color-surface-warning", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "warning" + ] + }, + "token-color-surface-critical": { + "key": "{color.surface.critical}", + "$type": "color", + "$value": "#ffd7d9", + "group": "semantic", + "$modes": { + "default": "#fff1f1", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.20}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-50}", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, + "key": "{color.surface.critical}" + }, + "name": "token-color-surface-critical", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "critical" + ] + }, + "token-color-hashicorp-brand": { + "key": "{color.hashicorp.brand}", + "$type": "color", + "$value": "#000000", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.hashicorp-brand}", + "group": "branding", + "key": "{color.hashicorp.brand}" + }, + "name": "token-color-hashicorp-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "hashicorp", + "brand" + ] + }, + "token-color-boundary-brand": { + "key": "{color.boundary.brand}", + "$type": "color", + "$value": "#f24c53", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-brand}", + "group": "branding", + "key": "{color.boundary.brand}" + }, + "name": "token-color-boundary-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "brand" + ] + }, + "token-color-boundary-foreground": { + "key": "{color.boundary.foreground}", + "$type": "color", + "$value": "#cf2d32", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-500}", + "group": "branding", + "key": "{color.boundary.foreground}" + }, + "name": "token-color-boundary-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "foreground" + ] + }, + "token-color-boundary-surface": { + "key": "{color.boundary.surface}", + "$type": "color", + "$value": "#ffecec", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-50}", + "group": "branding", + "key": "{color.boundary.surface}" + }, + "name": "token-color-boundary-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "surface" + ] + }, + "token-color-boundary-border": { + "key": "{color.boundary.border}", + "$type": "color", + "$value": "#fbd7d8", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-100}", + "group": "branding", + "key": "{color.boundary.border}" + }, + "name": "token-color-boundary-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "border" + ] + }, + "token-color-boundary-gradient-primary-start": { + "key": "{color.boundary.gradient.primary.start}", + "$type": "color", + "$value": "#f97076", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-300}", + "group": "branding", + "key": "{color.boundary.gradient.primary.start}" + }, + "name": "token-color-boundary-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "primary", + "start" + ] + }, + "token-color-boundary-gradient-primary-stop": { + "key": "{color.boundary.gradient.primary.stop}", + "$type": "color", + "$value": "#db363b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-400}", + "group": "branding", + "key": "{color.boundary.gradient.primary.stop}" + }, + "name": "token-color-boundary-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "primary", + "stop" + ] + }, + "token-color-boundary-gradient-faint-start": { + "key": "{color.boundary.gradient.faint.start}", + "$type": "color", + "$value": "#fffafa", + "group": "branding", + "comment": "this is the 'boundary-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffafa", + "group": "branding", + "comment": "this is the 'boundary-50' value at 25% opacity on white", + "key": "{color.boundary.gradient.faint.start}" + }, + "name": "token-color-boundary-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "faint", + "start" + ] + }, + "token-color-boundary-gradient-faint-stop": { + "key": "{color.boundary.gradient.faint.stop}", + "$type": "color", + "$value": "#ffecec", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-50}", + "group": "branding", + "key": "{color.boundary.gradient.faint.stop}" + }, + "name": "token-color-boundary-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "faint", + "stop" + ] + }, + "token-color-consul-brand": { + "key": "{color.consul.brand}", + "$type": "color", + "$value": "#e03875", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-brand}", + "group": "branding", + "key": "{color.consul.brand}" + }, + "name": "token-color-consul-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "brand" + ] + }, + "token-color-consul-foreground": { + "key": "{color.consul.foreground}", + "$type": "color", + "$value": "#d01c5b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-500}", + "group": "branding", + "key": "{color.consul.foreground}" + }, + "name": "token-color-consul-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "foreground" + ] + }, + "token-color-consul-surface": { + "key": "{color.consul.surface}", + "$type": "color", + "$value": "#ffe9f1", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-50}", + "group": "branding", + "key": "{color.consul.surface}" + }, + "name": "token-color-consul-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "surface" + ] + }, + "token-color-consul-border": { + "key": "{color.consul.border}", + "$type": "color", + "$value": "#ffcede", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-100}", + "group": "branding", + "key": "{color.consul.border}" + }, + "name": "token-color-consul-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "border" + ] + }, + "token-color-consul-gradient-primary-start": { + "key": "{color.consul.gradient.primary.start}", + "$type": "color", + "$value": "#ff99be", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-300}", + "group": "branding", + "key": "{color.consul.gradient.primary.start}" + }, + "name": "token-color-consul-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "primary", + "start" + ] + }, + "token-color-consul-gradient-primary-stop": { + "key": "{color.consul.gradient.primary.stop}", + "$type": "color", + "$value": "#da306e", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-400}", + "group": "branding", + "key": "{color.consul.gradient.primary.stop}" + }, + "name": "token-color-consul-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "primary", + "stop" + ] + }, + "token-color-consul-gradient-faint-start": { + "key": "{color.consul.gradient.faint.start}", + "$type": "color", + "$value": "#fff9fb", + "group": "branding", + "comment": "this is the 'consul-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fff9fb", + "group": "branding", + "comment": "this is the 'consul-50' value at 25% opacity on white", + "key": "{color.consul.gradient.faint.start}" + }, + "name": "token-color-consul-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "faint", + "start" + ] + }, + "token-color-consul-gradient-faint-stop": { + "key": "{color.consul.gradient.faint.stop}", + "$type": "color", + "$value": "#ffe9f1", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-50}", + "group": "branding", + "key": "{color.consul.gradient.faint.stop}" + }, + "name": "token-color-consul-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "faint", + "stop" + ] + }, + "token-color-hcp-brand": { + "key": "{color.hcp.brand}", + "$type": "color", + "$value": "#000000", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.hcp-brand}", + "group": "branding", + "key": "{color.hcp.brand}" + }, + "name": "token-color-hcp-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "hcp", + "brand" + ] + }, + "token-color-nomad-brand": { + "key": "{color.nomad.brand}", + "$type": "color", + "$value": "#06d092", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-brand}", + "group": "branding", + "key": "{color.nomad.brand}" + }, + "name": "token-color-nomad-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "brand" + ] + }, + "token-color-nomad-foreground": { + "key": "{color.nomad.foreground}", + "$type": "color", + "$value": "#008661", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-500}", + "group": "branding", + "key": "{color.nomad.foreground}" + }, + "name": "token-color-nomad-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "foreground" + ] + }, + "token-color-nomad-surface": { + "key": "{color.nomad.surface}", + "$type": "color", + "$value": "#d3fdeb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-50}", + "group": "branding", + "key": "{color.nomad.surface}" + }, + "name": "token-color-nomad-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "surface" + ] + }, + "token-color-nomad-border": { + "key": "{color.nomad.border}", + "$type": "color", + "$value": "#bff3dd", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-100}", + "group": "branding", + "key": "{color.nomad.border}" + }, + "name": "token-color-nomad-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "border" + ] + }, + "token-color-nomad-gradient-primary-start": { + "key": "{color.nomad.gradient.primary.start}", + "$type": "color", + "$value": "#bff3dd", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-100}", + "group": "branding", + "key": "{color.nomad.gradient.primary.start}" + }, + "name": "token-color-nomad-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "primary", + "start" + ] + }, + "token-color-nomad-gradient-primary-stop": { + "key": "{color.nomad.gradient.primary.stop}", + "$type": "color", + "$value": "#60dea9", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-200}", + "group": "branding", + "key": "{color.nomad.gradient.primary.stop}" + }, + "name": "token-color-nomad-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "primary", + "stop" + ] + }, + "token-color-nomad-gradient-faint-start": { + "key": "{color.nomad.gradient.faint.start}", + "$type": "color", + "$value": "#f3fff9", + "group": "branding", + "comment": "this is the 'nomad-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#f3fff9", + "group": "branding", + "comment": "this is the 'nomad-50' value at 25% opacity on white", + "key": "{color.nomad.gradient.faint.start}" + }, + "name": "token-color-nomad-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "faint", + "start" + ] + }, + "token-color-nomad-gradient-faint-stop": { + "key": "{color.nomad.gradient.faint.stop}", + "$type": "color", + "$value": "#d3fdeb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-50}", + "group": "branding", + "key": "{color.nomad.gradient.faint.stop}" + }, + "name": "token-color-nomad-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "faint", + "stop" + ] + }, + "token-color-packer-brand": { + "key": "{color.packer.brand}", + "$type": "color", + "$value": "#02a8ef", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-brand}", + "group": "branding", + "key": "{color.packer.brand}" + }, + "name": "token-color-packer-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "brand" + ] + }, + "token-color-packer-foreground": { + "key": "{color.packer.foreground}", + "$type": "color", + "$value": "#007eb4", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-500}", + "group": "branding", + "key": "{color.packer.foreground}" + }, + "name": "token-color-packer-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "foreground" + ] + }, + "token-color-packer-surface": { + "key": "{color.packer.surface}", + "$type": "color", + "$value": "#d4f2ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-50}", + "group": "branding", + "key": "{color.packer.surface}" + }, + "name": "token-color-packer-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "surface" + ] + }, + "token-color-packer-border": { + "key": "{color.packer.border}", + "$type": "color", + "$value": "#b4e4ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-100}", + "group": "branding", + "key": "{color.packer.border}" + }, + "name": "token-color-packer-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "border" + ] + }, + "token-color-packer-gradient-primary-start": { + "key": "{color.packer.gradient.primary.start}", + "$type": "color", + "$value": "#b4e4ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-100}", + "group": "branding", + "key": "{color.packer.gradient.primary.start}" + }, + "name": "token-color-packer-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "primary", + "start" + ] + }, + "token-color-packer-gradient-primary-stop": { + "key": "{color.packer.gradient.primary.stop}", + "$type": "color", + "$value": "#63d0ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-200}", + "group": "branding", + "key": "{color.packer.gradient.primary.stop}" + }, + "name": "token-color-packer-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "primary", + "stop" + ] + }, + "token-color-packer-gradient-faint-start": { + "key": "{color.packer.gradient.faint.start}", + "$type": "color", + "$value": "#f3fcff", + "group": "branding", + "comment": "this is the 'packer-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#F3FCFF", + "group": "branding", + "comment": "this is the 'packer-50' value at 25% opacity on white", + "key": "{color.packer.gradient.faint.start}" + }, + "name": "token-color-packer-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "faint", + "start" + ] + }, + "token-color-packer-gradient-faint-stop": { + "key": "{color.packer.gradient.faint.stop}", + "$type": "color", + "$value": "#d4f2ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-50}", + "group": "branding", + "key": "{color.packer.gradient.faint.stop}" + }, + "name": "token-color-packer-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "faint", + "stop" + ] + }, + "token-color-terraform-brand": { + "key": "{color.terraform.brand}", + "$type": "color", + "$value": "#7b42bc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-brand}", + "group": "branding", + "key": "{color.terraform.brand}" + }, + "name": "token-color-terraform-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "brand" + ] + }, + "token-color-terraform-brand-on-dark": { + "key": "{color.terraform.brand-on-dark}", + "$type": "color", + "$value": "#a067da", + "group": "branding", + "comment": "this is an alternative brand color meant to be used on dark backgrounds", + "original": { + "$type": "color", + "$value": "#a067da", + "group": "branding", + "comment": "this is an alternative brand color meant to be used on dark backgrounds", + "key": "{color.terraform.brand-on-dark}" + }, + "name": "token-color-terraform-brand-on-dark", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "brand-on-dark" + ] + }, + "token-color-terraform-foreground": { + "key": "{color.terraform.foreground}", + "$type": "color", + "$value": "#773cb4", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-500}", + "group": "branding", + "key": "{color.terraform.foreground}" + }, + "name": "token-color-terraform-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "foreground" + ] + }, + "token-color-terraform-surface": { + "key": "{color.terraform.surface}", + "$type": "color", + "$value": "#f4ecff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-50}", + "group": "branding", + "key": "{color.terraform.surface}" + }, + "name": "token-color-terraform-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "surface" + ] + }, + "token-color-terraform-border": { + "key": "{color.terraform.border}", + "$type": "color", + "$value": "#ebdbfc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-100}", + "group": "branding", + "key": "{color.terraform.border}" + }, + "name": "token-color-terraform-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "border" + ] + }, + "token-color-terraform-gradient-primary-start": { + "key": "{color.terraform.gradient.primary.start}", + "$type": "color", + "$value": "#bb8deb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-300}", + "group": "branding", + "key": "{color.terraform.gradient.primary.start}" + }, + "name": "token-color-terraform-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "primary", + "start" + ] + }, + "token-color-terraform-gradient-primary-stop": { + "key": "{color.terraform.gradient.primary.stop}", + "$type": "color", + "$value": "#844fba", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-400}", + "group": "branding", + "key": "{color.terraform.gradient.primary.stop}" + }, + "name": "token-color-terraform-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "primary", + "stop" + ] + }, + "token-color-terraform-gradient-faint-start": { + "key": "{color.terraform.gradient.faint.start}", + "$type": "color", + "$value": "#fcfaff", + "group": "branding", + "comment": "this is the 'terraform-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fcfaff", + "group": "branding", + "comment": "this is the 'terraform-50' value at 25% opacity on white", + "key": "{color.terraform.gradient.faint.start}" + }, + "name": "token-color-terraform-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "faint", + "start" + ] + }, + "token-color-terraform-gradient-faint-stop": { + "key": "{color.terraform.gradient.faint.stop}", + "$type": "color", + "$value": "#f4ecff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-50}", + "group": "branding", + "key": "{color.terraform.gradient.faint.stop}" + }, + "name": "token-color-terraform-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "faint", + "stop" + ] + }, + "token-color-vagrant-brand": { + "key": "{color.vagrant.brand}", + "$type": "color", + "$value": "#1868f2", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-brand}", + "group": "branding", + "key": "{color.vagrant.brand}" + }, + "name": "token-color-vagrant-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "brand" + ] + }, + "token-color-vagrant-foreground": { + "key": "{color.vagrant.foreground}", + "$type": "color", + "$value": "#1c61d8", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-500}", + "group": "branding", + "key": "{color.vagrant.foreground}" + }, + "name": "token-color-vagrant-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "foreground" + ] + }, + "token-color-vagrant-surface": { + "key": "{color.vagrant.surface}", + "$type": "color", + "$value": "#d6ebff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-50}", + "group": "branding", + "key": "{color.vagrant.surface}" + }, + "name": "token-color-vagrant-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "surface" + ] + }, + "token-color-vagrant-border": { + "key": "{color.vagrant.border}", + "$type": "color", + "$value": "#c7dbfc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-100}", + "group": "branding", + "key": "{color.vagrant.border}" + }, + "name": "token-color-vagrant-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "border" + ] + }, + "token-color-vagrant-gradient-primary-start": { + "key": "{color.vagrant.gradient.primary.start}", + "$type": "color", + "$value": "#639cff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-300}", + "group": "branding", + "key": "{color.vagrant.gradient.primary.start}" + }, + "name": "token-color-vagrant-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "primary", + "start" + ] + }, + "token-color-vagrant-gradient-primary-stop": { + "key": "{color.vagrant.gradient.primary.stop}", + "$type": "color", + "$value": "#2e71e5", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-400}", + "group": "branding", + "key": "{color.vagrant.gradient.primary.stop}" + }, + "name": "token-color-vagrant-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "primary", + "stop" + ] + }, + "token-color-vagrant-gradient-faint-start": { + "key": "{color.vagrant.gradient.faint.start}", + "$type": "color", + "$value": "#f4faff", + "group": "branding", + "comment": "this is the 'vagrant-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#f4faff", + "group": "branding", + "comment": "this is the 'vagrant-50' value at 25% opacity on white", + "key": "{color.vagrant.gradient.faint.start}" + }, + "name": "token-color-vagrant-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "faint", + "start" + ] + }, + "token-color-vagrant-gradient-faint-stop": { + "key": "{color.vagrant.gradient.faint.stop}", + "$type": "color", + "$value": "#d6ebff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-50}", + "group": "branding", + "key": "{color.vagrant.gradient.faint.stop}" + }, + "name": "token-color-vagrant-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "faint", + "stop" + ] + }, + "token-color-vault-radar-brand": { + "key": "{color.vault-radar.brand}", + "$type": "color", + "$value": "#ffcf25", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-brand}", + "group": "branding", + "key": "{color.vault-radar.brand}" + }, + "name": "token-color-vault-radar-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "brand" + ] + }, + "token-color-vault-radar-brand-alt": { + "key": "{color.vault-radar.brand-alt}", + "$type": "color", + "$value": "#000000", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work", + "original": { + "$type": "color", + "$value": "#000", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work", + "key": "{color.vault-radar.brand-alt}" + }, + "name": "token-color-vault-radar-brand-alt", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "brand-alt" + ] + }, + "token-color-vault-radar-foreground": { + "key": "{color.vault-radar.foreground}", + "$type": "color", + "$value": "#9a6f00", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-500}", + "group": "branding", + "key": "{color.vault-radar.foreground}" + }, + "name": "token-color-vault-radar-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "foreground" + ] + }, + "token-color-vault-radar-surface": { + "key": "{color.vault-radar.surface}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-50}", + "group": "branding", + "key": "{color.vault-radar.surface}" + }, + "name": "token-color-vault-radar-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "surface" + ] + }, + "token-color-vault-radar-border": { + "key": "{color.vault-radar.border}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-100}", + "group": "branding", + "key": "{color.vault-radar.border}" + }, + "name": "token-color-vault-radar-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "border" + ] + }, + "token-color-vault-radar-gradient-primary-start": { + "key": "{color.vault-radar.gradient.primary.start}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-100}", + "group": "branding", + "key": "{color.vault-radar.gradient.primary.start}" + }, + "name": "token-color-vault-radar-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "primary", + "start" + ] + }, + "token-color-vault-radar-gradient-primary-stop": { + "key": "{color.vault-radar.gradient.primary.stop}", + "$type": "color", + "$value": "#ffe543", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-200}", + "group": "branding", + "key": "{color.vault-radar.gradient.primary.stop}" + }, + "name": "token-color-vault-radar-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "primary", + "stop" + ] + }, + "token-color-vault-radar-gradient-faint-start": { + "key": "{color.vault-radar.gradient.faint.start}", + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-radar-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-radar-50' value at 25% opacity on white", + "key": "{color.vault-radar.gradient.faint.start}" + }, + "name": "token-color-vault-radar-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "faint", + "start" + ] + }, + "token-color-vault-radar-gradient-faint-stop": { + "key": "{color.vault-radar.gradient.faint.stop}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-50}", + "group": "branding", + "key": "{color.vault-radar.gradient.faint.stop}" + }, + "name": "token-color-vault-radar-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "faint", + "stop" + ] + }, + "token-color-vault-secrets-brand": { + "key": "{color.vault-secrets.brand}", + "$type": "color", + "$value": "#ffcf25", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-brand}", + "group": "branding", + "key": "{color.vault-secrets.brand}" + }, + "name": "token-color-vault-secrets-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "brand" + ] + }, + "token-color-vault-secrets-brand-alt": { + "key": "{color.vault-secrets.brand-alt}", + "group": "branding", + "$type": "color", + "$value": "#000000", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work", + "original": { + "group": "branding", + "$type": "color", + "$value": "#000", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work", + "key": "{color.vault-secrets.brand-alt}" + }, + "name": "token-color-vault-secrets-brand-alt", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "brand-alt" + ] + }, + "token-color-vault-secrets-foreground": { + "key": "{color.vault-secrets.foreground}", + "$type": "color", + "$value": "#9a6f00", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-500}", + "group": "branding", + "key": "{color.vault-secrets.foreground}" + }, + "name": "token-color-vault-secrets-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "foreground" + ] + }, + "token-color-vault-secrets-surface": { + "key": "{color.vault-secrets.surface}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-50}", + "group": "branding", + "key": "{color.vault-secrets.surface}" + }, + "name": "token-color-vault-secrets-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "surface" + ] + }, + "token-color-vault-secrets-border": { + "key": "{color.vault-secrets.border}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-100}", + "group": "branding", + "key": "{color.vault-secrets.border}" + }, + "name": "token-color-vault-secrets-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "border" + ] + }, + "token-color-vault-secrets-gradient-primary-start": { + "key": "{color.vault-secrets.gradient.primary.start}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-100}", + "group": "branding", + "key": "{color.vault-secrets.gradient.primary.start}" + }, + "name": "token-color-vault-secrets-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "primary", + "start" + ] + }, + "token-color-vault-secrets-gradient-primary-stop": { + "key": "{color.vault-secrets.gradient.primary.stop}", + "$type": "color", + "$value": "#ffe543", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-200}", + "group": "branding", + "key": "{color.vault-secrets.gradient.primary.stop}" + }, + "name": "token-color-vault-secrets-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "primary", + "stop" + ] + }, + "token-color-vault-secrets-gradient-faint-start": { + "key": "{color.vault-secrets.gradient.faint.start}", + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-secrets-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-secrets-50' value at 25% opacity on white", + "key": "{color.vault-secrets.gradient.faint.start}" + }, + "name": "token-color-vault-secrets-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "faint", + "start" + ] + }, + "token-color-vault-secrets-gradient-faint-stop": { + "key": "{color.vault-secrets.gradient.faint.stop}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-50}", + "group": "branding", + "key": "{color.vault-secrets.gradient.faint.stop}" + }, + "name": "token-color-vault-secrets-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "faint", + "stop" + ] + }, + "token-color-vault-brand": { + "key": "{color.vault.brand}", + "$type": "color", + "$value": "#ffcf25", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-brand}", + "group": "branding", + "key": "{color.vault.brand}" + }, + "name": "token-color-vault-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "brand" + ] + }, + "token-color-vault-brand-alt": { + "key": "{color.vault.brand-alt}", + "$type": "color", + "$value": "#000000", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work", + "original": { + "$type": "color", + "$value": "#000", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work", + "key": "{color.vault.brand-alt}" + }, + "name": "token-color-vault-brand-alt", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "brand-alt" + ] + }, + "token-color-vault-foreground": { + "key": "{color.vault.foreground}", + "$type": "color", + "$value": "#9a6f00", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-500}", + "group": "branding", + "key": "{color.vault.foreground}" + }, + "name": "token-color-vault-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "foreground" + ] + }, + "token-color-vault-surface": { + "key": "{color.vault.surface}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-50}", + "group": "branding", + "key": "{color.vault.surface}" + }, + "name": "token-color-vault-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "surface" + ] + }, + "token-color-vault-border": { + "key": "{color.vault.border}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-100}", + "group": "branding", + "key": "{color.vault.border}" + }, + "name": "token-color-vault-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "border" + ] + }, + "token-color-vault-gradient-primary-start": { + "key": "{color.vault.gradient.primary.start}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-100}", + "group": "branding", + "key": "{color.vault.gradient.primary.start}" + }, + "name": "token-color-vault-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "primary", + "start" + ] + }, + "token-color-vault-gradient-primary-stop": { + "key": "{color.vault.gradient.primary.stop}", + "$type": "color", + "$value": "#ffe543", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-200}", + "group": "branding", + "key": "{color.vault.gradient.primary.stop}" + }, + "name": "token-color-vault-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "primary", + "stop" + ] + }, + "token-color-vault-gradient-faint-start": { + "key": "{color.vault.gradient.faint.start}", + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-50' value at 25% opacity on white", + "key": "{color.vault.gradient.faint.start}" + }, + "name": "token-color-vault-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "faint", + "start" + ] + }, + "token-color-vault-gradient-faint-stop": { + "key": "{color.vault.gradient.faint.stop}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-50}", + "group": "branding", + "key": "{color.vault.gradient.faint.stop}" + }, + "name": "token-color-vault-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "faint", + "stop" + ] + }, + "token-color-waypoint-brand": { + "key": "{color.waypoint.brand}", + "$type": "color", + "$value": "#14c6cb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-brand}", + "group": "branding", + "key": "{color.waypoint.brand}" + }, + "name": "token-color-waypoint-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "brand" + ] + }, + "token-color-waypoint-foreground": { + "key": "{color.waypoint.foreground}", + "$type": "color", + "$value": "#008196", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-500}", + "group": "branding", + "key": "{color.waypoint.foreground}" + }, + "name": "token-color-waypoint-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "foreground" + ] + }, + "token-color-waypoint-surface": { + "key": "{color.waypoint.surface}", + "$type": "color", + "$value": "#e0fcff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-50}", + "group": "branding", + "key": "{color.waypoint.surface}" + }, + "name": "token-color-waypoint-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "surface" + ] + }, + "token-color-waypoint-border": { + "key": "{color.waypoint.border}", + "$type": "color", + "$value": "#cbf1f3", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-100}", + "group": "branding", + "key": "{color.waypoint.border}" + }, + "name": "token-color-waypoint-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "border" + ] + }, + "token-color-waypoint-gradient-primary-start": { + "key": "{color.waypoint.gradient.primary.start}", + "$type": "color", + "$value": "#cbf1f3", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-100}", + "group": "branding", + "key": "{color.waypoint.gradient.primary.start}" + }, + "name": "token-color-waypoint-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "primary", + "start" + ] + }, + "token-color-waypoint-gradient-primary-stop": { + "key": "{color.waypoint.gradient.primary.stop}", + "$type": "color", + "$value": "#62d4dc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-200}", + "group": "branding", + "key": "{color.waypoint.gradient.primary.stop}" + }, + "name": "token-color-waypoint-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "primary", + "stop" + ] + }, + "token-color-waypoint-gradient-faint-start": { + "key": "{color.waypoint.gradient.faint.start}", + "$type": "color", + "$value": "#f6feff", + "group": "branding", + "comment": "this is the 'waypoint-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#f6feff", + "group": "branding", + "comment": "this is the 'waypoint-50' value at 25% opacity on white", + "key": "{color.waypoint.gradient.faint.start}" + }, + "name": "token-color-waypoint-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "faint", + "start" + ] + }, + "token-color-waypoint-gradient-faint-stop": { + "key": "{color.waypoint.gradient.faint.stop}", + "$type": "color", + "$value": "#e0fcff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-50}", + "group": "branding", + "key": "{color.waypoint.gradient.faint.stop}" + }, + "name": "token-color-waypoint-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "faint", + "stop" + ] + }, + "token-elevation-inset-box-shadow": { + "key": "{elevation.inset.box-shadow}", + "$value": "none", + "$modes": { + "default": "inset 0px 1px 2px 1px #5252521a", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.inset.box-shadow-01}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.inset.box-shadow}" + }, + "name": "token-elevation-inset-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "inset", + "box-shadow" + ] + }, + "token-elevation-low-box-shadow": { + "key": "{elevation.low.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 1px 1px 0px #5252520d, 0px 2px 2px 0px #5252520d", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.low.box-shadow-01}, {elevation.low.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.low.box-shadow}" + }, + "name": "token-elevation-low-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "low", + "box-shadow" + ] + }, + "token-elevation-mid-box-shadow": { + "key": "{elevation.mid.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #5252521a, 0px 8px 16px -10px #52525233", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.mid.box-shadow-01}, {elevation.mid.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.mid.box-shadow}" + }, + "name": "token-elevation-mid-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "mid", + "box-shadow" + ] + }, + "token-elevation-high-box-shadow": { + "key": "{elevation.high.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #52525226, 0px 16px 16px -10px #52525233", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.high.box-shadow-01}, {elevation.high.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.high.box-shadow}" + }, + "name": "token-elevation-high-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "high", + "box-shadow" + ] + }, + "token-elevation-higher-box-shadow": { + "key": "{elevation.higher.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #5252521a, 0px 12px 28px 0px #52525240", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.higher.box-shadow-01}, {elevation.higher.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.higher.box-shadow}" + }, + "name": "token-elevation-higher-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "higher", + "box-shadow" + ] + }, + "token-elevation-overlay-box-shadow": { + "key": "{elevation.overlay.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #39393940, 0px 12px 24px 0px #39393959", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.overlay.box-shadow-01}, {elevation.overlay.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.overlay.box-shadow}" + }, + "name": "token-elevation-overlay-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "overlay", + "box-shadow" + ] + }, + "token-surface-inset-box-shadow": { + "key": "{surface.inset.box-shadow}", + "$value": "none", + "$modes": { + "default": "inset 0 0 0 1px #5252524d, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.inset.box-shadow-border}, {elevation.inset.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.inset.box-shadow}" + }, + "name": "token-surface-inset-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "inset", + "box-shadow" + ] + }, + "token-surface-base-box-shadow": { + "key": "{surface.base.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525233", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.base.box-shadow-border}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.base.box-shadow}" + }, + "name": "token-surface-base-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "base", + "box-shadow" + ] + }, + "token-surface-low-box-shadow": { + "key": "{surface.low.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525226, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.low.box-shadow-border}, {elevation.low.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.low.box-shadow}" + }, + "name": "token-surface-low-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "low", + "box-shadow" + ] + }, + "token-surface-mid-box-shadow": { + "key": "{surface.mid.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525226, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.mid.box-shadow-border}, {elevation.mid.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.mid.box-shadow}" + }, + "name": "token-surface-mid-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "mid", + "box-shadow" + ] + }, + "token-surface-high-box-shadow": { + "key": "{surface.high.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525240, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.high.box-shadow-border}, {elevation.high.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.high.box-shadow}" + }, + "name": "token-surface-high-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "high", + "box-shadow" + ] + }, + "token-surface-higher-box-shadow": { + "key": "{surface.higher.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525233, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.higher.box-shadow-border}, {elevation.higher.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.higher.box-shadow}" + }, + "name": "token-surface-higher-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "higher", + "box-shadow" + ] + }, + "token-surface-overlay-box-shadow": { + "key": "{surface.overlay.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #39393940, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.overlay.box-shadow-border}, {elevation.overlay.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.overlay.box-shadow}" + }, + "name": "token-surface-overlay-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "overlay", + "box-shadow" + ] + }, + "token-focus-ring-action-box-shadow": { + "key": "{focus-ring.action.box-shadow}", + "$value": "inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe", + "original": { + "$value": "{focus-ring.action.internal-box-shadow}, {focus-ring.action.external-box-shadow}", + "key": "{focus-ring.action.box-shadow}" + }, + "name": "token-focus-ring-action-box-shadow", + "attributes": { + "category": "focus-ring" + }, + "path": [ + "focus-ring", + "action", + "box-shadow" + ] + }, + "token-focus-ring-critical-box-shadow": { + "key": "{focus-ring.critical.box-shadow}", + "$value": "inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe", + "original": { + "$value": "{focus-ring.critical.internal-box-shadow}, {focus-ring.critical.external-box-shadow}", + "key": "{focus-ring.critical.box-shadow}" + }, + "name": "token-focus-ring-critical-box-shadow", + "attributes": { + "category": "focus-ring" + }, + "path": [ + "focus-ring", + "critical", + "box-shadow" + ] + }, + "token-app-footer-focus-color-action-internal": { + "key": "{app-footer.focus.color.action.internal}", + "$type": "color", + "$value": "#0f62fe", + "$modes": { + "default": "var(--token-color-focus-action-internal)", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.focus}", + "$modes": { + "default": "var(--token-color-focus-action-internal)", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{app-footer.focus.color.action.internal}" + }, + "name": "token-app-footer-focus-color-action-internal", + "attributes": { + "category": "app-footer" + }, + "path": [ + "app-footer", + "focus", + "color", + "action", + "internal" + ] + }, + "token-app-header-height": { + "key": "{app-header.height}", + "$type": "dimension", + "$value": "60px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "60", + "unit": "px", + "key": "{app-header.height}" + }, + "name": "token-app-header-height", + "attributes": { + "category": "app-header" + }, + "path": [ + "app-header", + "height" + ] + }, + "token-app-header-home-link-size": { + "key": "{app-header.home-link.size}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{app-header.home-link.size}" + }, + "name": "token-app-header-home-link-size", + "attributes": { + "category": "app-header" + }, + "path": [ + "app-header", + "home-link", + "size" + ] + }, + "token-app-header-logo-size": { + "key": "{app-header.logo.size}", + "$type": "dimension", + "$value": "28px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "28", + "unit": "px", + "key": "{app-header.logo.size}" + }, + "name": "token-app-header-logo-size", + "attributes": { + "category": "app-header" + }, + "path": [ + "app-header", + "logo", + "size" + ] + }, + "token-app-side-nav-wrapper-border-width": { + "key": "{app-side-nav.wrapper.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{app-side-nav.wrapper.border.width}" + }, + "name": "token-app-side-nav-wrapper-border-width", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "border", + "width" + ] + }, + "token-app-side-nav-wrapper-border-color": { + "key": "{app-side-nav.wrapper.border.color}", + "$type": "color", + "$value": "var(--token-color-palette-neutral-200)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-palette-neutral-200)", + "group": "components", + "key": "{app-side-nav.wrapper.border.color}" + }, + "name": "token-app-side-nav-wrapper-border-color", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "border", + "color" + ] + }, + "token-app-side-nav-wrapper-padding-horizontal": { + "key": "{app-side-nav.wrapper.padding.horizontal}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.horizontal}" + }, + "name": "token-app-side-nav-wrapper-padding-horizontal", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "horizontal" + ] + }, + "token-app-side-nav-wrapper-padding-vertical": { + "key": "{app-side-nav.wrapper.padding.vertical}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.vertical}" + }, + "name": "token-app-side-nav-wrapper-padding-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "vertical" + ] + }, + "token-app-side-nav-wrapper-padding-horizontal-minimized": { + "key": "{app-side-nav.wrapper.padding.horizontal-minimized}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.horizontal-minimized}" + }, + "name": "token-app-side-nav-wrapper-padding-horizontal-minimized", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "horizontal-minimized" + ] + }, + "token-app-side-nav-wrapper-padding-vertical-minimized": { + "key": "{app-side-nav.wrapper.padding.vertical-minimized}", + "$type": "dimension", + "$value": "22px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "22", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.vertical-minimized}" + }, + "name": "token-app-side-nav-wrapper-padding-vertical-minimized", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "vertical-minimized" + ] + }, + "token-app-side-nav-toggle-button-border-radius": { + "key": "{app-side-nav.toggle-button.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{app-side-nav.toggle-button.border.radius}" + }, + "name": "token-app-side-nav-toggle-button-border-radius", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "toggle-button", + "border", + "radius" + ] + }, + "token-app-side-nav-header-home-link-padding": { + "key": "{app-side-nav.header.home-link.padding}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{app-side-nav.header.home-link.padding}" + }, + "name": "token-app-side-nav-header-home-link-padding", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "home-link", + "padding" + ] + }, + "token-app-side-nav-header-home-link-logo-size": { + "key": "{app-side-nav.header.home-link.logo-size}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{app-side-nav.header.home-link.logo-size}" + }, + "name": "token-app-side-nav-header-home-link-logo-size", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "home-link", + "logo-size" + ] + }, + "token-app-side-nav-header-home-link-logo-size-minimized": { + "key": "{app-side-nav.header.home-link.logo-size-minimized}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{app-side-nav.header.home-link.logo-size-minimized}" + }, + "name": "token-app-side-nav-header-home-link-logo-size-minimized", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "home-link", + "logo-size-minimized" + ] + }, + "token-app-side-nav-header-actions-spacing": { + "key": "{app-side-nav.header.actions.spacing}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.header.actions.spacing}" + }, + "name": "token-app-side-nav-header-actions-spacing", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "actions", + "spacing" + ] + }, + "token-app-side-nav-body-list-margin-vertical": { + "key": "{app-side-nav.body.list.margin-vertical}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{app-side-nav.body.list.margin-vertical}" + }, + "name": "token-app-side-nav-body-list-margin-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list", + "margin-vertical" + ] + }, + "token-app-side-nav-body-list-item-height": { + "key": "{app-side-nav.body.list-item.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{app-side-nav.body.list-item.height}" + }, + "name": "token-app-side-nav-body-list-item-height", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "height" + ] + }, + "token-app-side-nav-body-list-item-padding-horizontal": { + "key": "{app-side-nav.body.list-item.padding.horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.body.list-item.padding.horizontal}" + }, + "name": "token-app-side-nav-body-list-item-padding-horizontal", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "padding", + "horizontal" + ] + }, + "token-app-side-nav-body-list-item-padding-vertical": { + "key": "{app-side-nav.body.list-item.padding.vertical}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{app-side-nav.body.list-item.padding.vertical}" + }, + "name": "token-app-side-nav-body-list-item-padding-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "padding", + "vertical" + ] + }, + "token-app-side-nav-body-list-item-spacing-vertical": { + "key": "{app-side-nav.body.list-item.spacing-vertical}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{app-side-nav.body.list-item.spacing-vertical}" + }, + "name": "token-app-side-nav-body-list-item-spacing-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "spacing-vertical" + ] + }, + "token-app-side-nav-body-list-item-content-spacing-horizontal": { + "key": "{app-side-nav.body.list-item.content-spacing-horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.body.list-item.content-spacing-horizontal}" + }, + "name": "token-app-side-nav-body-list-item-content-spacing-horizontal", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "content-spacing-horizontal" + ] + }, + "token-app-side-nav-body-list-item-border-radius": { + "key": "{app-side-nav.body.list-item.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{app-side-nav.body.list-item.border-radius}" + }, + "name": "token-app-side-nav-body-list-item-border-radius", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "border-radius" + ] + }, + "token-app-side-nav-color-foreground-primary": { + "key": "{app-side-nav.color.foreground.primary}", + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "key": "{app-side-nav.color.foreground.primary}" + }, + "name": "token-app-side-nav-color-foreground-primary", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "foreground", + "primary" + ] + }, + "token-app-side-nav-color-foreground-strong": { + "key": "{app-side-nav.color.foreground.strong}", + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "key": "{app-side-nav.color.foreground.strong}" + }, + "name": "token-app-side-nav-color-foreground-strong", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "foreground", + "strong" + ] + }, + "token-app-side-nav-color-foreground-faint": { + "key": "{app-side-nav.color.foreground.faint}", + "$type": "color", + "$value": "var(--token-color-foreground-faint)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-foreground-faint)", + "group": "components", + "key": "{app-side-nav.color.foreground.faint}" + }, + "name": "token-app-side-nav-color-foreground-faint", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "foreground", + "faint" + ] + }, + "token-app-side-nav-color-surface-primary": { + "key": "{app-side-nav.color.surface.primary}", + "$type": "color", + "$value": "var(--token-color-surface-faint)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-surface-faint)", + "group": "components", + "key": "{app-side-nav.color.surface.primary}" + }, + "name": "token-app-side-nav-color-surface-primary", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "surface", + "primary" + ] + }, + "token-app-side-nav-color-surface-interactive-hover": { + "key": "{app-side-nav.color.surface.interactive-hover}", + "$type": "color", + "$value": "var(--token-color-surface-interactive-hover)", + "group": "semantic", + "original": { + "$type": "color", + "$value": "var(--token-color-surface-interactive-hover)", + "group": "semantic", + "key": "{app-side-nav.color.surface.interactive-hover}" + }, + "name": "token-app-side-nav-color-surface-interactive-hover", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "surface", + "interactive-hover" + ] + }, + "token-app-side-nav-color-surface-interactive-active": { + "key": "{app-side-nav.color.surface.interactive-active}", + "$type": "color", + "$value": "var(--token-color-palette-neutral-300)", + "group": "semantic", + "original": { + "$type": "color", + "$value": "var(--token-color-palette-neutral-300)", + "group": "semantic", + "key": "{app-side-nav.color.surface.interactive-active}" + }, + "name": "token-app-side-nav-color-surface-interactive-active", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "surface", + "interactive-active" + ] + }, + "token-badge-count-padding-horizontal-small": { + "key": "{badge-count.padding.horizontal.small}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge-count.padding.horizontal.small}" + }, + "name": "token-badge-count-padding-horizontal-small", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "small" + ] + }, + "token-badge-count-padding-horizontal-medium": { + "key": "{badge-count.padding.horizontal.medium}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge-count.padding.horizontal.medium}" + }, + "name": "token-badge-count-padding-horizontal-medium", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "medium" + ] + }, + "token-badge-count-padding-horizontal-large": { + "key": "{badge-count.padding.horizontal.large}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge-count.padding.horizontal.large}" + }, + "name": "token-badge-count-padding-horizontal-large", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "large" + ] + }, + "token-badge-height-small": { + "key": "{badge.height.small}", + "$type": "dimension", + "$value": "18px", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "18", + "cds-g10": "18", + "cds-g90": "18", + "cds-g100": "18" + }, + "original": { + "$type": "dimension", + "$value": "18", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "18", + "cds-g10": "18", + "cds-g90": "18", + "cds-g100": "18" + }, + "key": "{badge.height.small}" + }, + "name": "token-badge-height-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "small" + ] + }, + "token-badge-height-medium": { + "key": "{badge.height.medium}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{badge.height.medium}" + }, + "name": "token-badge-height-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "medium" + ] + }, + "token-badge-height-large": { + "key": "{badge.height.large}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{badge.height.large}" + }, + "name": "token-badge-height-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "large" + ] + }, + "token-badge-padding-horizontal-small": { + "key": "{badge.padding.horizontal.small}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge.padding.horizontal.small}" + }, + "name": "token-badge-padding-horizontal-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "small" + ] + }, + "token-badge-padding-horizontal-medium": { + "key": "{badge.padding.horizontal.medium}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge.padding.horizontal.medium}" + }, + "name": "token-badge-padding-horizontal-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "medium" + ] + }, + "token-badge-padding-horizontal-large": { + "key": "{badge.padding.horizontal.large}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.padding.horizontal.large}" + }, + "name": "token-badge-padding-horizontal-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "large" + ] + }, + "token-badge-padding-vertical-small": { + "key": "{badge.padding.vertical.small}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "$modes": { + "default": "2", + "cds-g0": "1", + "cds-g10": "1", + "cds-g90": "1", + "cds-g100": "1" + }, + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "$modes": { + "default": "2", + "cds-g0": "1", + "cds-g10": "1", + "cds-g90": "1", + "cds-g100": "1" + }, + "key": "{badge.padding.vertical.small}" + }, + "name": "token-badge-padding-vertical-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "small" + ] + }, + "token-badge-padding-vertical-medium": { + "key": "{badge.padding.vertical.medium}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{badge.padding.vertical.medium}" + }, + "name": "token-badge-padding-vertical-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "medium" + ] + }, + "token-badge-padding-vertical-large": { + "key": "{badge.padding.vertical.large}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{badge.padding.vertical.large}" + }, + "name": "token-badge-padding-vertical-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "large" + ] + }, + "token-badge-gap-small": { + "key": "{badge.gap.small}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.small}" + }, + "name": "token-badge-gap-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "small" + ] + }, + "token-badge-gap-medium": { + "key": "{badge.gap.medium}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.medium}" + }, + "name": "token-badge-gap-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "medium" + ] + }, + "token-badge-gap-large": { + "key": "{badge.gap.large}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.large}" + }, + "name": "token-badge-gap-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "large" + ] + }, + "token-badge-typography-font-size-small": { + "key": "{badge.typography.font-size.small}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "12", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.small}" + }, + "name": "token-badge-typography-font-size-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "small" + ] + }, + "token-badge-typography-font-size-medium": { + "key": "{badge.typography.font-size.medium}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "12", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.medium}" + }, + "name": "token-badge-typography-font-size-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "medium" + ] + }, + "token-badge-typography-font-size-large": { + "key": "{badge.typography.font-size.large}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "12", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.large}" + }, + "name": "token-badge-typography-font-size-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "large" + ] + }, + "token-badge-typography-line-height-small": { + "key": "{badge.typography.line-height.small}", + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "original": { + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "key": "{badge.typography.line-height.small}" + }, + "name": "token-badge-typography-line-height-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "small" + ] + }, + "token-badge-typography-line-height-medium": { + "key": "{badge.typography.line-height.medium}", + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "original": { + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "key": "{badge.typography.line-height.medium}" + }, + "name": "token-badge-typography-line-height-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "medium" + ] + }, + "token-badge-typography-line-height-large": { + "key": "{badge.typography.line-height.large}", + "$type": "number", + "$value": 1, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1, + "cds-g10": 1, + "cds-g90": 1, + "cds-g100": 1 + }, + "original": { + "$type": "number", + "$value": 1, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1, + "cds-g10": 1, + "cds-g90": 1, + "cds-g100": 1 + }, + "key": "{badge.typography.line-height.large}" + }, + "name": "token-badge-typography-line-height-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "large" + ] + }, + "token-badge-foreground-color-neutral-filled": { + "key": "{badge.foreground.color.neutral.filled}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g10}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral.filled}" + }, + "name": "token-badge-foreground-color-neutral-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "filled" + ] + }, + "token-badge-foreground-color-neutral-inverted": { + "key": "{badge.foreground.color.neutral.inverted}", + "$type": "color", + "$value": "#e0e0e0", + "$modes": { + "default": "#ffffff", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.20}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.color.gray.20}", + "cds-g10": "{carbon.color.gray.20}", + "cds-g90": "{carbon.color.gray.100}", + "cds-g100": "{carbon.color.gray.100}" + }, + "key": "{badge.foreground.color.neutral.inverted}" + }, + "name": "token-badge-foreground-color-neutral-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "inverted" + ] + }, + "token-badge-foreground-color-neutral-outlined": { + "key": "{badge.foreground.color.neutral.outlined}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g10}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral.outlined}" + }, + "name": "token-badge-foreground-color-neutral-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "outlined" + ] + }, + "token-badge-foreground-color-neutral-dark-mode-filled": { + "key": "{badge.foreground.color.neutral-dark-mode.filled}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.neutral-dark-mode.filled}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "filled" + ] + }, + "token-badge-foreground-color-neutral-dark-mode-inverted": { + "key": "{badge.foreground.color.neutral-dark-mode.inverted}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g10}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral-dark-mode.inverted}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "inverted" + ] + }, + "token-badge-foreground-color-neutral-dark-mode-outlined": { + "key": "{badge.foreground.color.neutral-dark-mode.outlined}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "comments": { + "cds": "In Figma the `cds` value uses a token `Tag/HighContrast/TagColor` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "comments": { + "cds": "In Figma the `cds` value uses a token `Tag/HighContrast/TagColor` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.neutral-dark-mode.outlined}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "outlined" + ] + }, + "token-badge-foreground-color-highlight-filled": { + "key": "{badge.foreground.color.highlight.filled}", + "$type": "color", + "$value": "#6929c4", + "comment": "we don't use `highlight-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#6929c4", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorPurple.g10}", + "comment": "we don't use `highlight-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.purple-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorPurple.g100}" + }, + "key": "{badge.foreground.color.highlight.filled}" + }, + "name": "token-badge-foreground-color-highlight-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "filled" + ] + }, + "token-badge-foreground-color-highlight-inverted": { + "key": "{badge.foreground.color.highlight.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.highlight.inverted}" + }, + "name": "token-badge-foreground-color-highlight-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "inverted" + ] + }, + "token-badge-foreground-color-highlight-outlined": { + "key": "{badge.foreground.color.highlight.outlined}", + "$type": "color", + "$value": "#6929c4", + "$modes": { + "default": "#8a3ffc", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorPurple.g10}", + "$modes": { + "default": "{color.foreground.highlight}", + "cds-g0": "{carbon.themes.tagTokens.tagColorPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorPurple.g100}" + }, + "key": "{badge.foreground.color.highlight.outlined}" + }, + "name": "token-badge-foreground-color-highlight-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "outlined" + ] + }, + "token-badge-foreground-color-success-filled": { + "key": "{badge.foreground.color.success.filled}", + "$type": "color", + "$value": "#0e6027", + "comment": "we don't use `success-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#0e6027", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "comment": "we don't use `success-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.green-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.foreground.color.success.filled}" + }, + "name": "token-badge-foreground-color-success-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "filled" + ] + }, + "token-badge-foreground-color-success-inverted": { + "key": "{badge.foreground.color.success.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.success.inverted}" + }, + "name": "token-badge-foreground-color-success-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "inverted" + ] + }, + "token-badge-foreground-color-success-outlined": { + "key": "{badge.foreground.color.success.outlined}", + "$type": "color", + "$value": "#0e6027", + "$modes": { + "default": "#198038", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "$modes": { + "default": "{color.foreground.success}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.foreground.color.success.outlined}" + }, + "name": "token-badge-foreground-color-success-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "outlined" + ] + }, + "token-badge-foreground-color-warning-filled": { + "key": "{badge.foreground.color.warning.filled}", + "$type": "color", + "$value": "#8a3800", + "$modes": { + "default": "#5e2900", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "hds": "we don't use `warning-on-surface` for accessibility (better contrast)", + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.70}", + "$modes": { + "default": "{color.palette.amber-400}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "hds": "we don't use `warning-on-surface` for accessibility (better contrast)", + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.warning.filled}" + }, + "name": "token-badge-foreground-color-warning-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "filled" + ] + }, + "token-badge-foreground-color-warning-inverted": { + "key": "{badge.foreground.color.warning.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.warning.inverted}" + }, + "name": "token-badge-foreground-color-warning-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "inverted" + ] + }, + "token-badge-foreground-color-warning-outlined": { + "key": "{badge.foreground.color.warning.outlined}", + "$type": "color", + "$value": "#8a3800", + "$modes": { + "default": "#8e6a00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.70}", + "$modes": { + "default": "{color.foreground.warning}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.warning.outlined}" + }, + "name": "token-badge-foreground-color-warning-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "outlined" + ] + }, + "token-badge-foreground-color-critical-filled": { + "key": "{badge.foreground.color.critical.filled}", + "$type": "color", + "$value": "#a2191f", + "comment": "we don't use `critical-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#750e13", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorRed.g10}", + "comment": "we don't use `critical-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.foreground.color.critical.filled}" + }, + "name": "token-badge-foreground-color-critical-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "filled" + ] + }, + "token-badge-foreground-color-critical-inverted": { + "key": "{badge.foreground.color.critical.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.critical.inverted}" + }, + "name": "token-badge-foreground-color-critical-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "inverted" + ] + }, + "token-badge-foreground-color-critical-outlined": { + "key": "{badge.foreground.color.critical.outlined}", + "$type": "color", + "$value": "#a2191f", + "$modes": { + "default": "#da1e28", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorRed.g10}", + "$modes": { + "default": "{color.foreground.critical}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.foreground.color.critical.outlined}" + }, + "name": "token-badge-foreground-color-critical-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "outlined" + ] + }, + "token-badge-surface-color-neutral-filled": { + "key": "{badge.surface.color.neutral.filled}", + "$type": "color", + "$value": "#e0e0e0", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "$modes": { + "default": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{badge.surface.color.neutral.filled}" + }, + "name": "token-badge-surface-color-neutral-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "filled" + ] + }, + "token-badge-surface-color-neutral-inverted": { + "key": "{badge.surface.color.neutral.inverted}", + "$type": "color", + "$value": "#393939", + "$modes": { + "default": "#525252", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead", + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.backgroundInverse}", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead", + "key": "{badge.surface.color.neutral.inverted}" + }, + "name": "token-badge-surface-color-neutral-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "inverted" + ] + }, + "token-badge-surface-color-neutral-outlined": { + "key": "{badge.surface.color.neutral.outlined}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{badge.surface.color.neutral.outlined}" + }, + "name": "token-badge-surface-color-neutral-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "outlined" + ] + }, + "token-badge-surface-color-neutral-dark-mode-filled": { + "key": "{badge.surface.color.neutral-dark-mode.filled}", + "$type": "color", + "$value": "#393939", + "$modes": { + "default": "#525252", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component", + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.backgroundInverse}", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component", + "key": "{badge.surface.color.neutral-dark-mode.filled}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "filled" + ] + }, + "token-badge-surface-color-neutral-dark-mode-inverted": { + "key": "{badge.surface.color.neutral-dark-mode.inverted}", + "$type": "color", + "$value": "#e0e0e0", + "$modes": { + "default": "#ffffff", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{badge.surface.color.neutral-dark-mode.inverted}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "inverted" + ] + }, + "token-badge-surface-color-neutral-dark-mode-outlined": { + "key": "{badge.surface.color.neutral-dark-mode.outlined}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{badge.surface.color.neutral-dark-mode.outlined}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "outlined" + ] + }, + "token-badge-surface-color-highlight-filled": { + "key": "{badge.surface.color.highlight.filled}", + "$type": "color", + "$value": "#e8daff", + "comment": "we don't use `surface-highlight` for accessibility (better contrast)", + "$modes": { + "default": "#e8daff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundPurple.g10}", + "comment": "we don't use `surface-highlight` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.purple-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundPurple.g100}" + }, + "key": "{badge.surface.color.highlight.filled}" + }, + "name": "token-badge-surface-color-highlight-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "highlight", + "filled" + ] + }, + "token-badge-surface-color-highlight-inverted": { + "key": "{badge.surface.color.highlight.inverted}", + "$type": "color", + "$value": "#6929c4", + "$modes": { + "default": "#a56eff", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.70}", + "$modes": { + "default": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, + "key": "{badge.surface.color.highlight.inverted}" + }, + "name": "token-badge-surface-color-highlight-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "highlight", + "inverted" + ] + }, + "token-badge-surface-color-success-filled": { + "key": "{badge.surface.color.success.filled}", + "$type": "color", + "$value": "#a7f0ba", + "comment": "we don't use `surface-success` for accessibility (better contrast)", + "$modes": { + "default": "#a7f0ba", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGreen.g10}", + "comment": "we don't use `surface-success` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.green-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGreen.g100}" + }, + "key": "{badge.surface.color.success.filled}" + }, + "name": "token-badge-surface-color-success-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "success", + "filled" + ] + }, + "token-badge-surface-color-success-inverted": { + "key": "{badge.surface.color.success.inverted}", + "$type": "color", + "$value": "#0e6027", + "$modes": { + "default": "#24a148", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "$modes": { + "default": "{color.palette.green-200}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.surface.color.success.inverted}" + }, + "name": "token-badge-surface-color-success-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "success", + "inverted" + ] + }, + "token-badge-surface-color-warning-filled": { + "key": "{badge.surface.color.warning.filled}", + "$type": "color", + "$value": "#ffd9be", + "comment": "we don't use `surface-warning` for accessibility (better contrast)", + "$modes": { + "default": "#ffd9be", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.20}", + "comment": "we don't use `surface-warning` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.surface.color.warning.filled}" + }, + "name": "token-badge-surface-color-warning-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "warning", + "filled" + ] + }, + "token-badge-surface-color-warning-inverted": { + "key": "{badge.surface.color.warning.inverted}", + "$type": "color", + "$value": "#8a3800", + "$modes": { + "default": "#ba4e00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.70}", + "$modes": { + "default": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.surface.color.warning.inverted}" + }, + "name": "token-badge-surface-color-warning-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "warning", + "inverted" + ] + }, + "token-badge-surface-color-critical-filled": { + "key": "{badge.surface.color.critical.filled}", + "$type": "color", + "$value": "#ffd7d9", + "comment": "we don't use `surface-critical` for accessibility (better contrast)", + "$modes": { + "default": "#ffd7d9", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundRed.g10}", + "comment": "we don't use `surface-critical` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.red-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundRed.g100}" + }, + "key": "{badge.surface.color.critical.filled}" + }, + "name": "token-badge-surface-color-critical-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "critical", + "filled" + ] + }, + "token-badge-surface-color-critical-inverted": { + "key": "{badge.surface.color.critical.inverted}", + "$type": "color", + "$value": "#a2191f", + "$modes": { + "default": "#da1e28", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorRed.g10}", + "$modes": { + "default": "{color.palette.red-200}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.surface.color.critical.inverted}" + }, + "name": "token-badge-surface-color-critical-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "critical", + "inverted" + ] + }, + "token-badge-border-radius": { + "key": "{badge.border.radius}", + "$type": "dimension", + "$value": "1000000000px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "1000000000px", + "cds-g10": "1000000000px", + "cds-g90": "1000000000px", + "cds-g100": "1000000000px" + }, + "original": { + "$type": "dimension", + "$value": "{border.radius.rounded}", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "{border.radius.rounded}", + "cds-g10": "{border.radius.rounded}", + "cds-g90": "{border.radius.rounded}", + "cds-g100": "{border.radius.rounded}" + }, + "key": "{badge.border.radius}" + }, + "name": "token-badge-border-radius", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "border", + "radius" + ] + }, + "token-badge-icon-size-small": { + "key": "{badge.icon.size.small}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{badge.icon.size.small}" + }, + "name": "token-badge-icon-size-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "small" + ] + }, + "token-badge-icon-size-medium": { + "key": "{badge.icon.size.medium}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{badge.icon.size.medium}" + }, + "name": "token-badge-icon-size-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "medium" + ] + }, + "token-badge-icon-size-large": { + "key": "{badge.icon.size.large}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{badge.icon.size.large}" + }, + "name": "token-badge-icon-size-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "large" + ] + }, + "token-button-height-small": { + "key": "{button.height.small}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "$modes": { + "default": "28", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "$modes": { + "default": "28", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "key": "{button.height.small}" + }, + "name": "token-button-height-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "small" + ] + }, + "token-button-height-medium": { + "key": "{button.height.medium}", + "$type": "dimension", + "$value": "40px", + "unit": "px", + "$modes": { + "default": "36", + "cds-g0": "40", + "cds-g10": "40", + "cds-g90": "40", + "cds-g100": "40" + }, + "original": { + "$type": "dimension", + "$value": "40", + "unit": "px", + "$modes": { + "default": "36", + "cds-g0": "40", + "cds-g10": "40", + "cds-g90": "40", + "cds-g100": "40" + }, + "key": "{button.height.medium}" + }, + "name": "token-button-height-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "medium" + ] + }, + "token-button-height-large": { + "key": "{button.height.large}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "$modes": { + "default": "48", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "$modes": { + "default": "48", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "key": "{button.height.large}" + }, + "name": "token-button-height-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "large" + ] + }, + "token-button-padding-horizontal-small": { + "key": "{button.padding.horizontal.small}", + "$type": "dimension", + "$value": "15px", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "15", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.small}" + }, + "name": "token-button-padding-horizontal-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "small" + ] + }, + "token-button-padding-horizontal-medium": { + "key": "{button.padding.horizontal.medium}", + "$type": "dimension", + "$value": "15px", + "unit": "px", + "$modes": { + "default": "15", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "15", + "unit": "px", + "$modes": { + "default": "15", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.medium}" + }, + "name": "token-button-padding-horizontal-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "medium" + ] + }, + "token-button-padding-horizontal-large": { + "key": "{button.padding.horizontal.large}", + "$type": "dimension", + "$value": "15px", + "unit": "px", + "$modes": { + "default": "19", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "15", + "unit": "px", + "$modes": { + "default": "19", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.large}" + }, + "name": "token-button-padding-horizontal-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "large" + ] + }, + "token-button-padding-vertical-small": { + "key": "{button.padding.vertical.small}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.small}" + }, + "name": "token-button-padding-vertical-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "small" + ] + }, + "token-button-padding-vertical-medium": { + "key": "{button.padding.vertical.medium}", + "$type": "dimension", + "$value": "10px", + "unit": "px", + "$modes": { + "default": "9", + "cds-g0": "10", + "cds-g10": "10", + "cds-g90": "10", + "cds-g100": "10" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "10", + "unit": "px", + "$modes": { + "default": "9", + "cds-g0": "10", + "cds-g10": "10", + "cds-g90": "10", + "cds-g100": "10" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.medium}" + }, + "name": "token-button-padding-vertical-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "medium" + ] + }, + "token-button-padding-vertical-large": { + "key": "{button.padding.vertical.large}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "14", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.large}" + }, + "name": "token-button-padding-vertical-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "large" + ] + }, + "token-button-gap": { + "key": "{button.gap}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "key": "{button.gap}" + }, + "name": "token-button-gap", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "gap" + ] + }, + "token-button-typography-font-size-small": { + "key": "{button.typography.font-size.small}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.small}" + }, + "name": "token-button-typography-font-size-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "small" + ] + }, + "token-button-typography-font-size-medium": { + "key": "{button.typography.font-size.medium}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.medium}" + }, + "name": "token-button-typography-font-size-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "medium" + ] + }, + "token-button-typography-font-size-large": { + "key": "{button.typography.font-size.large}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.large}" + }, + "name": "token-button-typography-font-size-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "large" + ] + }, + "token-button-typography-line-height-small": { + "key": "{button.typography.line-height.small}", + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)", + "$modes": { + "default": 0.9286, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)", + "$modes": { + "default": 0.9286, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.small}" + }, + "name": "token-button-typography-line-height-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "small" + ] + }, + "token-button-typography-line-height-medium": { + "key": "{button.typography.line-height.medium}", + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 1.1429", + "$modes": { + "default": 1.1429, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 1.1429", + "$modes": { + "default": 1.1429, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.medium}" + }, + "name": "token-button-typography-line-height-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "medium" + ] + }, + "token-button-typography-line-height-large": { + "key": "{button.typography.line-height.large}", + "$type": "number", + "$value": 1.2858, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 1.2858, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.large}" + }, + "name": "token-button-typography-line-height-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "large" + ] + }, + "token-button-foreground-color-primary-default": { + "key": "{button.foreground.color.primary.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.default}" + }, + "name": "token-button-foreground-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "default" + ] + }, + "token-button-foreground-color-primary-hover": { + "key": "{button.foreground.color.primary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.hover}" + }, + "name": "token-button-foreground-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "hover" + ] + }, + "token-button-foreground-color-primary-focus": { + "key": "{button.foreground.color.primary.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.focus}" + }, + "name": "token-button-foreground-color-primary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "focus" + ] + }, + "token-button-foreground-color-primary-active": { + "key": "{button.foreground.color.primary.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.active}" + }, + "name": "token-button-foreground-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "active" + ] + }, + "token-button-foreground-color-secondary-default": { + "key": "{button.foreground.color.secondary.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.default}" + }, + "name": "token-button-foreground-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "default" + ] + }, + "token-button-foreground-color-secondary-hover": { + "key": "{button.foreground.color.secondary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.hover}" + }, + "name": "token-button-foreground-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "hover" + ] + }, + "token-button-foreground-color-secondary-focus": { + "key": "{button.foreground.color.secondary.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.focus}" + }, + "name": "token-button-foreground-color-secondary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "focus" + ] + }, + "token-button-foreground-color-secondary-active": { + "key": "{button.foreground.color.secondary.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.active}" + }, + "name": "token-button-foreground-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "active" + ] + }, + "token-button-foreground-color-tertiary-default": { + "key": "{button.foreground.color.tertiary.default}", + "$type": "color", + "$value": "#0f62fe", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiary.g10}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiary.g100}" + }, + "key": "{button.foreground.color.tertiary.default}" + }, + "name": "token-button-foreground-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "default" + ] + }, + "token-button-foreground-color-tertiary-hover": { + "key": "{button.foreground.color.tertiary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#0043ce", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textInverse}", + "$modes": { + "default": "{color.foreground.action-hover}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.hover}" + }, + "name": "token-button-foreground-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "hover" + ] + }, + "token-button-foreground-color-tertiary-focus": { + "key": "{button.foreground.color.tertiary.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textInverse}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.focus}" + }, + "name": "token-button-foreground-color-tertiary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "focus" + ] + }, + "token-button-foreground-color-tertiary-active": { + "key": "{button.foreground.color.tertiary.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#0043ce", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textInverse}", + "$modes": { + "default": "{color.foreground.action-active}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.active}" + }, + "name": "token-button-foreground-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "active" + ] + }, + "token-button-foreground-color-critical-default": { + "key": "{button.foreground.color.critical.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#a2191f", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textOnColor}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.default}" + }, + "name": "token-button-foreground-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "default" + ] + }, + "token-button-foreground-color-critical-hover": { + "key": "{button.foreground.color.critical.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.hover}" + }, + "name": "token-button-foreground-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "hover" + ] + }, + "token-button-foreground-color-critical-focus": { + "key": "{button.foreground.color.critical.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#a2191f", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textOnColor}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.focus}" + }, + "name": "token-button-foreground-color-critical-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "focus" + ] + }, + "token-button-foreground-color-critical-active": { + "key": "{button.foreground.color.critical.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.active}" + }, + "name": "token-button-foreground-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "active" + ] + }, + "token-button-foreground-color-disabled": { + "key": "{button.foreground.color.disabled}", + "$type": "color", + "$value": "#8d8d8d", + "$modes": { + "default": "rgba(22, 22, 22, 0.25)", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "rgba(255, 255, 255, 0.25)", + "cds-g100": "rgba(255, 255, 255, 0.25)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textOnColorDisabled}", + "$modes": { + "default": "{color.foreground.disabled}", + "cds-g0": "{carbon.themes.white.textOnColorDisabled}", + "cds-g10": "{carbon.themes.g10.textOnColorDisabled}", + "cds-g90": "{carbon.themes.g90.textOnColorDisabled}", + "cds-g100": "{carbon.themes.g100.textOnColorDisabled}" + }, + "key": "{button.foreground.color.disabled}" + }, + "name": "token-button-foreground-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "disabled" + ] + }, + "token-button-surface-color-primary-default": { + "key": "{button.surface.color.primary.default}", + "$type": "color", + "$value": "#0f62fe", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimary.g10}", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimary.g100}" + }, + "key": "{button.surface.color.primary.default}" + }, + "name": "token-button-surface-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "default" + ] + }, + "token-button-surface-color-primary-hover": { + "key": "{button.surface.color.primary.hover}", + "$type": "color", + "$value": "#0050e6", + "$modes": { + "default": "#0043ce", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#0050e6", + "cds-g100": "#0050e6" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimaryHover.g10}", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimaryHover.g100}" + }, + "key": "{button.surface.color.primary.hover}" + }, + "name": "token-button-surface-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "hover" + ] + }, + "token-button-surface-color-primary-focus": { + "key": "{button.surface.color.primary.focus}", + "$type": "color", + "$value": "#0f62fe", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimary.g10}", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimary.g100}" + }, + "key": "{button.surface.color.primary.focus}" + }, + "name": "token-button-surface-color-primary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "focus" + ] + }, + "token-button-surface-color-primary-active": { + "key": "{button.surface.color.primary.active}", + "$type": "color", + "$value": "#002d9c", + "$modes": { + "default": "#002d9c", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#002d9c", + "cds-g100": "#002d9c" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimaryActive.g10}", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimaryActive.g100}" + }, + "key": "{button.surface.color.primary.active}" + }, + "name": "token-button-surface-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "active" + ] + }, + "token-button-surface-color-secondary-default": { + "key": "{button.surface.color.secondary.default}", + "$type": "color", + "$value": "#393939", + "$modes": { + "default": "#ffffff", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#6f6f6f", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondary.g10}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondary.g100}" + }, + "key": "{button.surface.color.secondary.default}" + }, + "name": "token-button-surface-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "default" + ] + }, + "token-button-surface-color-secondary-hover": { + "key": "{button.surface.color.secondary.hover}", + "$type": "color", + "$value": "#474747", + "$modes": { + "default": "#ffffff", + "cds-g0": "#474747", + "cds-g10": "#474747", + "cds-g90": "#5e5e5e", + "cds-g100": "#5e5e5e" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondaryHover.g10}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondaryHover.g100}" + }, + "key": "{button.surface.color.secondary.hover}" + }, + "name": "token-button-surface-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "hover" + ] + }, + "token-button-surface-color-secondary-focus": { + "key": "{button.surface.color.secondary.focus}", + "$type": "color", + "$value": "#393939", + "$modes": { + "default": "#ffffff", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#6f6f6f", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondary.g10}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondary.g100}" + }, + "key": "{button.surface.color.secondary.focus}" + }, + "name": "token-button-surface-color-secondary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "focus" + ] + }, + "token-button-surface-color-secondary-active": { + "key": "{button.surface.color.secondary.active}", + "$type": "color", + "$value": "#6f6f6f", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#6f6f6f", + "cds-g10": "#6f6f6f", + "cds-g90": "#393939", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondaryActive.g10}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondaryActive.g100}" + }, + "key": "{button.surface.color.secondary.active}" + }, + "name": "token-button-surface-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "active" + ] + }, + "token-button-surface-color-tertiary-default": { + "key": "{button.surface.color.tertiary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{button.surface.color.tertiary.default}" + }, + "name": "token-button-surface-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "default" + ] + }, + "token-button-surface-color-tertiary-hover": { + "key": "{button.surface.color.tertiary.hover}", + "$type": "color", + "$value": "#0050e6", + "$modes": { + "default": "#ffffff", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiaryHover.g10}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryHover.g100}" + }, + "key": "{button.surface.color.tertiary.hover}" + }, + "name": "token-button-surface-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "hover" + ] + }, + "token-button-surface-color-tertiary-focus": { + "key": "{button.surface.color.tertiary.focus}", + "$type": "color", + "$value": "#0050e6", + "$modes": { + "default": "transparent", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiaryHover.g10}", + "$modes": { + "default": "transparent", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryHover.g100}" + }, + "key": "{button.surface.color.tertiary.focus}" + }, + "name": "token-button-surface-color-tertiary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "focus" + ] + }, + "token-button-surface-color-tertiary-active": { + "key": "{button.surface.color.tertiary.active}", + "$type": "color", + "$value": "#002d9c", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiaryActive.g10}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryActive.g100}" + }, + "key": "{button.surface.color.tertiary.active}" + }, + "name": "token-button-surface-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "active" + ] + }, + "token-button-surface-color-critical-default": { + "key": "{button.surface.color.critical.default}", + "$type": "color", + "$value": "#da1e28", + "$modes": { + "default": "#ffd7d9", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerPrimary.g10}", + "$modes": { + "default": "{color.surface.critical}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerPrimary.g100}" + }, + "key": "{button.surface.color.critical.default}" + }, + "name": "token-button-surface-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "default" + ] + }, + "token-button-surface-color-critical-hover": { + "key": "{button.surface.color.critical.hover}", + "$type": "color", + "$value": "#b81921", + "$modes": { + "default": "#a2191f", + "cds-g0": "#b81921", + "cds-g10": "#b81921", + "cds-g90": "#b81921", + "cds-g100": "#b81921" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerHover.g10}", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerHover.g100}" + }, + "key": "{button.surface.color.critical.hover}" + }, + "name": "token-button-surface-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "hover" + ] + }, + "token-button-surface-color-critical-focus": { + "key": "{button.surface.color.critical.focus}", + "$type": "color", + "$value": "#da1e28", + "$modes": { + "default": "#ffd7d9", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerPrimary.g10}", + "$modes": { + "default": "{color.surface.critical}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerPrimary.g100}" + }, + "key": "{button.surface.color.critical.focus}" + }, + "name": "token-button-surface-color-critical-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "focus" + ] + }, + "token-button-surface-color-critical-active": { + "key": "{button.surface.color.critical.active}", + "$type": "color", + "$value": "#750e13", + "$modes": { + "default": "#750e13", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#750e13", + "cds-g100": "#750e13" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerActive.g10}", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerActive.g100}" + }, + "key": "{button.surface.color.critical.active}" + }, + "name": "token-button-surface-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "active" + ] + }, + "token-button-surface-color-disabled": { + "key": "{button.surface.color.disabled}", + "$type": "color", + "$value": "#c6c6c6", + "$modes": { + "default": "#ffffff", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDisabled.g10}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDisabled.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDisabled.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDisabled.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDisabled.g100}" + }, + "key": "{button.surface.color.disabled}" + }, + "name": "token-button-surface-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "disabled" + ] + }, + "token-button-border-width": { + "key": "{button.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{button.border.width}" + }, + "name": "token-button-border-width", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "width" + ] + }, + "token-button-border-radius": { + "key": "{button.border.radius}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{button.border.radius}" + }, + "name": "token-button-border-radius", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "radius" + ] + }, + "token-button-border-color-primary-default": { + "key": "{button.border.color.primary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#0043ce", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.default}" + }, + "name": "token-button-border-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "default" + ] + }, + "token-button-border-color-primary-hover": { + "key": "{button.border.color.primary.hover}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#0043ce", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.hover}" + }, + "name": "token-button-border-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "hover" + ] + }, + "token-button-border-color-primary-focus-internal": { + "key": "{button.border.color.primary.focus.internal}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#ffffff", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.primary.focus.internal}" + }, + "name": "token-button-border-color-primary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "focus", + "internal" + ] + }, + "token-button-border-color-primary-focus-external": { + "key": "{button.border.color.primary.focus.external}", + "$type": "color", + "$value": "#ff00ff", + "$modes": { + "default": "#0f62fe", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "magenta", + "$modes": { + "default": "{color.focus.action.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.primary.focus.external}" + }, + "name": "token-button-border-color-primary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "focus", + "external" + ] + }, + "token-button-border-color-primary-active": { + "key": "{button.border.color.primary.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#002d9c", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.active}" + }, + "name": "token-button-border-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "active" + ] + }, + "token-button-border-color-secondary-default": { + "key": "{button.border.color.secondary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.default}" + }, + "name": "token-button-border-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "default" + ] + }, + "token-button-border-color-secondary-hover": { + "key": "{button.border.color.secondary.hover}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.hover}" + }, + "name": "token-button-border-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "hover" + ] + }, + "token-button-border-color-secondary-focus-internal": { + "key": "{button.border.color.secondary.focus.internal}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#ffffff", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.secondary.focus.internal}" + }, + "name": "token-button-border-color-secondary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "focus", + "internal" + ] + }, + "token-button-border-color-secondary-focus-external": { + "key": "{button.border.color.secondary.focus.external}", + "$type": "color", + "$value": "#ff00ff", + "$modes": { + "default": "#0f62fe", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "magenta", + "$modes": { + "default": "{color.focus.action.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.secondary.focus.external}" + }, + "name": "token-button-border-color-secondary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "focus", + "external" + ] + }, + "token-button-border-color-secondary-active": { + "key": "{button.border.color.secondary.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.active}" + }, + "name": "token-button-border-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "active" + ] + }, + "token-button-border-color-tertiary-default": { + "key": "{button.border.color.tertiary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{button.border.color.tertiary.default}" + }, + "name": "token-button-border-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "default" + ] + }, + "token-button-border-color-tertiary-hover": { + "key": "{button.border.color.tertiary.hover}", + "$type": "color", + "$value": "#8d8d8d", + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "key": "{button.border.color.tertiary.hover}" + }, + "name": "token-button-border-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "hover" + ] + }, + "token-button-border-color-tertiary-focus-internal": { + "key": "{button.border.color.tertiary.focus.internal}", + "$type": "color", + "$value": "#ffffff", + "original": { + "$type": "color", + "$value": "{color.focus.action.internal}", + "key": "{button.border.color.tertiary.focus.internal}" + }, + "name": "token-button-border-color-tertiary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "focus", + "internal" + ] + }, + "token-button-border-color-tertiary-focus-external": { + "key": "{button.border.color.tertiary.focus.external}", + "$type": "color", + "$value": "#0f62fe", + "original": { + "$type": "color", + "$value": "{color.focus.action.external}", + "key": "{button.border.color.tertiary.focus.external}" + }, + "name": "token-button-border-color-tertiary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "focus", + "external" + ] + }, + "token-button-border-color-tertiary-active": { + "key": "{button.border.color.tertiary.active}", + "$type": "color", + "$value": "#8d8d8d", + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "key": "{button.border.color.tertiary.active}" + }, + "name": "token-button-border-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "active" + ] + }, + "token-button-border-color-critical-default": { + "key": "{button.border.color.critical.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#a2191f", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.default}" + }, + "name": "token-button-border-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "default" + ] + }, + "token-button-border-color-critical-hover": { + "key": "{button.border.color.critical.hover}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#750e13", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.hover}" + }, + "name": "token-button-border-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "hover" + ] + }, + "token-button-border-color-critical-focus-internal": { + "key": "{button.border.color.critical.focus.internal}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#ffffff", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.critical.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.critical.focus.internal}" + }, + "name": "token-button-border-color-critical-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "focus", + "internal" + ] + }, + "token-button-border-color-critical-focus-external": { + "key": "{button.border.color.critical.focus.external}", + "$type": "color", + "$value": "#ff00ff", + "$modes": { + "default": "#0f62fe", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "magenta", + "$modes": { + "default": "{color.focus.critical.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.critical.focus.external}" + }, + "name": "token-button-border-color-critical-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "focus", + "external" + ] + }, + "token-button-border-color-critical-active": { + "key": "{button.border.color.critical.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#750e13", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.active}" + }, + "name": "token-button-border-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "active" + ] + }, + "token-button-border-color-disabled": { + "key": "{button.border.color.disabled}", + "$type": "color", + "$value": "#e0e0e0", + "original": { + "$type": "color", + "$value": "{color.border.primary}", + "key": "{button.border.color.disabled}" + }, + "name": "token-button-border-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "disabled" + ] + }, + "token-button-focus-border-width": { + "key": "{button.focus.border.width}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{button.focus.border.width}" + }, + "name": "token-button-focus-border-width", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "focus", + "border", + "width" + ] + }, + "token-button-icon-size-small": { + "key": "{button.icon.size.small}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.small}" + }, + "name": "token-button-icon-size-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "small" + ] + }, + "token-button-icon-size-medium": { + "key": "{button.icon.size.medium}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.medium}" + }, + "name": "token-button-icon-size-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "medium" + ] + }, + "token-button-icon-size-large": { + "key": "{button.icon.size.large}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.large}" + }, + "name": "token-button-icon-size-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "large" + ] + }, + "token-dismiss-button-size": { + "key": "{dismiss-button.size}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "key": "{dismiss-button.size}" + }, + "name": "token-dismiss-button-size", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "size" + ] + }, + "token-dismiss-button-foreground-color-default": { + "key": "{dismiss-button.foreground.color.default}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#525252", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.iconPrimary}", + "$modes": { + "default": "{color.foreground.faint}", + "cds-g0": "{carbon.themes.white.iconPrimary}", + "cds-g10": "{carbon.themes.g10.iconPrimary}", + "cds-g90": "{carbon.themes.g90.iconPrimary}", + "cds-g100": "{carbon.themes.g100.iconPrimary}" + }, + "key": "{dismiss-button.foreground.color.default}" + }, + "name": "token-dismiss-button-foreground-color-default", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "foreground", + "color", + "default" + ] + }, + "token-dismiss-button-foreground-color-active": { + "key": "{dismiss-button.foreground.color.active}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.iconPrimary}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.white.iconPrimary}", + "cds-g10": "{carbon.themes.g10.iconPrimary}", + "cds-g90": "{carbon.themes.g90.iconPrimary}", + "cds-g100": "{carbon.themes.g100.iconPrimary}" + }, + "key": "{dismiss-button.foreground.color.active}" + }, + "name": "token-dismiss-button-foreground-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "foreground", + "color", + "active" + ] + }, + "token-dismiss-button-surface-color-hover": { + "key": "{dismiss-button.surface.color.hover}", + "$type": "color", + "$value": "rgba(141, 141, 141, 0.12)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "rgba(141, 141, 141, 0.12)", + "cds-g10": "rgba(141, 141, 141, 0.12)", + "cds-g90": "rgba(141, 141, 141, 0.16)", + "cds-g100": "rgba(141, 141, 141, 0.16)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.backgroundHover}", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "{carbon.themes.white.backgroundHover}", + "cds-g10": "{carbon.themes.g10.backgroundHover}", + "cds-g90": "{carbon.themes.g90.backgroundHover}", + "cds-g100": "{carbon.themes.g100.backgroundHover}" + }, + "key": "{dismiss-button.surface.color.hover}" + }, + "name": "token-dismiss-button-surface-color-hover", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "surface", + "color", + "hover" + ] + }, + "token-dismiss-button-surface-color-active": { + "key": "{dismiss-button.surface.color.active}", + "$type": "color", + "$value": "rgba(141, 141, 141, 0.5)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "rgba(141, 141, 141, 0.5)", + "cds-g10": "rgba(141, 141, 141, 0.5)", + "cds-g90": "rgba(141, 141, 141, 0.4)", + "cds-g100": "rgba(141, 141, 141, 0.4)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.backgroundActive}", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "{carbon.themes.white.backgroundActive}", + "cds-g10": "{carbon.themes.g10.backgroundActive}", + "cds-g90": "{carbon.themes.g90.backgroundActive}", + "cds-g100": "{carbon.themes.g100.backgroundActive}" + }, + "key": "{dismiss-button.surface.color.active}" + }, + "name": "token-dismiss-button-surface-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "surface", + "color", + "active" + ] + }, + "token-dismiss-button-border-color-active": { + "key": "{dismiss-button.border.color.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{dismiss-button.border.color.active}" + }, + "name": "token-dismiss-button-border-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "border", + "color", + "active" + ] + }, + "token-dismiss-button-icon-size": { + "key": "{dismiss-button.icon.size}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "20", + "cds-g10": "20", + "cds-g90": "20", + "cds-g100": "20" + }, + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "20", + "cds-g10": "20", + "cds-g90": "20", + "cds-g100": "20" + }, + "key": "{dismiss-button.icon.size}" + }, + "name": "token-dismiss-button-icon-size", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "icon", + "size" + ] + }, + "token-form-label-color": { + "key": "{form.label.color}", + "$type": "color", + "$value": "#161616", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.strong}", + "group": "components", + "key": "{form.label.color}" + }, + "name": "token-form-label-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "label", + "color" + ] + }, + "token-form-legend-color": { + "key": "{form.legend.color}", + "$type": "color", + "$value": "#161616", + "group": "components", + "original": { + "$type": "color", + "$value": "{form.label.color}", + "group": "components", + "key": "{form.legend.color}" + }, + "name": "token-form-legend-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "legend", + "color" + ] + }, + "token-form-helper-text-color": { + "key": "{form.helper-text.color}", + "$type": "color", + "$value": "#525252", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.helper-text.color}" + }, + "name": "token-form-helper-text-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "helper-text", + "color" + ] + }, + "token-form-indicator-optional-color": { + "key": "{form.indicator.optional.color}", + "$type": "color", + "$value": "#525252", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.indicator.optional.color}" + }, + "name": "token-form-indicator-optional-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "indicator", + "optional", + "color" + ] + }, + "token-form-error-color": { + "key": "{form.error.color}", + "$type": "color", + "$value": "#a2191f", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "components", + "key": "{form.error.color}" + }, + "name": "token-form-error-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "error", + "color" + ] + }, + "token-form-error-icon-size": { + "key": "{form.error.icon-size}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "14", + "unit": "px", + "key": "{form.error.icon-size}" + }, + "name": "token-form-error-icon-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "error", + "icon-size" + ] + }, + "token-form-checkbox-size": { + "key": "{form.checkbox.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.checkbox.size}" + }, + "name": "token-form-checkbox-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "size" + ] + }, + "token-form-checkbox-border-radius": { + "key": "{form.checkbox.border.radius}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{form.checkbox.border.radius}" + }, + "name": "token-form-checkbox-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "border", + "radius" + ] + }, + "token-form-checkbox-border-width": { + "key": "{form.checkbox.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.checkbox.border.width}" + }, + "name": "token-form-checkbox-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "border", + "width" + ] + }, + "token-form-checkbox-background-image-size": { + "key": "{form.checkbox.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.checkbox.background-image.size}" + }, + "name": "token-form-checkbox-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "size" + ] + }, + "token-form-checkbox-background-image-data-url": { + "key": "{form.checkbox.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url}" + }, + "name": "token-form-checkbox-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url" + ] + }, + "token-form-checkbox-background-image-data-url-indeterminate": { + "key": "{form.checkbox.background-image.data-url-indeterminate}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url-indeterminate}" + }, + "name": "token-form-checkbox-background-image-data-url-indeterminate", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url-indeterminate" + ] + }, + "token-form-checkbox-background-image-data-url-disabled": { + "key": "{form.checkbox.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url-disabled}" + }, + "name": "token-form-checkbox-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url-disabled" + ] + }, + "token-form-checkbox-background-image-data-url-indeterminate-disabled": { + "key": "{form.checkbox.background-image.data-url-indeterminate-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url-indeterminate-disabled}" + }, + "name": "token-form-checkbox-background-image-data-url-indeterminate-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url-indeterminate-disabled" + ] + }, + "token-form-control-base-foreground-value-color": { + "key": "{form.control.base.foreground.value-color}", + "$type": "color", + "$value": "#161616", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.strong}", + "group": "components", + "key": "{form.control.base.foreground.value-color}" + }, + "name": "token-form-control-base-foreground-value-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "foreground", + "value-color" + ] + }, + "token-form-control-base-foreground-placeholder-color": { + "key": "{form.control.base.foreground.placeholder-color}", + "$type": "color", + "$value": "#525252", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.control.base.foreground.placeholder-color}" + }, + "name": "token-form-control-base-foreground-placeholder-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "foreground", + "placeholder-color" + ] + }, + "token-form-control-base-surface-color-default": { + "key": "{form.control.base.surface-color.default}", + "$type": "color", + "$value": "#ffffff", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.interactive}", + "group": "components", + "key": "{form.control.base.surface-color.default}" + }, + "name": "token-form-control-base-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "surface-color", + "default" + ] + }, + "token-form-control-base-surface-color-hover": { + "key": "{form.control.base.surface-color.hover}", + "$type": "color", + "$value": "#e8e8e8", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.interactive-hover}", + "group": "components", + "key": "{form.control.base.surface-color.hover}" + }, + "name": "token-form-control-base-surface-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "surface-color", + "hover" + ] + }, + "token-form-control-base-border-color-default": { + "key": "{form.control.base.border-color.default}", + "$type": "color", + "$value": "#8d8d8d", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-400}", + "group": "components", + "key": "{form.control.base.border-color.default}" + }, + "name": "token-form-control-base-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "border-color", + "default" + ] + }, + "token-form-control-base-border-color-hover": { + "key": "{form.control.base.border-color.hover}", + "$type": "color", + "$value": "#525252", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "group": "components", + "key": "{form.control.base.border-color.hover}" + }, + "name": "token-form-control-base-border-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "border-color", + "hover" + ] + }, + "token-form-control-checked-foreground-color": { + "key": "{form.control.checked.foreground-color}", + "$type": "color", + "$value": "#ffffff", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "group": "components", + "key": "{form.control.checked.foreground-color}" + }, + "name": "token-form-control-checked-foreground-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "foreground-color" + ] + }, + "token-form-control-checked-surface-color-default": { + "key": "{form.control.checked.surface-color.default}", + "$type": "color", + "$value": "#0f62fe", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "group": "components", + "key": "{form.control.checked.surface-color.default}" + }, + "name": "token-form-control-checked-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "surface-color", + "default" + ] + }, + "token-form-control-checked-surface-color-hover": { + "key": "{form.control.checked.surface-color.hover}", + "$type": "color", + "$value": "#0043ce", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "components", + "key": "{form.control.checked.surface-color.hover}" + }, + "name": "token-form-control-checked-surface-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "surface-color", + "hover" + ] + }, + "token-form-control-checked-border-color-default": { + "key": "{form.control.checked.border-color.default}", + "$type": "color", + "$value": "#0043ce", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "components", + "key": "{form.control.checked.border-color.default}" + }, + "name": "token-form-control-checked-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "border-color", + "default" + ] + }, + "token-form-control-checked-border-color-hover": { + "key": "{form.control.checked.border-color.hover}", + "$type": "color", + "$value": "#002d9c", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "group": "components", + "key": "{form.control.checked.border-color.hover}" + }, + "name": "token-form-control-checked-border-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "border-color", + "hover" + ] + }, + "token-form-control-invalid-border-color-default": { + "key": "{form.control.invalid.border-color.default}", + "$type": "color", + "$value": "#a2191f", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "components", + "key": "{form.control.invalid.border-color.default}" + }, + "name": "token-form-control-invalid-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "invalid", + "border-color", + "default" + ] + }, + "token-form-control-invalid-border-color-hover": { + "key": "{form.control.invalid.border-color.hover}", + "$type": "color", + "$value": "#750e13", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.red-400}", + "group": "components", + "key": "{form.control.invalid.border-color.hover}" + }, + "name": "token-form-control-invalid-border-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "invalid", + "border-color", + "hover" + ] + }, + "token-form-control-readonly-foreground-color": { + "key": "{form.control.readonly.foreground-color}", + "$type": "color", + "$value": "#161616", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "group": "components", + "key": "{form.control.readonly.foreground-color}" + }, + "name": "token-form-control-readonly-foreground-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "readonly", + "foreground-color" + ] + }, + "token-form-control-readonly-surface-color": { + "key": "{form.control.readonly.surface-color}", + "$type": "color", + "$value": "#e0e0e0", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.strong}", + "group": "components", + "key": "{form.control.readonly.surface-color}" + }, + "name": "token-form-control-readonly-surface-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "readonly", + "surface-color" + ] + }, + "token-form-control-readonly-border-color": { + "key": "{form.control.readonly.border-color}", + "$type": "color", + "$value": "#c6c6c6", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.border.faint}", + "group": "components", + "key": "{form.control.readonly.border-color}" + }, + "name": "token-form-control-readonly-border-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "readonly", + "border-color" + ] + }, + "token-form-control-disabled-foreground-color": { + "key": "{form.control.disabled.foreground-color}", + "$type": "color", + "$value": "rgba(22, 22, 22, 0.25)", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.disabled}", + "group": "components", + "key": "{form.control.disabled.foreground-color}" + }, + "name": "token-form-control-disabled-foreground-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "disabled", + "foreground-color" + ] + }, + "token-form-control-disabled-surface-color": { + "key": "{form.control.disabled.surface-color}", + "$type": "color", + "$value": "#c6c6c6", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.interactive-disabled}", + "group": "components", + "key": "{form.control.disabled.surface-color}" + }, + "name": "token-form-control-disabled-surface-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "disabled", + "surface-color" + ] + }, + "token-form-control-disabled-border-color": { + "key": "{form.control.disabled.border-color}", + "$type": "color", + "$value": "#e0e0e0", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.border.primary}", + "group": "components", + "key": "{form.control.disabled.border-color}" + }, + "name": "token-form-control-disabled-border-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "disabled", + "border-color" + ] + }, + "token-form-control-padding": { + "key": "{form.control.padding}", + "$type": "dimension", + "$value": "7px", + "unit": "px", + "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma.", + "original": { + "$type": "dimension", + "$value": "7", + "unit": "px", + "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma.", + "key": "{form.control.padding}" + }, + "name": "token-form-control-padding", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "padding" + ] + }, + "token-form-control-border-radius": { + "key": "{form.control.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{form.control.border.radius}" + }, + "name": "token-form-control-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "border", + "radius" + ] + }, + "token-form-control-border-width": { + "key": "{form.control.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.control.border.width}" + }, + "name": "token-form-control-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "border", + "width" + ] + }, + "token-form-radio-size": { + "key": "{form.radio.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.radio.size}" + }, + "name": "token-form-radio-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "size" + ] + }, + "token-form-radio-border-width": { + "key": "{form.radio.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.radio.border.width}" + }, + "name": "token-form-radio-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "border", + "width" + ] + }, + "token-form-radio-background-image-size": { + "key": "{form.radio.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.radio.background-image.size}" + }, + "name": "token-form-radio-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "background-image", + "size" + ] + }, + "token-form-radio-background-image-data-url": { + "key": "{form.radio.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "key": "{form.radio.background-image.data-url}" + }, + "name": "token-form-radio-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "background-image", + "data-url" + ] + }, + "token-form-radio-background-image-data-url-disabled": { + "key": "{form.radio.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "key": "{form.radio.background-image.data-url-disabled}" + }, + "name": "token-form-radio-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "background-image", + "data-url-disabled" + ] + }, + "token-form-radiocard-group-gap": { + "key": "{form.radiocard-group.gap}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.radiocard-group.gap}" + }, + "name": "token-form-radiocard-group-gap", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard-group", + "gap" + ] + }, + "token-form-radiocard-border-width": { + "key": "{form.radiocard.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.radiocard.border.width}" + }, + "name": "token-form-radiocard-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "width" + ] + }, + "token-form-radiocard-border-radius": { + "key": "{form.radiocard.border.radius}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{form.radiocard.border.radius}" + }, + "name": "token-form-radiocard-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "radius" + ] + }, + "token-form-radiocard-border-color-default": { + "key": "{form.radiocard.border.color.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#ffffff", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{form.radiocard.border.color.default}" + }, + "name": "token-form-radiocard-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "default" + ] + }, + "token-form-radiocard-border-color-focus": { + "key": "{form.radiocard.border.color.focus}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#ffffff", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "key": "{form.radiocard.border.color.focus}" + }, + "name": "token-form-radiocard-border-color-focus", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "focus" + ] + }, + "token-form-radiocard-border-color-default-checked": { + "key": "{form.radiocard.border.color.default-checked}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#0043ce", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "key": "{form.radiocard.border.color.default-checked}" + }, + "name": "token-form-radiocard-border-color-default-checked", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "default-checked" + ] + }, + "token-form-radiocard-content-padding": { + "key": "{form.radiocard.content-padding}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{form.radiocard.content-padding}" + }, + "name": "token-form-radiocard-content-padding", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "content-padding" + ] + }, + "token-form-radiocard-control-padding": { + "key": "{form.radiocard.control-padding}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{form.radiocard.control-padding}" + }, + "name": "token-form-radiocard-control-padding", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "control-padding" + ] + }, + "token-form-radiocard-transition-duration": { + "key": "{form.radiocard.transition.duration}", + "$type": "duration", + "$value": "0.2s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.2", + "unit": "s", + "key": "{form.radiocard.transition.duration}" + }, + "name": "token-form-radiocard-transition-duration", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "transition", + "duration" + ] + }, + "token-form-select-background-image-size": { + "key": "{form.select.background-image.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.select.background-image.size}" + }, + "name": "token-form-select-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "size" + ] + }, + "token-form-select-background-image-position-right-x": { + "key": "{form.select.background-image.position-right-x}", + "$type": "dimension", + "$value": "7px", + "original": { + "$type": "dimension", + "$value": "{form.control.padding}", + "key": "{form.select.background-image.position-right-x}" + }, + "name": "token-form-select-background-image-position-right-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "position-right-x" + ] + }, + "token-form-select-background-image-position-top-y": { + "key": "{form.select.background-image.position-top-y}", + "$type": "dimension", + "$value": "9px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "9", + "unit": "px", + "key": "{form.select.background-image.position-top-y}" + }, + "name": "token-form-select-background-image-position-top-y", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "position-top-y" + ] + }, + "token-form-select-background-image-data-url": { + "key": "{form.select.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "key": "{form.select.background-image.data-url}" + }, + "name": "token-form-select-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "data-url" + ] + }, + "token-form-select-background-image-data-url-disabled": { + "key": "{form.select.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "key": "{form.select.background-image.data-url-disabled}" + }, + "name": "token-form-select-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "data-url-disabled" + ] + }, + "token-form-text-input-background-image-size": { + "key": "{form.text-input.background-image.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.text-input.background-image.size}" + }, + "name": "token-form-text-input-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "size" + ] + }, + "token-form-text-input-background-image-position-x": { + "key": "{form.text-input.background-image.position-x}", + "$type": "dimension", + "$value": "7px", + "original": { + "$type": "dimension", + "$value": "{form.control.padding}", + "key": "{form.text-input.background-image.position-x}" + }, + "name": "token-form-text-input-background-image-position-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "position-x" + ] + }, + "token-form-text-input-background-image-data-url-date": { + "key": "{form.text-input.background-image.data-url-date}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-date}" + }, + "name": "token-form-text-input-background-image-data-url-date", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-date" + ] + }, + "token-form-text-input-background-image-data-url-time": { + "key": "{form.text-input.background-image.data-url-time}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-time}" + }, + "name": "token-form-text-input-background-image-data-url-time", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-time" + ] + }, + "token-form-text-input-background-image-data-url-search": { + "key": "{form.text-input.background-image.data-url-search}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-search}" + }, + "name": "token-form-text-input-background-image-data-url-search", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search" + ] + }, + "token-form-text-input-background-image-data-url-search-cancel": { + "key": "{form.text-input.background-image.data-url-search-cancel}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-search-cancel}" + }, + "name": "token-form-text-input-background-image-data-url-search-cancel", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search-cancel" + ] + }, + "token-form-text-input-background-image-data-url-search-loading": { + "key": "{form.text-input.background-image.data-url-search-loading}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color and animation are hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color and animation are hardcoded here!", + "key": "{form.text-input.background-image.data-url-search-loading}" + }, + "name": "token-form-text-input-background-image-data-url-search-loading", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search-loading" + ] + }, + "token-form-toggle-width": { + "key": "{form.toggle.width}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{form.toggle.width}" + }, + "name": "token-form-toggle-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "width" + ] + }, + "token-form-toggle-height": { + "key": "{form.toggle.height}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.toggle.height}" + }, + "name": "token-form-toggle-height", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "height" + ] + }, + "token-form-toggle-base-surface-color-default": { + "key": "{form.toggle.base.surface-color.default}", + "$type": "color", + "$value": "#e0e0e0", + "group": "components", + "comment": "the toggle has a different base surface color, compared to the other controls", + "original": { + "$type": "color", + "$value": "{color.surface.strong}", + "group": "components", + "comment": "the toggle has a different base surface color, compared to the other controls", + "key": "{form.toggle.base.surface-color.default}" + }, + "name": "token-form-toggle-base-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "base", + "surface-color", + "default" + ] + }, + "token-form-toggle-border-radius": { + "key": "{form.toggle.border.radius}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{form.toggle.border.radius}" + }, + "name": "token-form-toggle-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "border", + "radius" + ] + }, + "token-form-toggle-border-width": { + "key": "{form.toggle.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.toggle.border.width}" + }, + "name": "token-form-toggle-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "border", + "width" + ] + }, + "token-form-toggle-background-image-size": { + "key": "{form.toggle.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.toggle.background-image.size}" + }, + "name": "token-form-toggle-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "size" + ] + }, + "token-form-toggle-background-image-position-x": { + "key": "{form.toggle.background-image.position-x}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{form.toggle.background-image.position-x}" + }, + "name": "token-form-toggle-background-image-position-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "position-x" + ] + }, + "token-form-toggle-background-image-data-url": { + "key": "{form.toggle.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.toggle.background-image.data-url}" + }, + "name": "token-form-toggle-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "data-url" + ] + }, + "token-form-toggle-background-image-data-url-disabled": { + "key": "{form.toggle.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.toggle.background-image.data-url-disabled}" + }, + "name": "token-form-toggle-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "data-url-disabled" + ] + }, + "token-form-toggle-transition-duration": { + "key": "{form.toggle.transition.duration}", + "$type": "duration", + "$value": "0.2s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.2", + "unit": "s", + "key": "{form.toggle.transition.duration}" + }, + "name": "token-form-toggle-transition-duration", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "transition", + "duration" + ] + }, + "token-form-toggle-transition-timing-function": { + "key": "{form.toggle.transition.timing-function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.68, -0.2, 0.265, 1.15)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.68, + -0.2, + 0.265, + 1.15 + ], + "key": "{form.toggle.transition.timing-function}" + }, + "name": "token-form-toggle-transition-timing-function", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "transition", + "timing-function" + ] + }, + "token-form-toggle-thumb-size": { + "key": "{form.toggle.thumb-size}", + "$type": "dimension", + "$value": "16px", + "original": { + "$type": "dimension", + "$value": "{form.toggle.height}", + "key": "{form.toggle.thumb-size}" + }, + "name": "token-form-toggle-thumb-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "thumb-size" + ] + }, + "token-icon-tile-border-color-overlay": { + "key": "{icon-tile.border.color.overlay}", + "$type": "color", + "$value": "#c6c6c6", + "$modes": { + "default": "#e0e0e0", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.borderSubtle02}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle02}", + "cds-g10": "{carbon.themes.g10.borderSubtle02}", + "cds-g90": "{carbon.themes.g90.borderSubtle02}", + "cds-g100": "{carbon.themes.g100.borderSubtle02}" + }, + "key": "{icon-tile.border.color.overlay}" + }, + "name": "token-icon-tile-border-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "overlay" + ] + }, + "token-icon-tile-border-color-logo": { + "key": "{icon-tile.border.color.logo}", + "$type": "color", + "$value": "#e0e0e0", + "$modes": { + "default": "#e0e0e0", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.borderSubtle01}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle01}", + "cds-g10": "{carbon.themes.g10.borderSubtle01}", + "cds-g90": "{carbon.themes.g90.borderSubtle01}", + "cds-g100": "{carbon.themes.g100.borderSubtle01}" + }, + "key": "{icon-tile.border.color.logo}" + }, + "name": "token-icon-tile-border-color-logo", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "logo" + ] + }, + "token-icon-tile-surface-color-overlay": { + "key": "{icon-tile.surface.color.overlay}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.layer02}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.white.layer02}", + "cds-g10": "{carbon.themes.g10.layer02}", + "cds-g90": "{carbon.themes.g90.layer02}", + "cds-g100": "{carbon.themes.g100.layer02}" + }, + "key": "{icon-tile.surface.color.overlay}" + }, + "name": "token-icon-tile-surface-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "surface", + "color", + "overlay" + ] + }, + "token-pagination-nav-control-height": { + "key": "{pagination.nav.control.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{pagination.nav.control.height}" + }, + "name": "token-pagination-nav-control-height", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "height" + ] + }, + "token-pagination-nav-control-padding-horizontal": { + "key": "{pagination.nav.control.padding.horizontal}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{pagination.nav.control.padding.horizontal}" + }, + "name": "token-pagination-nav-control-padding-horizontal", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "padding", + "horizontal" + ] + }, + "token-pagination-nav-control-focus-inset": { + "key": "{pagination.nav.control.focus-inset}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{pagination.nav.control.focus-inset}" + }, + "name": "token-pagination-nav-control-focus-inset", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "focus-inset" + ] + }, + "token-pagination-nav-control-icon-spacing": { + "key": "{pagination.nav.control.icon-spacing}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{pagination.nav.control.icon-spacing}" + }, + "name": "token-pagination-nav-control-icon-spacing", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "icon-spacing" + ] + }, + "token-pagination-nav-indicator-height": { + "key": "{pagination.nav.indicator.height}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{pagination.nav.indicator.height}" + }, + "name": "token-pagination-nav-indicator-height", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "indicator", + "height" + ] + }, + "token-pagination-nav-indicator-spacing": { + "key": "{pagination.nav.indicator.spacing}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{pagination.nav.indicator.spacing}" + }, + "name": "token-pagination-nav-indicator-spacing", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "indicator", + "spacing" + ] + }, + "token-pagination-child-spacing-vertical": { + "key": "{pagination.child.spacing.vertical}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{pagination.child.spacing.vertical}" + }, + "name": "token-pagination-child-spacing-vertical", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "child", + "spacing", + "vertical" + ] + }, + "token-pagination-child-spacing-horizontal": { + "key": "{pagination.child.spacing.horizontal}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "key": "{pagination.child.spacing.horizontal}" + }, + "name": "token-pagination-child-spacing-horizontal", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "child", + "spacing", + "horizontal" + ] + }, + "token-rich-tooltip-bubble-max-width": { + "key": "{rich-tooltip.bubble.max-width}", + "$type": "dimension", + "$value": "288px", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "original": { + "$type": "dimension", + "$value": "288", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "key": "{rich-tooltip.bubble.max-width}" + }, + "name": "token-rich-tooltip-bubble-max-width", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "max-width" + ] + }, + "token-rich-tooltip-bubble-border-color": { + "key": "{rich-tooltip.bubble.border.color}", + "$value": "#e0e0e0", + "$modes": { + "default": "#52525233", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#e0e0e0", + "cds-g100": "#e0e0e0" + }, + "original": { + "$value": "{color.palette.alpha-200}", + "$modes": { + "default": "{elevation.higher.border.color}", + "cds-g0": "{color.palette.alpha-200}", + "cds-g10": "{color.palette.alpha-200}", + "cds-g90": "{color.palette.alpha-200}", + "cds-g100": "{color.palette.alpha-200}" + }, + "key": "{rich-tooltip.bubble.border.color}" + }, + "name": "token-rich-tooltip-bubble-border-color", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "border", + "color" + ] + }, + "token-rich-tooltip-bubble-border-radius": { + "key": "{rich-tooltip.bubble.border.radius}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "key": "{rich-tooltip.bubble.border.radius}" + }, + "name": "token-rich-tooltip-bubble-border-radius", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "border", + "radius" + ] + }, + "token-rich-tooltip-bubble-arrow-size": { + "key": "{rich-tooltip.bubble.arrow.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{rich-tooltip.bubble.arrow.size}" + }, + "name": "token-rich-tooltip-bubble-arrow-size", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "arrow", + "size" + ] + }, + "token-rich-tooltip-toggle-gap-horizontal": { + "key": "{rich-tooltip.toggle.gap.horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{rich-tooltip.toggle.gap.horizontal}" + }, + "name": "token-rich-tooltip-toggle-gap-horizontal", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "gap", + "horizontal" + ] + }, + "token-rich-tooltip-toggle-foreground-color-default": { + "key": "{rich-tooltip.toggle.foreground.color.default}", + "$value": "#525252", + "$modes": { + "default": "#161616", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$value": "{carbon.themes.g10.textSecondary}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.default}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-default", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "default" + ] + }, + "token-rich-tooltip-toggle-foreground-color-hover": { + "key": "{rich-tooltip.toggle.foreground.color.hover}", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$value": "{carbon.themes.g10.textPrimary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.hover}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-hover", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "hover" + ] + }, + "token-rich-tooltip-toggle-foreground-color-active": { + "key": "{rich-tooltip.toggle.foreground.color.active}", + "$value": "#525252", + "$modes": { + "default": "#525252", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$value": "{carbon.themes.g10.textSecondary}", + "$modes": { + "default": "{color.foreground.faint}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.active}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-active", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "active" + ] + }, + "token-rich-tooltip-toggle-icon-size": { + "key": "{rich-tooltip.toggle.icon.size}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, + "original": { + "$type": "dimension", + "$value": "14", + "unit": "px", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, + "key": "{rich-tooltip.toggle.icon.size}" + }, + "name": "token-rich-tooltip-toggle-icon-size", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "icon", + "size" + ] + }, + "token-tabs-tab-height-medium": { + "key": "{tabs.tab.height.medium}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{tabs.tab.height.medium}" + }, + "name": "token-tabs-tab-height-medium", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "height", + "medium" + ] + }, + "token-tabs-tab-height-large": { + "key": "{tabs.tab.height.large}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{tabs.tab.height.large}" + }, + "name": "token-tabs-tab-height-large", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "height", + "large" + ] + }, + "token-tabs-tab-padding-horizontal-medium": { + "key": "{tabs.tab.padding.horizontal.medium}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{tabs.tab.padding.horizontal.medium}" + }, + "name": "token-tabs-tab-padding-horizontal-medium", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "padding", + "horizontal", + "medium" + ] + }, + "token-tabs-tab-padding-horizontal-large": { + "key": "{tabs.tab.padding.horizontal.large}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "key": "{tabs.tab.padding.horizontal.large}" + }, + "name": "token-tabs-tab-padding-horizontal-large", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "padding", + "horizontal", + "large" + ] + }, + "token-tabs-tab-padding-vertical": { + "key": "{tabs.tab.padding.vertical}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "key": "{tabs.tab.padding.vertical}" + }, + "name": "token-tabs-tab-padding-vertical", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "padding", + "vertical" + ] + }, + "token-tabs-tab-border-radius": { + "key": "{tabs.tab.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{tabs.tab.border-radius}" + }, + "name": "token-tabs-tab-border-radius", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "border-radius" + ] + }, + "token-tabs-tab-focus-inset": { + "key": "{tabs.tab.focus-inset}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{tabs.tab.focus-inset}" + }, + "name": "token-tabs-tab-focus-inset", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "focus-inset" + ] + }, + "token-tabs-tab-gutter": { + "key": "{tabs.tab.gutter}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{tabs.tab.gutter}" + }, + "name": "token-tabs-tab-gutter", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "gutter" + ] + }, + "token-tabs-indicator-height": { + "key": "{tabs.indicator.height}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{tabs.indicator.height}" + }, + "name": "token-tabs-indicator-height", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "indicator", + "height" + ] + }, + "token-tabs-indicator-transition-function": { + "key": "{tabs.indicator.transition.function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.5, 1, 0.89, 1)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.5, + 1, + 0.89, + 1 + ], + "key": "{tabs.indicator.transition.function}" + }, + "name": "token-tabs-indicator-transition-function", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "indicator", + "transition", + "function" + ] + }, + "token-tabs-indicator-transition-duration": { + "key": "{tabs.indicator.transition.duration}", + "$type": "duration", + "$value": "0.6s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.6", + "unit": "s", + "key": "{tabs.indicator.transition.duration}" + }, + "name": "token-tabs-indicator-transition-duration", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "indicator", + "transition", + "duration" + ] + }, + "token-tabs-divider-height": { + "key": "{tabs.divider.height}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{tabs.divider.height}" + }, + "name": "token-tabs-divider-height", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "divider", + "height" + ] + }, + "token-tooltip-max-width": { + "key": "{tooltip.max-width}", + "$type": "dimension", + "$value": "288px", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "original": { + "$type": "dimension", + "$value": "288", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "key": "{tooltip.max-width}" + }, + "name": "token-tooltip-max-width", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "max-width" + ] + }, + "token-tooltip-padding-horizontal": { + "key": "{tooltip.padding.horizontal}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16px", + "cds-g10": "16px", + "cds-g90": "16px", + "cds-g100": "16px" + }, + "original": { + "$type": "dimension", + "$value": "{carbon.themes.g10.spacing05}", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "{carbon.themes.white.spacing05}", + "cds-g10": "{carbon.themes.g10.spacing05}", + "cds-g90": "{carbon.themes.g90.spacing05}", + "cds-g100": "{carbon.themes.g100.spacing05}" + }, + "key": "{tooltip.padding.horizontal}" + }, + "name": "token-tooltip-padding-horizontal", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "horizontal" + ] + }, + "token-tooltip-padding-vertical": { + "key": "{tooltip.padding.vertical}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "16px", + "cds-g10": "16px", + "cds-g90": "16px", + "cds-g100": "16px" + }, + "original": { + "$type": "dimension", + "$value": "{carbon.themes.g10.spacing05}", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "{carbon.themes.white.spacing05}", + "cds-g10": "{carbon.themes.g10.spacing05}", + "cds-g90": "{carbon.themes.g90.spacing05}", + "cds-g100": "{carbon.themes.g100.spacing05}" + }, + "key": "{tooltip.padding.vertical}" + }, + "name": "token-tooltip-padding-vertical", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "vertical" + ] + }, + "token-tooltip-border-radius": { + "key": "{tooltip.border.radius}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "key": "{tooltip.border.radius}" + }, + "name": "token-tooltip-border-radius", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "border", + "radius" + ] + }, + "token-tooltip-caret-clip-path": { + "key": "{tooltip.caret.clip-path}", + "$value": "polygon(0 100%, 50% 0, 100% 100%)", + "$modes": { + "default": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "cds-g0": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g10": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g90": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g100": "polygon(0 100%, 50% 0, 100% 100%)" + }, + "original": { + "$value": "polygon(0 100%, 50% 0, 100% 100%)", + "$modes": { + "default": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "cds-g0": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g10": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g90": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g100": "polygon(0 100%, 50% 0, 100% 100%)" + }, + "key": "{tooltip.caret.clip-path}" + }, + "name": "token-tooltip-caret-clip-path", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "clip-path" + ] + }, + "token-tooltip-caret-height": { + "key": "{tooltip.caret.height}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "7", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "7", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "key": "{tooltip.caret.height}" + }, + "name": "token-tooltip-caret-height", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "height" + ] + }, + "token-tooltip-caret-width": { + "key": "{tooltip.caret.width}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{tooltip.caret.width}" + }, + "name": "token-tooltip-caret-width", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "width" + ] + }, + "token-tooltip-focus-offset": { + "key": "{tooltip.focus-offset}", + "$type": "dimension", + "$value": "-2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "-2", + "unit": "px", + "key": "{tooltip.focus-offset}" + }, + "name": "token-tooltip-focus-offset", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "focus-offset" + ] + }, + "token-tooltip-transition-function": { + "key": "{tooltip.transition.function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.54, 1.5, 0.38, 1.11)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.54, + 1.5, + 0.38, + 1.11 + ], + "key": "{tooltip.transition.function}" + }, + "name": "token-tooltip-transition-function", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "transition", + "function" + ] + }, + "token-typography-font-stack-display": { + "key": "{typography.font-stack.display}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.sans.display.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.font-stack.display}" + }, + "name": "token-typography-font-stack-display", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-stack", + "display" + ] + }, + "token-typography-font-stack-text": { + "key": "{typography.font-stack.text}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.sans.text.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.font-stack.text}" + }, + "name": "token-typography-font-stack-text", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-stack", + "text" + ] + }, + "token-typography-font-stack-code": { + "key": "{typography.font-stack.code}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.monospace.code.combined}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.font-stack.code}" + }, + "name": "token-typography-font-stack-code", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-stack", + "code" + ] + }, + "token-typography-font-weight-regular": { + "key": "{typography.font-weight.regular}", + "$type": "font-weight", + "$value": 400, + "$modes": { + "default": "400", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "default": "400", + "cds-g0": "{carbon.typography.font-weight.regular}", + "cds-g10": "{carbon.typography.font-weight.regular}", + "cds-g90": "{carbon.typography.font-weight.regular}", + "cds-g100": "{carbon.typography.font-weight.regular}" + }, + "key": "{typography.font-weight.regular}" + }, + "name": "token-typography-font-weight-regular", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "regular" + ] + }, + "token-typography-font-weight-medium": { + "key": "{typography.font-weight.medium}", + "$type": "font-weight", + "$value": 400, + "$modes": { + "default": "500", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "default": "500", + "cds-g0": "{carbon.typography.font-weight.regular}", + "cds-g10": "{carbon.typography.font-weight.regular}", + "cds-g90": "{carbon.typography.font-weight.regular}", + "cds-g100": "{carbon.typography.font-weight.regular}" + }, + "key": "{typography.font-weight.medium}" + }, + "name": "token-typography-font-weight-medium", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "medium" + ] + }, + "token-typography-font-weight-semibold": { + "key": "{typography.font-weight.semibold}", + "$type": "font-weight", + "$value": 600, + "$modes": { + "default": "600", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "default": "600", + "cds-g0": "{carbon.typography.font-weight.semibold}", + "cds-g10": "{carbon.typography.font-weight.semibold}", + "cds-g90": "{carbon.typography.font-weight.semibold}", + "cds-g100": "{carbon.typography.font-weight.semibold}" + }, + "key": "{typography.font-weight.semibold}" + }, + "name": "token-typography-font-weight-semibold", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "semibold" + ] + }, + "token-typography-font-weight-bold": { + "key": "{typography.font-weight.bold}", + "$type": "font-weight", + "$value": 600, + "$modes": { + "default": "700", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "default": "700", + "cds-g0": "{carbon.typography.font-weight.semibold}", + "cds-g10": "{carbon.typography.font-weight.semibold}", + "cds-g90": "{carbon.typography.font-weight.semibold}", + "cds-g100": "{carbon.typography.font-weight.semibold}" + }, + "key": "{typography.font-weight.bold}" + }, + "name": "token-typography-font-weight-bold", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "bold" + ] + }, + "token-typography-display-500-font-family": { + "key": "{typography.display-500.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-500.font-family}" + }, + "name": "token-typography-display-500-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "font-family" + ] + }, + "token-typography-display-500-font-size": { + "key": "{typography.display-500.font-size}", + "$type": "font-size", + "$value": "2rem", + "unit": "px", + "comment": "30px/1.875rem", + "$modes": { + "default": "30", + "cds-g0": "2rem", + "cds-g10": "2rem", + "cds-g90": "2rem", + "cds-g100": "2rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading05.font-size}", + "unit": "px", + "comment": "30px/1.875rem", + "$modes": { + "default": "30", + "cds-g0": "{carbon.typography.heading05.font-size}", + "cds-g10": "{carbon.typography.heading05.font-size}", + "cds-g90": "{carbon.typography.heading05.font-size}", + "cds-g100": "{carbon.typography.heading05.font-size}" + }, + "key": "{typography.display-500.font-size}" + }, + "name": "token-typography-display-500-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "font-size" + ] + }, + "token-typography-display-500-line-height": { + "key": "{typography.display-500.line-height}", + "$type": "number", + "$value": 1.25, + "comment": "38px", + "$modes": { + "default": 1.2666, + "cds-g0": 1.25, + "cds-g10": 1.25, + "cds-g90": 1.25, + "cds-g100": 1.25 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading05.line-height}", + "comment": "38px", + "$modes": { + "default": 1.2666, + "cds-g0": "{carbon.typography.heading05.line-height}", + "cds-g10": "{carbon.typography.heading05.line-height}", + "cds-g90": "{carbon.typography.heading05.line-height}", + "cds-g100": "{carbon.typography.heading05.line-height}" + }, + "key": "{typography.display-500.line-height}" + }, + "name": "token-typography-display-500-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "line-height" + ] + }, + "token-typography-display-500-letter-spacing": { + "key": "{typography.display-500.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading05.letter-spacing}", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading05.letter-spacing}", + "cds-g10": "{carbon.typography.heading05.letter-spacing}", + "cds-g90": "{carbon.typography.heading05.letter-spacing}", + "cds-g100": "{carbon.typography.heading05.letter-spacing}" + }, + "key": "{typography.display-500.letter-spacing}" + }, + "name": "token-typography-display-500-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "letter-spacing" + ] + }, + "token-typography-display-400-font-family": { + "key": "{typography.display-400.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-400.font-family}" + }, + "name": "token-typography-display-400-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "font-family" + ] + }, + "token-typography-display-400-font-size": { + "key": "{typography.display-400.font-size}", + "$type": "font-size", + "$value": "1.75rem", + "unit": "px", + "comment": "24px/1.5rem", + "$modes": { + "default": "24", + "cds-g0": "1.75rem", + "cds-g10": "1.75rem", + "cds-g90": "1.75rem", + "cds-g100": "1.75rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading04.font-size}", + "unit": "px", + "comment": "24px/1.5rem", + "$modes": { + "default": "24", + "cds-g0": "{carbon.typography.heading04.font-size}", + "cds-g10": "{carbon.typography.heading04.font-size}", + "cds-g90": "{carbon.typography.heading04.font-size}", + "cds-g100": "{carbon.typography.heading04.font-size}" + }, + "key": "{typography.display-400.font-size}" + }, + "name": "token-typography-display-400-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "font-size" + ] + }, + "token-typography-display-400-line-height": { + "key": "{typography.display-400.line-height}", + "$type": "number", + "$value": 1.28572, + "comment": "32px", + "$modes": { + "default": 1.3333, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading04.line-height}", + "comment": "32px", + "$modes": { + "default": 1.3333, + "cds-g0": "{carbon.typography.heading04.line-height}", + "cds-g10": "{carbon.typography.heading04.line-height}", + "cds-g90": "{carbon.typography.heading04.line-height}", + "cds-g100": "{carbon.typography.heading04.line-height}" + }, + "key": "{typography.display-400.line-height}" + }, + "name": "token-typography-display-400-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "line-height" + ] + }, + "token-typography-display-400-letter-spacing": { + "key": "{typography.display-400.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading04.letter-spacing}", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.heading04.letter-spacing}", + "cds-g10": "{carbon.typography.heading04.letter-spacing}", + "cds-g90": "{carbon.typography.heading04.letter-spacing}", + "cds-g100": "{carbon.typography.heading04.letter-spacing}" + }, + "key": "{typography.display-400.letter-spacing}" + }, + "name": "token-typography-display-400-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "letter-spacing" + ] + }, + "token-typography-display-300-font-family": { + "key": "{typography.display-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-300.font-family}" + }, + "name": "token-typography-display-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "font-family" + ] + }, + "token-typography-display-300-font-size": { + "key": "{typography.display-300.font-size}", + "$type": "font-size", + "$value": "1.25rem", + "unit": "px", + "comment": "18px/1.125rem", + "$modes": { + "default": "18", + "cds-g0": "1.25rem", + "cds-g10": "1.25rem", + "cds-g90": "1.25rem", + "cds-g100": "1.25rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading03.font-size}", + "unit": "px", + "comment": "18px/1.125rem", + "$modes": { + "default": "18", + "cds-g0": "{carbon.typography.heading03.font-size}", + "cds-g10": "{carbon.typography.heading03.font-size}", + "cds-g90": "{carbon.typography.heading03.font-size}", + "cds-g100": "{carbon.typography.heading03.font-size}" + }, + "key": "{typography.display-300.font-size}" + }, + "name": "token-typography-display-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "font-size" + ] + }, + "token-typography-display-300-line-height": { + "key": "{typography.display-300.line-height}", + "$type": "number", + "$value": 1.4, + "comment": "24px", + "$modes": { + "default": 1.3333, + "cds-g0": 1.4, + "cds-g10": 1.4, + "cds-g90": 1.4, + "cds-g100": 1.4 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading03.line-height}", + "comment": "24px", + "$modes": { + "default": 1.3333, + "cds-g0": "{carbon.typography.heading03.line-height}", + "cds-g10": "{carbon.typography.heading03.line-height}", + "cds-g90": "{carbon.typography.heading03.line-height}", + "cds-g100": "{carbon.typography.heading03.line-height}" + }, + "key": "{typography.display-300.line-height}" + }, + "name": "token-typography-display-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "line-height" + ] + }, + "token-typography-display-300-letter-spacing": { + "key": "{typography.display-300.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading03.letter-spacing}", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading03.letter-spacing}", + "cds-g10": "{carbon.typography.heading03.letter-spacing}", + "cds-g90": "{carbon.typography.heading03.letter-spacing}", + "cds-g100": "{carbon.typography.heading03.letter-spacing}" + }, + "key": "{typography.display-300.letter-spacing}" + }, + "name": "token-typography-display-300-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "letter-spacing" + ] + }, + "token-typography-display-200-font-family": { + "key": "{typography.display-200.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-200.font-family}" + }, + "name": "token-typography-display-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "font-family" + ] + }, + "token-typography-display-200-font-size": { + "key": "{typography.display-200.font-size}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading02.font-size}", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.heading02.font-size}", + "cds-g10": "{carbon.typography.heading02.font-size}", + "cds-g90": "{carbon.typography.heading02.font-size}", + "cds-g100": "{carbon.typography.heading02.font-size}" + }, + "key": "{typography.display-200.font-size}" + }, + "name": "token-typography-display-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "font-size" + ] + }, + "token-typography-display-200-line-height": { + "key": "{typography.display-200.line-height}", + "$type": "number", + "$value": 1.5, + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading02.line-height}", + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": "{carbon.typography.heading02.line-height}", + "cds-g10": "{carbon.typography.heading02.line-height}", + "cds-g90": "{carbon.typography.heading02.line-height}", + "cds-g100": "{carbon.typography.heading02.line-height}" + }, + "key": "{typography.display-200.line-height}" + }, + "name": "token-typography-display-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "line-height" + ] + }, + "token-typography-display-200-letter-spacing": { + "key": "{typography.display-200.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading02.letter-spacing}", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading02.letter-spacing}", + "cds-g10": "{carbon.typography.heading02.letter-spacing}", + "cds-g90": "{carbon.typography.heading02.letter-spacing}", + "cds-g100": "{carbon.typography.heading02.letter-spacing}" + }, + "key": "{typography.display-200.letter-spacing}" + }, + "name": "token-typography-display-200-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "letter-spacing" + ] + }, + "token-typography-display-100-font-family": { + "key": "{typography.display-100.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-100.font-family}" + }, + "name": "token-typography-display-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "font-family" + ] + }, + "token-typography-display-100-font-size": { + "key": "{typography.display-100.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading01.font-size}", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.heading01.font-size}", + "cds-g10": "{carbon.typography.heading01.font-size}", + "cds-g90": "{carbon.typography.heading01.font-size}", + "cds-g100": "{carbon.typography.heading01.font-size}" + }, + "key": "{typography.display-100.font-size}" + }, + "name": "token-typography-display-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "font-size" + ] + }, + "token-typography-display-100-line-height": { + "key": "{typography.display-100.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading01.line-height}", + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": "{carbon.typography.heading01.line-height}", + "cds-g10": "{carbon.typography.heading01.line-height}", + "cds-g90": "{carbon.typography.heading01.line-height}", + "cds-g100": "{carbon.typography.heading01.line-height}" + }, + "key": "{typography.display-100.line-height}" + }, + "name": "token-typography-display-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "line-height" + ] + }, + "token-typography-display-100-letter-spacing": { + "key": "{typography.display-100.letter-spacing}", + "$type": "letter-spacing", + "$value": "0.16px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0.16px", + "cds-g10": "0.16px", + "cds-g90": "0.16px", + "cds-g100": "0.16px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading01.letter-spacing}", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.heading01.letter-spacing}", + "cds-g10": "{carbon.typography.heading01.letter-spacing}", + "cds-g90": "{carbon.typography.heading01.letter-spacing}", + "cds-g100": "{carbon.typography.heading01.letter-spacing}" + }, + "key": "{typography.display-100.letter-spacing}" + }, + "name": "token-typography-display-100-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "letter-spacing" + ] + }, + "token-typography-body-300-font-family": { + "key": "{typography.body-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-300.font-family}" + }, + "name": "token-typography-body-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "font-family" + ] + }, + "token-typography-body-300-font-size": { + "key": "{typography.body-300.font-size}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.body02.font-size}", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.body02.font-size}", + "cds-g10": "{carbon.typography.body02.font-size}", + "cds-g90": "{carbon.typography.body02.font-size}", + "cds-g100": "{carbon.typography.body02.font-size}" + }, + "key": "{typography.body-300.font-size}" + }, + "name": "token-typography-body-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "font-size" + ] + }, + "token-typography-body-300-line-height": { + "key": "{typography.body-300.line-height}", + "$type": "number", + "$value": 1.5, + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.body02.line-height}", + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": "{carbon.typography.body02.line-height}", + "cds-g10": "{carbon.typography.body02.line-height}", + "cds-g90": "{carbon.typography.body02.line-height}", + "cds-g100": "{carbon.typography.body02.line-height}" + }, + "key": "{typography.body-300.line-height}" + }, + "name": "token-typography-body-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "line-height" + ] + }, + "token-typography-body-200-font-family": { + "key": "{typography.body-200.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-200.font-family}" + }, + "name": "token-typography-body-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "font-family" + ] + }, + "token-typography-body-200-font-size": { + "key": "{typography.body-200.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.body01.font-size}", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "{carbon.typography.body01.font-size}", + "cds-g10": "{carbon.typography.body01.font-size}", + "cds-g90": "{carbon.typography.body01.font-size}", + "cds-g100": "{carbon.typography.body01.font-size}" + }, + "key": "{typography.body-200.font-size}" + }, + "name": "token-typography-body-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "font-size" + ] + }, + "token-typography-body-200-line-height": { + "key": "{typography.body-200.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "20px", + "$modes": { + "default": 1.4286, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.body01.line-height}", + "comment": "20px", + "$modes": { + "default": 1.4286, + "cds-g0": "{carbon.typography.body01.line-height}", + "cds-g10": "{carbon.typography.body01.line-height}", + "cds-g90": "{carbon.typography.body01.line-height}", + "cds-g100": "{carbon.typography.body01.line-height}" + }, + "key": "{typography.body-200.line-height}" + }, + "name": "token-typography-body-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "line-height" + ] + }, + "token-typography-body-100-font-family": { + "key": "{typography.body-100.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-100.font-family}" + }, + "name": "token-typography-body-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "font-family" + ] + }, + "token-typography-body-100-font-size": { + "key": "{typography.body-100.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.bodyCompact01.font-size}", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.bodyCompact01.font-size}", + "cds-g10": "{carbon.typography.bodyCompact01.font-size}", + "cds-g90": "{carbon.typography.bodyCompact01.font-size}", + "cds-g100": "{carbon.typography.bodyCompact01.font-size}" + }, + "key": "{typography.body-100.font-size}" + }, + "name": "token-typography-body-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "font-size" + ] + }, + "token-typography-body-100-line-height": { + "key": "{typography.body-100.line-height}", + "$type": "number", + "$value": 1.28572, + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.bodyCompact01.line-height}", + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": "{carbon.typography.bodyCompact01.line-height}", + "cds-g10": "{carbon.typography.bodyCompact01.line-height}", + "cds-g90": "{carbon.typography.bodyCompact01.line-height}", + "cds-g100": "{carbon.typography.bodyCompact01.line-height}" + }, + "key": "{typography.body-100.line-height}" + }, + "name": "token-typography-body-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "line-height" + ] + }, + "token-typography-code-300-font-family": { + "key": "{typography.code-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-300.font-family}" + }, + "name": "token-typography-code-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "font-family" + ] + }, + "token-typography-code-300-font-size": { + "key": "{typography.code-300.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.code02.font-size}", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-300.font-size}" + }, + "name": "token-typography-code-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "font-size" + ] + }, + "token-typography-code-300-line-height": { + "key": "{typography.code-300.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "20px", + "$modes": { + "default": 1.25, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.code02.line-height}", + "comment": "20px", + "$modes": { + "default": 1.25, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-300.line-height}" + }, + "name": "token-typography-code-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "line-height" + ] + }, + "token-typography-code-200-font-family": { + "key": "{typography.code-200.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-200.font-family}" + }, + "name": "token-typography-code-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "font-family" + ] + }, + "token-typography-code-200-font-size": { + "key": "{typography.code-200.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.code02.font-size}", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-200.font-size}" + }, + "name": "token-typography-code-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "font-size" + ] + }, + "token-typography-code-200-line-height": { + "key": "{typography.code-200.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "18px", + "$modes": { + "default": 1.125, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.code02.line-height}", + "comment": "18px", + "$modes": { + "default": 1.125, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-200.line-height}" + }, + "name": "token-typography-code-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "line-height" + ] + }, + "token-typography-code-100-font-family": { + "key": "{typography.code-100.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-100.font-family}" + }, + "name": "token-typography-code-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "font-family" + ] + }, + "token-typography-code-100-font-size": { + "key": "{typography.code-100.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.code02.font-size}", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-100.font-size}" + }, + "name": "token-typography-code-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "font-size" + ] + }, + "token-typography-code-100-line-height": { + "key": "{typography.code-100.line-height}", + "$type": "number", + "$value": 1.33333, + "comment": "16px", + "$modes": { + "default": 1.23, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.code01.line-height}", + "comment": "16px", + "$modes": { + "default": 1.23, + "cds-g0": "{carbon.typography.code01.line-height}", + "cds-g10": "{carbon.typography.code01.line-height}", + "cds-g90": "{carbon.typography.code01.line-height}", + "cds-g100": "{carbon.typography.code01.line-height}" + }, + "key": "{typography.code-100.line-height}" + }, + "name": "token-typography-code-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "line-height" + ] + } + }, + "cds-g90": { + "token-border-radius-x-small": { + "key": "{border.radius.x-small}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.x-small}" + }, + "name": "token-border-radius-x-small", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "x-small" + ] + }, + "token-border-radius-small": { + "key": "{border.radius.small}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.small}" + }, + "name": "token-border-radius-small", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "small" + ] + }, + "token-border-radius-medium": { + "key": "{border.radius.medium}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.medium}" + }, + "name": "token-border-radius-medium", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "medium" + ] + }, + "token-border-radius-large": { + "key": "{border.radius.large}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.large}" + }, + "name": "token-border-radius-large", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "large" + ] + }, + "token-border-radius-rounded": { + "key": "{border.radius.rounded}", + "$type": "dimension", + "$value": "1000000000px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1000000000", + "unit": "px", + "key": "{border.radius.rounded}" + }, + "name": "token-border-radius-rounded", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "rounded" + ] + }, + "token-color-palette-blue-500": { + "key": "{color.palette.blue-500}", + "$type": "color", + "$value": "#001141", + "group": "palette", + "$modes": { + "default": "#1c345f", + "cds-g0": "#001141", + "cds-g10": "#001141", + "cds-g90": "#001141", + "cds-g100": "#001141" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.100}", + "group": "palette", + "$modes": { + "default": "#1c345f", + "cds-g0": "{carbon.color.blue.100}", + "cds-g10": "{carbon.color.blue.100}", + "cds-g90": "{carbon.color.blue.100}", + "cds-g100": "{carbon.color.blue.100}" + }, + "key": "{color.palette.blue-500}" + }, + "name": "token-color-palette-blue-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-500" + ] + }, + "token-color-palette-blue-400": { + "key": "{color.palette.blue-400}", + "$type": "color", + "$value": "#002d9c", + "group": "palette", + "$modes": { + "default": "#0046d1", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#002d9c", + "cds-g100": "#002d9c" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.80}", + "group": "palette", + "$modes": { + "default": "#0046d1", + "cds-g0": "{carbon.color.blue.80}", + "cds-g10": "{carbon.color.blue.80}", + "cds-g90": "{carbon.color.blue.80}", + "cds-g100": "{carbon.color.blue.80}" + }, + "key": "{color.palette.blue-400}" + }, + "name": "token-color-palette-blue-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-400" + ] + }, + "token-color-palette-blue-300": { + "key": "{color.palette.blue-300}", + "$type": "color", + "$value": "#0043ce", + "group": "palette", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.70}", + "group": "palette", + "$modes": { + "default": "#0c56e9", + "cds-g0": "{carbon.color.blue.70}", + "cds-g10": "{carbon.color.blue.70}", + "cds-g90": "{carbon.color.blue.70}", + "cds-g100": "{carbon.color.blue.70}" + }, + "key": "{color.palette.blue-300}" + }, + "name": "token-color-palette-blue-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-300" + ] + }, + "token-color-palette-blue-200": { + "key": "{color.palette.blue-200}", + "$type": "color", + "$value": "#0f62fe", + "group": "palette", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.60}", + "group": "palette", + "$modes": { + "default": "#1060ff", + "cds-g0": "{carbon.color.blue.60}", + "cds-g10": "{carbon.color.blue.60}", + "cds-g90": "{carbon.color.blue.60}", + "cds-g100": "{carbon.color.blue.60}" + }, + "key": "{color.palette.blue-200}" + }, + "name": "token-color-palette-blue-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-200" + ] + }, + "token-color-palette-blue-100": { + "key": "{color.palette.blue-100}", + "$type": "color", + "$value": "#d0e2ff", + "group": "palette", + "$modes": { + "default": "#cce3fe", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.20}", + "group": "palette", + "$modes": { + "default": "#cce3fe", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.20}", + "cds-g100": "{carbon.color.blue.20}" + }, + "key": "{color.palette.blue-100}" + }, + "name": "token-color-palette-blue-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-100" + ] + }, + "token-color-palette-blue-50": { + "key": "{color.palette.blue-50}", + "$type": "color", + "$value": "#edf5ff", + "group": "palette", + "$modes": { + "default": "#f2f8ff", + "cds-g0": "#edf5ff", + "cds-g10": "#edf5ff", + "cds-g90": "#edf5ff", + "cds-g100": "#edf5ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.10}", + "group": "palette", + "$modes": { + "default": "#f2f8ff", + "cds-g0": "{carbon.color.blue.10}", + "cds-g10": "{carbon.color.blue.10}", + "cds-g90": "{carbon.color.blue.10}", + "cds-g100": "{carbon.color.blue.10}" + }, + "key": "{color.palette.blue-50}" + }, + "name": "token-color-palette-blue-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-50" + ] + }, + "token-color-palette-purple-500": { + "key": "{color.palette.purple-500}", + "$type": "color", + "$value": "#31135e", + "group": "palette", + "$modes": { + "default": "#42215b", + "cds-g0": "#31135e", + "cds-g10": "#31135e", + "cds-g90": "#31135e", + "cds-g100": "#31135e" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.90}", + "group": "palette", + "$modes": { + "default": "#42215b", + "cds-g0": "{carbon.color.purple.90}", + "cds-g10": "{carbon.color.purple.90}", + "cds-g90": "{carbon.color.purple.90}", + "cds-g100": "{carbon.color.purple.90}" + }, + "key": "{color.palette.purple-500}" + }, + "name": "token-color-palette-purple-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-500" + ] + }, + "token-color-palette-purple-400": { + "key": "{color.palette.purple-400}", + "$type": "color", + "$value": "#6929c4", + "group": "palette", + "$modes": { + "default": "#7b00db", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.70}", + "group": "palette", + "$modes": { + "default": "#7b00db", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, + "key": "{color.palette.purple-400}" + }, + "name": "token-color-palette-purple-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-400" + ] + }, + "token-color-palette-purple-300": { + "key": "{color.palette.purple-300}", + "$type": "color", + "$value": "#8a3ffc", + "group": "palette", + "$modes": { + "default": "#911ced", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#8a3ffc", + "cds-g100": "#8a3ffc" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.60}", + "group": "palette", + "$modes": { + "default": "#911ced", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.60}", + "cds-g100": "{carbon.color.purple.60}" + }, + "key": "{color.palette.purple-300}" + }, + "name": "token-color-palette-purple-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-300" + ] + }, + "token-color-palette-purple-200": { + "key": "{color.palette.purple-200}", + "$type": "color", + "$value": "#a56eff", + "group": "palette", + "$modes": { + "default": "#a737ff", + "cds-g0": "#a56eff", + "cds-g10": "#a56eff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.50}", + "group": "palette", + "$modes": { + "default": "#a737ff", + "cds-g0": "{carbon.color.purple.50}", + "cds-g10": "{carbon.color.purple.50}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, + "key": "{color.palette.purple-200}" + }, + "name": "token-color-palette-purple-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-200" + ] + }, + "token-color-palette-purple-100": { + "key": "{color.palette.purple-100}", + "$type": "color", + "$value": "#e8daff", + "group": "palette", + "$modes": { + "default": "#ead2fe", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.20}", + "group": "palette", + "$modes": { + "default": "#ead2fe", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.20}" + }, + "key": "{color.palette.purple-100}" + }, + "name": "token-color-palette-purple-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-100" + ] + }, + "token-color-palette-purple-50": { + "key": "{color.palette.purple-50}", + "$type": "color", + "$value": "#f6f2ff", + "group": "palette", + "$modes": { + "default": "#f9f2ff", + "cds-g0": "#f6f2ff", + "cds-g10": "#f6f2ff", + "cds-g90": "#f6f2ff", + "cds-g100": "#f6f2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.10}", + "group": "palette", + "$modes": { + "default": "#f9f2ff", + "cds-g0": "{carbon.color.purple.10}", + "cds-g10": "{carbon.color.purple.10}", + "cds-g90": "{carbon.color.purple.10}", + "cds-g100": "{carbon.color.purple.10}" + }, + "key": "{color.palette.purple-50}" + }, + "name": "token-color-palette-purple-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-50" + ] + }, + "token-color-palette-green-500": { + "key": "{color.palette.green-500}", + "$type": "color", + "$value": "#044317", + "group": "palette", + "$modes": { + "default": "#054220", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#044317", + "cds-g100": "#044317" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.80}", + "group": "palette", + "$modes": { + "default": "#054220", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.80}", + "cds-g100": "{carbon.color.green.80}" + }, + "key": "{color.palette.green-500}" + }, + "name": "token-color-palette-green-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-500" + ] + }, + "token-color-palette-green-400": { + "key": "{color.palette.green-400}", + "$type": "color", + "$value": "#0e6027", + "group": "palette", + "$modes": { + "default": "#006619", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.70}", + "group": "palette", + "$modes": { + "default": "#006619", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, + "key": "{color.palette.green-400}" + }, + "name": "token-color-palette-green-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-400" + ] + }, + "token-color-palette-green-300": { + "key": "{color.palette.green-300}", + "$type": "color", + "$value": "#198038", + "group": "palette", + "$modes": { + "default": "#00781e", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#198038", + "cds-g100": "#198038" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.60}", + "group": "palette", + "$modes": { + "default": "#00781e", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.60}", + "cds-g100": "{carbon.color.green.60}" + }, + "key": "{color.palette.green-300}" + }, + "name": "token-color-palette-green-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-300" + ] + }, + "token-color-palette-green-200": { + "key": "{color.palette.green-200}", + "$type": "color", + "$value": "#24a148", + "group": "palette", + "$modes": { + "default": "#008a22", + "cds-g0": "#24a148", + "cds-g10": "#24a148", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.50}", + "group": "palette", + "$modes": { + "default": "#008a22", + "cds-g0": "{carbon.color.green.50}", + "cds-g10": "{carbon.color.green.50}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, + "key": "{color.palette.green-200}" + }, + "name": "token-color-palette-green-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-200" + ] + }, + "token-color-palette-green-100": { + "key": "{color.palette.green-100}", + "$type": "color", + "$value": "#a7f0ba", + "group": "palette", + "$modes": { + "default": "#cceeda", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.20}", + "group": "palette", + "$modes": { + "default": "#cceeda", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, + "key": "{color.palette.green-100}" + }, + "name": "token-color-palette-green-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-100" + ] + }, + "token-color-palette-green-50": { + "key": "{color.palette.green-50}", + "$type": "color", + "$value": "#defbe6", + "group": "palette", + "$modes": { + "default": "#f2fbf6", + "cds-g0": "#defbe6", + "cds-g10": "#defbe6", + "cds-g90": "#defbe6", + "cds-g100": "#defbe6" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.10}", + "group": "palette", + "$modes": { + "default": "#f2fbf6", + "cds-g0": "{carbon.color.green.10}", + "cds-g10": "{carbon.color.green.10}", + "cds-g90": "{carbon.color.green.10}", + "cds-g100": "{carbon.color.green.10}" + }, + "key": "{color.palette.green-50}" + }, + "name": "token-color-palette-green-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-50" + ] + }, + "token-color-palette-amber-500": { + "key": "{color.palette.amber-500}", + "$type": "color", + "$value": "#3e1a00", + "group": "palette", + "$modes": { + "default": "#542800", + "cds-g0": "#3e1a00", + "cds-g10": "#3e1a00", + "cds-g90": "#3e1a00", + "cds-g100": "#3e1a00" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.90}", + "group": "palette", + "$modes": { + "default": "#542800", + "cds-g0": "{carbon.color.orange.90}", + "cds-g10": "{carbon.color.orange.90}", + "cds-g90": "{carbon.color.orange.90}", + "cds-g100": "{carbon.color.orange.90}" + }, + "key": "{color.palette.amber-500}" + }, + "name": "token-color-palette-amber-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-500" + ] + }, + "token-color-palette-amber-400": { + "key": "{color.palette.amber-400}", + "$type": "color", + "$value": "#5e2900", + "group": "palette", + "$modes": { + "default": "#803d00", + "cds-g0": "#5e2900", + "cds-g10": "#5e2900", + "cds-g90": "#5e2900", + "cds-g100": "#5e2900" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.80}", + "group": "palette", + "$modes": { + "default": "#803d00", + "cds-g0": "{carbon.color.orange.80}", + "cds-g10": "{carbon.color.orange.80}", + "cds-g90": "{carbon.color.orange.80}", + "cds-g100": "{carbon.color.orange.80}" + }, + "key": "{color.palette.amber-400}" + }, + "name": "token-color-palette-amber-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-400" + ] + }, + "token-color-palette-amber-300": { + "key": "{color.palette.amber-300}", + "$type": "color", + "$value": "#8a3800", + "group": "palette", + "$modes": { + "default": "#9e4b00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.70}", + "group": "palette", + "$modes": { + "default": "#9e4b00", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, + "key": "{color.palette.amber-300}" + }, + "name": "token-color-palette-amber-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-300" + ] + }, + "token-color-palette-amber-200": { + "key": "{color.palette.amber-200}", + "$type": "color", + "$value": "#ba4e00", + "group": "palette", + "$modes": { + "default": "#bb5a00", + "cds-g0": "#ba4e00", + "cds-g10": "#ba4e00", + "cds-g90": "#ba4e00", + "cds-g100": "#ba4e00" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.60}", + "group": "palette", + "$modes": { + "default": "#bb5a00", + "cds-g0": "{carbon.color.orange.60}", + "cds-g10": "{carbon.color.orange.60}", + "cds-g90": "{carbon.color.orange.60}", + "cds-g100": "{carbon.color.orange.60}" + }, + "key": "{color.palette.amber-200}" + }, + "name": "token-color-palette-amber-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-200" + ] + }, + "token-color-palette-amber-100": { + "key": "{color.palette.amber-100}", + "$type": "color", + "$value": "#ffd9be", + "group": "palette", + "$modes": { + "default": "#fbeabf", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.20}", + "group": "palette", + "$modes": { + "default": "#fbeabf", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "key": "{color.palette.amber-100}" + }, + "name": "token-color-palette-amber-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-100" + ] + }, + "token-color-palette-amber-50": { + "key": "{color.palette.amber-50}", + "$type": "color", + "$value": "#fff2e8", + "group": "palette", + "$modes": { + "default": "#fff9e8", + "cds-g0": "#fff2e8", + "cds-g10": "#fff2e8", + "cds-g90": "#fff2e8", + "cds-g100": "#fff2e8" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.10}", + "group": "palette", + "$modes": { + "default": "#fff9e8", + "cds-g0": "{carbon.color.orange.10}", + "cds-g10": "{carbon.color.orange.10}", + "cds-g90": "{carbon.color.orange.10}", + "cds-g100": "{carbon.color.orange.10}" + }, + "key": "{color.palette.amber-50}" + }, + "name": "token-color-palette-amber-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-50" + ] + }, + "token-color-palette-red-500": { + "key": "{color.palette.red-500}", + "$type": "color", + "$value": "#520408", + "group": "palette", + "$modes": { + "default": "#51130a", + "cds-g0": "#520408", + "cds-g10": "#520408", + "cds-g90": "#520408", + "cds-g100": "#520408" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.90}", + "group": "palette", + "$modes": { + "default": "#51130a", + "cds-g0": "{carbon.color.red.90}", + "cds-g10": "{carbon.color.red.90}", + "cds-g90": "{carbon.color.red.90}", + "cds-g100": "{carbon.color.red.90}" + }, + "key": "{color.palette.red-500}" + }, + "name": "token-color-palette-red-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-500" + ] + }, + "token-color-palette-red-400": { + "key": "{color.palette.red-400}", + "$type": "color", + "$value": "#750e13", + "group": "palette", + "$modes": { + "default": "#940004", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#750e13", + "cds-g100": "#750e13" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.80}", + "group": "palette", + "$modes": { + "default": "#940004", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.80}", + "cds-g100": "{carbon.color.red.80}" + }, + "key": "{color.palette.red-400}" + }, + "name": "token-color-palette-red-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-400" + ] + }, + "token-color-palette-red-300": { + "key": "{color.palette.red-300}", + "$type": "color", + "$value": "#a2191f", + "group": "palette", + "$modes": { + "default": "#c00005", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.70}", + "group": "palette", + "$modes": { + "default": "#c00005", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, + "key": "{color.palette.red-300}" + }, + "name": "token-color-palette-red-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-300" + ] + }, + "token-color-palette-red-200": { + "key": "{color.palette.red-200}", + "$type": "color", + "$value": "#da1e28", + "group": "palette", + "$modes": { + "default": "#e52228", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.60}", + "group": "palette", + "$modes": { + "default": "#e52228", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.60}", + "cds-g100": "{carbon.color.red.60}" + }, + "key": "{color.palette.red-200}" + }, + "name": "token-color-palette-red-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-200" + ] + }, + "token-color-palette-red-100": { + "key": "{color.palette.red-100}", + "$type": "color", + "$value": "#ffd7d9", + "group": "palette", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.20}", + "group": "palette", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, + "key": "{color.palette.red-100}" + }, + "name": "token-color-palette-red-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-100" + ] + }, + "token-color-palette-red-50": { + "key": "{color.palette.red-50}", + "$type": "color", + "$value": "#fff1f1", + "group": "palette", + "$modes": { + "default": "#fff5f5", + "cds-g0": "#fff1f1", + "cds-g10": "#fff1f1", + "cds-g90": "#fff1f1", + "cds-g100": "#fff1f1" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.10}", + "group": "palette", + "$modes": { + "default": "#fff5f5", + "cds-g0": "{carbon.color.red.10}", + "cds-g10": "{carbon.color.red.10}", + "cds-g90": "{carbon.color.red.10}", + "cds-g100": "{carbon.color.red.10}" + }, + "key": "{color.palette.red-50}" + }, + "name": "token-color-palette-red-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-50" + ] + }, + "token-color-palette-neutral-700": { + "key": "{color.palette.neutral-700}", + "$type": "color", + "$value": "#161616", + "group": "palette", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.100}", + "group": "palette", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "{carbon.color.gray.100}", + "cds-g10": "{carbon.color.gray.100}", + "cds-g90": "{carbon.color.gray.100}", + "cds-g100": "{carbon.color.gray.100}" + }, + "key": "{color.palette.neutral-700}" + }, + "name": "token-color-palette-neutral-700", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-700" + ] + }, + "token-color-palette-neutral-600": { + "key": "{color.palette.neutral-600}", + "$type": "color", + "$value": "#393939", + "group": "palette", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#393939", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.80}", + "group": "palette", + "$modes": { + "default": "#3b3d45", + "cds-g0": "{carbon.color.gray.80}", + "cds-g10": "{carbon.color.gray.80}", + "cds-g90": "{carbon.color.gray.80}", + "cds-g100": "{carbon.color.gray.80}" + }, + "key": "{color.palette.neutral-600}" + }, + "name": "token-color-palette-neutral-600", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-600" + ] + }, + "token-color-palette-neutral-500": { + "key": "{color.palette.neutral-500}", + "$type": "color", + "$value": "#525252", + "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.70}", + "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": "{carbon.color.gray.70}", + "cds-g10": "{carbon.color.gray.70}", + "cds-g90": "{carbon.color.gray.70}", + "cds-g100": "{carbon.color.gray.70}" + }, + "key": "{color.palette.neutral-500}" + }, + "name": "token-color-palette-neutral-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-500" + ] + }, + "token-color-palette-neutral-400": { + "key": "{color.palette.neutral-400}", + "$type": "color", + "$value": "#8d8d8d", + "group": "palette", + "$modes": { + "default": "#8c909c", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.50}", + "group": "palette", + "$modes": { + "default": "#8c909c", + "cds-g0": "{carbon.color.gray.50}", + "cds-g10": "{carbon.color.gray.50}", + "cds-g90": "{carbon.color.gray.50}", + "cds-g100": "{carbon.color.gray.50}" + }, + "key": "{color.palette.neutral-400}" + }, + "name": "token-color-palette-neutral-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-400" + ] + }, + "token-color-palette-neutral-300": { + "key": "{color.palette.neutral-300}", + "$type": "color", + "$value": "#a8a8a8", + "group": "palette", + "$modes": { + "default": "#c2c5cb", + "cds-g0": "#a8a8a8", + "cds-g10": "#a8a8a8", + "cds-g90": "#a8a8a8", + "cds-g100": "#a8a8a8" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.40}", + "group": "palette", + "$modes": { + "default": "#c2c5cb", + "cds-g0": "{carbon.color.gray.40}", + "cds-g10": "{carbon.color.gray.40}", + "cds-g90": "{carbon.color.gray.40}", + "cds-g100": "{carbon.color.gray.40}" + }, + "key": "{color.palette.neutral-300}" + }, + "name": "token-color-palette-neutral-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-300" + ] + }, + "token-color-palette-neutral-200": { + "key": "{color.palette.neutral-200}", + "$type": "color", + "$value": "#c6c6c6", + "group": "palette", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.30}", + "group": "palette", + "$modes": { + "default": "#dedfe3", + "cds-g0": "{carbon.color.gray.30}", + "cds-g10": "{carbon.color.gray.30}", + "cds-g90": "{carbon.color.gray.30}", + "cds-g100": "{carbon.color.gray.30}" + }, + "key": "{color.palette.neutral-200}" + }, + "name": "token-color-palette-neutral-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-200" + ] + }, + "token-color-palette-neutral-100": { + "key": "{color.palette.neutral-100}", + "$type": "color", + "$value": "#e0e0e0", + "group": "palette", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#e0e0e0", + "cds-g100": "#e0e0e0" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.20}", + "group": "palette", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "{carbon.color.gray.20}", + "cds-g10": "{carbon.color.gray.20}", + "cds-g90": "{carbon.color.gray.20}", + "cds-g100": "{carbon.color.gray.20}" + }, + "key": "{color.palette.neutral-100}" + }, + "name": "token-color-palette-neutral-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-100" + ] + }, + "token-color-palette-neutral-50": { + "key": "{color.palette.neutral-50}", + "$type": "color", + "$value": "#f4f4f4", + "group": "palette", + "$modes": { + "default": "#fafafa", + "cds-g0": "#f4f4f4", + "cds-g10": "#f4f4f4", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.10}", + "group": "palette", + "$modes": { + "default": "#fafafa", + "cds-g0": "{carbon.color.gray.10}", + "cds-g10": "{carbon.color.gray.10}", + "cds-g90": "{carbon.color.gray.10}", + "cds-g100": "{carbon.color.gray.10}" + }, + "key": "{color.palette.neutral-50}" + }, + "name": "token-color-palette-neutral-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-50" + ] + }, + "token-color-palette-neutral-0": { + "key": "{color.palette.neutral-0}", + "$type": "color", + "$value": "#ffffff", + "group": "palette", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.white.0}", + "group": "palette", + "$modes": { + "default": "#ffffff", + "cds-g0": "{carbon.color.white.0}", + "cds-g10": "{carbon.color.white.0}", + "cds-g90": "{carbon.color.white.0}", + "cds-g100": "{carbon.color.white.0}" + }, + "key": "{color.palette.neutral-0}" + }, + "name": "token-color-palette-neutral-0", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-0" + ] + }, + "token-color-palette-alpha-300": { + "key": "{color.palette.alpha-300}", + "$type": "color", + "$value": "#8d8d8d", + "group": "palette", + "$modes": { + "default": "#393939", + "cds-g0": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#6f6f6f", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.50}", + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-600}", + "cds-g0": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.60}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "key": "{color.palette.alpha-300}" + }, + "name": "token-color-palette-alpha-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "alpha-300" + ] + }, + "token-color-palette-alpha-200": { + "key": "{color.palette.alpha-200}", + "$type": "color", + "$value": "#6f6f6f", + "group": "palette", + "$modes": { + "default": "#525252", + "cds-g0": { + "$value": "#c6c6c6", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#e0e0e0", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#6f6f6f", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#525252", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.60}", + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": { + "$value": "{carbon.color.gray.30}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.20}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.60}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.70}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "key": "{color.palette.alpha-200}" + }, + "name": "token-color-palette-alpha-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "alpha-200" + ] + }, + "token-color-palette-alpha-100": { + "key": "{color.palette.alpha-100}", + "$type": "color", + "$value": "#525252", + "group": "palette", + "$modes": { + "default": "#525252", + "cds-g0": { + "$value": "#e0e0e0", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#c6c6c6", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#525252", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#393939", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.70}", + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": { + "$value": "{carbon.color.gray.20}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.30}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.70}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.80}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "key": "{color.palette.alpha-100}" + }, + "name": "token-color-palette-alpha-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "alpha-100" + ] + }, + "token-color-border-primary": { + "key": "{color.border.primary}", + "$type": "color", + "$value": "#8d8d8d", + "group": "semantic", + "$modes": { + "default": "#6f6f6f", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.borderSubtle03}", + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-200}", + "cds-g0": "{carbon.themes.white.borderSubtle03}", + "cds-g10": "{carbon.themes.g10.borderSubtle03}", + "cds-g90": "{carbon.themes.g90.borderSubtle03}", + "cds-g100": "{carbon.themes.g100.borderSubtle03}" + }, + "key": "{color.border.primary}" + }, + "name": "token-color-border-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "primary" + ] + }, + "token-color-border-faint": { + "key": "{color.border.faint}", + "$type": "color", + "$value": "#525252", + "group": "semantic", + "$modes": { + "default": "#525252", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.borderSubtle00}", + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-100}", + "cds-g0": "{carbon.themes.white.borderSubtle00}", + "cds-g10": "{carbon.themes.g10.borderSubtle00}", + "cds-g90": "{carbon.themes.g90.borderSubtle00}", + "cds-g100": "{carbon.themes.g100.borderSubtle00}" + }, + "key": "{color.border.faint}" + }, + "name": "token-color-border-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "faint" + ] + }, + "token-color-border-strong": { + "key": "{color.border.strong}", + "$type": "color", + "$value": "#8d8d8d", + "group": "semantic", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.borderStrong01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-300}", + "cds-g0": "{carbon.themes.white.borderStrong01}", + "cds-g10": "{carbon.themes.g10.borderStrong01}", + "cds-g90": "{carbon.themes.g90.borderStrong01}", + "cds-g100": "{carbon.themes.g100.borderStrong01}" + }, + "key": "{color.border.strong}" + }, + "name": "token-color-border-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "strong" + ] + }, + "token-color-border-action": { + "key": "{color.border.action}", + "$type": "color", + "$value": "#4589ff", + "group": "semantic", + "$modes": { + "default": "#d0e2ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.borderInteractive}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-100}", + "cds-g0": "{carbon.themes.white.borderInteractive}", + "cds-g10": "{carbon.themes.g10.borderInteractive}", + "cds-g90": "{carbon.themes.g90.borderInteractive}", + "cds-g100": "{carbon.themes.g100.borderInteractive}" + }, + "key": "{color.border.action}" + }, + "name": "token-color-border-action", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "action" + ] + }, + "token-color-border-highlight": { + "key": "{color.border.highlight}", + "$type": "color", + "$value": "#a56eff", + "group": "semantic", + "$modes": { + "default": "#e8daff", + "cds-g0": "#be95ff", + "cds-g10": "#be95ff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-100}", + "cds-g0": "{carbon.color.purple.40}", + "cds-g10": "{carbon.color.purple.40}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, + "key": "{color.border.highlight}" + }, + "name": "token-color-border-highlight", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "highlight" + ] + }, + "token-color-border-success": { + "key": "{color.border.success}", + "$type": "color", + "$value": "#24a148", + "group": "semantic", + "$modes": { + "default": "#a7f0ba", + "cds-g0": "#42be65", + "cds-g10": "#42be65", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-100}", + "cds-g0": "{carbon.color.green.40}", + "cds-g10": "{carbon.color.green.40}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, + "key": "{color.border.success}" + }, + "name": "token-color-border-success", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "success" + ] + }, + "token-color-border-warning": { + "key": "{color.border.warning}", + "$type": "color", + "$value": "#b28600", + "group": "semantic", + "$modes": { + "default": "#ffd9be", + "cds-g0": "#d2a106", + "cds-g10": "#d2a106", + "cds-g90": "#b28600", + "cds-g100": "#b28600" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.yellow.40}", + "cds-g10": "{carbon.color.yellow.40}", + "cds-g90": "{carbon.color.yellow.50}", + "cds-g100": "{carbon.color.yellow.50}" + }, + "key": "{color.border.warning}" + }, + "name": "token-color-border-warning", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "warning" + ] + }, + "token-color-border-critical": { + "key": "{color.border.critical}", + "$type": "color", + "$value": "#fa4d56", + "group": "semantic", + "$modes": { + "default": "#ffd7d9", + "cds-g0": "#ff8389", + "cds-g10": "#ff8389", + "cds-g90": "#fa4d56", + "cds-g100": "#fa4d56" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-100}", + "cds-g0": "{carbon.color.red.40}", + "cds-g10": "{carbon.color.red.40}", + "cds-g90": "{carbon.color.red.50}", + "cds-g100": "{carbon.color.red.50}" + }, + "key": "{color.border.critical}" + }, + "name": "token-color-border-critical", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "critical" + ] + }, + "token-color-focus-action-internal": { + "key": "{color.focus.action.internal}", + "$type": "color", + "$value": "#161616", + "group": "semantic", + "$modes": { + "default": "#0043ce", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.focusInset}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, + "key": "{color.focus.action.internal}" + }, + "name": "token-color-focus-action-internal", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "action", + "internal" + ] + }, + "token-color-focus-action-external": { + "key": "{color.focus.action.external}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.focus}", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{color.focus.action.external}" + }, + "name": "token-color-focus-action-external", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "action", + "external" + ] + }, + "token-color-focus-critical-internal": { + "key": "{color.focus.critical.internal}", + "$type": "color", + "$value": "#161616", + "group": "semantic", + "$modes": { + "default": "#a2191f", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.focusInset}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, + "key": "{color.focus.critical.internal}" + }, + "name": "token-color-focus-critical-internal", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "critical", + "internal" + ] + }, + "token-color-focus-critical-external": { + "key": "{color.focus.critical.external}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#dd7578", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.focus}", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#dd7578", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{color.focus.critical.external}" + }, + "name": "token-color-focus-critical-external", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "critical", + "external" + ] + }, + "token-color-foreground-strong": { + "key": "{color.foreground.strong}", + "$type": "color", + "$value": "#f4f4f4", + "group": "semantic", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textPrimary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{color.foreground.strong}" + }, + "name": "token-color-foreground-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "strong" + ] + }, + "token-color-foreground-primary": { + "key": "{color.foreground.primary}", + "$type": "color", + "$value": "#f4f4f4", + "group": "semantic", + "$modes": { + "default": "#393939", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textPrimary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-600}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{color.foreground.primary}" + }, + "name": "token-color-foreground-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "primary" + ] + }, + "token-color-foreground-faint": { + "key": "{color.foreground.faint}", + "$type": "color", + "$value": "#c6c6c6", + "group": "semantic", + "$modes": { + "default": "#525252", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textSecondary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{color.foreground.faint}" + }, + "name": "token-color-foreground-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "faint" + ] + }, + "token-color-foreground-high-contrast": { + "key": "{color.foreground.high-contrast}", + "$type": "color", + "$value": "#161616", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textInverse}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{color.foreground.high-contrast}" + }, + "name": "token-color-foreground-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "high-contrast" + ] + }, + "token-color-foreground-disabled": { + "key": "{color.foreground.disabled}", + "$type": "color", + "$value": "rgba(244, 244, 244, 0.25)", + "group": "semantic", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "rgba(22, 22, 22, 0.25)", + "cds-g10": "rgba(22, 22, 22, 0.25)", + "cds-g90": "rgba(244, 244, 244, 0.25)", + "cds-g100": "rgba(244, 244, 244, 0.25)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textDisabled}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textDisabled}", + "cds-g10": "{carbon.themes.g10.textDisabled}", + "cds-g90": "{carbon.themes.g90.textDisabled}", + "cds-g100": "{carbon.themes.g100.textDisabled}" + }, + "key": "{color.foreground.disabled}" + }, + "name": "token-color-foreground-disabled", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "disabled" + ] + }, + "token-color-foreground-action": { + "key": "{color.foreground.action}", + "$type": "color", + "$value": "#78a9ff", + "group": "semantic", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#78a9ff", + "cds-g100": "#78a9ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.linkPrimary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.white.linkPrimary}", + "cds-g10": "{carbon.themes.g10.linkPrimary}", + "cds-g90": "{carbon.themes.g90.linkPrimary}", + "cds-g100": "{carbon.themes.g100.linkPrimary}" + }, + "key": "{color.foreground.action}" + }, + "name": "token-color-foreground-action", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "action" + ] + }, + "token-color-foreground-action-hover": { + "key": "{color.foreground.action-hover}", + "$type": "color", + "$value": "#a6c8ff", + "group": "semantic", + "$modes": { + "default": "#0043ce", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.linkPrimaryHover}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, + "key": "{color.foreground.action-hover}" + }, + "name": "token-color-foreground-action-hover", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "action-hover" + ] + }, + "token-color-foreground-action-active": { + "key": "{color.foreground.action-active}", + "$type": "color", + "$value": "#a6c8ff", + "group": "semantic", + "$modes": { + "default": "#002d9c", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.linkPrimaryHover}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, + "key": "{color.foreground.action-active}" + }, + "name": "token-color-foreground-action-active", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "action-active" + ] + }, + "token-color-foreground-highlight": { + "key": "{color.foreground.highlight}", + "$type": "color", + "$value": "#be95ff", + "group": "semantic", + "$modes": { + "default": "#a56eff", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, + "key": "{color.foreground.highlight}" + }, + "name": "token-color-foreground-highlight", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "highlight" + ] + }, + "token-color-foreground-highlight-on-surface": { + "key": "{color.foreground.highlight-on-surface}", + "$type": "color", + "$value": "#d4bbff", + "group": "semantic", + "$modes": { + "default": "#8a3ffc", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#d4bbff", + "cds-g100": "#d4bbff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.30}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-300}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.30}", + "cds-g100": "{carbon.color.purple.30}" + }, + "key": "{color.foreground.highlight-on-surface}" + }, + "name": "token-color-foreground-highlight-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "highlight-on-surface" + ] + }, + "token-color-foreground-highlight-high-contrast": { + "key": "{color.foreground.highlight-high-contrast}", + "$type": "color", + "$value": "#e8daff", + "group": "semantic", + "$modes": { + "default": "#31135e", + "cds-g0": "#491d8b", + "cds-g10": "#491d8b", + "cds-g90": "#e8daff", + "cds-g100": "#d4bbff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.20}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-500}", + "cds-g0": "{carbon.color.purple.80}", + "cds-g10": "{carbon.color.purple.80}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.30}" + }, + "key": "{color.foreground.highlight-high-contrast}" + }, + "name": "token-color-foreground-highlight-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "highlight-high-contrast" + ] + }, + "token-color-foreground-success": { + "key": "{color.foreground.success}", + "$type": "color", + "$value": "#42be65", + "group": "semantic", + "$modes": { + "default": "#24a148", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#42be65", + "cds-g100": "#42be65" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-200}", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.40}", + "cds-g100": "{carbon.color.green.40}" + }, + "key": "{color.foreground.success}" + }, + "name": "token-color-foreground-success", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "success" + ] + }, + "token-color-foreground-success-on-surface": { + "key": "{color.foreground.success-on-surface}", + "$type": "color", + "$value": "#6fdc8c", + "group": "semantic", + "$modes": { + "default": "#198038", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#6fdc8c", + "cds-g100": "#6fdc8c" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.30}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-300}", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.30}", + "cds-g100": "{carbon.color.green.30}" + }, + "key": "{color.foreground.success-on-surface}" + }, + "name": "token-color-foreground-success-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "success-on-surface" + ] + }, + "token-color-foreground-success-high-contrast": { + "key": "{color.foreground.success-high-contrast}", + "$type": "color", + "$value": "#a7f0ba", + "group": "semantic", + "$modes": { + "default": "#044317", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.20}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-500}", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, + "key": "{color.foreground.success-high-contrast}" + }, + "name": "token-color-foreground-success-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "success-high-contrast" + ] + }, + "token-color-foreground-warning": { + "key": "{color.foreground.warning}", + "$type": "color", + "$value": "#d2a106", + "group": "semantic", + "$modes": { + "default": "#ba4e00", + "cds-g0": "#8e6a00", + "cds-g10": "#8e6a00", + "cds-g90": "#d2a106", + "cds-g100": "#d2a106" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.yellow.60}", + "cds-g10": "{carbon.color.yellow.60}", + "cds-g90": "{carbon.color.yellow.40}", + "cds-g100": "{carbon.color.yellow.40}" + }, + "key": "{color.foreground.warning}" + }, + "name": "token-color-foreground-warning", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "warning" + ] + }, + "token-color-foreground-warning-on-surface": { + "key": "{color.foreground.warning-on-surface}", + "$type": "color", + "$value": "#f1c21b", + "group": "semantic", + "$modes": { + "default": "#8a3800", + "cds-g0": "#684e00", + "cds-g10": "#684e00", + "cds-g90": "#f1c21b", + "cds-g100": "#f1c21b" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.30}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-300}", + "cds-g0": "{carbon.color.yellow.70}", + "cds-g10": "{carbon.color.yellow.70}", + "cds-g90": "{carbon.color.yellow.30}", + "cds-g100": "{carbon.color.yellow.30}" + }, + "key": "{color.foreground.warning-on-surface}" + }, + "name": "token-color-foreground-warning-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "warning-on-surface" + ] + }, + "token-color-foreground-warning-high-contrast": { + "key": "{color.foreground.warning-high-contrast}", + "$type": "color", + "$value": "#fddc69", + "group": "semantic", + "$modes": { + "default": "#3e1a00", + "cds-g0": "#483700", + "cds-g10": "#483700", + "cds-g90": "#fddc69", + "cds-g100": "#fddc69" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.20}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-500}", + "cds-g0": "{carbon.color.yellow.80}", + "cds-g10": "{carbon.color.yellow.80}", + "cds-g90": "{carbon.color.yellow.20}", + "cds-g100": "{carbon.color.yellow.20}" + }, + "key": "{color.foreground.warning-high-contrast}" + }, + "name": "token-color-foreground-warning-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "warning-high-contrast" + ] + }, + "token-color-foreground-critical": { + "key": "{color.foreground.critical}", + "$type": "color", + "$value": "#ff8389", + "group": "semantic", + "$modes": { + "default": "#da1e28", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#ff8389", + "cds-g100": "#ff8389" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-200}", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.40}", + "cds-g100": "{carbon.color.red.40}" + }, + "key": "{color.foreground.critical}" + }, + "name": "token-color-foreground-critical", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "critical" + ] + }, + "token-color-foreground-critical-on-surface": { + "key": "{color.foreground.critical-on-surface}", + "$type": "color", + "$value": "#ffb3b8", + "group": "semantic", + "$modes": { + "default": "#a2191f", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffb3b8", + "cds-g100": "#ffb3b8" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.30}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.30}", + "cds-g100": "{carbon.color.red.30}" + }, + "key": "{color.foreground.critical-on-surface}" + }, + "name": "token-color-foreground-critical-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "critical-on-surface" + ] + }, + "token-color-foreground-critical-high-contrast": { + "key": "{color.foreground.critical-high-contrast}", + "$type": "color", + "$value": "#ffd7d9", + "group": "semantic", + "$modes": { + "default": "#520408", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.20}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-500}", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, + "key": "{color.foreground.critical-high-contrast}" + }, + "name": "token-color-foreground-critical-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "critical-high-contrast" + ] + }, + "token-color-page-primary": { + "key": "{color.page.primary}", + "$type": "color", + "$value": "#262626", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.background}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, + "key": "{color.page.primary}" + }, + "name": "token-color-page-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "page", + "primary" + ] + }, + "token-color-page-faint": { + "key": "{color.page.faint}", + "$type": "color", + "$value": "#262626", + "group": "semantic", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.background}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, + "key": "{color.page.faint}" + }, + "name": "token-color-page-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "page", + "faint" + ] + }, + "token-color-surface-primary": { + "key": "{color.surface.primary}", + "$type": "color", + "$value": "#393939", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.layer01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, + "key": "{color.surface.primary}" + }, + "name": "token-color-surface-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "primary" + ] + }, + "token-color-surface-faint": { + "key": "{color.surface.faint}", + "$type": "color", + "$value": "#393939", + "group": "semantic", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.layer01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, + "key": "{color.surface.faint}" + }, + "name": "token-color-surface-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "faint" + ] + }, + "token-color-surface-strong": { + "key": "{color.surface.strong}", + "$type": "color", + "$value": "#525252", + "group": "semantic", + "$modes": { + "default": "#e0e0e0", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.layerAccent01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerAccent01}", + "cds-g10": "{carbon.themes.g10.layerAccent01}", + "cds-g90": "{carbon.themes.g90.layerAccent01}", + "cds-g100": "{carbon.themes.g100.layerAccent01}" + }, + "key": "{color.surface.strong}" + }, + "name": "token-color-surface-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "strong" + ] + }, + "token-color-surface-high-contrast": { + "key": "{color.surface.high-contrast}", + "$type": "color", + "$value": "#f4f4f4", + "group": "semantic", + "$modes": { + "default": "#161616", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.backgroundInverse}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "key": "{color.surface.high-contrast}" + }, + "name": "token-color-surface-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "high-contrast" + ] + }, + "token-color-surface-interactive": { + "key": "{color.surface.interactive}", + "$type": "color", + "$value": "#393939", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.layer01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, + "key": "{color.surface.interactive}" + }, + "name": "token-color-surface-interactive", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive" + ] + }, + "token-color-surface-interactive-hover": { + "key": "{color.surface.interactive-hover}", + "$type": "color", + "$value": "#474747", + "group": "semantic", + "$modes": { + "default": "#e0e0e0", + "cds-g0": "#e8e8e8", + "cds-g10": "#e8e8e8", + "cds-g90": "#474747", + "cds-g100": "#333333" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.layerHover01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerHover01}", + "cds-g10": "{carbon.themes.g10.layerHover01}", + "cds-g90": "{carbon.themes.g90.layerHover01}", + "cds-g100": "{carbon.themes.g100.layerHover01}" + }, + "key": "{color.surface.interactive-hover}" + }, + "name": "token-color-surface-interactive-hover", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive-hover" + ] + }, + "token-color-surface-interactive-active": { + "key": "{color.surface.interactive-active}", + "$type": "color", + "$value": "#6f6f6f", + "group": "semantic", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.layerActive01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.white.layerActive01}", + "cds-g10": "{carbon.themes.g10.layerActive01}", + "cds-g90": "{carbon.themes.g90.layerActive01}", + "cds-g100": "{carbon.themes.g100.layerActive01}" + }, + "key": "{color.surface.interactive-active}" + }, + "name": "token-color-surface-interactive-active", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive-active" + ] + }, + "token-color-surface-interactive-disabled": { + "key": "{color.surface.interactive-disabled}", + "$type": "color", + "$value": "#6f6f6f", + "group": "semantic", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.60}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.color.gray.30}", + "cds-g10": "{carbon.color.gray.30}", + "cds-g90": "{carbon.color.gray.60}", + "cds-g100": "{carbon.color.gray.70}" + }, + "key": "{color.surface.interactive-disabled}" + }, + "name": "token-color-surface-interactive-disabled", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive-disabled" + ] + }, + "token-color-surface-action": { + "key": "{color.surface.action}", + "$type": "color", + "$value": "#0f62fe", + "group": "semantic", + "$modes": { + "default": "#edf5ff", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0f62fe", + "cds-g100": "#0043ce" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.60}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-50}", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.60}", + "cds-g100": "{carbon.color.blue.70}" + }, + "key": "{color.surface.action}" + }, + "name": "token-color-surface-action", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "action" + ] + }, + "token-color-surface-highlight": { + "key": "{color.surface.highlight}", + "$type": "color", + "$value": "#6929c4", + "group": "semantic", + "$modes": { + "default": "#f6f2ff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-50}", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, + "key": "{color.surface.highlight}" + }, + "name": "token-color-surface-highlight", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "highlight" + ] + }, + "token-color-surface-success": { + "key": "{color.surface.success}", + "$type": "color", + "$value": "#0e6027", + "group": "semantic", + "$modes": { + "default": "#defbe6", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-50}", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, + "key": "{color.surface.success}" + }, + "name": "token-color-surface-success", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "success" + ] + }, + "token-color-surface-warning": { + "key": "{color.surface.warning}", + "$type": "color", + "$value": "#684e00", + "group": "semantic", + "$modes": { + "default": "#fff2e8", + "cds-g0": "#fcf4d6", + "cds-g10": "#fcf4d6", + "cds-g90": "#684e00", + "cds-g100": "#684e00" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-50}", + "cds-g0": "{carbon.color.yellow.10}", + "cds-g10": "{carbon.color.yellow.10}", + "cds-g90": "{carbon.color.yellow.70}", + "cds-g100": "{carbon.color.yellow.70}" + }, + "key": "{color.surface.warning}" + }, + "name": "token-color-surface-warning", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "warning" + ] + }, + "token-color-surface-critical": { + "key": "{color.surface.critical}", + "$type": "color", + "$value": "#a2191f", + "group": "semantic", + "$modes": { + "default": "#fff1f1", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-50}", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, + "key": "{color.surface.critical}" + }, + "name": "token-color-surface-critical", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "critical" + ] + }, + "token-color-hashicorp-brand": { + "key": "{color.hashicorp.brand}", + "$type": "color", + "$value": "#ffffff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.hashicorp-brand}", + "group": "branding", + "key": "{color.hashicorp.brand}" + }, + "name": "token-color-hashicorp-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "hashicorp", + "brand" + ] + }, + "token-color-boundary-brand": { + "key": "{color.boundary.brand}", + "$type": "color", + "$value": "#f24c53", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-brand}", + "group": "branding", + "key": "{color.boundary.brand}" + }, + "name": "token-color-boundary-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "brand" + ] + }, + "token-color-boundary-foreground": { + "key": "{color.boundary.foreground}", + "$type": "color", + "$value": "#cf2d32", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-500}", + "group": "branding", + "key": "{color.boundary.foreground}" + }, + "name": "token-color-boundary-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "foreground" + ] + }, + "token-color-boundary-surface": { + "key": "{color.boundary.surface}", + "$type": "color", + "$value": "#ffecec", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-50}", + "group": "branding", + "key": "{color.boundary.surface}" + }, + "name": "token-color-boundary-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "surface" + ] + }, + "token-color-boundary-border": { + "key": "{color.boundary.border}", + "$type": "color", + "$value": "#fbd7d8", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-100}", + "group": "branding", + "key": "{color.boundary.border}" + }, + "name": "token-color-boundary-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "border" + ] + }, + "token-color-boundary-gradient-primary-start": { + "key": "{color.boundary.gradient.primary.start}", + "$type": "color", + "$value": "#f97076", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-300}", + "group": "branding", + "key": "{color.boundary.gradient.primary.start}" + }, + "name": "token-color-boundary-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "primary", + "start" + ] + }, + "token-color-boundary-gradient-primary-stop": { + "key": "{color.boundary.gradient.primary.stop}", + "$type": "color", + "$value": "#db363b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-400}", + "group": "branding", + "key": "{color.boundary.gradient.primary.stop}" + }, + "name": "token-color-boundary-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "primary", + "stop" + ] + }, + "token-color-boundary-gradient-faint-start": { + "key": "{color.boundary.gradient.faint.start}", + "$type": "color", + "$value": "#fffafa", + "group": "branding", + "comment": "this is the 'boundary-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffafa", + "group": "branding", + "comment": "this is the 'boundary-50' value at 25% opacity on white", + "key": "{color.boundary.gradient.faint.start}" + }, + "name": "token-color-boundary-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "faint", + "start" + ] + }, + "token-color-boundary-gradient-faint-stop": { + "key": "{color.boundary.gradient.faint.stop}", + "$type": "color", + "$value": "#ffecec", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-50}", + "group": "branding", + "key": "{color.boundary.gradient.faint.stop}" + }, + "name": "token-color-boundary-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "faint", + "stop" + ] + }, + "token-color-consul-brand": { + "key": "{color.consul.brand}", + "$type": "color", + "$value": "#e03875", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-brand}", + "group": "branding", + "key": "{color.consul.brand}" + }, + "name": "token-color-consul-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "brand" + ] + }, + "token-color-consul-foreground": { + "key": "{color.consul.foreground}", + "$type": "color", + "$value": "#d01c5b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-500}", + "group": "branding", + "key": "{color.consul.foreground}" + }, + "name": "token-color-consul-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "foreground" + ] + }, + "token-color-consul-surface": { + "key": "{color.consul.surface}", + "$type": "color", + "$value": "#ffe9f1", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-50}", + "group": "branding", + "key": "{color.consul.surface}" + }, + "name": "token-color-consul-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "surface" + ] + }, + "token-color-consul-border": { + "key": "{color.consul.border}", + "$type": "color", + "$value": "#ffcede", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-100}", + "group": "branding", + "key": "{color.consul.border}" + }, + "name": "token-color-consul-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "border" + ] + }, + "token-color-consul-gradient-primary-start": { + "key": "{color.consul.gradient.primary.start}", + "$type": "color", + "$value": "#ff99be", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-300}", + "group": "branding", + "key": "{color.consul.gradient.primary.start}" + }, + "name": "token-color-consul-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "primary", + "start" + ] + }, + "token-color-consul-gradient-primary-stop": { + "key": "{color.consul.gradient.primary.stop}", + "$type": "color", + "$value": "#da306e", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-400}", + "group": "branding", + "key": "{color.consul.gradient.primary.stop}" + }, + "name": "token-color-consul-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "primary", + "stop" + ] + }, + "token-color-consul-gradient-faint-start": { + "key": "{color.consul.gradient.faint.start}", + "$type": "color", + "$value": "#fff9fb", + "group": "branding", + "comment": "this is the 'consul-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fff9fb", + "group": "branding", + "comment": "this is the 'consul-50' value at 25% opacity on white", + "key": "{color.consul.gradient.faint.start}" + }, + "name": "token-color-consul-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "faint", + "start" + ] + }, + "token-color-consul-gradient-faint-stop": { + "key": "{color.consul.gradient.faint.stop}", + "$type": "color", + "$value": "#ffe9f1", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-50}", + "group": "branding", + "key": "{color.consul.gradient.faint.stop}" + }, + "name": "token-color-consul-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "faint", + "stop" + ] + }, + "token-color-hcp-brand": { + "key": "{color.hcp.brand}", + "$type": "color", + "$value": "#ffffff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.hcp-brand}", + "group": "branding", + "key": "{color.hcp.brand}" + }, + "name": "token-color-hcp-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "hcp", + "brand" + ] + }, + "token-color-nomad-brand": { + "key": "{color.nomad.brand}", + "$type": "color", + "$value": "#06d092", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-brand}", + "group": "branding", + "key": "{color.nomad.brand}" + }, + "name": "token-color-nomad-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "brand" + ] + }, + "token-color-nomad-foreground": { + "key": "{color.nomad.foreground}", + "$type": "color", + "$value": "#008661", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-500}", + "group": "branding", + "key": "{color.nomad.foreground}" + }, + "name": "token-color-nomad-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "foreground" + ] + }, + "token-color-nomad-surface": { + "key": "{color.nomad.surface}", + "$type": "color", + "$value": "#d3fdeb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-50}", + "group": "branding", + "key": "{color.nomad.surface}" + }, + "name": "token-color-nomad-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "surface" + ] + }, + "token-color-nomad-border": { + "key": "{color.nomad.border}", + "$type": "color", + "$value": "#bff3dd", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-100}", + "group": "branding", + "key": "{color.nomad.border}" + }, + "name": "token-color-nomad-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "border" + ] + }, + "token-color-nomad-gradient-primary-start": { + "key": "{color.nomad.gradient.primary.start}", + "$type": "color", + "$value": "#bff3dd", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-100}", + "group": "branding", + "key": "{color.nomad.gradient.primary.start}" + }, + "name": "token-color-nomad-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "primary", + "start" + ] + }, + "token-color-nomad-gradient-primary-stop": { + "key": "{color.nomad.gradient.primary.stop}", + "$type": "color", + "$value": "#60dea9", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-200}", + "group": "branding", + "key": "{color.nomad.gradient.primary.stop}" + }, + "name": "token-color-nomad-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "primary", + "stop" + ] + }, + "token-color-nomad-gradient-faint-start": { + "key": "{color.nomad.gradient.faint.start}", + "$type": "color", + "$value": "#f3fff9", + "group": "branding", + "comment": "this is the 'nomad-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#f3fff9", + "group": "branding", + "comment": "this is the 'nomad-50' value at 25% opacity on white", + "key": "{color.nomad.gradient.faint.start}" + }, + "name": "token-color-nomad-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "faint", + "start" + ] + }, + "token-color-nomad-gradient-faint-stop": { + "key": "{color.nomad.gradient.faint.stop}", + "$type": "color", + "$value": "#d3fdeb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-50}", + "group": "branding", + "key": "{color.nomad.gradient.faint.stop}" + }, + "name": "token-color-nomad-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "faint", + "stop" + ] + }, + "token-color-packer-brand": { + "key": "{color.packer.brand}", + "$type": "color", + "$value": "#02a8ef", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-brand}", + "group": "branding", + "key": "{color.packer.brand}" + }, + "name": "token-color-packer-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "brand" + ] + }, + "token-color-packer-foreground": { + "key": "{color.packer.foreground}", + "$type": "color", + "$value": "#007eb4", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-500}", + "group": "branding", + "key": "{color.packer.foreground}" + }, + "name": "token-color-packer-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "foreground" + ] + }, + "token-color-packer-surface": { + "key": "{color.packer.surface}", + "$type": "color", + "$value": "#d4f2ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-50}", + "group": "branding", + "key": "{color.packer.surface}" + }, + "name": "token-color-packer-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "surface" + ] + }, + "token-color-packer-border": { + "key": "{color.packer.border}", + "$type": "color", + "$value": "#b4e4ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-100}", + "group": "branding", + "key": "{color.packer.border}" + }, + "name": "token-color-packer-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "border" + ] + }, + "token-color-packer-gradient-primary-start": { + "key": "{color.packer.gradient.primary.start}", + "$type": "color", + "$value": "#b4e4ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-100}", + "group": "branding", + "key": "{color.packer.gradient.primary.start}" + }, + "name": "token-color-packer-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "primary", + "start" + ] + }, + "token-color-packer-gradient-primary-stop": { + "key": "{color.packer.gradient.primary.stop}", + "$type": "color", + "$value": "#63d0ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-200}", + "group": "branding", + "key": "{color.packer.gradient.primary.stop}" + }, + "name": "token-color-packer-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "primary", + "stop" + ] + }, + "token-color-packer-gradient-faint-start": { + "key": "{color.packer.gradient.faint.start}", + "$type": "color", + "$value": "#f3fcff", + "group": "branding", + "comment": "this is the 'packer-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#F3FCFF", + "group": "branding", + "comment": "this is the 'packer-50' value at 25% opacity on white", + "key": "{color.packer.gradient.faint.start}" + }, + "name": "token-color-packer-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "faint", + "start" + ] + }, + "token-color-packer-gradient-faint-stop": { + "key": "{color.packer.gradient.faint.stop}", + "$type": "color", + "$value": "#d4f2ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-50}", + "group": "branding", + "key": "{color.packer.gradient.faint.stop}" + }, + "name": "token-color-packer-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "faint", + "stop" + ] + }, + "token-color-terraform-brand": { + "key": "{color.terraform.brand}", + "$type": "color", + "$value": "#7b42bc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-brand}", + "group": "branding", + "key": "{color.terraform.brand}" + }, + "name": "token-color-terraform-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "brand" + ] + }, + "token-color-terraform-brand-on-dark": { + "key": "{color.terraform.brand-on-dark}", + "$type": "color", + "$value": "#a067da", + "group": "branding", + "comment": "this is an alternative brand color meant to be used on dark backgrounds", + "original": { + "$type": "color", + "$value": "#a067da", + "group": "branding", + "comment": "this is an alternative brand color meant to be used on dark backgrounds", + "key": "{color.terraform.brand-on-dark}" + }, + "name": "token-color-terraform-brand-on-dark", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "brand-on-dark" + ] + }, + "token-color-terraform-foreground": { + "key": "{color.terraform.foreground}", + "$type": "color", + "$value": "#773cb4", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-500}", + "group": "branding", + "key": "{color.terraform.foreground}" + }, + "name": "token-color-terraform-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "foreground" + ] + }, + "token-color-terraform-surface": { + "key": "{color.terraform.surface}", + "$type": "color", + "$value": "#f4ecff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-50}", + "group": "branding", + "key": "{color.terraform.surface}" + }, + "name": "token-color-terraform-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "surface" + ] + }, + "token-color-terraform-border": { + "key": "{color.terraform.border}", + "$type": "color", + "$value": "#ebdbfc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-100}", + "group": "branding", + "key": "{color.terraform.border}" + }, + "name": "token-color-terraform-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "border" + ] + }, + "token-color-terraform-gradient-primary-start": { + "key": "{color.terraform.gradient.primary.start}", + "$type": "color", + "$value": "#bb8deb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-300}", + "group": "branding", + "key": "{color.terraform.gradient.primary.start}" + }, + "name": "token-color-terraform-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "primary", + "start" + ] + }, + "token-color-terraform-gradient-primary-stop": { + "key": "{color.terraform.gradient.primary.stop}", + "$type": "color", + "$value": "#844fba", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-400}", + "group": "branding", + "key": "{color.terraform.gradient.primary.stop}" + }, + "name": "token-color-terraform-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "primary", + "stop" + ] + }, + "token-color-terraform-gradient-faint-start": { + "key": "{color.terraform.gradient.faint.start}", + "$type": "color", + "$value": "#fcfaff", + "group": "branding", + "comment": "this is the 'terraform-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fcfaff", + "group": "branding", + "comment": "this is the 'terraform-50' value at 25% opacity on white", + "key": "{color.terraform.gradient.faint.start}" + }, + "name": "token-color-terraform-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "faint", + "start" + ] + }, + "token-color-terraform-gradient-faint-stop": { + "key": "{color.terraform.gradient.faint.stop}", + "$type": "color", + "$value": "#f4ecff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-50}", + "group": "branding", + "key": "{color.terraform.gradient.faint.stop}" + }, + "name": "token-color-terraform-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "faint", + "stop" + ] + }, + "token-color-vagrant-brand": { + "key": "{color.vagrant.brand}", + "$type": "color", + "$value": "#1868f2", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-brand}", + "group": "branding", + "key": "{color.vagrant.brand}" + }, + "name": "token-color-vagrant-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "brand" + ] + }, + "token-color-vagrant-foreground": { + "key": "{color.vagrant.foreground}", + "$type": "color", + "$value": "#1c61d8", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-500}", + "group": "branding", + "key": "{color.vagrant.foreground}" + }, + "name": "token-color-vagrant-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "foreground" + ] + }, + "token-color-vagrant-surface": { + "key": "{color.vagrant.surface}", + "$type": "color", + "$value": "#d6ebff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-50}", + "group": "branding", + "key": "{color.vagrant.surface}" + }, + "name": "token-color-vagrant-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "surface" + ] + }, + "token-color-vagrant-border": { + "key": "{color.vagrant.border}", + "$type": "color", + "$value": "#c7dbfc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-100}", + "group": "branding", + "key": "{color.vagrant.border}" + }, + "name": "token-color-vagrant-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "border" + ] + }, + "token-color-vagrant-gradient-primary-start": { + "key": "{color.vagrant.gradient.primary.start}", + "$type": "color", + "$value": "#639cff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-300}", + "group": "branding", + "key": "{color.vagrant.gradient.primary.start}" + }, + "name": "token-color-vagrant-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "primary", + "start" + ] + }, + "token-color-vagrant-gradient-primary-stop": { + "key": "{color.vagrant.gradient.primary.stop}", + "$type": "color", + "$value": "#2e71e5", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-400}", + "group": "branding", + "key": "{color.vagrant.gradient.primary.stop}" + }, + "name": "token-color-vagrant-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "primary", + "stop" + ] + }, + "token-color-vagrant-gradient-faint-start": { + "key": "{color.vagrant.gradient.faint.start}", + "$type": "color", + "$value": "#f4faff", + "group": "branding", + "comment": "this is the 'vagrant-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#f4faff", + "group": "branding", + "comment": "this is the 'vagrant-50' value at 25% opacity on white", + "key": "{color.vagrant.gradient.faint.start}" + }, + "name": "token-color-vagrant-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "faint", + "start" + ] + }, + "token-color-vagrant-gradient-faint-stop": { + "key": "{color.vagrant.gradient.faint.stop}", + "$type": "color", + "$value": "#d6ebff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-50}", + "group": "branding", + "key": "{color.vagrant.gradient.faint.stop}" + }, + "name": "token-color-vagrant-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "faint", + "stop" + ] + }, + "token-color-vault-radar-brand": { + "key": "{color.vault-radar.brand}", + "$type": "color", + "$value": "#ffcf25", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-brand}", + "group": "branding", + "key": "{color.vault-radar.brand}" + }, + "name": "token-color-vault-radar-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "brand" + ] + }, + "token-color-vault-radar-brand-alt": { + "key": "{color.vault-radar.brand-alt}", + "$type": "color", + "$value": "#ffffff", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work", + "original": { + "$type": "color", + "$value": "#FFF", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work", + "key": "{color.vault-radar.brand-alt}" + }, + "name": "token-color-vault-radar-brand-alt", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "brand-alt" + ] + }, + "token-color-vault-radar-foreground": { + "key": "{color.vault-radar.foreground}", + "$type": "color", + "$value": "#9a6f00", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-500}", + "group": "branding", + "key": "{color.vault-radar.foreground}" + }, + "name": "token-color-vault-radar-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "foreground" + ] + }, + "token-color-vault-radar-surface": { + "key": "{color.vault-radar.surface}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-50}", + "group": "branding", + "key": "{color.vault-radar.surface}" + }, + "name": "token-color-vault-radar-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "surface" + ] + }, + "token-color-vault-radar-border": { + "key": "{color.vault-radar.border}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-100}", + "group": "branding", + "key": "{color.vault-radar.border}" + }, + "name": "token-color-vault-radar-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "border" + ] + }, + "token-color-vault-radar-gradient-primary-start": { + "key": "{color.vault-radar.gradient.primary.start}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-100}", + "group": "branding", + "key": "{color.vault-radar.gradient.primary.start}" + }, + "name": "token-color-vault-radar-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "primary", + "start" + ] + }, + "token-color-vault-radar-gradient-primary-stop": { + "key": "{color.vault-radar.gradient.primary.stop}", + "$type": "color", + "$value": "#ffe543", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-200}", + "group": "branding", + "key": "{color.vault-radar.gradient.primary.stop}" + }, + "name": "token-color-vault-radar-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "primary", + "stop" + ] + }, + "token-color-vault-radar-gradient-faint-start": { + "key": "{color.vault-radar.gradient.faint.start}", + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-radar-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-radar-50' value at 25% opacity on white", + "key": "{color.vault-radar.gradient.faint.start}" + }, + "name": "token-color-vault-radar-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "faint", + "start" + ] + }, + "token-color-vault-radar-gradient-faint-stop": { + "key": "{color.vault-radar.gradient.faint.stop}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-50}", + "group": "branding", + "key": "{color.vault-radar.gradient.faint.stop}" + }, + "name": "token-color-vault-radar-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "faint", + "stop" + ] + }, + "token-color-vault-secrets-brand": { + "key": "{color.vault-secrets.brand}", + "$type": "color", + "$value": "#ffcf25", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-brand}", + "group": "branding", + "key": "{color.vault-secrets.brand}" + }, + "name": "token-color-vault-secrets-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "brand" + ] + }, + "token-color-vault-secrets-brand-alt": { + "key": "{color.vault-secrets.brand-alt}", + "group": "branding", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work", + "original": { + "group": "branding", + "$type": "color", + "$value": "#FFF", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work", + "key": "{color.vault-secrets.brand-alt}" + }, + "name": "token-color-vault-secrets-brand-alt", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "brand-alt" + ] + }, + "token-color-vault-secrets-foreground": { + "key": "{color.vault-secrets.foreground}", + "$type": "color", + "$value": "#9a6f00", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-500}", + "group": "branding", + "key": "{color.vault-secrets.foreground}" + }, + "name": "token-color-vault-secrets-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "foreground" + ] + }, + "token-color-vault-secrets-surface": { + "key": "{color.vault-secrets.surface}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-50}", + "group": "branding", + "key": "{color.vault-secrets.surface}" + }, + "name": "token-color-vault-secrets-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "surface" + ] + }, + "token-color-vault-secrets-border": { + "key": "{color.vault-secrets.border}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-100}", + "group": "branding", + "key": "{color.vault-secrets.border}" + }, + "name": "token-color-vault-secrets-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "border" + ] + }, + "token-color-vault-secrets-gradient-primary-start": { + "key": "{color.vault-secrets.gradient.primary.start}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-100}", + "group": "branding", + "key": "{color.vault-secrets.gradient.primary.start}" + }, + "name": "token-color-vault-secrets-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "primary", + "start" + ] + }, + "token-color-vault-secrets-gradient-primary-stop": { + "key": "{color.vault-secrets.gradient.primary.stop}", + "$type": "color", + "$value": "#ffe543", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-200}", + "group": "branding", + "key": "{color.vault-secrets.gradient.primary.stop}" + }, + "name": "token-color-vault-secrets-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "primary", + "stop" + ] + }, + "token-color-vault-secrets-gradient-faint-start": { + "key": "{color.vault-secrets.gradient.faint.start}", + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-secrets-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-secrets-50' value at 25% opacity on white", + "key": "{color.vault-secrets.gradient.faint.start}" + }, + "name": "token-color-vault-secrets-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "faint", + "start" + ] + }, + "token-color-vault-secrets-gradient-faint-stop": { + "key": "{color.vault-secrets.gradient.faint.stop}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-50}", + "group": "branding", + "key": "{color.vault-secrets.gradient.faint.stop}" + }, + "name": "token-color-vault-secrets-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "faint", + "stop" + ] + }, + "token-color-vault-brand": { + "key": "{color.vault.brand}", + "$type": "color", + "$value": "#ffcf25", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-brand}", + "group": "branding", + "key": "{color.vault.brand}" + }, + "name": "token-color-vault-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "brand" + ] + }, + "token-color-vault-brand-alt": { + "key": "{color.vault.brand-alt}", + "$type": "color", + "$value": "#ffffff", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work", + "original": { + "$type": "color", + "$value": "#FFF", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work", + "key": "{color.vault.brand-alt}" + }, + "name": "token-color-vault-brand-alt", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "brand-alt" + ] + }, + "token-color-vault-foreground": { + "key": "{color.vault.foreground}", + "$type": "color", + "$value": "#9a6f00", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-500}", + "group": "branding", + "key": "{color.vault.foreground}" + }, + "name": "token-color-vault-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "foreground" + ] + }, + "token-color-vault-surface": { + "key": "{color.vault.surface}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-50}", + "group": "branding", + "key": "{color.vault.surface}" + }, + "name": "token-color-vault-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "surface" + ] + }, + "token-color-vault-border": { + "key": "{color.vault.border}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-100}", + "group": "branding", + "key": "{color.vault.border}" + }, + "name": "token-color-vault-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "border" + ] + }, + "token-color-vault-gradient-primary-start": { + "key": "{color.vault.gradient.primary.start}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-100}", + "group": "branding", + "key": "{color.vault.gradient.primary.start}" + }, + "name": "token-color-vault-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "primary", + "start" + ] + }, + "token-color-vault-gradient-primary-stop": { + "key": "{color.vault.gradient.primary.stop}", + "$type": "color", + "$value": "#ffe543", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-200}", + "group": "branding", + "key": "{color.vault.gradient.primary.stop}" + }, + "name": "token-color-vault-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "primary", + "stop" + ] + }, + "token-color-vault-gradient-faint-start": { + "key": "{color.vault.gradient.faint.start}", + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-50' value at 25% opacity on white", + "key": "{color.vault.gradient.faint.start}" + }, + "name": "token-color-vault-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "faint", + "start" + ] + }, + "token-color-vault-gradient-faint-stop": { + "key": "{color.vault.gradient.faint.stop}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-50}", + "group": "branding", + "key": "{color.vault.gradient.faint.stop}" + }, + "name": "token-color-vault-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "faint", + "stop" + ] + }, + "token-color-waypoint-brand": { + "key": "{color.waypoint.brand}", + "$type": "color", + "$value": "#14c6cb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-brand}", + "group": "branding", + "key": "{color.waypoint.brand}" + }, + "name": "token-color-waypoint-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "brand" + ] + }, + "token-color-waypoint-foreground": { + "key": "{color.waypoint.foreground}", + "$type": "color", + "$value": "#008196", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-500}", + "group": "branding", + "key": "{color.waypoint.foreground}" + }, + "name": "token-color-waypoint-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "foreground" + ] + }, + "token-color-waypoint-surface": { + "key": "{color.waypoint.surface}", + "$type": "color", + "$value": "#e0fcff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-50}", + "group": "branding", + "key": "{color.waypoint.surface}" + }, + "name": "token-color-waypoint-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "surface" + ] + }, + "token-color-waypoint-border": { + "key": "{color.waypoint.border}", + "$type": "color", + "$value": "#cbf1f3", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-100}", + "group": "branding", + "key": "{color.waypoint.border}" + }, + "name": "token-color-waypoint-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "border" + ] + }, + "token-color-waypoint-gradient-primary-start": { + "key": "{color.waypoint.gradient.primary.start}", + "$type": "color", + "$value": "#cbf1f3", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-100}", + "group": "branding", + "key": "{color.waypoint.gradient.primary.start}" + }, + "name": "token-color-waypoint-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "primary", + "start" + ] + }, + "token-color-waypoint-gradient-primary-stop": { + "key": "{color.waypoint.gradient.primary.stop}", + "$type": "color", + "$value": "#62d4dc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-200}", + "group": "branding", + "key": "{color.waypoint.gradient.primary.stop}" + }, + "name": "token-color-waypoint-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "primary", + "stop" + ] + }, + "token-color-waypoint-gradient-faint-start": { + "key": "{color.waypoint.gradient.faint.start}", + "$type": "color", + "$value": "#f6feff", + "group": "branding", + "comment": "this is the 'waypoint-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#f6feff", + "group": "branding", + "comment": "this is the 'waypoint-50' value at 25% opacity on white", + "key": "{color.waypoint.gradient.faint.start}" + }, + "name": "token-color-waypoint-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "faint", + "start" + ] + }, + "token-color-waypoint-gradient-faint-stop": { + "key": "{color.waypoint.gradient.faint.stop}", + "$type": "color", + "$value": "#e0fcff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-50}", + "group": "branding", + "key": "{color.waypoint.gradient.faint.stop}" + }, + "name": "token-color-waypoint-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "faint", + "stop" + ] + }, + "token-elevation-inset-box-shadow": { + "key": "{elevation.inset.box-shadow}", + "$value": "none", + "$modes": { + "default": "inset 0px 1px 2px 1px #5252521a", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.inset.box-shadow-01}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.inset.box-shadow}" + }, + "name": "token-elevation-inset-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "inset", + "box-shadow" + ] + }, + "token-elevation-low-box-shadow": { + "key": "{elevation.low.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 1px 1px 0px #5252520d, 0px 2px 2px 0px #5252520d", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.low.box-shadow-01}, {elevation.low.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.low.box-shadow}" + }, + "name": "token-elevation-low-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "low", + "box-shadow" + ] + }, + "token-elevation-mid-box-shadow": { + "key": "{elevation.mid.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #5252521a, 0px 8px 16px -10px #52525233", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.mid.box-shadow-01}, {elevation.mid.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.mid.box-shadow}" + }, + "name": "token-elevation-mid-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "mid", + "box-shadow" + ] + }, + "token-elevation-high-box-shadow": { + "key": "{elevation.high.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #52525226, 0px 16px 16px -10px #52525233", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.high.box-shadow-01}, {elevation.high.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.high.box-shadow}" + }, + "name": "token-elevation-high-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "high", + "box-shadow" + ] + }, + "token-elevation-higher-box-shadow": { + "key": "{elevation.higher.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #5252521a, 0px 12px 28px 0px #52525240", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.higher.box-shadow-01}, {elevation.higher.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.higher.box-shadow}" + }, + "name": "token-elevation-higher-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "higher", + "box-shadow" + ] + }, + "token-elevation-overlay-box-shadow": { + "key": "{elevation.overlay.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #39393940, 0px 12px 24px 0px #39393959", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.overlay.box-shadow-01}, {elevation.overlay.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.overlay.box-shadow}" + }, + "name": "token-elevation-overlay-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "overlay", + "box-shadow" + ] + }, + "token-surface-inset-box-shadow": { + "key": "{surface.inset.box-shadow}", + "$value": "none", + "$modes": { + "default": "inset 0 0 0 1px #5252524d, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.inset.box-shadow-border}, {elevation.inset.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.inset.box-shadow}" + }, + "name": "token-surface-inset-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "inset", + "box-shadow" + ] + }, + "token-surface-base-box-shadow": { + "key": "{surface.base.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525233", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.base.box-shadow-border}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.base.box-shadow}" + }, + "name": "token-surface-base-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "base", + "box-shadow" + ] + }, + "token-surface-low-box-shadow": { + "key": "{surface.low.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525226, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.low.box-shadow-border}, {elevation.low.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.low.box-shadow}" + }, + "name": "token-surface-low-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "low", + "box-shadow" + ] + }, + "token-surface-mid-box-shadow": { + "key": "{surface.mid.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525226, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.mid.box-shadow-border}, {elevation.mid.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.mid.box-shadow}" + }, + "name": "token-surface-mid-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "mid", + "box-shadow" + ] + }, + "token-surface-high-box-shadow": { + "key": "{surface.high.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525240, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.high.box-shadow-border}, {elevation.high.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.high.box-shadow}" + }, + "name": "token-surface-high-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "high", + "box-shadow" + ] + }, + "token-surface-higher-box-shadow": { + "key": "{surface.higher.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525233, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.higher.box-shadow-border}, {elevation.higher.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.higher.box-shadow}" + }, + "name": "token-surface-higher-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "higher", + "box-shadow" + ] + }, + "token-surface-overlay-box-shadow": { + "key": "{surface.overlay.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #39393940, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.overlay.box-shadow-border}, {elevation.overlay.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.overlay.box-shadow}" + }, + "name": "token-surface-overlay-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "overlay", + "box-shadow" + ] + }, + "token-focus-ring-action-box-shadow": { + "key": "{focus-ring.action.box-shadow}", + "$value": "inset 0 0 0 1px #161616, 0 0 0 3px #ffffff", + "original": { + "$value": "{focus-ring.action.internal-box-shadow}, {focus-ring.action.external-box-shadow}", + "key": "{focus-ring.action.box-shadow}" + }, + "name": "token-focus-ring-action-box-shadow", + "attributes": { + "category": "focus-ring" + }, + "path": [ + "focus-ring", + "action", + "box-shadow" + ] + }, + "token-focus-ring-critical-box-shadow": { + "key": "{focus-ring.critical.box-shadow}", + "$value": "inset 0 0 0 1px #161616, 0 0 0 3px #ffffff", + "original": { + "$value": "{focus-ring.critical.internal-box-shadow}, {focus-ring.critical.external-box-shadow}", + "key": "{focus-ring.critical.box-shadow}" + }, + "name": "token-focus-ring-critical-box-shadow", + "attributes": { + "category": "focus-ring" + }, + "path": [ + "focus-ring", + "critical", + "box-shadow" + ] + }, + "token-app-footer-focus-color-action-internal": { + "key": "{app-footer.focus.color.action.internal}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "var(--token-color-focus-action-internal)", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.focus}", + "$modes": { + "default": "var(--token-color-focus-action-internal)", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{app-footer.focus.color.action.internal}" + }, + "name": "token-app-footer-focus-color-action-internal", + "attributes": { + "category": "app-footer" + }, + "path": [ + "app-footer", + "focus", + "color", + "action", + "internal" + ] + }, + "token-app-header-height": { + "key": "{app-header.height}", + "$type": "dimension", + "$value": "60px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "60", + "unit": "px", + "key": "{app-header.height}" + }, + "name": "token-app-header-height", + "attributes": { + "category": "app-header" + }, + "path": [ + "app-header", + "height" + ] + }, + "token-app-header-home-link-size": { + "key": "{app-header.home-link.size}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{app-header.home-link.size}" + }, + "name": "token-app-header-home-link-size", + "attributes": { + "category": "app-header" + }, + "path": [ + "app-header", + "home-link", + "size" + ] + }, + "token-app-header-logo-size": { + "key": "{app-header.logo.size}", + "$type": "dimension", + "$value": "28px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "28", + "unit": "px", + "key": "{app-header.logo.size}" + }, + "name": "token-app-header-logo-size", + "attributes": { + "category": "app-header" + }, + "path": [ + "app-header", + "logo", + "size" + ] + }, + "token-app-side-nav-wrapper-border-width": { + "key": "{app-side-nav.wrapper.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{app-side-nav.wrapper.border.width}" + }, + "name": "token-app-side-nav-wrapper-border-width", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "border", + "width" + ] + }, + "token-app-side-nav-wrapper-border-color": { + "key": "{app-side-nav.wrapper.border.color}", + "$type": "color", + "$value": "var(--token-color-palette-neutral-200)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-palette-neutral-200)", + "group": "components", + "key": "{app-side-nav.wrapper.border.color}" + }, + "name": "token-app-side-nav-wrapper-border-color", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "border", + "color" + ] + }, + "token-app-side-nav-wrapper-padding-horizontal": { + "key": "{app-side-nav.wrapper.padding.horizontal}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.horizontal}" + }, + "name": "token-app-side-nav-wrapper-padding-horizontal", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "horizontal" + ] + }, + "token-app-side-nav-wrapper-padding-vertical": { + "key": "{app-side-nav.wrapper.padding.vertical}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.vertical}" + }, + "name": "token-app-side-nav-wrapper-padding-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "vertical" + ] + }, + "token-app-side-nav-wrapper-padding-horizontal-minimized": { + "key": "{app-side-nav.wrapper.padding.horizontal-minimized}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.horizontal-minimized}" + }, + "name": "token-app-side-nav-wrapper-padding-horizontal-minimized", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "horizontal-minimized" + ] + }, + "token-app-side-nav-wrapper-padding-vertical-minimized": { + "key": "{app-side-nav.wrapper.padding.vertical-minimized}", + "$type": "dimension", + "$value": "22px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "22", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.vertical-minimized}" + }, + "name": "token-app-side-nav-wrapper-padding-vertical-minimized", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "vertical-minimized" + ] + }, + "token-app-side-nav-toggle-button-border-radius": { + "key": "{app-side-nav.toggle-button.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{app-side-nav.toggle-button.border.radius}" + }, + "name": "token-app-side-nav-toggle-button-border-radius", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "toggle-button", + "border", + "radius" + ] + }, + "token-app-side-nav-header-home-link-padding": { + "key": "{app-side-nav.header.home-link.padding}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{app-side-nav.header.home-link.padding}" + }, + "name": "token-app-side-nav-header-home-link-padding", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "home-link", + "padding" + ] + }, + "token-app-side-nav-header-home-link-logo-size": { + "key": "{app-side-nav.header.home-link.logo-size}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{app-side-nav.header.home-link.logo-size}" + }, + "name": "token-app-side-nav-header-home-link-logo-size", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "home-link", + "logo-size" + ] + }, + "token-app-side-nav-header-home-link-logo-size-minimized": { + "key": "{app-side-nav.header.home-link.logo-size-minimized}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{app-side-nav.header.home-link.logo-size-minimized}" + }, + "name": "token-app-side-nav-header-home-link-logo-size-minimized", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "home-link", + "logo-size-minimized" + ] + }, + "token-app-side-nav-header-actions-spacing": { + "key": "{app-side-nav.header.actions.spacing}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.header.actions.spacing}" + }, + "name": "token-app-side-nav-header-actions-spacing", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "actions", + "spacing" + ] + }, + "token-app-side-nav-body-list-margin-vertical": { + "key": "{app-side-nav.body.list.margin-vertical}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{app-side-nav.body.list.margin-vertical}" + }, + "name": "token-app-side-nav-body-list-margin-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list", + "margin-vertical" + ] + }, + "token-app-side-nav-body-list-item-height": { + "key": "{app-side-nav.body.list-item.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{app-side-nav.body.list-item.height}" + }, + "name": "token-app-side-nav-body-list-item-height", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "height" + ] + }, + "token-app-side-nav-body-list-item-padding-horizontal": { + "key": "{app-side-nav.body.list-item.padding.horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.body.list-item.padding.horizontal}" + }, + "name": "token-app-side-nav-body-list-item-padding-horizontal", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "padding", + "horizontal" + ] + }, + "token-app-side-nav-body-list-item-padding-vertical": { + "key": "{app-side-nav.body.list-item.padding.vertical}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{app-side-nav.body.list-item.padding.vertical}" + }, + "name": "token-app-side-nav-body-list-item-padding-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "padding", + "vertical" + ] + }, + "token-app-side-nav-body-list-item-spacing-vertical": { + "key": "{app-side-nav.body.list-item.spacing-vertical}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{app-side-nav.body.list-item.spacing-vertical}" + }, + "name": "token-app-side-nav-body-list-item-spacing-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "spacing-vertical" + ] + }, + "token-app-side-nav-body-list-item-content-spacing-horizontal": { + "key": "{app-side-nav.body.list-item.content-spacing-horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.body.list-item.content-spacing-horizontal}" + }, + "name": "token-app-side-nav-body-list-item-content-spacing-horizontal", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "content-spacing-horizontal" + ] + }, + "token-app-side-nav-body-list-item-border-radius": { + "key": "{app-side-nav.body.list-item.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{app-side-nav.body.list-item.border-radius}" + }, + "name": "token-app-side-nav-body-list-item-border-radius", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "border-radius" + ] + }, + "token-app-side-nav-color-foreground-primary": { + "key": "{app-side-nav.color.foreground.primary}", + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "key": "{app-side-nav.color.foreground.primary}" + }, + "name": "token-app-side-nav-color-foreground-primary", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "foreground", + "primary" + ] + }, + "token-app-side-nav-color-foreground-strong": { + "key": "{app-side-nav.color.foreground.strong}", + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "key": "{app-side-nav.color.foreground.strong}" + }, + "name": "token-app-side-nav-color-foreground-strong", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "foreground", + "strong" + ] + }, + "token-app-side-nav-color-foreground-faint": { + "key": "{app-side-nav.color.foreground.faint}", + "$type": "color", + "$value": "var(--token-color-foreground-faint)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-foreground-faint)", + "group": "components", + "key": "{app-side-nav.color.foreground.faint}" + }, + "name": "token-app-side-nav-color-foreground-faint", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "foreground", + "faint" + ] + }, + "token-app-side-nav-color-surface-primary": { + "key": "{app-side-nav.color.surface.primary}", + "$type": "color", + "$value": "var(--token-color-surface-faint)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-surface-faint)", + "group": "components", + "key": "{app-side-nav.color.surface.primary}" + }, + "name": "token-app-side-nav-color-surface-primary", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "surface", + "primary" + ] + }, + "token-app-side-nav-color-surface-interactive-hover": { + "key": "{app-side-nav.color.surface.interactive-hover}", + "$type": "color", + "$value": "var(--token-color-surface-interactive-hover)", + "group": "semantic", + "original": { + "$type": "color", + "$value": "var(--token-color-surface-interactive-hover)", + "group": "semantic", + "key": "{app-side-nav.color.surface.interactive-hover}" + }, + "name": "token-app-side-nav-color-surface-interactive-hover", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "surface", + "interactive-hover" + ] + }, + "token-app-side-nav-color-surface-interactive-active": { + "key": "{app-side-nav.color.surface.interactive-active}", + "$type": "color", + "$value": "var(--token-color-palette-neutral-300)", + "group": "semantic", + "original": { + "$type": "color", + "$value": "var(--token-color-palette-neutral-300)", + "group": "semantic", + "key": "{app-side-nav.color.surface.interactive-active}" + }, + "name": "token-app-side-nav-color-surface-interactive-active", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "surface", + "interactive-active" + ] + }, + "token-badge-count-padding-horizontal-small": { + "key": "{badge-count.padding.horizontal.small}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge-count.padding.horizontal.small}" + }, + "name": "token-badge-count-padding-horizontal-small", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "small" + ] + }, + "token-badge-count-padding-horizontal-medium": { + "key": "{badge-count.padding.horizontal.medium}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge-count.padding.horizontal.medium}" + }, + "name": "token-badge-count-padding-horizontal-medium", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "medium" + ] + }, + "token-badge-count-padding-horizontal-large": { + "key": "{badge-count.padding.horizontal.large}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge-count.padding.horizontal.large}" + }, + "name": "token-badge-count-padding-horizontal-large", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "large" + ] + }, + "token-badge-height-small": { + "key": "{badge.height.small}", + "$type": "dimension", + "$value": "18px", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "18", + "cds-g10": "18", + "cds-g90": "18", + "cds-g100": "18" + }, + "original": { + "$type": "dimension", + "$value": "18", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "18", + "cds-g10": "18", + "cds-g90": "18", + "cds-g100": "18" + }, + "key": "{badge.height.small}" + }, + "name": "token-badge-height-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "small" + ] + }, + "token-badge-height-medium": { + "key": "{badge.height.medium}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{badge.height.medium}" + }, + "name": "token-badge-height-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "medium" + ] + }, + "token-badge-height-large": { + "key": "{badge.height.large}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{badge.height.large}" + }, + "name": "token-badge-height-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "large" + ] + }, + "token-badge-padding-horizontal-small": { + "key": "{badge.padding.horizontal.small}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge.padding.horizontal.small}" + }, + "name": "token-badge-padding-horizontal-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "small" + ] + }, + "token-badge-padding-horizontal-medium": { + "key": "{badge.padding.horizontal.medium}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge.padding.horizontal.medium}" + }, + "name": "token-badge-padding-horizontal-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "medium" + ] + }, + "token-badge-padding-horizontal-large": { + "key": "{badge.padding.horizontal.large}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.padding.horizontal.large}" + }, + "name": "token-badge-padding-horizontal-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "large" + ] + }, + "token-badge-padding-vertical-small": { + "key": "{badge.padding.vertical.small}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "$modes": { + "default": "2", + "cds-g0": "1", + "cds-g10": "1", + "cds-g90": "1", + "cds-g100": "1" + }, + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "$modes": { + "default": "2", + "cds-g0": "1", + "cds-g10": "1", + "cds-g90": "1", + "cds-g100": "1" + }, + "key": "{badge.padding.vertical.small}" + }, + "name": "token-badge-padding-vertical-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "small" + ] + }, + "token-badge-padding-vertical-medium": { + "key": "{badge.padding.vertical.medium}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{badge.padding.vertical.medium}" + }, + "name": "token-badge-padding-vertical-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "medium" + ] + }, + "token-badge-padding-vertical-large": { + "key": "{badge.padding.vertical.large}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{badge.padding.vertical.large}" + }, + "name": "token-badge-padding-vertical-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "large" + ] + }, + "token-badge-gap-small": { + "key": "{badge.gap.small}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.small}" + }, + "name": "token-badge-gap-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "small" + ] + }, + "token-badge-gap-medium": { + "key": "{badge.gap.medium}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.medium}" + }, + "name": "token-badge-gap-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "medium" + ] + }, + "token-badge-gap-large": { + "key": "{badge.gap.large}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.large}" + }, + "name": "token-badge-gap-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "large" + ] + }, + "token-badge-typography-font-size-small": { + "key": "{badge.typography.font-size.small}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "12", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.small}" + }, + "name": "token-badge-typography-font-size-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "small" + ] + }, + "token-badge-typography-font-size-medium": { + "key": "{badge.typography.font-size.medium}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "12", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.medium}" + }, + "name": "token-badge-typography-font-size-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "medium" + ] + }, + "token-badge-typography-font-size-large": { + "key": "{badge.typography.font-size.large}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "12", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.large}" + }, + "name": "token-badge-typography-font-size-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "large" + ] + }, + "token-badge-typography-line-height-small": { + "key": "{badge.typography.line-height.small}", + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "original": { + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "key": "{badge.typography.line-height.small}" + }, + "name": "token-badge-typography-line-height-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "small" + ] + }, + "token-badge-typography-line-height-medium": { + "key": "{badge.typography.line-height.medium}", + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "original": { + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "key": "{badge.typography.line-height.medium}" + }, + "name": "token-badge-typography-line-height-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "medium" + ] + }, + "token-badge-typography-line-height-large": { + "key": "{badge.typography.line-height.large}", + "$type": "number", + "$value": 1, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1, + "cds-g10": 1, + "cds-g90": 1, + "cds-g100": 1 + }, + "original": { + "$type": "number", + "$value": 1, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1, + "cds-g10": 1, + "cds-g90": 1, + "cds-g100": 1 + }, + "key": "{badge.typography.line-height.large}" + }, + "name": "token-badge-typography-line-height-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "large" + ] + }, + "token-badge-foreground-color-neutral-filled": { + "key": "{badge.foreground.color.neutral.filled}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g90}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral.filled}" + }, + "name": "token-badge-foreground-color-neutral-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "filled" + ] + }, + "token-badge-foreground-color-neutral-inverted": { + "key": "{badge.foreground.color.neutral.inverted}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.100}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.color.gray.20}", + "cds-g10": "{carbon.color.gray.20}", + "cds-g90": "{carbon.color.gray.100}", + "cds-g100": "{carbon.color.gray.100}" + }, + "key": "{badge.foreground.color.neutral.inverted}" + }, + "name": "token-badge-foreground-color-neutral-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "inverted" + ] + }, + "token-badge-foreground-color-neutral-outlined": { + "key": "{badge.foreground.color.neutral.outlined}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g90}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral.outlined}" + }, + "name": "token-badge-foreground-color-neutral-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "outlined" + ] + }, + "token-badge-foreground-color-neutral-dark-mode-filled": { + "key": "{badge.foreground.color.neutral-dark-mode.filled}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.neutral-dark-mode.filled}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "filled" + ] + }, + "token-badge-foreground-color-neutral-dark-mode-inverted": { + "key": "{badge.foreground.color.neutral-dark-mode.inverted}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g90}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral-dark-mode.inverted}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "inverted" + ] + }, + "token-badge-foreground-color-neutral-dark-mode-outlined": { + "key": "{badge.foreground.color.neutral-dark-mode.outlined}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "comments": { + "cds": "In Figma the `cds` value uses a token `Tag/HighContrast/TagColor` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "comments": { + "cds": "In Figma the `cds` value uses a token `Tag/HighContrast/TagColor` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.neutral-dark-mode.outlined}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "outlined" + ] + }, + "token-badge-foreground-color-highlight-filled": { + "key": "{badge.foreground.color.highlight.filled}", + "$type": "color", + "$value": "#e8daff", + "comment": "we don't use `highlight-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#6929c4", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorPurple.g90}", + "comment": "we don't use `highlight-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.purple-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorPurple.g100}" + }, + "key": "{badge.foreground.color.highlight.filled}" + }, + "name": "token-badge-foreground-color-highlight-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "filled" + ] + }, + "token-badge-foreground-color-highlight-inverted": { + "key": "{badge.foreground.color.highlight.inverted}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.highlight.inverted}" + }, + "name": "token-badge-foreground-color-highlight-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "inverted" + ] + }, + "token-badge-foreground-color-highlight-outlined": { + "key": "{badge.foreground.color.highlight.outlined}", + "$type": "color", + "$value": "#e8daff", + "$modes": { + "default": "#be95ff", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorPurple.g90}", + "$modes": { + "default": "{color.foreground.highlight}", + "cds-g0": "{carbon.themes.tagTokens.tagColorPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorPurple.g100}" + }, + "key": "{badge.foreground.color.highlight.outlined}" + }, + "name": "token-badge-foreground-color-highlight-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "outlined" + ] + }, + "token-badge-foreground-color-success-filled": { + "key": "{badge.foreground.color.success.filled}", + "$type": "color", + "$value": "#a7f0ba", + "comment": "we don't use `success-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#0e6027", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "comment": "we don't use `success-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.green-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.foreground.color.success.filled}" + }, + "name": "token-badge-foreground-color-success-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "filled" + ] + }, + "token-badge-foreground-color-success-inverted": { + "key": "{badge.foreground.color.success.inverted}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.success.inverted}" + }, + "name": "token-badge-foreground-color-success-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "inverted" + ] + }, + "token-badge-foreground-color-success-outlined": { + "key": "{badge.foreground.color.success.outlined}", + "$type": "color", + "$value": "#a7f0ba", + "$modes": { + "default": "#42be65", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "$modes": { + "default": "{color.foreground.success}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.foreground.color.success.outlined}" + }, + "name": "token-badge-foreground-color-success-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "outlined" + ] + }, + "token-badge-foreground-color-warning-filled": { + "key": "{badge.foreground.color.warning.filled}", + "$type": "color", + "$value": "#ffd9be", + "$modes": { + "default": "#5e2900", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "hds": "we don't use `warning-on-surface` for accessibility (better contrast)", + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.20}", + "$modes": { + "default": "{color.palette.amber-400}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "hds": "we don't use `warning-on-surface` for accessibility (better contrast)", + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.warning.filled}" + }, + "name": "token-badge-foreground-color-warning-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "filled" + ] + }, + "token-badge-foreground-color-warning-inverted": { + "key": "{badge.foreground.color.warning.inverted}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.warning.inverted}" + }, + "name": "token-badge-foreground-color-warning-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "inverted" + ] + }, + "token-badge-foreground-color-warning-outlined": { + "key": "{badge.foreground.color.warning.outlined}", + "$type": "color", + "$value": "#ffd9be", + "$modes": { + "default": "#d2a106", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.20}", + "$modes": { + "default": "{color.foreground.warning}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.warning.outlined}" + }, + "name": "token-badge-foreground-color-warning-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "outlined" + ] + }, + "token-badge-foreground-color-critical-filled": { + "key": "{badge.foreground.color.critical.filled}", + "$type": "color", + "$value": "#ffd7d9", + "comment": "we don't use `critical-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#750e13", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorRed.g90}", + "comment": "we don't use `critical-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.foreground.color.critical.filled}" + }, + "name": "token-badge-foreground-color-critical-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "filled" + ] + }, + "token-badge-foreground-color-critical-inverted": { + "key": "{badge.foreground.color.critical.inverted}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.critical.inverted}" + }, + "name": "token-badge-foreground-color-critical-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "inverted" + ] + }, + "token-badge-foreground-color-critical-outlined": { + "key": "{badge.foreground.color.critical.outlined}", + "$type": "color", + "$value": "#ffd7d9", + "$modes": { + "default": "#ff8389", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorRed.g90}", + "$modes": { + "default": "{color.foreground.critical}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.foreground.color.critical.outlined}" + }, + "name": "token-badge-foreground-color-critical-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "outlined" + ] + }, + "token-badge-surface-color-neutral-filled": { + "key": "{badge.surface.color.neutral.filled}", + "$type": "color", + "$value": "#525252", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "$modes": { + "default": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{badge.surface.color.neutral.filled}" + }, + "name": "token-badge-surface-color-neutral-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "filled" + ] + }, + "token-badge-surface-color-neutral-inverted": { + "key": "{badge.surface.color.neutral.inverted}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#525252", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead", + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.backgroundInverse}", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead", + "key": "{badge.surface.color.neutral.inverted}" + }, + "name": "token-badge-surface-color-neutral-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "inverted" + ] + }, + "token-badge-surface-color-neutral-outlined": { + "key": "{badge.surface.color.neutral.outlined}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{badge.surface.color.neutral.outlined}" + }, + "name": "token-badge-surface-color-neutral-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "outlined" + ] + }, + "token-badge-surface-color-neutral-dark-mode-filled": { + "key": "{badge.surface.color.neutral-dark-mode.filled}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#525252", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component", + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.backgroundInverse}", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component", + "key": "{badge.surface.color.neutral-dark-mode.filled}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "filled" + ] + }, + "token-badge-surface-color-neutral-dark-mode-inverted": { + "key": "{badge.surface.color.neutral-dark-mode.inverted}", + "$type": "color", + "$value": "#525252", + "$modes": { + "default": "#393939", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{badge.surface.color.neutral-dark-mode.inverted}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "inverted" + ] + }, + "token-badge-surface-color-neutral-dark-mode-outlined": { + "key": "{badge.surface.color.neutral-dark-mode.outlined}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{badge.surface.color.neutral-dark-mode.outlined}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "outlined" + ] + }, + "token-badge-surface-color-highlight-filled": { + "key": "{badge.surface.color.highlight.filled}", + "$type": "color", + "$value": "#6929c4", + "comment": "we don't use `surface-highlight` for accessibility (better contrast)", + "$modes": { + "default": "#e8daff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundPurple.g90}", + "comment": "we don't use `surface-highlight` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.purple-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundPurple.g100}" + }, + "key": "{badge.surface.color.highlight.filled}" + }, + "name": "token-badge-surface-color-highlight-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "highlight", + "filled" + ] + }, + "token-badge-surface-color-highlight-inverted": { + "key": "{badge.surface.color.highlight.inverted}", + "$type": "color", + "$value": "#be95ff", + "$modes": { + "default": "#a56eff", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.40}", + "$modes": { + "default": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, + "key": "{badge.surface.color.highlight.inverted}" + }, + "name": "token-badge-surface-color-highlight-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "highlight", + "inverted" + ] + }, + "token-badge-surface-color-success-filled": { + "key": "{badge.surface.color.success.filled}", + "$type": "color", + "$value": "#0e6027", + "comment": "we don't use `surface-success` for accessibility (better contrast)", + "$modes": { + "default": "#a7f0ba", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGreen.g90}", + "comment": "we don't use `surface-success` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.green-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGreen.g100}" + }, + "key": "{badge.surface.color.success.filled}" + }, + "name": "token-badge-surface-color-success-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "success", + "filled" + ] + }, + "token-badge-surface-color-success-inverted": { + "key": "{badge.surface.color.success.inverted}", + "$type": "color", + "$value": "#a7f0ba", + "$modes": { + "default": "#24a148", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "$modes": { + "default": "{color.palette.green-200}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.surface.color.success.inverted}" + }, + "name": "token-badge-surface-color-success-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "success", + "inverted" + ] + }, + "token-badge-surface-color-warning-filled": { + "key": "{badge.surface.color.warning.filled}", + "$type": "color", + "$value": "#8a3800", + "comment": "we don't use `surface-warning` for accessibility (better contrast)", + "$modes": { + "default": "#ffd9be", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.70}", + "comment": "we don't use `surface-warning` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.surface.color.warning.filled}" + }, + "name": "token-badge-surface-color-warning-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "warning", + "filled" + ] + }, + "token-badge-surface-color-warning-inverted": { + "key": "{badge.surface.color.warning.inverted}", + "$type": "color", + "$value": "#ffd9be", + "$modes": { + "default": "#ba4e00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.20}", + "$modes": { + "default": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.surface.color.warning.inverted}" + }, + "name": "token-badge-surface-color-warning-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "warning", + "inverted" + ] + }, + "token-badge-surface-color-critical-filled": { + "key": "{badge.surface.color.critical.filled}", + "$type": "color", + "$value": "#a2191f", + "comment": "we don't use `surface-critical` for accessibility (better contrast)", + "$modes": { + "default": "#ffd7d9", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundRed.g90}", + "comment": "we don't use `surface-critical` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.red-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundRed.g100}" + }, + "key": "{badge.surface.color.critical.filled}" + }, + "name": "token-badge-surface-color-critical-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "critical", + "filled" + ] + }, + "token-badge-surface-color-critical-inverted": { + "key": "{badge.surface.color.critical.inverted}", + "$type": "color", + "$value": "#ffd7d9", + "$modes": { + "default": "#da1e28", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorRed.g90}", + "$modes": { + "default": "{color.palette.red-200}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.surface.color.critical.inverted}" + }, + "name": "token-badge-surface-color-critical-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "critical", + "inverted" + ] + }, + "token-badge-border-radius": { + "key": "{badge.border.radius}", + "$type": "dimension", + "$value": "1000000000px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "1000000000px", + "cds-g10": "1000000000px", + "cds-g90": "1000000000px", + "cds-g100": "1000000000px" + }, + "original": { + "$type": "dimension", + "$value": "{border.radius.rounded}", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "{border.radius.rounded}", + "cds-g10": "{border.radius.rounded}", + "cds-g90": "{border.radius.rounded}", + "cds-g100": "{border.radius.rounded}" + }, + "key": "{badge.border.radius}" + }, + "name": "token-badge-border-radius", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "border", + "radius" + ] + }, + "token-badge-icon-size-small": { + "key": "{badge.icon.size.small}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{badge.icon.size.small}" + }, + "name": "token-badge-icon-size-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "small" + ] + }, + "token-badge-icon-size-medium": { + "key": "{badge.icon.size.medium}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{badge.icon.size.medium}" + }, + "name": "token-badge-icon-size-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "medium" + ] + }, + "token-badge-icon-size-large": { + "key": "{badge.icon.size.large}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{badge.icon.size.large}" + }, + "name": "token-badge-icon-size-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "large" + ] + }, + "token-button-height-small": { + "key": "{button.height.small}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "$modes": { + "default": "28", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "$modes": { + "default": "28", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "key": "{button.height.small}" + }, + "name": "token-button-height-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "small" + ] + }, + "token-button-height-medium": { + "key": "{button.height.medium}", + "$type": "dimension", + "$value": "40px", + "unit": "px", + "$modes": { + "default": "36", + "cds-g0": "40", + "cds-g10": "40", + "cds-g90": "40", + "cds-g100": "40" + }, + "original": { + "$type": "dimension", + "$value": "40", + "unit": "px", + "$modes": { + "default": "36", + "cds-g0": "40", + "cds-g10": "40", + "cds-g90": "40", + "cds-g100": "40" + }, + "key": "{button.height.medium}" + }, + "name": "token-button-height-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "medium" + ] + }, + "token-button-height-large": { + "key": "{button.height.large}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "$modes": { + "default": "48", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "$modes": { + "default": "48", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "key": "{button.height.large}" + }, + "name": "token-button-height-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "large" + ] + }, + "token-button-padding-horizontal-small": { + "key": "{button.padding.horizontal.small}", + "$type": "dimension", + "$value": "15px", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "15", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.small}" + }, + "name": "token-button-padding-horizontal-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "small" + ] + }, + "token-button-padding-horizontal-medium": { + "key": "{button.padding.horizontal.medium}", + "$type": "dimension", + "$value": "15px", + "unit": "px", + "$modes": { + "default": "15", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "15", + "unit": "px", + "$modes": { + "default": "15", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.medium}" + }, + "name": "token-button-padding-horizontal-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "medium" + ] + }, + "token-button-padding-horizontal-large": { + "key": "{button.padding.horizontal.large}", + "$type": "dimension", + "$value": "15px", + "unit": "px", + "$modes": { + "default": "19", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "15", + "unit": "px", + "$modes": { + "default": "19", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.large}" + }, + "name": "token-button-padding-horizontal-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "large" + ] + }, + "token-button-padding-vertical-small": { + "key": "{button.padding.vertical.small}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.small}" + }, + "name": "token-button-padding-vertical-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "small" + ] + }, + "token-button-padding-vertical-medium": { + "key": "{button.padding.vertical.medium}", + "$type": "dimension", + "$value": "10px", + "unit": "px", + "$modes": { + "default": "9", + "cds-g0": "10", + "cds-g10": "10", + "cds-g90": "10", + "cds-g100": "10" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "10", + "unit": "px", + "$modes": { + "default": "9", + "cds-g0": "10", + "cds-g10": "10", + "cds-g90": "10", + "cds-g100": "10" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.medium}" + }, + "name": "token-button-padding-vertical-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "medium" + ] + }, + "token-button-padding-vertical-large": { + "key": "{button.padding.vertical.large}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "14", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.large}" + }, + "name": "token-button-padding-vertical-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "large" + ] + }, + "token-button-gap": { + "key": "{button.gap}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "key": "{button.gap}" + }, + "name": "token-button-gap", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "gap" + ] + }, + "token-button-typography-font-size-small": { + "key": "{button.typography.font-size.small}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.small}" + }, + "name": "token-button-typography-font-size-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "small" + ] + }, + "token-button-typography-font-size-medium": { + "key": "{button.typography.font-size.medium}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.medium}" + }, + "name": "token-button-typography-font-size-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "medium" + ] + }, + "token-button-typography-font-size-large": { + "key": "{button.typography.font-size.large}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.large}" + }, + "name": "token-button-typography-font-size-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "large" + ] + }, + "token-button-typography-line-height-small": { + "key": "{button.typography.line-height.small}", + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)", + "$modes": { + "default": 0.9286, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)", + "$modes": { + "default": 0.9286, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.small}" + }, + "name": "token-button-typography-line-height-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "small" + ] + }, + "token-button-typography-line-height-medium": { + "key": "{button.typography.line-height.medium}", + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 1.1429", + "$modes": { + "default": 1.1429, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 1.1429", + "$modes": { + "default": 1.1429, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.medium}" + }, + "name": "token-button-typography-line-height-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "medium" + ] + }, + "token-button-typography-line-height-large": { + "key": "{button.typography.line-height.large}", + "$type": "number", + "$value": 1.2858, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 1.2858, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.large}" + }, + "name": "token-button-typography-line-height-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "large" + ] + }, + "token-button-foreground-color-primary-default": { + "key": "{button.foreground.color.primary.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.default}" + }, + "name": "token-button-foreground-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "default" + ] + }, + "token-button-foreground-color-primary-hover": { + "key": "{button.foreground.color.primary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.hover}" + }, + "name": "token-button-foreground-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "hover" + ] + }, + "token-button-foreground-color-primary-focus": { + "key": "{button.foreground.color.primary.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.focus}" + }, + "name": "token-button-foreground-color-primary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "focus" + ] + }, + "token-button-foreground-color-primary-active": { + "key": "{button.foreground.color.primary.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.active}" + }, + "name": "token-button-foreground-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "active" + ] + }, + "token-button-foreground-color-secondary-default": { + "key": "{button.foreground.color.secondary.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.default}" + }, + "name": "token-button-foreground-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "default" + ] + }, + "token-button-foreground-color-secondary-hover": { + "key": "{button.foreground.color.secondary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.hover}" + }, + "name": "token-button-foreground-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "hover" + ] + }, + "token-button-foreground-color-secondary-focus": { + "key": "{button.foreground.color.secondary.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.focus}" + }, + "name": "token-button-foreground-color-secondary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "focus" + ] + }, + "token-button-foreground-color-secondary-active": { + "key": "{button.foreground.color.secondary.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.active}" + }, + "name": "token-button-foreground-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "active" + ] + }, + "token-button-foreground-color-tertiary-default": { + "key": "{button.foreground.color.tertiary.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#78a9ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiary.g90}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiary.g100}" + }, + "key": "{button.foreground.color.tertiary.default}" + }, + "name": "token-button-foreground-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "default" + ] + }, + "token-button-foreground-color-tertiary-hover": { + "key": "{button.foreground.color.tertiary.hover}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#a6c8ff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textInverse}", + "$modes": { + "default": "{color.foreground.action-hover}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.hover}" + }, + "name": "token-button-foreground-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "hover" + ] + }, + "token-button-foreground-color-tertiary-focus": { + "key": "{button.foreground.color.tertiary.focus}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#78a9ff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textInverse}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.focus}" + }, + "name": "token-button-foreground-color-tertiary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "focus" + ] + }, + "token-button-foreground-color-tertiary-active": { + "key": "{button.foreground.color.tertiary.active}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#a6c8ff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textInverse}", + "$modes": { + "default": "{color.foreground.action-active}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.active}" + }, + "name": "token-button-foreground-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "active" + ] + }, + "token-button-foreground-color-critical-default": { + "key": "{button.foreground.color.critical.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffb3b8", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textOnColor}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.default}" + }, + "name": "token-button-foreground-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "default" + ] + }, + "token-button-foreground-color-critical-hover": { + "key": "{button.foreground.color.critical.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.hover}" + }, + "name": "token-button-foreground-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "hover" + ] + }, + "token-button-foreground-color-critical-focus": { + "key": "{button.foreground.color.critical.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffb3b8", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textOnColor}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.focus}" + }, + "name": "token-button-foreground-color-critical-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "focus" + ] + }, + "token-button-foreground-color-critical-active": { + "key": "{button.foreground.color.critical.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.active}" + }, + "name": "token-button-foreground-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "active" + ] + }, + "token-button-foreground-color-disabled": { + "key": "{button.foreground.color.disabled}", + "$type": "color", + "$value": "rgba(255, 255, 255, 0.25)", + "$modes": { + "default": "rgba(244, 244, 244, 0.25)", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "rgba(255, 255, 255, 0.25)", + "cds-g100": "rgba(255, 255, 255, 0.25)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textOnColorDisabled}", + "$modes": { + "default": "{color.foreground.disabled}", + "cds-g0": "{carbon.themes.white.textOnColorDisabled}", + "cds-g10": "{carbon.themes.g10.textOnColorDisabled}", + "cds-g90": "{carbon.themes.g90.textOnColorDisabled}", + "cds-g100": "{carbon.themes.g100.textOnColorDisabled}" + }, + "key": "{button.foreground.color.disabled}" + }, + "name": "token-button-foreground-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "disabled" + ] + }, + "token-button-surface-color-primary-default": { + "key": "{button.surface.color.primary.default}", + "$type": "color", + "$value": "#0f62fe", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimary.g90}", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimary.g100}" + }, + "key": "{button.surface.color.primary.default}" + }, + "name": "token-button-surface-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "default" + ] + }, + "token-button-surface-color-primary-hover": { + "key": "{button.surface.color.primary.hover}", + "$type": "color", + "$value": "#0050e6", + "$modes": { + "default": "#0043ce", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#0050e6", + "cds-g100": "#0050e6" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimaryHover.g90}", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimaryHover.g100}" + }, + "key": "{button.surface.color.primary.hover}" + }, + "name": "token-button-surface-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "hover" + ] + }, + "token-button-surface-color-primary-focus": { + "key": "{button.surface.color.primary.focus}", + "$type": "color", + "$value": "#0f62fe", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimary.g90}", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimary.g100}" + }, + "key": "{button.surface.color.primary.focus}" + }, + "name": "token-button-surface-color-primary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "focus" + ] + }, + "token-button-surface-color-primary-active": { + "key": "{button.surface.color.primary.active}", + "$type": "color", + "$value": "#002d9c", + "$modes": { + "default": "#002d9c", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#002d9c", + "cds-g100": "#002d9c" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimaryActive.g90}", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimaryActive.g100}" + }, + "key": "{button.surface.color.primary.active}" + }, + "name": "token-button-surface-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "active" + ] + }, + "token-button-surface-color-secondary-default": { + "key": "{button.surface.color.secondary.default}", + "$type": "color", + "$value": "#6f6f6f", + "$modes": { + "default": "#393939", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#6f6f6f", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondary.g90}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondary.g100}" + }, + "key": "{button.surface.color.secondary.default}" + }, + "name": "token-button-surface-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "default" + ] + }, + "token-button-surface-color-secondary-hover": { + "key": "{button.surface.color.secondary.hover}", + "$type": "color", + "$value": "#5e5e5e", + "$modes": { + "default": "#393939", + "cds-g0": "#474747", + "cds-g10": "#474747", + "cds-g90": "#5e5e5e", + "cds-g100": "#5e5e5e" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondaryHover.g90}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondaryHover.g100}" + }, + "key": "{button.surface.color.secondary.hover}" + }, + "name": "token-button-surface-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "hover" + ] + }, + "token-button-surface-color-secondary-focus": { + "key": "{button.surface.color.secondary.focus}", + "$type": "color", + "$value": "#6f6f6f", + "$modes": { + "default": "#393939", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#6f6f6f", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondary.g90}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondary.g100}" + }, + "key": "{button.surface.color.secondary.focus}" + }, + "name": "token-button-surface-color-secondary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "focus" + ] + }, + "token-button-surface-color-secondary-active": { + "key": "{button.surface.color.secondary.active}", + "$type": "color", + "$value": "#393939", + "$modes": { + "default": "#6f6f6f", + "cds-g0": "#6f6f6f", + "cds-g10": "#6f6f6f", + "cds-g90": "#393939", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondaryActive.g90}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondaryActive.g100}" + }, + "key": "{button.surface.color.secondary.active}" + }, + "name": "token-button-surface-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "active" + ] + }, + "token-button-surface-color-tertiary-default": { + "key": "{button.surface.color.tertiary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{button.surface.color.tertiary.default}" + }, + "name": "token-button-surface-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "default" + ] + }, + "token-button-surface-color-tertiary-hover": { + "key": "{button.surface.color.tertiary.hover}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#393939", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiaryHover.g90}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryHover.g100}" + }, + "key": "{button.surface.color.tertiary.hover}" + }, + "name": "token-button-surface-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "hover" + ] + }, + "token-button-surface-color-tertiary-focus": { + "key": "{button.surface.color.tertiary.focus}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "transparent", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiaryHover.g90}", + "$modes": { + "default": "transparent", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryHover.g100}" + }, + "key": "{button.surface.color.tertiary.focus}" + }, + "name": "token-button-surface-color-tertiary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "focus" + ] + }, + "token-button-surface-color-tertiary-active": { + "key": "{button.surface.color.tertiary.active}", + "$type": "color", + "$value": "#c6c6c6", + "$modes": { + "default": "#6f6f6f", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiaryActive.g90}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryActive.g100}" + }, + "key": "{button.surface.color.tertiary.active}" + }, + "name": "token-button-surface-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "active" + ] + }, + "token-button-surface-color-critical-default": { + "key": "{button.surface.color.critical.default}", + "$type": "color", + "$value": "#da1e28", + "$modes": { + "default": "#a2191f", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerPrimary.g90}", + "$modes": { + "default": "{color.surface.critical}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerPrimary.g100}" + }, + "key": "{button.surface.color.critical.default}" + }, + "name": "token-button-surface-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "default" + ] + }, + "token-button-surface-color-critical-hover": { + "key": "{button.surface.color.critical.hover}", + "$type": "color", + "$value": "#b81921", + "$modes": { + "default": "#a2191f", + "cds-g0": "#b81921", + "cds-g10": "#b81921", + "cds-g90": "#b81921", + "cds-g100": "#b81921" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerHover.g90}", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerHover.g100}" + }, + "key": "{button.surface.color.critical.hover}" + }, + "name": "token-button-surface-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "hover" + ] + }, + "token-button-surface-color-critical-focus": { + "key": "{button.surface.color.critical.focus}", + "$type": "color", + "$value": "#da1e28", + "$modes": { + "default": "#a2191f", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerPrimary.g90}", + "$modes": { + "default": "{color.surface.critical}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerPrimary.g100}" + }, + "key": "{button.surface.color.critical.focus}" + }, + "name": "token-button-surface-color-critical-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "focus" + ] + }, + "token-button-surface-color-critical-active": { + "key": "{button.surface.color.critical.active}", + "$type": "color", + "$value": "#750e13", + "$modes": { + "default": "#750e13", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#750e13", + "cds-g100": "#750e13" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerActive.g90}", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerActive.g100}" + }, + "key": "{button.surface.color.critical.active}" + }, + "name": "token-button-surface-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "active" + ] + }, + "token-button-surface-color-disabled": { + "key": "{button.surface.color.disabled}", + "$type": "color", + "$value": "#8d8d8d", + "$modes": { + "default": "#393939", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDisabled.g90}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDisabled.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDisabled.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDisabled.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDisabled.g100}" + }, + "key": "{button.surface.color.disabled}" + }, + "name": "token-button-surface-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "disabled" + ] + }, + "token-button-border-width": { + "key": "{button.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{button.border.width}" + }, + "name": "token-button-border-width", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "width" + ] + }, + "token-button-border-radius": { + "key": "{button.border.radius}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{button.border.radius}" + }, + "name": "token-button-border-radius", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "radius" + ] + }, + "token-button-border-color-primary-default": { + "key": "{button.border.color.primary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#0043ce", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.default}" + }, + "name": "token-button-border-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "default" + ] + }, + "token-button-border-color-primary-hover": { + "key": "{button.border.color.primary.hover}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#0043ce", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.hover}" + }, + "name": "token-button-border-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "hover" + ] + }, + "token-button-border-color-primary-focus-internal": { + "key": "{button.border.color.primary.focus.internal}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#161616", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.primary.focus.internal}" + }, + "name": "token-button-border-color-primary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "focus", + "internal" + ] + }, + "token-button-border-color-primary-focus-external": { + "key": "{button.border.color.primary.focus.external}", + "$type": "color", + "$value": "#ff00ff", + "$modes": { + "default": "#ffffff", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "magenta", + "$modes": { + "default": "{color.focus.action.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.primary.focus.external}" + }, + "name": "token-button-border-color-primary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "focus", + "external" + ] + }, + "token-button-border-color-primary-active": { + "key": "{button.border.color.primary.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#002d9c", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.active}" + }, + "name": "token-button-border-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "active" + ] + }, + "token-button-border-color-secondary-default": { + "key": "{button.border.color.secondary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.default}" + }, + "name": "token-button-border-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "default" + ] + }, + "token-button-border-color-secondary-hover": { + "key": "{button.border.color.secondary.hover}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.hover}" + }, + "name": "token-button-border-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "hover" + ] + }, + "token-button-border-color-secondary-focus-internal": { + "key": "{button.border.color.secondary.focus.internal}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#161616", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.secondary.focus.internal}" + }, + "name": "token-button-border-color-secondary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "focus", + "internal" + ] + }, + "token-button-border-color-secondary-focus-external": { + "key": "{button.border.color.secondary.focus.external}", + "$type": "color", + "$value": "#ff00ff", + "$modes": { + "default": "#ffffff", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "magenta", + "$modes": { + "default": "{color.focus.action.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.secondary.focus.external}" + }, + "name": "token-button-border-color-secondary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "focus", + "external" + ] + }, + "token-button-border-color-secondary-active": { + "key": "{button.border.color.secondary.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.active}" + }, + "name": "token-button-border-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "active" + ] + }, + "token-button-border-color-tertiary-default": { + "key": "{button.border.color.tertiary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{button.border.color.tertiary.default}" + }, + "name": "token-button-border-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "default" + ] + }, + "token-button-border-color-tertiary-hover": { + "key": "{button.border.color.tertiary.hover}", + "$type": "color", + "$value": "#8d8d8d", + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "key": "{button.border.color.tertiary.hover}" + }, + "name": "token-button-border-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "hover" + ] + }, + "token-button-border-color-tertiary-focus-internal": { + "key": "{button.border.color.tertiary.focus.internal}", + "$type": "color", + "$value": "#161616", + "original": { + "$type": "color", + "$value": "{color.focus.action.internal}", + "key": "{button.border.color.tertiary.focus.internal}" + }, + "name": "token-button-border-color-tertiary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "focus", + "internal" + ] + }, + "token-button-border-color-tertiary-focus-external": { + "key": "{button.border.color.tertiary.focus.external}", + "$type": "color", + "$value": "#ffffff", + "original": { + "$type": "color", + "$value": "{color.focus.action.external}", + "key": "{button.border.color.tertiary.focus.external}" + }, + "name": "token-button-border-color-tertiary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "focus", + "external" + ] + }, + "token-button-border-color-tertiary-active": { + "key": "{button.border.color.tertiary.active}", + "$type": "color", + "$value": "#8d8d8d", + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "key": "{button.border.color.tertiary.active}" + }, + "name": "token-button-border-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "active" + ] + }, + "token-button-border-color-critical-default": { + "key": "{button.border.color.critical.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#ffb3b8", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.default}" + }, + "name": "token-button-border-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "default" + ] + }, + "token-button-border-color-critical-hover": { + "key": "{button.border.color.critical.hover}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#750e13", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.hover}" + }, + "name": "token-button-border-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "hover" + ] + }, + "token-button-border-color-critical-focus-internal": { + "key": "{button.border.color.critical.focus.internal}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#161616", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.critical.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.critical.focus.internal}" + }, + "name": "token-button-border-color-critical-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "focus", + "internal" + ] + }, + "token-button-border-color-critical-focus-external": { + "key": "{button.border.color.critical.focus.external}", + "$type": "color", + "$value": "#ff00ff", + "$modes": { + "default": "#ffffff", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "magenta", + "$modes": { + "default": "{color.focus.critical.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.critical.focus.external}" + }, + "name": "token-button-border-color-critical-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "focus", + "external" + ] + }, + "token-button-border-color-critical-active": { + "key": "{button.border.color.critical.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#750e13", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.active}" + }, + "name": "token-button-border-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "active" + ] + }, + "token-button-border-color-disabled": { + "key": "{button.border.color.disabled}", + "$type": "color", + "$value": "#8d8d8d", + "original": { + "$type": "color", + "$value": "{color.border.primary}", + "key": "{button.border.color.disabled}" + }, + "name": "token-button-border-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "disabled" + ] + }, + "token-button-focus-border-width": { + "key": "{button.focus.border.width}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{button.focus.border.width}" + }, + "name": "token-button-focus-border-width", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "focus", + "border", + "width" + ] + }, + "token-button-icon-size-small": { + "key": "{button.icon.size.small}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.small}" + }, + "name": "token-button-icon-size-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "small" + ] + }, + "token-button-icon-size-medium": { + "key": "{button.icon.size.medium}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.medium}" + }, + "name": "token-button-icon-size-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "medium" + ] + }, + "token-button-icon-size-large": { + "key": "{button.icon.size.large}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.large}" + }, + "name": "token-button-icon-size-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "large" + ] + }, + "token-dismiss-button-size": { + "key": "{dismiss-button.size}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "key": "{dismiss-button.size}" + }, + "name": "token-dismiss-button-size", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "size" + ] + }, + "token-dismiss-button-foreground-color-default": { + "key": "{dismiss-button.foreground.color.default}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.iconPrimary}", + "$modes": { + "default": "{color.foreground.faint}", + "cds-g0": "{carbon.themes.white.iconPrimary}", + "cds-g10": "{carbon.themes.g10.iconPrimary}", + "cds-g90": "{carbon.themes.g90.iconPrimary}", + "cds-g100": "{carbon.themes.g100.iconPrimary}" + }, + "key": "{dismiss-button.foreground.color.default}" + }, + "name": "token-dismiss-button-foreground-color-default", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "foreground", + "color", + "default" + ] + }, + "token-dismiss-button-foreground-color-active": { + "key": "{dismiss-button.foreground.color.active}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.iconPrimary}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.white.iconPrimary}", + "cds-g10": "{carbon.themes.g10.iconPrimary}", + "cds-g90": "{carbon.themes.g90.iconPrimary}", + "cds-g100": "{carbon.themes.g100.iconPrimary}" + }, + "key": "{dismiss-button.foreground.color.active}" + }, + "name": "token-dismiss-button-foreground-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "foreground", + "color", + "active" + ] + }, + "token-dismiss-button-surface-color-hover": { + "key": "{dismiss-button.surface.color.hover}", + "$type": "color", + "$value": "rgba(141, 141, 141, 0.16)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "rgba(141, 141, 141, 0.12)", + "cds-g10": "rgba(141, 141, 141, 0.12)", + "cds-g90": "rgba(141, 141, 141, 0.16)", + "cds-g100": "rgba(141, 141, 141, 0.16)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.backgroundHover}", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "{carbon.themes.white.backgroundHover}", + "cds-g10": "{carbon.themes.g10.backgroundHover}", + "cds-g90": "{carbon.themes.g90.backgroundHover}", + "cds-g100": "{carbon.themes.g100.backgroundHover}" + }, + "key": "{dismiss-button.surface.color.hover}" + }, + "name": "token-dismiss-button-surface-color-hover", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "surface", + "color", + "hover" + ] + }, + "token-dismiss-button-surface-color-active": { + "key": "{dismiss-button.surface.color.active}", + "$type": "color", + "$value": "rgba(141, 141, 141, 0.4)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "rgba(141, 141, 141, 0.5)", + "cds-g10": "rgba(141, 141, 141, 0.5)", + "cds-g90": "rgba(141, 141, 141, 0.4)", + "cds-g100": "rgba(141, 141, 141, 0.4)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.backgroundActive}", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "{carbon.themes.white.backgroundActive}", + "cds-g10": "{carbon.themes.g10.backgroundActive}", + "cds-g90": "{carbon.themes.g90.backgroundActive}", + "cds-g100": "{carbon.themes.g100.backgroundActive}" + }, + "key": "{dismiss-button.surface.color.active}" + }, + "name": "token-dismiss-button-surface-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "surface", + "color", + "active" + ] + }, + "token-dismiss-button-border-color-active": { + "key": "{dismiss-button.border.color.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{dismiss-button.border.color.active}" + }, + "name": "token-dismiss-button-border-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "border", + "color", + "active" + ] + }, + "token-dismiss-button-icon-size": { + "key": "{dismiss-button.icon.size}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "20", + "cds-g10": "20", + "cds-g90": "20", + "cds-g100": "20" + }, + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "20", + "cds-g10": "20", + "cds-g90": "20", + "cds-g100": "20" + }, + "key": "{dismiss-button.icon.size}" + }, + "name": "token-dismiss-button-icon-size", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "icon", + "size" + ] + }, + "token-form-label-color": { + "key": "{form.label.color}", + "$type": "color", + "$value": "#f4f4f4", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.strong}", + "group": "components", + "key": "{form.label.color}" + }, + "name": "token-form-label-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "label", + "color" + ] + }, + "token-form-legend-color": { + "key": "{form.legend.color}", + "$type": "color", + "$value": "#f4f4f4", + "group": "components", + "original": { + "$type": "color", + "$value": "{form.label.color}", + "group": "components", + "key": "{form.legend.color}" + }, + "name": "token-form-legend-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "legend", + "color" + ] + }, + "token-form-helper-text-color": { + "key": "{form.helper-text.color}", + "$type": "color", + "$value": "#c6c6c6", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.helper-text.color}" + }, + "name": "token-form-helper-text-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "helper-text", + "color" + ] + }, + "token-form-indicator-optional-color": { + "key": "{form.indicator.optional.color}", + "$type": "color", + "$value": "#c6c6c6", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.indicator.optional.color}" + }, + "name": "token-form-indicator-optional-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "indicator", + "optional", + "color" + ] + }, + "token-form-error-color": { + "key": "{form.error.color}", + "$type": "color", + "$value": "#a2191f", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "components", + "key": "{form.error.color}" + }, + "name": "token-form-error-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "error", + "color" + ] + }, + "token-form-error-icon-size": { + "key": "{form.error.icon-size}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "14", + "unit": "px", + "key": "{form.error.icon-size}" + }, + "name": "token-form-error-icon-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "error", + "icon-size" + ] + }, + "token-form-checkbox-size": { + "key": "{form.checkbox.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.checkbox.size}" + }, + "name": "token-form-checkbox-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "size" + ] + }, + "token-form-checkbox-border-radius": { + "key": "{form.checkbox.border.radius}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{form.checkbox.border.radius}" + }, + "name": "token-form-checkbox-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "border", + "radius" + ] + }, + "token-form-checkbox-border-width": { + "key": "{form.checkbox.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.checkbox.border.width}" + }, + "name": "token-form-checkbox-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "border", + "width" + ] + }, + "token-form-checkbox-background-image-size": { + "key": "{form.checkbox.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.checkbox.background-image.size}" + }, + "name": "token-form-checkbox-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "size" + ] + }, + "token-form-checkbox-background-image-data-url": { + "key": "{form.checkbox.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url}" + }, + "name": "token-form-checkbox-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url" + ] + }, + "token-form-checkbox-background-image-data-url-indeterminate": { + "key": "{form.checkbox.background-image.data-url-indeterminate}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url-indeterminate}" + }, + "name": "token-form-checkbox-background-image-data-url-indeterminate", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url-indeterminate" + ] + }, + "token-form-checkbox-background-image-data-url-disabled": { + "key": "{form.checkbox.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url-disabled}" + }, + "name": "token-form-checkbox-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url-disabled" + ] + }, + "token-form-checkbox-background-image-data-url-indeterminate-disabled": { + "key": "{form.checkbox.background-image.data-url-indeterminate-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url-indeterminate-disabled}" + }, + "name": "token-form-checkbox-background-image-data-url-indeterminate-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url-indeterminate-disabled" + ] + }, + "token-form-control-base-foreground-value-color": { + "key": "{form.control.base.foreground.value-color}", + "$type": "color", + "$value": "#f4f4f4", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.strong}", + "group": "components", + "key": "{form.control.base.foreground.value-color}" + }, + "name": "token-form-control-base-foreground-value-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "foreground", + "value-color" + ] + }, + "token-form-control-base-foreground-placeholder-color": { + "key": "{form.control.base.foreground.placeholder-color}", + "$type": "color", + "$value": "#c6c6c6", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.control.base.foreground.placeholder-color}" + }, + "name": "token-form-control-base-foreground-placeholder-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "foreground", + "placeholder-color" + ] + }, + "token-form-control-base-surface-color-default": { + "key": "{form.control.base.surface-color.default}", + "$type": "color", + "$value": "#393939", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.interactive}", + "group": "components", + "key": "{form.control.base.surface-color.default}" + }, + "name": "token-form-control-base-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "surface-color", + "default" + ] + }, + "token-form-control-base-surface-color-hover": { + "key": "{form.control.base.surface-color.hover}", + "$type": "color", + "$value": "#474747", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.interactive-hover}", + "group": "components", + "key": "{form.control.base.surface-color.hover}" + }, + "name": "token-form-control-base-surface-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "surface-color", + "hover" + ] + }, + "token-form-control-base-border-color-default": { + "key": "{form.control.base.border-color.default}", + "$type": "color", + "$value": "#8d8d8d", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-400}", + "group": "components", + "key": "{form.control.base.border-color.default}" + }, + "name": "token-form-control-base-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "border-color", + "default" + ] + }, + "token-form-control-base-border-color-hover": { + "key": "{form.control.base.border-color.hover}", + "$type": "color", + "$value": "#525252", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "group": "components", + "key": "{form.control.base.border-color.hover}" + }, + "name": "token-form-control-base-border-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "border-color", + "hover" + ] + }, + "token-form-control-checked-foreground-color": { + "key": "{form.control.checked.foreground-color}", + "$type": "color", + "$value": "#161616", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "group": "components", + "key": "{form.control.checked.foreground-color}" + }, + "name": "token-form-control-checked-foreground-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "foreground-color" + ] + }, + "token-form-control-checked-surface-color-default": { + "key": "{form.control.checked.surface-color.default}", + "$type": "color", + "$value": "#0f62fe", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "group": "components", + "key": "{form.control.checked.surface-color.default}" + }, + "name": "token-form-control-checked-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "surface-color", + "default" + ] + }, + "token-form-control-checked-surface-color-hover": { + "key": "{form.control.checked.surface-color.hover}", + "$type": "color", + "$value": "#0043ce", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "components", + "key": "{form.control.checked.surface-color.hover}" + }, + "name": "token-form-control-checked-surface-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "surface-color", + "hover" + ] + }, + "token-form-control-checked-border-color-default": { + "key": "{form.control.checked.border-color.default}", + "$type": "color", + "$value": "#0043ce", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "components", + "key": "{form.control.checked.border-color.default}" + }, + "name": "token-form-control-checked-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "border-color", + "default" + ] + }, + "token-form-control-checked-border-color-hover": { + "key": "{form.control.checked.border-color.hover}", + "$type": "color", + "$value": "#002d9c", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "group": "components", + "key": "{form.control.checked.border-color.hover}" + }, + "name": "token-form-control-checked-border-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "border-color", + "hover" + ] + }, + "token-form-control-invalid-border-color-default": { + "key": "{form.control.invalid.border-color.default}", + "$type": "color", + "$value": "#a2191f", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "components", + "key": "{form.control.invalid.border-color.default}" + }, + "name": "token-form-control-invalid-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "invalid", + "border-color", + "default" + ] + }, + "token-form-control-invalid-border-color-hover": { + "key": "{form.control.invalid.border-color.hover}", + "$type": "color", + "$value": "#750e13", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.red-400}", + "group": "components", + "key": "{form.control.invalid.border-color.hover}" + }, + "name": "token-form-control-invalid-border-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "invalid", + "border-color", + "hover" + ] + }, + "token-form-control-readonly-foreground-color": { + "key": "{form.control.readonly.foreground-color}", + "$type": "color", + "$value": "#f4f4f4", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "group": "components", + "key": "{form.control.readonly.foreground-color}" + }, + "name": "token-form-control-readonly-foreground-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "readonly", + "foreground-color" + ] + }, + "token-form-control-readonly-surface-color": { + "key": "{form.control.readonly.surface-color}", + "$type": "color", + "$value": "#525252", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.strong}", + "group": "components", + "key": "{form.control.readonly.surface-color}" + }, + "name": "token-form-control-readonly-surface-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "readonly", + "surface-color" + ] + }, + "token-form-control-readonly-border-color": { + "key": "{form.control.readonly.border-color}", + "$type": "color", + "$value": "#525252", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.border.faint}", + "group": "components", + "key": "{form.control.readonly.border-color}" + }, + "name": "token-form-control-readonly-border-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "readonly", + "border-color" + ] + }, + "token-form-control-disabled-foreground-color": { + "key": "{form.control.disabled.foreground-color}", + "$type": "color", + "$value": "rgba(244, 244, 244, 0.25)", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.disabled}", + "group": "components", + "key": "{form.control.disabled.foreground-color}" + }, + "name": "token-form-control-disabled-foreground-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "disabled", + "foreground-color" + ] + }, + "token-form-control-disabled-surface-color": { + "key": "{form.control.disabled.surface-color}", + "$type": "color", + "$value": "#6f6f6f", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.interactive-disabled}", + "group": "components", + "key": "{form.control.disabled.surface-color}" + }, + "name": "token-form-control-disabled-surface-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "disabled", + "surface-color" + ] + }, + "token-form-control-disabled-border-color": { + "key": "{form.control.disabled.border-color}", + "$type": "color", + "$value": "#8d8d8d", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.border.primary}", + "group": "components", + "key": "{form.control.disabled.border-color}" + }, + "name": "token-form-control-disabled-border-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "disabled", + "border-color" + ] + }, + "token-form-control-padding": { + "key": "{form.control.padding}", + "$type": "dimension", + "$value": "7px", + "unit": "px", + "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma.", + "original": { + "$type": "dimension", + "$value": "7", + "unit": "px", + "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma.", + "key": "{form.control.padding}" + }, + "name": "token-form-control-padding", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "padding" + ] + }, + "token-form-control-border-radius": { + "key": "{form.control.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{form.control.border.radius}" + }, + "name": "token-form-control-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "border", + "radius" + ] + }, + "token-form-control-border-width": { + "key": "{form.control.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.control.border.width}" + }, + "name": "token-form-control-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "border", + "width" + ] + }, + "token-form-radio-size": { + "key": "{form.radio.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.radio.size}" + }, + "name": "token-form-radio-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "size" + ] + }, + "token-form-radio-border-width": { + "key": "{form.radio.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.radio.border.width}" + }, + "name": "token-form-radio-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "border", + "width" + ] + }, + "token-form-radio-background-image-size": { + "key": "{form.radio.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.radio.background-image.size}" + }, + "name": "token-form-radio-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "background-image", + "size" + ] + }, + "token-form-radio-background-image-data-url": { + "key": "{form.radio.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "key": "{form.radio.background-image.data-url}" + }, + "name": "token-form-radio-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "background-image", + "data-url" + ] + }, + "token-form-radio-background-image-data-url-disabled": { + "key": "{form.radio.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "key": "{form.radio.background-image.data-url-disabled}" + }, + "name": "token-form-radio-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "background-image", + "data-url-disabled" + ] + }, + "token-form-radiocard-group-gap": { + "key": "{form.radiocard-group.gap}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.radiocard-group.gap}" + }, + "name": "token-form-radiocard-group-gap", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard-group", + "gap" + ] + }, + "token-form-radiocard-border-width": { + "key": "{form.radiocard.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.radiocard.border.width}" + }, + "name": "token-form-radiocard-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "width" + ] + }, + "token-form-radiocard-border-radius": { + "key": "{form.radiocard.border.radius}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{form.radiocard.border.radius}" + }, + "name": "token-form-radiocard-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "radius" + ] + }, + "token-form-radiocard-border-color-default": { + "key": "{form.radiocard.border.color.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#393939", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{form.radiocard.border.color.default}" + }, + "name": "token-form-radiocard-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "default" + ] + }, + "token-form-radiocard-border-color-focus": { + "key": "{form.radiocard.border.color.focus}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#161616", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "key": "{form.radiocard.border.color.focus}" + }, + "name": "token-form-radiocard-border-color-focus", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "focus" + ] + }, + "token-form-radiocard-border-color-default-checked": { + "key": "{form.radiocard.border.color.default-checked}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#0043ce", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "key": "{form.radiocard.border.color.default-checked}" + }, + "name": "token-form-radiocard-border-color-default-checked", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "default-checked" + ] + }, + "token-form-radiocard-content-padding": { + "key": "{form.radiocard.content-padding}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{form.radiocard.content-padding}" + }, + "name": "token-form-radiocard-content-padding", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "content-padding" + ] + }, + "token-form-radiocard-control-padding": { + "key": "{form.radiocard.control-padding}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{form.radiocard.control-padding}" + }, + "name": "token-form-radiocard-control-padding", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "control-padding" + ] + }, + "token-form-radiocard-transition-duration": { + "key": "{form.radiocard.transition.duration}", + "$type": "duration", + "$value": "0.2s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.2", + "unit": "s", + "key": "{form.radiocard.transition.duration}" + }, + "name": "token-form-radiocard-transition-duration", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "transition", + "duration" + ] + }, + "token-form-select-background-image-size": { + "key": "{form.select.background-image.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.select.background-image.size}" + }, + "name": "token-form-select-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "size" + ] + }, + "token-form-select-background-image-position-right-x": { + "key": "{form.select.background-image.position-right-x}", + "$type": "dimension", + "$value": "7px", + "original": { + "$type": "dimension", + "$value": "{form.control.padding}", + "key": "{form.select.background-image.position-right-x}" + }, + "name": "token-form-select-background-image-position-right-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "position-right-x" + ] + }, + "token-form-select-background-image-position-top-y": { + "key": "{form.select.background-image.position-top-y}", + "$type": "dimension", + "$value": "9px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "9", + "unit": "px", + "key": "{form.select.background-image.position-top-y}" + }, + "name": "token-form-select-background-image-position-top-y", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "position-top-y" + ] + }, + "token-form-select-background-image-data-url": { + "key": "{form.select.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "key": "{form.select.background-image.data-url}" + }, + "name": "token-form-select-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "data-url" + ] + }, + "token-form-select-background-image-data-url-disabled": { + "key": "{form.select.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "key": "{form.select.background-image.data-url-disabled}" + }, + "name": "token-form-select-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "data-url-disabled" + ] + }, + "token-form-text-input-background-image-size": { + "key": "{form.text-input.background-image.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.text-input.background-image.size}" + }, + "name": "token-form-text-input-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "size" + ] + }, + "token-form-text-input-background-image-position-x": { + "key": "{form.text-input.background-image.position-x}", + "$type": "dimension", + "$value": "7px", + "original": { + "$type": "dimension", + "$value": "{form.control.padding}", + "key": "{form.text-input.background-image.position-x}" + }, + "name": "token-form-text-input-background-image-position-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "position-x" + ] + }, + "token-form-text-input-background-image-data-url-date": { + "key": "{form.text-input.background-image.data-url-date}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-date}" + }, + "name": "token-form-text-input-background-image-data-url-date", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-date" + ] + }, + "token-form-text-input-background-image-data-url-time": { + "key": "{form.text-input.background-image.data-url-time}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-time}" + }, + "name": "token-form-text-input-background-image-data-url-time", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-time" + ] + }, + "token-form-text-input-background-image-data-url-search": { + "key": "{form.text-input.background-image.data-url-search}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-search}" + }, + "name": "token-form-text-input-background-image-data-url-search", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search" + ] + }, + "token-form-text-input-background-image-data-url-search-cancel": { + "key": "{form.text-input.background-image.data-url-search-cancel}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-search-cancel}" + }, + "name": "token-form-text-input-background-image-data-url-search-cancel", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search-cancel" + ] + }, + "token-form-text-input-background-image-data-url-search-loading": { + "key": "{form.text-input.background-image.data-url-search-loading}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color and animation are hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color and animation are hardcoded here!", + "key": "{form.text-input.background-image.data-url-search-loading}" + }, + "name": "token-form-text-input-background-image-data-url-search-loading", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search-loading" + ] + }, + "token-form-toggle-width": { + "key": "{form.toggle.width}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{form.toggle.width}" + }, + "name": "token-form-toggle-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "width" + ] + }, + "token-form-toggle-height": { + "key": "{form.toggle.height}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.toggle.height}" + }, + "name": "token-form-toggle-height", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "height" + ] + }, + "token-form-toggle-base-surface-color-default": { + "key": "{form.toggle.base.surface-color.default}", + "$type": "color", + "$value": "#525252", + "group": "components", + "comment": "the toggle has a different base surface color, compared to the other controls", + "original": { + "$type": "color", + "$value": "{color.surface.strong}", + "group": "components", + "comment": "the toggle has a different base surface color, compared to the other controls", + "key": "{form.toggle.base.surface-color.default}" + }, + "name": "token-form-toggle-base-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "base", + "surface-color", + "default" + ] + }, + "token-form-toggle-border-radius": { + "key": "{form.toggle.border.radius}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{form.toggle.border.radius}" + }, + "name": "token-form-toggle-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "border", + "radius" + ] + }, + "token-form-toggle-border-width": { + "key": "{form.toggle.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.toggle.border.width}" + }, + "name": "token-form-toggle-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "border", + "width" + ] + }, + "token-form-toggle-background-image-size": { + "key": "{form.toggle.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.toggle.background-image.size}" + }, + "name": "token-form-toggle-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "size" + ] + }, + "token-form-toggle-background-image-position-x": { + "key": "{form.toggle.background-image.position-x}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{form.toggle.background-image.position-x}" + }, + "name": "token-form-toggle-background-image-position-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "position-x" + ] + }, + "token-form-toggle-background-image-data-url": { + "key": "{form.toggle.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.toggle.background-image.data-url}" + }, + "name": "token-form-toggle-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "data-url" + ] + }, + "token-form-toggle-background-image-data-url-disabled": { + "key": "{form.toggle.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.toggle.background-image.data-url-disabled}" + }, + "name": "token-form-toggle-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "data-url-disabled" + ] + }, + "token-form-toggle-transition-duration": { + "key": "{form.toggle.transition.duration}", + "$type": "duration", + "$value": "0.2s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.2", + "unit": "s", + "key": "{form.toggle.transition.duration}" + }, + "name": "token-form-toggle-transition-duration", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "transition", + "duration" + ] + }, + "token-form-toggle-transition-timing-function": { + "key": "{form.toggle.transition.timing-function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.68, -0.2, 0.265, 1.15)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.68, + -0.2, + 0.265, + 1.15 + ], + "key": "{form.toggle.transition.timing-function}" + }, + "name": "token-form-toggle-transition-timing-function", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "transition", + "timing-function" + ] + }, + "token-form-toggle-thumb-size": { + "key": "{form.toggle.thumb-size}", + "$type": "dimension", + "$value": "16px", + "original": { + "$type": "dimension", + "$value": "{form.toggle.height}", + "key": "{form.toggle.thumb-size}" + }, + "name": "token-form-toggle-thumb-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "thumb-size" + ] + }, + "token-icon-tile-border-color-overlay": { + "key": "{icon-tile.border.color.overlay}", + "$type": "color", + "$value": "#8d8d8d", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.borderSubtle02}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle02}", + "cds-g10": "{carbon.themes.g10.borderSubtle02}", + "cds-g90": "{carbon.themes.g90.borderSubtle02}", + "cds-g100": "{carbon.themes.g100.borderSubtle02}" + }, + "key": "{icon-tile.border.color.overlay}" + }, + "name": "token-icon-tile-border-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "overlay" + ] + }, + "token-icon-tile-border-color-logo": { + "key": "{icon-tile.border.color.logo}", + "$type": "color", + "$value": "#6f6f6f", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.borderSubtle01}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle01}", + "cds-g10": "{carbon.themes.g10.borderSubtle01}", + "cds-g90": "{carbon.themes.g90.borderSubtle01}", + "cds-g100": "{carbon.themes.g100.borderSubtle01}" + }, + "key": "{icon-tile.border.color.logo}" + }, + "name": "token-icon-tile-border-color-logo", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "logo" + ] + }, + "token-icon-tile-surface-color-overlay": { + "key": "{icon-tile.surface.color.overlay}", + "$type": "color", + "$value": "#525252", + "$modes": { + "default": "#393939", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.layer02}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.white.layer02}", + "cds-g10": "{carbon.themes.g10.layer02}", + "cds-g90": "{carbon.themes.g90.layer02}", + "cds-g100": "{carbon.themes.g100.layer02}" + }, + "key": "{icon-tile.surface.color.overlay}" + }, + "name": "token-icon-tile-surface-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "surface", + "color", + "overlay" + ] + }, + "token-pagination-nav-control-height": { + "key": "{pagination.nav.control.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{pagination.nav.control.height}" + }, + "name": "token-pagination-nav-control-height", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "height" + ] + }, + "token-pagination-nav-control-padding-horizontal": { + "key": "{pagination.nav.control.padding.horizontal}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{pagination.nav.control.padding.horizontal}" + }, + "name": "token-pagination-nav-control-padding-horizontal", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "padding", + "horizontal" + ] + }, + "token-pagination-nav-control-focus-inset": { + "key": "{pagination.nav.control.focus-inset}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{pagination.nav.control.focus-inset}" + }, + "name": "token-pagination-nav-control-focus-inset", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "focus-inset" + ] + }, + "token-pagination-nav-control-icon-spacing": { + "key": "{pagination.nav.control.icon-spacing}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{pagination.nav.control.icon-spacing}" + }, + "name": "token-pagination-nav-control-icon-spacing", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "icon-spacing" + ] + }, + "token-pagination-nav-indicator-height": { + "key": "{pagination.nav.indicator.height}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{pagination.nav.indicator.height}" + }, + "name": "token-pagination-nav-indicator-height", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "indicator", + "height" + ] + }, + "token-pagination-nav-indicator-spacing": { + "key": "{pagination.nav.indicator.spacing}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{pagination.nav.indicator.spacing}" + }, + "name": "token-pagination-nav-indicator-spacing", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "indicator", + "spacing" + ] + }, + "token-pagination-child-spacing-vertical": { + "key": "{pagination.child.spacing.vertical}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{pagination.child.spacing.vertical}" + }, + "name": "token-pagination-child-spacing-vertical", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "child", + "spacing", + "vertical" + ] + }, + "token-pagination-child-spacing-horizontal": { + "key": "{pagination.child.spacing.horizontal}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "key": "{pagination.child.spacing.horizontal}" + }, + "name": "token-pagination-child-spacing-horizontal", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "child", + "spacing", + "horizontal" + ] + }, + "token-rich-tooltip-bubble-max-width": { + "key": "{rich-tooltip.bubble.max-width}", + "$type": "dimension", + "$value": "288px", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "original": { + "$type": "dimension", + "$value": "288", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "key": "{rich-tooltip.bubble.max-width}" + }, + "name": "token-rich-tooltip-bubble-max-width", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "max-width" + ] + }, + "token-rich-tooltip-bubble-border-color": { + "key": "{rich-tooltip.bubble.border.color}", + "$value": "#6f6f6f", + "$modes": { + "default": "#52525233", + "cds-g0": "#6f6f6f", + "cds-g10": "#6f6f6f", + "cds-g90": "#6f6f6f", + "cds-g100": "#6f6f6f" + }, + "original": { + "$value": "{color.palette.alpha-200}", + "$modes": { + "default": "{elevation.higher.border.color}", + "cds-g0": "{color.palette.alpha-200}", + "cds-g10": "{color.palette.alpha-200}", + "cds-g90": "{color.palette.alpha-200}", + "cds-g100": "{color.palette.alpha-200}" + }, + "key": "{rich-tooltip.bubble.border.color}" + }, + "name": "token-rich-tooltip-bubble-border-color", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "border", + "color" + ] + }, + "token-rich-tooltip-bubble-border-radius": { + "key": "{rich-tooltip.bubble.border.radius}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "key": "{rich-tooltip.bubble.border.radius}" + }, + "name": "token-rich-tooltip-bubble-border-radius", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "border", + "radius" + ] + }, + "token-rich-tooltip-bubble-arrow-size": { + "key": "{rich-tooltip.bubble.arrow.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{rich-tooltip.bubble.arrow.size}" + }, + "name": "token-rich-tooltip-bubble-arrow-size", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "arrow", + "size" + ] + }, + "token-rich-tooltip-toggle-gap-horizontal": { + "key": "{rich-tooltip.toggle.gap.horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{rich-tooltip.toggle.gap.horizontal}" + }, + "name": "token-rich-tooltip-toggle-gap-horizontal", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "gap", + "horizontal" + ] + }, + "token-rich-tooltip-toggle-foreground-color-default": { + "key": "{rich-tooltip.toggle.foreground.color.default}", + "$value": "#c6c6c6", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$value": "{carbon.themes.g90.textSecondary}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.default}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-default", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "default" + ] + }, + "token-rich-tooltip-toggle-foreground-color-hover": { + "key": "{rich-tooltip.toggle.foreground.color.hover}", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$value": "{carbon.themes.g90.textPrimary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.hover}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-hover", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "hover" + ] + }, + "token-rich-tooltip-toggle-foreground-color-active": { + "key": "{rich-tooltip.toggle.foreground.color.active}", + "$value": "#c6c6c6", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$value": "{carbon.themes.g90.textSecondary}", + "$modes": { + "default": "{color.foreground.faint}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.active}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-active", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "active" + ] + }, + "token-rich-tooltip-toggle-icon-size": { + "key": "{rich-tooltip.toggle.icon.size}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, + "original": { + "$type": "dimension", + "$value": "14", + "unit": "px", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, + "key": "{rich-tooltip.toggle.icon.size}" + }, + "name": "token-rich-tooltip-toggle-icon-size", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "icon", + "size" + ] + }, + "token-tabs-tab-height-medium": { + "key": "{tabs.tab.height.medium}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{tabs.tab.height.medium}" + }, + "name": "token-tabs-tab-height-medium", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "height", + "medium" + ] + }, + "token-tabs-tab-height-large": { + "key": "{tabs.tab.height.large}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{tabs.tab.height.large}" + }, + "name": "token-tabs-tab-height-large", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "height", + "large" + ] + }, + "token-tabs-tab-padding-horizontal-medium": { + "key": "{tabs.tab.padding.horizontal.medium}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{tabs.tab.padding.horizontal.medium}" + }, + "name": "token-tabs-tab-padding-horizontal-medium", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "padding", + "horizontal", + "medium" + ] + }, + "token-tabs-tab-padding-horizontal-large": { + "key": "{tabs.tab.padding.horizontal.large}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "key": "{tabs.tab.padding.horizontal.large}" + }, + "name": "token-tabs-tab-padding-horizontal-large", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "padding", + "horizontal", + "large" + ] + }, + "token-tabs-tab-padding-vertical": { + "key": "{tabs.tab.padding.vertical}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "key": "{tabs.tab.padding.vertical}" + }, + "name": "token-tabs-tab-padding-vertical", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "padding", + "vertical" + ] + }, + "token-tabs-tab-border-radius": { + "key": "{tabs.tab.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{tabs.tab.border-radius}" + }, + "name": "token-tabs-tab-border-radius", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "border-radius" + ] + }, + "token-tabs-tab-focus-inset": { + "key": "{tabs.tab.focus-inset}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{tabs.tab.focus-inset}" + }, + "name": "token-tabs-tab-focus-inset", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "focus-inset" + ] + }, + "token-tabs-tab-gutter": { + "key": "{tabs.tab.gutter}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{tabs.tab.gutter}" + }, + "name": "token-tabs-tab-gutter", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "gutter" + ] + }, + "token-tabs-indicator-height": { + "key": "{tabs.indicator.height}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{tabs.indicator.height}" + }, + "name": "token-tabs-indicator-height", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "indicator", + "height" + ] + }, + "token-tabs-indicator-transition-function": { + "key": "{tabs.indicator.transition.function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.5, 1, 0.89, 1)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.5, + 1, + 0.89, + 1 + ], + "key": "{tabs.indicator.transition.function}" + }, + "name": "token-tabs-indicator-transition-function", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "indicator", + "transition", + "function" + ] + }, + "token-tabs-indicator-transition-duration": { + "key": "{tabs.indicator.transition.duration}", + "$type": "duration", + "$value": "0.6s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.6", + "unit": "s", + "key": "{tabs.indicator.transition.duration}" + }, + "name": "token-tabs-indicator-transition-duration", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "indicator", + "transition", + "duration" + ] + }, + "token-tabs-divider-height": { + "key": "{tabs.divider.height}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{tabs.divider.height}" + }, + "name": "token-tabs-divider-height", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "divider", + "height" + ] + }, + "token-tooltip-max-width": { + "key": "{tooltip.max-width}", + "$type": "dimension", + "$value": "288px", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "original": { + "$type": "dimension", + "$value": "288", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "key": "{tooltip.max-width}" + }, + "name": "token-tooltip-max-width", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "max-width" + ] + }, + "token-tooltip-padding-horizontal": { + "key": "{tooltip.padding.horizontal}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16px", + "cds-g10": "16px", + "cds-g90": "16px", + "cds-g100": "16px" + }, + "original": { + "$type": "dimension", + "$value": "{carbon.themes.g90.spacing05}", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "{carbon.themes.white.spacing05}", + "cds-g10": "{carbon.themes.g10.spacing05}", + "cds-g90": "{carbon.themes.g90.spacing05}", + "cds-g100": "{carbon.themes.g100.spacing05}" + }, + "key": "{tooltip.padding.horizontal}" + }, + "name": "token-tooltip-padding-horizontal", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "horizontal" + ] + }, + "token-tooltip-padding-vertical": { + "key": "{tooltip.padding.vertical}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "16px", + "cds-g10": "16px", + "cds-g90": "16px", + "cds-g100": "16px" + }, + "original": { + "$type": "dimension", + "$value": "{carbon.themes.g90.spacing05}", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "{carbon.themes.white.spacing05}", + "cds-g10": "{carbon.themes.g10.spacing05}", + "cds-g90": "{carbon.themes.g90.spacing05}", + "cds-g100": "{carbon.themes.g100.spacing05}" + }, + "key": "{tooltip.padding.vertical}" + }, + "name": "token-tooltip-padding-vertical", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "vertical" + ] + }, + "token-tooltip-border-radius": { + "key": "{tooltip.border.radius}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "key": "{tooltip.border.radius}" + }, + "name": "token-tooltip-border-radius", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "border", + "radius" + ] + }, + "token-tooltip-caret-clip-path": { + "key": "{tooltip.caret.clip-path}", + "$value": "polygon(0 100%, 50% 0, 100% 100%)", + "$modes": { + "default": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "cds-g0": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g10": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g90": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g100": "polygon(0 100%, 50% 0, 100% 100%)" + }, + "original": { + "$value": "polygon(0 100%, 50% 0, 100% 100%)", + "$modes": { + "default": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "cds-g0": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g10": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g90": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g100": "polygon(0 100%, 50% 0, 100% 100%)" + }, + "key": "{tooltip.caret.clip-path}" + }, + "name": "token-tooltip-caret-clip-path", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "clip-path" + ] + }, + "token-tooltip-caret-height": { + "key": "{tooltip.caret.height}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "7", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "7", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "key": "{tooltip.caret.height}" + }, + "name": "token-tooltip-caret-height", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "height" + ] + }, + "token-tooltip-caret-width": { + "key": "{tooltip.caret.width}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{tooltip.caret.width}" + }, + "name": "token-tooltip-caret-width", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "width" + ] + }, + "token-tooltip-focus-offset": { + "key": "{tooltip.focus-offset}", + "$type": "dimension", + "$value": "-2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "-2", + "unit": "px", + "key": "{tooltip.focus-offset}" + }, + "name": "token-tooltip-focus-offset", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "focus-offset" + ] + }, + "token-tooltip-transition-function": { + "key": "{tooltip.transition.function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.54, 1.5, 0.38, 1.11)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.54, + 1.5, + 0.38, + 1.11 + ], + "key": "{tooltip.transition.function}" + }, + "name": "token-tooltip-transition-function", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "transition", + "function" + ] + }, + "token-typography-font-stack-display": { + "key": "{typography.font-stack.display}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.sans.display.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.font-stack.display}" + }, + "name": "token-typography-font-stack-display", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-stack", + "display" + ] + }, + "token-typography-font-stack-text": { + "key": "{typography.font-stack.text}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.sans.text.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.font-stack.text}" + }, + "name": "token-typography-font-stack-text", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-stack", + "text" + ] + }, + "token-typography-font-stack-code": { + "key": "{typography.font-stack.code}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.monospace.code.combined}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.font-stack.code}" + }, + "name": "token-typography-font-stack-code", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-stack", + "code" + ] + }, + "token-typography-font-weight-regular": { + "key": "{typography.font-weight.regular}", + "$type": "font-weight", + "$value": 400, + "$modes": { + "default": "400", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "default": "400", + "cds-g0": "{carbon.typography.font-weight.regular}", + "cds-g10": "{carbon.typography.font-weight.regular}", + "cds-g90": "{carbon.typography.font-weight.regular}", + "cds-g100": "{carbon.typography.font-weight.regular}" + }, + "key": "{typography.font-weight.regular}" + }, + "name": "token-typography-font-weight-regular", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "regular" + ] + }, + "token-typography-font-weight-medium": { + "key": "{typography.font-weight.medium}", + "$type": "font-weight", + "$value": 400, + "$modes": { + "default": "500", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "default": "500", + "cds-g0": "{carbon.typography.font-weight.regular}", + "cds-g10": "{carbon.typography.font-weight.regular}", + "cds-g90": "{carbon.typography.font-weight.regular}", + "cds-g100": "{carbon.typography.font-weight.regular}" + }, + "key": "{typography.font-weight.medium}" + }, + "name": "token-typography-font-weight-medium", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "medium" + ] + }, + "token-typography-font-weight-semibold": { + "key": "{typography.font-weight.semibold}", + "$type": "font-weight", + "$value": 600, + "$modes": { + "default": "600", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "default": "600", + "cds-g0": "{carbon.typography.font-weight.semibold}", + "cds-g10": "{carbon.typography.font-weight.semibold}", + "cds-g90": "{carbon.typography.font-weight.semibold}", + "cds-g100": "{carbon.typography.font-weight.semibold}" + }, + "key": "{typography.font-weight.semibold}" + }, + "name": "token-typography-font-weight-semibold", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "semibold" + ] + }, + "token-typography-font-weight-bold": { + "key": "{typography.font-weight.bold}", + "$type": "font-weight", + "$value": 600, + "$modes": { + "default": "700", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "default": "700", + "cds-g0": "{carbon.typography.font-weight.semibold}", + "cds-g10": "{carbon.typography.font-weight.semibold}", + "cds-g90": "{carbon.typography.font-weight.semibold}", + "cds-g100": "{carbon.typography.font-weight.semibold}" + }, + "key": "{typography.font-weight.bold}" + }, + "name": "token-typography-font-weight-bold", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "bold" + ] + }, + "token-typography-display-500-font-family": { + "key": "{typography.display-500.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-500.font-family}" + }, + "name": "token-typography-display-500-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "font-family" + ] + }, + "token-typography-display-500-font-size": { + "key": "{typography.display-500.font-size}", + "$type": "font-size", + "$value": "2rem", + "unit": "px", + "comment": "30px/1.875rem", + "$modes": { + "default": "30", + "cds-g0": "2rem", + "cds-g10": "2rem", + "cds-g90": "2rem", + "cds-g100": "2rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading05.font-size}", + "unit": "px", + "comment": "30px/1.875rem", + "$modes": { + "default": "30", + "cds-g0": "{carbon.typography.heading05.font-size}", + "cds-g10": "{carbon.typography.heading05.font-size}", + "cds-g90": "{carbon.typography.heading05.font-size}", + "cds-g100": "{carbon.typography.heading05.font-size}" + }, + "key": "{typography.display-500.font-size}" + }, + "name": "token-typography-display-500-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "font-size" + ] + }, + "token-typography-display-500-line-height": { + "key": "{typography.display-500.line-height}", + "$type": "number", + "$value": 1.25, + "comment": "38px", + "$modes": { + "default": 1.2666, + "cds-g0": 1.25, + "cds-g10": 1.25, + "cds-g90": 1.25, + "cds-g100": 1.25 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading05.line-height}", + "comment": "38px", + "$modes": { + "default": 1.2666, + "cds-g0": "{carbon.typography.heading05.line-height}", + "cds-g10": "{carbon.typography.heading05.line-height}", + "cds-g90": "{carbon.typography.heading05.line-height}", + "cds-g100": "{carbon.typography.heading05.line-height}" + }, + "key": "{typography.display-500.line-height}" + }, + "name": "token-typography-display-500-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "line-height" + ] + }, + "token-typography-display-500-letter-spacing": { + "key": "{typography.display-500.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading05.letter-spacing}", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading05.letter-spacing}", + "cds-g10": "{carbon.typography.heading05.letter-spacing}", + "cds-g90": "{carbon.typography.heading05.letter-spacing}", + "cds-g100": "{carbon.typography.heading05.letter-spacing}" + }, + "key": "{typography.display-500.letter-spacing}" + }, + "name": "token-typography-display-500-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "letter-spacing" + ] + }, + "token-typography-display-400-font-family": { + "key": "{typography.display-400.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-400.font-family}" + }, + "name": "token-typography-display-400-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "font-family" + ] + }, + "token-typography-display-400-font-size": { + "key": "{typography.display-400.font-size}", + "$type": "font-size", + "$value": "1.75rem", + "unit": "px", + "comment": "24px/1.5rem", + "$modes": { + "default": "24", + "cds-g0": "1.75rem", + "cds-g10": "1.75rem", + "cds-g90": "1.75rem", + "cds-g100": "1.75rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading04.font-size}", + "unit": "px", + "comment": "24px/1.5rem", + "$modes": { + "default": "24", + "cds-g0": "{carbon.typography.heading04.font-size}", + "cds-g10": "{carbon.typography.heading04.font-size}", + "cds-g90": "{carbon.typography.heading04.font-size}", + "cds-g100": "{carbon.typography.heading04.font-size}" + }, + "key": "{typography.display-400.font-size}" + }, + "name": "token-typography-display-400-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "font-size" + ] + }, + "token-typography-display-400-line-height": { + "key": "{typography.display-400.line-height}", + "$type": "number", + "$value": 1.28572, + "comment": "32px", + "$modes": { + "default": 1.3333, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading04.line-height}", + "comment": "32px", + "$modes": { + "default": 1.3333, + "cds-g0": "{carbon.typography.heading04.line-height}", + "cds-g10": "{carbon.typography.heading04.line-height}", + "cds-g90": "{carbon.typography.heading04.line-height}", + "cds-g100": "{carbon.typography.heading04.line-height}" + }, + "key": "{typography.display-400.line-height}" + }, + "name": "token-typography-display-400-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "line-height" + ] + }, + "token-typography-display-400-letter-spacing": { + "key": "{typography.display-400.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading04.letter-spacing}", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.heading04.letter-spacing}", + "cds-g10": "{carbon.typography.heading04.letter-spacing}", + "cds-g90": "{carbon.typography.heading04.letter-spacing}", + "cds-g100": "{carbon.typography.heading04.letter-spacing}" + }, + "key": "{typography.display-400.letter-spacing}" + }, + "name": "token-typography-display-400-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "letter-spacing" + ] + }, + "token-typography-display-300-font-family": { + "key": "{typography.display-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-300.font-family}" + }, + "name": "token-typography-display-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "font-family" + ] + }, + "token-typography-display-300-font-size": { + "key": "{typography.display-300.font-size}", + "$type": "font-size", + "$value": "1.25rem", + "unit": "px", + "comment": "18px/1.125rem", + "$modes": { + "default": "18", + "cds-g0": "1.25rem", + "cds-g10": "1.25rem", + "cds-g90": "1.25rem", + "cds-g100": "1.25rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading03.font-size}", + "unit": "px", + "comment": "18px/1.125rem", + "$modes": { + "default": "18", + "cds-g0": "{carbon.typography.heading03.font-size}", + "cds-g10": "{carbon.typography.heading03.font-size}", + "cds-g90": "{carbon.typography.heading03.font-size}", + "cds-g100": "{carbon.typography.heading03.font-size}" + }, + "key": "{typography.display-300.font-size}" + }, + "name": "token-typography-display-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "font-size" + ] + }, + "token-typography-display-300-line-height": { + "key": "{typography.display-300.line-height}", + "$type": "number", + "$value": 1.4, + "comment": "24px", + "$modes": { + "default": 1.3333, + "cds-g0": 1.4, + "cds-g10": 1.4, + "cds-g90": 1.4, + "cds-g100": 1.4 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading03.line-height}", + "comment": "24px", + "$modes": { + "default": 1.3333, + "cds-g0": "{carbon.typography.heading03.line-height}", + "cds-g10": "{carbon.typography.heading03.line-height}", + "cds-g90": "{carbon.typography.heading03.line-height}", + "cds-g100": "{carbon.typography.heading03.line-height}" + }, + "key": "{typography.display-300.line-height}" + }, + "name": "token-typography-display-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "line-height" + ] + }, + "token-typography-display-300-letter-spacing": { + "key": "{typography.display-300.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading03.letter-spacing}", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading03.letter-spacing}", + "cds-g10": "{carbon.typography.heading03.letter-spacing}", + "cds-g90": "{carbon.typography.heading03.letter-spacing}", + "cds-g100": "{carbon.typography.heading03.letter-spacing}" + }, + "key": "{typography.display-300.letter-spacing}" + }, + "name": "token-typography-display-300-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "letter-spacing" + ] + }, + "token-typography-display-200-font-family": { + "key": "{typography.display-200.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-200.font-family}" + }, + "name": "token-typography-display-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "font-family" + ] + }, + "token-typography-display-200-font-size": { + "key": "{typography.display-200.font-size}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading02.font-size}", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.heading02.font-size}", + "cds-g10": "{carbon.typography.heading02.font-size}", + "cds-g90": "{carbon.typography.heading02.font-size}", + "cds-g100": "{carbon.typography.heading02.font-size}" + }, + "key": "{typography.display-200.font-size}" + }, + "name": "token-typography-display-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "font-size" + ] + }, + "token-typography-display-200-line-height": { + "key": "{typography.display-200.line-height}", + "$type": "number", + "$value": 1.5, + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading02.line-height}", + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": "{carbon.typography.heading02.line-height}", + "cds-g10": "{carbon.typography.heading02.line-height}", + "cds-g90": "{carbon.typography.heading02.line-height}", + "cds-g100": "{carbon.typography.heading02.line-height}" + }, + "key": "{typography.display-200.line-height}" + }, + "name": "token-typography-display-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "line-height" + ] + }, + "token-typography-display-200-letter-spacing": { + "key": "{typography.display-200.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading02.letter-spacing}", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading02.letter-spacing}", + "cds-g10": "{carbon.typography.heading02.letter-spacing}", + "cds-g90": "{carbon.typography.heading02.letter-spacing}", + "cds-g100": "{carbon.typography.heading02.letter-spacing}" + }, + "key": "{typography.display-200.letter-spacing}" + }, + "name": "token-typography-display-200-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "letter-spacing" + ] + }, + "token-typography-display-100-font-family": { + "key": "{typography.display-100.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-100.font-family}" + }, + "name": "token-typography-display-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "font-family" + ] + }, + "token-typography-display-100-font-size": { + "key": "{typography.display-100.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading01.font-size}", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.heading01.font-size}", + "cds-g10": "{carbon.typography.heading01.font-size}", + "cds-g90": "{carbon.typography.heading01.font-size}", + "cds-g100": "{carbon.typography.heading01.font-size}" + }, + "key": "{typography.display-100.font-size}" + }, + "name": "token-typography-display-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "font-size" + ] + }, + "token-typography-display-100-line-height": { + "key": "{typography.display-100.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading01.line-height}", + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": "{carbon.typography.heading01.line-height}", + "cds-g10": "{carbon.typography.heading01.line-height}", + "cds-g90": "{carbon.typography.heading01.line-height}", + "cds-g100": "{carbon.typography.heading01.line-height}" + }, + "key": "{typography.display-100.line-height}" + }, + "name": "token-typography-display-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "line-height" + ] + }, + "token-typography-display-100-letter-spacing": { + "key": "{typography.display-100.letter-spacing}", + "$type": "letter-spacing", + "$value": "0.16px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0.16px", + "cds-g10": "0.16px", + "cds-g90": "0.16px", + "cds-g100": "0.16px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading01.letter-spacing}", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.heading01.letter-spacing}", + "cds-g10": "{carbon.typography.heading01.letter-spacing}", + "cds-g90": "{carbon.typography.heading01.letter-spacing}", + "cds-g100": "{carbon.typography.heading01.letter-spacing}" + }, + "key": "{typography.display-100.letter-spacing}" + }, + "name": "token-typography-display-100-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "letter-spacing" + ] + }, + "token-typography-body-300-font-family": { + "key": "{typography.body-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-300.font-family}" + }, + "name": "token-typography-body-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "font-family" + ] + }, + "token-typography-body-300-font-size": { + "key": "{typography.body-300.font-size}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.body02.font-size}", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.body02.font-size}", + "cds-g10": "{carbon.typography.body02.font-size}", + "cds-g90": "{carbon.typography.body02.font-size}", + "cds-g100": "{carbon.typography.body02.font-size}" + }, + "key": "{typography.body-300.font-size}" + }, + "name": "token-typography-body-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "font-size" + ] + }, + "token-typography-body-300-line-height": { + "key": "{typography.body-300.line-height}", + "$type": "number", + "$value": 1.5, + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.body02.line-height}", + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": "{carbon.typography.body02.line-height}", + "cds-g10": "{carbon.typography.body02.line-height}", + "cds-g90": "{carbon.typography.body02.line-height}", + "cds-g100": "{carbon.typography.body02.line-height}" + }, + "key": "{typography.body-300.line-height}" + }, + "name": "token-typography-body-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "line-height" + ] + }, + "token-typography-body-200-font-family": { + "key": "{typography.body-200.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-200.font-family}" + }, + "name": "token-typography-body-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "font-family" + ] + }, + "token-typography-body-200-font-size": { + "key": "{typography.body-200.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.body01.font-size}", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "{carbon.typography.body01.font-size}", + "cds-g10": "{carbon.typography.body01.font-size}", + "cds-g90": "{carbon.typography.body01.font-size}", + "cds-g100": "{carbon.typography.body01.font-size}" + }, + "key": "{typography.body-200.font-size}" + }, + "name": "token-typography-body-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "font-size" + ] + }, + "token-typography-body-200-line-height": { + "key": "{typography.body-200.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "20px", + "$modes": { + "default": 1.4286, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.body01.line-height}", + "comment": "20px", + "$modes": { + "default": 1.4286, + "cds-g0": "{carbon.typography.body01.line-height}", + "cds-g10": "{carbon.typography.body01.line-height}", + "cds-g90": "{carbon.typography.body01.line-height}", + "cds-g100": "{carbon.typography.body01.line-height}" + }, + "key": "{typography.body-200.line-height}" + }, + "name": "token-typography-body-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "line-height" + ] + }, + "token-typography-body-100-font-family": { + "key": "{typography.body-100.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-100.font-family}" + }, + "name": "token-typography-body-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "font-family" + ] + }, + "token-typography-body-100-font-size": { + "key": "{typography.body-100.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.bodyCompact01.font-size}", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.bodyCompact01.font-size}", + "cds-g10": "{carbon.typography.bodyCompact01.font-size}", + "cds-g90": "{carbon.typography.bodyCompact01.font-size}", + "cds-g100": "{carbon.typography.bodyCompact01.font-size}" + }, + "key": "{typography.body-100.font-size}" + }, + "name": "token-typography-body-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "font-size" + ] + }, + "token-typography-body-100-line-height": { + "key": "{typography.body-100.line-height}", + "$type": "number", + "$value": 1.28572, + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.bodyCompact01.line-height}", + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": "{carbon.typography.bodyCompact01.line-height}", + "cds-g10": "{carbon.typography.bodyCompact01.line-height}", + "cds-g90": "{carbon.typography.bodyCompact01.line-height}", + "cds-g100": "{carbon.typography.bodyCompact01.line-height}" + }, + "key": "{typography.body-100.line-height}" + }, + "name": "token-typography-body-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "line-height" + ] + }, + "token-typography-code-300-font-family": { + "key": "{typography.code-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-300.font-family}" + }, + "name": "token-typography-code-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "font-family" + ] + }, + "token-typography-code-300-font-size": { + "key": "{typography.code-300.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.code02.font-size}", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-300.font-size}" + }, + "name": "token-typography-code-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "font-size" + ] + }, + "token-typography-code-300-line-height": { + "key": "{typography.code-300.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "20px", + "$modes": { + "default": 1.25, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.code02.line-height}", + "comment": "20px", + "$modes": { + "default": 1.25, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-300.line-height}" + }, + "name": "token-typography-code-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "line-height" + ] + }, + "token-typography-code-200-font-family": { + "key": "{typography.code-200.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-200.font-family}" + }, + "name": "token-typography-code-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "font-family" + ] + }, + "token-typography-code-200-font-size": { + "key": "{typography.code-200.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.code02.font-size}", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-200.font-size}" + }, + "name": "token-typography-code-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "font-size" + ] + }, + "token-typography-code-200-line-height": { + "key": "{typography.code-200.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "18px", + "$modes": { + "default": 1.125, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.code02.line-height}", + "comment": "18px", + "$modes": { + "default": 1.125, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-200.line-height}" + }, + "name": "token-typography-code-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "line-height" + ] + }, + "token-typography-code-100-font-family": { + "key": "{typography.code-100.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-100.font-family}" + }, + "name": "token-typography-code-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "font-family" + ] + }, + "token-typography-code-100-font-size": { + "key": "{typography.code-100.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.code02.font-size}", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-100.font-size}" + }, + "name": "token-typography-code-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "font-size" + ] + }, + "token-typography-code-100-line-height": { + "key": "{typography.code-100.line-height}", + "$type": "number", + "$value": 1.33333, + "comment": "16px", + "$modes": { + "default": 1.23, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.code01.line-height}", + "comment": "16px", + "$modes": { + "default": 1.23, + "cds-g0": "{carbon.typography.code01.line-height}", + "cds-g10": "{carbon.typography.code01.line-height}", + "cds-g90": "{carbon.typography.code01.line-height}", + "cds-g100": "{carbon.typography.code01.line-height}" + }, + "key": "{typography.code-100.line-height}" + }, + "name": "token-typography-code-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "line-height" + ] + } + }, + "cds-g100": { + "token-border-radius-x-small": { + "key": "{border.radius.x-small}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.x-small}" + }, + "name": "token-border-radius-x-small", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "x-small" + ] + }, + "token-border-radius-small": { + "key": "{border.radius.small}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.small}" + }, + "name": "token-border-radius-small", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "small" + ] + }, + "token-border-radius-medium": { + "key": "{border.radius.medium}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.medium}" + }, + "name": "token-border-radius-medium", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "medium" + ] + }, + "token-border-radius-large": { + "key": "{border.radius.large}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.large}" + }, + "name": "token-border-radius-large", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "large" + ] + }, + "token-border-radius-rounded": { + "key": "{border.radius.rounded}", + "$type": "dimension", + "$value": "1000000000px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1000000000", + "unit": "px", + "key": "{border.radius.rounded}" + }, + "name": "token-border-radius-rounded", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "rounded" + ] + }, + "token-color-palette-blue-500": { + "key": "{color.palette.blue-500}", + "$type": "color", + "$value": "#001141", + "group": "palette", + "$modes": { + "default": "#1c345f", + "cds-g0": "#001141", + "cds-g10": "#001141", + "cds-g90": "#001141", + "cds-g100": "#001141" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.100}", + "group": "palette", + "$modes": { + "default": "#1c345f", + "cds-g0": "{carbon.color.blue.100}", + "cds-g10": "{carbon.color.blue.100}", + "cds-g90": "{carbon.color.blue.100}", + "cds-g100": "{carbon.color.blue.100}" + }, + "key": "{color.palette.blue-500}" + }, + "name": "token-color-palette-blue-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-500" + ] + }, + "token-color-palette-blue-400": { + "key": "{color.palette.blue-400}", + "$type": "color", + "$value": "#002d9c", + "group": "palette", + "$modes": { + "default": "#0046d1", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#002d9c", + "cds-g100": "#002d9c" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.80}", + "group": "palette", + "$modes": { + "default": "#0046d1", + "cds-g0": "{carbon.color.blue.80}", + "cds-g10": "{carbon.color.blue.80}", + "cds-g90": "{carbon.color.blue.80}", + "cds-g100": "{carbon.color.blue.80}" + }, + "key": "{color.palette.blue-400}" + }, + "name": "token-color-palette-blue-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-400" + ] + }, + "token-color-palette-blue-300": { + "key": "{color.palette.blue-300}", + "$type": "color", + "$value": "#0043ce", + "group": "palette", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.70}", + "group": "palette", + "$modes": { + "default": "#0c56e9", + "cds-g0": "{carbon.color.blue.70}", + "cds-g10": "{carbon.color.blue.70}", + "cds-g90": "{carbon.color.blue.70}", + "cds-g100": "{carbon.color.blue.70}" + }, + "key": "{color.palette.blue-300}" + }, + "name": "token-color-palette-blue-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-300" + ] + }, + "token-color-palette-blue-200": { + "key": "{color.palette.blue-200}", + "$type": "color", + "$value": "#0f62fe", + "group": "palette", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.60}", + "group": "palette", + "$modes": { + "default": "#1060ff", + "cds-g0": "{carbon.color.blue.60}", + "cds-g10": "{carbon.color.blue.60}", + "cds-g90": "{carbon.color.blue.60}", + "cds-g100": "{carbon.color.blue.60}" + }, + "key": "{color.palette.blue-200}" + }, + "name": "token-color-palette-blue-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-200" + ] + }, + "token-color-palette-blue-100": { + "key": "{color.palette.blue-100}", + "$type": "color", + "$value": "#d0e2ff", + "group": "palette", + "$modes": { + "default": "#cce3fe", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.20}", + "group": "palette", + "$modes": { + "default": "#cce3fe", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.20}", + "cds-g100": "{carbon.color.blue.20}" + }, + "key": "{color.palette.blue-100}" + }, + "name": "token-color-palette-blue-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-100" + ] + }, + "token-color-palette-blue-50": { + "key": "{color.palette.blue-50}", + "$type": "color", + "$value": "#edf5ff", + "group": "palette", + "$modes": { + "default": "#f2f8ff", + "cds-g0": "#edf5ff", + "cds-g10": "#edf5ff", + "cds-g90": "#edf5ff", + "cds-g100": "#edf5ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.10}", + "group": "palette", + "$modes": { + "default": "#f2f8ff", + "cds-g0": "{carbon.color.blue.10}", + "cds-g10": "{carbon.color.blue.10}", + "cds-g90": "{carbon.color.blue.10}", + "cds-g100": "{carbon.color.blue.10}" + }, + "key": "{color.palette.blue-50}" + }, + "name": "token-color-palette-blue-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-50" + ] + }, + "token-color-palette-purple-500": { + "key": "{color.palette.purple-500}", + "$type": "color", + "$value": "#31135e", + "group": "palette", + "$modes": { + "default": "#42215b", + "cds-g0": "#31135e", + "cds-g10": "#31135e", + "cds-g90": "#31135e", + "cds-g100": "#31135e" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.90}", + "group": "palette", + "$modes": { + "default": "#42215b", + "cds-g0": "{carbon.color.purple.90}", + "cds-g10": "{carbon.color.purple.90}", + "cds-g90": "{carbon.color.purple.90}", + "cds-g100": "{carbon.color.purple.90}" + }, + "key": "{color.palette.purple-500}" + }, + "name": "token-color-palette-purple-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-500" + ] + }, + "token-color-palette-purple-400": { + "key": "{color.palette.purple-400}", + "$type": "color", + "$value": "#6929c4", + "group": "palette", + "$modes": { + "default": "#7b00db", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.70}", + "group": "palette", + "$modes": { + "default": "#7b00db", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, + "key": "{color.palette.purple-400}" + }, + "name": "token-color-palette-purple-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-400" + ] + }, + "token-color-palette-purple-300": { + "key": "{color.palette.purple-300}", + "$type": "color", + "$value": "#8a3ffc", + "group": "palette", + "$modes": { + "default": "#911ced", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#8a3ffc", + "cds-g100": "#8a3ffc" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.60}", + "group": "palette", + "$modes": { + "default": "#911ced", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.60}", + "cds-g100": "{carbon.color.purple.60}" + }, + "key": "{color.palette.purple-300}" + }, + "name": "token-color-palette-purple-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-300" + ] + }, + "token-color-palette-purple-200": { + "key": "{color.palette.purple-200}", + "$type": "color", + "$value": "#a56eff", + "group": "palette", + "$modes": { + "default": "#a737ff", + "cds-g0": "#a56eff", + "cds-g10": "#a56eff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.50}", + "group": "palette", + "$modes": { + "default": "#a737ff", + "cds-g0": "{carbon.color.purple.50}", + "cds-g10": "{carbon.color.purple.50}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, + "key": "{color.palette.purple-200}" + }, + "name": "token-color-palette-purple-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-200" + ] + }, + "token-color-palette-purple-100": { + "key": "{color.palette.purple-100}", + "$type": "color", + "$value": "#e8daff", + "group": "palette", + "$modes": { + "default": "#ead2fe", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.20}", + "group": "palette", + "$modes": { + "default": "#ead2fe", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.20}" + }, + "key": "{color.palette.purple-100}" + }, + "name": "token-color-palette-purple-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-100" + ] + }, + "token-color-palette-purple-50": { + "key": "{color.palette.purple-50}", + "$type": "color", + "$value": "#f6f2ff", + "group": "palette", + "$modes": { + "default": "#f9f2ff", + "cds-g0": "#f6f2ff", + "cds-g10": "#f6f2ff", + "cds-g90": "#f6f2ff", + "cds-g100": "#f6f2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.10}", + "group": "palette", + "$modes": { + "default": "#f9f2ff", + "cds-g0": "{carbon.color.purple.10}", + "cds-g10": "{carbon.color.purple.10}", + "cds-g90": "{carbon.color.purple.10}", + "cds-g100": "{carbon.color.purple.10}" + }, + "key": "{color.palette.purple-50}" + }, + "name": "token-color-palette-purple-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-50" + ] + }, + "token-color-palette-green-500": { + "key": "{color.palette.green-500}", + "$type": "color", + "$value": "#044317", + "group": "palette", + "$modes": { + "default": "#054220", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#044317", + "cds-g100": "#044317" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.80}", + "group": "palette", + "$modes": { + "default": "#054220", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.80}", + "cds-g100": "{carbon.color.green.80}" + }, + "key": "{color.palette.green-500}" + }, + "name": "token-color-palette-green-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-500" + ] + }, + "token-color-palette-green-400": { + "key": "{color.palette.green-400}", + "$type": "color", + "$value": "#0e6027", + "group": "palette", + "$modes": { + "default": "#006619", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.70}", + "group": "palette", + "$modes": { + "default": "#006619", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, + "key": "{color.palette.green-400}" + }, + "name": "token-color-palette-green-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-400" + ] + }, + "token-color-palette-green-300": { + "key": "{color.palette.green-300}", + "$type": "color", + "$value": "#198038", + "group": "palette", + "$modes": { + "default": "#00781e", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#198038", + "cds-g100": "#198038" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.60}", + "group": "palette", + "$modes": { + "default": "#00781e", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.60}", + "cds-g100": "{carbon.color.green.60}" + }, + "key": "{color.palette.green-300}" + }, + "name": "token-color-palette-green-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-300" + ] + }, + "token-color-palette-green-200": { + "key": "{color.palette.green-200}", + "$type": "color", + "$value": "#24a148", + "group": "palette", + "$modes": { + "default": "#008a22", + "cds-g0": "#24a148", + "cds-g10": "#24a148", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.50}", + "group": "palette", + "$modes": { + "default": "#008a22", + "cds-g0": "{carbon.color.green.50}", + "cds-g10": "{carbon.color.green.50}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, + "key": "{color.palette.green-200}" + }, + "name": "token-color-palette-green-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-200" + ] + }, + "token-color-palette-green-100": { + "key": "{color.palette.green-100}", + "$type": "color", + "$value": "#a7f0ba", + "group": "palette", + "$modes": { + "default": "#cceeda", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.20}", + "group": "palette", + "$modes": { + "default": "#cceeda", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, + "key": "{color.palette.green-100}" + }, + "name": "token-color-palette-green-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-100" + ] + }, + "token-color-palette-green-50": { + "key": "{color.palette.green-50}", + "$type": "color", + "$value": "#defbe6", + "group": "palette", + "$modes": { + "default": "#f2fbf6", + "cds-g0": "#defbe6", + "cds-g10": "#defbe6", + "cds-g90": "#defbe6", + "cds-g100": "#defbe6" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.10}", + "group": "palette", + "$modes": { + "default": "#f2fbf6", + "cds-g0": "{carbon.color.green.10}", + "cds-g10": "{carbon.color.green.10}", + "cds-g90": "{carbon.color.green.10}", + "cds-g100": "{carbon.color.green.10}" + }, + "key": "{color.palette.green-50}" + }, + "name": "token-color-palette-green-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-50" + ] + }, + "token-color-palette-amber-500": { + "key": "{color.palette.amber-500}", + "$type": "color", + "$value": "#3e1a00", + "group": "palette", + "$modes": { + "default": "#542800", + "cds-g0": "#3e1a00", + "cds-g10": "#3e1a00", + "cds-g90": "#3e1a00", + "cds-g100": "#3e1a00" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.90}", + "group": "palette", + "$modes": { + "default": "#542800", + "cds-g0": "{carbon.color.orange.90}", + "cds-g10": "{carbon.color.orange.90}", + "cds-g90": "{carbon.color.orange.90}", + "cds-g100": "{carbon.color.orange.90}" + }, + "key": "{color.palette.amber-500}" + }, + "name": "token-color-palette-amber-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-500" + ] + }, + "token-color-palette-amber-400": { + "key": "{color.palette.amber-400}", + "$type": "color", + "$value": "#5e2900", + "group": "palette", + "$modes": { + "default": "#803d00", + "cds-g0": "#5e2900", + "cds-g10": "#5e2900", + "cds-g90": "#5e2900", + "cds-g100": "#5e2900" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.80}", + "group": "palette", + "$modes": { + "default": "#803d00", + "cds-g0": "{carbon.color.orange.80}", + "cds-g10": "{carbon.color.orange.80}", + "cds-g90": "{carbon.color.orange.80}", + "cds-g100": "{carbon.color.orange.80}" + }, + "key": "{color.palette.amber-400}" + }, + "name": "token-color-palette-amber-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-400" + ] + }, + "token-color-palette-amber-300": { + "key": "{color.palette.amber-300}", + "$type": "color", + "$value": "#8a3800", + "group": "palette", + "$modes": { + "default": "#9e4b00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.70}", + "group": "palette", + "$modes": { + "default": "#9e4b00", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, + "key": "{color.palette.amber-300}" + }, + "name": "token-color-palette-amber-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-300" + ] + }, + "token-color-palette-amber-200": { + "key": "{color.palette.amber-200}", + "$type": "color", + "$value": "#ba4e00", + "group": "palette", + "$modes": { + "default": "#bb5a00", + "cds-g0": "#ba4e00", + "cds-g10": "#ba4e00", + "cds-g90": "#ba4e00", + "cds-g100": "#ba4e00" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.60}", + "group": "palette", + "$modes": { + "default": "#bb5a00", + "cds-g0": "{carbon.color.orange.60}", + "cds-g10": "{carbon.color.orange.60}", + "cds-g90": "{carbon.color.orange.60}", + "cds-g100": "{carbon.color.orange.60}" + }, + "key": "{color.palette.amber-200}" + }, + "name": "token-color-palette-amber-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-200" + ] + }, + "token-color-palette-amber-100": { + "key": "{color.palette.amber-100}", + "$type": "color", + "$value": "#ffd9be", + "group": "palette", + "$modes": { + "default": "#fbeabf", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.20}", + "group": "palette", + "$modes": { + "default": "#fbeabf", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "key": "{color.palette.amber-100}" + }, + "name": "token-color-palette-amber-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-100" + ] + }, + "token-color-palette-amber-50": { + "key": "{color.palette.amber-50}", + "$type": "color", + "$value": "#fff2e8", + "group": "palette", + "$modes": { + "default": "#fff9e8", + "cds-g0": "#fff2e8", + "cds-g10": "#fff2e8", + "cds-g90": "#fff2e8", + "cds-g100": "#fff2e8" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.10}", + "group": "palette", + "$modes": { + "default": "#fff9e8", + "cds-g0": "{carbon.color.orange.10}", + "cds-g10": "{carbon.color.orange.10}", + "cds-g90": "{carbon.color.orange.10}", + "cds-g100": "{carbon.color.orange.10}" + }, + "key": "{color.palette.amber-50}" + }, + "name": "token-color-palette-amber-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-50" + ] + }, + "token-color-palette-red-500": { + "key": "{color.palette.red-500}", + "$type": "color", + "$value": "#520408", + "group": "palette", + "$modes": { + "default": "#51130a", + "cds-g0": "#520408", + "cds-g10": "#520408", + "cds-g90": "#520408", + "cds-g100": "#520408" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.90}", + "group": "palette", + "$modes": { + "default": "#51130a", + "cds-g0": "{carbon.color.red.90}", + "cds-g10": "{carbon.color.red.90}", + "cds-g90": "{carbon.color.red.90}", + "cds-g100": "{carbon.color.red.90}" + }, + "key": "{color.palette.red-500}" + }, + "name": "token-color-palette-red-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-500" + ] + }, + "token-color-palette-red-400": { + "key": "{color.palette.red-400}", + "$type": "color", + "$value": "#750e13", + "group": "palette", + "$modes": { + "default": "#940004", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#750e13", + "cds-g100": "#750e13" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.80}", + "group": "palette", + "$modes": { + "default": "#940004", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.80}", + "cds-g100": "{carbon.color.red.80}" + }, + "key": "{color.palette.red-400}" + }, + "name": "token-color-palette-red-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-400" + ] + }, + "token-color-palette-red-300": { + "key": "{color.palette.red-300}", + "$type": "color", + "$value": "#a2191f", + "group": "palette", + "$modes": { + "default": "#c00005", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.70}", + "group": "palette", + "$modes": { + "default": "#c00005", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, + "key": "{color.palette.red-300}" + }, + "name": "token-color-palette-red-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-300" + ] + }, + "token-color-palette-red-200": { + "key": "{color.palette.red-200}", + "$type": "color", + "$value": "#da1e28", + "group": "palette", + "$modes": { + "default": "#e52228", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.60}", + "group": "palette", + "$modes": { + "default": "#e52228", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.60}", + "cds-g100": "{carbon.color.red.60}" + }, + "key": "{color.palette.red-200}" + }, + "name": "token-color-palette-red-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-200" + ] + }, + "token-color-palette-red-100": { + "key": "{color.palette.red-100}", + "$type": "color", + "$value": "#ffd7d9", + "group": "palette", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.20}", + "group": "palette", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, + "key": "{color.palette.red-100}" + }, + "name": "token-color-palette-red-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-100" + ] + }, + "token-color-palette-red-50": { + "key": "{color.palette.red-50}", + "$type": "color", + "$value": "#fff1f1", + "group": "palette", + "$modes": { + "default": "#fff5f5", + "cds-g0": "#fff1f1", + "cds-g10": "#fff1f1", + "cds-g90": "#fff1f1", + "cds-g100": "#fff1f1" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.10}", + "group": "palette", + "$modes": { + "default": "#fff5f5", + "cds-g0": "{carbon.color.red.10}", + "cds-g10": "{carbon.color.red.10}", + "cds-g90": "{carbon.color.red.10}", + "cds-g100": "{carbon.color.red.10}" + }, + "key": "{color.palette.red-50}" + }, + "name": "token-color-palette-red-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-50" + ] + }, + "token-color-palette-neutral-700": { + "key": "{color.palette.neutral-700}", + "$type": "color", + "$value": "#161616", + "group": "palette", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.100}", + "group": "palette", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "{carbon.color.gray.100}", + "cds-g10": "{carbon.color.gray.100}", + "cds-g90": "{carbon.color.gray.100}", + "cds-g100": "{carbon.color.gray.100}" + }, + "key": "{color.palette.neutral-700}" + }, + "name": "token-color-palette-neutral-700", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-700" + ] + }, + "token-color-palette-neutral-600": { + "key": "{color.palette.neutral-600}", + "$type": "color", + "$value": "#393939", + "group": "palette", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#393939", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.80}", + "group": "palette", + "$modes": { + "default": "#3b3d45", + "cds-g0": "{carbon.color.gray.80}", + "cds-g10": "{carbon.color.gray.80}", + "cds-g90": "{carbon.color.gray.80}", + "cds-g100": "{carbon.color.gray.80}" + }, + "key": "{color.palette.neutral-600}" + }, + "name": "token-color-palette-neutral-600", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-600" + ] + }, + "token-color-palette-neutral-500": { + "key": "{color.palette.neutral-500}", + "$type": "color", + "$value": "#525252", + "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.70}", + "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": "{carbon.color.gray.70}", + "cds-g10": "{carbon.color.gray.70}", + "cds-g90": "{carbon.color.gray.70}", + "cds-g100": "{carbon.color.gray.70}" + }, + "key": "{color.palette.neutral-500}" + }, + "name": "token-color-palette-neutral-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-500" + ] + }, + "token-color-palette-neutral-400": { + "key": "{color.palette.neutral-400}", + "$type": "color", + "$value": "#8d8d8d", + "group": "palette", + "$modes": { + "default": "#8c909c", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.50}", + "group": "palette", + "$modes": { + "default": "#8c909c", + "cds-g0": "{carbon.color.gray.50}", + "cds-g10": "{carbon.color.gray.50}", + "cds-g90": "{carbon.color.gray.50}", + "cds-g100": "{carbon.color.gray.50}" + }, + "key": "{color.palette.neutral-400}" + }, + "name": "token-color-palette-neutral-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-400" + ] + }, + "token-color-palette-neutral-300": { + "key": "{color.palette.neutral-300}", + "$type": "color", + "$value": "#a8a8a8", + "group": "palette", + "$modes": { + "default": "#c2c5cb", + "cds-g0": "#a8a8a8", + "cds-g10": "#a8a8a8", + "cds-g90": "#a8a8a8", + "cds-g100": "#a8a8a8" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.40}", + "group": "palette", + "$modes": { + "default": "#c2c5cb", + "cds-g0": "{carbon.color.gray.40}", + "cds-g10": "{carbon.color.gray.40}", + "cds-g90": "{carbon.color.gray.40}", + "cds-g100": "{carbon.color.gray.40}" + }, + "key": "{color.palette.neutral-300}" + }, + "name": "token-color-palette-neutral-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-300" + ] + }, + "token-color-palette-neutral-200": { + "key": "{color.palette.neutral-200}", + "$type": "color", + "$value": "#c6c6c6", + "group": "palette", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.30}", + "group": "palette", + "$modes": { + "default": "#dedfe3", + "cds-g0": "{carbon.color.gray.30}", + "cds-g10": "{carbon.color.gray.30}", + "cds-g90": "{carbon.color.gray.30}", + "cds-g100": "{carbon.color.gray.30}" + }, + "key": "{color.palette.neutral-200}" + }, + "name": "token-color-palette-neutral-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-200" + ] + }, + "token-color-palette-neutral-100": { + "key": "{color.palette.neutral-100}", + "$type": "color", + "$value": "#e0e0e0", + "group": "palette", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#e0e0e0", + "cds-g100": "#e0e0e0" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.20}", + "group": "palette", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "{carbon.color.gray.20}", + "cds-g10": "{carbon.color.gray.20}", + "cds-g90": "{carbon.color.gray.20}", + "cds-g100": "{carbon.color.gray.20}" + }, + "key": "{color.palette.neutral-100}" + }, + "name": "token-color-palette-neutral-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-100" + ] + }, + "token-color-palette-neutral-50": { + "key": "{color.palette.neutral-50}", + "$type": "color", + "$value": "#f4f4f4", + "group": "palette", + "$modes": { + "default": "#fafafa", + "cds-g0": "#f4f4f4", + "cds-g10": "#f4f4f4", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.10}", + "group": "palette", + "$modes": { + "default": "#fafafa", + "cds-g0": "{carbon.color.gray.10}", + "cds-g10": "{carbon.color.gray.10}", + "cds-g90": "{carbon.color.gray.10}", + "cds-g100": "{carbon.color.gray.10}" + }, + "key": "{color.palette.neutral-50}" + }, + "name": "token-color-palette-neutral-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-50" + ] + }, + "token-color-palette-neutral-0": { + "key": "{color.palette.neutral-0}", + "$type": "color", + "$value": "#ffffff", + "group": "palette", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.white.0}", + "group": "palette", + "$modes": { + "default": "#ffffff", + "cds-g0": "{carbon.color.white.0}", + "cds-g10": "{carbon.color.white.0}", + "cds-g90": "{carbon.color.white.0}", + "cds-g100": "{carbon.color.white.0}" + }, + "key": "{color.palette.neutral-0}" + }, + "name": "token-color-palette-neutral-0", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-0" + ] + }, + "token-color-palette-alpha-300": { + "key": "{color.palette.alpha-300}", + "$type": "color", + "$value": "#6f6f6f", + "group": "palette", + "$modes": { + "default": "#393939", + "cds-g0": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#6f6f6f", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.60}", + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-600}", + "cds-g0": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.60}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "key": "{color.palette.alpha-300}" + }, + "name": "token-color-palette-alpha-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "alpha-300" + ] + }, + "token-color-palette-alpha-200": { + "key": "{color.palette.alpha-200}", + "$type": "color", + "$value": "#525252", + "group": "palette", + "$modes": { + "default": "#525252", + "cds-g0": { + "$value": "#c6c6c6", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#e0e0e0", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#6f6f6f", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#525252", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.70}", + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": { + "$value": "{carbon.color.gray.30}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.20}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.60}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.70}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "key": "{color.palette.alpha-200}" + }, + "name": "token-color-palette-alpha-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "alpha-200" + ] + }, + "token-color-palette-alpha-100": { + "key": "{color.palette.alpha-100}", + "$type": "color", + "$value": "#393939", + "group": "palette", + "$modes": { + "default": "#525252", + "cds-g0": { + "$value": "#e0e0e0", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#c6c6c6", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#525252", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#393939", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.80}", + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": { + "$value": "{carbon.color.gray.20}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.30}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.70}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.80}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "key": "{color.palette.alpha-100}" + }, + "name": "token-color-palette-alpha-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "alpha-100" + ] + }, + "token-color-border-primary": { + "key": "{color.border.primary}", + "$type": "color", + "$value": "#6f6f6f", + "group": "semantic", + "$modes": { + "default": "#525252", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.borderSubtle03}", + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-200}", + "cds-g0": "{carbon.themes.white.borderSubtle03}", + "cds-g10": "{carbon.themes.g10.borderSubtle03}", + "cds-g90": "{carbon.themes.g90.borderSubtle03}", + "cds-g100": "{carbon.themes.g100.borderSubtle03}" + }, + "key": "{color.border.primary}" + }, + "name": "token-color-border-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "primary" + ] + }, + "token-color-border-faint": { + "key": "{color.border.faint}", + "$type": "color", + "$value": "#393939", + "group": "semantic", + "$modes": { + "default": "#393939", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.borderSubtle00}", + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-100}", + "cds-g0": "{carbon.themes.white.borderSubtle00}", + "cds-g10": "{carbon.themes.g10.borderSubtle00}", + "cds-g90": "{carbon.themes.g90.borderSubtle00}", + "cds-g100": "{carbon.themes.g100.borderSubtle00}" + }, + "key": "{color.border.faint}" + }, + "name": "token-color-border-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "faint" + ] + }, + "token-color-border-strong": { + "key": "{color.border.strong}", + "$type": "color", + "$value": "#6f6f6f", + "group": "semantic", + "$modes": { + "default": "#6f6f6f", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.borderStrong01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-300}", + "cds-g0": "{carbon.themes.white.borderStrong01}", + "cds-g10": "{carbon.themes.g10.borderStrong01}", + "cds-g90": "{carbon.themes.g90.borderStrong01}", + "cds-g100": "{carbon.themes.g100.borderStrong01}" + }, + "key": "{color.border.strong}" + }, + "name": "token-color-border-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "strong" + ] + }, + "token-color-border-action": { + "key": "{color.border.action}", + "$type": "color", + "$value": "#4589ff", + "group": "semantic", + "$modes": { + "default": "#d0e2ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.borderInteractive}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-100}", + "cds-g0": "{carbon.themes.white.borderInteractive}", + "cds-g10": "{carbon.themes.g10.borderInteractive}", + "cds-g90": "{carbon.themes.g90.borderInteractive}", + "cds-g100": "{carbon.themes.g100.borderInteractive}" + }, + "key": "{color.border.action}" + }, + "name": "token-color-border-action", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "action" + ] + }, + "token-color-border-highlight": { + "key": "{color.border.highlight}", + "$type": "color", + "$value": "#a56eff", + "group": "semantic", + "$modes": { + "default": "#e8daff", + "cds-g0": "#be95ff", + "cds-g10": "#be95ff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-100}", + "cds-g0": "{carbon.color.purple.40}", + "cds-g10": "{carbon.color.purple.40}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, + "key": "{color.border.highlight}" + }, + "name": "token-color-border-highlight", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "highlight" + ] + }, + "token-color-border-success": { + "key": "{color.border.success}", + "$type": "color", + "$value": "#24a148", + "group": "semantic", + "$modes": { + "default": "#a7f0ba", + "cds-g0": "#42be65", + "cds-g10": "#42be65", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-100}", + "cds-g0": "{carbon.color.green.40}", + "cds-g10": "{carbon.color.green.40}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, + "key": "{color.border.success}" + }, + "name": "token-color-border-success", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "success" + ] + }, + "token-color-border-warning": { + "key": "{color.border.warning}", + "$type": "color", + "$value": "#b28600", + "group": "semantic", + "$modes": { + "default": "#ffd9be", + "cds-g0": "#d2a106", + "cds-g10": "#d2a106", + "cds-g90": "#b28600", + "cds-g100": "#b28600" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.yellow.40}", + "cds-g10": "{carbon.color.yellow.40}", + "cds-g90": "{carbon.color.yellow.50}", + "cds-g100": "{carbon.color.yellow.50}" + }, + "key": "{color.border.warning}" + }, + "name": "token-color-border-warning", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "warning" + ] + }, + "token-color-border-critical": { + "key": "{color.border.critical}", + "$type": "color", + "$value": "#fa4d56", + "group": "semantic", + "$modes": { + "default": "#ffd7d9", + "cds-g0": "#ff8389", + "cds-g10": "#ff8389", + "cds-g90": "#fa4d56", + "cds-g100": "#fa4d56" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-100}", + "cds-g0": "{carbon.color.red.40}", + "cds-g10": "{carbon.color.red.40}", + "cds-g90": "{carbon.color.red.50}", + "cds-g100": "{carbon.color.red.50}" + }, + "key": "{color.border.critical}" + }, + "name": "token-color-border-critical", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "critical" + ] + }, + "token-color-focus-action-internal": { + "key": "{color.focus.action.internal}", + "$type": "color", + "$value": "#161616", + "group": "semantic", + "$modes": { + "default": "#0043ce", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.focusInset}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, + "key": "{color.focus.action.internal}" + }, + "name": "token-color-focus-action-internal", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "action", + "internal" + ] + }, + "token-color-focus-action-external": { + "key": "{color.focus.action.external}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.focus}", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{color.focus.action.external}" + }, + "name": "token-color-focus-action-external", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "action", + "external" + ] + }, + "token-color-focus-critical-internal": { + "key": "{color.focus.critical.internal}", + "$type": "color", + "$value": "#161616", + "group": "semantic", + "$modes": { + "default": "#a2191f", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.focusInset}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, + "key": "{color.focus.critical.internal}" + }, + "name": "token-color-focus-critical-internal", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "critical", + "internal" + ] + }, + "token-color-focus-critical-external": { + "key": "{color.focus.critical.external}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#dd7578", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.focus}", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#dd7578", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{color.focus.critical.external}" + }, + "name": "token-color-focus-critical-external", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "critical", + "external" + ] + }, + "token-color-foreground-strong": { + "key": "{color.foreground.strong}", + "$type": "color", + "$value": "#f4f4f4", + "group": "semantic", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textPrimary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{color.foreground.strong}" + }, + "name": "token-color-foreground-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "strong" + ] + }, + "token-color-foreground-primary": { + "key": "{color.foreground.primary}", + "$type": "color", + "$value": "#f4f4f4", + "group": "semantic", + "$modes": { + "default": "#393939", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textPrimary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-600}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{color.foreground.primary}" + }, + "name": "token-color-foreground-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "primary" + ] + }, + "token-color-foreground-faint": { + "key": "{color.foreground.faint}", + "$type": "color", + "$value": "#c6c6c6", + "group": "semantic", + "$modes": { + "default": "#525252", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textSecondary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{color.foreground.faint}" + }, + "name": "token-color-foreground-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "faint" + ] + }, + "token-color-foreground-high-contrast": { + "key": "{color.foreground.high-contrast}", + "$type": "color", + "$value": "#161616", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textInverse}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{color.foreground.high-contrast}" + }, + "name": "token-color-foreground-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "high-contrast" + ] + }, + "token-color-foreground-disabled": { + "key": "{color.foreground.disabled}", + "$type": "color", + "$value": "rgba(244, 244, 244, 0.25)", + "group": "semantic", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "rgba(22, 22, 22, 0.25)", + "cds-g10": "rgba(22, 22, 22, 0.25)", + "cds-g90": "rgba(244, 244, 244, 0.25)", + "cds-g100": "rgba(244, 244, 244, 0.25)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textDisabled}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textDisabled}", + "cds-g10": "{carbon.themes.g10.textDisabled}", + "cds-g90": "{carbon.themes.g90.textDisabled}", + "cds-g100": "{carbon.themes.g100.textDisabled}" + }, + "key": "{color.foreground.disabled}" + }, + "name": "token-color-foreground-disabled", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "disabled" + ] + }, + "token-color-foreground-action": { + "key": "{color.foreground.action}", + "$type": "color", + "$value": "#78a9ff", + "group": "semantic", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#78a9ff", + "cds-g100": "#78a9ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.linkPrimary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.white.linkPrimary}", + "cds-g10": "{carbon.themes.g10.linkPrimary}", + "cds-g90": "{carbon.themes.g90.linkPrimary}", + "cds-g100": "{carbon.themes.g100.linkPrimary}" + }, + "key": "{color.foreground.action}" + }, + "name": "token-color-foreground-action", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "action" + ] + }, + "token-color-foreground-action-hover": { + "key": "{color.foreground.action-hover}", + "$type": "color", + "$value": "#a6c8ff", + "group": "semantic", + "$modes": { + "default": "#0043ce", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.linkPrimaryHover}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, + "key": "{color.foreground.action-hover}" + }, + "name": "token-color-foreground-action-hover", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "action-hover" + ] + }, + "token-color-foreground-action-active": { + "key": "{color.foreground.action-active}", + "$type": "color", + "$value": "#a6c8ff", + "group": "semantic", + "$modes": { + "default": "#002d9c", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.linkPrimaryHover}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, + "key": "{color.foreground.action-active}" + }, + "name": "token-color-foreground-action-active", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "action-active" + ] + }, + "token-color-foreground-highlight": { + "key": "{color.foreground.highlight}", + "$type": "color", + "$value": "#be95ff", + "group": "semantic", + "$modes": { + "default": "#a56eff", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, + "key": "{color.foreground.highlight}" + }, + "name": "token-color-foreground-highlight", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "highlight" + ] + }, + "token-color-foreground-highlight-on-surface": { + "key": "{color.foreground.highlight-on-surface}", + "$type": "color", + "$value": "#d4bbff", + "group": "semantic", + "$modes": { + "default": "#8a3ffc", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#d4bbff", + "cds-g100": "#d4bbff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.30}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-300}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.30}", + "cds-g100": "{carbon.color.purple.30}" + }, + "key": "{color.foreground.highlight-on-surface}" + }, + "name": "token-color-foreground-highlight-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "highlight-on-surface" + ] + }, + "token-color-foreground-highlight-high-contrast": { + "key": "{color.foreground.highlight-high-contrast}", + "$type": "color", + "$value": "#d4bbff", + "group": "semantic", + "$modes": { + "default": "#31135e", + "cds-g0": "#491d8b", + "cds-g10": "#491d8b", + "cds-g90": "#e8daff", + "cds-g100": "#d4bbff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.30}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-500}", + "cds-g0": "{carbon.color.purple.80}", + "cds-g10": "{carbon.color.purple.80}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.30}" + }, + "key": "{color.foreground.highlight-high-contrast}" + }, + "name": "token-color-foreground-highlight-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "highlight-high-contrast" + ] + }, + "token-color-foreground-success": { + "key": "{color.foreground.success}", + "$type": "color", + "$value": "#42be65", + "group": "semantic", + "$modes": { + "default": "#24a148", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#42be65", + "cds-g100": "#42be65" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-200}", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.40}", + "cds-g100": "{carbon.color.green.40}" + }, + "key": "{color.foreground.success}" + }, + "name": "token-color-foreground-success", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "success" + ] + }, + "token-color-foreground-success-on-surface": { + "key": "{color.foreground.success-on-surface}", + "$type": "color", + "$value": "#6fdc8c", + "group": "semantic", + "$modes": { + "default": "#198038", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#6fdc8c", + "cds-g100": "#6fdc8c" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.30}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-300}", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.30}", + "cds-g100": "{carbon.color.green.30}" + }, + "key": "{color.foreground.success-on-surface}" + }, + "name": "token-color-foreground-success-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "success-on-surface" + ] + }, + "token-color-foreground-success-high-contrast": { + "key": "{color.foreground.success-high-contrast}", + "$type": "color", + "$value": "#a7f0ba", + "group": "semantic", + "$modes": { + "default": "#044317", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.20}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-500}", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, + "key": "{color.foreground.success-high-contrast}" + }, + "name": "token-color-foreground-success-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "success-high-contrast" + ] + }, + "token-color-foreground-warning": { + "key": "{color.foreground.warning}", + "$type": "color", + "$value": "#d2a106", + "group": "semantic", + "$modes": { + "default": "#ba4e00", + "cds-g0": "#8e6a00", + "cds-g10": "#8e6a00", + "cds-g90": "#d2a106", + "cds-g100": "#d2a106" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.yellow.60}", + "cds-g10": "{carbon.color.yellow.60}", + "cds-g90": "{carbon.color.yellow.40}", + "cds-g100": "{carbon.color.yellow.40}" + }, + "key": "{color.foreground.warning}" + }, + "name": "token-color-foreground-warning", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "warning" + ] + }, + "token-color-foreground-warning-on-surface": { + "key": "{color.foreground.warning-on-surface}", + "$type": "color", + "$value": "#f1c21b", + "group": "semantic", + "$modes": { + "default": "#8a3800", + "cds-g0": "#684e00", + "cds-g10": "#684e00", + "cds-g90": "#f1c21b", + "cds-g100": "#f1c21b" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.30}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-300}", + "cds-g0": "{carbon.color.yellow.70}", + "cds-g10": "{carbon.color.yellow.70}", + "cds-g90": "{carbon.color.yellow.30}", + "cds-g100": "{carbon.color.yellow.30}" + }, + "key": "{color.foreground.warning-on-surface}" + }, + "name": "token-color-foreground-warning-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "warning-on-surface" + ] + }, + "token-color-foreground-warning-high-contrast": { + "key": "{color.foreground.warning-high-contrast}", + "$type": "color", + "$value": "#fddc69", + "group": "semantic", + "$modes": { + "default": "#3e1a00", + "cds-g0": "#483700", + "cds-g10": "#483700", + "cds-g90": "#fddc69", + "cds-g100": "#fddc69" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.20}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-500}", + "cds-g0": "{carbon.color.yellow.80}", + "cds-g10": "{carbon.color.yellow.80}", + "cds-g90": "{carbon.color.yellow.20}", + "cds-g100": "{carbon.color.yellow.20}" + }, + "key": "{color.foreground.warning-high-contrast}" + }, + "name": "token-color-foreground-warning-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "warning-high-contrast" + ] + }, + "token-color-foreground-critical": { + "key": "{color.foreground.critical}", + "$type": "color", + "$value": "#ff8389", + "group": "semantic", + "$modes": { + "default": "#da1e28", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#ff8389", + "cds-g100": "#ff8389" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-200}", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.40}", + "cds-g100": "{carbon.color.red.40}" + }, + "key": "{color.foreground.critical}" + }, + "name": "token-color-foreground-critical", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "critical" + ] + }, + "token-color-foreground-critical-on-surface": { + "key": "{color.foreground.critical-on-surface}", + "$type": "color", + "$value": "#ffb3b8", + "group": "semantic", + "$modes": { + "default": "#a2191f", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffb3b8", + "cds-g100": "#ffb3b8" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.30}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.30}", + "cds-g100": "{carbon.color.red.30}" + }, + "key": "{color.foreground.critical-on-surface}" + }, + "name": "token-color-foreground-critical-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "critical-on-surface" + ] + }, + "token-color-foreground-critical-high-contrast": { + "key": "{color.foreground.critical-high-contrast}", + "$type": "color", + "$value": "#ffd7d9", + "group": "semantic", + "$modes": { + "default": "#520408", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.20}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-500}", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, + "key": "{color.foreground.critical-high-contrast}" + }, + "name": "token-color-foreground-critical-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "critical-high-contrast" + ] + }, + "token-color-page-primary": { + "key": "{color.page.primary}", + "$type": "color", + "$value": "#161616", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.background}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, + "key": "{color.page.primary}" + }, + "name": "token-color-page-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "page", + "primary" + ] + }, + "token-color-page-faint": { + "key": "{color.page.faint}", + "$type": "color", + "$value": "#161616", + "group": "semantic", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.background}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, + "key": "{color.page.faint}" + }, + "name": "token-color-page-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "page", + "faint" + ] + }, + "token-color-surface-primary": { + "key": "{color.surface.primary}", + "$type": "color", + "$value": "#262626", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.layer01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, + "key": "{color.surface.primary}" + }, + "name": "token-color-surface-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "primary" + ] + }, + "token-color-surface-faint": { + "key": "{color.surface.faint}", + "$type": "color", + "$value": "#262626", + "group": "semantic", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.layer01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, + "key": "{color.surface.faint}" + }, + "name": "token-color-surface-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "faint" + ] + }, + "token-color-surface-strong": { + "key": "{color.surface.strong}", + "$type": "color", + "$value": "#393939", + "group": "semantic", + "$modes": { + "default": "#e0e0e0", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.layerAccent01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerAccent01}", + "cds-g10": "{carbon.themes.g10.layerAccent01}", + "cds-g90": "{carbon.themes.g90.layerAccent01}", + "cds-g100": "{carbon.themes.g100.layerAccent01}" + }, + "key": "{color.surface.strong}" + }, + "name": "token-color-surface-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "strong" + ] + }, + "token-color-surface-high-contrast": { + "key": "{color.surface.high-contrast}", + "$type": "color", + "$value": "#f4f4f4", + "group": "semantic", + "$modes": { + "default": "#161616", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.backgroundInverse}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "key": "{color.surface.high-contrast}" + }, + "name": "token-color-surface-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "high-contrast" + ] + }, + "token-color-surface-interactive": { + "key": "{color.surface.interactive}", + "$type": "color", + "$value": "#262626", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.layer01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, + "key": "{color.surface.interactive}" + }, + "name": "token-color-surface-interactive", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive" + ] + }, + "token-color-surface-interactive-hover": { + "key": "{color.surface.interactive-hover}", + "$type": "color", + "$value": "#333333", + "group": "semantic", + "$modes": { + "default": "#e0e0e0", + "cds-g0": "#e8e8e8", + "cds-g10": "#e8e8e8", + "cds-g90": "#474747", + "cds-g100": "#333333" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.layerHover01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerHover01}", + "cds-g10": "{carbon.themes.g10.layerHover01}", + "cds-g90": "{carbon.themes.g90.layerHover01}", + "cds-g100": "{carbon.themes.g100.layerHover01}" + }, + "key": "{color.surface.interactive-hover}" + }, + "name": "token-color-surface-interactive-hover", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive-hover" + ] + }, + "token-color-surface-interactive-active": { + "key": "{color.surface.interactive-active}", + "$type": "color", + "$value": "#525252", + "group": "semantic", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.layerActive01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.white.layerActive01}", + "cds-g10": "{carbon.themes.g10.layerActive01}", + "cds-g90": "{carbon.themes.g90.layerActive01}", + "cds-g100": "{carbon.themes.g100.layerActive01}" + }, + "key": "{color.surface.interactive-active}" + }, + "name": "token-color-surface-interactive-active", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive-active" + ] + }, + "token-color-surface-interactive-disabled": { + "key": "{color.surface.interactive-disabled}", + "$type": "color", + "$value": "#525252", + "group": "semantic", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.color.gray.30}", + "cds-g10": "{carbon.color.gray.30}", + "cds-g90": "{carbon.color.gray.60}", + "cds-g100": "{carbon.color.gray.70}" + }, + "key": "{color.surface.interactive-disabled}" + }, + "name": "token-color-surface-interactive-disabled", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive-disabled" + ] + }, + "token-color-surface-action": { + "key": "{color.surface.action}", + "$type": "color", + "$value": "#0043ce", + "group": "semantic", + "$modes": { + "default": "#edf5ff", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0f62fe", + "cds-g100": "#0043ce" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-50}", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.60}", + "cds-g100": "{carbon.color.blue.70}" + }, + "key": "{color.surface.action}" + }, + "name": "token-color-surface-action", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "action" + ] + }, + "token-color-surface-highlight": { + "key": "{color.surface.highlight}", + "$type": "color", + "$value": "#6929c4", + "group": "semantic", + "$modes": { + "default": "#f6f2ff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-50}", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, + "key": "{color.surface.highlight}" + }, + "name": "token-color-surface-highlight", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "highlight" + ] + }, + "token-color-surface-success": { + "key": "{color.surface.success}", + "$type": "color", + "$value": "#0e6027", + "group": "semantic", + "$modes": { + "default": "#defbe6", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-50}", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, + "key": "{color.surface.success}" + }, + "name": "token-color-surface-success", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "success" + ] + }, + "token-color-surface-warning": { + "key": "{color.surface.warning}", + "$type": "color", + "$value": "#684e00", + "group": "semantic", + "$modes": { + "default": "#fff2e8", + "cds-g0": "#fcf4d6", + "cds-g10": "#fcf4d6", + "cds-g90": "#684e00", + "cds-g100": "#684e00" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-50}", + "cds-g0": "{carbon.color.yellow.10}", + "cds-g10": "{carbon.color.yellow.10}", + "cds-g90": "{carbon.color.yellow.70}", + "cds-g100": "{carbon.color.yellow.70}" + }, + "key": "{color.surface.warning}" + }, + "name": "token-color-surface-warning", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "warning" + ] + }, + "token-color-surface-critical": { + "key": "{color.surface.critical}", + "$type": "color", + "$value": "#a2191f", + "group": "semantic", + "$modes": { + "default": "#fff1f1", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-50}", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, + "key": "{color.surface.critical}" + }, + "name": "token-color-surface-critical", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "critical" + ] + }, + "token-color-hashicorp-brand": { + "key": "{color.hashicorp.brand}", + "$type": "color", + "$value": "#ffffff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.hashicorp-brand}", + "group": "branding", + "key": "{color.hashicorp.brand}" + }, + "name": "token-color-hashicorp-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "hashicorp", + "brand" + ] + }, + "token-color-boundary-brand": { + "key": "{color.boundary.brand}", + "$type": "color", + "$value": "#f24c53", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-brand}", + "group": "branding", + "key": "{color.boundary.brand}" + }, + "name": "token-color-boundary-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "brand" + ] + }, + "token-color-boundary-foreground": { + "key": "{color.boundary.foreground}", + "$type": "color", + "$value": "#cf2d32", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-500}", + "group": "branding", + "key": "{color.boundary.foreground}" + }, + "name": "token-color-boundary-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "foreground" + ] + }, + "token-color-boundary-surface": { + "key": "{color.boundary.surface}", + "$type": "color", + "$value": "#ffecec", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-50}", + "group": "branding", + "key": "{color.boundary.surface}" + }, + "name": "token-color-boundary-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "surface" + ] + }, + "token-color-boundary-border": { + "key": "{color.boundary.border}", + "$type": "color", + "$value": "#fbd7d8", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-100}", + "group": "branding", + "key": "{color.boundary.border}" + }, + "name": "token-color-boundary-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "border" + ] + }, + "token-color-boundary-gradient-primary-start": { + "key": "{color.boundary.gradient.primary.start}", + "$type": "color", + "$value": "#f97076", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-300}", + "group": "branding", + "key": "{color.boundary.gradient.primary.start}" + }, + "name": "token-color-boundary-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "primary", + "start" + ] + }, + "token-color-boundary-gradient-primary-stop": { + "key": "{color.boundary.gradient.primary.stop}", + "$type": "color", + "$value": "#db363b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-400}", + "group": "branding", + "key": "{color.boundary.gradient.primary.stop}" + }, + "name": "token-color-boundary-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "primary", + "stop" + ] + }, + "token-color-boundary-gradient-faint-start": { + "key": "{color.boundary.gradient.faint.start}", + "$type": "color", + "$value": "#fffafa", + "group": "branding", + "comment": "this is the 'boundary-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffafa", + "group": "branding", + "comment": "this is the 'boundary-50' value at 25% opacity on white", + "key": "{color.boundary.gradient.faint.start}" + }, + "name": "token-color-boundary-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "faint", + "start" + ] + }, + "token-color-boundary-gradient-faint-stop": { + "key": "{color.boundary.gradient.faint.stop}", + "$type": "color", + "$value": "#ffecec", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-50}", + "group": "branding", + "key": "{color.boundary.gradient.faint.stop}" + }, + "name": "token-color-boundary-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "faint", + "stop" + ] + }, + "token-color-consul-brand": { + "key": "{color.consul.brand}", + "$type": "color", + "$value": "#e03875", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-brand}", + "group": "branding", + "key": "{color.consul.brand}" + }, + "name": "token-color-consul-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "brand" + ] + }, + "token-color-consul-foreground": { + "key": "{color.consul.foreground}", + "$type": "color", + "$value": "#d01c5b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-500}", + "group": "branding", + "key": "{color.consul.foreground}" + }, + "name": "token-color-consul-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "foreground" + ] + }, + "token-color-consul-surface": { + "key": "{color.consul.surface}", + "$type": "color", + "$value": "#ffe9f1", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-50}", + "group": "branding", + "key": "{color.consul.surface}" + }, + "name": "token-color-consul-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "surface" + ] + }, + "token-color-consul-border": { + "key": "{color.consul.border}", + "$type": "color", + "$value": "#ffcede", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-100}", + "group": "branding", + "key": "{color.consul.border}" + }, + "name": "token-color-consul-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "border" + ] + }, + "token-color-consul-gradient-primary-start": { + "key": "{color.consul.gradient.primary.start}", + "$type": "color", + "$value": "#ff99be", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-300}", + "group": "branding", + "key": "{color.consul.gradient.primary.start}" + }, + "name": "token-color-consul-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "primary", + "start" + ] + }, + "token-color-consul-gradient-primary-stop": { + "key": "{color.consul.gradient.primary.stop}", + "$type": "color", + "$value": "#da306e", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-400}", + "group": "branding", + "key": "{color.consul.gradient.primary.stop}" + }, + "name": "token-color-consul-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "primary", + "stop" + ] + }, + "token-color-consul-gradient-faint-start": { + "key": "{color.consul.gradient.faint.start}", + "$type": "color", + "$value": "#fff9fb", + "group": "branding", + "comment": "this is the 'consul-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fff9fb", + "group": "branding", + "comment": "this is the 'consul-50' value at 25% opacity on white", + "key": "{color.consul.gradient.faint.start}" + }, + "name": "token-color-consul-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "faint", + "start" + ] + }, + "token-color-consul-gradient-faint-stop": { + "key": "{color.consul.gradient.faint.stop}", + "$type": "color", + "$value": "#ffe9f1", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-50}", + "group": "branding", + "key": "{color.consul.gradient.faint.stop}" + }, + "name": "token-color-consul-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "faint", + "stop" + ] + }, + "token-color-hcp-brand": { + "key": "{color.hcp.brand}", + "$type": "color", + "$value": "#ffffff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.hcp-brand}", + "group": "branding", + "key": "{color.hcp.brand}" + }, + "name": "token-color-hcp-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "hcp", + "brand" + ] + }, + "token-color-nomad-brand": { + "key": "{color.nomad.brand}", + "$type": "color", + "$value": "#06d092", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-brand}", + "group": "branding", + "key": "{color.nomad.brand}" + }, + "name": "token-color-nomad-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "brand" + ] + }, + "token-color-nomad-foreground": { + "key": "{color.nomad.foreground}", + "$type": "color", + "$value": "#008661", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-500}", + "group": "branding", + "key": "{color.nomad.foreground}" + }, + "name": "token-color-nomad-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "foreground" + ] + }, + "token-color-nomad-surface": { + "key": "{color.nomad.surface}", + "$type": "color", + "$value": "#d3fdeb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-50}", + "group": "branding", + "key": "{color.nomad.surface}" + }, + "name": "token-color-nomad-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "surface" + ] + }, + "token-color-nomad-border": { + "key": "{color.nomad.border}", + "$type": "color", + "$value": "#bff3dd", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-100}", + "group": "branding", + "key": "{color.nomad.border}" + }, + "name": "token-color-nomad-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "border" + ] + }, + "token-color-nomad-gradient-primary-start": { + "key": "{color.nomad.gradient.primary.start}", + "$type": "color", + "$value": "#bff3dd", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-100}", + "group": "branding", + "key": "{color.nomad.gradient.primary.start}" + }, + "name": "token-color-nomad-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "primary", + "start" + ] + }, + "token-color-nomad-gradient-primary-stop": { + "key": "{color.nomad.gradient.primary.stop}", + "$type": "color", + "$value": "#60dea9", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-200}", + "group": "branding", + "key": "{color.nomad.gradient.primary.stop}" + }, + "name": "token-color-nomad-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "primary", + "stop" + ] + }, + "token-color-nomad-gradient-faint-start": { + "key": "{color.nomad.gradient.faint.start}", + "$type": "color", + "$value": "#f3fff9", + "group": "branding", + "comment": "this is the 'nomad-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#f3fff9", + "group": "branding", + "comment": "this is the 'nomad-50' value at 25% opacity on white", + "key": "{color.nomad.gradient.faint.start}" + }, + "name": "token-color-nomad-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "faint", + "start" + ] + }, + "token-color-nomad-gradient-faint-stop": { + "key": "{color.nomad.gradient.faint.stop}", + "$type": "color", + "$value": "#d3fdeb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-50}", + "group": "branding", + "key": "{color.nomad.gradient.faint.stop}" + }, + "name": "token-color-nomad-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "faint", + "stop" + ] + }, + "token-color-packer-brand": { + "key": "{color.packer.brand}", + "$type": "color", + "$value": "#02a8ef", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-brand}", + "group": "branding", + "key": "{color.packer.brand}" + }, + "name": "token-color-packer-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "brand" + ] + }, + "token-color-packer-foreground": { + "key": "{color.packer.foreground}", + "$type": "color", + "$value": "#007eb4", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-500}", + "group": "branding", + "key": "{color.packer.foreground}" + }, + "name": "token-color-packer-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "foreground" + ] + }, + "token-color-packer-surface": { + "key": "{color.packer.surface}", + "$type": "color", + "$value": "#d4f2ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-50}", + "group": "branding", + "key": "{color.packer.surface}" + }, + "name": "token-color-packer-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "surface" + ] + }, + "token-color-packer-border": { + "key": "{color.packer.border}", + "$type": "color", + "$value": "#b4e4ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-100}", + "group": "branding", + "key": "{color.packer.border}" + }, + "name": "token-color-packer-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "border" + ] + }, + "token-color-packer-gradient-primary-start": { + "key": "{color.packer.gradient.primary.start}", + "$type": "color", + "$value": "#b4e4ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-100}", + "group": "branding", + "key": "{color.packer.gradient.primary.start}" + }, + "name": "token-color-packer-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "primary", + "start" + ] + }, + "token-color-packer-gradient-primary-stop": { + "key": "{color.packer.gradient.primary.stop}", + "$type": "color", + "$value": "#63d0ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-200}", + "group": "branding", + "key": "{color.packer.gradient.primary.stop}" + }, + "name": "token-color-packer-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "primary", + "stop" + ] + }, + "token-color-packer-gradient-faint-start": { + "key": "{color.packer.gradient.faint.start}", + "$type": "color", + "$value": "#f3fcff", + "group": "branding", + "comment": "this is the 'packer-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#F3FCFF", + "group": "branding", + "comment": "this is the 'packer-50' value at 25% opacity on white", + "key": "{color.packer.gradient.faint.start}" + }, + "name": "token-color-packer-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "faint", + "start" + ] + }, + "token-color-packer-gradient-faint-stop": { + "key": "{color.packer.gradient.faint.stop}", + "$type": "color", + "$value": "#d4f2ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-50}", + "group": "branding", + "key": "{color.packer.gradient.faint.stop}" + }, + "name": "token-color-packer-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "faint", + "stop" + ] + }, + "token-color-terraform-brand": { + "key": "{color.terraform.brand}", + "$type": "color", + "$value": "#7b42bc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-brand}", + "group": "branding", + "key": "{color.terraform.brand}" + }, + "name": "token-color-terraform-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "brand" + ] + }, + "token-color-terraform-brand-on-dark": { + "key": "{color.terraform.brand-on-dark}", + "$type": "color", + "$value": "#a067da", + "group": "branding", + "comment": "this is an alternative brand color meant to be used on dark backgrounds", + "original": { + "$type": "color", + "$value": "#a067da", + "group": "branding", + "comment": "this is an alternative brand color meant to be used on dark backgrounds", + "key": "{color.terraform.brand-on-dark}" + }, + "name": "token-color-terraform-brand-on-dark", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "brand-on-dark" + ] + }, + "token-color-terraform-foreground": { + "key": "{color.terraform.foreground}", + "$type": "color", + "$value": "#773cb4", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-500}", + "group": "branding", + "key": "{color.terraform.foreground}" + }, + "name": "token-color-terraform-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "foreground" + ] + }, + "token-color-terraform-surface": { + "key": "{color.terraform.surface}", + "$type": "color", + "$value": "#f4ecff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-50}", + "group": "branding", + "key": "{color.terraform.surface}" + }, + "name": "token-color-terraform-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "surface" + ] + }, + "token-color-terraform-border": { + "key": "{color.terraform.border}", + "$type": "color", + "$value": "#ebdbfc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-100}", + "group": "branding", + "key": "{color.terraform.border}" + }, + "name": "token-color-terraform-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "border" + ] + }, + "token-color-terraform-gradient-primary-start": { + "key": "{color.terraform.gradient.primary.start}", + "$type": "color", + "$value": "#bb8deb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-300}", + "group": "branding", + "key": "{color.terraform.gradient.primary.start}" + }, + "name": "token-color-terraform-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "primary", + "start" + ] + }, + "token-color-terraform-gradient-primary-stop": { + "key": "{color.terraform.gradient.primary.stop}", + "$type": "color", + "$value": "#844fba", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-400}", + "group": "branding", + "key": "{color.terraform.gradient.primary.stop}" + }, + "name": "token-color-terraform-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "primary", + "stop" + ] + }, + "token-color-terraform-gradient-faint-start": { + "key": "{color.terraform.gradient.faint.start}", + "$type": "color", + "$value": "#fcfaff", + "group": "branding", + "comment": "this is the 'terraform-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fcfaff", + "group": "branding", + "comment": "this is the 'terraform-50' value at 25% opacity on white", + "key": "{color.terraform.gradient.faint.start}" + }, + "name": "token-color-terraform-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "faint", + "start" + ] + }, + "token-color-terraform-gradient-faint-stop": { + "key": "{color.terraform.gradient.faint.stop}", + "$type": "color", + "$value": "#f4ecff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-50}", + "group": "branding", + "key": "{color.terraform.gradient.faint.stop}" + }, + "name": "token-color-terraform-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "faint", + "stop" + ] + }, + "token-color-vagrant-brand": { + "key": "{color.vagrant.brand}", + "$type": "color", + "$value": "#1868f2", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-brand}", + "group": "branding", + "key": "{color.vagrant.brand}" + }, + "name": "token-color-vagrant-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "brand" + ] + }, + "token-color-vagrant-foreground": { + "key": "{color.vagrant.foreground}", + "$type": "color", + "$value": "#1c61d8", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-500}", + "group": "branding", + "key": "{color.vagrant.foreground}" + }, + "name": "token-color-vagrant-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "foreground" + ] + }, + "token-color-vagrant-surface": { + "key": "{color.vagrant.surface}", + "$type": "color", + "$value": "#d6ebff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-50}", + "group": "branding", + "key": "{color.vagrant.surface}" + }, + "name": "token-color-vagrant-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "surface" + ] + }, + "token-color-vagrant-border": { + "key": "{color.vagrant.border}", + "$type": "color", + "$value": "#c7dbfc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-100}", + "group": "branding", + "key": "{color.vagrant.border}" + }, + "name": "token-color-vagrant-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "border" + ] + }, + "token-color-vagrant-gradient-primary-start": { + "key": "{color.vagrant.gradient.primary.start}", + "$type": "color", + "$value": "#639cff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-300}", + "group": "branding", + "key": "{color.vagrant.gradient.primary.start}" + }, + "name": "token-color-vagrant-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "primary", + "start" + ] + }, + "token-color-vagrant-gradient-primary-stop": { + "key": "{color.vagrant.gradient.primary.stop}", + "$type": "color", + "$value": "#2e71e5", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-400}", + "group": "branding", + "key": "{color.vagrant.gradient.primary.stop}" + }, + "name": "token-color-vagrant-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "primary", + "stop" + ] + }, + "token-color-vagrant-gradient-faint-start": { + "key": "{color.vagrant.gradient.faint.start}", + "$type": "color", + "$value": "#f4faff", + "group": "branding", + "comment": "this is the 'vagrant-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#f4faff", + "group": "branding", + "comment": "this is the 'vagrant-50' value at 25% opacity on white", + "key": "{color.vagrant.gradient.faint.start}" + }, + "name": "token-color-vagrant-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "faint", + "start" + ] + }, + "token-color-vagrant-gradient-faint-stop": { + "key": "{color.vagrant.gradient.faint.stop}", + "$type": "color", + "$value": "#d6ebff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-50}", + "group": "branding", + "key": "{color.vagrant.gradient.faint.stop}" + }, + "name": "token-color-vagrant-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "faint", + "stop" + ] + }, + "token-color-vault-radar-brand": { + "key": "{color.vault-radar.brand}", + "$type": "color", + "$value": "#ffcf25", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-brand}", + "group": "branding", + "key": "{color.vault-radar.brand}" + }, + "name": "token-color-vault-radar-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "brand" + ] + }, + "token-color-vault-radar-brand-alt": { + "key": "{color.vault-radar.brand-alt}", + "$type": "color", + "$value": "#ffffff", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work", + "original": { + "$type": "color", + "$value": "#FFF", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work", + "key": "{color.vault-radar.brand-alt}" + }, + "name": "token-color-vault-radar-brand-alt", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "brand-alt" + ] + }, + "token-color-vault-radar-foreground": { + "key": "{color.vault-radar.foreground}", + "$type": "color", + "$value": "#9a6f00", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-500}", + "group": "branding", + "key": "{color.vault-radar.foreground}" + }, + "name": "token-color-vault-radar-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "foreground" + ] + }, + "token-color-vault-radar-surface": { + "key": "{color.vault-radar.surface}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-50}", + "group": "branding", + "key": "{color.vault-radar.surface}" + }, + "name": "token-color-vault-radar-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "surface" + ] + }, + "token-color-vault-radar-border": { + "key": "{color.vault-radar.border}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-100}", + "group": "branding", + "key": "{color.vault-radar.border}" + }, + "name": "token-color-vault-radar-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "border" + ] + }, + "token-color-vault-radar-gradient-primary-start": { + "key": "{color.vault-radar.gradient.primary.start}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-100}", + "group": "branding", + "key": "{color.vault-radar.gradient.primary.start}" + }, + "name": "token-color-vault-radar-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "primary", + "start" + ] + }, + "token-color-vault-radar-gradient-primary-stop": { + "key": "{color.vault-radar.gradient.primary.stop}", + "$type": "color", + "$value": "#ffe543", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-200}", + "group": "branding", + "key": "{color.vault-radar.gradient.primary.stop}" + }, + "name": "token-color-vault-radar-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "primary", + "stop" + ] + }, + "token-color-vault-radar-gradient-faint-start": { + "key": "{color.vault-radar.gradient.faint.start}", + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-radar-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-radar-50' value at 25% opacity on white", + "key": "{color.vault-radar.gradient.faint.start}" + }, + "name": "token-color-vault-radar-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "faint", + "start" + ] + }, + "token-color-vault-radar-gradient-faint-stop": { + "key": "{color.vault-radar.gradient.faint.stop}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-50}", + "group": "branding", + "key": "{color.vault-radar.gradient.faint.stop}" + }, + "name": "token-color-vault-radar-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "faint", + "stop" + ] + }, + "token-color-vault-secrets-brand": { + "key": "{color.vault-secrets.brand}", + "$type": "color", + "$value": "#ffcf25", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-brand}", + "group": "branding", + "key": "{color.vault-secrets.brand}" + }, + "name": "token-color-vault-secrets-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "brand" + ] + }, + "token-color-vault-secrets-brand-alt": { + "key": "{color.vault-secrets.brand-alt}", + "group": "branding", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work", + "original": { + "group": "branding", + "$type": "color", + "$value": "#FFF", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work", + "key": "{color.vault-secrets.brand-alt}" + }, + "name": "token-color-vault-secrets-brand-alt", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "brand-alt" + ] + }, + "token-color-vault-secrets-foreground": { + "key": "{color.vault-secrets.foreground}", + "$type": "color", + "$value": "#9a6f00", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-500}", + "group": "branding", + "key": "{color.vault-secrets.foreground}" + }, + "name": "token-color-vault-secrets-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "foreground" + ] + }, + "token-color-vault-secrets-surface": { + "key": "{color.vault-secrets.surface}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-50}", + "group": "branding", + "key": "{color.vault-secrets.surface}" + }, + "name": "token-color-vault-secrets-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "surface" + ] + }, + "token-color-vault-secrets-border": { + "key": "{color.vault-secrets.border}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-100}", + "group": "branding", + "key": "{color.vault-secrets.border}" + }, + "name": "token-color-vault-secrets-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "border" + ] + }, + "token-color-vault-secrets-gradient-primary-start": { + "key": "{color.vault-secrets.gradient.primary.start}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-100}", + "group": "branding", + "key": "{color.vault-secrets.gradient.primary.start}" + }, + "name": "token-color-vault-secrets-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "primary", + "start" + ] + }, + "token-color-vault-secrets-gradient-primary-stop": { + "key": "{color.vault-secrets.gradient.primary.stop}", + "$type": "color", + "$value": "#ffe543", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-200}", + "group": "branding", + "key": "{color.vault-secrets.gradient.primary.stop}" + }, + "name": "token-color-vault-secrets-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "primary", + "stop" + ] + }, + "token-color-vault-secrets-gradient-faint-start": { + "key": "{color.vault-secrets.gradient.faint.start}", + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-secrets-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-secrets-50' value at 25% opacity on white", + "key": "{color.vault-secrets.gradient.faint.start}" + }, + "name": "token-color-vault-secrets-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "faint", + "start" + ] + }, + "token-color-vault-secrets-gradient-faint-stop": { + "key": "{color.vault-secrets.gradient.faint.stop}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-50}", + "group": "branding", + "key": "{color.vault-secrets.gradient.faint.stop}" + }, + "name": "token-color-vault-secrets-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "faint", + "stop" + ] + }, + "token-color-vault-brand": { + "key": "{color.vault.brand}", + "$type": "color", + "$value": "#ffcf25", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-brand}", + "group": "branding", + "key": "{color.vault.brand}" + }, + "name": "token-color-vault-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "brand" + ] + }, + "token-color-vault-brand-alt": { + "key": "{color.vault.brand-alt}", + "$type": "color", + "$value": "#ffffff", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work", + "original": { + "$type": "color", + "$value": "#FFF", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work", + "key": "{color.vault.brand-alt}" + }, + "name": "token-color-vault-brand-alt", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "brand-alt" + ] + }, + "token-color-vault-foreground": { + "key": "{color.vault.foreground}", + "$type": "color", + "$value": "#9a6f00", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-500}", + "group": "branding", + "key": "{color.vault.foreground}" + }, + "name": "token-color-vault-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "foreground" + ] + }, + "token-color-vault-surface": { + "key": "{color.vault.surface}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-50}", + "group": "branding", + "key": "{color.vault.surface}" + }, + "name": "token-color-vault-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "surface" + ] + }, + "token-color-vault-border": { + "key": "{color.vault.border}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-100}", + "group": "branding", + "key": "{color.vault.border}" + }, + "name": "token-color-vault-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "border" + ] + }, + "token-color-vault-gradient-primary-start": { + "key": "{color.vault.gradient.primary.start}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-100}", + "group": "branding", + "key": "{color.vault.gradient.primary.start}" + }, + "name": "token-color-vault-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "primary", + "start" + ] + }, + "token-color-vault-gradient-primary-stop": { + "key": "{color.vault.gradient.primary.stop}", + "$type": "color", + "$value": "#ffe543", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-200}", + "group": "branding", + "key": "{color.vault.gradient.primary.stop}" + }, + "name": "token-color-vault-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "primary", + "stop" + ] + }, + "token-color-vault-gradient-faint-start": { + "key": "{color.vault.gradient.faint.start}", + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-50' value at 25% opacity on white", + "key": "{color.vault.gradient.faint.start}" + }, + "name": "token-color-vault-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "faint", + "start" + ] + }, + "token-color-vault-gradient-faint-stop": { + "key": "{color.vault.gradient.faint.stop}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-50}", + "group": "branding", + "key": "{color.vault.gradient.faint.stop}" + }, + "name": "token-color-vault-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "faint", + "stop" + ] + }, + "token-color-waypoint-brand": { + "key": "{color.waypoint.brand}", + "$type": "color", + "$value": "#14c6cb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-brand}", + "group": "branding", + "key": "{color.waypoint.brand}" + }, + "name": "token-color-waypoint-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "brand" + ] + }, + "token-color-waypoint-foreground": { + "key": "{color.waypoint.foreground}", + "$type": "color", + "$value": "#008196", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-500}", + "group": "branding", + "key": "{color.waypoint.foreground}" + }, + "name": "token-color-waypoint-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "foreground" + ] + }, + "token-color-waypoint-surface": { + "key": "{color.waypoint.surface}", + "$type": "color", + "$value": "#e0fcff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-50}", + "group": "branding", + "key": "{color.waypoint.surface}" + }, + "name": "token-color-waypoint-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "surface" + ] + }, + "token-color-waypoint-border": { + "key": "{color.waypoint.border}", + "$type": "color", + "$value": "#cbf1f3", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-100}", + "group": "branding", + "key": "{color.waypoint.border}" + }, + "name": "token-color-waypoint-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "border" + ] + }, + "token-color-waypoint-gradient-primary-start": { + "key": "{color.waypoint.gradient.primary.start}", + "$type": "color", + "$value": "#cbf1f3", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-100}", + "group": "branding", + "key": "{color.waypoint.gradient.primary.start}" + }, + "name": "token-color-waypoint-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "primary", + "start" + ] + }, + "token-color-waypoint-gradient-primary-stop": { + "key": "{color.waypoint.gradient.primary.stop}", + "$type": "color", + "$value": "#62d4dc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-200}", + "group": "branding", + "key": "{color.waypoint.gradient.primary.stop}" + }, + "name": "token-color-waypoint-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "primary", + "stop" + ] + }, + "token-color-waypoint-gradient-faint-start": { + "key": "{color.waypoint.gradient.faint.start}", + "$type": "color", + "$value": "#f6feff", + "group": "branding", + "comment": "this is the 'waypoint-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#f6feff", + "group": "branding", + "comment": "this is the 'waypoint-50' value at 25% opacity on white", + "key": "{color.waypoint.gradient.faint.start}" + }, + "name": "token-color-waypoint-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "faint", + "start" + ] + }, + "token-color-waypoint-gradient-faint-stop": { + "key": "{color.waypoint.gradient.faint.stop}", + "$type": "color", + "$value": "#e0fcff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-50}", + "group": "branding", + "key": "{color.waypoint.gradient.faint.stop}" + }, + "name": "token-color-waypoint-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "faint", + "stop" + ] + }, + "token-elevation-inset-box-shadow": { + "key": "{elevation.inset.box-shadow}", + "$value": "none", + "$modes": { + "default": "inset 0px 1px 2px 1px #5252521a", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.inset.box-shadow-01}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.inset.box-shadow}" + }, + "name": "token-elevation-inset-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "inset", + "box-shadow" + ] + }, + "token-elevation-low-box-shadow": { + "key": "{elevation.low.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 1px 1px 0px #5252520d, 0px 2px 2px 0px #5252520d", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.low.box-shadow-01}, {elevation.low.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.low.box-shadow}" + }, + "name": "token-elevation-low-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "low", + "box-shadow" + ] + }, + "token-elevation-mid-box-shadow": { + "key": "{elevation.mid.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #5252521a, 0px 8px 16px -10px #52525233", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.mid.box-shadow-01}, {elevation.mid.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.mid.box-shadow}" + }, + "name": "token-elevation-mid-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "mid", + "box-shadow" + ] + }, + "token-elevation-high-box-shadow": { + "key": "{elevation.high.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #52525226, 0px 16px 16px -10px #52525233", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.high.box-shadow-01}, {elevation.high.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.high.box-shadow}" + }, + "name": "token-elevation-high-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "high", + "box-shadow" + ] + }, + "token-elevation-higher-box-shadow": { + "key": "{elevation.higher.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #5252521a, 0px 12px 28px 0px #52525240", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.higher.box-shadow-01}, {elevation.higher.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.higher.box-shadow}" + }, + "name": "token-elevation-higher-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "higher", + "box-shadow" + ] + }, + "token-elevation-overlay-box-shadow": { + "key": "{elevation.overlay.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #39393940, 0px 12px 24px 0px #39393959", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.overlay.box-shadow-01}, {elevation.overlay.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.overlay.box-shadow}" + }, + "name": "token-elevation-overlay-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "overlay", + "box-shadow" + ] + }, + "token-surface-inset-box-shadow": { + "key": "{surface.inset.box-shadow}", + "$value": "none", + "$modes": { + "default": "inset 0 0 0 1px #5252524d, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.inset.box-shadow-border}, {elevation.inset.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.inset.box-shadow}" + }, + "name": "token-surface-inset-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "inset", + "box-shadow" + ] + }, + "token-surface-base-box-shadow": { + "key": "{surface.base.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525233", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.base.box-shadow-border}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.base.box-shadow}" + }, + "name": "token-surface-base-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "base", + "box-shadow" + ] + }, + "token-surface-low-box-shadow": { + "key": "{surface.low.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525226, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.low.box-shadow-border}, {elevation.low.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.low.box-shadow}" + }, + "name": "token-surface-low-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "low", + "box-shadow" + ] + }, + "token-surface-mid-box-shadow": { + "key": "{surface.mid.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525226, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.mid.box-shadow-border}, {elevation.mid.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.mid.box-shadow}" + }, + "name": "token-surface-mid-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "mid", + "box-shadow" + ] + }, + "token-surface-high-box-shadow": { + "key": "{surface.high.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525240, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.high.box-shadow-border}, {elevation.high.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.high.box-shadow}" + }, + "name": "token-surface-high-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "high", + "box-shadow" + ] + }, + "token-surface-higher-box-shadow": { + "key": "{surface.higher.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525233, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.higher.box-shadow-border}, {elevation.higher.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.higher.box-shadow}" + }, + "name": "token-surface-higher-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "higher", + "box-shadow" + ] + }, + "token-surface-overlay-box-shadow": { + "key": "{surface.overlay.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #39393940, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.overlay.box-shadow-border}, {elevation.overlay.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.overlay.box-shadow}" + }, + "name": "token-surface-overlay-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "overlay", + "box-shadow" + ] + }, + "token-focus-ring-action-box-shadow": { + "key": "{focus-ring.action.box-shadow}", + "$value": "inset 0 0 0 1px #161616, 0 0 0 3px #ffffff", + "original": { + "$value": "{focus-ring.action.internal-box-shadow}, {focus-ring.action.external-box-shadow}", + "key": "{focus-ring.action.box-shadow}" + }, + "name": "token-focus-ring-action-box-shadow", + "attributes": { + "category": "focus-ring" + }, + "path": [ + "focus-ring", + "action", + "box-shadow" + ] + }, + "token-focus-ring-critical-box-shadow": { + "key": "{focus-ring.critical.box-shadow}", + "$value": "inset 0 0 0 1px #161616, 0 0 0 3px #ffffff", + "original": { + "$value": "{focus-ring.critical.internal-box-shadow}, {focus-ring.critical.external-box-shadow}", + "key": "{focus-ring.critical.box-shadow}" + }, + "name": "token-focus-ring-critical-box-shadow", + "attributes": { + "category": "focus-ring" + }, + "path": [ + "focus-ring", + "critical", + "box-shadow" + ] + }, + "token-app-footer-focus-color-action-internal": { + "key": "{app-footer.focus.color.action.internal}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "var(--token-color-focus-action-internal)", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.focus}", + "$modes": { + "default": "var(--token-color-focus-action-internal)", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{app-footer.focus.color.action.internal}" + }, + "name": "token-app-footer-focus-color-action-internal", + "attributes": { + "category": "app-footer" + }, + "path": [ + "app-footer", + "focus", + "color", + "action", + "internal" + ] + }, + "token-app-header-height": { + "key": "{app-header.height}", + "$type": "dimension", + "$value": "60px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "60", + "unit": "px", + "key": "{app-header.height}" + }, + "name": "token-app-header-height", + "attributes": { + "category": "app-header" + }, + "path": [ + "app-header", + "height" + ] + }, + "token-app-header-home-link-size": { + "key": "{app-header.home-link.size}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{app-header.home-link.size}" + }, + "name": "token-app-header-home-link-size", + "attributes": { + "category": "app-header" + }, + "path": [ + "app-header", + "home-link", + "size" + ] + }, + "token-app-header-logo-size": { + "key": "{app-header.logo.size}", + "$type": "dimension", + "$value": "28px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "28", + "unit": "px", + "key": "{app-header.logo.size}" + }, + "name": "token-app-header-logo-size", + "attributes": { + "category": "app-header" + }, + "path": [ + "app-header", + "logo", + "size" + ] + }, + "token-app-side-nav-wrapper-border-width": { + "key": "{app-side-nav.wrapper.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{app-side-nav.wrapper.border.width}" + }, + "name": "token-app-side-nav-wrapper-border-width", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "border", + "width" + ] + }, + "token-app-side-nav-wrapper-border-color": { + "key": "{app-side-nav.wrapper.border.color}", + "$type": "color", + "$value": "var(--token-color-palette-neutral-200)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-palette-neutral-200)", + "group": "components", + "key": "{app-side-nav.wrapper.border.color}" + }, + "name": "token-app-side-nav-wrapper-border-color", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "border", + "color" + ] + }, + "token-app-side-nav-wrapper-padding-horizontal": { + "key": "{app-side-nav.wrapper.padding.horizontal}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.horizontal}" + }, + "name": "token-app-side-nav-wrapper-padding-horizontal", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "horizontal" + ] + }, + "token-app-side-nav-wrapper-padding-vertical": { + "key": "{app-side-nav.wrapper.padding.vertical}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.vertical}" + }, + "name": "token-app-side-nav-wrapper-padding-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "vertical" + ] + }, + "token-app-side-nav-wrapper-padding-horizontal-minimized": { + "key": "{app-side-nav.wrapper.padding.horizontal-minimized}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.horizontal-minimized}" + }, + "name": "token-app-side-nav-wrapper-padding-horizontal-minimized", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "horizontal-minimized" + ] + }, + "token-app-side-nav-wrapper-padding-vertical-minimized": { + "key": "{app-side-nav.wrapper.padding.vertical-minimized}", + "$type": "dimension", + "$value": "22px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "22", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.vertical-minimized}" + }, + "name": "token-app-side-nav-wrapper-padding-vertical-minimized", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "vertical-minimized" + ] + }, + "token-app-side-nav-toggle-button-border-radius": { + "key": "{app-side-nav.toggle-button.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{app-side-nav.toggle-button.border.radius}" + }, + "name": "token-app-side-nav-toggle-button-border-radius", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "toggle-button", + "border", + "radius" + ] + }, + "token-app-side-nav-header-home-link-padding": { + "key": "{app-side-nav.header.home-link.padding}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{app-side-nav.header.home-link.padding}" + }, + "name": "token-app-side-nav-header-home-link-padding", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "home-link", + "padding" + ] + }, + "token-app-side-nav-header-home-link-logo-size": { + "key": "{app-side-nav.header.home-link.logo-size}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{app-side-nav.header.home-link.logo-size}" + }, + "name": "token-app-side-nav-header-home-link-logo-size", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "home-link", + "logo-size" + ] + }, + "token-app-side-nav-header-home-link-logo-size-minimized": { + "key": "{app-side-nav.header.home-link.logo-size-minimized}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{app-side-nav.header.home-link.logo-size-minimized}" + }, + "name": "token-app-side-nav-header-home-link-logo-size-minimized", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "home-link", + "logo-size-minimized" + ] + }, + "token-app-side-nav-header-actions-spacing": { + "key": "{app-side-nav.header.actions.spacing}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.header.actions.spacing}" + }, + "name": "token-app-side-nav-header-actions-spacing", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "actions", + "spacing" + ] + }, + "token-app-side-nav-body-list-margin-vertical": { + "key": "{app-side-nav.body.list.margin-vertical}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{app-side-nav.body.list.margin-vertical}" + }, + "name": "token-app-side-nav-body-list-margin-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list", + "margin-vertical" + ] + }, + "token-app-side-nav-body-list-item-height": { + "key": "{app-side-nav.body.list-item.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{app-side-nav.body.list-item.height}" + }, + "name": "token-app-side-nav-body-list-item-height", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "height" + ] + }, + "token-app-side-nav-body-list-item-padding-horizontal": { + "key": "{app-side-nav.body.list-item.padding.horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.body.list-item.padding.horizontal}" + }, + "name": "token-app-side-nav-body-list-item-padding-horizontal", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "padding", + "horizontal" + ] + }, + "token-app-side-nav-body-list-item-padding-vertical": { + "key": "{app-side-nav.body.list-item.padding.vertical}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{app-side-nav.body.list-item.padding.vertical}" + }, + "name": "token-app-side-nav-body-list-item-padding-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "padding", + "vertical" + ] + }, + "token-app-side-nav-body-list-item-spacing-vertical": { + "key": "{app-side-nav.body.list-item.spacing-vertical}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{app-side-nav.body.list-item.spacing-vertical}" + }, + "name": "token-app-side-nav-body-list-item-spacing-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "spacing-vertical" + ] + }, + "token-app-side-nav-body-list-item-content-spacing-horizontal": { + "key": "{app-side-nav.body.list-item.content-spacing-horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.body.list-item.content-spacing-horizontal}" + }, + "name": "token-app-side-nav-body-list-item-content-spacing-horizontal", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "content-spacing-horizontal" + ] + }, + "token-app-side-nav-body-list-item-border-radius": { + "key": "{app-side-nav.body.list-item.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{app-side-nav.body.list-item.border-radius}" + }, + "name": "token-app-side-nav-body-list-item-border-radius", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "border-radius" + ] + }, + "token-app-side-nav-color-foreground-primary": { + "key": "{app-side-nav.color.foreground.primary}", + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "key": "{app-side-nav.color.foreground.primary}" + }, + "name": "token-app-side-nav-color-foreground-primary", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "foreground", + "primary" + ] + }, + "token-app-side-nav-color-foreground-strong": { + "key": "{app-side-nav.color.foreground.strong}", + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "key": "{app-side-nav.color.foreground.strong}" + }, + "name": "token-app-side-nav-color-foreground-strong", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "foreground", + "strong" + ] + }, + "token-app-side-nav-color-foreground-faint": { + "key": "{app-side-nav.color.foreground.faint}", + "$type": "color", + "$value": "var(--token-color-foreground-faint)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-foreground-faint)", + "group": "components", + "key": "{app-side-nav.color.foreground.faint}" + }, + "name": "token-app-side-nav-color-foreground-faint", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "foreground", + "faint" + ] + }, + "token-app-side-nav-color-surface-primary": { + "key": "{app-side-nav.color.surface.primary}", + "$type": "color", + "$value": "var(--token-color-surface-faint)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-surface-faint)", + "group": "components", + "key": "{app-side-nav.color.surface.primary}" + }, + "name": "token-app-side-nav-color-surface-primary", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "surface", + "primary" + ] + }, + "token-app-side-nav-color-surface-interactive-hover": { + "key": "{app-side-nav.color.surface.interactive-hover}", + "$type": "color", + "$value": "var(--token-color-surface-interactive-hover)", + "group": "semantic", + "original": { + "$type": "color", + "$value": "var(--token-color-surface-interactive-hover)", + "group": "semantic", + "key": "{app-side-nav.color.surface.interactive-hover}" + }, + "name": "token-app-side-nav-color-surface-interactive-hover", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "surface", + "interactive-hover" + ] + }, + "token-app-side-nav-color-surface-interactive-active": { + "key": "{app-side-nav.color.surface.interactive-active}", + "$type": "color", + "$value": "var(--token-color-palette-neutral-300)", + "group": "semantic", + "original": { + "$type": "color", + "$value": "var(--token-color-palette-neutral-300)", + "group": "semantic", + "key": "{app-side-nav.color.surface.interactive-active}" + }, + "name": "token-app-side-nav-color-surface-interactive-active", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "surface", + "interactive-active" + ] + }, + "token-badge-count-padding-horizontal-small": { + "key": "{badge-count.padding.horizontal.small}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge-count.padding.horizontal.small}" + }, + "name": "token-badge-count-padding-horizontal-small", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "small" + ] + }, + "token-badge-count-padding-horizontal-medium": { + "key": "{badge-count.padding.horizontal.medium}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge-count.padding.horizontal.medium}" + }, + "name": "token-badge-count-padding-horizontal-medium", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "medium" + ] + }, + "token-badge-count-padding-horizontal-large": { + "key": "{badge-count.padding.horizontal.large}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge-count.padding.horizontal.large}" + }, + "name": "token-badge-count-padding-horizontal-large", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "large" + ] + }, + "token-badge-height-small": { + "key": "{badge.height.small}", + "$type": "dimension", + "$value": "18px", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "18", + "cds-g10": "18", + "cds-g90": "18", + "cds-g100": "18" + }, + "original": { + "$type": "dimension", + "$value": "18", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "18", + "cds-g10": "18", + "cds-g90": "18", + "cds-g100": "18" + }, + "key": "{badge.height.small}" + }, + "name": "token-badge-height-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "small" + ] + }, + "token-badge-height-medium": { + "key": "{badge.height.medium}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{badge.height.medium}" + }, + "name": "token-badge-height-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "medium" + ] + }, + "token-badge-height-large": { + "key": "{badge.height.large}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{badge.height.large}" + }, + "name": "token-badge-height-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "large" + ] + }, + "token-badge-padding-horizontal-small": { + "key": "{badge.padding.horizontal.small}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge.padding.horizontal.small}" + }, + "name": "token-badge-padding-horizontal-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "small" + ] + }, + "token-badge-padding-horizontal-medium": { + "key": "{badge.padding.horizontal.medium}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge.padding.horizontal.medium}" + }, + "name": "token-badge-padding-horizontal-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "medium" + ] + }, + "token-badge-padding-horizontal-large": { + "key": "{badge.padding.horizontal.large}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.padding.horizontal.large}" + }, + "name": "token-badge-padding-horizontal-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "large" + ] + }, + "token-badge-padding-vertical-small": { + "key": "{badge.padding.vertical.small}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "$modes": { + "default": "2", + "cds-g0": "1", + "cds-g10": "1", + "cds-g90": "1", + "cds-g100": "1" + }, + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "$modes": { + "default": "2", + "cds-g0": "1", + "cds-g10": "1", + "cds-g90": "1", + "cds-g100": "1" + }, + "key": "{badge.padding.vertical.small}" + }, + "name": "token-badge-padding-vertical-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "small" + ] + }, + "token-badge-padding-vertical-medium": { + "key": "{badge.padding.vertical.medium}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{badge.padding.vertical.medium}" + }, + "name": "token-badge-padding-vertical-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "medium" + ] + }, + "token-badge-padding-vertical-large": { + "key": "{badge.padding.vertical.large}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{badge.padding.vertical.large}" + }, + "name": "token-badge-padding-vertical-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "large" + ] + }, + "token-badge-gap-small": { + "key": "{badge.gap.small}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.small}" + }, + "name": "token-badge-gap-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "small" + ] + }, + "token-badge-gap-medium": { + "key": "{badge.gap.medium}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.medium}" + }, + "name": "token-badge-gap-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "medium" + ] + }, + "token-badge-gap-large": { + "key": "{badge.gap.large}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.large}" + }, + "name": "token-badge-gap-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "large" + ] + }, + "token-badge-typography-font-size-small": { + "key": "{badge.typography.font-size.small}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "12", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.small}" + }, + "name": "token-badge-typography-font-size-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "small" + ] + }, + "token-badge-typography-font-size-medium": { + "key": "{badge.typography.font-size.medium}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "12", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.medium}" + }, + "name": "token-badge-typography-font-size-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "medium" + ] + }, + "token-badge-typography-font-size-large": { + "key": "{badge.typography.font-size.large}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "12", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.large}" + }, + "name": "token-badge-typography-font-size-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "large" + ] + }, + "token-badge-typography-line-height-small": { + "key": "{badge.typography.line-height.small}", + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "original": { + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "key": "{badge.typography.line-height.small}" + }, + "name": "token-badge-typography-line-height-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "small" + ] + }, + "token-badge-typography-line-height-medium": { + "key": "{badge.typography.line-height.medium}", + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "original": { + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "key": "{badge.typography.line-height.medium}" + }, + "name": "token-badge-typography-line-height-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "medium" + ] + }, + "token-badge-typography-line-height-large": { + "key": "{badge.typography.line-height.large}", + "$type": "number", + "$value": 1, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1, + "cds-g10": 1, + "cds-g90": 1, + "cds-g100": 1 + }, + "original": { + "$type": "number", + "$value": 1, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1, + "cds-g10": 1, + "cds-g90": 1, + "cds-g100": 1 + }, + "key": "{badge.typography.line-height.large}" + }, + "name": "token-badge-typography-line-height-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "large" + ] + }, + "token-badge-foreground-color-neutral-filled": { + "key": "{badge.foreground.color.neutral.filled}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g100}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral.filled}" + }, + "name": "token-badge-foreground-color-neutral-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "filled" + ] + }, + "token-badge-foreground-color-neutral-inverted": { + "key": "{badge.foreground.color.neutral.inverted}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.100}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.color.gray.20}", + "cds-g10": "{carbon.color.gray.20}", + "cds-g90": "{carbon.color.gray.100}", + "cds-g100": "{carbon.color.gray.100}" + }, + "key": "{badge.foreground.color.neutral.inverted}" + }, + "name": "token-badge-foreground-color-neutral-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "inverted" + ] + }, + "token-badge-foreground-color-neutral-outlined": { + "key": "{badge.foreground.color.neutral.outlined}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g100}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral.outlined}" + }, + "name": "token-badge-foreground-color-neutral-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "outlined" + ] + }, + "token-badge-foreground-color-neutral-dark-mode-filled": { + "key": "{badge.foreground.color.neutral-dark-mode.filled}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.neutral-dark-mode.filled}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "filled" + ] + }, + "token-badge-foreground-color-neutral-dark-mode-inverted": { + "key": "{badge.foreground.color.neutral-dark-mode.inverted}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g100}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral-dark-mode.inverted}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "inverted" + ] + }, + "token-badge-foreground-color-neutral-dark-mode-outlined": { + "key": "{badge.foreground.color.neutral-dark-mode.outlined}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "comments": { + "cds": "In Figma the `cds` value uses a token `Tag/HighContrast/TagColor` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "comments": { + "cds": "In Figma the `cds` value uses a token `Tag/HighContrast/TagColor` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.neutral-dark-mode.outlined}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "outlined" + ] + }, + "token-badge-foreground-color-highlight-filled": { + "key": "{badge.foreground.color.highlight.filled}", + "$type": "color", + "$value": "#e8daff", + "comment": "we don't use `highlight-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#6929c4", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorPurple.g100}", + "comment": "we don't use `highlight-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.purple-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorPurple.g100}" + }, + "key": "{badge.foreground.color.highlight.filled}" + }, + "name": "token-badge-foreground-color-highlight-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "filled" + ] + }, + "token-badge-foreground-color-highlight-inverted": { + "key": "{badge.foreground.color.highlight.inverted}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.highlight.inverted}" + }, + "name": "token-badge-foreground-color-highlight-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "inverted" + ] + }, + "token-badge-foreground-color-highlight-outlined": { + "key": "{badge.foreground.color.highlight.outlined}", + "$type": "color", + "$value": "#e8daff", + "$modes": { + "default": "#be95ff", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorPurple.g100}", + "$modes": { + "default": "{color.foreground.highlight}", + "cds-g0": "{carbon.themes.tagTokens.tagColorPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorPurple.g100}" + }, + "key": "{badge.foreground.color.highlight.outlined}" + }, + "name": "token-badge-foreground-color-highlight-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "outlined" + ] + }, + "token-badge-foreground-color-success-filled": { + "key": "{badge.foreground.color.success.filled}", + "$type": "color", + "$value": "#a7f0ba", + "comment": "we don't use `success-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#0e6027", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGreen.g100}", + "comment": "we don't use `success-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.green-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.foreground.color.success.filled}" + }, + "name": "token-badge-foreground-color-success-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "filled" + ] + }, + "token-badge-foreground-color-success-inverted": { + "key": "{badge.foreground.color.success.inverted}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.success.inverted}" + }, + "name": "token-badge-foreground-color-success-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "inverted" + ] + }, + "token-badge-foreground-color-success-outlined": { + "key": "{badge.foreground.color.success.outlined}", + "$type": "color", + "$value": "#a7f0ba", + "$modes": { + "default": "#42be65", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGreen.g100}", + "$modes": { + "default": "{color.foreground.success}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.foreground.color.success.outlined}" + }, + "name": "token-badge-foreground-color-success-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "outlined" + ] + }, + "token-badge-foreground-color-warning-filled": { + "key": "{badge.foreground.color.warning.filled}", + "$type": "color", + "$value": "#ffd9be", + "$modes": { + "default": "#5e2900", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "hds": "we don't use `warning-on-surface` for accessibility (better contrast)", + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.20}", + "$modes": { + "default": "{color.palette.amber-400}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "hds": "we don't use `warning-on-surface` for accessibility (better contrast)", + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.warning.filled}" + }, + "name": "token-badge-foreground-color-warning-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "filled" + ] + }, + "token-badge-foreground-color-warning-inverted": { + "key": "{badge.foreground.color.warning.inverted}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.warning.inverted}" + }, + "name": "token-badge-foreground-color-warning-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "inverted" + ] + }, + "token-badge-foreground-color-warning-outlined": { + "key": "{badge.foreground.color.warning.outlined}", + "$type": "color", + "$value": "#ffd9be", + "$modes": { + "default": "#d2a106", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.20}", + "$modes": { + "default": "{color.foreground.warning}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.warning.outlined}" + }, + "name": "token-badge-foreground-color-warning-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "outlined" + ] + }, + "token-badge-foreground-color-critical-filled": { + "key": "{badge.foreground.color.critical.filled}", + "$type": "color", + "$value": "#ffd7d9", + "comment": "we don't use `critical-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#750e13", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorRed.g100}", + "comment": "we don't use `critical-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.foreground.color.critical.filled}" + }, + "name": "token-badge-foreground-color-critical-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "filled" + ] + }, + "token-badge-foreground-color-critical-inverted": { + "key": "{badge.foreground.color.critical.inverted}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.critical.inverted}" + }, + "name": "token-badge-foreground-color-critical-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "inverted" + ] + }, + "token-badge-foreground-color-critical-outlined": { + "key": "{badge.foreground.color.critical.outlined}", + "$type": "color", + "$value": "#ffd7d9", + "$modes": { + "default": "#ff8389", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorRed.g100}", + "$modes": { + "default": "{color.foreground.critical}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.foreground.color.critical.outlined}" + }, + "name": "token-badge-foreground-color-critical-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "outlined" + ] + }, + "token-badge-surface-color-neutral-filled": { + "key": "{badge.surface.color.neutral.filled}", + "$type": "color", + "$value": "#525252", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGray.g100}", + "$modes": { + "default": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{badge.surface.color.neutral.filled}" + }, + "name": "token-badge-surface-color-neutral-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "filled" + ] + }, + "token-badge-surface-color-neutral-inverted": { + "key": "{badge.surface.color.neutral.inverted}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#525252", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead", + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.backgroundInverse}", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead", + "key": "{badge.surface.color.neutral.inverted}" + }, + "name": "token-badge-surface-color-neutral-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "inverted" + ] + }, + "token-badge-surface-color-neutral-outlined": { + "key": "{badge.surface.color.neutral.outlined}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{badge.surface.color.neutral.outlined}" + }, + "name": "token-badge-surface-color-neutral-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "outlined" + ] + }, + "token-badge-surface-color-neutral-dark-mode-filled": { + "key": "{badge.surface.color.neutral-dark-mode.filled}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#525252", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component", + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.backgroundInverse}", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component", + "key": "{badge.surface.color.neutral-dark-mode.filled}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "filled" + ] + }, + "token-badge-surface-color-neutral-dark-mode-inverted": { + "key": "{badge.surface.color.neutral-dark-mode.inverted}", + "$type": "color", + "$value": "#525252", + "$modes": { + "default": "#262626", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGray.g100}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{badge.surface.color.neutral-dark-mode.inverted}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "inverted" + ] + }, + "token-badge-surface-color-neutral-dark-mode-outlined": { + "key": "{badge.surface.color.neutral-dark-mode.outlined}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{badge.surface.color.neutral-dark-mode.outlined}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "outlined" + ] + }, + "token-badge-surface-color-highlight-filled": { + "key": "{badge.surface.color.highlight.filled}", + "$type": "color", + "$value": "#6929c4", + "comment": "we don't use `surface-highlight` for accessibility (better contrast)", + "$modes": { + "default": "#e8daff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundPurple.g100}", + "comment": "we don't use `surface-highlight` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.purple-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundPurple.g100}" + }, + "key": "{badge.surface.color.highlight.filled}" + }, + "name": "token-badge-surface-color-highlight-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "highlight", + "filled" + ] + }, + "token-badge-surface-color-highlight-inverted": { + "key": "{badge.surface.color.highlight.inverted}", + "$type": "color", + "$value": "#be95ff", + "$modes": { + "default": "#a56eff", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.40}", + "$modes": { + "default": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, + "key": "{badge.surface.color.highlight.inverted}" + }, + "name": "token-badge-surface-color-highlight-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "highlight", + "inverted" + ] + }, + "token-badge-surface-color-success-filled": { + "key": "{badge.surface.color.success.filled}", + "$type": "color", + "$value": "#0e6027", + "comment": "we don't use `surface-success` for accessibility (better contrast)", + "$modes": { + "default": "#a7f0ba", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGreen.g100}", + "comment": "we don't use `surface-success` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.green-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGreen.g100}" + }, + "key": "{badge.surface.color.success.filled}" + }, + "name": "token-badge-surface-color-success-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "success", + "filled" + ] + }, + "token-badge-surface-color-success-inverted": { + "key": "{badge.surface.color.success.inverted}", + "$type": "color", + "$value": "#a7f0ba", + "$modes": { + "default": "#24a148", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGreen.g100}", + "$modes": { + "default": "{color.palette.green-200}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.surface.color.success.inverted}" + }, + "name": "token-badge-surface-color-success-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "success", + "inverted" + ] + }, + "token-badge-surface-color-warning-filled": { + "key": "{badge.surface.color.warning.filled}", + "$type": "color", + "$value": "#8a3800", + "comment": "we don't use `surface-warning` for accessibility (better contrast)", + "$modes": { + "default": "#ffd9be", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.70}", + "comment": "we don't use `surface-warning` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.surface.color.warning.filled}" + }, + "name": "token-badge-surface-color-warning-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "warning", + "filled" + ] + }, + "token-badge-surface-color-warning-inverted": { + "key": "{badge.surface.color.warning.inverted}", + "$type": "color", + "$value": "#ffd9be", + "$modes": { + "default": "#ba4e00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.20}", + "$modes": { + "default": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.surface.color.warning.inverted}" + }, + "name": "token-badge-surface-color-warning-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "warning", + "inverted" + ] + }, + "token-badge-surface-color-critical-filled": { + "key": "{badge.surface.color.critical.filled}", + "$type": "color", + "$value": "#a2191f", + "comment": "we don't use `surface-critical` for accessibility (better contrast)", + "$modes": { + "default": "#ffd7d9", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundRed.g100}", + "comment": "we don't use `surface-critical` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.red-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundRed.g100}" + }, + "key": "{badge.surface.color.critical.filled}" + }, + "name": "token-badge-surface-color-critical-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "critical", + "filled" + ] + }, + "token-badge-surface-color-critical-inverted": { + "key": "{badge.surface.color.critical.inverted}", + "$type": "color", + "$value": "#ffd7d9", + "$modes": { + "default": "#da1e28", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorRed.g100}", + "$modes": { + "default": "{color.palette.red-200}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.surface.color.critical.inverted}" + }, + "name": "token-badge-surface-color-critical-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "critical", + "inverted" + ] + }, + "token-badge-border-radius": { + "key": "{badge.border.radius}", + "$type": "dimension", + "$value": "1000000000px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "1000000000px", + "cds-g10": "1000000000px", + "cds-g90": "1000000000px", + "cds-g100": "1000000000px" + }, + "original": { + "$type": "dimension", + "$value": "{border.radius.rounded}", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "{border.radius.rounded}", + "cds-g10": "{border.radius.rounded}", + "cds-g90": "{border.radius.rounded}", + "cds-g100": "{border.radius.rounded}" + }, + "key": "{badge.border.radius}" + }, + "name": "token-badge-border-radius", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "border", + "radius" + ] + }, + "token-badge-icon-size-small": { + "key": "{badge.icon.size.small}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{badge.icon.size.small}" + }, + "name": "token-badge-icon-size-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "small" + ] + }, + "token-badge-icon-size-medium": { + "key": "{badge.icon.size.medium}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{badge.icon.size.medium}" + }, + "name": "token-badge-icon-size-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "medium" + ] + }, + "token-badge-icon-size-large": { + "key": "{badge.icon.size.large}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{badge.icon.size.large}" + }, + "name": "token-badge-icon-size-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "large" + ] + }, + "token-button-height-small": { + "key": "{button.height.small}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "$modes": { + "default": "28", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "$modes": { + "default": "28", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "key": "{button.height.small}" + }, + "name": "token-button-height-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "small" + ] + }, + "token-button-height-medium": { + "key": "{button.height.medium}", + "$type": "dimension", + "$value": "40px", + "unit": "px", + "$modes": { + "default": "36", + "cds-g0": "40", + "cds-g10": "40", + "cds-g90": "40", + "cds-g100": "40" + }, + "original": { + "$type": "dimension", + "$value": "40", + "unit": "px", + "$modes": { + "default": "36", + "cds-g0": "40", + "cds-g10": "40", + "cds-g90": "40", + "cds-g100": "40" + }, + "key": "{button.height.medium}" + }, + "name": "token-button-height-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "medium" + ] + }, + "token-button-height-large": { + "key": "{button.height.large}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "$modes": { + "default": "48", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "$modes": { + "default": "48", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "key": "{button.height.large}" + }, + "name": "token-button-height-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "large" + ] + }, + "token-button-padding-horizontal-small": { + "key": "{button.padding.horizontal.small}", + "$type": "dimension", + "$value": "15px", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "15", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.small}" + }, + "name": "token-button-padding-horizontal-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "small" + ] + }, + "token-button-padding-horizontal-medium": { + "key": "{button.padding.horizontal.medium}", + "$type": "dimension", + "$value": "15px", + "unit": "px", + "$modes": { + "default": "15", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "15", + "unit": "px", + "$modes": { + "default": "15", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.medium}" + }, + "name": "token-button-padding-horizontal-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "medium" + ] + }, + "token-button-padding-horizontal-large": { + "key": "{button.padding.horizontal.large}", + "$type": "dimension", + "$value": "15px", + "unit": "px", + "$modes": { + "default": "19", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "15", + "unit": "px", + "$modes": { + "default": "19", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.large}" + }, + "name": "token-button-padding-horizontal-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "large" + ] + }, + "token-button-padding-vertical-small": { + "key": "{button.padding.vertical.small}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.small}" + }, + "name": "token-button-padding-vertical-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "small" + ] + }, + "token-button-padding-vertical-medium": { + "key": "{button.padding.vertical.medium}", + "$type": "dimension", + "$value": "10px", + "unit": "px", + "$modes": { + "default": "9", + "cds-g0": "10", + "cds-g10": "10", + "cds-g90": "10", + "cds-g100": "10" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "10", + "unit": "px", + "$modes": { + "default": "9", + "cds-g0": "10", + "cds-g10": "10", + "cds-g90": "10", + "cds-g100": "10" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.medium}" + }, + "name": "token-button-padding-vertical-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "medium" + ] + }, + "token-button-padding-vertical-large": { + "key": "{button.padding.vertical.large}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "14", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.large}" + }, + "name": "token-button-padding-vertical-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "large" + ] + }, + "token-button-gap": { + "key": "{button.gap}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "key": "{button.gap}" + }, + "name": "token-button-gap", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "gap" + ] + }, + "token-button-typography-font-size-small": { + "key": "{button.typography.font-size.small}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.small}" + }, + "name": "token-button-typography-font-size-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "small" + ] + }, + "token-button-typography-font-size-medium": { + "key": "{button.typography.font-size.medium}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.medium}" + }, + "name": "token-button-typography-font-size-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "medium" + ] + }, + "token-button-typography-font-size-large": { + "key": "{button.typography.font-size.large}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.large}" + }, + "name": "token-button-typography-font-size-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "large" + ] + }, + "token-button-typography-line-height-small": { + "key": "{button.typography.line-height.small}", + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)", + "$modes": { + "default": 0.9286, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)", + "$modes": { + "default": 0.9286, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.small}" + }, + "name": "token-button-typography-line-height-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "small" + ] + }, + "token-button-typography-line-height-medium": { + "key": "{button.typography.line-height.medium}", + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 1.1429", + "$modes": { + "default": 1.1429, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 1.1429", + "$modes": { + "default": 1.1429, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.medium}" + }, + "name": "token-button-typography-line-height-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "medium" + ] + }, + "token-button-typography-line-height-large": { + "key": "{button.typography.line-height.large}", + "$type": "number", + "$value": 1.2858, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 1.2858, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.large}" + }, + "name": "token-button-typography-line-height-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "large" + ] + }, + "token-button-foreground-color-primary-default": { + "key": "{button.foreground.color.primary.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.default}" + }, + "name": "token-button-foreground-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "default" + ] + }, + "token-button-foreground-color-primary-hover": { + "key": "{button.foreground.color.primary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.hover}" + }, + "name": "token-button-foreground-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "hover" + ] + }, + "token-button-foreground-color-primary-focus": { + "key": "{button.foreground.color.primary.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.focus}" + }, + "name": "token-button-foreground-color-primary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "focus" + ] + }, + "token-button-foreground-color-primary-active": { + "key": "{button.foreground.color.primary.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.active}" + }, + "name": "token-button-foreground-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "active" + ] + }, + "token-button-foreground-color-secondary-default": { + "key": "{button.foreground.color.secondary.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.default}" + }, + "name": "token-button-foreground-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "default" + ] + }, + "token-button-foreground-color-secondary-hover": { + "key": "{button.foreground.color.secondary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.hover}" + }, + "name": "token-button-foreground-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "hover" + ] + }, + "token-button-foreground-color-secondary-focus": { + "key": "{button.foreground.color.secondary.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.focus}" + }, + "name": "token-button-foreground-color-secondary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "focus" + ] + }, + "token-button-foreground-color-secondary-active": { + "key": "{button.foreground.color.secondary.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.active}" + }, + "name": "token-button-foreground-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "active" + ] + }, + "token-button-foreground-color-tertiary-default": { + "key": "{button.foreground.color.tertiary.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#78a9ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiary.g100}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiary.g100}" + }, + "key": "{button.foreground.color.tertiary.default}" + }, + "name": "token-button-foreground-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "default" + ] + }, + "token-button-foreground-color-tertiary-hover": { + "key": "{button.foreground.color.tertiary.hover}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#a6c8ff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textInverse}", + "$modes": { + "default": "{color.foreground.action-hover}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.hover}" + }, + "name": "token-button-foreground-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "hover" + ] + }, + "token-button-foreground-color-tertiary-focus": { + "key": "{button.foreground.color.tertiary.focus}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#78a9ff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textInverse}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.focus}" + }, + "name": "token-button-foreground-color-tertiary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "focus" + ] + }, + "token-button-foreground-color-tertiary-active": { + "key": "{button.foreground.color.tertiary.active}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#a6c8ff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textInverse}", + "$modes": { + "default": "{color.foreground.action-active}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.active}" + }, + "name": "token-button-foreground-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "active" + ] + }, + "token-button-foreground-color-critical-default": { + "key": "{button.foreground.color.critical.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffb3b8", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textOnColor}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.default}" + }, + "name": "token-button-foreground-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "default" + ] + }, + "token-button-foreground-color-critical-hover": { + "key": "{button.foreground.color.critical.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.hover}" + }, + "name": "token-button-foreground-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "hover" + ] + }, + "token-button-foreground-color-critical-focus": { + "key": "{button.foreground.color.critical.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffb3b8", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textOnColor}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.focus}" + }, + "name": "token-button-foreground-color-critical-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "focus" + ] + }, + "token-button-foreground-color-critical-active": { + "key": "{button.foreground.color.critical.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.active}" + }, + "name": "token-button-foreground-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "active" + ] + }, + "token-button-foreground-color-disabled": { + "key": "{button.foreground.color.disabled}", + "$type": "color", + "$value": "rgba(255, 255, 255, 0.25)", + "$modes": { + "default": "rgba(244, 244, 244, 0.25)", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "rgba(255, 255, 255, 0.25)", + "cds-g100": "rgba(255, 255, 255, 0.25)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textOnColorDisabled}", + "$modes": { + "default": "{color.foreground.disabled}", + "cds-g0": "{carbon.themes.white.textOnColorDisabled}", + "cds-g10": "{carbon.themes.g10.textOnColorDisabled}", + "cds-g90": "{carbon.themes.g90.textOnColorDisabled}", + "cds-g100": "{carbon.themes.g100.textOnColorDisabled}" + }, + "key": "{button.foreground.color.disabled}" + }, + "name": "token-button-foreground-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "disabled" + ] + }, + "token-button-surface-color-primary-default": { + "key": "{button.surface.color.primary.default}", + "$type": "color", + "$value": "#0f62fe", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimary.g100}", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimary.g100}" + }, + "key": "{button.surface.color.primary.default}" + }, + "name": "token-button-surface-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "default" + ] + }, + "token-button-surface-color-primary-hover": { + "key": "{button.surface.color.primary.hover}", + "$type": "color", + "$value": "#0050e6", + "$modes": { + "default": "#0043ce", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#0050e6", + "cds-g100": "#0050e6" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimaryHover.g100}", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimaryHover.g100}" + }, + "key": "{button.surface.color.primary.hover}" + }, + "name": "token-button-surface-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "hover" + ] + }, + "token-button-surface-color-primary-focus": { + "key": "{button.surface.color.primary.focus}", + "$type": "color", + "$value": "#0f62fe", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimary.g100}", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimary.g100}" + }, + "key": "{button.surface.color.primary.focus}" + }, + "name": "token-button-surface-color-primary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "focus" + ] + }, + "token-button-surface-color-primary-active": { + "key": "{button.surface.color.primary.active}", + "$type": "color", + "$value": "#002d9c", + "$modes": { + "default": "#002d9c", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#002d9c", + "cds-g100": "#002d9c" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimaryActive.g100}", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimaryActive.g100}" + }, + "key": "{button.surface.color.primary.active}" + }, + "name": "token-button-surface-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "active" + ] + }, + "token-button-surface-color-secondary-default": { + "key": "{button.surface.color.secondary.default}", + "$type": "color", + "$value": "#6f6f6f", + "$modes": { + "default": "#262626", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#6f6f6f", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondary.g100}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondary.g100}" + }, + "key": "{button.surface.color.secondary.default}" + }, + "name": "token-button-surface-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "default" + ] + }, + "token-button-surface-color-secondary-hover": { + "key": "{button.surface.color.secondary.hover}", + "$type": "color", + "$value": "#5e5e5e", + "$modes": { + "default": "#262626", + "cds-g0": "#474747", + "cds-g10": "#474747", + "cds-g90": "#5e5e5e", + "cds-g100": "#5e5e5e" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondaryHover.g100}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondaryHover.g100}" + }, + "key": "{button.surface.color.secondary.hover}" + }, + "name": "token-button-surface-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "hover" + ] + }, + "token-button-surface-color-secondary-focus": { + "key": "{button.surface.color.secondary.focus}", + "$type": "color", + "$value": "#6f6f6f", + "$modes": { + "default": "#262626", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#6f6f6f", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondary.g100}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondary.g100}" + }, + "key": "{button.surface.color.secondary.focus}" + }, + "name": "token-button-surface-color-secondary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "focus" + ] + }, + "token-button-surface-color-secondary-active": { + "key": "{button.surface.color.secondary.active}", + "$type": "color", + "$value": "#393939", + "$modes": { + "default": "#525252", + "cds-g0": "#6f6f6f", + "cds-g10": "#6f6f6f", + "cds-g90": "#393939", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondaryActive.g100}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondaryActive.g100}" + }, + "key": "{button.surface.color.secondary.active}" + }, + "name": "token-button-surface-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "active" + ] + }, + "token-button-surface-color-tertiary-default": { + "key": "{button.surface.color.tertiary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{button.surface.color.tertiary.default}" + }, + "name": "token-button-surface-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "default" + ] + }, + "token-button-surface-color-tertiary-hover": { + "key": "{button.surface.color.tertiary.hover}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#262626", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiaryHover.g100}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryHover.g100}" + }, + "key": "{button.surface.color.tertiary.hover}" + }, + "name": "token-button-surface-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "hover" + ] + }, + "token-button-surface-color-tertiary-focus": { + "key": "{button.surface.color.tertiary.focus}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "transparent", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiaryHover.g100}", + "$modes": { + "default": "transparent", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryHover.g100}" + }, + "key": "{button.surface.color.tertiary.focus}" + }, + "name": "token-button-surface-color-tertiary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "focus" + ] + }, + "token-button-surface-color-tertiary-active": { + "key": "{button.surface.color.tertiary.active}", + "$type": "color", + "$value": "#c6c6c6", + "$modes": { + "default": "#525252", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiaryActive.g100}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryActive.g100}" + }, + "key": "{button.surface.color.tertiary.active}" + }, + "name": "token-button-surface-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "active" + ] + }, + "token-button-surface-color-critical-default": { + "key": "{button.surface.color.critical.default}", + "$type": "color", + "$value": "#da1e28", + "$modes": { + "default": "#a2191f", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerPrimary.g100}", + "$modes": { + "default": "{color.surface.critical}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerPrimary.g100}" + }, + "key": "{button.surface.color.critical.default}" + }, + "name": "token-button-surface-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "default" + ] + }, + "token-button-surface-color-critical-hover": { + "key": "{button.surface.color.critical.hover}", + "$type": "color", + "$value": "#b81921", + "$modes": { + "default": "#a2191f", + "cds-g0": "#b81921", + "cds-g10": "#b81921", + "cds-g90": "#b81921", + "cds-g100": "#b81921" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerHover.g100}", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerHover.g100}" + }, + "key": "{button.surface.color.critical.hover}" + }, + "name": "token-button-surface-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "hover" + ] + }, + "token-button-surface-color-critical-focus": { + "key": "{button.surface.color.critical.focus}", + "$type": "color", + "$value": "#da1e28", + "$modes": { + "default": "#a2191f", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerPrimary.g100}", + "$modes": { + "default": "{color.surface.critical}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerPrimary.g100}" + }, + "key": "{button.surface.color.critical.focus}" + }, + "name": "token-button-surface-color-critical-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "focus" + ] + }, + "token-button-surface-color-critical-active": { + "key": "{button.surface.color.critical.active}", + "$type": "color", + "$value": "#750e13", + "$modes": { + "default": "#750e13", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#750e13", + "cds-g100": "#750e13" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerActive.g100}", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerActive.g100}" + }, + "key": "{button.surface.color.critical.active}" + }, + "name": "token-button-surface-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "active" + ] + }, + "token-button-surface-color-disabled": { + "key": "{button.surface.color.disabled}", + "$type": "color", + "$value": "#8d8d8d", + "$modes": { + "default": "#262626", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDisabled.g100}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDisabled.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDisabled.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDisabled.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDisabled.g100}" + }, + "key": "{button.surface.color.disabled}" + }, + "name": "token-button-surface-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "disabled" + ] + }, + "token-button-border-width": { + "key": "{button.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{button.border.width}" + }, + "name": "token-button-border-width", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "width" + ] + }, + "token-button-border-radius": { + "key": "{button.border.radius}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{button.border.radius}" + }, + "name": "token-button-border-radius", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "radius" + ] + }, + "token-button-border-color-primary-default": { + "key": "{button.border.color.primary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#0043ce", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.default}" + }, + "name": "token-button-border-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "default" + ] + }, + "token-button-border-color-primary-hover": { + "key": "{button.border.color.primary.hover}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#0043ce", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.hover}" + }, + "name": "token-button-border-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "hover" + ] + }, + "token-button-border-color-primary-focus-internal": { + "key": "{button.border.color.primary.focus.internal}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#161616", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.primary.focus.internal}" + }, + "name": "token-button-border-color-primary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "focus", + "internal" + ] + }, + "token-button-border-color-primary-focus-external": { + "key": "{button.border.color.primary.focus.external}", + "$type": "color", + "$value": "#ff00ff", + "$modes": { + "default": "#ffffff", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "magenta", + "$modes": { + "default": "{color.focus.action.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.primary.focus.external}" + }, + "name": "token-button-border-color-primary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "focus", + "external" + ] + }, + "token-button-border-color-primary-active": { + "key": "{button.border.color.primary.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#002d9c", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.active}" + }, + "name": "token-button-border-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "active" + ] + }, + "token-button-border-color-secondary-default": { + "key": "{button.border.color.secondary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#6f6f6f", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.default}" + }, + "name": "token-button-border-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "default" + ] + }, + "token-button-border-color-secondary-hover": { + "key": "{button.border.color.secondary.hover}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#6f6f6f", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.hover}" + }, + "name": "token-button-border-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "hover" + ] + }, + "token-button-border-color-secondary-focus-internal": { + "key": "{button.border.color.secondary.focus.internal}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#161616", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.secondary.focus.internal}" + }, + "name": "token-button-border-color-secondary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "focus", + "internal" + ] + }, + "token-button-border-color-secondary-focus-external": { + "key": "{button.border.color.secondary.focus.external}", + "$type": "color", + "$value": "#ff00ff", + "$modes": { + "default": "#ffffff", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "magenta", + "$modes": { + "default": "{color.focus.action.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.secondary.focus.external}" + }, + "name": "token-button-border-color-secondary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "focus", + "external" + ] + }, + "token-button-border-color-secondary-active": { + "key": "{button.border.color.secondary.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#6f6f6f", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.active}" + }, + "name": "token-button-border-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "active" + ] + }, + "token-button-border-color-tertiary-default": { + "key": "{button.border.color.tertiary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{button.border.color.tertiary.default}" + }, + "name": "token-button-border-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "default" + ] + }, + "token-button-border-color-tertiary-hover": { + "key": "{button.border.color.tertiary.hover}", + "$type": "color", + "$value": "#6f6f6f", + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "key": "{button.border.color.tertiary.hover}" + }, + "name": "token-button-border-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "hover" + ] + }, + "token-button-border-color-tertiary-focus-internal": { + "key": "{button.border.color.tertiary.focus.internal}", + "$type": "color", + "$value": "#161616", + "original": { + "$type": "color", + "$value": "{color.focus.action.internal}", + "key": "{button.border.color.tertiary.focus.internal}" + }, + "name": "token-button-border-color-tertiary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "focus", + "internal" + ] + }, + "token-button-border-color-tertiary-focus-external": { + "key": "{button.border.color.tertiary.focus.external}", + "$type": "color", + "$value": "#ffffff", + "original": { + "$type": "color", + "$value": "{color.focus.action.external}", + "key": "{button.border.color.tertiary.focus.external}" + }, + "name": "token-button-border-color-tertiary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "focus", + "external" + ] + }, + "token-button-border-color-tertiary-active": { + "key": "{button.border.color.tertiary.active}", + "$type": "color", + "$value": "#6f6f6f", + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "key": "{button.border.color.tertiary.active}" + }, + "name": "token-button-border-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "active" + ] + }, + "token-button-border-color-critical-default": { + "key": "{button.border.color.critical.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#ffb3b8", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.default}" + }, + "name": "token-button-border-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "default" + ] + }, + "token-button-border-color-critical-hover": { + "key": "{button.border.color.critical.hover}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#750e13", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.hover}" + }, + "name": "token-button-border-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "hover" + ] + }, + "token-button-border-color-critical-focus-internal": { + "key": "{button.border.color.critical.focus.internal}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#161616", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.critical.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.critical.focus.internal}" + }, + "name": "token-button-border-color-critical-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "focus", + "internal" + ] + }, + "token-button-border-color-critical-focus-external": { + "key": "{button.border.color.critical.focus.external}", + "$type": "color", + "$value": "#ff00ff", + "$modes": { + "default": "#ffffff", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "magenta", + "$modes": { + "default": "{color.focus.critical.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.critical.focus.external}" + }, + "name": "token-button-border-color-critical-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "focus", + "external" + ] + }, + "token-button-border-color-critical-active": { + "key": "{button.border.color.critical.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#750e13", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.active}" + }, + "name": "token-button-border-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "active" + ] + }, + "token-button-border-color-disabled": { + "key": "{button.border.color.disabled}", + "$type": "color", + "$value": "#6f6f6f", + "original": { + "$type": "color", + "$value": "{color.border.primary}", + "key": "{button.border.color.disabled}" + }, + "name": "token-button-border-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "disabled" + ] + }, + "token-button-focus-border-width": { + "key": "{button.focus.border.width}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{button.focus.border.width}" + }, + "name": "token-button-focus-border-width", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "focus", + "border", + "width" + ] + }, + "token-button-icon-size-small": { + "key": "{button.icon.size.small}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.small}" + }, + "name": "token-button-icon-size-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "small" + ] + }, + "token-button-icon-size-medium": { + "key": "{button.icon.size.medium}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.medium}" + }, + "name": "token-button-icon-size-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "medium" + ] + }, + "token-button-icon-size-large": { + "key": "{button.icon.size.large}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.large}" + }, + "name": "token-button-icon-size-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "large" + ] + }, + "token-dismiss-button-size": { + "key": "{dismiss-button.size}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "key": "{dismiss-button.size}" + }, + "name": "token-dismiss-button-size", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "size" + ] + }, + "token-dismiss-button-foreground-color-default": { + "key": "{dismiss-button.foreground.color.default}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.iconPrimary}", + "$modes": { + "default": "{color.foreground.faint}", + "cds-g0": "{carbon.themes.white.iconPrimary}", + "cds-g10": "{carbon.themes.g10.iconPrimary}", + "cds-g90": "{carbon.themes.g90.iconPrimary}", + "cds-g100": "{carbon.themes.g100.iconPrimary}" + }, + "key": "{dismiss-button.foreground.color.default}" + }, + "name": "token-dismiss-button-foreground-color-default", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "foreground", + "color", + "default" + ] + }, + "token-dismiss-button-foreground-color-active": { + "key": "{dismiss-button.foreground.color.active}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.iconPrimary}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.white.iconPrimary}", + "cds-g10": "{carbon.themes.g10.iconPrimary}", + "cds-g90": "{carbon.themes.g90.iconPrimary}", + "cds-g100": "{carbon.themes.g100.iconPrimary}" + }, + "key": "{dismiss-button.foreground.color.active}" + }, + "name": "token-dismiss-button-foreground-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "foreground", + "color", + "active" + ] + }, + "token-dismiss-button-surface-color-hover": { + "key": "{dismiss-button.surface.color.hover}", + "$type": "color", + "$value": "rgba(141, 141, 141, 0.16)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "rgba(141, 141, 141, 0.12)", + "cds-g10": "rgba(141, 141, 141, 0.12)", + "cds-g90": "rgba(141, 141, 141, 0.16)", + "cds-g100": "rgba(141, 141, 141, 0.16)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.backgroundHover}", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "{carbon.themes.white.backgroundHover}", + "cds-g10": "{carbon.themes.g10.backgroundHover}", + "cds-g90": "{carbon.themes.g90.backgroundHover}", + "cds-g100": "{carbon.themes.g100.backgroundHover}" + }, + "key": "{dismiss-button.surface.color.hover}" + }, + "name": "token-dismiss-button-surface-color-hover", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "surface", + "color", + "hover" + ] + }, + "token-dismiss-button-surface-color-active": { + "key": "{dismiss-button.surface.color.active}", + "$type": "color", + "$value": "rgba(141, 141, 141, 0.4)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "rgba(141, 141, 141, 0.5)", + "cds-g10": "rgba(141, 141, 141, 0.5)", + "cds-g90": "rgba(141, 141, 141, 0.4)", + "cds-g100": "rgba(141, 141, 141, 0.4)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.backgroundActive}", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "{carbon.themes.white.backgroundActive}", + "cds-g10": "{carbon.themes.g10.backgroundActive}", + "cds-g90": "{carbon.themes.g90.backgroundActive}", + "cds-g100": "{carbon.themes.g100.backgroundActive}" + }, + "key": "{dismiss-button.surface.color.active}" + }, + "name": "token-dismiss-button-surface-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "surface", + "color", + "active" + ] + }, + "token-dismiss-button-border-color-active": { + "key": "{dismiss-button.border.color.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#6f6f6f", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{dismiss-button.border.color.active}" + }, + "name": "token-dismiss-button-border-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "border", + "color", + "active" + ] + }, + "token-dismiss-button-icon-size": { + "key": "{dismiss-button.icon.size}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "20", + "cds-g10": "20", + "cds-g90": "20", + "cds-g100": "20" + }, + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "20", + "cds-g10": "20", + "cds-g90": "20", + "cds-g100": "20" + }, + "key": "{dismiss-button.icon.size}" + }, + "name": "token-dismiss-button-icon-size", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "icon", + "size" + ] + }, + "token-form-label-color": { + "key": "{form.label.color}", + "$type": "color", + "$value": "#f4f4f4", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.strong}", + "group": "components", + "key": "{form.label.color}" + }, + "name": "token-form-label-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "label", + "color" + ] + }, + "token-form-legend-color": { + "key": "{form.legend.color}", + "$type": "color", + "$value": "#f4f4f4", + "group": "components", + "original": { + "$type": "color", + "$value": "{form.label.color}", + "group": "components", + "key": "{form.legend.color}" + }, + "name": "token-form-legend-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "legend", + "color" + ] + }, + "token-form-helper-text-color": { + "key": "{form.helper-text.color}", + "$type": "color", + "$value": "#c6c6c6", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.helper-text.color}" + }, + "name": "token-form-helper-text-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "helper-text", + "color" + ] + }, + "token-form-indicator-optional-color": { + "key": "{form.indicator.optional.color}", + "$type": "color", + "$value": "#c6c6c6", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.indicator.optional.color}" + }, + "name": "token-form-indicator-optional-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "indicator", + "optional", + "color" + ] + }, + "token-form-error-color": { + "key": "{form.error.color}", + "$type": "color", + "$value": "#a2191f", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "components", + "key": "{form.error.color}" + }, + "name": "token-form-error-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "error", + "color" + ] + }, + "token-form-error-icon-size": { + "key": "{form.error.icon-size}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "14", + "unit": "px", + "key": "{form.error.icon-size}" + }, + "name": "token-form-error-icon-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "error", + "icon-size" + ] + }, + "token-form-checkbox-size": { + "key": "{form.checkbox.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.checkbox.size}" + }, + "name": "token-form-checkbox-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "size" + ] + }, + "token-form-checkbox-border-radius": { + "key": "{form.checkbox.border.radius}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{form.checkbox.border.radius}" + }, + "name": "token-form-checkbox-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "border", + "radius" + ] + }, + "token-form-checkbox-border-width": { + "key": "{form.checkbox.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.checkbox.border.width}" + }, + "name": "token-form-checkbox-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "border", + "width" + ] + }, + "token-form-checkbox-background-image-size": { + "key": "{form.checkbox.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.checkbox.background-image.size}" + }, + "name": "token-form-checkbox-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "size" + ] + }, + "token-form-checkbox-background-image-data-url": { + "key": "{form.checkbox.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url}" + }, + "name": "token-form-checkbox-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url" + ] + }, + "token-form-checkbox-background-image-data-url-indeterminate": { + "key": "{form.checkbox.background-image.data-url-indeterminate}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url-indeterminate}" + }, + "name": "token-form-checkbox-background-image-data-url-indeterminate", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url-indeterminate" + ] + }, + "token-form-checkbox-background-image-data-url-disabled": { + "key": "{form.checkbox.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url-disabled}" + }, + "name": "token-form-checkbox-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url-disabled" + ] + }, + "token-form-checkbox-background-image-data-url-indeterminate-disabled": { + "key": "{form.checkbox.background-image.data-url-indeterminate-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url-indeterminate-disabled}" + }, + "name": "token-form-checkbox-background-image-data-url-indeterminate-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url-indeterminate-disabled" + ] + }, + "token-form-control-base-foreground-value-color": { + "key": "{form.control.base.foreground.value-color}", + "$type": "color", + "$value": "#f4f4f4", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.strong}", + "group": "components", + "key": "{form.control.base.foreground.value-color}" + }, + "name": "token-form-control-base-foreground-value-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "foreground", + "value-color" + ] + }, + "token-form-control-base-foreground-placeholder-color": { + "key": "{form.control.base.foreground.placeholder-color}", + "$type": "color", + "$value": "#c6c6c6", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.control.base.foreground.placeholder-color}" + }, + "name": "token-form-control-base-foreground-placeholder-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "foreground", + "placeholder-color" + ] + }, + "token-form-control-base-surface-color-default": { + "key": "{form.control.base.surface-color.default}", + "$type": "color", + "$value": "#262626", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.interactive}", + "group": "components", + "key": "{form.control.base.surface-color.default}" + }, + "name": "token-form-control-base-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "surface-color", + "default" + ] + }, + "token-form-control-base-surface-color-hover": { + "key": "{form.control.base.surface-color.hover}", + "$type": "color", + "$value": "#333333", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.interactive-hover}", + "group": "components", + "key": "{form.control.base.surface-color.hover}" + }, + "name": "token-form-control-base-surface-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "surface-color", + "hover" + ] + }, + "token-form-control-base-border-color-default": { + "key": "{form.control.base.border-color.default}", + "$type": "color", + "$value": "#8d8d8d", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-400}", + "group": "components", + "key": "{form.control.base.border-color.default}" + }, + "name": "token-form-control-base-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "border-color", + "default" + ] + }, + "token-form-control-base-border-color-hover": { + "key": "{form.control.base.border-color.hover}", + "$type": "color", + "$value": "#525252", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "group": "components", + "key": "{form.control.base.border-color.hover}" + }, + "name": "token-form-control-base-border-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "border-color", + "hover" + ] + }, + "token-form-control-checked-foreground-color": { + "key": "{form.control.checked.foreground-color}", + "$type": "color", + "$value": "#161616", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "group": "components", + "key": "{form.control.checked.foreground-color}" + }, + "name": "token-form-control-checked-foreground-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "foreground-color" + ] + }, + "token-form-control-checked-surface-color-default": { + "key": "{form.control.checked.surface-color.default}", + "$type": "color", + "$value": "#0f62fe", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "group": "components", + "key": "{form.control.checked.surface-color.default}" + }, + "name": "token-form-control-checked-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "surface-color", + "default" + ] + }, + "token-form-control-checked-surface-color-hover": { + "key": "{form.control.checked.surface-color.hover}", + "$type": "color", + "$value": "#0043ce", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "components", + "key": "{form.control.checked.surface-color.hover}" + }, + "name": "token-form-control-checked-surface-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "surface-color", + "hover" + ] + }, + "token-form-control-checked-border-color-default": { + "key": "{form.control.checked.border-color.default}", + "$type": "color", + "$value": "#0043ce", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "components", + "key": "{form.control.checked.border-color.default}" + }, + "name": "token-form-control-checked-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "border-color", + "default" + ] + }, + "token-form-control-checked-border-color-hover": { + "key": "{form.control.checked.border-color.hover}", + "$type": "color", + "$value": "#002d9c", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "group": "components", + "key": "{form.control.checked.border-color.hover}" + }, + "name": "token-form-control-checked-border-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "border-color", + "hover" + ] + }, + "token-form-control-invalid-border-color-default": { + "key": "{form.control.invalid.border-color.default}", + "$type": "color", + "$value": "#a2191f", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "components", + "key": "{form.control.invalid.border-color.default}" + }, + "name": "token-form-control-invalid-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "invalid", + "border-color", + "default" + ] + }, + "token-form-control-invalid-border-color-hover": { + "key": "{form.control.invalid.border-color.hover}", + "$type": "color", + "$value": "#750e13", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.red-400}", + "group": "components", + "key": "{form.control.invalid.border-color.hover}" + }, + "name": "token-form-control-invalid-border-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "invalid", + "border-color", + "hover" + ] + }, + "token-form-control-readonly-foreground-color": { + "key": "{form.control.readonly.foreground-color}", + "$type": "color", + "$value": "#f4f4f4", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "group": "components", + "key": "{form.control.readonly.foreground-color}" + }, + "name": "token-form-control-readonly-foreground-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "readonly", + "foreground-color" + ] + }, + "token-form-control-readonly-surface-color": { + "key": "{form.control.readonly.surface-color}", + "$type": "color", + "$value": "#393939", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.strong}", + "group": "components", + "key": "{form.control.readonly.surface-color}" + }, + "name": "token-form-control-readonly-surface-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "readonly", + "surface-color" + ] + }, + "token-form-control-readonly-border-color": { + "key": "{form.control.readonly.border-color}", + "$type": "color", + "$value": "#393939", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.border.faint}", + "group": "components", + "key": "{form.control.readonly.border-color}" + }, + "name": "token-form-control-readonly-border-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "readonly", + "border-color" + ] + }, + "token-form-control-disabled-foreground-color": { + "key": "{form.control.disabled.foreground-color}", + "$type": "color", + "$value": "rgba(244, 244, 244, 0.25)", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.disabled}", + "group": "components", + "key": "{form.control.disabled.foreground-color}" + }, + "name": "token-form-control-disabled-foreground-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "disabled", + "foreground-color" + ] + }, + "token-form-control-disabled-surface-color": { + "key": "{form.control.disabled.surface-color}", + "$type": "color", + "$value": "#525252", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.interactive-disabled}", + "group": "components", + "key": "{form.control.disabled.surface-color}" + }, + "name": "token-form-control-disabled-surface-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "disabled", + "surface-color" + ] + }, + "token-form-control-disabled-border-color": { + "key": "{form.control.disabled.border-color}", + "$type": "color", + "$value": "#6f6f6f", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.border.primary}", + "group": "components", + "key": "{form.control.disabled.border-color}" + }, + "name": "token-form-control-disabled-border-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "disabled", + "border-color" + ] + }, + "token-form-control-padding": { + "key": "{form.control.padding}", + "$type": "dimension", + "$value": "7px", + "unit": "px", + "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma.", + "original": { + "$type": "dimension", + "$value": "7", + "unit": "px", + "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma.", + "key": "{form.control.padding}" + }, + "name": "token-form-control-padding", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "padding" + ] + }, + "token-form-control-border-radius": { + "key": "{form.control.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{form.control.border.radius}" + }, + "name": "token-form-control-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "border", + "radius" + ] + }, + "token-form-control-border-width": { + "key": "{form.control.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.control.border.width}" + }, + "name": "token-form-control-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "border", + "width" + ] + }, + "token-form-radio-size": { + "key": "{form.radio.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.radio.size}" + }, + "name": "token-form-radio-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "size" + ] + }, + "token-form-radio-border-width": { + "key": "{form.radio.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.radio.border.width}" + }, + "name": "token-form-radio-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "border", + "width" + ] + }, + "token-form-radio-background-image-size": { + "key": "{form.radio.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.radio.background-image.size}" + }, + "name": "token-form-radio-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "background-image", + "size" + ] + }, + "token-form-radio-background-image-data-url": { + "key": "{form.radio.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "key": "{form.radio.background-image.data-url}" + }, + "name": "token-form-radio-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "background-image", + "data-url" + ] + }, + "token-form-radio-background-image-data-url-disabled": { + "key": "{form.radio.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "key": "{form.radio.background-image.data-url-disabled}" + }, + "name": "token-form-radio-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "background-image", + "data-url-disabled" + ] + }, + "token-form-radiocard-group-gap": { + "key": "{form.radiocard-group.gap}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.radiocard-group.gap}" + }, + "name": "token-form-radiocard-group-gap", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard-group", + "gap" + ] + }, + "token-form-radiocard-border-width": { + "key": "{form.radiocard.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.radiocard.border.width}" + }, + "name": "token-form-radiocard-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "width" + ] + }, + "token-form-radiocard-border-radius": { + "key": "{form.radiocard.border.radius}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{form.radiocard.border.radius}" + }, + "name": "token-form-radiocard-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "radius" + ] + }, + "token-form-radiocard-border-color-default": { + "key": "{form.radiocard.border.color.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#262626", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{form.radiocard.border.color.default}" + }, + "name": "token-form-radiocard-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "default" + ] + }, + "token-form-radiocard-border-color-focus": { + "key": "{form.radiocard.border.color.focus}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#161616", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "key": "{form.radiocard.border.color.focus}" + }, + "name": "token-form-radiocard-border-color-focus", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "focus" + ] + }, + "token-form-radiocard-border-color-default-checked": { + "key": "{form.radiocard.border.color.default-checked}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#0043ce", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "key": "{form.radiocard.border.color.default-checked}" + }, + "name": "token-form-radiocard-border-color-default-checked", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "default-checked" + ] + }, + "token-form-radiocard-content-padding": { + "key": "{form.radiocard.content-padding}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{form.radiocard.content-padding}" + }, + "name": "token-form-radiocard-content-padding", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "content-padding" + ] + }, + "token-form-radiocard-control-padding": { + "key": "{form.radiocard.control-padding}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{form.radiocard.control-padding}" + }, + "name": "token-form-radiocard-control-padding", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "control-padding" + ] + }, + "token-form-radiocard-transition-duration": { + "key": "{form.radiocard.transition.duration}", + "$type": "duration", + "$value": "0.2s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.2", + "unit": "s", + "key": "{form.radiocard.transition.duration}" + }, + "name": "token-form-radiocard-transition-duration", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "transition", + "duration" + ] + }, + "token-form-select-background-image-size": { + "key": "{form.select.background-image.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.select.background-image.size}" + }, + "name": "token-form-select-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "size" + ] + }, + "token-form-select-background-image-position-right-x": { + "key": "{form.select.background-image.position-right-x}", + "$type": "dimension", + "$value": "7px", + "original": { + "$type": "dimension", + "$value": "{form.control.padding}", + "key": "{form.select.background-image.position-right-x}" + }, + "name": "token-form-select-background-image-position-right-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "position-right-x" + ] + }, + "token-form-select-background-image-position-top-y": { + "key": "{form.select.background-image.position-top-y}", + "$type": "dimension", + "$value": "9px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "9", + "unit": "px", + "key": "{form.select.background-image.position-top-y}" + }, + "name": "token-form-select-background-image-position-top-y", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "position-top-y" + ] + }, + "token-form-select-background-image-data-url": { + "key": "{form.select.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "key": "{form.select.background-image.data-url}" + }, + "name": "token-form-select-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "data-url" + ] + }, + "token-form-select-background-image-data-url-disabled": { + "key": "{form.select.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "key": "{form.select.background-image.data-url-disabled}" + }, + "name": "token-form-select-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "data-url-disabled" + ] + }, + "token-form-text-input-background-image-size": { + "key": "{form.text-input.background-image.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.text-input.background-image.size}" + }, + "name": "token-form-text-input-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "size" + ] + }, + "token-form-text-input-background-image-position-x": { + "key": "{form.text-input.background-image.position-x}", + "$type": "dimension", + "$value": "7px", + "original": { + "$type": "dimension", + "$value": "{form.control.padding}", + "key": "{form.text-input.background-image.position-x}" + }, + "name": "token-form-text-input-background-image-position-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "position-x" + ] + }, + "token-form-text-input-background-image-data-url-date": { + "key": "{form.text-input.background-image.data-url-date}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-date}" + }, + "name": "token-form-text-input-background-image-data-url-date", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-date" + ] + }, + "token-form-text-input-background-image-data-url-time": { + "key": "{form.text-input.background-image.data-url-time}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-time}" + }, + "name": "token-form-text-input-background-image-data-url-time", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-time" + ] + }, + "token-form-text-input-background-image-data-url-search": { + "key": "{form.text-input.background-image.data-url-search}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-search}" + }, + "name": "token-form-text-input-background-image-data-url-search", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search" + ] + }, + "token-form-text-input-background-image-data-url-search-cancel": { + "key": "{form.text-input.background-image.data-url-search-cancel}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-search-cancel}" + }, + "name": "token-form-text-input-background-image-data-url-search-cancel", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search-cancel" + ] + }, + "token-form-text-input-background-image-data-url-search-loading": { + "key": "{form.text-input.background-image.data-url-search-loading}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color and animation are hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color and animation are hardcoded here!", + "key": "{form.text-input.background-image.data-url-search-loading}" + }, + "name": "token-form-text-input-background-image-data-url-search-loading", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search-loading" + ] + }, + "token-form-toggle-width": { + "key": "{form.toggle.width}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{form.toggle.width}" + }, + "name": "token-form-toggle-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "width" + ] + }, + "token-form-toggle-height": { + "key": "{form.toggle.height}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.toggle.height}" + }, + "name": "token-form-toggle-height", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "height" + ] + }, + "token-form-toggle-base-surface-color-default": { + "key": "{form.toggle.base.surface-color.default}", + "$type": "color", + "$value": "#393939", + "group": "components", + "comment": "the toggle has a different base surface color, compared to the other controls", + "original": { + "$type": "color", + "$value": "{color.surface.strong}", + "group": "components", + "comment": "the toggle has a different base surface color, compared to the other controls", + "key": "{form.toggle.base.surface-color.default}" + }, + "name": "token-form-toggle-base-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "base", + "surface-color", + "default" + ] + }, + "token-form-toggle-border-radius": { + "key": "{form.toggle.border.radius}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{form.toggle.border.radius}" + }, + "name": "token-form-toggle-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "border", + "radius" + ] + }, + "token-form-toggle-border-width": { + "key": "{form.toggle.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.toggle.border.width}" + }, + "name": "token-form-toggle-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "border", + "width" + ] + }, + "token-form-toggle-background-image-size": { + "key": "{form.toggle.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.toggle.background-image.size}" + }, + "name": "token-form-toggle-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "size" + ] + }, + "token-form-toggle-background-image-position-x": { + "key": "{form.toggle.background-image.position-x}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{form.toggle.background-image.position-x}" + }, + "name": "token-form-toggle-background-image-position-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "position-x" + ] + }, + "token-form-toggle-background-image-data-url": { + "key": "{form.toggle.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.toggle.background-image.data-url}" + }, + "name": "token-form-toggle-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "data-url" + ] + }, + "token-form-toggle-background-image-data-url-disabled": { + "key": "{form.toggle.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.toggle.background-image.data-url-disabled}" + }, + "name": "token-form-toggle-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "data-url-disabled" + ] + }, + "token-form-toggle-transition-duration": { + "key": "{form.toggle.transition.duration}", + "$type": "duration", + "$value": "0.2s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.2", + "unit": "s", + "key": "{form.toggle.transition.duration}" + }, + "name": "token-form-toggle-transition-duration", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "transition", + "duration" + ] + }, + "token-form-toggle-transition-timing-function": { + "key": "{form.toggle.transition.timing-function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.68, -0.2, 0.265, 1.15)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.68, + -0.2, + 0.265, + 1.15 + ], + "key": "{form.toggle.transition.timing-function}" + }, + "name": "token-form-toggle-transition-timing-function", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "transition", + "timing-function" + ] + }, + "token-form-toggle-thumb-size": { + "key": "{form.toggle.thumb-size}", + "$type": "dimension", + "$value": "16px", + "original": { + "$type": "dimension", + "$value": "{form.toggle.height}", + "key": "{form.toggle.thumb-size}" + }, + "name": "token-form-toggle-thumb-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "thumb-size" + ] + }, + "token-icon-tile-border-color-overlay": { + "key": "{icon-tile.border.color.overlay}", + "$type": "color", + "$value": "#6f6f6f", + "$modes": { + "default": "#6f6f6f", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.borderSubtle02}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle02}", + "cds-g10": "{carbon.themes.g10.borderSubtle02}", + "cds-g90": "{carbon.themes.g90.borderSubtle02}", + "cds-g100": "{carbon.themes.g100.borderSubtle02}" + }, + "key": "{icon-tile.border.color.overlay}" + }, + "name": "token-icon-tile-border-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "overlay" + ] + }, + "token-icon-tile-border-color-logo": { + "key": "{icon-tile.border.color.logo}", + "$type": "color", + "$value": "#525252", + "$modes": { + "default": "#6f6f6f", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.borderSubtle01}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle01}", + "cds-g10": "{carbon.themes.g10.borderSubtle01}", + "cds-g90": "{carbon.themes.g90.borderSubtle01}", + "cds-g100": "{carbon.themes.g100.borderSubtle01}" + }, + "key": "{icon-tile.border.color.logo}" + }, + "name": "token-icon-tile-border-color-logo", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "logo" + ] + }, + "token-icon-tile-surface-color-overlay": { + "key": "{icon-tile.surface.color.overlay}", + "$type": "color", + "$value": "#393939", + "$modes": { + "default": "#262626", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.layer02}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.white.layer02}", + "cds-g10": "{carbon.themes.g10.layer02}", + "cds-g90": "{carbon.themes.g90.layer02}", + "cds-g100": "{carbon.themes.g100.layer02}" + }, + "key": "{icon-tile.surface.color.overlay}" + }, + "name": "token-icon-tile-surface-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "surface", + "color", + "overlay" + ] + }, + "token-pagination-nav-control-height": { + "key": "{pagination.nav.control.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{pagination.nav.control.height}" + }, + "name": "token-pagination-nav-control-height", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "height" + ] + }, + "token-pagination-nav-control-padding-horizontal": { + "key": "{pagination.nav.control.padding.horizontal}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{pagination.nav.control.padding.horizontal}" + }, + "name": "token-pagination-nav-control-padding-horizontal", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "padding", + "horizontal" + ] + }, + "token-pagination-nav-control-focus-inset": { + "key": "{pagination.nav.control.focus-inset}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{pagination.nav.control.focus-inset}" + }, + "name": "token-pagination-nav-control-focus-inset", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "focus-inset" + ] + }, + "token-pagination-nav-control-icon-spacing": { + "key": "{pagination.nav.control.icon-spacing}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{pagination.nav.control.icon-spacing}" + }, + "name": "token-pagination-nav-control-icon-spacing", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "icon-spacing" + ] + }, + "token-pagination-nav-indicator-height": { + "key": "{pagination.nav.indicator.height}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{pagination.nav.indicator.height}" + }, + "name": "token-pagination-nav-indicator-height", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "indicator", + "height" + ] + }, + "token-pagination-nav-indicator-spacing": { + "key": "{pagination.nav.indicator.spacing}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{pagination.nav.indicator.spacing}" + }, + "name": "token-pagination-nav-indicator-spacing", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "indicator", + "spacing" + ] + }, + "token-pagination-child-spacing-vertical": { + "key": "{pagination.child.spacing.vertical}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{pagination.child.spacing.vertical}" + }, + "name": "token-pagination-child-spacing-vertical", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "child", + "spacing", + "vertical" + ] + }, + "token-pagination-child-spacing-horizontal": { + "key": "{pagination.child.spacing.horizontal}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "key": "{pagination.child.spacing.horizontal}" + }, + "name": "token-pagination-child-spacing-horizontal", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "child", + "spacing", + "horizontal" + ] + }, + "token-rich-tooltip-bubble-max-width": { + "key": "{rich-tooltip.bubble.max-width}", + "$type": "dimension", + "$value": "288px", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "original": { + "$type": "dimension", + "$value": "288", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "key": "{rich-tooltip.bubble.max-width}" + }, + "name": "token-rich-tooltip-bubble-max-width", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "max-width" + ] + }, + "token-rich-tooltip-bubble-border-color": { + "key": "{rich-tooltip.bubble.border.color}", + "$value": "#525252", + "$modes": { + "default": "#52525233", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$value": "{color.palette.alpha-200}", + "$modes": { + "default": "{elevation.higher.border.color}", + "cds-g0": "{color.palette.alpha-200}", + "cds-g10": "{color.palette.alpha-200}", + "cds-g90": "{color.palette.alpha-200}", + "cds-g100": "{color.palette.alpha-200}" + }, + "key": "{rich-tooltip.bubble.border.color}" + }, + "name": "token-rich-tooltip-bubble-border-color", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "border", + "color" + ] + }, + "token-rich-tooltip-bubble-border-radius": { + "key": "{rich-tooltip.bubble.border.radius}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "key": "{rich-tooltip.bubble.border.radius}" + }, + "name": "token-rich-tooltip-bubble-border-radius", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "border", + "radius" + ] + }, + "token-rich-tooltip-bubble-arrow-size": { + "key": "{rich-tooltip.bubble.arrow.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{rich-tooltip.bubble.arrow.size}" + }, + "name": "token-rich-tooltip-bubble-arrow-size", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "arrow", + "size" + ] + }, + "token-rich-tooltip-toggle-gap-horizontal": { + "key": "{rich-tooltip.toggle.gap.horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{rich-tooltip.toggle.gap.horizontal}" + }, + "name": "token-rich-tooltip-toggle-gap-horizontal", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "gap", + "horizontal" + ] + }, + "token-rich-tooltip-toggle-foreground-color-default": { + "key": "{rich-tooltip.toggle.foreground.color.default}", + "$value": "#c6c6c6", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$value": "{carbon.themes.g100.textSecondary}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.default}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-default", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "default" + ] + }, + "token-rich-tooltip-toggle-foreground-color-hover": { + "key": "{rich-tooltip.toggle.foreground.color.hover}", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$value": "{carbon.themes.g100.textPrimary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.hover}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-hover", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "hover" + ] + }, + "token-rich-tooltip-toggle-foreground-color-active": { + "key": "{rich-tooltip.toggle.foreground.color.active}", + "$value": "#c6c6c6", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$value": "{carbon.themes.g100.textSecondary}", + "$modes": { + "default": "{color.foreground.faint}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.active}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-active", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "active" + ] + }, + "token-rich-tooltip-toggle-icon-size": { + "key": "{rich-tooltip.toggle.icon.size}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, + "original": { + "$type": "dimension", + "$value": "14", + "unit": "px", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, + "key": "{rich-tooltip.toggle.icon.size}" + }, + "name": "token-rich-tooltip-toggle-icon-size", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "icon", + "size" + ] + }, + "token-tabs-tab-height-medium": { + "key": "{tabs.tab.height.medium}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{tabs.tab.height.medium}" + }, + "name": "token-tabs-tab-height-medium", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "height", + "medium" + ] + }, + "token-tabs-tab-height-large": { + "key": "{tabs.tab.height.large}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{tabs.tab.height.large}" + }, + "name": "token-tabs-tab-height-large", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "height", + "large" + ] + }, + "token-tabs-tab-padding-horizontal-medium": { + "key": "{tabs.tab.padding.horizontal.medium}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{tabs.tab.padding.horizontal.medium}" + }, + "name": "token-tabs-tab-padding-horizontal-medium", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "padding", + "horizontal", + "medium" + ] + }, + "token-tabs-tab-padding-horizontal-large": { + "key": "{tabs.tab.padding.horizontal.large}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "key": "{tabs.tab.padding.horizontal.large}" + }, + "name": "token-tabs-tab-padding-horizontal-large", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "padding", + "horizontal", + "large" + ] + }, + "token-tabs-tab-padding-vertical": { + "key": "{tabs.tab.padding.vertical}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "key": "{tabs.tab.padding.vertical}" + }, + "name": "token-tabs-tab-padding-vertical", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "padding", + "vertical" + ] + }, + "token-tabs-tab-border-radius": { + "key": "{tabs.tab.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{tabs.tab.border-radius}" + }, + "name": "token-tabs-tab-border-radius", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "border-radius" + ] + }, + "token-tabs-tab-focus-inset": { + "key": "{tabs.tab.focus-inset}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{tabs.tab.focus-inset}" + }, + "name": "token-tabs-tab-focus-inset", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "focus-inset" + ] + }, + "token-tabs-tab-gutter": { + "key": "{tabs.tab.gutter}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{tabs.tab.gutter}" + }, + "name": "token-tabs-tab-gutter", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "gutter" + ] + }, + "token-tabs-indicator-height": { + "key": "{tabs.indicator.height}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{tabs.indicator.height}" + }, + "name": "token-tabs-indicator-height", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "indicator", + "height" + ] + }, + "token-tabs-indicator-transition-function": { + "key": "{tabs.indicator.transition.function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.5, 1, 0.89, 1)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.5, + 1, + 0.89, + 1 + ], + "key": "{tabs.indicator.transition.function}" + }, + "name": "token-tabs-indicator-transition-function", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "indicator", + "transition", + "function" + ] + }, + "token-tabs-indicator-transition-duration": { + "key": "{tabs.indicator.transition.duration}", + "$type": "duration", + "$value": "0.6s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.6", + "unit": "s", + "key": "{tabs.indicator.transition.duration}" + }, + "name": "token-tabs-indicator-transition-duration", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "indicator", + "transition", + "duration" + ] + }, + "token-tabs-divider-height": { + "key": "{tabs.divider.height}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{tabs.divider.height}" + }, + "name": "token-tabs-divider-height", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "divider", + "height" + ] + }, + "token-tooltip-max-width": { + "key": "{tooltip.max-width}", + "$type": "dimension", + "$value": "288px", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "original": { + "$type": "dimension", + "$value": "288", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "key": "{tooltip.max-width}" + }, + "name": "token-tooltip-max-width", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "max-width" + ] + }, + "token-tooltip-padding-horizontal": { + "key": "{tooltip.padding.horizontal}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16px", + "cds-g10": "16px", + "cds-g90": "16px", + "cds-g100": "16px" + }, + "original": { + "$type": "dimension", + "$value": "{carbon.themes.g100.spacing05}", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "{carbon.themes.white.spacing05}", + "cds-g10": "{carbon.themes.g10.spacing05}", + "cds-g90": "{carbon.themes.g90.spacing05}", + "cds-g100": "{carbon.themes.g100.spacing05}" + }, + "key": "{tooltip.padding.horizontal}" + }, + "name": "token-tooltip-padding-horizontal", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "horizontal" + ] + }, + "token-tooltip-padding-vertical": { + "key": "{tooltip.padding.vertical}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "16px", + "cds-g10": "16px", + "cds-g90": "16px", + "cds-g100": "16px" + }, + "original": { + "$type": "dimension", + "$value": "{carbon.themes.g100.spacing05}", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "{carbon.themes.white.spacing05}", + "cds-g10": "{carbon.themes.g10.spacing05}", + "cds-g90": "{carbon.themes.g90.spacing05}", + "cds-g100": "{carbon.themes.g100.spacing05}" + }, + "key": "{tooltip.padding.vertical}" + }, + "name": "token-tooltip-padding-vertical", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "vertical" + ] + }, + "token-tooltip-border-radius": { + "key": "{tooltip.border.radius}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "key": "{tooltip.border.radius}" + }, + "name": "token-tooltip-border-radius", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "border", + "radius" + ] + }, + "token-tooltip-caret-clip-path": { + "key": "{tooltip.caret.clip-path}", + "$value": "polygon(0 100%, 50% 0, 100% 100%)", + "$modes": { + "default": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "cds-g0": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g10": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g90": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g100": "polygon(0 100%, 50% 0, 100% 100%)" + }, + "original": { + "$value": "polygon(0 100%, 50% 0, 100% 100%)", + "$modes": { + "default": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "cds-g0": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g10": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g90": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g100": "polygon(0 100%, 50% 0, 100% 100%)" + }, + "key": "{tooltip.caret.clip-path}" + }, + "name": "token-tooltip-caret-clip-path", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "clip-path" + ] + }, + "token-tooltip-caret-height": { + "key": "{tooltip.caret.height}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "7", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "7", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "key": "{tooltip.caret.height}" + }, + "name": "token-tooltip-caret-height", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "height" + ] + }, + "token-tooltip-caret-width": { + "key": "{tooltip.caret.width}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{tooltip.caret.width}" + }, + "name": "token-tooltip-caret-width", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "width" + ] + }, + "token-tooltip-focus-offset": { + "key": "{tooltip.focus-offset}", + "$type": "dimension", + "$value": "-2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "-2", + "unit": "px", + "key": "{tooltip.focus-offset}" + }, + "name": "token-tooltip-focus-offset", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "focus-offset" + ] + }, + "token-tooltip-transition-function": { + "key": "{tooltip.transition.function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.54, 1.5, 0.38, 1.11)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.54, + 1.5, + 0.38, + 1.11 + ], + "key": "{tooltip.transition.function}" + }, + "name": "token-tooltip-transition-function", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "transition", + "function" + ] + }, + "token-typography-font-stack-display": { + "key": "{typography.font-stack.display}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.sans.display.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.font-stack.display}" + }, + "name": "token-typography-font-stack-display", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-stack", + "display" + ] + }, + "token-typography-font-stack-text": { + "key": "{typography.font-stack.text}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.sans.text.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.font-stack.text}" + }, + "name": "token-typography-font-stack-text", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-stack", + "text" + ] + }, + "token-typography-font-stack-code": { + "key": "{typography.font-stack.code}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.monospace.code.combined}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.font-stack.code}" + }, + "name": "token-typography-font-stack-code", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-stack", + "code" + ] + }, + "token-typography-font-weight-regular": { + "key": "{typography.font-weight.regular}", + "$type": "font-weight", + "$value": 400, + "$modes": { + "default": "400", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "default": "400", + "cds-g0": "{carbon.typography.font-weight.regular}", + "cds-g10": "{carbon.typography.font-weight.regular}", + "cds-g90": "{carbon.typography.font-weight.regular}", + "cds-g100": "{carbon.typography.font-weight.regular}" + }, + "key": "{typography.font-weight.regular}" + }, + "name": "token-typography-font-weight-regular", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "regular" + ] + }, + "token-typography-font-weight-medium": { + "key": "{typography.font-weight.medium}", + "$type": "font-weight", + "$value": 400, + "$modes": { + "default": "500", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "default": "500", + "cds-g0": "{carbon.typography.font-weight.regular}", + "cds-g10": "{carbon.typography.font-weight.regular}", + "cds-g90": "{carbon.typography.font-weight.regular}", + "cds-g100": "{carbon.typography.font-weight.regular}" + }, + "key": "{typography.font-weight.medium}" + }, + "name": "token-typography-font-weight-medium", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "medium" + ] + }, + "token-typography-font-weight-semibold": { + "key": "{typography.font-weight.semibold}", + "$type": "font-weight", + "$value": 600, + "$modes": { + "default": "600", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "default": "600", + "cds-g0": "{carbon.typography.font-weight.semibold}", + "cds-g10": "{carbon.typography.font-weight.semibold}", + "cds-g90": "{carbon.typography.font-weight.semibold}", + "cds-g100": "{carbon.typography.font-weight.semibold}" + }, + "key": "{typography.font-weight.semibold}" + }, + "name": "token-typography-font-weight-semibold", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "semibold" + ] + }, + "token-typography-font-weight-bold": { + "key": "{typography.font-weight.bold}", + "$type": "font-weight", + "$value": 600, + "$modes": { + "default": "700", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "default": "700", + "cds-g0": "{carbon.typography.font-weight.semibold}", + "cds-g10": "{carbon.typography.font-weight.semibold}", + "cds-g90": "{carbon.typography.font-weight.semibold}", + "cds-g100": "{carbon.typography.font-weight.semibold}" + }, + "key": "{typography.font-weight.bold}" + }, + "name": "token-typography-font-weight-bold", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "bold" + ] + }, + "token-typography-display-500-font-family": { + "key": "{typography.display-500.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-500.font-family}" + }, + "name": "token-typography-display-500-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "font-family" + ] + }, + "token-typography-display-500-font-size": { + "key": "{typography.display-500.font-size}", + "$type": "font-size", + "$value": "2rem", + "unit": "px", + "comment": "30px/1.875rem", + "$modes": { + "default": "30", + "cds-g0": "2rem", + "cds-g10": "2rem", + "cds-g90": "2rem", + "cds-g100": "2rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading05.font-size}", + "unit": "px", + "comment": "30px/1.875rem", + "$modes": { + "default": "30", + "cds-g0": "{carbon.typography.heading05.font-size}", + "cds-g10": "{carbon.typography.heading05.font-size}", + "cds-g90": "{carbon.typography.heading05.font-size}", + "cds-g100": "{carbon.typography.heading05.font-size}" + }, + "key": "{typography.display-500.font-size}" + }, + "name": "token-typography-display-500-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "font-size" + ] + }, + "token-typography-display-500-line-height": { + "key": "{typography.display-500.line-height}", + "$type": "number", + "$value": 1.25, + "comment": "38px", + "$modes": { + "default": 1.2666, + "cds-g0": 1.25, + "cds-g10": 1.25, + "cds-g90": 1.25, + "cds-g100": 1.25 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading05.line-height}", + "comment": "38px", + "$modes": { + "default": 1.2666, + "cds-g0": "{carbon.typography.heading05.line-height}", + "cds-g10": "{carbon.typography.heading05.line-height}", + "cds-g90": "{carbon.typography.heading05.line-height}", + "cds-g100": "{carbon.typography.heading05.line-height}" + }, + "key": "{typography.display-500.line-height}" + }, + "name": "token-typography-display-500-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "line-height" + ] + }, + "token-typography-display-500-letter-spacing": { + "key": "{typography.display-500.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading05.letter-spacing}", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading05.letter-spacing}", + "cds-g10": "{carbon.typography.heading05.letter-spacing}", + "cds-g90": "{carbon.typography.heading05.letter-spacing}", + "cds-g100": "{carbon.typography.heading05.letter-spacing}" + }, + "key": "{typography.display-500.letter-spacing}" + }, + "name": "token-typography-display-500-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "letter-spacing" + ] + }, + "token-typography-display-400-font-family": { + "key": "{typography.display-400.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-400.font-family}" + }, + "name": "token-typography-display-400-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "font-family" + ] + }, + "token-typography-display-400-font-size": { + "key": "{typography.display-400.font-size}", + "$type": "font-size", + "$value": "1.75rem", + "unit": "px", + "comment": "24px/1.5rem", + "$modes": { + "default": "24", + "cds-g0": "1.75rem", + "cds-g10": "1.75rem", + "cds-g90": "1.75rem", + "cds-g100": "1.75rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading04.font-size}", + "unit": "px", + "comment": "24px/1.5rem", + "$modes": { + "default": "24", + "cds-g0": "{carbon.typography.heading04.font-size}", + "cds-g10": "{carbon.typography.heading04.font-size}", + "cds-g90": "{carbon.typography.heading04.font-size}", + "cds-g100": "{carbon.typography.heading04.font-size}" + }, + "key": "{typography.display-400.font-size}" + }, + "name": "token-typography-display-400-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "font-size" + ] + }, + "token-typography-display-400-line-height": { + "key": "{typography.display-400.line-height}", + "$type": "number", + "$value": 1.28572, + "comment": "32px", + "$modes": { + "default": 1.3333, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading04.line-height}", + "comment": "32px", + "$modes": { + "default": 1.3333, + "cds-g0": "{carbon.typography.heading04.line-height}", + "cds-g10": "{carbon.typography.heading04.line-height}", + "cds-g90": "{carbon.typography.heading04.line-height}", + "cds-g100": "{carbon.typography.heading04.line-height}" + }, + "key": "{typography.display-400.line-height}" + }, + "name": "token-typography-display-400-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "line-height" + ] + }, + "token-typography-display-400-letter-spacing": { + "key": "{typography.display-400.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading04.letter-spacing}", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.heading04.letter-spacing}", + "cds-g10": "{carbon.typography.heading04.letter-spacing}", + "cds-g90": "{carbon.typography.heading04.letter-spacing}", + "cds-g100": "{carbon.typography.heading04.letter-spacing}" + }, + "key": "{typography.display-400.letter-spacing}" + }, + "name": "token-typography-display-400-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "letter-spacing" + ] + }, + "token-typography-display-300-font-family": { + "key": "{typography.display-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-300.font-family}" + }, + "name": "token-typography-display-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "font-family" + ] + }, + "token-typography-display-300-font-size": { + "key": "{typography.display-300.font-size}", + "$type": "font-size", + "$value": "1.25rem", + "unit": "px", + "comment": "18px/1.125rem", + "$modes": { + "default": "18", + "cds-g0": "1.25rem", + "cds-g10": "1.25rem", + "cds-g90": "1.25rem", + "cds-g100": "1.25rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading03.font-size}", + "unit": "px", + "comment": "18px/1.125rem", + "$modes": { + "default": "18", + "cds-g0": "{carbon.typography.heading03.font-size}", + "cds-g10": "{carbon.typography.heading03.font-size}", + "cds-g90": "{carbon.typography.heading03.font-size}", + "cds-g100": "{carbon.typography.heading03.font-size}" + }, + "key": "{typography.display-300.font-size}" + }, + "name": "token-typography-display-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "font-size" + ] + }, + "token-typography-display-300-line-height": { + "key": "{typography.display-300.line-height}", + "$type": "number", + "$value": 1.4, + "comment": "24px", + "$modes": { + "default": 1.3333, + "cds-g0": 1.4, + "cds-g10": 1.4, + "cds-g90": 1.4, + "cds-g100": 1.4 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading03.line-height}", + "comment": "24px", + "$modes": { + "default": 1.3333, + "cds-g0": "{carbon.typography.heading03.line-height}", + "cds-g10": "{carbon.typography.heading03.line-height}", + "cds-g90": "{carbon.typography.heading03.line-height}", + "cds-g100": "{carbon.typography.heading03.line-height}" + }, + "key": "{typography.display-300.line-height}" + }, + "name": "token-typography-display-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "line-height" + ] + }, + "token-typography-display-300-letter-spacing": { + "key": "{typography.display-300.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading03.letter-spacing}", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading03.letter-spacing}", + "cds-g10": "{carbon.typography.heading03.letter-spacing}", + "cds-g90": "{carbon.typography.heading03.letter-spacing}", + "cds-g100": "{carbon.typography.heading03.letter-spacing}" + }, + "key": "{typography.display-300.letter-spacing}" + }, + "name": "token-typography-display-300-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "letter-spacing" + ] + }, + "token-typography-display-200-font-family": { + "key": "{typography.display-200.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-200.font-family}" + }, + "name": "token-typography-display-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "font-family" + ] + }, + "token-typography-display-200-font-size": { + "key": "{typography.display-200.font-size}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading02.font-size}", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.heading02.font-size}", + "cds-g10": "{carbon.typography.heading02.font-size}", + "cds-g90": "{carbon.typography.heading02.font-size}", + "cds-g100": "{carbon.typography.heading02.font-size}" + }, + "key": "{typography.display-200.font-size}" + }, + "name": "token-typography-display-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "font-size" + ] + }, + "token-typography-display-200-line-height": { + "key": "{typography.display-200.line-height}", + "$type": "number", + "$value": 1.5, + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading02.line-height}", + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": "{carbon.typography.heading02.line-height}", + "cds-g10": "{carbon.typography.heading02.line-height}", + "cds-g90": "{carbon.typography.heading02.line-height}", + "cds-g100": "{carbon.typography.heading02.line-height}" + }, + "key": "{typography.display-200.line-height}" + }, + "name": "token-typography-display-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "line-height" + ] + }, + "token-typography-display-200-letter-spacing": { + "key": "{typography.display-200.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading02.letter-spacing}", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading02.letter-spacing}", + "cds-g10": "{carbon.typography.heading02.letter-spacing}", + "cds-g90": "{carbon.typography.heading02.letter-spacing}", + "cds-g100": "{carbon.typography.heading02.letter-spacing}" + }, + "key": "{typography.display-200.letter-spacing}" + }, + "name": "token-typography-display-200-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "letter-spacing" + ] + }, + "token-typography-display-100-font-family": { + "key": "{typography.display-100.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-100.font-family}" + }, + "name": "token-typography-display-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "font-family" + ] + }, + "token-typography-display-100-font-size": { + "key": "{typography.display-100.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading01.font-size}", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.heading01.font-size}", + "cds-g10": "{carbon.typography.heading01.font-size}", + "cds-g90": "{carbon.typography.heading01.font-size}", + "cds-g100": "{carbon.typography.heading01.font-size}" + }, + "key": "{typography.display-100.font-size}" + }, + "name": "token-typography-display-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "font-size" + ] + }, + "token-typography-display-100-line-height": { + "key": "{typography.display-100.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading01.line-height}", + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": "{carbon.typography.heading01.line-height}", + "cds-g10": "{carbon.typography.heading01.line-height}", + "cds-g90": "{carbon.typography.heading01.line-height}", + "cds-g100": "{carbon.typography.heading01.line-height}" + }, + "key": "{typography.display-100.line-height}" + }, + "name": "token-typography-display-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "line-height" + ] + }, + "token-typography-display-100-letter-spacing": { + "key": "{typography.display-100.letter-spacing}", + "$type": "letter-spacing", + "$value": "0.16px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0.16px", + "cds-g10": "0.16px", + "cds-g90": "0.16px", + "cds-g100": "0.16px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading01.letter-spacing}", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.heading01.letter-spacing}", + "cds-g10": "{carbon.typography.heading01.letter-spacing}", + "cds-g90": "{carbon.typography.heading01.letter-spacing}", + "cds-g100": "{carbon.typography.heading01.letter-spacing}" + }, + "key": "{typography.display-100.letter-spacing}" + }, + "name": "token-typography-display-100-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "letter-spacing" + ] + }, + "token-typography-body-300-font-family": { + "key": "{typography.body-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-300.font-family}" + }, + "name": "token-typography-body-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "font-family" + ] + }, + "token-typography-body-300-font-size": { + "key": "{typography.body-300.font-size}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.body02.font-size}", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.body02.font-size}", + "cds-g10": "{carbon.typography.body02.font-size}", + "cds-g90": "{carbon.typography.body02.font-size}", + "cds-g100": "{carbon.typography.body02.font-size}" + }, + "key": "{typography.body-300.font-size}" + }, + "name": "token-typography-body-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "font-size" + ] + }, + "token-typography-body-300-line-height": { + "key": "{typography.body-300.line-height}", + "$type": "number", + "$value": 1.5, + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.body02.line-height}", + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": "{carbon.typography.body02.line-height}", + "cds-g10": "{carbon.typography.body02.line-height}", + "cds-g90": "{carbon.typography.body02.line-height}", + "cds-g100": "{carbon.typography.body02.line-height}" + }, + "key": "{typography.body-300.line-height}" + }, + "name": "token-typography-body-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "line-height" + ] + }, + "token-typography-body-200-font-family": { + "key": "{typography.body-200.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-200.font-family}" + }, + "name": "token-typography-body-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "font-family" + ] + }, + "token-typography-body-200-font-size": { + "key": "{typography.body-200.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.body01.font-size}", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "{carbon.typography.body01.font-size}", + "cds-g10": "{carbon.typography.body01.font-size}", + "cds-g90": "{carbon.typography.body01.font-size}", + "cds-g100": "{carbon.typography.body01.font-size}" + }, + "key": "{typography.body-200.font-size}" + }, + "name": "token-typography-body-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "font-size" + ] + }, + "token-typography-body-200-line-height": { + "key": "{typography.body-200.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "20px", + "$modes": { + "default": 1.4286, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.body01.line-height}", + "comment": "20px", + "$modes": { + "default": 1.4286, + "cds-g0": "{carbon.typography.body01.line-height}", + "cds-g10": "{carbon.typography.body01.line-height}", + "cds-g90": "{carbon.typography.body01.line-height}", + "cds-g100": "{carbon.typography.body01.line-height}" + }, + "key": "{typography.body-200.line-height}" + }, + "name": "token-typography-body-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "line-height" + ] + }, + "token-typography-body-100-font-family": { + "key": "{typography.body-100.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-100.font-family}" + }, + "name": "token-typography-body-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "font-family" + ] + }, + "token-typography-body-100-font-size": { + "key": "{typography.body-100.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.bodyCompact01.font-size}", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.bodyCompact01.font-size}", + "cds-g10": "{carbon.typography.bodyCompact01.font-size}", + "cds-g90": "{carbon.typography.bodyCompact01.font-size}", + "cds-g100": "{carbon.typography.bodyCompact01.font-size}" + }, + "key": "{typography.body-100.font-size}" + }, + "name": "token-typography-body-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "font-size" + ] + }, + "token-typography-body-100-line-height": { + "key": "{typography.body-100.line-height}", + "$type": "number", + "$value": 1.28572, + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.bodyCompact01.line-height}", + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": "{carbon.typography.bodyCompact01.line-height}", + "cds-g10": "{carbon.typography.bodyCompact01.line-height}", + "cds-g90": "{carbon.typography.bodyCompact01.line-height}", + "cds-g100": "{carbon.typography.bodyCompact01.line-height}" + }, + "key": "{typography.body-100.line-height}" + }, + "name": "token-typography-body-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "line-height" + ] + }, + "token-typography-code-300-font-family": { + "key": "{typography.code-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-300.font-family}" + }, + "name": "token-typography-code-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "font-family" + ] + }, + "token-typography-code-300-font-size": { + "key": "{typography.code-300.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.code02.font-size}", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-300.font-size}" + }, + "name": "token-typography-code-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "font-size" + ] + }, + "token-typography-code-300-line-height": { + "key": "{typography.code-300.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "20px", + "$modes": { + "default": 1.25, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.code02.line-height}", + "comment": "20px", + "$modes": { + "default": 1.25, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-300.line-height}" + }, + "name": "token-typography-code-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "line-height" + ] + }, + "token-typography-code-200-font-family": { + "key": "{typography.code-200.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-200.font-family}" + }, + "name": "token-typography-code-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "font-family" + ] + }, + "token-typography-code-200-font-size": { + "key": "{typography.code-200.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.code02.font-size}", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-200.font-size}" + }, + "name": "token-typography-code-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "font-size" + ] + }, + "token-typography-code-200-line-height": { + "key": "{typography.code-200.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "18px", + "$modes": { + "default": 1.125, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.code02.line-height}", + "comment": "18px", + "$modes": { + "default": 1.125, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-200.line-height}" + }, + "name": "token-typography-code-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "line-height" + ] + }, + "token-typography-code-100-font-family": { + "key": "{typography.code-100.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-100.font-family}" + }, + "name": "token-typography-code-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "font-family" + ] + }, + "token-typography-code-100-font-size": { + "key": "{typography.code-100.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.code02.font-size}", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-100.font-size}" + }, + "name": "token-typography-code-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "font-size" + ] + }, + "token-typography-code-100-line-height": { + "key": "{typography.code-100.line-height}", + "$type": "number", + "$value": 1.33333, + "comment": "16px", + "$modes": { + "default": 1.23, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.code01.line-height}", + "comment": "16px", + "$modes": { + "default": 1.23, + "cds-g0": "{carbon.typography.code01.line-height}", + "cds-g10": "{carbon.typography.code01.line-height}", + "cds-g90": "{carbon.typography.code01.line-height}", + "cds-g100": "{carbon.typography.code01.line-height}" + }, + "key": "{typography.code-100.line-height}" + }, + "name": "token-typography-code-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "line-height" + ] + } + } +} \ No newline at end of file diff --git a/packages/tokens/dist/docs/products/themed-tokens/cds-g0.json b/packages/tokens/dist/docs/products/themed-tokens/cds-g0.json new file mode 100644 index 00000000000..bbca917d338 --- /dev/null +++ b/packages/tokens/dist/docs/products/themed-tokens/cds-g0.json @@ -0,0 +1,15608 @@ +[ + { + "key": "{border.radius.x-small}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.x-small}" + }, + "name": "token-border-radius-x-small", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "x-small" + ] + }, + { + "key": "{border.radius.small}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.small}" + }, + "name": "token-border-radius-small", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "small" + ] + }, + { + "key": "{border.radius.medium}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.medium}" + }, + "name": "token-border-radius-medium", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "medium" + ] + }, + { + "key": "{border.radius.large}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.large}" + }, + "name": "token-border-radius-large", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "large" + ] + }, + { + "key": "{border.radius.rounded}", + "$type": "dimension", + "$value": "1000000000px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1000000000", + "unit": "px", + "key": "{border.radius.rounded}" + }, + "name": "token-border-radius-rounded", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "rounded" + ] + }, + { + "key": "{color.palette.blue-500}", + "$type": "color", + "$value": "#001141", + "group": "palette", + "$modes": { + "default": "#1c345f", + "cds-g0": "#001141", + "cds-g10": "#001141", + "cds-g90": "#001141", + "cds-g100": "#001141" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.100}", + "group": "palette", + "$modes": { + "default": "#1c345f", + "cds-g0": "{carbon.color.blue.100}", + "cds-g10": "{carbon.color.blue.100}", + "cds-g90": "{carbon.color.blue.100}", + "cds-g100": "{carbon.color.blue.100}" + }, + "key": "{color.palette.blue-500}" + }, + "name": "token-color-palette-blue-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-500" + ] + }, + { + "key": "{color.palette.blue-400}", + "$type": "color", + "$value": "#002d9c", + "group": "palette", + "$modes": { + "default": "#0046d1", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#002d9c", + "cds-g100": "#002d9c" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.80}", + "group": "palette", + "$modes": { + "default": "#0046d1", + "cds-g0": "{carbon.color.blue.80}", + "cds-g10": "{carbon.color.blue.80}", + "cds-g90": "{carbon.color.blue.80}", + "cds-g100": "{carbon.color.blue.80}" + }, + "key": "{color.palette.blue-400}" + }, + "name": "token-color-palette-blue-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-400" + ] + }, + { + "key": "{color.palette.blue-300}", + "$type": "color", + "$value": "#0043ce", + "group": "palette", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.70}", + "group": "palette", + "$modes": { + "default": "#0c56e9", + "cds-g0": "{carbon.color.blue.70}", + "cds-g10": "{carbon.color.blue.70}", + "cds-g90": "{carbon.color.blue.70}", + "cds-g100": "{carbon.color.blue.70}" + }, + "key": "{color.palette.blue-300}" + }, + "name": "token-color-palette-blue-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-300" + ] + }, + { + "key": "{color.palette.blue-200}", + "$type": "color", + "$value": "#0f62fe", + "group": "palette", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.60}", + "group": "palette", + "$modes": { + "default": "#1060ff", + "cds-g0": "{carbon.color.blue.60}", + "cds-g10": "{carbon.color.blue.60}", + "cds-g90": "{carbon.color.blue.60}", + "cds-g100": "{carbon.color.blue.60}" + }, + "key": "{color.palette.blue-200}" + }, + "name": "token-color-palette-blue-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-200" + ] + }, + { + "key": "{color.palette.blue-100}", + "$type": "color", + "$value": "#d0e2ff", + "group": "palette", + "$modes": { + "default": "#cce3fe", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.20}", + "group": "palette", + "$modes": { + "default": "#cce3fe", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.20}", + "cds-g100": "{carbon.color.blue.20}" + }, + "key": "{color.palette.blue-100}" + }, + "name": "token-color-palette-blue-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-100" + ] + }, + { + "key": "{color.palette.blue-50}", + "$type": "color", + "$value": "#edf5ff", + "group": "palette", + "$modes": { + "default": "#f2f8ff", + "cds-g0": "#edf5ff", + "cds-g10": "#edf5ff", + "cds-g90": "#edf5ff", + "cds-g100": "#edf5ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.10}", + "group": "palette", + "$modes": { + "default": "#f2f8ff", + "cds-g0": "{carbon.color.blue.10}", + "cds-g10": "{carbon.color.blue.10}", + "cds-g90": "{carbon.color.blue.10}", + "cds-g100": "{carbon.color.blue.10}" + }, + "key": "{color.palette.blue-50}" + }, + "name": "token-color-palette-blue-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-50" + ] + }, + { + "key": "{color.palette.purple-500}", + "$type": "color", + "$value": "#31135e", + "group": "palette", + "$modes": { + "default": "#42215b", + "cds-g0": "#31135e", + "cds-g10": "#31135e", + "cds-g90": "#31135e", + "cds-g100": "#31135e" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.90}", + "group": "palette", + "$modes": { + "default": "#42215b", + "cds-g0": "{carbon.color.purple.90}", + "cds-g10": "{carbon.color.purple.90}", + "cds-g90": "{carbon.color.purple.90}", + "cds-g100": "{carbon.color.purple.90}" + }, + "key": "{color.palette.purple-500}" + }, + "name": "token-color-palette-purple-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-500" + ] + }, + { + "key": "{color.palette.purple-400}", + "$type": "color", + "$value": "#6929c4", + "group": "palette", + "$modes": { + "default": "#7b00db", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.70}", + "group": "palette", + "$modes": { + "default": "#7b00db", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, + "key": "{color.palette.purple-400}" + }, + "name": "token-color-palette-purple-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-400" + ] + }, + { + "key": "{color.palette.purple-300}", + "$type": "color", + "$value": "#8a3ffc", + "group": "palette", + "$modes": { + "default": "#911ced", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#8a3ffc", + "cds-g100": "#8a3ffc" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.60}", + "group": "palette", + "$modes": { + "default": "#911ced", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.60}", + "cds-g100": "{carbon.color.purple.60}" + }, + "key": "{color.palette.purple-300}" + }, + "name": "token-color-palette-purple-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-300" + ] + }, + { + "key": "{color.palette.purple-200}", + "$type": "color", + "$value": "#a56eff", + "group": "palette", + "$modes": { + "default": "#a737ff", + "cds-g0": "#a56eff", + "cds-g10": "#a56eff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.50}", + "group": "palette", + "$modes": { + "default": "#a737ff", + "cds-g0": "{carbon.color.purple.50}", + "cds-g10": "{carbon.color.purple.50}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, + "key": "{color.palette.purple-200}" + }, + "name": "token-color-palette-purple-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-200" + ] + }, + { + "key": "{color.palette.purple-100}", + "$type": "color", + "$value": "#e8daff", + "group": "palette", + "$modes": { + "default": "#ead2fe", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.20}", + "group": "palette", + "$modes": { + "default": "#ead2fe", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.20}" + }, + "key": "{color.palette.purple-100}" + }, + "name": "token-color-palette-purple-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-100" + ] + }, + { + "key": "{color.palette.purple-50}", + "$type": "color", + "$value": "#f6f2ff", + "group": "palette", + "$modes": { + "default": "#f9f2ff", + "cds-g0": "#f6f2ff", + "cds-g10": "#f6f2ff", + "cds-g90": "#f6f2ff", + "cds-g100": "#f6f2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.10}", + "group": "palette", + "$modes": { + "default": "#f9f2ff", + "cds-g0": "{carbon.color.purple.10}", + "cds-g10": "{carbon.color.purple.10}", + "cds-g90": "{carbon.color.purple.10}", + "cds-g100": "{carbon.color.purple.10}" + }, + "key": "{color.palette.purple-50}" + }, + "name": "token-color-palette-purple-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-50" + ] + }, + { + "key": "{color.palette.green-500}", + "$type": "color", + "$value": "#044317", + "group": "palette", + "$modes": { + "default": "#054220", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#044317", + "cds-g100": "#044317" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.80}", + "group": "palette", + "$modes": { + "default": "#054220", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.80}", + "cds-g100": "{carbon.color.green.80}" + }, + "key": "{color.palette.green-500}" + }, + "name": "token-color-palette-green-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-500" + ] + }, + { + "key": "{color.palette.green-400}", + "$type": "color", + "$value": "#0e6027", + "group": "palette", + "$modes": { + "default": "#006619", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.70}", + "group": "palette", + "$modes": { + "default": "#006619", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, + "key": "{color.palette.green-400}" + }, + "name": "token-color-palette-green-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-400" + ] + }, + { + "key": "{color.palette.green-300}", + "$type": "color", + "$value": "#198038", + "group": "palette", + "$modes": { + "default": "#00781e", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#198038", + "cds-g100": "#198038" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.60}", + "group": "palette", + "$modes": { + "default": "#00781e", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.60}", + "cds-g100": "{carbon.color.green.60}" + }, + "key": "{color.palette.green-300}" + }, + "name": "token-color-palette-green-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-300" + ] + }, + { + "key": "{color.palette.green-200}", + "$type": "color", + "$value": "#24a148", + "group": "palette", + "$modes": { + "default": "#008a22", + "cds-g0": "#24a148", + "cds-g10": "#24a148", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.50}", + "group": "palette", + "$modes": { + "default": "#008a22", + "cds-g0": "{carbon.color.green.50}", + "cds-g10": "{carbon.color.green.50}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, + "key": "{color.palette.green-200}" + }, + "name": "token-color-palette-green-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-200" + ] + }, + { + "key": "{color.palette.green-100}", + "$type": "color", + "$value": "#a7f0ba", + "group": "palette", + "$modes": { + "default": "#cceeda", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.20}", + "group": "palette", + "$modes": { + "default": "#cceeda", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, + "key": "{color.palette.green-100}" + }, + "name": "token-color-palette-green-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-100" + ] + }, + { + "key": "{color.palette.green-50}", + "$type": "color", + "$value": "#defbe6", + "group": "palette", + "$modes": { + "default": "#f2fbf6", + "cds-g0": "#defbe6", + "cds-g10": "#defbe6", + "cds-g90": "#defbe6", + "cds-g100": "#defbe6" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.10}", + "group": "palette", + "$modes": { + "default": "#f2fbf6", + "cds-g0": "{carbon.color.green.10}", + "cds-g10": "{carbon.color.green.10}", + "cds-g90": "{carbon.color.green.10}", + "cds-g100": "{carbon.color.green.10}" + }, + "key": "{color.palette.green-50}" + }, + "name": "token-color-palette-green-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-50" + ] + }, + { + "key": "{color.palette.amber-500}", + "$type": "color", + "$value": "#3e1a00", + "group": "palette", + "$modes": { + "default": "#542800", + "cds-g0": "#3e1a00", + "cds-g10": "#3e1a00", + "cds-g90": "#3e1a00", + "cds-g100": "#3e1a00" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.90}", + "group": "palette", + "$modes": { + "default": "#542800", + "cds-g0": "{carbon.color.orange.90}", + "cds-g10": "{carbon.color.orange.90}", + "cds-g90": "{carbon.color.orange.90}", + "cds-g100": "{carbon.color.orange.90}" + }, + "key": "{color.palette.amber-500}" + }, + "name": "token-color-palette-amber-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-500" + ] + }, + { + "key": "{color.palette.amber-400}", + "$type": "color", + "$value": "#5e2900", + "group": "palette", + "$modes": { + "default": "#803d00", + "cds-g0": "#5e2900", + "cds-g10": "#5e2900", + "cds-g90": "#5e2900", + "cds-g100": "#5e2900" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.80}", + "group": "palette", + "$modes": { + "default": "#803d00", + "cds-g0": "{carbon.color.orange.80}", + "cds-g10": "{carbon.color.orange.80}", + "cds-g90": "{carbon.color.orange.80}", + "cds-g100": "{carbon.color.orange.80}" + }, + "key": "{color.palette.amber-400}" + }, + "name": "token-color-palette-amber-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-400" + ] + }, + { + "key": "{color.palette.amber-300}", + "$type": "color", + "$value": "#8a3800", + "group": "palette", + "$modes": { + "default": "#9e4b00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.70}", + "group": "palette", + "$modes": { + "default": "#9e4b00", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, + "key": "{color.palette.amber-300}" + }, + "name": "token-color-palette-amber-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-300" + ] + }, + { + "key": "{color.palette.amber-200}", + "$type": "color", + "$value": "#ba4e00", + "group": "palette", + "$modes": { + "default": "#bb5a00", + "cds-g0": "#ba4e00", + "cds-g10": "#ba4e00", + "cds-g90": "#ba4e00", + "cds-g100": "#ba4e00" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.60}", + "group": "palette", + "$modes": { + "default": "#bb5a00", + "cds-g0": "{carbon.color.orange.60}", + "cds-g10": "{carbon.color.orange.60}", + "cds-g90": "{carbon.color.orange.60}", + "cds-g100": "{carbon.color.orange.60}" + }, + "key": "{color.palette.amber-200}" + }, + "name": "token-color-palette-amber-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-200" + ] + }, + { + "key": "{color.palette.amber-100}", + "$type": "color", + "$value": "#ffd9be", + "group": "palette", + "$modes": { + "default": "#fbeabf", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.20}", + "group": "palette", + "$modes": { + "default": "#fbeabf", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "key": "{color.palette.amber-100}" + }, + "name": "token-color-palette-amber-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-100" + ] + }, + { + "key": "{color.palette.amber-50}", + "$type": "color", + "$value": "#fff2e8", + "group": "palette", + "$modes": { + "default": "#fff9e8", + "cds-g0": "#fff2e8", + "cds-g10": "#fff2e8", + "cds-g90": "#fff2e8", + "cds-g100": "#fff2e8" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.10}", + "group": "palette", + "$modes": { + "default": "#fff9e8", + "cds-g0": "{carbon.color.orange.10}", + "cds-g10": "{carbon.color.orange.10}", + "cds-g90": "{carbon.color.orange.10}", + "cds-g100": "{carbon.color.orange.10}" + }, + "key": "{color.palette.amber-50}" + }, + "name": "token-color-palette-amber-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-50" + ] + }, + { + "key": "{color.palette.red-500}", + "$type": "color", + "$value": "#520408", + "group": "palette", + "$modes": { + "default": "#51130a", + "cds-g0": "#520408", + "cds-g10": "#520408", + "cds-g90": "#520408", + "cds-g100": "#520408" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.90}", + "group": "palette", + "$modes": { + "default": "#51130a", + "cds-g0": "{carbon.color.red.90}", + "cds-g10": "{carbon.color.red.90}", + "cds-g90": "{carbon.color.red.90}", + "cds-g100": "{carbon.color.red.90}" + }, + "key": "{color.palette.red-500}" + }, + "name": "token-color-palette-red-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-500" + ] + }, + { + "key": "{color.palette.red-400}", + "$type": "color", + "$value": "#750e13", + "group": "palette", + "$modes": { + "default": "#940004", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#750e13", + "cds-g100": "#750e13" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.80}", + "group": "palette", + "$modes": { + "default": "#940004", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.80}", + "cds-g100": "{carbon.color.red.80}" + }, + "key": "{color.palette.red-400}" + }, + "name": "token-color-palette-red-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-400" + ] + }, + { + "key": "{color.palette.red-300}", + "$type": "color", + "$value": "#a2191f", + "group": "palette", + "$modes": { + "default": "#c00005", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.70}", + "group": "palette", + "$modes": { + "default": "#c00005", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, + "key": "{color.palette.red-300}" + }, + "name": "token-color-palette-red-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-300" + ] + }, + { + "key": "{color.palette.red-200}", + "$type": "color", + "$value": "#da1e28", + "group": "palette", + "$modes": { + "default": "#e52228", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.60}", + "group": "palette", + "$modes": { + "default": "#e52228", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.60}", + "cds-g100": "{carbon.color.red.60}" + }, + "key": "{color.palette.red-200}" + }, + "name": "token-color-palette-red-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-200" + ] + }, + { + "key": "{color.palette.red-100}", + "$type": "color", + "$value": "#ffd7d9", + "group": "palette", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.20}", + "group": "palette", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, + "key": "{color.palette.red-100}" + }, + "name": "token-color-palette-red-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-100" + ] + }, + { + "key": "{color.palette.red-50}", + "$type": "color", + "$value": "#fff1f1", + "group": "palette", + "$modes": { + "default": "#fff5f5", + "cds-g0": "#fff1f1", + "cds-g10": "#fff1f1", + "cds-g90": "#fff1f1", + "cds-g100": "#fff1f1" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.10}", + "group": "palette", + "$modes": { + "default": "#fff5f5", + "cds-g0": "{carbon.color.red.10}", + "cds-g10": "{carbon.color.red.10}", + "cds-g90": "{carbon.color.red.10}", + "cds-g100": "{carbon.color.red.10}" + }, + "key": "{color.palette.red-50}" + }, + "name": "token-color-palette-red-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-50" + ] + }, + { + "key": "{color.palette.neutral-700}", + "$type": "color", + "$value": "#161616", + "group": "palette", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.100}", + "group": "palette", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "{carbon.color.gray.100}", + "cds-g10": "{carbon.color.gray.100}", + "cds-g90": "{carbon.color.gray.100}", + "cds-g100": "{carbon.color.gray.100}" + }, + "key": "{color.palette.neutral-700}" + }, + "name": "token-color-palette-neutral-700", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-700" + ] + }, + { + "key": "{color.palette.neutral-600}", + "$type": "color", + "$value": "#393939", + "group": "palette", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#393939", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.80}", + "group": "palette", + "$modes": { + "default": "#3b3d45", + "cds-g0": "{carbon.color.gray.80}", + "cds-g10": "{carbon.color.gray.80}", + "cds-g90": "{carbon.color.gray.80}", + "cds-g100": "{carbon.color.gray.80}" + }, + "key": "{color.palette.neutral-600}" + }, + "name": "token-color-palette-neutral-600", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-600" + ] + }, + { + "key": "{color.palette.neutral-500}", + "$type": "color", + "$value": "#525252", + "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.70}", + "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": "{carbon.color.gray.70}", + "cds-g10": "{carbon.color.gray.70}", + "cds-g90": "{carbon.color.gray.70}", + "cds-g100": "{carbon.color.gray.70}" + }, + "key": "{color.palette.neutral-500}" + }, + "name": "token-color-palette-neutral-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-500" + ] + }, + { + "key": "{color.palette.neutral-400}", + "$type": "color", + "$value": "#8d8d8d", + "group": "palette", + "$modes": { + "default": "#8c909c", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.50}", + "group": "palette", + "$modes": { + "default": "#8c909c", + "cds-g0": "{carbon.color.gray.50}", + "cds-g10": "{carbon.color.gray.50}", + "cds-g90": "{carbon.color.gray.50}", + "cds-g100": "{carbon.color.gray.50}" + }, + "key": "{color.palette.neutral-400}" + }, + "name": "token-color-palette-neutral-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-400" + ] + }, + { + "key": "{color.palette.neutral-300}", + "$type": "color", + "$value": "#a8a8a8", + "group": "palette", + "$modes": { + "default": "#c2c5cb", + "cds-g0": "#a8a8a8", + "cds-g10": "#a8a8a8", + "cds-g90": "#a8a8a8", + "cds-g100": "#a8a8a8" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.40}", + "group": "palette", + "$modes": { + "default": "#c2c5cb", + "cds-g0": "{carbon.color.gray.40}", + "cds-g10": "{carbon.color.gray.40}", + "cds-g90": "{carbon.color.gray.40}", + "cds-g100": "{carbon.color.gray.40}" + }, + "key": "{color.palette.neutral-300}" + }, + "name": "token-color-palette-neutral-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-300" + ] + }, + { + "key": "{color.palette.neutral-200}", + "$type": "color", + "$value": "#c6c6c6", + "group": "palette", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.30}", + "group": "palette", + "$modes": { + "default": "#dedfe3", + "cds-g0": "{carbon.color.gray.30}", + "cds-g10": "{carbon.color.gray.30}", + "cds-g90": "{carbon.color.gray.30}", + "cds-g100": "{carbon.color.gray.30}" + }, + "key": "{color.palette.neutral-200}" + }, + "name": "token-color-palette-neutral-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-200" + ] + }, + { + "key": "{color.palette.neutral-100}", + "$type": "color", + "$value": "#e0e0e0", + "group": "palette", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#e0e0e0", + "cds-g100": "#e0e0e0" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.20}", + "group": "palette", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "{carbon.color.gray.20}", + "cds-g10": "{carbon.color.gray.20}", + "cds-g90": "{carbon.color.gray.20}", + "cds-g100": "{carbon.color.gray.20}" + }, + "key": "{color.palette.neutral-100}" + }, + "name": "token-color-palette-neutral-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-100" + ] + }, + { + "key": "{color.palette.neutral-50}", + "$type": "color", + "$value": "#f4f4f4", + "group": "palette", + "$modes": { + "default": "#fafafa", + "cds-g0": "#f4f4f4", + "cds-g10": "#f4f4f4", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.10}", + "group": "palette", + "$modes": { + "default": "#fafafa", + "cds-g0": "{carbon.color.gray.10}", + "cds-g10": "{carbon.color.gray.10}", + "cds-g90": "{carbon.color.gray.10}", + "cds-g100": "{carbon.color.gray.10}" + }, + "key": "{color.palette.neutral-50}" + }, + "name": "token-color-palette-neutral-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-50" + ] + }, + { + "key": "{color.palette.neutral-0}", + "$type": "color", + "$value": "#ffffff", + "group": "palette", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.white.0}", + "group": "palette", + "$modes": { + "default": "#ffffff", + "cds-g0": "{carbon.color.white.0}", + "cds-g10": "{carbon.color.white.0}", + "cds-g90": "{carbon.color.white.0}", + "cds-g100": "{carbon.color.white.0}" + }, + "key": "{color.palette.neutral-0}" + }, + "name": "token-color-palette-neutral-0", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-0" + ] + }, + { + "key": "{color.palette.alpha-300}", + "$type": "color", + "$value": "#8d8d8d", + "group": "palette", + "$modes": { + "default": "#393939", + "cds-g0": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#6f6f6f", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.50}", + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-600}", + "cds-g0": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.60}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "key": "{color.palette.alpha-300}" + }, + "name": "token-color-palette-alpha-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "alpha-300" + ] + }, + { + "key": "{color.palette.alpha-200}", + "$type": "color", + "$value": "#c6c6c6", + "group": "palette", + "$modes": { + "default": "#525252", + "cds-g0": { + "$value": "#c6c6c6", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#e0e0e0", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#6f6f6f", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#525252", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.30}", + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": { + "$value": "{carbon.color.gray.30}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.20}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.60}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.70}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "key": "{color.palette.alpha-200}" + }, + "name": "token-color-palette-alpha-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "alpha-200" + ] + }, + { + "key": "{color.palette.alpha-100}", + "$type": "color", + "$value": "#e0e0e0", + "group": "palette", + "$modes": { + "default": "#525252", + "cds-g0": { + "$value": "#e0e0e0", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#c6c6c6", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#525252", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#393939", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.20}", + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": { + "$value": "{carbon.color.gray.20}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.30}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.70}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.80}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "key": "{color.palette.alpha-100}" + }, + "name": "token-color-palette-alpha-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "alpha-100" + ] + }, + { + "key": "{color.border.primary}", + "$type": "color", + "$value": "#c6c6c6", + "group": "semantic", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.borderSubtle03}", + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-200}", + "cds-g0": "{carbon.themes.white.borderSubtle03}", + "cds-g10": "{carbon.themes.g10.borderSubtle03}", + "cds-g90": "{carbon.themes.g90.borderSubtle03}", + "cds-g100": "{carbon.themes.g100.borderSubtle03}" + }, + "key": "{color.border.primary}" + }, + "name": "token-color-border-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "primary" + ] + }, + { + "key": "{color.border.faint}", + "$type": "color", + "$value": "#e0e0e0", + "group": "semantic", + "$modes": { + "default": "#e0e0e0", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.borderSubtle00}", + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-100}", + "cds-g0": "{carbon.themes.white.borderSubtle00}", + "cds-g10": "{carbon.themes.g10.borderSubtle00}", + "cds-g90": "{carbon.themes.g90.borderSubtle00}", + "cds-g100": "{carbon.themes.g100.borderSubtle00}" + }, + "key": "{color.border.faint}" + }, + "name": "token-color-border-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "faint" + ] + }, + { + "key": "{color.border.strong}", + "$type": "color", + "$value": "#8d8d8d", + "group": "semantic", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.borderStrong01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-300}", + "cds-g0": "{carbon.themes.white.borderStrong01}", + "cds-g10": "{carbon.themes.g10.borderStrong01}", + "cds-g90": "{carbon.themes.g90.borderStrong01}", + "cds-g100": "{carbon.themes.g100.borderStrong01}" + }, + "key": "{color.border.strong}" + }, + "name": "token-color-border-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "strong" + ] + }, + { + "key": "{color.border.action}", + "$type": "color", + "$value": "#0f62fe", + "group": "semantic", + "$modes": { + "default": "#d0e2ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.borderInteractive}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-100}", + "cds-g0": "{carbon.themes.white.borderInteractive}", + "cds-g10": "{carbon.themes.g10.borderInteractive}", + "cds-g90": "{carbon.themes.g90.borderInteractive}", + "cds-g100": "{carbon.themes.g100.borderInteractive}" + }, + "key": "{color.border.action}" + }, + "name": "token-color-border-action", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "action" + ] + }, + { + "key": "{color.border.highlight}", + "$type": "color", + "$value": "#be95ff", + "group": "semantic", + "$modes": { + "default": "#e8daff", + "cds-g0": "#be95ff", + "cds-g10": "#be95ff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-100}", + "cds-g0": "{carbon.color.purple.40}", + "cds-g10": "{carbon.color.purple.40}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, + "key": "{color.border.highlight}" + }, + "name": "token-color-border-highlight", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "highlight" + ] + }, + { + "key": "{color.border.success}", + "$type": "color", + "$value": "#42be65", + "group": "semantic", + "$modes": { + "default": "#a7f0ba", + "cds-g0": "#42be65", + "cds-g10": "#42be65", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-100}", + "cds-g0": "{carbon.color.green.40}", + "cds-g10": "{carbon.color.green.40}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, + "key": "{color.border.success}" + }, + "name": "token-color-border-success", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "success" + ] + }, + { + "key": "{color.border.warning}", + "$type": "color", + "$value": "#d2a106", + "group": "semantic", + "$modes": { + "default": "#ffd9be", + "cds-g0": "#d2a106", + "cds-g10": "#d2a106", + "cds-g90": "#b28600", + "cds-g100": "#b28600" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.yellow.40}", + "cds-g10": "{carbon.color.yellow.40}", + "cds-g90": "{carbon.color.yellow.50}", + "cds-g100": "{carbon.color.yellow.50}" + }, + "key": "{color.border.warning}" + }, + "name": "token-color-border-warning", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "warning" + ] + }, + { + "key": "{color.border.critical}", + "$type": "color", + "$value": "#ff8389", + "group": "semantic", + "$modes": { + "default": "#ffd7d9", + "cds-g0": "#ff8389", + "cds-g10": "#ff8389", + "cds-g90": "#fa4d56", + "cds-g100": "#fa4d56" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-100}", + "cds-g0": "{carbon.color.red.40}", + "cds-g10": "{carbon.color.red.40}", + "cds-g90": "{carbon.color.red.50}", + "cds-g100": "{carbon.color.red.50}" + }, + "key": "{color.border.critical}" + }, + "name": "token-color-border-critical", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "critical" + ] + }, + { + "key": "{color.focus.action.internal}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "default": "#0043ce", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.focusInset}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, + "key": "{color.focus.action.internal}" + }, + "name": "token-color-focus-action-internal", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "action", + "internal" + ] + }, + { + "key": "{color.focus.action.external}", + "$type": "color", + "$value": "#0f62fe", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.focus}", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{color.focus.action.external}" + }, + "name": "token-color-focus-action-external", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "action", + "external" + ] + }, + { + "key": "{color.focus.critical.internal}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "default": "#a2191f", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.focusInset}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, + "key": "{color.focus.critical.internal}" + }, + "name": "token-color-focus-critical-internal", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "critical", + "internal" + ] + }, + { + "key": "{color.focus.critical.external}", + "$type": "color", + "$value": "#0f62fe", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#dd7578", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.focus}", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#dd7578", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{color.focus.critical.external}" + }, + "name": "token-color-focus-critical-external", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "critical", + "external" + ] + }, + { + "key": "{color.foreground.strong}", + "$type": "color", + "$value": "#161616", + "group": "semantic", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textPrimary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{color.foreground.strong}" + }, + "name": "token-color-foreground-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "strong" + ] + }, + { + "key": "{color.foreground.primary}", + "$type": "color", + "$value": "#161616", + "group": "semantic", + "$modes": { + "default": "#393939", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textPrimary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-600}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{color.foreground.primary}" + }, + "name": "token-color-foreground-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "primary" + ] + }, + { + "key": "{color.foreground.faint}", + "$type": "color", + "$value": "#525252", + "group": "semantic", + "$modes": { + "default": "#525252", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textSecondary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{color.foreground.faint}" + }, + "name": "token-color-foreground-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "faint" + ] + }, + { + "key": "{color.foreground.high-contrast}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textInverse}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{color.foreground.high-contrast}" + }, + "name": "token-color-foreground-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "high-contrast" + ] + }, + { + "key": "{color.foreground.disabled}", + "$type": "color", + "$value": "rgba(22, 22, 22, 0.25)", + "group": "semantic", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "rgba(22, 22, 22, 0.25)", + "cds-g10": "rgba(22, 22, 22, 0.25)", + "cds-g90": "rgba(244, 244, 244, 0.25)", + "cds-g100": "rgba(244, 244, 244, 0.25)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textDisabled}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textDisabled}", + "cds-g10": "{carbon.themes.g10.textDisabled}", + "cds-g90": "{carbon.themes.g90.textDisabled}", + "cds-g100": "{carbon.themes.g100.textDisabled}" + }, + "key": "{color.foreground.disabled}" + }, + "name": "token-color-foreground-disabled", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "disabled" + ] + }, + { + "key": "{color.foreground.action}", + "$type": "color", + "$value": "#0f62fe", + "group": "semantic", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#78a9ff", + "cds-g100": "#78a9ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.linkPrimary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.white.linkPrimary}", + "cds-g10": "{carbon.themes.g10.linkPrimary}", + "cds-g90": "{carbon.themes.g90.linkPrimary}", + "cds-g100": "{carbon.themes.g100.linkPrimary}" + }, + "key": "{color.foreground.action}" + }, + "name": "token-color-foreground-action", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "action" + ] + }, + { + "key": "{color.foreground.action-hover}", + "$type": "color", + "$value": "#0043ce", + "group": "semantic", + "$modes": { + "default": "#0043ce", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.linkPrimaryHover}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, + "key": "{color.foreground.action-hover}" + }, + "name": "token-color-foreground-action-hover", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "action-hover" + ] + }, + { + "key": "{color.foreground.action-active}", + "$type": "color", + "$value": "#0043ce", + "group": "semantic", + "$modes": { + "default": "#002d9c", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.linkPrimaryHover}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, + "key": "{color.foreground.action-active}" + }, + "name": "token-color-foreground-action-active", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "action-active" + ] + }, + { + "key": "{color.foreground.highlight}", + "$type": "color", + "$value": "#8a3ffc", + "group": "semantic", + "$modes": { + "default": "#a56eff", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.60}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, + "key": "{color.foreground.highlight}" + }, + "name": "token-color-foreground-highlight", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "highlight" + ] + }, + { + "key": "{color.foreground.highlight-on-surface}", + "$type": "color", + "$value": "#6929c4", + "group": "semantic", + "$modes": { + "default": "#8a3ffc", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#d4bbff", + "cds-g100": "#d4bbff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-300}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.30}", + "cds-g100": "{carbon.color.purple.30}" + }, + "key": "{color.foreground.highlight-on-surface}" + }, + "name": "token-color-foreground-highlight-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "highlight-on-surface" + ] + }, + { + "key": "{color.foreground.highlight-high-contrast}", + "$type": "color", + "$value": "#491d8b", + "group": "semantic", + "$modes": { + "default": "#31135e", + "cds-g0": "#491d8b", + "cds-g10": "#491d8b", + "cds-g90": "#e8daff", + "cds-g100": "#d4bbff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.80}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-500}", + "cds-g0": "{carbon.color.purple.80}", + "cds-g10": "{carbon.color.purple.80}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.30}" + }, + "key": "{color.foreground.highlight-high-contrast}" + }, + "name": "token-color-foreground-highlight-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "highlight-high-contrast" + ] + }, + { + "key": "{color.foreground.success}", + "$type": "color", + "$value": "#198038", + "group": "semantic", + "$modes": { + "default": "#24a148", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#42be65", + "cds-g100": "#42be65" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.60}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-200}", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.40}", + "cds-g100": "{carbon.color.green.40}" + }, + "key": "{color.foreground.success}" + }, + "name": "token-color-foreground-success", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "success" + ] + }, + { + "key": "{color.foreground.success-on-surface}", + "$type": "color", + "$value": "#0e6027", + "group": "semantic", + "$modes": { + "default": "#198038", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#6fdc8c", + "cds-g100": "#6fdc8c" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-300}", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.30}", + "cds-g100": "{carbon.color.green.30}" + }, + "key": "{color.foreground.success-on-surface}" + }, + "name": "token-color-foreground-success-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "success-on-surface" + ] + }, + { + "key": "{color.foreground.success-high-contrast}", + "$type": "color", + "$value": "#044317", + "group": "semantic", + "$modes": { + "default": "#044317", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.80}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-500}", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, + "key": "{color.foreground.success-high-contrast}" + }, + "name": "token-color-foreground-success-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "success-high-contrast" + ] + }, + { + "key": "{color.foreground.warning}", + "$type": "color", + "$value": "#8e6a00", + "group": "semantic", + "$modes": { + "default": "#ba4e00", + "cds-g0": "#8e6a00", + "cds-g10": "#8e6a00", + "cds-g90": "#d2a106", + "cds-g100": "#d2a106" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.60}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.yellow.60}", + "cds-g10": "{carbon.color.yellow.60}", + "cds-g90": "{carbon.color.yellow.40}", + "cds-g100": "{carbon.color.yellow.40}" + }, + "key": "{color.foreground.warning}" + }, + "name": "token-color-foreground-warning", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "warning" + ] + }, + { + "key": "{color.foreground.warning-on-surface}", + "$type": "color", + "$value": "#684e00", + "group": "semantic", + "$modes": { + "default": "#8a3800", + "cds-g0": "#684e00", + "cds-g10": "#684e00", + "cds-g90": "#f1c21b", + "cds-g100": "#f1c21b" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-300}", + "cds-g0": "{carbon.color.yellow.70}", + "cds-g10": "{carbon.color.yellow.70}", + "cds-g90": "{carbon.color.yellow.30}", + "cds-g100": "{carbon.color.yellow.30}" + }, + "key": "{color.foreground.warning-on-surface}" + }, + "name": "token-color-foreground-warning-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "warning-on-surface" + ] + }, + { + "key": "{color.foreground.warning-high-contrast}", + "$type": "color", + "$value": "#483700", + "group": "semantic", + "$modes": { + "default": "#3e1a00", + "cds-g0": "#483700", + "cds-g10": "#483700", + "cds-g90": "#fddc69", + "cds-g100": "#fddc69" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.80}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-500}", + "cds-g0": "{carbon.color.yellow.80}", + "cds-g10": "{carbon.color.yellow.80}", + "cds-g90": "{carbon.color.yellow.20}", + "cds-g100": "{carbon.color.yellow.20}" + }, + "key": "{color.foreground.warning-high-contrast}" + }, + "name": "token-color-foreground-warning-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "warning-high-contrast" + ] + }, + { + "key": "{color.foreground.critical}", + "$type": "color", + "$value": "#da1e28", + "group": "semantic", + "$modes": { + "default": "#da1e28", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#ff8389", + "cds-g100": "#ff8389" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.60}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-200}", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.40}", + "cds-g100": "{carbon.color.red.40}" + }, + "key": "{color.foreground.critical}" + }, + "name": "token-color-foreground-critical", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "critical" + ] + }, + { + "key": "{color.foreground.critical-on-surface}", + "$type": "color", + "$value": "#a2191f", + "group": "semantic", + "$modes": { + "default": "#a2191f", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffb3b8", + "cds-g100": "#ffb3b8" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.30}", + "cds-g100": "{carbon.color.red.30}" + }, + "key": "{color.foreground.critical-on-surface}" + }, + "name": "token-color-foreground-critical-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "critical-on-surface" + ] + }, + { + "key": "{color.foreground.critical-high-contrast}", + "$type": "color", + "$value": "#750e13", + "group": "semantic", + "$modes": { + "default": "#520408", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.80}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-500}", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, + "key": "{color.foreground.critical-high-contrast}" + }, + "name": "token-color-foreground-critical-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "critical-high-contrast" + ] + }, + { + "key": "{color.page.primary}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.background}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, + "key": "{color.page.primary}" + }, + "name": "token-color-page-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "page", + "primary" + ] + }, + { + "key": "{color.page.faint}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.background}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, + "key": "{color.page.faint}" + }, + "name": "token-color-page-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "page", + "faint" + ] + }, + { + "key": "{color.surface.primary}", + "$type": "color", + "$value": "#f4f4f4", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.layer01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, + "key": "{color.surface.primary}" + }, + "name": "token-color-surface-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "primary" + ] + }, + { + "key": "{color.surface.faint}", + "$type": "color", + "$value": "#f4f4f4", + "group": "semantic", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.layer01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, + "key": "{color.surface.faint}" + }, + "name": "token-color-surface-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "faint" + ] + }, + { + "key": "{color.surface.strong}", + "$type": "color", + "$value": "#e0e0e0", + "group": "semantic", + "$modes": { + "default": "#e0e0e0", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.layerAccent01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerAccent01}", + "cds-g10": "{carbon.themes.g10.layerAccent01}", + "cds-g90": "{carbon.themes.g90.layerAccent01}", + "cds-g100": "{carbon.themes.g100.layerAccent01}" + }, + "key": "{color.surface.strong}" + }, + "name": "token-color-surface-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "strong" + ] + }, + { + "key": "{color.surface.high-contrast}", + "$type": "color", + "$value": "#393939", + "group": "semantic", + "$modes": { + "default": "#161616", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.backgroundInverse}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "key": "{color.surface.high-contrast}" + }, + "name": "token-color-surface-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "high-contrast" + ] + }, + { + "key": "{color.surface.interactive}", + "$type": "color", + "$value": "#f4f4f4", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.layer01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, + "key": "{color.surface.interactive}" + }, + "name": "token-color-surface-interactive", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive" + ] + }, + { + "key": "{color.surface.interactive-hover}", + "$type": "color", + "$value": "#e8e8e8", + "group": "semantic", + "$modes": { + "default": "#e0e0e0", + "cds-g0": "#e8e8e8", + "cds-g10": "#e8e8e8", + "cds-g90": "#474747", + "cds-g100": "#333333" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.layerHover01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerHover01}", + "cds-g10": "{carbon.themes.g10.layerHover01}", + "cds-g90": "{carbon.themes.g90.layerHover01}", + "cds-g100": "{carbon.themes.g100.layerHover01}" + }, + "key": "{color.surface.interactive-hover}" + }, + "name": "token-color-surface-interactive-hover", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive-hover" + ] + }, + { + "key": "{color.surface.interactive-active}", + "$type": "color", + "$value": "#c6c6c6", + "group": "semantic", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.layerActive01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.white.layerActive01}", + "cds-g10": "{carbon.themes.g10.layerActive01}", + "cds-g90": "{carbon.themes.g90.layerActive01}", + "cds-g100": "{carbon.themes.g100.layerActive01}" + }, + "key": "{color.surface.interactive-active}" + }, + "name": "token-color-surface-interactive-active", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive-active" + ] + }, + { + "key": "{color.surface.interactive-disabled}", + "$type": "color", + "$value": "#c6c6c6", + "group": "semantic", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.30}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.color.gray.30}", + "cds-g10": "{carbon.color.gray.30}", + "cds-g90": "{carbon.color.gray.60}", + "cds-g100": "{carbon.color.gray.70}" + }, + "key": "{color.surface.interactive-disabled}" + }, + "name": "token-color-surface-interactive-disabled", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive-disabled" + ] + }, + { + "key": "{color.surface.action}", + "$type": "color", + "$value": "#d0e2ff", + "group": "semantic", + "$modes": { + "default": "#edf5ff", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0f62fe", + "cds-g100": "#0043ce" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.20}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-50}", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.60}", + "cds-g100": "{carbon.color.blue.70}" + }, + "key": "{color.surface.action}" + }, + "name": "token-color-surface-action", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "action" + ] + }, + { + "key": "{color.surface.highlight}", + "$type": "color", + "$value": "#e8daff", + "group": "semantic", + "$modes": { + "default": "#f6f2ff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.20}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-50}", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, + "key": "{color.surface.highlight}" + }, + "name": "token-color-surface-highlight", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "highlight" + ] + }, + { + "key": "{color.surface.success}", + "$type": "color", + "$value": "#a7f0ba", + "group": "semantic", + "$modes": { + "default": "#defbe6", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.20}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-50}", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, + "key": "{color.surface.success}" + }, + "name": "token-color-surface-success", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "success" + ] + }, + { + "key": "{color.surface.warning}", + "$type": "color", + "$value": "#fcf4d6", + "group": "semantic", + "$modes": { + "default": "#fff2e8", + "cds-g0": "#fcf4d6", + "cds-g10": "#fcf4d6", + "cds-g90": "#684e00", + "cds-g100": "#684e00" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.10}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-50}", + "cds-g0": "{carbon.color.yellow.10}", + "cds-g10": "{carbon.color.yellow.10}", + "cds-g90": "{carbon.color.yellow.70}", + "cds-g100": "{carbon.color.yellow.70}" + }, + "key": "{color.surface.warning}" + }, + "name": "token-color-surface-warning", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "warning" + ] + }, + { + "key": "{color.surface.critical}", + "$type": "color", + "$value": "#ffd7d9", + "group": "semantic", + "$modes": { + "default": "#fff1f1", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.20}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-50}", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, + "key": "{color.surface.critical}" + }, + "name": "token-color-surface-critical", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "critical" + ] + }, + { + "key": "{color.hashicorp.brand}", + "$type": "color", + "$value": "#000000", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.hashicorp-brand}", + "group": "branding", + "key": "{color.hashicorp.brand}" + }, + "name": "token-color-hashicorp-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "hashicorp", + "brand" + ] + }, + { + "key": "{color.boundary.brand}", + "$type": "color", + "$value": "#f24c53", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-brand}", + "group": "branding", + "key": "{color.boundary.brand}" + }, + "name": "token-color-boundary-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "brand" + ] + }, + { + "key": "{color.boundary.foreground}", + "$type": "color", + "$value": "#cf2d32", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-500}", + "group": "branding", + "key": "{color.boundary.foreground}" + }, + "name": "token-color-boundary-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "foreground" + ] + }, + { + "key": "{color.boundary.surface}", + "$type": "color", + "$value": "#ffecec", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-50}", + "group": "branding", + "key": "{color.boundary.surface}" + }, + "name": "token-color-boundary-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "surface" + ] + }, + { + "key": "{color.boundary.border}", + "$type": "color", + "$value": "#fbd7d8", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-100}", + "group": "branding", + "key": "{color.boundary.border}" + }, + "name": "token-color-boundary-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "border" + ] + }, + { + "key": "{color.boundary.gradient.primary.start}", + "$type": "color", + "$value": "#f97076", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-300}", + "group": "branding", + "key": "{color.boundary.gradient.primary.start}" + }, + "name": "token-color-boundary-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.boundary.gradient.primary.stop}", + "$type": "color", + "$value": "#db363b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-400}", + "group": "branding", + "key": "{color.boundary.gradient.primary.stop}" + }, + "name": "token-color-boundary-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.boundary.gradient.faint.start}", + "$type": "color", + "$value": "#fffafa", + "group": "branding", + "comment": "this is the 'boundary-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffafa", + "group": "branding", + "comment": "this is the 'boundary-50' value at 25% opacity on white", + "key": "{color.boundary.gradient.faint.start}" + }, + "name": "token-color-boundary-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.boundary.gradient.faint.stop}", + "$type": "color", + "$value": "#ffecec", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-50}", + "group": "branding", + "key": "{color.boundary.gradient.faint.stop}" + }, + "name": "token-color-boundary-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.consul.brand}", + "$type": "color", + "$value": "#e03875", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-brand}", + "group": "branding", + "key": "{color.consul.brand}" + }, + "name": "token-color-consul-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "brand" + ] + }, + { + "key": "{color.consul.foreground}", + "$type": "color", + "$value": "#d01c5b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-500}", + "group": "branding", + "key": "{color.consul.foreground}" + }, + "name": "token-color-consul-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "foreground" + ] + }, + { + "key": "{color.consul.surface}", + "$type": "color", + "$value": "#ffe9f1", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-50}", + "group": "branding", + "key": "{color.consul.surface}" + }, + "name": "token-color-consul-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "surface" + ] + }, + { + "key": "{color.consul.border}", + "$type": "color", + "$value": "#ffcede", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-100}", + "group": "branding", + "key": "{color.consul.border}" + }, + "name": "token-color-consul-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "border" + ] + }, + { + "key": "{color.consul.gradient.primary.start}", + "$type": "color", + "$value": "#ff99be", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-300}", + "group": "branding", + "key": "{color.consul.gradient.primary.start}" + }, + "name": "token-color-consul-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.consul.gradient.primary.stop}", + "$type": "color", + "$value": "#da306e", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-400}", + "group": "branding", + "key": "{color.consul.gradient.primary.stop}" + }, + "name": "token-color-consul-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.consul.gradient.faint.start}", + "$type": "color", + "$value": "#fff9fb", + "group": "branding", + "comment": "this is the 'consul-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fff9fb", + "group": "branding", + "comment": "this is the 'consul-50' value at 25% opacity on white", + "key": "{color.consul.gradient.faint.start}" + }, + "name": "token-color-consul-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.consul.gradient.faint.stop}", + "$type": "color", + "$value": "#ffe9f1", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-50}", + "group": "branding", + "key": "{color.consul.gradient.faint.stop}" + }, + "name": "token-color-consul-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.hcp.brand}", + "$type": "color", + "$value": "#000000", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.hcp-brand}", + "group": "branding", + "key": "{color.hcp.brand}" + }, + "name": "token-color-hcp-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "hcp", + "brand" + ] + }, + { + "key": "{color.nomad.brand}", + "$type": "color", + "$value": "#06d092", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-brand}", + "group": "branding", + "key": "{color.nomad.brand}" + }, + "name": "token-color-nomad-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "brand" + ] + }, + { + "key": "{color.nomad.foreground}", + "$type": "color", + "$value": "#008661", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-500}", + "group": "branding", + "key": "{color.nomad.foreground}" + }, + "name": "token-color-nomad-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "foreground" + ] + }, + { + "key": "{color.nomad.surface}", + "$type": "color", + "$value": "#d3fdeb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-50}", + "group": "branding", + "key": "{color.nomad.surface}" + }, + "name": "token-color-nomad-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "surface" + ] + }, + { + "key": "{color.nomad.border}", + "$type": "color", + "$value": "#bff3dd", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-100}", + "group": "branding", + "key": "{color.nomad.border}" + }, + "name": "token-color-nomad-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "border" + ] + }, + { + "key": "{color.nomad.gradient.primary.start}", + "$type": "color", + "$value": "#bff3dd", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-100}", + "group": "branding", + "key": "{color.nomad.gradient.primary.start}" + }, + "name": "token-color-nomad-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.nomad.gradient.primary.stop}", + "$type": "color", + "$value": "#60dea9", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-200}", + "group": "branding", + "key": "{color.nomad.gradient.primary.stop}" + }, + "name": "token-color-nomad-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.nomad.gradient.faint.start}", + "$type": "color", + "$value": "#f3fff9", + "group": "branding", + "comment": "this is the 'nomad-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#f3fff9", + "group": "branding", + "comment": "this is the 'nomad-50' value at 25% opacity on white", + "key": "{color.nomad.gradient.faint.start}" + }, + "name": "token-color-nomad-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.nomad.gradient.faint.stop}", + "$type": "color", + "$value": "#d3fdeb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-50}", + "group": "branding", + "key": "{color.nomad.gradient.faint.stop}" + }, + "name": "token-color-nomad-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.packer.brand}", + "$type": "color", + "$value": "#02a8ef", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-brand}", + "group": "branding", + "key": "{color.packer.brand}" + }, + "name": "token-color-packer-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "brand" + ] + }, + { + "key": "{color.packer.foreground}", + "$type": "color", + "$value": "#007eb4", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-500}", + "group": "branding", + "key": "{color.packer.foreground}" + }, + "name": "token-color-packer-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "foreground" + ] + }, + { + "key": "{color.packer.surface}", + "$type": "color", + "$value": "#d4f2ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-50}", + "group": "branding", + "key": "{color.packer.surface}" + }, + "name": "token-color-packer-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "surface" + ] + }, + { + "key": "{color.packer.border}", + "$type": "color", + "$value": "#b4e4ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-100}", + "group": "branding", + "key": "{color.packer.border}" + }, + "name": "token-color-packer-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "border" + ] + }, + { + "key": "{color.packer.gradient.primary.start}", + "$type": "color", + "$value": "#b4e4ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-100}", + "group": "branding", + "key": "{color.packer.gradient.primary.start}" + }, + "name": "token-color-packer-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.packer.gradient.primary.stop}", + "$type": "color", + "$value": "#63d0ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-200}", + "group": "branding", + "key": "{color.packer.gradient.primary.stop}" + }, + "name": "token-color-packer-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.packer.gradient.faint.start}", + "$type": "color", + "$value": "#f3fcff", + "group": "branding", + "comment": "this is the 'packer-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#F3FCFF", + "group": "branding", + "comment": "this is the 'packer-50' value at 25% opacity on white", + "key": "{color.packer.gradient.faint.start}" + }, + "name": "token-color-packer-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.packer.gradient.faint.stop}", + "$type": "color", + "$value": "#d4f2ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-50}", + "group": "branding", + "key": "{color.packer.gradient.faint.stop}" + }, + "name": "token-color-packer-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.terraform.brand}", + "$type": "color", + "$value": "#7b42bc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-brand}", + "group": "branding", + "key": "{color.terraform.brand}" + }, + "name": "token-color-terraform-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "brand" + ] + }, + { + "key": "{color.terraform.brand-on-dark}", + "$type": "color", + "$value": "#a067da", + "group": "branding", + "comment": "this is an alternative brand color meant to be used on dark backgrounds", + "original": { + "$type": "color", + "$value": "#a067da", + "group": "branding", + "comment": "this is an alternative brand color meant to be used on dark backgrounds", + "key": "{color.terraform.brand-on-dark}" + }, + "name": "token-color-terraform-brand-on-dark", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "brand-on-dark" + ] + }, + { + "key": "{color.terraform.foreground}", + "$type": "color", + "$value": "#773cb4", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-500}", + "group": "branding", + "key": "{color.terraform.foreground}" + }, + "name": "token-color-terraform-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "foreground" + ] + }, + { + "key": "{color.terraform.surface}", + "$type": "color", + "$value": "#f4ecff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-50}", + "group": "branding", + "key": "{color.terraform.surface}" + }, + "name": "token-color-terraform-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "surface" + ] + }, + { + "key": "{color.terraform.border}", + "$type": "color", + "$value": "#ebdbfc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-100}", + "group": "branding", + "key": "{color.terraform.border}" + }, + "name": "token-color-terraform-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "border" + ] + }, + { + "key": "{color.terraform.gradient.primary.start}", + "$type": "color", + "$value": "#bb8deb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-300}", + "group": "branding", + "key": "{color.terraform.gradient.primary.start}" + }, + "name": "token-color-terraform-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.terraform.gradient.primary.stop}", + "$type": "color", + "$value": "#844fba", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-400}", + "group": "branding", + "key": "{color.terraform.gradient.primary.stop}" + }, + "name": "token-color-terraform-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.terraform.gradient.faint.start}", + "$type": "color", + "$value": "#fcfaff", + "group": "branding", + "comment": "this is the 'terraform-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fcfaff", + "group": "branding", + "comment": "this is the 'terraform-50' value at 25% opacity on white", + "key": "{color.terraform.gradient.faint.start}" + }, + "name": "token-color-terraform-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.terraform.gradient.faint.stop}", + "$type": "color", + "$value": "#f4ecff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-50}", + "group": "branding", + "key": "{color.terraform.gradient.faint.stop}" + }, + "name": "token-color-terraform-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.vagrant.brand}", + "$type": "color", + "$value": "#1868f2", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-brand}", + "group": "branding", + "key": "{color.vagrant.brand}" + }, + "name": "token-color-vagrant-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "brand" + ] + }, + { + "key": "{color.vagrant.foreground}", + "$type": "color", + "$value": "#1c61d8", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-500}", + "group": "branding", + "key": "{color.vagrant.foreground}" + }, + "name": "token-color-vagrant-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "foreground" + ] + }, + { + "key": "{color.vagrant.surface}", + "$type": "color", + "$value": "#d6ebff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-50}", + "group": "branding", + "key": "{color.vagrant.surface}" + }, + "name": "token-color-vagrant-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "surface" + ] + }, + { + "key": "{color.vagrant.border}", + "$type": "color", + "$value": "#c7dbfc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-100}", + "group": "branding", + "key": "{color.vagrant.border}" + }, + "name": "token-color-vagrant-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "border" + ] + }, + { + "key": "{color.vagrant.gradient.primary.start}", + "$type": "color", + "$value": "#639cff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-300}", + "group": "branding", + "key": "{color.vagrant.gradient.primary.start}" + }, + "name": "token-color-vagrant-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.vagrant.gradient.primary.stop}", + "$type": "color", + "$value": "#2e71e5", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-400}", + "group": "branding", + "key": "{color.vagrant.gradient.primary.stop}" + }, + "name": "token-color-vagrant-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.vagrant.gradient.faint.start}", + "$type": "color", + "$value": "#f4faff", + "group": "branding", + "comment": "this is the 'vagrant-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#f4faff", + "group": "branding", + "comment": "this is the 'vagrant-50' value at 25% opacity on white", + "key": "{color.vagrant.gradient.faint.start}" + }, + "name": "token-color-vagrant-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.vagrant.gradient.faint.stop}", + "$type": "color", + "$value": "#d6ebff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-50}", + "group": "branding", + "key": "{color.vagrant.gradient.faint.stop}" + }, + "name": "token-color-vagrant-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.vault-radar.brand}", + "$type": "color", + "$value": "#ffcf25", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-brand}", + "group": "branding", + "key": "{color.vault-radar.brand}" + }, + "name": "token-color-vault-radar-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "brand" + ] + }, + { + "key": "{color.vault-radar.brand-alt}", + "$type": "color", + "$value": "#000000", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work", + "original": { + "$type": "color", + "$value": "#000", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work", + "key": "{color.vault-radar.brand-alt}" + }, + "name": "token-color-vault-radar-brand-alt", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "brand-alt" + ] + }, + { + "key": "{color.vault-radar.foreground}", + "$type": "color", + "$value": "#9a6f00", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-500}", + "group": "branding", + "key": "{color.vault-radar.foreground}" + }, + "name": "token-color-vault-radar-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "foreground" + ] + }, + { + "key": "{color.vault-radar.surface}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-50}", + "group": "branding", + "key": "{color.vault-radar.surface}" + }, + "name": "token-color-vault-radar-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "surface" + ] + }, + { + "key": "{color.vault-radar.border}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-100}", + "group": "branding", + "key": "{color.vault-radar.border}" + }, + "name": "token-color-vault-radar-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "border" + ] + }, + { + "key": "{color.vault-radar.gradient.primary.start}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-100}", + "group": "branding", + "key": "{color.vault-radar.gradient.primary.start}" + }, + "name": "token-color-vault-radar-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.vault-radar.gradient.primary.stop}", + "$type": "color", + "$value": "#ffe543", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-200}", + "group": "branding", + "key": "{color.vault-radar.gradient.primary.stop}" + }, + "name": "token-color-vault-radar-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.vault-radar.gradient.faint.start}", + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-radar-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-radar-50' value at 25% opacity on white", + "key": "{color.vault-radar.gradient.faint.start}" + }, + "name": "token-color-vault-radar-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.vault-radar.gradient.faint.stop}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-50}", + "group": "branding", + "key": "{color.vault-radar.gradient.faint.stop}" + }, + "name": "token-color-vault-radar-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.vault-secrets.brand}", + "$type": "color", + "$value": "#ffcf25", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-brand}", + "group": "branding", + "key": "{color.vault-secrets.brand}" + }, + "name": "token-color-vault-secrets-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "brand" + ] + }, + { + "key": "{color.vault-secrets.brand-alt}", + "group": "branding", + "$type": "color", + "$value": "#000000", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work", + "original": { + "group": "branding", + "$type": "color", + "$value": "#000", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work", + "key": "{color.vault-secrets.brand-alt}" + }, + "name": "token-color-vault-secrets-brand-alt", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "brand-alt" + ] + }, + { + "key": "{color.vault-secrets.foreground}", + "$type": "color", + "$value": "#9a6f00", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-500}", + "group": "branding", + "key": "{color.vault-secrets.foreground}" + }, + "name": "token-color-vault-secrets-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "foreground" + ] + }, + { + "key": "{color.vault-secrets.surface}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-50}", + "group": "branding", + "key": "{color.vault-secrets.surface}" + }, + "name": "token-color-vault-secrets-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "surface" + ] + }, + { + "key": "{color.vault-secrets.border}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-100}", + "group": "branding", + "key": "{color.vault-secrets.border}" + }, + "name": "token-color-vault-secrets-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "border" + ] + }, + { + "key": "{color.vault-secrets.gradient.primary.start}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-100}", + "group": "branding", + "key": "{color.vault-secrets.gradient.primary.start}" + }, + "name": "token-color-vault-secrets-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.vault-secrets.gradient.primary.stop}", + "$type": "color", + "$value": "#ffe543", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-200}", + "group": "branding", + "key": "{color.vault-secrets.gradient.primary.stop}" + }, + "name": "token-color-vault-secrets-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.vault-secrets.gradient.faint.start}", + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-secrets-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-secrets-50' value at 25% opacity on white", + "key": "{color.vault-secrets.gradient.faint.start}" + }, + "name": "token-color-vault-secrets-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.vault-secrets.gradient.faint.stop}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-50}", + "group": "branding", + "key": "{color.vault-secrets.gradient.faint.stop}" + }, + "name": "token-color-vault-secrets-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.vault.brand}", + "$type": "color", + "$value": "#ffcf25", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-brand}", + "group": "branding", + "key": "{color.vault.brand}" + }, + "name": "token-color-vault-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "brand" + ] + }, + { + "key": "{color.vault.brand-alt}", + "$type": "color", + "$value": "#000000", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work", + "original": { + "$type": "color", + "$value": "#000", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work", + "key": "{color.vault.brand-alt}" + }, + "name": "token-color-vault-brand-alt", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "brand-alt" + ] + }, + { + "key": "{color.vault.foreground}", + "$type": "color", + "$value": "#9a6f00", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-500}", + "group": "branding", + "key": "{color.vault.foreground}" + }, + "name": "token-color-vault-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "foreground" + ] + }, + { + "key": "{color.vault.surface}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-50}", + "group": "branding", + "key": "{color.vault.surface}" + }, + "name": "token-color-vault-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "surface" + ] + }, + { + "key": "{color.vault.border}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-100}", + "group": "branding", + "key": "{color.vault.border}" + }, + "name": "token-color-vault-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "border" + ] + }, + { + "key": "{color.vault.gradient.primary.start}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-100}", + "group": "branding", + "key": "{color.vault.gradient.primary.start}" + }, + "name": "token-color-vault-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.vault.gradient.primary.stop}", + "$type": "color", + "$value": "#ffe543", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-200}", + "group": "branding", + "key": "{color.vault.gradient.primary.stop}" + }, + "name": "token-color-vault-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.vault.gradient.faint.start}", + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-50' value at 25% opacity on white", + "key": "{color.vault.gradient.faint.start}" + }, + "name": "token-color-vault-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.vault.gradient.faint.stop}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-50}", + "group": "branding", + "key": "{color.vault.gradient.faint.stop}" + }, + "name": "token-color-vault-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.waypoint.brand}", + "$type": "color", + "$value": "#14c6cb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-brand}", + "group": "branding", + "key": "{color.waypoint.brand}" + }, + "name": "token-color-waypoint-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "brand" + ] + }, + { + "key": "{color.waypoint.foreground}", + "$type": "color", + "$value": "#008196", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-500}", + "group": "branding", + "key": "{color.waypoint.foreground}" + }, + "name": "token-color-waypoint-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "foreground" + ] + }, + { + "key": "{color.waypoint.surface}", + "$type": "color", + "$value": "#e0fcff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-50}", + "group": "branding", + "key": "{color.waypoint.surface}" + }, + "name": "token-color-waypoint-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "surface" + ] + }, + { + "key": "{color.waypoint.border}", + "$type": "color", + "$value": "#cbf1f3", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-100}", + "group": "branding", + "key": "{color.waypoint.border}" + }, + "name": "token-color-waypoint-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "border" + ] + }, + { + "key": "{color.waypoint.gradient.primary.start}", + "$type": "color", + "$value": "#cbf1f3", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-100}", + "group": "branding", + "key": "{color.waypoint.gradient.primary.start}" + }, + "name": "token-color-waypoint-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.waypoint.gradient.primary.stop}", + "$type": "color", + "$value": "#62d4dc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-200}", + "group": "branding", + "key": "{color.waypoint.gradient.primary.stop}" + }, + "name": "token-color-waypoint-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.waypoint.gradient.faint.start}", + "$type": "color", + "$value": "#f6feff", + "group": "branding", + "comment": "this is the 'waypoint-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#f6feff", + "group": "branding", + "comment": "this is the 'waypoint-50' value at 25% opacity on white", + "key": "{color.waypoint.gradient.faint.start}" + }, + "name": "token-color-waypoint-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.waypoint.gradient.faint.stop}", + "$type": "color", + "$value": "#e0fcff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-50}", + "group": "branding", + "key": "{color.waypoint.gradient.faint.stop}" + }, + "name": "token-color-waypoint-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{elevation.inset.box-shadow}", + "$value": "none", + "$modes": { + "default": "inset 0px 1px 2px 1px #5252521a", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.inset.box-shadow-01}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.inset.box-shadow}" + }, + "name": "token-elevation-inset-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "inset", + "box-shadow" + ] + }, + { + "key": "{elevation.low.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 1px 1px 0px #5252520d, 0px 2px 2px 0px #5252520d", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.low.box-shadow-01}, {elevation.low.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.low.box-shadow}" + }, + "name": "token-elevation-low-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "low", + "box-shadow" + ] + }, + { + "key": "{elevation.mid.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #5252521a, 0px 8px 16px -10px #52525233", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.mid.box-shadow-01}, {elevation.mid.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.mid.box-shadow}" + }, + "name": "token-elevation-mid-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "mid", + "box-shadow" + ] + }, + { + "key": "{elevation.high.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #52525226, 0px 16px 16px -10px #52525233", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.high.box-shadow-01}, {elevation.high.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.high.box-shadow}" + }, + "name": "token-elevation-high-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "high", + "box-shadow" + ] + }, + { + "key": "{elevation.higher.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #5252521a, 0px 12px 28px 0px #52525240", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.higher.box-shadow-01}, {elevation.higher.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.higher.box-shadow}" + }, + "name": "token-elevation-higher-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "higher", + "box-shadow" + ] + }, + { + "key": "{elevation.overlay.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #39393940, 0px 12px 24px 0px #39393959", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.overlay.box-shadow-01}, {elevation.overlay.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.overlay.box-shadow}" + }, + "name": "token-elevation-overlay-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "overlay", + "box-shadow" + ] + }, + { + "key": "{surface.inset.box-shadow}", + "$value": "none", + "$modes": { + "default": "inset 0 0 0 1px #5252524d, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.inset.box-shadow-border}, {elevation.inset.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.inset.box-shadow}" + }, + "name": "token-surface-inset-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "inset", + "box-shadow" + ] + }, + { + "key": "{surface.base.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525233", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.base.box-shadow-border}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.base.box-shadow}" + }, + "name": "token-surface-base-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "base", + "box-shadow" + ] + }, + { + "key": "{surface.low.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525226, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.low.box-shadow-border}, {elevation.low.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.low.box-shadow}" + }, + "name": "token-surface-low-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "low", + "box-shadow" + ] + }, + { + "key": "{surface.mid.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525226, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.mid.box-shadow-border}, {elevation.mid.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.mid.box-shadow}" + }, + "name": "token-surface-mid-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "mid", + "box-shadow" + ] + }, + { + "key": "{surface.high.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525240, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.high.box-shadow-border}, {elevation.high.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.high.box-shadow}" + }, + "name": "token-surface-high-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "high", + "box-shadow" + ] + }, + { + "key": "{surface.higher.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525233, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.higher.box-shadow-border}, {elevation.higher.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.higher.box-shadow}" + }, + "name": "token-surface-higher-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "higher", + "box-shadow" + ] + }, + { + "key": "{surface.overlay.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #39393940, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.overlay.box-shadow-border}, {elevation.overlay.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.overlay.box-shadow}" + }, + "name": "token-surface-overlay-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "overlay", + "box-shadow" + ] + }, + { + "key": "{focus-ring.action.box-shadow}", + "$value": "inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe", + "original": { + "$value": "{focus-ring.action.internal-box-shadow}, {focus-ring.action.external-box-shadow}", + "key": "{focus-ring.action.box-shadow}" + }, + "name": "token-focus-ring-action-box-shadow", + "attributes": { + "category": "focus-ring" + }, + "path": [ + "focus-ring", + "action", + "box-shadow" + ] + }, + { + "key": "{focus-ring.critical.box-shadow}", + "$value": "inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe", + "original": { + "$value": "{focus-ring.critical.internal-box-shadow}, {focus-ring.critical.external-box-shadow}", + "key": "{focus-ring.critical.box-shadow}" + }, + "name": "token-focus-ring-critical-box-shadow", + "attributes": { + "category": "focus-ring" + }, + "path": [ + "focus-ring", + "critical", + "box-shadow" + ] + }, + { + "key": "{app-footer.focus.color.action.internal}", + "$type": "color", + "$value": "#0f62fe", + "$modes": { + "default": "var(--token-color-focus-action-internal)", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.focus}", + "$modes": { + "default": "var(--token-color-focus-action-internal)", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{app-footer.focus.color.action.internal}" + }, + "name": "token-app-footer-focus-color-action-internal", + "attributes": { + "category": "app-footer" + }, + "path": [ + "app-footer", + "focus", + "color", + "action", + "internal" + ] + }, + { + "key": "{app-header.height}", + "$type": "dimension", + "$value": "60px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "60", + "unit": "px", + "key": "{app-header.height}" + }, + "name": "token-app-header-height", + "attributes": { + "category": "app-header" + }, + "path": [ + "app-header", + "height" + ] + }, + { + "key": "{app-header.home-link.size}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{app-header.home-link.size}" + }, + "name": "token-app-header-home-link-size", + "attributes": { + "category": "app-header" + }, + "path": [ + "app-header", + "home-link", + "size" + ] + }, + { + "key": "{app-header.logo.size}", + "$type": "dimension", + "$value": "28px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "28", + "unit": "px", + "key": "{app-header.logo.size}" + }, + "name": "token-app-header-logo-size", + "attributes": { + "category": "app-header" + }, + "path": [ + "app-header", + "logo", + "size" + ] + }, + { + "key": "{app-side-nav.wrapper.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{app-side-nav.wrapper.border.width}" + }, + "name": "token-app-side-nav-wrapper-border-width", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "border", + "width" + ] + }, + { + "key": "{app-side-nav.wrapper.border.color}", + "$type": "color", + "$value": "var(--token-color-palette-neutral-200)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-palette-neutral-200)", + "group": "components", + "key": "{app-side-nav.wrapper.border.color}" + }, + "name": "token-app-side-nav-wrapper-border-color", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "border", + "color" + ] + }, + { + "key": "{app-side-nav.wrapper.padding.horizontal}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.horizontal}" + }, + "name": "token-app-side-nav-wrapper-padding-horizontal", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "horizontal" + ] + }, + { + "key": "{app-side-nav.wrapper.padding.vertical}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.vertical}" + }, + "name": "token-app-side-nav-wrapper-padding-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "vertical" + ] + }, + { + "key": "{app-side-nav.wrapper.padding.horizontal-minimized}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.horizontal-minimized}" + }, + "name": "token-app-side-nav-wrapper-padding-horizontal-minimized", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "horizontal-minimized" + ] + }, + { + "key": "{app-side-nav.wrapper.padding.vertical-minimized}", + "$type": "dimension", + "$value": "22px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "22", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.vertical-minimized}" + }, + "name": "token-app-side-nav-wrapper-padding-vertical-minimized", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "vertical-minimized" + ] + }, + { + "key": "{app-side-nav.toggle-button.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{app-side-nav.toggle-button.border.radius}" + }, + "name": "token-app-side-nav-toggle-button-border-radius", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "toggle-button", + "border", + "radius" + ] + }, + { + "key": "{app-side-nav.header.home-link.padding}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{app-side-nav.header.home-link.padding}" + }, + "name": "token-app-side-nav-header-home-link-padding", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "home-link", + "padding" + ] + }, + { + "key": "{app-side-nav.header.home-link.logo-size}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{app-side-nav.header.home-link.logo-size}" + }, + "name": "token-app-side-nav-header-home-link-logo-size", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "home-link", + "logo-size" + ] + }, + { + "key": "{app-side-nav.header.home-link.logo-size-minimized}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{app-side-nav.header.home-link.logo-size-minimized}" + }, + "name": "token-app-side-nav-header-home-link-logo-size-minimized", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "home-link", + "logo-size-minimized" + ] + }, + { + "key": "{app-side-nav.header.actions.spacing}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.header.actions.spacing}" + }, + "name": "token-app-side-nav-header-actions-spacing", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "actions", + "spacing" + ] + }, + { + "key": "{app-side-nav.body.list.margin-vertical}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{app-side-nav.body.list.margin-vertical}" + }, + "name": "token-app-side-nav-body-list-margin-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list", + "margin-vertical" + ] + }, + { + "key": "{app-side-nav.body.list-item.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{app-side-nav.body.list-item.height}" + }, + "name": "token-app-side-nav-body-list-item-height", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "height" + ] + }, + { + "key": "{app-side-nav.body.list-item.padding.horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.body.list-item.padding.horizontal}" + }, + "name": "token-app-side-nav-body-list-item-padding-horizontal", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "padding", + "horizontal" + ] + }, + { + "key": "{app-side-nav.body.list-item.padding.vertical}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{app-side-nav.body.list-item.padding.vertical}" + }, + "name": "token-app-side-nav-body-list-item-padding-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "padding", + "vertical" + ] + }, + { + "key": "{app-side-nav.body.list-item.spacing-vertical}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{app-side-nav.body.list-item.spacing-vertical}" + }, + "name": "token-app-side-nav-body-list-item-spacing-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "spacing-vertical" + ] + }, + { + "key": "{app-side-nav.body.list-item.content-spacing-horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.body.list-item.content-spacing-horizontal}" + }, + "name": "token-app-side-nav-body-list-item-content-spacing-horizontal", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "content-spacing-horizontal" + ] + }, + { + "key": "{app-side-nav.body.list-item.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{app-side-nav.body.list-item.border-radius}" + }, + "name": "token-app-side-nav-body-list-item-border-radius", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "border-radius" + ] + }, + { + "key": "{app-side-nav.color.foreground.primary}", + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "key": "{app-side-nav.color.foreground.primary}" + }, + "name": "token-app-side-nav-color-foreground-primary", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "foreground", + "primary" + ] + }, + { + "key": "{app-side-nav.color.foreground.strong}", + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "key": "{app-side-nav.color.foreground.strong}" + }, + "name": "token-app-side-nav-color-foreground-strong", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "foreground", + "strong" + ] + }, + { + "key": "{app-side-nav.color.foreground.faint}", + "$type": "color", + "$value": "var(--token-color-foreground-faint)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-foreground-faint)", + "group": "components", + "key": "{app-side-nav.color.foreground.faint}" + }, + "name": "token-app-side-nav-color-foreground-faint", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "foreground", + "faint" + ] + }, + { + "key": "{app-side-nav.color.surface.primary}", + "$type": "color", + "$value": "var(--token-color-surface-faint)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-surface-faint)", + "group": "components", + "key": "{app-side-nav.color.surface.primary}" + }, + "name": "token-app-side-nav-color-surface-primary", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "surface", + "primary" + ] + }, + { + "key": "{app-side-nav.color.surface.interactive-hover}", + "$type": "color", + "$value": "var(--token-color-surface-interactive-hover)", + "group": "semantic", + "original": { + "$type": "color", + "$value": "var(--token-color-surface-interactive-hover)", + "group": "semantic", + "key": "{app-side-nav.color.surface.interactive-hover}" + }, + "name": "token-app-side-nav-color-surface-interactive-hover", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "surface", + "interactive-hover" + ] + }, + { + "key": "{app-side-nav.color.surface.interactive-active}", + "$type": "color", + "$value": "var(--token-color-palette-neutral-300)", + "group": "semantic", + "original": { + "$type": "color", + "$value": "var(--token-color-palette-neutral-300)", + "group": "semantic", + "key": "{app-side-nav.color.surface.interactive-active}" + }, + "name": "token-app-side-nav-color-surface-interactive-active", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "surface", + "interactive-active" + ] + }, + { + "key": "{badge-count.padding.horizontal.small}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge-count.padding.horizontal.small}" + }, + "name": "token-badge-count-padding-horizontal-small", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "small" + ] + }, + { + "key": "{badge-count.padding.horizontal.medium}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge-count.padding.horizontal.medium}" + }, + "name": "token-badge-count-padding-horizontal-medium", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "medium" + ] + }, + { + "key": "{badge-count.padding.horizontal.large}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge-count.padding.horizontal.large}" + }, + "name": "token-badge-count-padding-horizontal-large", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "large" + ] + }, + { + "key": "{badge.height.small}", + "$type": "dimension", + "$value": "18px", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "18", + "cds-g10": "18", + "cds-g90": "18", + "cds-g100": "18" + }, + "original": { + "$type": "dimension", + "$value": "18", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "18", + "cds-g10": "18", + "cds-g90": "18", + "cds-g100": "18" + }, + "key": "{badge.height.small}" + }, + "name": "token-badge-height-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "small" + ] + }, + { + "key": "{badge.height.medium}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{badge.height.medium}" + }, + "name": "token-badge-height-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "medium" + ] + }, + { + "key": "{badge.height.large}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{badge.height.large}" + }, + "name": "token-badge-height-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "large" + ] + }, + { + "key": "{badge.padding.horizontal.small}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge.padding.horizontal.small}" + }, + "name": "token-badge-padding-horizontal-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "small" + ] + }, + { + "key": "{badge.padding.horizontal.medium}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge.padding.horizontal.medium}" + }, + "name": "token-badge-padding-horizontal-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "medium" + ] + }, + { + "key": "{badge.padding.horizontal.large}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.padding.horizontal.large}" + }, + "name": "token-badge-padding-horizontal-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "large" + ] + }, + { + "key": "{badge.padding.vertical.small}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "$modes": { + "default": "2", + "cds-g0": "1", + "cds-g10": "1", + "cds-g90": "1", + "cds-g100": "1" + }, + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "$modes": { + "default": "2", + "cds-g0": "1", + "cds-g10": "1", + "cds-g90": "1", + "cds-g100": "1" + }, + "key": "{badge.padding.vertical.small}" + }, + "name": "token-badge-padding-vertical-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "small" + ] + }, + { + "key": "{badge.padding.vertical.medium}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{badge.padding.vertical.medium}" + }, + "name": "token-badge-padding-vertical-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "medium" + ] + }, + { + "key": "{badge.padding.vertical.large}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{badge.padding.vertical.large}" + }, + "name": "token-badge-padding-vertical-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "large" + ] + }, + { + "key": "{badge.gap.small}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.small}" + }, + "name": "token-badge-gap-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "small" + ] + }, + { + "key": "{badge.gap.medium}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.medium}" + }, + "name": "token-badge-gap-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "medium" + ] + }, + { + "key": "{badge.gap.large}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.large}" + }, + "name": "token-badge-gap-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "large" + ] + }, + { + "key": "{badge.typography.font-size.small}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "12", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.small}" + }, + "name": "token-badge-typography-font-size-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "small" + ] + }, + { + "key": "{badge.typography.font-size.medium}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "12", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.medium}" + }, + "name": "token-badge-typography-font-size-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "medium" + ] + }, + { + "key": "{badge.typography.font-size.large}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "12", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.large}" + }, + "name": "token-badge-typography-font-size-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "large" + ] + }, + { + "key": "{badge.typography.line-height.small}", + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "original": { + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "key": "{badge.typography.line-height.small}" + }, + "name": "token-badge-typography-line-height-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "small" + ] + }, + { + "key": "{badge.typography.line-height.medium}", + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "original": { + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "key": "{badge.typography.line-height.medium}" + }, + "name": "token-badge-typography-line-height-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "medium" + ] + }, + { + "key": "{badge.typography.line-height.large}", + "$type": "number", + "$value": 1, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1, + "cds-g10": 1, + "cds-g90": 1, + "cds-g100": 1 + }, + "original": { + "$type": "number", + "$value": 1, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1, + "cds-g10": 1, + "cds-g90": 1, + "cds-g100": 1 + }, + "key": "{badge.typography.line-height.large}" + }, + "name": "token-badge-typography-line-height-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "large" + ] + }, + { + "key": "{badge.foreground.color.neutral.filled}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.white}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral.filled}" + }, + "name": "token-badge-foreground-color-neutral-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "filled" + ] + }, + { + "key": "{badge.foreground.color.neutral.inverted}", + "$type": "color", + "$value": "#e0e0e0", + "$modes": { + "default": "#ffffff", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.20}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.color.gray.20}", + "cds-g10": "{carbon.color.gray.20}", + "cds-g90": "{carbon.color.gray.100}", + "cds-g100": "{carbon.color.gray.100}" + }, + "key": "{badge.foreground.color.neutral.inverted}" + }, + "name": "token-badge-foreground-color-neutral-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.neutral.outlined}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.white}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral.outlined}" + }, + "name": "token-badge-foreground-color-neutral-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "outlined" + ] + }, + { + "key": "{badge.foreground.color.neutral-dark-mode.filled}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.neutral-dark-mode.filled}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "filled" + ] + }, + { + "key": "{badge.foreground.color.neutral-dark-mode.inverted}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.white}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral-dark-mode.inverted}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.neutral-dark-mode.outlined}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "comments": { + "cds": "In Figma the `cds` value uses a token `Tag/HighContrast/TagColor` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "comments": { + "cds": "In Figma the `cds` value uses a token `Tag/HighContrast/TagColor` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.neutral-dark-mode.outlined}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "outlined" + ] + }, + { + "key": "{badge.foreground.color.highlight.filled}", + "$type": "color", + "$value": "#6929c4", + "comment": "we don't use `highlight-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#6929c4", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorPurple.white}", + "comment": "we don't use `highlight-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.purple-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorPurple.g100}" + }, + "key": "{badge.foreground.color.highlight.filled}" + }, + "name": "token-badge-foreground-color-highlight-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "filled" + ] + }, + { + "key": "{badge.foreground.color.highlight.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.highlight.inverted}" + }, + "name": "token-badge-foreground-color-highlight-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.highlight.outlined}", + "$type": "color", + "$value": "#6929c4", + "$modes": { + "default": "#8a3ffc", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorPurple.white}", + "$modes": { + "default": "{color.foreground.highlight}", + "cds-g0": "{carbon.themes.tagTokens.tagColorPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorPurple.g100}" + }, + "key": "{badge.foreground.color.highlight.outlined}" + }, + "name": "token-badge-foreground-color-highlight-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "outlined" + ] + }, + { + "key": "{badge.foreground.color.success.filled}", + "$type": "color", + "$value": "#0e6027", + "comment": "we don't use `success-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#0e6027", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGreen.white}", + "comment": "we don't use `success-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.green-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.foreground.color.success.filled}" + }, + "name": "token-badge-foreground-color-success-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "filled" + ] + }, + { + "key": "{badge.foreground.color.success.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.success.inverted}" + }, + "name": "token-badge-foreground-color-success-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.success.outlined}", + "$type": "color", + "$value": "#0e6027", + "$modes": { + "default": "#198038", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGreen.white}", + "$modes": { + "default": "{color.foreground.success}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.foreground.color.success.outlined}" + }, + "name": "token-badge-foreground-color-success-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "outlined" + ] + }, + { + "key": "{badge.foreground.color.warning.filled}", + "$type": "color", + "$value": "#8a3800", + "$modes": { + "default": "#5e2900", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "hds": "we don't use `warning-on-surface` for accessibility (better contrast)", + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.70}", + "$modes": { + "default": "{color.palette.amber-400}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "hds": "we don't use `warning-on-surface` for accessibility (better contrast)", + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.warning.filled}" + }, + "name": "token-badge-foreground-color-warning-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "filled" + ] + }, + { + "key": "{badge.foreground.color.warning.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.warning.inverted}" + }, + "name": "token-badge-foreground-color-warning-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.warning.outlined}", + "$type": "color", + "$value": "#8a3800", + "$modes": { + "default": "#8e6a00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.70}", + "$modes": { + "default": "{color.foreground.warning}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.warning.outlined}" + }, + "name": "token-badge-foreground-color-warning-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "outlined" + ] + }, + { + "key": "{badge.foreground.color.critical.filled}", + "$type": "color", + "$value": "#a2191f", + "comment": "we don't use `critical-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#750e13", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorRed.white}", + "comment": "we don't use `critical-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.foreground.color.critical.filled}" + }, + "name": "token-badge-foreground-color-critical-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "filled" + ] + }, + { + "key": "{badge.foreground.color.critical.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.critical.inverted}" + }, + "name": "token-badge-foreground-color-critical-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.critical.outlined}", + "$type": "color", + "$value": "#a2191f", + "$modes": { + "default": "#da1e28", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorRed.white}", + "$modes": { + "default": "{color.foreground.critical}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.foreground.color.critical.outlined}" + }, + "name": "token-badge-foreground-color-critical-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "outlined" + ] + }, + { + "key": "{badge.surface.color.neutral.filled}", + "$type": "color", + "$value": "#e0e0e0", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "$modes": { + "default": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{badge.surface.color.neutral.filled}" + }, + "name": "token-badge-surface-color-neutral-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "filled" + ] + }, + { + "key": "{badge.surface.color.neutral.inverted}", + "$type": "color", + "$value": "#393939", + "$modes": { + "default": "#525252", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead", + "original": { + "$type": "color", + "$value": "{carbon.themes.white.backgroundInverse}", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead", + "key": "{badge.surface.color.neutral.inverted}" + }, + "name": "token-badge-surface-color-neutral-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "inverted" + ] + }, + { + "key": "{badge.surface.color.neutral.outlined}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{badge.surface.color.neutral.outlined}" + }, + "name": "token-badge-surface-color-neutral-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "outlined" + ] + }, + { + "key": "{badge.surface.color.neutral-dark-mode.filled}", + "$type": "color", + "$value": "#393939", + "$modes": { + "default": "#525252", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component", + "original": { + "$type": "color", + "$value": "{carbon.themes.white.backgroundInverse}", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component", + "key": "{badge.surface.color.neutral-dark-mode.filled}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "filled" + ] + }, + { + "key": "{badge.surface.color.neutral-dark-mode.inverted}", + "$type": "color", + "$value": "#e0e0e0", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{badge.surface.color.neutral-dark-mode.inverted}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "inverted" + ] + }, + { + "key": "{badge.surface.color.neutral-dark-mode.outlined}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{badge.surface.color.neutral-dark-mode.outlined}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "outlined" + ] + }, + { + "key": "{badge.surface.color.highlight.filled}", + "$type": "color", + "$value": "#e8daff", + "comment": "we don't use `surface-highlight` for accessibility (better contrast)", + "$modes": { + "default": "#e8daff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundPurple.white}", + "comment": "we don't use `surface-highlight` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.purple-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundPurple.g100}" + }, + "key": "{badge.surface.color.highlight.filled}" + }, + "name": "token-badge-surface-color-highlight-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "highlight", + "filled" + ] + }, + { + "key": "{badge.surface.color.highlight.inverted}", + "$type": "color", + "$value": "#6929c4", + "$modes": { + "default": "#a56eff", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.70}", + "$modes": { + "default": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, + "key": "{badge.surface.color.highlight.inverted}" + }, + "name": "token-badge-surface-color-highlight-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "highlight", + "inverted" + ] + }, + { + "key": "{badge.surface.color.success.filled}", + "$type": "color", + "$value": "#a7f0ba", + "comment": "we don't use `surface-success` for accessibility (better contrast)", + "$modes": { + "default": "#a7f0ba", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGreen.white}", + "comment": "we don't use `surface-success` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.green-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGreen.g100}" + }, + "key": "{badge.surface.color.success.filled}" + }, + "name": "token-badge-surface-color-success-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "success", + "filled" + ] + }, + { + "key": "{badge.surface.color.success.inverted}", + "$type": "color", + "$value": "#0e6027", + "$modes": { + "default": "#24a148", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGreen.white}", + "$modes": { + "default": "{color.palette.green-200}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.surface.color.success.inverted}" + }, + "name": "token-badge-surface-color-success-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "success", + "inverted" + ] + }, + { + "key": "{badge.surface.color.warning.filled}", + "$type": "color", + "$value": "#ffd9be", + "comment": "we don't use `surface-warning` for accessibility (better contrast)", + "$modes": { + "default": "#ffd9be", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.20}", + "comment": "we don't use `surface-warning` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.surface.color.warning.filled}" + }, + "name": "token-badge-surface-color-warning-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "warning", + "filled" + ] + }, + { + "key": "{badge.surface.color.warning.inverted}", + "$type": "color", + "$value": "#8a3800", + "$modes": { + "default": "#ba4e00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.70}", + "$modes": { + "default": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.surface.color.warning.inverted}" + }, + "name": "token-badge-surface-color-warning-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "warning", + "inverted" + ] + }, + { + "key": "{badge.surface.color.critical.filled}", + "$type": "color", + "$value": "#ffd7d9", + "comment": "we don't use `surface-critical` for accessibility (better contrast)", + "$modes": { + "default": "#ffd7d9", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundRed.white}", + "comment": "we don't use `surface-critical` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.red-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundRed.g100}" + }, + "key": "{badge.surface.color.critical.filled}" + }, + "name": "token-badge-surface-color-critical-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "critical", + "filled" + ] + }, + { + "key": "{badge.surface.color.critical.inverted}", + "$type": "color", + "$value": "#a2191f", + "$modes": { + "default": "#da1e28", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorRed.white}", + "$modes": { + "default": "{color.palette.red-200}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.surface.color.critical.inverted}" + }, + "name": "token-badge-surface-color-critical-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "critical", + "inverted" + ] + }, + { + "key": "{badge.border.radius}", + "$type": "dimension", + "$value": "1000000000px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "1000000000px", + "cds-g10": "1000000000px", + "cds-g90": "1000000000px", + "cds-g100": "1000000000px" + }, + "original": { + "$type": "dimension", + "$value": "{border.radius.rounded}", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "{border.radius.rounded}", + "cds-g10": "{border.radius.rounded}", + "cds-g90": "{border.radius.rounded}", + "cds-g100": "{border.radius.rounded}" + }, + "key": "{badge.border.radius}" + }, + "name": "token-badge-border-radius", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "border", + "radius" + ] + }, + { + "key": "{badge.icon.size.small}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{badge.icon.size.small}" + }, + "name": "token-badge-icon-size-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "small" + ] + }, + { + "key": "{badge.icon.size.medium}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{badge.icon.size.medium}" + }, + "name": "token-badge-icon-size-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "medium" + ] + }, + { + "key": "{badge.icon.size.large}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{badge.icon.size.large}" + }, + "name": "token-badge-icon-size-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "large" + ] + }, + { + "key": "{button.height.small}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "$modes": { + "default": "28", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "$modes": { + "default": "28", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "key": "{button.height.small}" + }, + "name": "token-button-height-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "small" + ] + }, + { + "key": "{button.height.medium}", + "$type": "dimension", + "$value": "40px", + "unit": "px", + "$modes": { + "default": "36", + "cds-g0": "40", + "cds-g10": "40", + "cds-g90": "40", + "cds-g100": "40" + }, + "original": { + "$type": "dimension", + "$value": "40", + "unit": "px", + "$modes": { + "default": "36", + "cds-g0": "40", + "cds-g10": "40", + "cds-g90": "40", + "cds-g100": "40" + }, + "key": "{button.height.medium}" + }, + "name": "token-button-height-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "medium" + ] + }, + { + "key": "{button.height.large}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "$modes": { + "default": "48", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "$modes": { + "default": "48", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "key": "{button.height.large}" + }, + "name": "token-button-height-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "large" + ] + }, + { + "key": "{button.padding.horizontal.small}", + "$type": "dimension", + "$value": "15px", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "15", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.small}" + }, + "name": "token-button-padding-horizontal-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "small" + ] + }, + { + "key": "{button.padding.horizontal.medium}", + "$type": "dimension", + "$value": "15px", + "unit": "px", + "$modes": { + "default": "15", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "15", + "unit": "px", + "$modes": { + "default": "15", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.medium}" + }, + "name": "token-button-padding-horizontal-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "medium" + ] + }, + { + "key": "{button.padding.horizontal.large}", + "$type": "dimension", + "$value": "15px", + "unit": "px", + "$modes": { + "default": "19", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "15", + "unit": "px", + "$modes": { + "default": "19", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.large}" + }, + "name": "token-button-padding-horizontal-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "large" + ] + }, + { + "key": "{button.padding.vertical.small}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.small}" + }, + "name": "token-button-padding-vertical-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "small" + ] + }, + { + "key": "{button.padding.vertical.medium}", + "$type": "dimension", + "$value": "10px", + "unit": "px", + "$modes": { + "default": "9", + "cds-g0": "10", + "cds-g10": "10", + "cds-g90": "10", + "cds-g100": "10" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "10", + "unit": "px", + "$modes": { + "default": "9", + "cds-g0": "10", + "cds-g10": "10", + "cds-g90": "10", + "cds-g100": "10" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.medium}" + }, + "name": "token-button-padding-vertical-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "medium" + ] + }, + { + "key": "{button.padding.vertical.large}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "14", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.large}" + }, + "name": "token-button-padding-vertical-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "large" + ] + }, + { + "key": "{button.gap}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "key": "{button.gap}" + }, + "name": "token-button-gap", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "gap" + ] + }, + { + "key": "{button.typography.font-size.small}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.small}" + }, + "name": "token-button-typography-font-size-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "small" + ] + }, + { + "key": "{button.typography.font-size.medium}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.medium}" + }, + "name": "token-button-typography-font-size-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "medium" + ] + }, + { + "key": "{button.typography.font-size.large}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.large}" + }, + "name": "token-button-typography-font-size-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "large" + ] + }, + { + "key": "{button.typography.line-height.small}", + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)", + "$modes": { + "default": 0.9286, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)", + "$modes": { + "default": 0.9286, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.small}" + }, + "name": "token-button-typography-line-height-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "small" + ] + }, + { + "key": "{button.typography.line-height.medium}", + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 1.1429", + "$modes": { + "default": 1.1429, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 1.1429", + "$modes": { + "default": 1.1429, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.medium}" + }, + "name": "token-button-typography-line-height-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "medium" + ] + }, + { + "key": "{button.typography.line-height.large}", + "$type": "number", + "$value": 1.2858, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 1.2858, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.large}" + }, + "name": "token-button-typography-line-height-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "large" + ] + }, + { + "key": "{button.foreground.color.primary.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.default}" + }, + "name": "token-button-foreground-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "default" + ] + }, + { + "key": "{button.foreground.color.primary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.hover}" + }, + "name": "token-button-foreground-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "hover" + ] + }, + { + "key": "{button.foreground.color.primary.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.focus}" + }, + "name": "token-button-foreground-color-primary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "focus" + ] + }, + { + "key": "{button.foreground.color.primary.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.active}" + }, + "name": "token-button-foreground-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "active" + ] + }, + { + "key": "{button.foreground.color.secondary.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.default}" + }, + "name": "token-button-foreground-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "default" + ] + }, + { + "key": "{button.foreground.color.secondary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.hover}" + }, + "name": "token-button-foreground-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "hover" + ] + }, + { + "key": "{button.foreground.color.secondary.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.focus}" + }, + "name": "token-button-foreground-color-secondary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "focus" + ] + }, + { + "key": "{button.foreground.color.secondary.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.active}" + }, + "name": "token-button-foreground-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "active" + ] + }, + { + "key": "{button.foreground.color.tertiary.default}", + "$type": "color", + "$value": "#0f62fe", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiary.white}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiary.g100}" + }, + "key": "{button.foreground.color.tertiary.default}" + }, + "name": "token-button-foreground-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "default" + ] + }, + { + "key": "{button.foreground.color.tertiary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#0043ce", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textInverse}", + "$modes": { + "default": "{color.foreground.action-hover}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.hover}" + }, + "name": "token-button-foreground-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "hover" + ] + }, + { + "key": "{button.foreground.color.tertiary.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textInverse}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.focus}" + }, + "name": "token-button-foreground-color-tertiary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "focus" + ] + }, + { + "key": "{button.foreground.color.tertiary.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#0043ce", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textInverse}", + "$modes": { + "default": "{color.foreground.action-active}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.active}" + }, + "name": "token-button-foreground-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "active" + ] + }, + { + "key": "{button.foreground.color.critical.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#a2191f", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textOnColor}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.default}" + }, + "name": "token-button-foreground-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "default" + ] + }, + { + "key": "{button.foreground.color.critical.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.hover}" + }, + "name": "token-button-foreground-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "hover" + ] + }, + { + "key": "{button.foreground.color.critical.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#a2191f", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textOnColor}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.focus}" + }, + "name": "token-button-foreground-color-critical-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "focus" + ] + }, + { + "key": "{button.foreground.color.critical.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.active}" + }, + "name": "token-button-foreground-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "active" + ] + }, + { + "key": "{button.foreground.color.disabled}", + "$type": "color", + "$value": "#8d8d8d", + "$modes": { + "default": "rgba(22, 22, 22, 0.25)", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "rgba(255, 255, 255, 0.25)", + "cds-g100": "rgba(255, 255, 255, 0.25)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textOnColorDisabled}", + "$modes": { + "default": "{color.foreground.disabled}", + "cds-g0": "{carbon.themes.white.textOnColorDisabled}", + "cds-g10": "{carbon.themes.g10.textOnColorDisabled}", + "cds-g90": "{carbon.themes.g90.textOnColorDisabled}", + "cds-g100": "{carbon.themes.g100.textOnColorDisabled}" + }, + "key": "{button.foreground.color.disabled}" + }, + "name": "token-button-foreground-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "disabled" + ] + }, + { + "key": "{button.surface.color.primary.default}", + "$type": "color", + "$value": "#0f62fe", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimary.white}", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimary.g100}" + }, + "key": "{button.surface.color.primary.default}" + }, + "name": "token-button-surface-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "default" + ] + }, + { + "key": "{button.surface.color.primary.hover}", + "$type": "color", + "$value": "#0050e6", + "$modes": { + "default": "#0043ce", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#0050e6", + "cds-g100": "#0050e6" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimaryHover.white}", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimaryHover.g100}" + }, + "key": "{button.surface.color.primary.hover}" + }, + "name": "token-button-surface-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "hover" + ] + }, + { + "key": "{button.surface.color.primary.focus}", + "$type": "color", + "$value": "#0f62fe", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimary.white}", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimary.g100}" + }, + "key": "{button.surface.color.primary.focus}" + }, + "name": "token-button-surface-color-primary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "focus" + ] + }, + { + "key": "{button.surface.color.primary.active}", + "$type": "color", + "$value": "#002d9c", + "$modes": { + "default": "#002d9c", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#002d9c", + "cds-g100": "#002d9c" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimaryActive.white}", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimaryActive.g100}" + }, + "key": "{button.surface.color.primary.active}" + }, + "name": "token-button-surface-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "active" + ] + }, + { + "key": "{button.surface.color.secondary.default}", + "$type": "color", + "$value": "#393939", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#6f6f6f", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondary.white}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondary.g100}" + }, + "key": "{button.surface.color.secondary.default}" + }, + "name": "token-button-surface-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "default" + ] + }, + { + "key": "{button.surface.color.secondary.hover}", + "$type": "color", + "$value": "#474747", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#474747", + "cds-g10": "#474747", + "cds-g90": "#5e5e5e", + "cds-g100": "#5e5e5e" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondaryHover.white}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondaryHover.g100}" + }, + "key": "{button.surface.color.secondary.hover}" + }, + "name": "token-button-surface-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "hover" + ] + }, + { + "key": "{button.surface.color.secondary.focus}", + "$type": "color", + "$value": "#393939", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#6f6f6f", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondary.white}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondary.g100}" + }, + "key": "{button.surface.color.secondary.focus}" + }, + "name": "token-button-surface-color-secondary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "focus" + ] + }, + { + "key": "{button.surface.color.secondary.active}", + "$type": "color", + "$value": "#6f6f6f", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#6f6f6f", + "cds-g10": "#6f6f6f", + "cds-g90": "#393939", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondaryActive.white}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondaryActive.g100}" + }, + "key": "{button.surface.color.secondary.active}" + }, + "name": "token-button-surface-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "active" + ] + }, + { + "key": "{button.surface.color.tertiary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{button.surface.color.tertiary.default}" + }, + "name": "token-button-surface-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "default" + ] + }, + { + "key": "{button.surface.color.tertiary.hover}", + "$type": "color", + "$value": "#0050e6", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiaryHover.white}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryHover.g100}" + }, + "key": "{button.surface.color.tertiary.hover}" + }, + "name": "token-button-surface-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "hover" + ] + }, + { + "key": "{button.surface.color.tertiary.focus}", + "$type": "color", + "$value": "#0050e6", + "$modes": { + "default": "transparent", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiaryHover.white}", + "$modes": { + "default": "transparent", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryHover.g100}" + }, + "key": "{button.surface.color.tertiary.focus}" + }, + "name": "token-button-surface-color-tertiary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "focus" + ] + }, + { + "key": "{button.surface.color.tertiary.active}", + "$type": "color", + "$value": "#002d9c", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiaryActive.white}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryActive.g100}" + }, + "key": "{button.surface.color.tertiary.active}" + }, + "name": "token-button-surface-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "active" + ] + }, + { + "key": "{button.surface.color.critical.default}", + "$type": "color", + "$value": "#da1e28", + "$modes": { + "default": "#ffd7d9", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerPrimary.white}", + "$modes": { + "default": "{color.surface.critical}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerPrimary.g100}" + }, + "key": "{button.surface.color.critical.default}" + }, + "name": "token-button-surface-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "default" + ] + }, + { + "key": "{button.surface.color.critical.hover}", + "$type": "color", + "$value": "#b81921", + "$modes": { + "default": "#a2191f", + "cds-g0": "#b81921", + "cds-g10": "#b81921", + "cds-g90": "#b81921", + "cds-g100": "#b81921" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerHover.white}", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerHover.g100}" + }, + "key": "{button.surface.color.critical.hover}" + }, + "name": "token-button-surface-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "hover" + ] + }, + { + "key": "{button.surface.color.critical.focus}", + "$type": "color", + "$value": "#da1e28", + "$modes": { + "default": "#ffd7d9", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerPrimary.white}", + "$modes": { + "default": "{color.surface.critical}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerPrimary.g100}" + }, + "key": "{button.surface.color.critical.focus}" + }, + "name": "token-button-surface-color-critical-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "focus" + ] + }, + { + "key": "{button.surface.color.critical.active}", + "$type": "color", + "$value": "#750e13", + "$modes": { + "default": "#750e13", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#750e13", + "cds-g100": "#750e13" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerActive.white}", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerActive.g100}" + }, + "key": "{button.surface.color.critical.active}" + }, + "name": "token-button-surface-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "active" + ] + }, + { + "key": "{button.surface.color.disabled}", + "$type": "color", + "$value": "#c6c6c6", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDisabled.white}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDisabled.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDisabled.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDisabled.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDisabled.g100}" + }, + "key": "{button.surface.color.disabled}" + }, + "name": "token-button-surface-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "disabled" + ] + }, + { + "key": "{button.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{button.border.width}" + }, + "name": "token-button-border-width", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "width" + ] + }, + { + "key": "{button.border.radius}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{button.border.radius}" + }, + "name": "token-button-border-radius", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "radius" + ] + }, + { + "key": "{button.border.color.primary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#0043ce", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.default}" + }, + "name": "token-button-border-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "default" + ] + }, + { + "key": "{button.border.color.primary.hover}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#0043ce", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.hover}" + }, + "name": "token-button-border-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "hover" + ] + }, + { + "key": "{button.border.color.primary.focus.internal}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#ffffff", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.primary.focus.internal}" + }, + "name": "token-button-border-color-primary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "focus", + "internal" + ] + }, + { + "key": "{button.border.color.primary.focus.external}", + "$type": "color", + "$value": "#ff00ff", + "$modes": { + "default": "#0f62fe", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "magenta", + "$modes": { + "default": "{color.focus.action.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.primary.focus.external}" + }, + "name": "token-button-border-color-primary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "focus", + "external" + ] + }, + { + "key": "{button.border.color.primary.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#002d9c", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.active}" + }, + "name": "token-button-border-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "active" + ] + }, + { + "key": "{button.border.color.secondary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.default}" + }, + "name": "token-button-border-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "default" + ] + }, + { + "key": "{button.border.color.secondary.hover}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.hover}" + }, + "name": "token-button-border-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "hover" + ] + }, + { + "key": "{button.border.color.secondary.focus.internal}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#ffffff", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.secondary.focus.internal}" + }, + "name": "token-button-border-color-secondary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "focus", + "internal" + ] + }, + { + "key": "{button.border.color.secondary.focus.external}", + "$type": "color", + "$value": "#ff00ff", + "$modes": { + "default": "#0f62fe", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "magenta", + "$modes": { + "default": "{color.focus.action.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.secondary.focus.external}" + }, + "name": "token-button-border-color-secondary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "focus", + "external" + ] + }, + { + "key": "{button.border.color.secondary.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.active}" + }, + "name": "token-button-border-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "active" + ] + }, + { + "key": "{button.border.color.tertiary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{button.border.color.tertiary.default}" + }, + "name": "token-button-border-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "default" + ] + }, + { + "key": "{button.border.color.tertiary.hover}", + "$type": "color", + "$value": "#8d8d8d", + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "key": "{button.border.color.tertiary.hover}" + }, + "name": "token-button-border-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "hover" + ] + }, + { + "key": "{button.border.color.tertiary.focus.internal}", + "$type": "color", + "$value": "#ffffff", + "original": { + "$type": "color", + "$value": "{color.focus.action.internal}", + "key": "{button.border.color.tertiary.focus.internal}" + }, + "name": "token-button-border-color-tertiary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "focus", + "internal" + ] + }, + { + "key": "{button.border.color.tertiary.focus.external}", + "$type": "color", + "$value": "#0f62fe", + "original": { + "$type": "color", + "$value": "{color.focus.action.external}", + "key": "{button.border.color.tertiary.focus.external}" + }, + "name": "token-button-border-color-tertiary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "focus", + "external" + ] + }, + { + "key": "{button.border.color.tertiary.active}", + "$type": "color", + "$value": "#8d8d8d", + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "key": "{button.border.color.tertiary.active}" + }, + "name": "token-button-border-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "active" + ] + }, + { + "key": "{button.border.color.critical.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#a2191f", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.default}" + }, + "name": "token-button-border-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "default" + ] + }, + { + "key": "{button.border.color.critical.hover}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#750e13", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.hover}" + }, + "name": "token-button-border-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "hover" + ] + }, + { + "key": "{button.border.color.critical.focus.internal}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#ffffff", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.critical.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.critical.focus.internal}" + }, + "name": "token-button-border-color-critical-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "focus", + "internal" + ] + }, + { + "key": "{button.border.color.critical.focus.external}", + "$type": "color", + "$value": "#ff00ff", + "$modes": { + "default": "#0f62fe", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "magenta", + "$modes": { + "default": "{color.focus.critical.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.critical.focus.external}" + }, + "name": "token-button-border-color-critical-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "focus", + "external" + ] + }, + { + "key": "{button.border.color.critical.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#750e13", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.active}" + }, + "name": "token-button-border-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "active" + ] + }, + { + "key": "{button.border.color.disabled}", + "$type": "color", + "$value": "#c6c6c6", + "original": { + "$type": "color", + "$value": "{color.border.primary}", + "key": "{button.border.color.disabled}" + }, + "name": "token-button-border-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "disabled" + ] + }, + { + "key": "{button.focus.border.width}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{button.focus.border.width}" + }, + "name": "token-button-focus-border-width", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "focus", + "border", + "width" + ] + }, + { + "key": "{button.icon.size.small}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.small}" + }, + "name": "token-button-icon-size-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "small" + ] + }, + { + "key": "{button.icon.size.medium}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.medium}" + }, + "name": "token-button-icon-size-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "medium" + ] + }, + { + "key": "{button.icon.size.large}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.large}" + }, + "name": "token-button-icon-size-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "large" + ] + }, + { + "key": "{dismiss-button.size}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "key": "{dismiss-button.size}" + }, + "name": "token-dismiss-button-size", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "size" + ] + }, + { + "key": "{dismiss-button.foreground.color.default}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#525252", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.iconPrimary}", + "$modes": { + "default": "{color.foreground.faint}", + "cds-g0": "{carbon.themes.white.iconPrimary}", + "cds-g10": "{carbon.themes.g10.iconPrimary}", + "cds-g90": "{carbon.themes.g90.iconPrimary}", + "cds-g100": "{carbon.themes.g100.iconPrimary}" + }, + "key": "{dismiss-button.foreground.color.default}" + }, + "name": "token-dismiss-button-foreground-color-default", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "foreground", + "color", + "default" + ] + }, + { + "key": "{dismiss-button.foreground.color.active}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.iconPrimary}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.white.iconPrimary}", + "cds-g10": "{carbon.themes.g10.iconPrimary}", + "cds-g90": "{carbon.themes.g90.iconPrimary}", + "cds-g100": "{carbon.themes.g100.iconPrimary}" + }, + "key": "{dismiss-button.foreground.color.active}" + }, + "name": "token-dismiss-button-foreground-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "foreground", + "color", + "active" + ] + }, + { + "key": "{dismiss-button.surface.color.hover}", + "$type": "color", + "$value": "rgba(141, 141, 141, 0.12)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "rgba(141, 141, 141, 0.12)", + "cds-g10": "rgba(141, 141, 141, 0.12)", + "cds-g90": "rgba(141, 141, 141, 0.16)", + "cds-g100": "rgba(141, 141, 141, 0.16)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.backgroundHover}", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "{carbon.themes.white.backgroundHover}", + "cds-g10": "{carbon.themes.g10.backgroundHover}", + "cds-g90": "{carbon.themes.g90.backgroundHover}", + "cds-g100": "{carbon.themes.g100.backgroundHover}" + }, + "key": "{dismiss-button.surface.color.hover}" + }, + "name": "token-dismiss-button-surface-color-hover", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "surface", + "color", + "hover" + ] + }, + { + "key": "{dismiss-button.surface.color.active}", + "$type": "color", + "$value": "rgba(141, 141, 141, 0.5)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "rgba(141, 141, 141, 0.5)", + "cds-g10": "rgba(141, 141, 141, 0.5)", + "cds-g90": "rgba(141, 141, 141, 0.4)", + "cds-g100": "rgba(141, 141, 141, 0.4)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.backgroundActive}", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "{carbon.themes.white.backgroundActive}", + "cds-g10": "{carbon.themes.g10.backgroundActive}", + "cds-g90": "{carbon.themes.g90.backgroundActive}", + "cds-g100": "{carbon.themes.g100.backgroundActive}" + }, + "key": "{dismiss-button.surface.color.active}" + }, + "name": "token-dismiss-button-surface-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "surface", + "color", + "active" + ] + }, + { + "key": "{dismiss-button.border.color.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{dismiss-button.border.color.active}" + }, + "name": "token-dismiss-button-border-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "border", + "color", + "active" + ] + }, + { + "key": "{dismiss-button.icon.size}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "20", + "cds-g10": "20", + "cds-g90": "20", + "cds-g100": "20" + }, + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "20", + "cds-g10": "20", + "cds-g90": "20", + "cds-g100": "20" + }, + "key": "{dismiss-button.icon.size}" + }, + "name": "token-dismiss-button-icon-size", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "icon", + "size" + ] + }, + { + "key": "{form.label.color}", + "$type": "color", + "$value": "#161616", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.strong}", + "group": "components", + "key": "{form.label.color}" + }, + "name": "token-form-label-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "label", + "color" + ] + }, + { + "key": "{form.legend.color}", + "$type": "color", + "$value": "#161616", + "group": "components", + "original": { + "$type": "color", + "$value": "{form.label.color}", + "group": "components", + "key": "{form.legend.color}" + }, + "name": "token-form-legend-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "legend", + "color" + ] + }, + { + "key": "{form.helper-text.color}", + "$type": "color", + "$value": "#525252", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.helper-text.color}" + }, + "name": "token-form-helper-text-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "helper-text", + "color" + ] + }, + { + "key": "{form.indicator.optional.color}", + "$type": "color", + "$value": "#525252", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.indicator.optional.color}" + }, + "name": "token-form-indicator-optional-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "indicator", + "optional", + "color" + ] + }, + { + "key": "{form.error.color}", + "$type": "color", + "$value": "#a2191f", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "components", + "key": "{form.error.color}" + }, + "name": "token-form-error-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "error", + "color" + ] + }, + { + "key": "{form.error.icon-size}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "14", + "unit": "px", + "key": "{form.error.icon-size}" + }, + "name": "token-form-error-icon-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "error", + "icon-size" + ] + }, + { + "key": "{form.checkbox.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.checkbox.size}" + }, + "name": "token-form-checkbox-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "size" + ] + }, + { + "key": "{form.checkbox.border.radius}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{form.checkbox.border.radius}" + }, + "name": "token-form-checkbox-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "border", + "radius" + ] + }, + { + "key": "{form.checkbox.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.checkbox.border.width}" + }, + "name": "token-form-checkbox-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "border", + "width" + ] + }, + { + "key": "{form.checkbox.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.checkbox.background-image.size}" + }, + "name": "token-form-checkbox-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "size" + ] + }, + { + "key": "{form.checkbox.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url}" + }, + "name": "token-form-checkbox-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url" + ] + }, + { + "key": "{form.checkbox.background-image.data-url-indeterminate}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url-indeterminate}" + }, + "name": "token-form-checkbox-background-image-data-url-indeterminate", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url-indeterminate" + ] + }, + { + "key": "{form.checkbox.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url-disabled}" + }, + "name": "token-form-checkbox-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url-disabled" + ] + }, + { + "key": "{form.checkbox.background-image.data-url-indeterminate-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url-indeterminate-disabled}" + }, + "name": "token-form-checkbox-background-image-data-url-indeterminate-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url-indeterminate-disabled" + ] + }, + { + "key": "{form.control.base.foreground.value-color}", + "$type": "color", + "$value": "#161616", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.strong}", + "group": "components", + "key": "{form.control.base.foreground.value-color}" + }, + "name": "token-form-control-base-foreground-value-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "foreground", + "value-color" + ] + }, + { + "key": "{form.control.base.foreground.placeholder-color}", + "$type": "color", + "$value": "#525252", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.control.base.foreground.placeholder-color}" + }, + "name": "token-form-control-base-foreground-placeholder-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "foreground", + "placeholder-color" + ] + }, + { + "key": "{form.control.base.surface-color.default}", + "$type": "color", + "$value": "#f4f4f4", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.interactive}", + "group": "components", + "key": "{form.control.base.surface-color.default}" + }, + "name": "token-form-control-base-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "surface-color", + "default" + ] + }, + { + "key": "{form.control.base.surface-color.hover}", + "$type": "color", + "$value": "#e8e8e8", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.interactive-hover}", + "group": "components", + "key": "{form.control.base.surface-color.hover}" + }, + "name": "token-form-control-base-surface-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "surface-color", + "hover" + ] + }, + { + "key": "{form.control.base.border-color.default}", + "$type": "color", + "$value": "#8d8d8d", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-400}", + "group": "components", + "key": "{form.control.base.border-color.default}" + }, + "name": "token-form-control-base-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "border-color", + "default" + ] + }, + { + "key": "{form.control.base.border-color.hover}", + "$type": "color", + "$value": "#525252", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "group": "components", + "key": "{form.control.base.border-color.hover}" + }, + "name": "token-form-control-base-border-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "border-color", + "hover" + ] + }, + { + "key": "{form.control.checked.foreground-color}", + "$type": "color", + "$value": "#ffffff", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "group": "components", + "key": "{form.control.checked.foreground-color}" + }, + "name": "token-form-control-checked-foreground-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "foreground-color" + ] + }, + { + "key": "{form.control.checked.surface-color.default}", + "$type": "color", + "$value": "#0f62fe", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "group": "components", + "key": "{form.control.checked.surface-color.default}" + }, + "name": "token-form-control-checked-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "surface-color", + "default" + ] + }, + { + "key": "{form.control.checked.surface-color.hover}", + "$type": "color", + "$value": "#0043ce", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "components", + "key": "{form.control.checked.surface-color.hover}" + }, + "name": "token-form-control-checked-surface-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "surface-color", + "hover" + ] + }, + { + "key": "{form.control.checked.border-color.default}", + "$type": "color", + "$value": "#0043ce", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "components", + "key": "{form.control.checked.border-color.default}" + }, + "name": "token-form-control-checked-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "border-color", + "default" + ] + }, + { + "key": "{form.control.checked.border-color.hover}", + "$type": "color", + "$value": "#002d9c", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "group": "components", + "key": "{form.control.checked.border-color.hover}" + }, + "name": "token-form-control-checked-border-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "border-color", + "hover" + ] + }, + { + "key": "{form.control.invalid.border-color.default}", + "$type": "color", + "$value": "#a2191f", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "components", + "key": "{form.control.invalid.border-color.default}" + }, + "name": "token-form-control-invalid-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "invalid", + "border-color", + "default" + ] + }, + { + "key": "{form.control.invalid.border-color.hover}", + "$type": "color", + "$value": "#750e13", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.red-400}", + "group": "components", + "key": "{form.control.invalid.border-color.hover}" + }, + "name": "token-form-control-invalid-border-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "invalid", + "border-color", + "hover" + ] + }, + { + "key": "{form.control.readonly.foreground-color}", + "$type": "color", + "$value": "#161616", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "group": "components", + "key": "{form.control.readonly.foreground-color}" + }, + "name": "token-form-control-readonly-foreground-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "readonly", + "foreground-color" + ] + }, + { + "key": "{form.control.readonly.surface-color}", + "$type": "color", + "$value": "#e0e0e0", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.strong}", + "group": "components", + "key": "{form.control.readonly.surface-color}" + }, + "name": "token-form-control-readonly-surface-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "readonly", + "surface-color" + ] + }, + { + "key": "{form.control.readonly.border-color}", + "$type": "color", + "$value": "#e0e0e0", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.border.faint}", + "group": "components", + "key": "{form.control.readonly.border-color}" + }, + "name": "token-form-control-readonly-border-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "readonly", + "border-color" + ] + }, + { + "key": "{form.control.disabled.foreground-color}", + "$type": "color", + "$value": "rgba(22, 22, 22, 0.25)", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.disabled}", + "group": "components", + "key": "{form.control.disabled.foreground-color}" + }, + "name": "token-form-control-disabled-foreground-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "disabled", + "foreground-color" + ] + }, + { + "key": "{form.control.disabled.surface-color}", + "$type": "color", + "$value": "#c6c6c6", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.interactive-disabled}", + "group": "components", + "key": "{form.control.disabled.surface-color}" + }, + "name": "token-form-control-disabled-surface-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "disabled", + "surface-color" + ] + }, + { + "key": "{form.control.disabled.border-color}", + "$type": "color", + "$value": "#c6c6c6", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.border.primary}", + "group": "components", + "key": "{form.control.disabled.border-color}" + }, + "name": "token-form-control-disabled-border-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "disabled", + "border-color" + ] + }, + { + "key": "{form.control.padding}", + "$type": "dimension", + "$value": "7px", + "unit": "px", + "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma.", + "original": { + "$type": "dimension", + "$value": "7", + "unit": "px", + "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma.", + "key": "{form.control.padding}" + }, + "name": "token-form-control-padding", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "padding" + ] + }, + { + "key": "{form.control.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{form.control.border.radius}" + }, + "name": "token-form-control-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "border", + "radius" + ] + }, + { + "key": "{form.control.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.control.border.width}" + }, + "name": "token-form-control-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "border", + "width" + ] + }, + { + "key": "{form.radio.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.radio.size}" + }, + "name": "token-form-radio-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "size" + ] + }, + { + "key": "{form.radio.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.radio.border.width}" + }, + "name": "token-form-radio-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "border", + "width" + ] + }, + { + "key": "{form.radio.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.radio.background-image.size}" + }, + "name": "token-form-radio-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "background-image", + "size" + ] + }, + { + "key": "{form.radio.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "key": "{form.radio.background-image.data-url}" + }, + "name": "token-form-radio-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "background-image", + "data-url" + ] + }, + { + "key": "{form.radio.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "key": "{form.radio.background-image.data-url-disabled}" + }, + "name": "token-form-radio-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "background-image", + "data-url-disabled" + ] + }, + { + "key": "{form.radiocard-group.gap}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.radiocard-group.gap}" + }, + "name": "token-form-radiocard-group-gap", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard-group", + "gap" + ] + }, + { + "key": "{form.radiocard.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.radiocard.border.width}" + }, + "name": "token-form-radiocard-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "width" + ] + }, + { + "key": "{form.radiocard.border.radius}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{form.radiocard.border.radius}" + }, + "name": "token-form-radiocard-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "radius" + ] + }, + { + "key": "{form.radiocard.border.color.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{form.radiocard.border.color.default}" + }, + "name": "token-form-radiocard-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "default" + ] + }, + { + "key": "{form.radiocard.border.color.focus}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#ffffff", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "key": "{form.radiocard.border.color.focus}" + }, + "name": "token-form-radiocard-border-color-focus", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "focus" + ] + }, + { + "key": "{form.radiocard.border.color.default-checked}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#0043ce", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "key": "{form.radiocard.border.color.default-checked}" + }, + "name": "token-form-radiocard-border-color-default-checked", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "default-checked" + ] + }, + { + "key": "{form.radiocard.content-padding}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{form.radiocard.content-padding}" + }, + "name": "token-form-radiocard-content-padding", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "content-padding" + ] + }, + { + "key": "{form.radiocard.control-padding}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{form.radiocard.control-padding}" + }, + "name": "token-form-radiocard-control-padding", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "control-padding" + ] + }, + { + "key": "{form.radiocard.transition.duration}", + "$type": "duration", + "$value": "0.2s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.2", + "unit": "s", + "key": "{form.radiocard.transition.duration}" + }, + "name": "token-form-radiocard-transition-duration", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "transition", + "duration" + ] + }, + { + "key": "{form.select.background-image.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.select.background-image.size}" + }, + "name": "token-form-select-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "size" + ] + }, + { + "key": "{form.select.background-image.position-right-x}", + "$type": "dimension", + "$value": "7px", + "original": { + "$type": "dimension", + "$value": "{form.control.padding}", + "key": "{form.select.background-image.position-right-x}" + }, + "name": "token-form-select-background-image-position-right-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "position-right-x" + ] + }, + { + "key": "{form.select.background-image.position-top-y}", + "$type": "dimension", + "$value": "9px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "9", + "unit": "px", + "key": "{form.select.background-image.position-top-y}" + }, + "name": "token-form-select-background-image-position-top-y", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "position-top-y" + ] + }, + { + "key": "{form.select.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "key": "{form.select.background-image.data-url}" + }, + "name": "token-form-select-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "data-url" + ] + }, + { + "key": "{form.select.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "key": "{form.select.background-image.data-url-disabled}" + }, + "name": "token-form-select-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "data-url-disabled" + ] + }, + { + "key": "{form.text-input.background-image.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.text-input.background-image.size}" + }, + "name": "token-form-text-input-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "size" + ] + }, + { + "key": "{form.text-input.background-image.position-x}", + "$type": "dimension", + "$value": "7px", + "original": { + "$type": "dimension", + "$value": "{form.control.padding}", + "key": "{form.text-input.background-image.position-x}" + }, + "name": "token-form-text-input-background-image-position-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "position-x" + ] + }, + { + "key": "{form.text-input.background-image.data-url-date}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-date}" + }, + "name": "token-form-text-input-background-image-data-url-date", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-date" + ] + }, + { + "key": "{form.text-input.background-image.data-url-time}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-time}" + }, + "name": "token-form-text-input-background-image-data-url-time", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-time" + ] + }, + { + "key": "{form.text-input.background-image.data-url-search}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-search}" + }, + "name": "token-form-text-input-background-image-data-url-search", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search" + ] + }, + { + "key": "{form.text-input.background-image.data-url-search-cancel}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-search-cancel}" + }, + "name": "token-form-text-input-background-image-data-url-search-cancel", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search-cancel" + ] + }, + { + "key": "{form.text-input.background-image.data-url-search-loading}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color and animation are hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color and animation are hardcoded here!", + "key": "{form.text-input.background-image.data-url-search-loading}" + }, + "name": "token-form-text-input-background-image-data-url-search-loading", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search-loading" + ] + }, + { + "key": "{form.toggle.width}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{form.toggle.width}" + }, + "name": "token-form-toggle-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "width" + ] + }, + { + "key": "{form.toggle.height}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.toggle.height}" + }, + "name": "token-form-toggle-height", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "height" + ] + }, + { + "key": "{form.toggle.base.surface-color.default}", + "$type": "color", + "$value": "#e0e0e0", + "group": "components", + "comment": "the toggle has a different base surface color, compared to the other controls", + "original": { + "$type": "color", + "$value": "{color.surface.strong}", + "group": "components", + "comment": "the toggle has a different base surface color, compared to the other controls", + "key": "{form.toggle.base.surface-color.default}" + }, + "name": "token-form-toggle-base-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "base", + "surface-color", + "default" + ] + }, + { + "key": "{form.toggle.border.radius}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{form.toggle.border.radius}" + }, + "name": "token-form-toggle-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "border", + "radius" + ] + }, + { + "key": "{form.toggle.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.toggle.border.width}" + }, + "name": "token-form-toggle-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "border", + "width" + ] + }, + { + "key": "{form.toggle.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.toggle.background-image.size}" + }, + "name": "token-form-toggle-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "size" + ] + }, + { + "key": "{form.toggle.background-image.position-x}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{form.toggle.background-image.position-x}" + }, + "name": "token-form-toggle-background-image-position-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "position-x" + ] + }, + { + "key": "{form.toggle.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.toggle.background-image.data-url}" + }, + "name": "token-form-toggle-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "data-url" + ] + }, + { + "key": "{form.toggle.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.toggle.background-image.data-url-disabled}" + }, + "name": "token-form-toggle-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "data-url-disabled" + ] + }, + { + "key": "{form.toggle.transition.duration}", + "$type": "duration", + "$value": "0.2s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.2", + "unit": "s", + "key": "{form.toggle.transition.duration}" + }, + "name": "token-form-toggle-transition-duration", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "transition", + "duration" + ] + }, + { + "key": "{form.toggle.transition.timing-function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.68, -0.2, 0.265, 1.15)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.68, + -0.2, + 0.265, + 1.15 + ], + "key": "{form.toggle.transition.timing-function}" + }, + "name": "token-form-toggle-transition-timing-function", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "transition", + "timing-function" + ] + }, + { + "key": "{form.toggle.thumb-size}", + "$type": "dimension", + "$value": "16px", + "original": { + "$type": "dimension", + "$value": "{form.toggle.height}", + "key": "{form.toggle.thumb-size}" + }, + "name": "token-form-toggle-thumb-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "thumb-size" + ] + }, + { + "key": "{icon-tile.border.color.overlay}", + "$type": "color", + "$value": "#e0e0e0", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.borderSubtle02}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle02}", + "cds-g10": "{carbon.themes.g10.borderSubtle02}", + "cds-g90": "{carbon.themes.g90.borderSubtle02}", + "cds-g100": "{carbon.themes.g100.borderSubtle02}" + }, + "key": "{icon-tile.border.color.overlay}" + }, + "name": "token-icon-tile-border-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "overlay" + ] + }, + { + "key": "{icon-tile.border.color.logo}", + "$type": "color", + "$value": "#c6c6c6", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.borderSubtle01}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle01}", + "cds-g10": "{carbon.themes.g10.borderSubtle01}", + "cds-g90": "{carbon.themes.g90.borderSubtle01}", + "cds-g100": "{carbon.themes.g100.borderSubtle01}" + }, + "key": "{icon-tile.border.color.logo}" + }, + "name": "token-icon-tile-border-color-logo", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "logo" + ] + }, + { + "key": "{icon-tile.surface.color.overlay}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.layer02}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.white.layer02}", + "cds-g10": "{carbon.themes.g10.layer02}", + "cds-g90": "{carbon.themes.g90.layer02}", + "cds-g100": "{carbon.themes.g100.layer02}" + }, + "key": "{icon-tile.surface.color.overlay}" + }, + "name": "token-icon-tile-surface-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "surface", + "color", + "overlay" + ] + }, + { + "key": "{pagination.nav.control.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{pagination.nav.control.height}" + }, + "name": "token-pagination-nav-control-height", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "height" + ] + }, + { + "key": "{pagination.nav.control.padding.horizontal}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{pagination.nav.control.padding.horizontal}" + }, + "name": "token-pagination-nav-control-padding-horizontal", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "padding", + "horizontal" + ] + }, + { + "key": "{pagination.nav.control.focus-inset}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{pagination.nav.control.focus-inset}" + }, + "name": "token-pagination-nav-control-focus-inset", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "focus-inset" + ] + }, + { + "key": "{pagination.nav.control.icon-spacing}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{pagination.nav.control.icon-spacing}" + }, + "name": "token-pagination-nav-control-icon-spacing", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "icon-spacing" + ] + }, + { + "key": "{pagination.nav.indicator.height}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{pagination.nav.indicator.height}" + }, + "name": "token-pagination-nav-indicator-height", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "indicator", + "height" + ] + }, + { + "key": "{pagination.nav.indicator.spacing}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{pagination.nav.indicator.spacing}" + }, + "name": "token-pagination-nav-indicator-spacing", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "indicator", + "spacing" + ] + }, + { + "key": "{pagination.child.spacing.vertical}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{pagination.child.spacing.vertical}" + }, + "name": "token-pagination-child-spacing-vertical", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "child", + "spacing", + "vertical" + ] + }, + { + "key": "{pagination.child.spacing.horizontal}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "key": "{pagination.child.spacing.horizontal}" + }, + "name": "token-pagination-child-spacing-horizontal", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "child", + "spacing", + "horizontal" + ] + }, + { + "key": "{rich-tooltip.bubble.max-width}", + "$type": "dimension", + "$value": "288px", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "original": { + "$type": "dimension", + "$value": "288", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "key": "{rich-tooltip.bubble.max-width}" + }, + "name": "token-rich-tooltip-bubble-max-width", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "max-width" + ] + }, + { + "key": "{rich-tooltip.bubble.border.color}", + "$value": "#c6c6c6", + "$modes": { + "default": "#52525233", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$value": "{color.palette.alpha-200}", + "$modes": { + "default": "{elevation.higher.border.color}", + "cds-g0": "{color.palette.alpha-200}", + "cds-g10": "{color.palette.alpha-200}", + "cds-g90": "{color.palette.alpha-200}", + "cds-g100": "{color.palette.alpha-200}" + }, + "key": "{rich-tooltip.bubble.border.color}" + }, + "name": "token-rich-tooltip-bubble-border-color", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "border", + "color" + ] + }, + { + "key": "{rich-tooltip.bubble.border.radius}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "key": "{rich-tooltip.bubble.border.radius}" + }, + "name": "token-rich-tooltip-bubble-border-radius", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "border", + "radius" + ] + }, + { + "key": "{rich-tooltip.bubble.arrow.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{rich-tooltip.bubble.arrow.size}" + }, + "name": "token-rich-tooltip-bubble-arrow-size", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "arrow", + "size" + ] + }, + { + "key": "{rich-tooltip.toggle.gap.horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{rich-tooltip.toggle.gap.horizontal}" + }, + "name": "token-rich-tooltip-toggle-gap-horizontal", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "gap", + "horizontal" + ] + }, + { + "key": "{rich-tooltip.toggle.foreground.color.default}", + "$value": "#525252", + "$modes": { + "default": "#161616", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$value": "{carbon.themes.white.textSecondary}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.default}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-default", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "default" + ] + }, + { + "key": "{rich-tooltip.toggle.foreground.color.hover}", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$value": "{carbon.themes.white.textPrimary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.hover}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-hover", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "hover" + ] + }, + { + "key": "{rich-tooltip.toggle.foreground.color.active}", + "$value": "#525252", + "$modes": { + "default": "#525252", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$value": "{carbon.themes.white.textSecondary}", + "$modes": { + "default": "{color.foreground.faint}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.active}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-active", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "active" + ] + }, + { + "key": "{rich-tooltip.toggle.icon.size}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, + "original": { + "$type": "dimension", + "$value": "14", + "unit": "px", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, + "key": "{rich-tooltip.toggle.icon.size}" + }, + "name": "token-rich-tooltip-toggle-icon-size", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "icon", + "size" + ] + }, + { + "key": "{tabs.tab.height.medium}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{tabs.tab.height.medium}" + }, + "name": "token-tabs-tab-height-medium", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "height", + "medium" + ] + }, + { + "key": "{tabs.tab.height.large}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{tabs.tab.height.large}" + }, + "name": "token-tabs-tab-height-large", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "height", + "large" + ] + }, + { + "key": "{tabs.tab.padding.horizontal.medium}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{tabs.tab.padding.horizontal.medium}" + }, + "name": "token-tabs-tab-padding-horizontal-medium", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "padding", + "horizontal", + "medium" + ] + }, + { + "key": "{tabs.tab.padding.horizontal.large}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "key": "{tabs.tab.padding.horizontal.large}" + }, + "name": "token-tabs-tab-padding-horizontal-large", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "padding", + "horizontal", + "large" + ] + }, + { + "key": "{tabs.tab.padding.vertical}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "key": "{tabs.tab.padding.vertical}" + }, + "name": "token-tabs-tab-padding-vertical", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "padding", + "vertical" + ] + }, + { + "key": "{tabs.tab.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{tabs.tab.border-radius}" + }, + "name": "token-tabs-tab-border-radius", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "border-radius" + ] + }, + { + "key": "{tabs.tab.focus-inset}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{tabs.tab.focus-inset}" + }, + "name": "token-tabs-tab-focus-inset", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "focus-inset" + ] + }, + { + "key": "{tabs.tab.gutter}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{tabs.tab.gutter}" + }, + "name": "token-tabs-tab-gutter", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "gutter" + ] + }, + { + "key": "{tabs.indicator.height}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{tabs.indicator.height}" + }, + "name": "token-tabs-indicator-height", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "indicator", + "height" + ] + }, + { + "key": "{tabs.indicator.transition.function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.5, 1, 0.89, 1)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.5, + 1, + 0.89, + 1 + ], + "key": "{tabs.indicator.transition.function}" + }, + "name": "token-tabs-indicator-transition-function", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "indicator", + "transition", + "function" + ] + }, + { + "key": "{tabs.indicator.transition.duration}", + "$type": "duration", + "$value": "0.6s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.6", + "unit": "s", + "key": "{tabs.indicator.transition.duration}" + }, + "name": "token-tabs-indicator-transition-duration", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "indicator", + "transition", + "duration" + ] + }, + { + "key": "{tabs.divider.height}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{tabs.divider.height}" + }, + "name": "token-tabs-divider-height", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "divider", + "height" + ] + }, + { + "key": "{tooltip.max-width}", + "$type": "dimension", + "$value": "288px", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "original": { + "$type": "dimension", + "$value": "288", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "key": "{tooltip.max-width}" + }, + "name": "token-tooltip-max-width", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "max-width" + ] + }, + { + "key": "{tooltip.padding.horizontal}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16px", + "cds-g10": "16px", + "cds-g90": "16px", + "cds-g100": "16px" + }, + "original": { + "$type": "dimension", + "$value": "{carbon.themes.white.spacing05}", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "{carbon.themes.white.spacing05}", + "cds-g10": "{carbon.themes.g10.spacing05}", + "cds-g90": "{carbon.themes.g90.spacing05}", + "cds-g100": "{carbon.themes.g100.spacing05}" + }, + "key": "{tooltip.padding.horizontal}" + }, + "name": "token-tooltip-padding-horizontal", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "horizontal" + ] + }, + { + "key": "{tooltip.padding.vertical}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "16px", + "cds-g10": "16px", + "cds-g90": "16px", + "cds-g100": "16px" + }, + "original": { + "$type": "dimension", + "$value": "{carbon.themes.white.spacing05}", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "{carbon.themes.white.spacing05}", + "cds-g10": "{carbon.themes.g10.spacing05}", + "cds-g90": "{carbon.themes.g90.spacing05}", + "cds-g100": "{carbon.themes.g100.spacing05}" + }, + "key": "{tooltip.padding.vertical}" + }, + "name": "token-tooltip-padding-vertical", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "vertical" + ] + }, + { + "key": "{tooltip.border.radius}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "key": "{tooltip.border.radius}" + }, + "name": "token-tooltip-border-radius", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "border", + "radius" + ] + }, + { + "key": "{tooltip.caret.clip-path}", + "$value": "polygon(0 100%, 50% 0, 100% 100%)", + "$modes": { + "default": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "cds-g0": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g10": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g90": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g100": "polygon(0 100%, 50% 0, 100% 100%)" + }, + "original": { + "$value": "polygon(0 100%, 50% 0, 100% 100%)", + "$modes": { + "default": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "cds-g0": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g10": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g90": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g100": "polygon(0 100%, 50% 0, 100% 100%)" + }, + "key": "{tooltip.caret.clip-path}" + }, + "name": "token-tooltip-caret-clip-path", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "clip-path" + ] + }, + { + "key": "{tooltip.caret.height}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "7", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "7", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "key": "{tooltip.caret.height}" + }, + "name": "token-tooltip-caret-height", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "height" + ] + }, + { + "key": "{tooltip.caret.width}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{tooltip.caret.width}" + }, + "name": "token-tooltip-caret-width", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "width" + ] + }, + { + "key": "{tooltip.focus-offset}", + "$type": "dimension", + "$value": "-2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "-2", + "unit": "px", + "key": "{tooltip.focus-offset}" + }, + "name": "token-tooltip-focus-offset", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "focus-offset" + ] + }, + { + "key": "{tooltip.transition.function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.54, 1.5, 0.38, 1.11)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.54, + 1.5, + 0.38, + 1.11 + ], + "key": "{tooltip.transition.function}" + }, + "name": "token-tooltip-transition-function", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "transition", + "function" + ] + }, + { + "key": "{typography.font-stack.display}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.sans.display.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.font-stack.display}" + }, + "name": "token-typography-font-stack-display", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-stack", + "display" + ] + }, + { + "key": "{typography.font-stack.text}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.sans.text.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.font-stack.text}" + }, + "name": "token-typography-font-stack-text", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-stack", + "text" + ] + }, + { + "key": "{typography.font-stack.code}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.monospace.code.combined}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.font-stack.code}" + }, + "name": "token-typography-font-stack-code", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-stack", + "code" + ] + }, + { + "key": "{typography.font-weight.regular}", + "$type": "font-weight", + "$value": 400, + "$modes": { + "default": "400", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "default": "400", + "cds-g0": "{carbon.typography.font-weight.regular}", + "cds-g10": "{carbon.typography.font-weight.regular}", + "cds-g90": "{carbon.typography.font-weight.regular}", + "cds-g100": "{carbon.typography.font-weight.regular}" + }, + "key": "{typography.font-weight.regular}" + }, + "name": "token-typography-font-weight-regular", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "regular" + ] + }, + { + "key": "{typography.font-weight.medium}", + "$type": "font-weight", + "$value": 400, + "$modes": { + "default": "500", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "default": "500", + "cds-g0": "{carbon.typography.font-weight.regular}", + "cds-g10": "{carbon.typography.font-weight.regular}", + "cds-g90": "{carbon.typography.font-weight.regular}", + "cds-g100": "{carbon.typography.font-weight.regular}" + }, + "key": "{typography.font-weight.medium}" + }, + "name": "token-typography-font-weight-medium", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "medium" + ] + }, + { + "key": "{typography.font-weight.semibold}", + "$type": "font-weight", + "$value": 600, + "$modes": { + "default": "600", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "default": "600", + "cds-g0": "{carbon.typography.font-weight.semibold}", + "cds-g10": "{carbon.typography.font-weight.semibold}", + "cds-g90": "{carbon.typography.font-weight.semibold}", + "cds-g100": "{carbon.typography.font-weight.semibold}" + }, + "key": "{typography.font-weight.semibold}" + }, + "name": "token-typography-font-weight-semibold", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "semibold" + ] + }, + { + "key": "{typography.font-weight.bold}", + "$type": "font-weight", + "$value": 600, + "$modes": { + "default": "700", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "default": "700", + "cds-g0": "{carbon.typography.font-weight.semibold}", + "cds-g10": "{carbon.typography.font-weight.semibold}", + "cds-g90": "{carbon.typography.font-weight.semibold}", + "cds-g100": "{carbon.typography.font-weight.semibold}" + }, + "key": "{typography.font-weight.bold}" + }, + "name": "token-typography-font-weight-bold", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "bold" + ] + }, + { + "key": "{typography.display-500.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-500.font-family}" + }, + "name": "token-typography-display-500-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "font-family" + ] + }, + { + "key": "{typography.display-500.font-size}", + "$type": "font-size", + "$value": "2rem", + "unit": "px", + "comment": "30px/1.875rem", + "$modes": { + "default": "30", + "cds-g0": "2rem", + "cds-g10": "2rem", + "cds-g90": "2rem", + "cds-g100": "2rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading05.font-size}", + "unit": "px", + "comment": "30px/1.875rem", + "$modes": { + "default": "30", + "cds-g0": "{carbon.typography.heading05.font-size}", + "cds-g10": "{carbon.typography.heading05.font-size}", + "cds-g90": "{carbon.typography.heading05.font-size}", + "cds-g100": "{carbon.typography.heading05.font-size}" + }, + "key": "{typography.display-500.font-size}" + }, + "name": "token-typography-display-500-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "font-size" + ] + }, + { + "key": "{typography.display-500.line-height}", + "$type": "number", + "$value": 1.25, + "comment": "38px", + "$modes": { + "default": 1.2666, + "cds-g0": 1.25, + "cds-g10": 1.25, + "cds-g90": 1.25, + "cds-g100": 1.25 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading05.line-height}", + "comment": "38px", + "$modes": { + "default": 1.2666, + "cds-g0": "{carbon.typography.heading05.line-height}", + "cds-g10": "{carbon.typography.heading05.line-height}", + "cds-g90": "{carbon.typography.heading05.line-height}", + "cds-g100": "{carbon.typography.heading05.line-height}" + }, + "key": "{typography.display-500.line-height}" + }, + "name": "token-typography-display-500-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "line-height" + ] + }, + { + "key": "{typography.display-500.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading05.letter-spacing}", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading05.letter-spacing}", + "cds-g10": "{carbon.typography.heading05.letter-spacing}", + "cds-g90": "{carbon.typography.heading05.letter-spacing}", + "cds-g100": "{carbon.typography.heading05.letter-spacing}" + }, + "key": "{typography.display-500.letter-spacing}" + }, + "name": "token-typography-display-500-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "letter-spacing" + ] + }, + { + "key": "{typography.display-400.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-400.font-family}" + }, + "name": "token-typography-display-400-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "font-family" + ] + }, + { + "key": "{typography.display-400.font-size}", + "$type": "font-size", + "$value": "1.75rem", + "unit": "px", + "comment": "24px/1.5rem", + "$modes": { + "default": "24", + "cds-g0": "1.75rem", + "cds-g10": "1.75rem", + "cds-g90": "1.75rem", + "cds-g100": "1.75rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading04.font-size}", + "unit": "px", + "comment": "24px/1.5rem", + "$modes": { + "default": "24", + "cds-g0": "{carbon.typography.heading04.font-size}", + "cds-g10": "{carbon.typography.heading04.font-size}", + "cds-g90": "{carbon.typography.heading04.font-size}", + "cds-g100": "{carbon.typography.heading04.font-size}" + }, + "key": "{typography.display-400.font-size}" + }, + "name": "token-typography-display-400-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "font-size" + ] + }, + { + "key": "{typography.display-400.line-height}", + "$type": "number", + "$value": 1.28572, + "comment": "32px", + "$modes": { + "default": 1.3333, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading04.line-height}", + "comment": "32px", + "$modes": { + "default": 1.3333, + "cds-g0": "{carbon.typography.heading04.line-height}", + "cds-g10": "{carbon.typography.heading04.line-height}", + "cds-g90": "{carbon.typography.heading04.line-height}", + "cds-g100": "{carbon.typography.heading04.line-height}" + }, + "key": "{typography.display-400.line-height}" + }, + "name": "token-typography-display-400-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "line-height" + ] + }, + { + "key": "{typography.display-400.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading04.letter-spacing}", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.heading04.letter-spacing}", + "cds-g10": "{carbon.typography.heading04.letter-spacing}", + "cds-g90": "{carbon.typography.heading04.letter-spacing}", + "cds-g100": "{carbon.typography.heading04.letter-spacing}" + }, + "key": "{typography.display-400.letter-spacing}" + }, + "name": "token-typography-display-400-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "letter-spacing" + ] + }, + { + "key": "{typography.display-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-300.font-family}" + }, + "name": "token-typography-display-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "font-family" + ] + }, + { + "key": "{typography.display-300.font-size}", + "$type": "font-size", + "$value": "1.25rem", + "unit": "px", + "comment": "18px/1.125rem", + "$modes": { + "default": "18", + "cds-g0": "1.25rem", + "cds-g10": "1.25rem", + "cds-g90": "1.25rem", + "cds-g100": "1.25rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading03.font-size}", + "unit": "px", + "comment": "18px/1.125rem", + "$modes": { + "default": "18", + "cds-g0": "{carbon.typography.heading03.font-size}", + "cds-g10": "{carbon.typography.heading03.font-size}", + "cds-g90": "{carbon.typography.heading03.font-size}", + "cds-g100": "{carbon.typography.heading03.font-size}" + }, + "key": "{typography.display-300.font-size}" + }, + "name": "token-typography-display-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "font-size" + ] + }, + { + "key": "{typography.display-300.line-height}", + "$type": "number", + "$value": 1.4, + "comment": "24px", + "$modes": { + "default": 1.3333, + "cds-g0": 1.4, + "cds-g10": 1.4, + "cds-g90": 1.4, + "cds-g100": 1.4 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading03.line-height}", + "comment": "24px", + "$modes": { + "default": 1.3333, + "cds-g0": "{carbon.typography.heading03.line-height}", + "cds-g10": "{carbon.typography.heading03.line-height}", + "cds-g90": "{carbon.typography.heading03.line-height}", + "cds-g100": "{carbon.typography.heading03.line-height}" + }, + "key": "{typography.display-300.line-height}" + }, + "name": "token-typography-display-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "line-height" + ] + }, + { + "key": "{typography.display-300.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading03.letter-spacing}", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading03.letter-spacing}", + "cds-g10": "{carbon.typography.heading03.letter-spacing}", + "cds-g90": "{carbon.typography.heading03.letter-spacing}", + "cds-g100": "{carbon.typography.heading03.letter-spacing}" + }, + "key": "{typography.display-300.letter-spacing}" + }, + "name": "token-typography-display-300-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "letter-spacing" + ] + }, + { + "key": "{typography.display-200.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-200.font-family}" + }, + "name": "token-typography-display-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "font-family" + ] + }, + { + "key": "{typography.display-200.font-size}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading02.font-size}", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.heading02.font-size}", + "cds-g10": "{carbon.typography.heading02.font-size}", + "cds-g90": "{carbon.typography.heading02.font-size}", + "cds-g100": "{carbon.typography.heading02.font-size}" + }, + "key": "{typography.display-200.font-size}" + }, + "name": "token-typography-display-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "font-size" + ] + }, + { + "key": "{typography.display-200.line-height}", + "$type": "number", + "$value": 1.5, + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading02.line-height}", + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": "{carbon.typography.heading02.line-height}", + "cds-g10": "{carbon.typography.heading02.line-height}", + "cds-g90": "{carbon.typography.heading02.line-height}", + "cds-g100": "{carbon.typography.heading02.line-height}" + }, + "key": "{typography.display-200.line-height}" + }, + "name": "token-typography-display-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "line-height" + ] + }, + { + "key": "{typography.display-200.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading02.letter-spacing}", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading02.letter-spacing}", + "cds-g10": "{carbon.typography.heading02.letter-spacing}", + "cds-g90": "{carbon.typography.heading02.letter-spacing}", + "cds-g100": "{carbon.typography.heading02.letter-spacing}" + }, + "key": "{typography.display-200.letter-spacing}" + }, + "name": "token-typography-display-200-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "letter-spacing" + ] + }, + { + "key": "{typography.display-100.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-100.font-family}" + }, + "name": "token-typography-display-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "font-family" + ] + }, + { + "key": "{typography.display-100.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading01.font-size}", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.heading01.font-size}", + "cds-g10": "{carbon.typography.heading01.font-size}", + "cds-g90": "{carbon.typography.heading01.font-size}", + "cds-g100": "{carbon.typography.heading01.font-size}" + }, + "key": "{typography.display-100.font-size}" + }, + "name": "token-typography-display-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "font-size" + ] + }, + { + "key": "{typography.display-100.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading01.line-height}", + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": "{carbon.typography.heading01.line-height}", + "cds-g10": "{carbon.typography.heading01.line-height}", + "cds-g90": "{carbon.typography.heading01.line-height}", + "cds-g100": "{carbon.typography.heading01.line-height}" + }, + "key": "{typography.display-100.line-height}" + }, + "name": "token-typography-display-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "line-height" + ] + }, + { + "key": "{typography.display-100.letter-spacing}", + "$type": "letter-spacing", + "$value": "0.16px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0.16px", + "cds-g10": "0.16px", + "cds-g90": "0.16px", + "cds-g100": "0.16px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading01.letter-spacing}", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.heading01.letter-spacing}", + "cds-g10": "{carbon.typography.heading01.letter-spacing}", + "cds-g90": "{carbon.typography.heading01.letter-spacing}", + "cds-g100": "{carbon.typography.heading01.letter-spacing}" + }, + "key": "{typography.display-100.letter-spacing}" + }, + "name": "token-typography-display-100-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "letter-spacing" + ] + }, + { + "key": "{typography.body-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-300.font-family}" + }, + "name": "token-typography-body-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "font-family" + ] + }, + { + "key": "{typography.body-300.font-size}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.body02.font-size}", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.body02.font-size}", + "cds-g10": "{carbon.typography.body02.font-size}", + "cds-g90": "{carbon.typography.body02.font-size}", + "cds-g100": "{carbon.typography.body02.font-size}" + }, + "key": "{typography.body-300.font-size}" + }, + "name": "token-typography-body-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "font-size" + ] + }, + { + "key": "{typography.body-300.line-height}", + "$type": "number", + "$value": 1.5, + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.body02.line-height}", + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": "{carbon.typography.body02.line-height}", + "cds-g10": "{carbon.typography.body02.line-height}", + "cds-g90": "{carbon.typography.body02.line-height}", + "cds-g100": "{carbon.typography.body02.line-height}" + }, + "key": "{typography.body-300.line-height}" + }, + "name": "token-typography-body-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "line-height" + ] + }, + { + "key": "{typography.body-200.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-200.font-family}" + }, + "name": "token-typography-body-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "font-family" + ] + }, + { + "key": "{typography.body-200.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.body01.font-size}", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "{carbon.typography.body01.font-size}", + "cds-g10": "{carbon.typography.body01.font-size}", + "cds-g90": "{carbon.typography.body01.font-size}", + "cds-g100": "{carbon.typography.body01.font-size}" + }, + "key": "{typography.body-200.font-size}" + }, + "name": "token-typography-body-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "font-size" + ] + }, + { + "key": "{typography.body-200.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "20px", + "$modes": { + "default": 1.4286, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.body01.line-height}", + "comment": "20px", + "$modes": { + "default": 1.4286, + "cds-g0": "{carbon.typography.body01.line-height}", + "cds-g10": "{carbon.typography.body01.line-height}", + "cds-g90": "{carbon.typography.body01.line-height}", + "cds-g100": "{carbon.typography.body01.line-height}" + }, + "key": "{typography.body-200.line-height}" + }, + "name": "token-typography-body-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "line-height" + ] + }, + { + "key": "{typography.body-100.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-100.font-family}" + }, + "name": "token-typography-body-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "font-family" + ] + }, + { + "key": "{typography.body-100.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.bodyCompact01.font-size}", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.bodyCompact01.font-size}", + "cds-g10": "{carbon.typography.bodyCompact01.font-size}", + "cds-g90": "{carbon.typography.bodyCompact01.font-size}", + "cds-g100": "{carbon.typography.bodyCompact01.font-size}" + }, + "key": "{typography.body-100.font-size}" + }, + "name": "token-typography-body-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "font-size" + ] + }, + { + "key": "{typography.body-100.line-height}", + "$type": "number", + "$value": 1.28572, + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.bodyCompact01.line-height}", + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": "{carbon.typography.bodyCompact01.line-height}", + "cds-g10": "{carbon.typography.bodyCompact01.line-height}", + "cds-g90": "{carbon.typography.bodyCompact01.line-height}", + "cds-g100": "{carbon.typography.bodyCompact01.line-height}" + }, + "key": "{typography.body-100.line-height}" + }, + "name": "token-typography-body-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "line-height" + ] + }, + { + "key": "{typography.code-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-300.font-family}" + }, + "name": "token-typography-code-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "font-family" + ] + }, + { + "key": "{typography.code-300.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.code02.font-size}", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-300.font-size}" + }, + "name": "token-typography-code-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "font-size" + ] + }, + { + "key": "{typography.code-300.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "20px", + "$modes": { + "default": 1.25, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.code02.line-height}", + "comment": "20px", + "$modes": { + "default": 1.25, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-300.line-height}" + }, + "name": "token-typography-code-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "line-height" + ] + }, + { + "key": "{typography.code-200.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-200.font-family}" + }, + "name": "token-typography-code-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "font-family" + ] + }, + { + "key": "{typography.code-200.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.code02.font-size}", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-200.font-size}" + }, + "name": "token-typography-code-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "font-size" + ] + }, + { + "key": "{typography.code-200.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "18px", + "$modes": { + "default": 1.125, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.code02.line-height}", + "comment": "18px", + "$modes": { + "default": 1.125, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-200.line-height}" + }, + "name": "token-typography-code-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "line-height" + ] + }, + { + "key": "{typography.code-100.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-100.font-family}" + }, + "name": "token-typography-code-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "font-family" + ] + }, + { + "key": "{typography.code-100.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.code02.font-size}", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-100.font-size}" + }, + "name": "token-typography-code-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "font-size" + ] + }, + { + "key": "{typography.code-100.line-height}", + "$type": "number", + "$value": 1.33333, + "comment": "16px", + "$modes": { + "default": 1.23, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.code01.line-height}", + "comment": "16px", + "$modes": { + "default": 1.23, + "cds-g0": "{carbon.typography.code01.line-height}", + "cds-g10": "{carbon.typography.code01.line-height}", + "cds-g90": "{carbon.typography.code01.line-height}", + "cds-g100": "{carbon.typography.code01.line-height}" + }, + "key": "{typography.code-100.line-height}" + }, + "name": "token-typography-code-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "line-height" + ] + } +] \ No newline at end of file diff --git a/packages/tokens/dist/docs/products/themed-tokens/cds-g10.json b/packages/tokens/dist/docs/products/themed-tokens/cds-g10.json new file mode 100644 index 00000000000..12ca1387b29 --- /dev/null +++ b/packages/tokens/dist/docs/products/themed-tokens/cds-g10.json @@ -0,0 +1,15608 @@ +[ + { + "key": "{border.radius.x-small}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.x-small}" + }, + "name": "token-border-radius-x-small", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "x-small" + ] + }, + { + "key": "{border.radius.small}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.small}" + }, + "name": "token-border-radius-small", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "small" + ] + }, + { + "key": "{border.radius.medium}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.medium}" + }, + "name": "token-border-radius-medium", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "medium" + ] + }, + { + "key": "{border.radius.large}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.large}" + }, + "name": "token-border-radius-large", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "large" + ] + }, + { + "key": "{border.radius.rounded}", + "$type": "dimension", + "$value": "1000000000px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1000000000", + "unit": "px", + "key": "{border.radius.rounded}" + }, + "name": "token-border-radius-rounded", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "rounded" + ] + }, + { + "key": "{color.palette.blue-500}", + "$type": "color", + "$value": "#001141", + "group": "palette", + "$modes": { + "default": "#1c345f", + "cds-g0": "#001141", + "cds-g10": "#001141", + "cds-g90": "#001141", + "cds-g100": "#001141" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.100}", + "group": "palette", + "$modes": { + "default": "#1c345f", + "cds-g0": "{carbon.color.blue.100}", + "cds-g10": "{carbon.color.blue.100}", + "cds-g90": "{carbon.color.blue.100}", + "cds-g100": "{carbon.color.blue.100}" + }, + "key": "{color.palette.blue-500}" + }, + "name": "token-color-palette-blue-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-500" + ] + }, + { + "key": "{color.palette.blue-400}", + "$type": "color", + "$value": "#002d9c", + "group": "palette", + "$modes": { + "default": "#0046d1", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#002d9c", + "cds-g100": "#002d9c" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.80}", + "group": "palette", + "$modes": { + "default": "#0046d1", + "cds-g0": "{carbon.color.blue.80}", + "cds-g10": "{carbon.color.blue.80}", + "cds-g90": "{carbon.color.blue.80}", + "cds-g100": "{carbon.color.blue.80}" + }, + "key": "{color.palette.blue-400}" + }, + "name": "token-color-palette-blue-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-400" + ] + }, + { + "key": "{color.palette.blue-300}", + "$type": "color", + "$value": "#0043ce", + "group": "palette", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.70}", + "group": "palette", + "$modes": { + "default": "#0c56e9", + "cds-g0": "{carbon.color.blue.70}", + "cds-g10": "{carbon.color.blue.70}", + "cds-g90": "{carbon.color.blue.70}", + "cds-g100": "{carbon.color.blue.70}" + }, + "key": "{color.palette.blue-300}" + }, + "name": "token-color-palette-blue-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-300" + ] + }, + { + "key": "{color.palette.blue-200}", + "$type": "color", + "$value": "#0f62fe", + "group": "palette", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.60}", + "group": "palette", + "$modes": { + "default": "#1060ff", + "cds-g0": "{carbon.color.blue.60}", + "cds-g10": "{carbon.color.blue.60}", + "cds-g90": "{carbon.color.blue.60}", + "cds-g100": "{carbon.color.blue.60}" + }, + "key": "{color.palette.blue-200}" + }, + "name": "token-color-palette-blue-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-200" + ] + }, + { + "key": "{color.palette.blue-100}", + "$type": "color", + "$value": "#d0e2ff", + "group": "palette", + "$modes": { + "default": "#cce3fe", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.20}", + "group": "palette", + "$modes": { + "default": "#cce3fe", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.20}", + "cds-g100": "{carbon.color.blue.20}" + }, + "key": "{color.palette.blue-100}" + }, + "name": "token-color-palette-blue-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-100" + ] + }, + { + "key": "{color.palette.blue-50}", + "$type": "color", + "$value": "#edf5ff", + "group": "palette", + "$modes": { + "default": "#f2f8ff", + "cds-g0": "#edf5ff", + "cds-g10": "#edf5ff", + "cds-g90": "#edf5ff", + "cds-g100": "#edf5ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.10}", + "group": "palette", + "$modes": { + "default": "#f2f8ff", + "cds-g0": "{carbon.color.blue.10}", + "cds-g10": "{carbon.color.blue.10}", + "cds-g90": "{carbon.color.blue.10}", + "cds-g100": "{carbon.color.blue.10}" + }, + "key": "{color.palette.blue-50}" + }, + "name": "token-color-palette-blue-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-50" + ] + }, + { + "key": "{color.palette.purple-500}", + "$type": "color", + "$value": "#31135e", + "group": "palette", + "$modes": { + "default": "#42215b", + "cds-g0": "#31135e", + "cds-g10": "#31135e", + "cds-g90": "#31135e", + "cds-g100": "#31135e" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.90}", + "group": "palette", + "$modes": { + "default": "#42215b", + "cds-g0": "{carbon.color.purple.90}", + "cds-g10": "{carbon.color.purple.90}", + "cds-g90": "{carbon.color.purple.90}", + "cds-g100": "{carbon.color.purple.90}" + }, + "key": "{color.palette.purple-500}" + }, + "name": "token-color-palette-purple-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-500" + ] + }, + { + "key": "{color.palette.purple-400}", + "$type": "color", + "$value": "#6929c4", + "group": "palette", + "$modes": { + "default": "#7b00db", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.70}", + "group": "palette", + "$modes": { + "default": "#7b00db", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, + "key": "{color.palette.purple-400}" + }, + "name": "token-color-palette-purple-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-400" + ] + }, + { + "key": "{color.palette.purple-300}", + "$type": "color", + "$value": "#8a3ffc", + "group": "palette", + "$modes": { + "default": "#911ced", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#8a3ffc", + "cds-g100": "#8a3ffc" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.60}", + "group": "palette", + "$modes": { + "default": "#911ced", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.60}", + "cds-g100": "{carbon.color.purple.60}" + }, + "key": "{color.palette.purple-300}" + }, + "name": "token-color-palette-purple-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-300" + ] + }, + { + "key": "{color.palette.purple-200}", + "$type": "color", + "$value": "#a56eff", + "group": "palette", + "$modes": { + "default": "#a737ff", + "cds-g0": "#a56eff", + "cds-g10": "#a56eff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.50}", + "group": "palette", + "$modes": { + "default": "#a737ff", + "cds-g0": "{carbon.color.purple.50}", + "cds-g10": "{carbon.color.purple.50}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, + "key": "{color.palette.purple-200}" + }, + "name": "token-color-palette-purple-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-200" + ] + }, + { + "key": "{color.palette.purple-100}", + "$type": "color", + "$value": "#e8daff", + "group": "palette", + "$modes": { + "default": "#ead2fe", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.20}", + "group": "palette", + "$modes": { + "default": "#ead2fe", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.20}" + }, + "key": "{color.palette.purple-100}" + }, + "name": "token-color-palette-purple-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-100" + ] + }, + { + "key": "{color.palette.purple-50}", + "$type": "color", + "$value": "#f6f2ff", + "group": "palette", + "$modes": { + "default": "#f9f2ff", + "cds-g0": "#f6f2ff", + "cds-g10": "#f6f2ff", + "cds-g90": "#f6f2ff", + "cds-g100": "#f6f2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.10}", + "group": "palette", + "$modes": { + "default": "#f9f2ff", + "cds-g0": "{carbon.color.purple.10}", + "cds-g10": "{carbon.color.purple.10}", + "cds-g90": "{carbon.color.purple.10}", + "cds-g100": "{carbon.color.purple.10}" + }, + "key": "{color.palette.purple-50}" + }, + "name": "token-color-palette-purple-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-50" + ] + }, + { + "key": "{color.palette.green-500}", + "$type": "color", + "$value": "#044317", + "group": "palette", + "$modes": { + "default": "#054220", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#044317", + "cds-g100": "#044317" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.80}", + "group": "palette", + "$modes": { + "default": "#054220", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.80}", + "cds-g100": "{carbon.color.green.80}" + }, + "key": "{color.palette.green-500}" + }, + "name": "token-color-palette-green-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-500" + ] + }, + { + "key": "{color.palette.green-400}", + "$type": "color", + "$value": "#0e6027", + "group": "palette", + "$modes": { + "default": "#006619", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.70}", + "group": "palette", + "$modes": { + "default": "#006619", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, + "key": "{color.palette.green-400}" + }, + "name": "token-color-palette-green-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-400" + ] + }, + { + "key": "{color.palette.green-300}", + "$type": "color", + "$value": "#198038", + "group": "palette", + "$modes": { + "default": "#00781e", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#198038", + "cds-g100": "#198038" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.60}", + "group": "palette", + "$modes": { + "default": "#00781e", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.60}", + "cds-g100": "{carbon.color.green.60}" + }, + "key": "{color.palette.green-300}" + }, + "name": "token-color-palette-green-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-300" + ] + }, + { + "key": "{color.palette.green-200}", + "$type": "color", + "$value": "#24a148", + "group": "palette", + "$modes": { + "default": "#008a22", + "cds-g0": "#24a148", + "cds-g10": "#24a148", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.50}", + "group": "palette", + "$modes": { + "default": "#008a22", + "cds-g0": "{carbon.color.green.50}", + "cds-g10": "{carbon.color.green.50}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, + "key": "{color.palette.green-200}" + }, + "name": "token-color-palette-green-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-200" + ] + }, + { + "key": "{color.palette.green-100}", + "$type": "color", + "$value": "#a7f0ba", + "group": "palette", + "$modes": { + "default": "#cceeda", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.20}", + "group": "palette", + "$modes": { + "default": "#cceeda", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, + "key": "{color.palette.green-100}" + }, + "name": "token-color-palette-green-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-100" + ] + }, + { + "key": "{color.palette.green-50}", + "$type": "color", + "$value": "#defbe6", + "group": "palette", + "$modes": { + "default": "#f2fbf6", + "cds-g0": "#defbe6", + "cds-g10": "#defbe6", + "cds-g90": "#defbe6", + "cds-g100": "#defbe6" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.10}", + "group": "palette", + "$modes": { + "default": "#f2fbf6", + "cds-g0": "{carbon.color.green.10}", + "cds-g10": "{carbon.color.green.10}", + "cds-g90": "{carbon.color.green.10}", + "cds-g100": "{carbon.color.green.10}" + }, + "key": "{color.palette.green-50}" + }, + "name": "token-color-palette-green-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-50" + ] + }, + { + "key": "{color.palette.amber-500}", + "$type": "color", + "$value": "#3e1a00", + "group": "palette", + "$modes": { + "default": "#542800", + "cds-g0": "#3e1a00", + "cds-g10": "#3e1a00", + "cds-g90": "#3e1a00", + "cds-g100": "#3e1a00" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.90}", + "group": "palette", + "$modes": { + "default": "#542800", + "cds-g0": "{carbon.color.orange.90}", + "cds-g10": "{carbon.color.orange.90}", + "cds-g90": "{carbon.color.orange.90}", + "cds-g100": "{carbon.color.orange.90}" + }, + "key": "{color.palette.amber-500}" + }, + "name": "token-color-palette-amber-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-500" + ] + }, + { + "key": "{color.palette.amber-400}", + "$type": "color", + "$value": "#5e2900", + "group": "palette", + "$modes": { + "default": "#803d00", + "cds-g0": "#5e2900", + "cds-g10": "#5e2900", + "cds-g90": "#5e2900", + "cds-g100": "#5e2900" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.80}", + "group": "palette", + "$modes": { + "default": "#803d00", + "cds-g0": "{carbon.color.orange.80}", + "cds-g10": "{carbon.color.orange.80}", + "cds-g90": "{carbon.color.orange.80}", + "cds-g100": "{carbon.color.orange.80}" + }, + "key": "{color.palette.amber-400}" + }, + "name": "token-color-palette-amber-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-400" + ] + }, + { + "key": "{color.palette.amber-300}", + "$type": "color", + "$value": "#8a3800", + "group": "palette", + "$modes": { + "default": "#9e4b00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.70}", + "group": "palette", + "$modes": { + "default": "#9e4b00", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, + "key": "{color.palette.amber-300}" + }, + "name": "token-color-palette-amber-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-300" + ] + }, + { + "key": "{color.palette.amber-200}", + "$type": "color", + "$value": "#ba4e00", + "group": "palette", + "$modes": { + "default": "#bb5a00", + "cds-g0": "#ba4e00", + "cds-g10": "#ba4e00", + "cds-g90": "#ba4e00", + "cds-g100": "#ba4e00" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.60}", + "group": "palette", + "$modes": { + "default": "#bb5a00", + "cds-g0": "{carbon.color.orange.60}", + "cds-g10": "{carbon.color.orange.60}", + "cds-g90": "{carbon.color.orange.60}", + "cds-g100": "{carbon.color.orange.60}" + }, + "key": "{color.palette.amber-200}" + }, + "name": "token-color-palette-amber-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-200" + ] + }, + { + "key": "{color.palette.amber-100}", + "$type": "color", + "$value": "#ffd9be", + "group": "palette", + "$modes": { + "default": "#fbeabf", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.20}", + "group": "palette", + "$modes": { + "default": "#fbeabf", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "key": "{color.palette.amber-100}" + }, + "name": "token-color-palette-amber-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-100" + ] + }, + { + "key": "{color.palette.amber-50}", + "$type": "color", + "$value": "#fff2e8", + "group": "palette", + "$modes": { + "default": "#fff9e8", + "cds-g0": "#fff2e8", + "cds-g10": "#fff2e8", + "cds-g90": "#fff2e8", + "cds-g100": "#fff2e8" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.10}", + "group": "palette", + "$modes": { + "default": "#fff9e8", + "cds-g0": "{carbon.color.orange.10}", + "cds-g10": "{carbon.color.orange.10}", + "cds-g90": "{carbon.color.orange.10}", + "cds-g100": "{carbon.color.orange.10}" + }, + "key": "{color.palette.amber-50}" + }, + "name": "token-color-palette-amber-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-50" + ] + }, + { + "key": "{color.palette.red-500}", + "$type": "color", + "$value": "#520408", + "group": "palette", + "$modes": { + "default": "#51130a", + "cds-g0": "#520408", + "cds-g10": "#520408", + "cds-g90": "#520408", + "cds-g100": "#520408" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.90}", + "group": "palette", + "$modes": { + "default": "#51130a", + "cds-g0": "{carbon.color.red.90}", + "cds-g10": "{carbon.color.red.90}", + "cds-g90": "{carbon.color.red.90}", + "cds-g100": "{carbon.color.red.90}" + }, + "key": "{color.palette.red-500}" + }, + "name": "token-color-palette-red-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-500" + ] + }, + { + "key": "{color.palette.red-400}", + "$type": "color", + "$value": "#750e13", + "group": "palette", + "$modes": { + "default": "#940004", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#750e13", + "cds-g100": "#750e13" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.80}", + "group": "palette", + "$modes": { + "default": "#940004", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.80}", + "cds-g100": "{carbon.color.red.80}" + }, + "key": "{color.palette.red-400}" + }, + "name": "token-color-palette-red-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-400" + ] + }, + { + "key": "{color.palette.red-300}", + "$type": "color", + "$value": "#a2191f", + "group": "palette", + "$modes": { + "default": "#c00005", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.70}", + "group": "palette", + "$modes": { + "default": "#c00005", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, + "key": "{color.palette.red-300}" + }, + "name": "token-color-palette-red-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-300" + ] + }, + { + "key": "{color.palette.red-200}", + "$type": "color", + "$value": "#da1e28", + "group": "palette", + "$modes": { + "default": "#e52228", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.60}", + "group": "palette", + "$modes": { + "default": "#e52228", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.60}", + "cds-g100": "{carbon.color.red.60}" + }, + "key": "{color.palette.red-200}" + }, + "name": "token-color-palette-red-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-200" + ] + }, + { + "key": "{color.palette.red-100}", + "$type": "color", + "$value": "#ffd7d9", + "group": "palette", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.20}", + "group": "palette", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, + "key": "{color.palette.red-100}" + }, + "name": "token-color-palette-red-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-100" + ] + }, + { + "key": "{color.palette.red-50}", + "$type": "color", + "$value": "#fff1f1", + "group": "palette", + "$modes": { + "default": "#fff5f5", + "cds-g0": "#fff1f1", + "cds-g10": "#fff1f1", + "cds-g90": "#fff1f1", + "cds-g100": "#fff1f1" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.10}", + "group": "palette", + "$modes": { + "default": "#fff5f5", + "cds-g0": "{carbon.color.red.10}", + "cds-g10": "{carbon.color.red.10}", + "cds-g90": "{carbon.color.red.10}", + "cds-g100": "{carbon.color.red.10}" + }, + "key": "{color.palette.red-50}" + }, + "name": "token-color-palette-red-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-50" + ] + }, + { + "key": "{color.palette.neutral-700}", + "$type": "color", + "$value": "#161616", + "group": "palette", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.100}", + "group": "palette", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "{carbon.color.gray.100}", + "cds-g10": "{carbon.color.gray.100}", + "cds-g90": "{carbon.color.gray.100}", + "cds-g100": "{carbon.color.gray.100}" + }, + "key": "{color.palette.neutral-700}" + }, + "name": "token-color-palette-neutral-700", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-700" + ] + }, + { + "key": "{color.palette.neutral-600}", + "$type": "color", + "$value": "#393939", + "group": "palette", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#393939", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.80}", + "group": "palette", + "$modes": { + "default": "#3b3d45", + "cds-g0": "{carbon.color.gray.80}", + "cds-g10": "{carbon.color.gray.80}", + "cds-g90": "{carbon.color.gray.80}", + "cds-g100": "{carbon.color.gray.80}" + }, + "key": "{color.palette.neutral-600}" + }, + "name": "token-color-palette-neutral-600", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-600" + ] + }, + { + "key": "{color.palette.neutral-500}", + "$type": "color", + "$value": "#525252", + "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.70}", + "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": "{carbon.color.gray.70}", + "cds-g10": "{carbon.color.gray.70}", + "cds-g90": "{carbon.color.gray.70}", + "cds-g100": "{carbon.color.gray.70}" + }, + "key": "{color.palette.neutral-500}" + }, + "name": "token-color-palette-neutral-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-500" + ] + }, + { + "key": "{color.palette.neutral-400}", + "$type": "color", + "$value": "#8d8d8d", + "group": "palette", + "$modes": { + "default": "#8c909c", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.50}", + "group": "palette", + "$modes": { + "default": "#8c909c", + "cds-g0": "{carbon.color.gray.50}", + "cds-g10": "{carbon.color.gray.50}", + "cds-g90": "{carbon.color.gray.50}", + "cds-g100": "{carbon.color.gray.50}" + }, + "key": "{color.palette.neutral-400}" + }, + "name": "token-color-palette-neutral-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-400" + ] + }, + { + "key": "{color.palette.neutral-300}", + "$type": "color", + "$value": "#a8a8a8", + "group": "palette", + "$modes": { + "default": "#c2c5cb", + "cds-g0": "#a8a8a8", + "cds-g10": "#a8a8a8", + "cds-g90": "#a8a8a8", + "cds-g100": "#a8a8a8" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.40}", + "group": "palette", + "$modes": { + "default": "#c2c5cb", + "cds-g0": "{carbon.color.gray.40}", + "cds-g10": "{carbon.color.gray.40}", + "cds-g90": "{carbon.color.gray.40}", + "cds-g100": "{carbon.color.gray.40}" + }, + "key": "{color.palette.neutral-300}" + }, + "name": "token-color-palette-neutral-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-300" + ] + }, + { + "key": "{color.palette.neutral-200}", + "$type": "color", + "$value": "#c6c6c6", + "group": "palette", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.30}", + "group": "palette", + "$modes": { + "default": "#dedfe3", + "cds-g0": "{carbon.color.gray.30}", + "cds-g10": "{carbon.color.gray.30}", + "cds-g90": "{carbon.color.gray.30}", + "cds-g100": "{carbon.color.gray.30}" + }, + "key": "{color.palette.neutral-200}" + }, + "name": "token-color-palette-neutral-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-200" + ] + }, + { + "key": "{color.palette.neutral-100}", + "$type": "color", + "$value": "#e0e0e0", + "group": "palette", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#e0e0e0", + "cds-g100": "#e0e0e0" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.20}", + "group": "palette", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "{carbon.color.gray.20}", + "cds-g10": "{carbon.color.gray.20}", + "cds-g90": "{carbon.color.gray.20}", + "cds-g100": "{carbon.color.gray.20}" + }, + "key": "{color.palette.neutral-100}" + }, + "name": "token-color-palette-neutral-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-100" + ] + }, + { + "key": "{color.palette.neutral-50}", + "$type": "color", + "$value": "#f4f4f4", + "group": "palette", + "$modes": { + "default": "#fafafa", + "cds-g0": "#f4f4f4", + "cds-g10": "#f4f4f4", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.10}", + "group": "palette", + "$modes": { + "default": "#fafafa", + "cds-g0": "{carbon.color.gray.10}", + "cds-g10": "{carbon.color.gray.10}", + "cds-g90": "{carbon.color.gray.10}", + "cds-g100": "{carbon.color.gray.10}" + }, + "key": "{color.palette.neutral-50}" + }, + "name": "token-color-palette-neutral-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-50" + ] + }, + { + "key": "{color.palette.neutral-0}", + "$type": "color", + "$value": "#ffffff", + "group": "palette", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.white.0}", + "group": "palette", + "$modes": { + "default": "#ffffff", + "cds-g0": "{carbon.color.white.0}", + "cds-g10": "{carbon.color.white.0}", + "cds-g90": "{carbon.color.white.0}", + "cds-g100": "{carbon.color.white.0}" + }, + "key": "{color.palette.neutral-0}" + }, + "name": "token-color-palette-neutral-0", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-0" + ] + }, + { + "key": "{color.palette.alpha-300}", + "$type": "color", + "$value": "#8d8d8d", + "group": "palette", + "$modes": { + "default": "#393939", + "cds-g0": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#6f6f6f", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.50}", + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-600}", + "cds-g0": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.60}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "key": "{color.palette.alpha-300}" + }, + "name": "token-color-palette-alpha-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "alpha-300" + ] + }, + { + "key": "{color.palette.alpha-200}", + "$type": "color", + "$value": "#e0e0e0", + "group": "palette", + "$modes": { + "default": "#525252", + "cds-g0": { + "$value": "#c6c6c6", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#e0e0e0", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#6f6f6f", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#525252", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.20}", + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": { + "$value": "{carbon.color.gray.30}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.20}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.60}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.70}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "key": "{color.palette.alpha-200}" + }, + "name": "token-color-palette-alpha-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "alpha-200" + ] + }, + { + "key": "{color.palette.alpha-100}", + "$type": "color", + "$value": "#c6c6c6", + "group": "palette", + "$modes": { + "default": "#525252", + "cds-g0": { + "$value": "#e0e0e0", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#c6c6c6", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#525252", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#393939", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.30}", + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": { + "$value": "{carbon.color.gray.20}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.30}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.70}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.80}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "key": "{color.palette.alpha-100}" + }, + "name": "token-color-palette-alpha-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "alpha-100" + ] + }, + { + "key": "{color.border.primary}", + "$type": "color", + "$value": "#e0e0e0", + "group": "semantic", + "$modes": { + "default": "#e0e0e0", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.borderSubtle03}", + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-200}", + "cds-g0": "{carbon.themes.white.borderSubtle03}", + "cds-g10": "{carbon.themes.g10.borderSubtle03}", + "cds-g90": "{carbon.themes.g90.borderSubtle03}", + "cds-g100": "{carbon.themes.g100.borderSubtle03}" + }, + "key": "{color.border.primary}" + }, + "name": "token-color-border-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "primary" + ] + }, + { + "key": "{color.border.faint}", + "$type": "color", + "$value": "#c6c6c6", + "group": "semantic", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.borderSubtle00}", + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-100}", + "cds-g0": "{carbon.themes.white.borderSubtle00}", + "cds-g10": "{carbon.themes.g10.borderSubtle00}", + "cds-g90": "{carbon.themes.g90.borderSubtle00}", + "cds-g100": "{carbon.themes.g100.borderSubtle00}" + }, + "key": "{color.border.faint}" + }, + "name": "token-color-border-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "faint" + ] + }, + { + "key": "{color.border.strong}", + "$type": "color", + "$value": "#8d8d8d", + "group": "semantic", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.borderStrong01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-300}", + "cds-g0": "{carbon.themes.white.borderStrong01}", + "cds-g10": "{carbon.themes.g10.borderStrong01}", + "cds-g90": "{carbon.themes.g90.borderStrong01}", + "cds-g100": "{carbon.themes.g100.borderStrong01}" + }, + "key": "{color.border.strong}" + }, + "name": "token-color-border-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "strong" + ] + }, + { + "key": "{color.border.action}", + "$type": "color", + "$value": "#0f62fe", + "group": "semantic", + "$modes": { + "default": "#d0e2ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.borderInteractive}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-100}", + "cds-g0": "{carbon.themes.white.borderInteractive}", + "cds-g10": "{carbon.themes.g10.borderInteractive}", + "cds-g90": "{carbon.themes.g90.borderInteractive}", + "cds-g100": "{carbon.themes.g100.borderInteractive}" + }, + "key": "{color.border.action}" + }, + "name": "token-color-border-action", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "action" + ] + }, + { + "key": "{color.border.highlight}", + "$type": "color", + "$value": "#be95ff", + "group": "semantic", + "$modes": { + "default": "#e8daff", + "cds-g0": "#be95ff", + "cds-g10": "#be95ff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-100}", + "cds-g0": "{carbon.color.purple.40}", + "cds-g10": "{carbon.color.purple.40}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, + "key": "{color.border.highlight}" + }, + "name": "token-color-border-highlight", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "highlight" + ] + }, + { + "key": "{color.border.success}", + "$type": "color", + "$value": "#42be65", + "group": "semantic", + "$modes": { + "default": "#a7f0ba", + "cds-g0": "#42be65", + "cds-g10": "#42be65", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-100}", + "cds-g0": "{carbon.color.green.40}", + "cds-g10": "{carbon.color.green.40}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, + "key": "{color.border.success}" + }, + "name": "token-color-border-success", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "success" + ] + }, + { + "key": "{color.border.warning}", + "$type": "color", + "$value": "#d2a106", + "group": "semantic", + "$modes": { + "default": "#ffd9be", + "cds-g0": "#d2a106", + "cds-g10": "#d2a106", + "cds-g90": "#b28600", + "cds-g100": "#b28600" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.yellow.40}", + "cds-g10": "{carbon.color.yellow.40}", + "cds-g90": "{carbon.color.yellow.50}", + "cds-g100": "{carbon.color.yellow.50}" + }, + "key": "{color.border.warning}" + }, + "name": "token-color-border-warning", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "warning" + ] + }, + { + "key": "{color.border.critical}", + "$type": "color", + "$value": "#ff8389", + "group": "semantic", + "$modes": { + "default": "#ffd7d9", + "cds-g0": "#ff8389", + "cds-g10": "#ff8389", + "cds-g90": "#fa4d56", + "cds-g100": "#fa4d56" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-100}", + "cds-g0": "{carbon.color.red.40}", + "cds-g10": "{carbon.color.red.40}", + "cds-g90": "{carbon.color.red.50}", + "cds-g100": "{carbon.color.red.50}" + }, + "key": "{color.border.critical}" + }, + "name": "token-color-border-critical", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "critical" + ] + }, + { + "key": "{color.focus.action.internal}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "default": "#0043ce", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.focusInset}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, + "key": "{color.focus.action.internal}" + }, + "name": "token-color-focus-action-internal", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "action", + "internal" + ] + }, + { + "key": "{color.focus.action.external}", + "$type": "color", + "$value": "#0f62fe", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.focus}", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{color.focus.action.external}" + }, + "name": "token-color-focus-action-external", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "action", + "external" + ] + }, + { + "key": "{color.focus.critical.internal}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "default": "#a2191f", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.focusInset}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, + "key": "{color.focus.critical.internal}" + }, + "name": "token-color-focus-critical-internal", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "critical", + "internal" + ] + }, + { + "key": "{color.focus.critical.external}", + "$type": "color", + "$value": "#0f62fe", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#dd7578", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.focus}", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#dd7578", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{color.focus.critical.external}" + }, + "name": "token-color-focus-critical-external", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "critical", + "external" + ] + }, + { + "key": "{color.foreground.strong}", + "$type": "color", + "$value": "#161616", + "group": "semantic", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textPrimary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{color.foreground.strong}" + }, + "name": "token-color-foreground-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "strong" + ] + }, + { + "key": "{color.foreground.primary}", + "$type": "color", + "$value": "#161616", + "group": "semantic", + "$modes": { + "default": "#393939", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textPrimary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-600}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{color.foreground.primary}" + }, + "name": "token-color-foreground-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "primary" + ] + }, + { + "key": "{color.foreground.faint}", + "$type": "color", + "$value": "#525252", + "group": "semantic", + "$modes": { + "default": "#525252", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textSecondary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{color.foreground.faint}" + }, + "name": "token-color-foreground-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "faint" + ] + }, + { + "key": "{color.foreground.high-contrast}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textInverse}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{color.foreground.high-contrast}" + }, + "name": "token-color-foreground-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "high-contrast" + ] + }, + { + "key": "{color.foreground.disabled}", + "$type": "color", + "$value": "rgba(22, 22, 22, 0.25)", + "group": "semantic", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "rgba(22, 22, 22, 0.25)", + "cds-g10": "rgba(22, 22, 22, 0.25)", + "cds-g90": "rgba(244, 244, 244, 0.25)", + "cds-g100": "rgba(244, 244, 244, 0.25)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textDisabled}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textDisabled}", + "cds-g10": "{carbon.themes.g10.textDisabled}", + "cds-g90": "{carbon.themes.g90.textDisabled}", + "cds-g100": "{carbon.themes.g100.textDisabled}" + }, + "key": "{color.foreground.disabled}" + }, + "name": "token-color-foreground-disabled", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "disabled" + ] + }, + { + "key": "{color.foreground.action}", + "$type": "color", + "$value": "#0f62fe", + "group": "semantic", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#78a9ff", + "cds-g100": "#78a9ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.linkPrimary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.white.linkPrimary}", + "cds-g10": "{carbon.themes.g10.linkPrimary}", + "cds-g90": "{carbon.themes.g90.linkPrimary}", + "cds-g100": "{carbon.themes.g100.linkPrimary}" + }, + "key": "{color.foreground.action}" + }, + "name": "token-color-foreground-action", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "action" + ] + }, + { + "key": "{color.foreground.action-hover}", + "$type": "color", + "$value": "#0043ce", + "group": "semantic", + "$modes": { + "default": "#0043ce", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.linkPrimaryHover}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, + "key": "{color.foreground.action-hover}" + }, + "name": "token-color-foreground-action-hover", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "action-hover" + ] + }, + { + "key": "{color.foreground.action-active}", + "$type": "color", + "$value": "#0043ce", + "group": "semantic", + "$modes": { + "default": "#002d9c", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.linkPrimaryHover}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, + "key": "{color.foreground.action-active}" + }, + "name": "token-color-foreground-action-active", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "action-active" + ] + }, + { + "key": "{color.foreground.highlight}", + "$type": "color", + "$value": "#8a3ffc", + "group": "semantic", + "$modes": { + "default": "#a56eff", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.60}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, + "key": "{color.foreground.highlight}" + }, + "name": "token-color-foreground-highlight", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "highlight" + ] + }, + { + "key": "{color.foreground.highlight-on-surface}", + "$type": "color", + "$value": "#6929c4", + "group": "semantic", + "$modes": { + "default": "#8a3ffc", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#d4bbff", + "cds-g100": "#d4bbff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-300}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.30}", + "cds-g100": "{carbon.color.purple.30}" + }, + "key": "{color.foreground.highlight-on-surface}" + }, + "name": "token-color-foreground-highlight-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "highlight-on-surface" + ] + }, + { + "key": "{color.foreground.highlight-high-contrast}", + "$type": "color", + "$value": "#491d8b", + "group": "semantic", + "$modes": { + "default": "#31135e", + "cds-g0": "#491d8b", + "cds-g10": "#491d8b", + "cds-g90": "#e8daff", + "cds-g100": "#d4bbff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.80}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-500}", + "cds-g0": "{carbon.color.purple.80}", + "cds-g10": "{carbon.color.purple.80}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.30}" + }, + "key": "{color.foreground.highlight-high-contrast}" + }, + "name": "token-color-foreground-highlight-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "highlight-high-contrast" + ] + }, + { + "key": "{color.foreground.success}", + "$type": "color", + "$value": "#198038", + "group": "semantic", + "$modes": { + "default": "#24a148", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#42be65", + "cds-g100": "#42be65" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.60}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-200}", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.40}", + "cds-g100": "{carbon.color.green.40}" + }, + "key": "{color.foreground.success}" + }, + "name": "token-color-foreground-success", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "success" + ] + }, + { + "key": "{color.foreground.success-on-surface}", + "$type": "color", + "$value": "#0e6027", + "group": "semantic", + "$modes": { + "default": "#198038", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#6fdc8c", + "cds-g100": "#6fdc8c" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-300}", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.30}", + "cds-g100": "{carbon.color.green.30}" + }, + "key": "{color.foreground.success-on-surface}" + }, + "name": "token-color-foreground-success-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "success-on-surface" + ] + }, + { + "key": "{color.foreground.success-high-contrast}", + "$type": "color", + "$value": "#044317", + "group": "semantic", + "$modes": { + "default": "#044317", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.80}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-500}", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, + "key": "{color.foreground.success-high-contrast}" + }, + "name": "token-color-foreground-success-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "success-high-contrast" + ] + }, + { + "key": "{color.foreground.warning}", + "$type": "color", + "$value": "#8e6a00", + "group": "semantic", + "$modes": { + "default": "#ba4e00", + "cds-g0": "#8e6a00", + "cds-g10": "#8e6a00", + "cds-g90": "#d2a106", + "cds-g100": "#d2a106" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.60}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.yellow.60}", + "cds-g10": "{carbon.color.yellow.60}", + "cds-g90": "{carbon.color.yellow.40}", + "cds-g100": "{carbon.color.yellow.40}" + }, + "key": "{color.foreground.warning}" + }, + "name": "token-color-foreground-warning", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "warning" + ] + }, + { + "key": "{color.foreground.warning-on-surface}", + "$type": "color", + "$value": "#684e00", + "group": "semantic", + "$modes": { + "default": "#8a3800", + "cds-g0": "#684e00", + "cds-g10": "#684e00", + "cds-g90": "#f1c21b", + "cds-g100": "#f1c21b" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-300}", + "cds-g0": "{carbon.color.yellow.70}", + "cds-g10": "{carbon.color.yellow.70}", + "cds-g90": "{carbon.color.yellow.30}", + "cds-g100": "{carbon.color.yellow.30}" + }, + "key": "{color.foreground.warning-on-surface}" + }, + "name": "token-color-foreground-warning-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "warning-on-surface" + ] + }, + { + "key": "{color.foreground.warning-high-contrast}", + "$type": "color", + "$value": "#483700", + "group": "semantic", + "$modes": { + "default": "#3e1a00", + "cds-g0": "#483700", + "cds-g10": "#483700", + "cds-g90": "#fddc69", + "cds-g100": "#fddc69" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.80}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-500}", + "cds-g0": "{carbon.color.yellow.80}", + "cds-g10": "{carbon.color.yellow.80}", + "cds-g90": "{carbon.color.yellow.20}", + "cds-g100": "{carbon.color.yellow.20}" + }, + "key": "{color.foreground.warning-high-contrast}" + }, + "name": "token-color-foreground-warning-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "warning-high-contrast" + ] + }, + { + "key": "{color.foreground.critical}", + "$type": "color", + "$value": "#da1e28", + "group": "semantic", + "$modes": { + "default": "#da1e28", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#ff8389", + "cds-g100": "#ff8389" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.60}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-200}", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.40}", + "cds-g100": "{carbon.color.red.40}" + }, + "key": "{color.foreground.critical}" + }, + "name": "token-color-foreground-critical", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "critical" + ] + }, + { + "key": "{color.foreground.critical-on-surface}", + "$type": "color", + "$value": "#a2191f", + "group": "semantic", + "$modes": { + "default": "#a2191f", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffb3b8", + "cds-g100": "#ffb3b8" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.30}", + "cds-g100": "{carbon.color.red.30}" + }, + "key": "{color.foreground.critical-on-surface}" + }, + "name": "token-color-foreground-critical-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "critical-on-surface" + ] + }, + { + "key": "{color.foreground.critical-high-contrast}", + "$type": "color", + "$value": "#750e13", + "group": "semantic", + "$modes": { + "default": "#520408", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.80}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-500}", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, + "key": "{color.foreground.critical-high-contrast}" + }, + "name": "token-color-foreground-critical-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "critical-high-contrast" + ] + }, + { + "key": "{color.page.primary}", + "$type": "color", + "$value": "#f4f4f4", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.background}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, + "key": "{color.page.primary}" + }, + "name": "token-color-page-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "page", + "primary" + ] + }, + { + "key": "{color.page.faint}", + "$type": "color", + "$value": "#f4f4f4", + "group": "semantic", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.background}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, + "key": "{color.page.faint}" + }, + "name": "token-color-page-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "page", + "faint" + ] + }, + { + "key": "{color.surface.primary}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.layer01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, + "key": "{color.surface.primary}" + }, + "name": "token-color-surface-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "primary" + ] + }, + { + "key": "{color.surface.faint}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.layer01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, + "key": "{color.surface.faint}" + }, + "name": "token-color-surface-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "faint" + ] + }, + { + "key": "{color.surface.strong}", + "$type": "color", + "$value": "#e0e0e0", + "group": "semantic", + "$modes": { + "default": "#e0e0e0", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.layerAccent01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerAccent01}", + "cds-g10": "{carbon.themes.g10.layerAccent01}", + "cds-g90": "{carbon.themes.g90.layerAccent01}", + "cds-g100": "{carbon.themes.g100.layerAccent01}" + }, + "key": "{color.surface.strong}" + }, + "name": "token-color-surface-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "strong" + ] + }, + { + "key": "{color.surface.high-contrast}", + "$type": "color", + "$value": "#393939", + "group": "semantic", + "$modes": { + "default": "#161616", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.backgroundInverse}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "key": "{color.surface.high-contrast}" + }, + "name": "token-color-surface-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "high-contrast" + ] + }, + { + "key": "{color.surface.interactive}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.layer01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, + "key": "{color.surface.interactive}" + }, + "name": "token-color-surface-interactive", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive" + ] + }, + { + "key": "{color.surface.interactive-hover}", + "$type": "color", + "$value": "#e8e8e8", + "group": "semantic", + "$modes": { + "default": "#e0e0e0", + "cds-g0": "#e8e8e8", + "cds-g10": "#e8e8e8", + "cds-g90": "#474747", + "cds-g100": "#333333" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.layerHover01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerHover01}", + "cds-g10": "{carbon.themes.g10.layerHover01}", + "cds-g90": "{carbon.themes.g90.layerHover01}", + "cds-g100": "{carbon.themes.g100.layerHover01}" + }, + "key": "{color.surface.interactive-hover}" + }, + "name": "token-color-surface-interactive-hover", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive-hover" + ] + }, + { + "key": "{color.surface.interactive-active}", + "$type": "color", + "$value": "#c6c6c6", + "group": "semantic", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.layerActive01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.white.layerActive01}", + "cds-g10": "{carbon.themes.g10.layerActive01}", + "cds-g90": "{carbon.themes.g90.layerActive01}", + "cds-g100": "{carbon.themes.g100.layerActive01}" + }, + "key": "{color.surface.interactive-active}" + }, + "name": "token-color-surface-interactive-active", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive-active" + ] + }, + { + "key": "{color.surface.interactive-disabled}", + "$type": "color", + "$value": "#c6c6c6", + "group": "semantic", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.30}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.color.gray.30}", + "cds-g10": "{carbon.color.gray.30}", + "cds-g90": "{carbon.color.gray.60}", + "cds-g100": "{carbon.color.gray.70}" + }, + "key": "{color.surface.interactive-disabled}" + }, + "name": "token-color-surface-interactive-disabled", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive-disabled" + ] + }, + { + "key": "{color.surface.action}", + "$type": "color", + "$value": "#d0e2ff", + "group": "semantic", + "$modes": { + "default": "#edf5ff", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0f62fe", + "cds-g100": "#0043ce" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.20}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-50}", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.60}", + "cds-g100": "{carbon.color.blue.70}" + }, + "key": "{color.surface.action}" + }, + "name": "token-color-surface-action", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "action" + ] + }, + { + "key": "{color.surface.highlight}", + "$type": "color", + "$value": "#e8daff", + "group": "semantic", + "$modes": { + "default": "#f6f2ff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.20}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-50}", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, + "key": "{color.surface.highlight}" + }, + "name": "token-color-surface-highlight", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "highlight" + ] + }, + { + "key": "{color.surface.success}", + "$type": "color", + "$value": "#a7f0ba", + "group": "semantic", + "$modes": { + "default": "#defbe6", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.20}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-50}", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, + "key": "{color.surface.success}" + }, + "name": "token-color-surface-success", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "success" + ] + }, + { + "key": "{color.surface.warning}", + "$type": "color", + "$value": "#fcf4d6", + "group": "semantic", + "$modes": { + "default": "#fff2e8", + "cds-g0": "#fcf4d6", + "cds-g10": "#fcf4d6", + "cds-g90": "#684e00", + "cds-g100": "#684e00" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.10}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-50}", + "cds-g0": "{carbon.color.yellow.10}", + "cds-g10": "{carbon.color.yellow.10}", + "cds-g90": "{carbon.color.yellow.70}", + "cds-g100": "{carbon.color.yellow.70}" + }, + "key": "{color.surface.warning}" + }, + "name": "token-color-surface-warning", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "warning" + ] + }, + { + "key": "{color.surface.critical}", + "$type": "color", + "$value": "#ffd7d9", + "group": "semantic", + "$modes": { + "default": "#fff1f1", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.20}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-50}", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, + "key": "{color.surface.critical}" + }, + "name": "token-color-surface-critical", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "critical" + ] + }, + { + "key": "{color.hashicorp.brand}", + "$type": "color", + "$value": "#000000", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.hashicorp-brand}", + "group": "branding", + "key": "{color.hashicorp.brand}" + }, + "name": "token-color-hashicorp-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "hashicorp", + "brand" + ] + }, + { + "key": "{color.boundary.brand}", + "$type": "color", + "$value": "#f24c53", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-brand}", + "group": "branding", + "key": "{color.boundary.brand}" + }, + "name": "token-color-boundary-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "brand" + ] + }, + { + "key": "{color.boundary.foreground}", + "$type": "color", + "$value": "#cf2d32", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-500}", + "group": "branding", + "key": "{color.boundary.foreground}" + }, + "name": "token-color-boundary-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "foreground" + ] + }, + { + "key": "{color.boundary.surface}", + "$type": "color", + "$value": "#ffecec", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-50}", + "group": "branding", + "key": "{color.boundary.surface}" + }, + "name": "token-color-boundary-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "surface" + ] + }, + { + "key": "{color.boundary.border}", + "$type": "color", + "$value": "#fbd7d8", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-100}", + "group": "branding", + "key": "{color.boundary.border}" + }, + "name": "token-color-boundary-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "border" + ] + }, + { + "key": "{color.boundary.gradient.primary.start}", + "$type": "color", + "$value": "#f97076", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-300}", + "group": "branding", + "key": "{color.boundary.gradient.primary.start}" + }, + "name": "token-color-boundary-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.boundary.gradient.primary.stop}", + "$type": "color", + "$value": "#db363b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-400}", + "group": "branding", + "key": "{color.boundary.gradient.primary.stop}" + }, + "name": "token-color-boundary-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.boundary.gradient.faint.start}", + "$type": "color", + "$value": "#fffafa", + "group": "branding", + "comment": "this is the 'boundary-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffafa", + "group": "branding", + "comment": "this is the 'boundary-50' value at 25% opacity on white", + "key": "{color.boundary.gradient.faint.start}" + }, + "name": "token-color-boundary-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.boundary.gradient.faint.stop}", + "$type": "color", + "$value": "#ffecec", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-50}", + "group": "branding", + "key": "{color.boundary.gradient.faint.stop}" + }, + "name": "token-color-boundary-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.consul.brand}", + "$type": "color", + "$value": "#e03875", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-brand}", + "group": "branding", + "key": "{color.consul.brand}" + }, + "name": "token-color-consul-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "brand" + ] + }, + { + "key": "{color.consul.foreground}", + "$type": "color", + "$value": "#d01c5b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-500}", + "group": "branding", + "key": "{color.consul.foreground}" + }, + "name": "token-color-consul-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "foreground" + ] + }, + { + "key": "{color.consul.surface}", + "$type": "color", + "$value": "#ffe9f1", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-50}", + "group": "branding", + "key": "{color.consul.surface}" + }, + "name": "token-color-consul-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "surface" + ] + }, + { + "key": "{color.consul.border}", + "$type": "color", + "$value": "#ffcede", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-100}", + "group": "branding", + "key": "{color.consul.border}" + }, + "name": "token-color-consul-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "border" + ] + }, + { + "key": "{color.consul.gradient.primary.start}", + "$type": "color", + "$value": "#ff99be", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-300}", + "group": "branding", + "key": "{color.consul.gradient.primary.start}" + }, + "name": "token-color-consul-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.consul.gradient.primary.stop}", + "$type": "color", + "$value": "#da306e", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-400}", + "group": "branding", + "key": "{color.consul.gradient.primary.stop}" + }, + "name": "token-color-consul-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.consul.gradient.faint.start}", + "$type": "color", + "$value": "#fff9fb", + "group": "branding", + "comment": "this is the 'consul-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fff9fb", + "group": "branding", + "comment": "this is the 'consul-50' value at 25% opacity on white", + "key": "{color.consul.gradient.faint.start}" + }, + "name": "token-color-consul-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.consul.gradient.faint.stop}", + "$type": "color", + "$value": "#ffe9f1", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-50}", + "group": "branding", + "key": "{color.consul.gradient.faint.stop}" + }, + "name": "token-color-consul-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.hcp.brand}", + "$type": "color", + "$value": "#000000", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.hcp-brand}", + "group": "branding", + "key": "{color.hcp.brand}" + }, + "name": "token-color-hcp-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "hcp", + "brand" + ] + }, + { + "key": "{color.nomad.brand}", + "$type": "color", + "$value": "#06d092", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-brand}", + "group": "branding", + "key": "{color.nomad.brand}" + }, + "name": "token-color-nomad-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "brand" + ] + }, + { + "key": "{color.nomad.foreground}", + "$type": "color", + "$value": "#008661", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-500}", + "group": "branding", + "key": "{color.nomad.foreground}" + }, + "name": "token-color-nomad-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "foreground" + ] + }, + { + "key": "{color.nomad.surface}", + "$type": "color", + "$value": "#d3fdeb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-50}", + "group": "branding", + "key": "{color.nomad.surface}" + }, + "name": "token-color-nomad-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "surface" + ] + }, + { + "key": "{color.nomad.border}", + "$type": "color", + "$value": "#bff3dd", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-100}", + "group": "branding", + "key": "{color.nomad.border}" + }, + "name": "token-color-nomad-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "border" + ] + }, + { + "key": "{color.nomad.gradient.primary.start}", + "$type": "color", + "$value": "#bff3dd", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-100}", + "group": "branding", + "key": "{color.nomad.gradient.primary.start}" + }, + "name": "token-color-nomad-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.nomad.gradient.primary.stop}", + "$type": "color", + "$value": "#60dea9", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-200}", + "group": "branding", + "key": "{color.nomad.gradient.primary.stop}" + }, + "name": "token-color-nomad-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.nomad.gradient.faint.start}", + "$type": "color", + "$value": "#f3fff9", + "group": "branding", + "comment": "this is the 'nomad-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#f3fff9", + "group": "branding", + "comment": "this is the 'nomad-50' value at 25% opacity on white", + "key": "{color.nomad.gradient.faint.start}" + }, + "name": "token-color-nomad-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.nomad.gradient.faint.stop}", + "$type": "color", + "$value": "#d3fdeb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-50}", + "group": "branding", + "key": "{color.nomad.gradient.faint.stop}" + }, + "name": "token-color-nomad-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.packer.brand}", + "$type": "color", + "$value": "#02a8ef", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-brand}", + "group": "branding", + "key": "{color.packer.brand}" + }, + "name": "token-color-packer-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "brand" + ] + }, + { + "key": "{color.packer.foreground}", + "$type": "color", + "$value": "#007eb4", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-500}", + "group": "branding", + "key": "{color.packer.foreground}" + }, + "name": "token-color-packer-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "foreground" + ] + }, + { + "key": "{color.packer.surface}", + "$type": "color", + "$value": "#d4f2ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-50}", + "group": "branding", + "key": "{color.packer.surface}" + }, + "name": "token-color-packer-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "surface" + ] + }, + { + "key": "{color.packer.border}", + "$type": "color", + "$value": "#b4e4ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-100}", + "group": "branding", + "key": "{color.packer.border}" + }, + "name": "token-color-packer-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "border" + ] + }, + { + "key": "{color.packer.gradient.primary.start}", + "$type": "color", + "$value": "#b4e4ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-100}", + "group": "branding", + "key": "{color.packer.gradient.primary.start}" + }, + "name": "token-color-packer-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.packer.gradient.primary.stop}", + "$type": "color", + "$value": "#63d0ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-200}", + "group": "branding", + "key": "{color.packer.gradient.primary.stop}" + }, + "name": "token-color-packer-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.packer.gradient.faint.start}", + "$type": "color", + "$value": "#f3fcff", + "group": "branding", + "comment": "this is the 'packer-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#F3FCFF", + "group": "branding", + "comment": "this is the 'packer-50' value at 25% opacity on white", + "key": "{color.packer.gradient.faint.start}" + }, + "name": "token-color-packer-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.packer.gradient.faint.stop}", + "$type": "color", + "$value": "#d4f2ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-50}", + "group": "branding", + "key": "{color.packer.gradient.faint.stop}" + }, + "name": "token-color-packer-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.terraform.brand}", + "$type": "color", + "$value": "#7b42bc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-brand}", + "group": "branding", + "key": "{color.terraform.brand}" + }, + "name": "token-color-terraform-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "brand" + ] + }, + { + "key": "{color.terraform.brand-on-dark}", + "$type": "color", + "$value": "#a067da", + "group": "branding", + "comment": "this is an alternative brand color meant to be used on dark backgrounds", + "original": { + "$type": "color", + "$value": "#a067da", + "group": "branding", + "comment": "this is an alternative brand color meant to be used on dark backgrounds", + "key": "{color.terraform.brand-on-dark}" + }, + "name": "token-color-terraform-brand-on-dark", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "brand-on-dark" + ] + }, + { + "key": "{color.terraform.foreground}", + "$type": "color", + "$value": "#773cb4", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-500}", + "group": "branding", + "key": "{color.terraform.foreground}" + }, + "name": "token-color-terraform-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "foreground" + ] + }, + { + "key": "{color.terraform.surface}", + "$type": "color", + "$value": "#f4ecff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-50}", + "group": "branding", + "key": "{color.terraform.surface}" + }, + "name": "token-color-terraform-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "surface" + ] + }, + { + "key": "{color.terraform.border}", + "$type": "color", + "$value": "#ebdbfc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-100}", + "group": "branding", + "key": "{color.terraform.border}" + }, + "name": "token-color-terraform-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "border" + ] + }, + { + "key": "{color.terraform.gradient.primary.start}", + "$type": "color", + "$value": "#bb8deb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-300}", + "group": "branding", + "key": "{color.terraform.gradient.primary.start}" + }, + "name": "token-color-terraform-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.terraform.gradient.primary.stop}", + "$type": "color", + "$value": "#844fba", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-400}", + "group": "branding", + "key": "{color.terraform.gradient.primary.stop}" + }, + "name": "token-color-terraform-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.terraform.gradient.faint.start}", + "$type": "color", + "$value": "#fcfaff", + "group": "branding", + "comment": "this is the 'terraform-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fcfaff", + "group": "branding", + "comment": "this is the 'terraform-50' value at 25% opacity on white", + "key": "{color.terraform.gradient.faint.start}" + }, + "name": "token-color-terraform-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.terraform.gradient.faint.stop}", + "$type": "color", + "$value": "#f4ecff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-50}", + "group": "branding", + "key": "{color.terraform.gradient.faint.stop}" + }, + "name": "token-color-terraform-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.vagrant.brand}", + "$type": "color", + "$value": "#1868f2", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-brand}", + "group": "branding", + "key": "{color.vagrant.brand}" + }, + "name": "token-color-vagrant-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "brand" + ] + }, + { + "key": "{color.vagrant.foreground}", + "$type": "color", + "$value": "#1c61d8", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-500}", + "group": "branding", + "key": "{color.vagrant.foreground}" + }, + "name": "token-color-vagrant-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "foreground" + ] + }, + { + "key": "{color.vagrant.surface}", + "$type": "color", + "$value": "#d6ebff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-50}", + "group": "branding", + "key": "{color.vagrant.surface}" + }, + "name": "token-color-vagrant-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "surface" + ] + }, + { + "key": "{color.vagrant.border}", + "$type": "color", + "$value": "#c7dbfc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-100}", + "group": "branding", + "key": "{color.vagrant.border}" + }, + "name": "token-color-vagrant-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "border" + ] + }, + { + "key": "{color.vagrant.gradient.primary.start}", + "$type": "color", + "$value": "#639cff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-300}", + "group": "branding", + "key": "{color.vagrant.gradient.primary.start}" + }, + "name": "token-color-vagrant-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.vagrant.gradient.primary.stop}", + "$type": "color", + "$value": "#2e71e5", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-400}", + "group": "branding", + "key": "{color.vagrant.gradient.primary.stop}" + }, + "name": "token-color-vagrant-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.vagrant.gradient.faint.start}", + "$type": "color", + "$value": "#f4faff", + "group": "branding", + "comment": "this is the 'vagrant-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#f4faff", + "group": "branding", + "comment": "this is the 'vagrant-50' value at 25% opacity on white", + "key": "{color.vagrant.gradient.faint.start}" + }, + "name": "token-color-vagrant-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.vagrant.gradient.faint.stop}", + "$type": "color", + "$value": "#d6ebff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-50}", + "group": "branding", + "key": "{color.vagrant.gradient.faint.stop}" + }, + "name": "token-color-vagrant-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.vault-radar.brand}", + "$type": "color", + "$value": "#ffcf25", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-brand}", + "group": "branding", + "key": "{color.vault-radar.brand}" + }, + "name": "token-color-vault-radar-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "brand" + ] + }, + { + "key": "{color.vault-radar.brand-alt}", + "$type": "color", + "$value": "#000000", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work", + "original": { + "$type": "color", + "$value": "#000", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work", + "key": "{color.vault-radar.brand-alt}" + }, + "name": "token-color-vault-radar-brand-alt", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "brand-alt" + ] + }, + { + "key": "{color.vault-radar.foreground}", + "$type": "color", + "$value": "#9a6f00", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-500}", + "group": "branding", + "key": "{color.vault-radar.foreground}" + }, + "name": "token-color-vault-radar-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "foreground" + ] + }, + { + "key": "{color.vault-radar.surface}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-50}", + "group": "branding", + "key": "{color.vault-radar.surface}" + }, + "name": "token-color-vault-radar-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "surface" + ] + }, + { + "key": "{color.vault-radar.border}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-100}", + "group": "branding", + "key": "{color.vault-radar.border}" + }, + "name": "token-color-vault-radar-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "border" + ] + }, + { + "key": "{color.vault-radar.gradient.primary.start}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-100}", + "group": "branding", + "key": "{color.vault-radar.gradient.primary.start}" + }, + "name": "token-color-vault-radar-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.vault-radar.gradient.primary.stop}", + "$type": "color", + "$value": "#ffe543", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-200}", + "group": "branding", + "key": "{color.vault-radar.gradient.primary.stop}" + }, + "name": "token-color-vault-radar-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.vault-radar.gradient.faint.start}", + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-radar-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-radar-50' value at 25% opacity on white", + "key": "{color.vault-radar.gradient.faint.start}" + }, + "name": "token-color-vault-radar-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.vault-radar.gradient.faint.stop}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-50}", + "group": "branding", + "key": "{color.vault-radar.gradient.faint.stop}" + }, + "name": "token-color-vault-radar-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.vault-secrets.brand}", + "$type": "color", + "$value": "#ffcf25", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-brand}", + "group": "branding", + "key": "{color.vault-secrets.brand}" + }, + "name": "token-color-vault-secrets-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "brand" + ] + }, + { + "key": "{color.vault-secrets.brand-alt}", + "group": "branding", + "$type": "color", + "$value": "#000000", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work", + "original": { + "group": "branding", + "$type": "color", + "$value": "#000", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work", + "key": "{color.vault-secrets.brand-alt}" + }, + "name": "token-color-vault-secrets-brand-alt", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "brand-alt" + ] + }, + { + "key": "{color.vault-secrets.foreground}", + "$type": "color", + "$value": "#9a6f00", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-500}", + "group": "branding", + "key": "{color.vault-secrets.foreground}" + }, + "name": "token-color-vault-secrets-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "foreground" + ] + }, + { + "key": "{color.vault-secrets.surface}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-50}", + "group": "branding", + "key": "{color.vault-secrets.surface}" + }, + "name": "token-color-vault-secrets-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "surface" + ] + }, + { + "key": "{color.vault-secrets.border}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-100}", + "group": "branding", + "key": "{color.vault-secrets.border}" + }, + "name": "token-color-vault-secrets-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "border" + ] + }, + { + "key": "{color.vault-secrets.gradient.primary.start}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-100}", + "group": "branding", + "key": "{color.vault-secrets.gradient.primary.start}" + }, + "name": "token-color-vault-secrets-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.vault-secrets.gradient.primary.stop}", + "$type": "color", + "$value": "#ffe543", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-200}", + "group": "branding", + "key": "{color.vault-secrets.gradient.primary.stop}" + }, + "name": "token-color-vault-secrets-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.vault-secrets.gradient.faint.start}", + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-secrets-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-secrets-50' value at 25% opacity on white", + "key": "{color.vault-secrets.gradient.faint.start}" + }, + "name": "token-color-vault-secrets-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.vault-secrets.gradient.faint.stop}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-50}", + "group": "branding", + "key": "{color.vault-secrets.gradient.faint.stop}" + }, + "name": "token-color-vault-secrets-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.vault.brand}", + "$type": "color", + "$value": "#ffcf25", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-brand}", + "group": "branding", + "key": "{color.vault.brand}" + }, + "name": "token-color-vault-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "brand" + ] + }, + { + "key": "{color.vault.brand-alt}", + "$type": "color", + "$value": "#000000", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work", + "original": { + "$type": "color", + "$value": "#000", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work", + "key": "{color.vault.brand-alt}" + }, + "name": "token-color-vault-brand-alt", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "brand-alt" + ] + }, + { + "key": "{color.vault.foreground}", + "$type": "color", + "$value": "#9a6f00", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-500}", + "group": "branding", + "key": "{color.vault.foreground}" + }, + "name": "token-color-vault-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "foreground" + ] + }, + { + "key": "{color.vault.surface}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-50}", + "group": "branding", + "key": "{color.vault.surface}" + }, + "name": "token-color-vault-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "surface" + ] + }, + { + "key": "{color.vault.border}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-100}", + "group": "branding", + "key": "{color.vault.border}" + }, + "name": "token-color-vault-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "border" + ] + }, + { + "key": "{color.vault.gradient.primary.start}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-100}", + "group": "branding", + "key": "{color.vault.gradient.primary.start}" + }, + "name": "token-color-vault-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.vault.gradient.primary.stop}", + "$type": "color", + "$value": "#ffe543", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-200}", + "group": "branding", + "key": "{color.vault.gradient.primary.stop}" + }, + "name": "token-color-vault-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.vault.gradient.faint.start}", + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-50' value at 25% opacity on white", + "key": "{color.vault.gradient.faint.start}" + }, + "name": "token-color-vault-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.vault.gradient.faint.stop}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-50}", + "group": "branding", + "key": "{color.vault.gradient.faint.stop}" + }, + "name": "token-color-vault-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.waypoint.brand}", + "$type": "color", + "$value": "#14c6cb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-brand}", + "group": "branding", + "key": "{color.waypoint.brand}" + }, + "name": "token-color-waypoint-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "brand" + ] + }, + { + "key": "{color.waypoint.foreground}", + "$type": "color", + "$value": "#008196", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-500}", + "group": "branding", + "key": "{color.waypoint.foreground}" + }, + "name": "token-color-waypoint-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "foreground" + ] + }, + { + "key": "{color.waypoint.surface}", + "$type": "color", + "$value": "#e0fcff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-50}", + "group": "branding", + "key": "{color.waypoint.surface}" + }, + "name": "token-color-waypoint-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "surface" + ] + }, + { + "key": "{color.waypoint.border}", + "$type": "color", + "$value": "#cbf1f3", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-100}", + "group": "branding", + "key": "{color.waypoint.border}" + }, + "name": "token-color-waypoint-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "border" + ] + }, + { + "key": "{color.waypoint.gradient.primary.start}", + "$type": "color", + "$value": "#cbf1f3", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-100}", + "group": "branding", + "key": "{color.waypoint.gradient.primary.start}" + }, + "name": "token-color-waypoint-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.waypoint.gradient.primary.stop}", + "$type": "color", + "$value": "#62d4dc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-200}", + "group": "branding", + "key": "{color.waypoint.gradient.primary.stop}" + }, + "name": "token-color-waypoint-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.waypoint.gradient.faint.start}", + "$type": "color", + "$value": "#f6feff", + "group": "branding", + "comment": "this is the 'waypoint-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#f6feff", + "group": "branding", + "comment": "this is the 'waypoint-50' value at 25% opacity on white", + "key": "{color.waypoint.gradient.faint.start}" + }, + "name": "token-color-waypoint-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.waypoint.gradient.faint.stop}", + "$type": "color", + "$value": "#e0fcff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-50}", + "group": "branding", + "key": "{color.waypoint.gradient.faint.stop}" + }, + "name": "token-color-waypoint-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{elevation.inset.box-shadow}", + "$value": "none", + "$modes": { + "default": "inset 0px 1px 2px 1px #5252521a", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.inset.box-shadow-01}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.inset.box-shadow}" + }, + "name": "token-elevation-inset-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "inset", + "box-shadow" + ] + }, + { + "key": "{elevation.low.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 1px 1px 0px #5252520d, 0px 2px 2px 0px #5252520d", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.low.box-shadow-01}, {elevation.low.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.low.box-shadow}" + }, + "name": "token-elevation-low-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "low", + "box-shadow" + ] + }, + { + "key": "{elevation.mid.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #5252521a, 0px 8px 16px -10px #52525233", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.mid.box-shadow-01}, {elevation.mid.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.mid.box-shadow}" + }, + "name": "token-elevation-mid-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "mid", + "box-shadow" + ] + }, + { + "key": "{elevation.high.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #52525226, 0px 16px 16px -10px #52525233", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.high.box-shadow-01}, {elevation.high.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.high.box-shadow}" + }, + "name": "token-elevation-high-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "high", + "box-shadow" + ] + }, + { + "key": "{elevation.higher.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #5252521a, 0px 12px 28px 0px #52525240", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.higher.box-shadow-01}, {elevation.higher.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.higher.box-shadow}" + }, + "name": "token-elevation-higher-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "higher", + "box-shadow" + ] + }, + { + "key": "{elevation.overlay.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #39393940, 0px 12px 24px 0px #39393959", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.overlay.box-shadow-01}, {elevation.overlay.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.overlay.box-shadow}" + }, + "name": "token-elevation-overlay-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "overlay", + "box-shadow" + ] + }, + { + "key": "{surface.inset.box-shadow}", + "$value": "none", + "$modes": { + "default": "inset 0 0 0 1px #5252524d, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.inset.box-shadow-border}, {elevation.inset.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.inset.box-shadow}" + }, + "name": "token-surface-inset-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "inset", + "box-shadow" + ] + }, + { + "key": "{surface.base.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525233", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.base.box-shadow-border}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.base.box-shadow}" + }, + "name": "token-surface-base-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "base", + "box-shadow" + ] + }, + { + "key": "{surface.low.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525226, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.low.box-shadow-border}, {elevation.low.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.low.box-shadow}" + }, + "name": "token-surface-low-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "low", + "box-shadow" + ] + }, + { + "key": "{surface.mid.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525226, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.mid.box-shadow-border}, {elevation.mid.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.mid.box-shadow}" + }, + "name": "token-surface-mid-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "mid", + "box-shadow" + ] + }, + { + "key": "{surface.high.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525240, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.high.box-shadow-border}, {elevation.high.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.high.box-shadow}" + }, + "name": "token-surface-high-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "high", + "box-shadow" + ] + }, + { + "key": "{surface.higher.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525233, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.higher.box-shadow-border}, {elevation.higher.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.higher.box-shadow}" + }, + "name": "token-surface-higher-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "higher", + "box-shadow" + ] + }, + { + "key": "{surface.overlay.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #39393940, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.overlay.box-shadow-border}, {elevation.overlay.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.overlay.box-shadow}" + }, + "name": "token-surface-overlay-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "overlay", + "box-shadow" + ] + }, + { + "key": "{focus-ring.action.box-shadow}", + "$value": "inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe", + "original": { + "$value": "{focus-ring.action.internal-box-shadow}, {focus-ring.action.external-box-shadow}", + "key": "{focus-ring.action.box-shadow}" + }, + "name": "token-focus-ring-action-box-shadow", + "attributes": { + "category": "focus-ring" + }, + "path": [ + "focus-ring", + "action", + "box-shadow" + ] + }, + { + "key": "{focus-ring.critical.box-shadow}", + "$value": "inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe", + "original": { + "$value": "{focus-ring.critical.internal-box-shadow}, {focus-ring.critical.external-box-shadow}", + "key": "{focus-ring.critical.box-shadow}" + }, + "name": "token-focus-ring-critical-box-shadow", + "attributes": { + "category": "focus-ring" + }, + "path": [ + "focus-ring", + "critical", + "box-shadow" + ] + }, + { + "key": "{app-footer.focus.color.action.internal}", + "$type": "color", + "$value": "#0f62fe", + "$modes": { + "default": "var(--token-color-focus-action-internal)", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.focus}", + "$modes": { + "default": "var(--token-color-focus-action-internal)", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{app-footer.focus.color.action.internal}" + }, + "name": "token-app-footer-focus-color-action-internal", + "attributes": { + "category": "app-footer" + }, + "path": [ + "app-footer", + "focus", + "color", + "action", + "internal" + ] + }, + { + "key": "{app-header.height}", + "$type": "dimension", + "$value": "60px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "60", + "unit": "px", + "key": "{app-header.height}" + }, + "name": "token-app-header-height", + "attributes": { + "category": "app-header" + }, + "path": [ + "app-header", + "height" + ] + }, + { + "key": "{app-header.home-link.size}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{app-header.home-link.size}" + }, + "name": "token-app-header-home-link-size", + "attributes": { + "category": "app-header" + }, + "path": [ + "app-header", + "home-link", + "size" + ] + }, + { + "key": "{app-header.logo.size}", + "$type": "dimension", + "$value": "28px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "28", + "unit": "px", + "key": "{app-header.logo.size}" + }, + "name": "token-app-header-logo-size", + "attributes": { + "category": "app-header" + }, + "path": [ + "app-header", + "logo", + "size" + ] + }, + { + "key": "{app-side-nav.wrapper.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{app-side-nav.wrapper.border.width}" + }, + "name": "token-app-side-nav-wrapper-border-width", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "border", + "width" + ] + }, + { + "key": "{app-side-nav.wrapper.border.color}", + "$type": "color", + "$value": "var(--token-color-palette-neutral-200)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-palette-neutral-200)", + "group": "components", + "key": "{app-side-nav.wrapper.border.color}" + }, + "name": "token-app-side-nav-wrapper-border-color", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "border", + "color" + ] + }, + { + "key": "{app-side-nav.wrapper.padding.horizontal}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.horizontal}" + }, + "name": "token-app-side-nav-wrapper-padding-horizontal", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "horizontal" + ] + }, + { + "key": "{app-side-nav.wrapper.padding.vertical}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.vertical}" + }, + "name": "token-app-side-nav-wrapper-padding-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "vertical" + ] + }, + { + "key": "{app-side-nav.wrapper.padding.horizontal-minimized}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.horizontal-minimized}" + }, + "name": "token-app-side-nav-wrapper-padding-horizontal-minimized", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "horizontal-minimized" + ] + }, + { + "key": "{app-side-nav.wrapper.padding.vertical-minimized}", + "$type": "dimension", + "$value": "22px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "22", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.vertical-minimized}" + }, + "name": "token-app-side-nav-wrapper-padding-vertical-minimized", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "vertical-minimized" + ] + }, + { + "key": "{app-side-nav.toggle-button.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{app-side-nav.toggle-button.border.radius}" + }, + "name": "token-app-side-nav-toggle-button-border-radius", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "toggle-button", + "border", + "radius" + ] + }, + { + "key": "{app-side-nav.header.home-link.padding}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{app-side-nav.header.home-link.padding}" + }, + "name": "token-app-side-nav-header-home-link-padding", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "home-link", + "padding" + ] + }, + { + "key": "{app-side-nav.header.home-link.logo-size}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{app-side-nav.header.home-link.logo-size}" + }, + "name": "token-app-side-nav-header-home-link-logo-size", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "home-link", + "logo-size" + ] + }, + { + "key": "{app-side-nav.header.home-link.logo-size-minimized}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{app-side-nav.header.home-link.logo-size-minimized}" + }, + "name": "token-app-side-nav-header-home-link-logo-size-minimized", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "home-link", + "logo-size-minimized" + ] + }, + { + "key": "{app-side-nav.header.actions.spacing}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.header.actions.spacing}" + }, + "name": "token-app-side-nav-header-actions-spacing", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "actions", + "spacing" + ] + }, + { + "key": "{app-side-nav.body.list.margin-vertical}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{app-side-nav.body.list.margin-vertical}" + }, + "name": "token-app-side-nav-body-list-margin-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list", + "margin-vertical" + ] + }, + { + "key": "{app-side-nav.body.list-item.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{app-side-nav.body.list-item.height}" + }, + "name": "token-app-side-nav-body-list-item-height", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "height" + ] + }, + { + "key": "{app-side-nav.body.list-item.padding.horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.body.list-item.padding.horizontal}" + }, + "name": "token-app-side-nav-body-list-item-padding-horizontal", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "padding", + "horizontal" + ] + }, + { + "key": "{app-side-nav.body.list-item.padding.vertical}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{app-side-nav.body.list-item.padding.vertical}" + }, + "name": "token-app-side-nav-body-list-item-padding-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "padding", + "vertical" + ] + }, + { + "key": "{app-side-nav.body.list-item.spacing-vertical}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{app-side-nav.body.list-item.spacing-vertical}" + }, + "name": "token-app-side-nav-body-list-item-spacing-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "spacing-vertical" + ] + }, + { + "key": "{app-side-nav.body.list-item.content-spacing-horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.body.list-item.content-spacing-horizontal}" + }, + "name": "token-app-side-nav-body-list-item-content-spacing-horizontal", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "content-spacing-horizontal" + ] + }, + { + "key": "{app-side-nav.body.list-item.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{app-side-nav.body.list-item.border-radius}" + }, + "name": "token-app-side-nav-body-list-item-border-radius", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "border-radius" + ] + }, + { + "key": "{app-side-nav.color.foreground.primary}", + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "key": "{app-side-nav.color.foreground.primary}" + }, + "name": "token-app-side-nav-color-foreground-primary", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "foreground", + "primary" + ] + }, + { + "key": "{app-side-nav.color.foreground.strong}", + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "key": "{app-side-nav.color.foreground.strong}" + }, + "name": "token-app-side-nav-color-foreground-strong", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "foreground", + "strong" + ] + }, + { + "key": "{app-side-nav.color.foreground.faint}", + "$type": "color", + "$value": "var(--token-color-foreground-faint)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-foreground-faint)", + "group": "components", + "key": "{app-side-nav.color.foreground.faint}" + }, + "name": "token-app-side-nav-color-foreground-faint", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "foreground", + "faint" + ] + }, + { + "key": "{app-side-nav.color.surface.primary}", + "$type": "color", + "$value": "var(--token-color-surface-faint)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-surface-faint)", + "group": "components", + "key": "{app-side-nav.color.surface.primary}" + }, + "name": "token-app-side-nav-color-surface-primary", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "surface", + "primary" + ] + }, + { + "key": "{app-side-nav.color.surface.interactive-hover}", + "$type": "color", + "$value": "var(--token-color-surface-interactive-hover)", + "group": "semantic", + "original": { + "$type": "color", + "$value": "var(--token-color-surface-interactive-hover)", + "group": "semantic", + "key": "{app-side-nav.color.surface.interactive-hover}" + }, + "name": "token-app-side-nav-color-surface-interactive-hover", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "surface", + "interactive-hover" + ] + }, + { + "key": "{app-side-nav.color.surface.interactive-active}", + "$type": "color", + "$value": "var(--token-color-palette-neutral-300)", + "group": "semantic", + "original": { + "$type": "color", + "$value": "var(--token-color-palette-neutral-300)", + "group": "semantic", + "key": "{app-side-nav.color.surface.interactive-active}" + }, + "name": "token-app-side-nav-color-surface-interactive-active", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "surface", + "interactive-active" + ] + }, + { + "key": "{badge-count.padding.horizontal.small}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge-count.padding.horizontal.small}" + }, + "name": "token-badge-count-padding-horizontal-small", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "small" + ] + }, + { + "key": "{badge-count.padding.horizontal.medium}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge-count.padding.horizontal.medium}" + }, + "name": "token-badge-count-padding-horizontal-medium", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "medium" + ] + }, + { + "key": "{badge-count.padding.horizontal.large}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge-count.padding.horizontal.large}" + }, + "name": "token-badge-count-padding-horizontal-large", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "large" + ] + }, + { + "key": "{badge.height.small}", + "$type": "dimension", + "$value": "18px", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "18", + "cds-g10": "18", + "cds-g90": "18", + "cds-g100": "18" + }, + "original": { + "$type": "dimension", + "$value": "18", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "18", + "cds-g10": "18", + "cds-g90": "18", + "cds-g100": "18" + }, + "key": "{badge.height.small}" + }, + "name": "token-badge-height-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "small" + ] + }, + { + "key": "{badge.height.medium}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{badge.height.medium}" + }, + "name": "token-badge-height-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "medium" + ] + }, + { + "key": "{badge.height.large}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{badge.height.large}" + }, + "name": "token-badge-height-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "large" + ] + }, + { + "key": "{badge.padding.horizontal.small}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge.padding.horizontal.small}" + }, + "name": "token-badge-padding-horizontal-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "small" + ] + }, + { + "key": "{badge.padding.horizontal.medium}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge.padding.horizontal.medium}" + }, + "name": "token-badge-padding-horizontal-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "medium" + ] + }, + { + "key": "{badge.padding.horizontal.large}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.padding.horizontal.large}" + }, + "name": "token-badge-padding-horizontal-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "large" + ] + }, + { + "key": "{badge.padding.vertical.small}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "$modes": { + "default": "2", + "cds-g0": "1", + "cds-g10": "1", + "cds-g90": "1", + "cds-g100": "1" + }, + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "$modes": { + "default": "2", + "cds-g0": "1", + "cds-g10": "1", + "cds-g90": "1", + "cds-g100": "1" + }, + "key": "{badge.padding.vertical.small}" + }, + "name": "token-badge-padding-vertical-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "small" + ] + }, + { + "key": "{badge.padding.vertical.medium}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{badge.padding.vertical.medium}" + }, + "name": "token-badge-padding-vertical-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "medium" + ] + }, + { + "key": "{badge.padding.vertical.large}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{badge.padding.vertical.large}" + }, + "name": "token-badge-padding-vertical-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "large" + ] + }, + { + "key": "{badge.gap.small}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.small}" + }, + "name": "token-badge-gap-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "small" + ] + }, + { + "key": "{badge.gap.medium}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.medium}" + }, + "name": "token-badge-gap-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "medium" + ] + }, + { + "key": "{badge.gap.large}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.large}" + }, + "name": "token-badge-gap-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "large" + ] + }, + { + "key": "{badge.typography.font-size.small}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "12", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.small}" + }, + "name": "token-badge-typography-font-size-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "small" + ] + }, + { + "key": "{badge.typography.font-size.medium}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "12", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.medium}" + }, + "name": "token-badge-typography-font-size-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "medium" + ] + }, + { + "key": "{badge.typography.font-size.large}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "12", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.large}" + }, + "name": "token-badge-typography-font-size-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "large" + ] + }, + { + "key": "{badge.typography.line-height.small}", + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "original": { + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "key": "{badge.typography.line-height.small}" + }, + "name": "token-badge-typography-line-height-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "small" + ] + }, + { + "key": "{badge.typography.line-height.medium}", + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "original": { + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "key": "{badge.typography.line-height.medium}" + }, + "name": "token-badge-typography-line-height-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "medium" + ] + }, + { + "key": "{badge.typography.line-height.large}", + "$type": "number", + "$value": 1, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1, + "cds-g10": 1, + "cds-g90": 1, + "cds-g100": 1 + }, + "original": { + "$type": "number", + "$value": 1, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1, + "cds-g10": 1, + "cds-g90": 1, + "cds-g100": 1 + }, + "key": "{badge.typography.line-height.large}" + }, + "name": "token-badge-typography-line-height-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "large" + ] + }, + { + "key": "{badge.foreground.color.neutral.filled}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g10}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral.filled}" + }, + "name": "token-badge-foreground-color-neutral-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "filled" + ] + }, + { + "key": "{badge.foreground.color.neutral.inverted}", + "$type": "color", + "$value": "#e0e0e0", + "$modes": { + "default": "#ffffff", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.20}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.color.gray.20}", + "cds-g10": "{carbon.color.gray.20}", + "cds-g90": "{carbon.color.gray.100}", + "cds-g100": "{carbon.color.gray.100}" + }, + "key": "{badge.foreground.color.neutral.inverted}" + }, + "name": "token-badge-foreground-color-neutral-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.neutral.outlined}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g10}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral.outlined}" + }, + "name": "token-badge-foreground-color-neutral-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "outlined" + ] + }, + { + "key": "{badge.foreground.color.neutral-dark-mode.filled}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.neutral-dark-mode.filled}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "filled" + ] + }, + { + "key": "{badge.foreground.color.neutral-dark-mode.inverted}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g10}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral-dark-mode.inverted}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.neutral-dark-mode.outlined}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "comments": { + "cds": "In Figma the `cds` value uses a token `Tag/HighContrast/TagColor` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "comments": { + "cds": "In Figma the `cds` value uses a token `Tag/HighContrast/TagColor` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.neutral-dark-mode.outlined}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "outlined" + ] + }, + { + "key": "{badge.foreground.color.highlight.filled}", + "$type": "color", + "$value": "#6929c4", + "comment": "we don't use `highlight-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#6929c4", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorPurple.g10}", + "comment": "we don't use `highlight-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.purple-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorPurple.g100}" + }, + "key": "{badge.foreground.color.highlight.filled}" + }, + "name": "token-badge-foreground-color-highlight-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "filled" + ] + }, + { + "key": "{badge.foreground.color.highlight.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.highlight.inverted}" + }, + "name": "token-badge-foreground-color-highlight-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.highlight.outlined}", + "$type": "color", + "$value": "#6929c4", + "$modes": { + "default": "#8a3ffc", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorPurple.g10}", + "$modes": { + "default": "{color.foreground.highlight}", + "cds-g0": "{carbon.themes.tagTokens.tagColorPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorPurple.g100}" + }, + "key": "{badge.foreground.color.highlight.outlined}" + }, + "name": "token-badge-foreground-color-highlight-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "outlined" + ] + }, + { + "key": "{badge.foreground.color.success.filled}", + "$type": "color", + "$value": "#0e6027", + "comment": "we don't use `success-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#0e6027", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "comment": "we don't use `success-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.green-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.foreground.color.success.filled}" + }, + "name": "token-badge-foreground-color-success-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "filled" + ] + }, + { + "key": "{badge.foreground.color.success.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.success.inverted}" + }, + "name": "token-badge-foreground-color-success-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.success.outlined}", + "$type": "color", + "$value": "#0e6027", + "$modes": { + "default": "#198038", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "$modes": { + "default": "{color.foreground.success}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.foreground.color.success.outlined}" + }, + "name": "token-badge-foreground-color-success-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "outlined" + ] + }, + { + "key": "{badge.foreground.color.warning.filled}", + "$type": "color", + "$value": "#8a3800", + "$modes": { + "default": "#5e2900", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "hds": "we don't use `warning-on-surface` for accessibility (better contrast)", + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.70}", + "$modes": { + "default": "{color.palette.amber-400}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "hds": "we don't use `warning-on-surface` for accessibility (better contrast)", + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.warning.filled}" + }, + "name": "token-badge-foreground-color-warning-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "filled" + ] + }, + { + "key": "{badge.foreground.color.warning.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.warning.inverted}" + }, + "name": "token-badge-foreground-color-warning-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.warning.outlined}", + "$type": "color", + "$value": "#8a3800", + "$modes": { + "default": "#8e6a00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.70}", + "$modes": { + "default": "{color.foreground.warning}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.warning.outlined}" + }, + "name": "token-badge-foreground-color-warning-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "outlined" + ] + }, + { + "key": "{badge.foreground.color.critical.filled}", + "$type": "color", + "$value": "#a2191f", + "comment": "we don't use `critical-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#750e13", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorRed.g10}", + "comment": "we don't use `critical-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.foreground.color.critical.filled}" + }, + "name": "token-badge-foreground-color-critical-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "filled" + ] + }, + { + "key": "{badge.foreground.color.critical.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.critical.inverted}" + }, + "name": "token-badge-foreground-color-critical-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.critical.outlined}", + "$type": "color", + "$value": "#a2191f", + "$modes": { + "default": "#da1e28", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorRed.g10}", + "$modes": { + "default": "{color.foreground.critical}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.foreground.color.critical.outlined}" + }, + "name": "token-badge-foreground-color-critical-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "outlined" + ] + }, + { + "key": "{badge.surface.color.neutral.filled}", + "$type": "color", + "$value": "#e0e0e0", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "$modes": { + "default": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{badge.surface.color.neutral.filled}" + }, + "name": "token-badge-surface-color-neutral-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "filled" + ] + }, + { + "key": "{badge.surface.color.neutral.inverted}", + "$type": "color", + "$value": "#393939", + "$modes": { + "default": "#525252", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead", + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.backgroundInverse}", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead", + "key": "{badge.surface.color.neutral.inverted}" + }, + "name": "token-badge-surface-color-neutral-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "inverted" + ] + }, + { + "key": "{badge.surface.color.neutral.outlined}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{badge.surface.color.neutral.outlined}" + }, + "name": "token-badge-surface-color-neutral-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "outlined" + ] + }, + { + "key": "{badge.surface.color.neutral-dark-mode.filled}", + "$type": "color", + "$value": "#393939", + "$modes": { + "default": "#525252", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component", + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.backgroundInverse}", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component", + "key": "{badge.surface.color.neutral-dark-mode.filled}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "filled" + ] + }, + { + "key": "{badge.surface.color.neutral-dark-mode.inverted}", + "$type": "color", + "$value": "#e0e0e0", + "$modes": { + "default": "#ffffff", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{badge.surface.color.neutral-dark-mode.inverted}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "inverted" + ] + }, + { + "key": "{badge.surface.color.neutral-dark-mode.outlined}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{badge.surface.color.neutral-dark-mode.outlined}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "outlined" + ] + }, + { + "key": "{badge.surface.color.highlight.filled}", + "$type": "color", + "$value": "#e8daff", + "comment": "we don't use `surface-highlight` for accessibility (better contrast)", + "$modes": { + "default": "#e8daff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundPurple.g10}", + "comment": "we don't use `surface-highlight` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.purple-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundPurple.g100}" + }, + "key": "{badge.surface.color.highlight.filled}" + }, + "name": "token-badge-surface-color-highlight-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "highlight", + "filled" + ] + }, + { + "key": "{badge.surface.color.highlight.inverted}", + "$type": "color", + "$value": "#6929c4", + "$modes": { + "default": "#a56eff", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.70}", + "$modes": { + "default": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, + "key": "{badge.surface.color.highlight.inverted}" + }, + "name": "token-badge-surface-color-highlight-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "highlight", + "inverted" + ] + }, + { + "key": "{badge.surface.color.success.filled}", + "$type": "color", + "$value": "#a7f0ba", + "comment": "we don't use `surface-success` for accessibility (better contrast)", + "$modes": { + "default": "#a7f0ba", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGreen.g10}", + "comment": "we don't use `surface-success` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.green-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGreen.g100}" + }, + "key": "{badge.surface.color.success.filled}" + }, + "name": "token-badge-surface-color-success-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "success", + "filled" + ] + }, + { + "key": "{badge.surface.color.success.inverted}", + "$type": "color", + "$value": "#0e6027", + "$modes": { + "default": "#24a148", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "$modes": { + "default": "{color.palette.green-200}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.surface.color.success.inverted}" + }, + "name": "token-badge-surface-color-success-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "success", + "inverted" + ] + }, + { + "key": "{badge.surface.color.warning.filled}", + "$type": "color", + "$value": "#ffd9be", + "comment": "we don't use `surface-warning` for accessibility (better contrast)", + "$modes": { + "default": "#ffd9be", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.20}", + "comment": "we don't use `surface-warning` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.surface.color.warning.filled}" + }, + "name": "token-badge-surface-color-warning-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "warning", + "filled" + ] + }, + { + "key": "{badge.surface.color.warning.inverted}", + "$type": "color", + "$value": "#8a3800", + "$modes": { + "default": "#ba4e00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.70}", + "$modes": { + "default": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.surface.color.warning.inverted}" + }, + "name": "token-badge-surface-color-warning-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "warning", + "inverted" + ] + }, + { + "key": "{badge.surface.color.critical.filled}", + "$type": "color", + "$value": "#ffd7d9", + "comment": "we don't use `surface-critical` for accessibility (better contrast)", + "$modes": { + "default": "#ffd7d9", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundRed.g10}", + "comment": "we don't use `surface-critical` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.red-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundRed.g100}" + }, + "key": "{badge.surface.color.critical.filled}" + }, + "name": "token-badge-surface-color-critical-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "critical", + "filled" + ] + }, + { + "key": "{badge.surface.color.critical.inverted}", + "$type": "color", + "$value": "#a2191f", + "$modes": { + "default": "#da1e28", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorRed.g10}", + "$modes": { + "default": "{color.palette.red-200}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.surface.color.critical.inverted}" + }, + "name": "token-badge-surface-color-critical-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "critical", + "inverted" + ] + }, + { + "key": "{badge.border.radius}", + "$type": "dimension", + "$value": "1000000000px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "1000000000px", + "cds-g10": "1000000000px", + "cds-g90": "1000000000px", + "cds-g100": "1000000000px" + }, + "original": { + "$type": "dimension", + "$value": "{border.radius.rounded}", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "{border.radius.rounded}", + "cds-g10": "{border.radius.rounded}", + "cds-g90": "{border.radius.rounded}", + "cds-g100": "{border.radius.rounded}" + }, + "key": "{badge.border.radius}" + }, + "name": "token-badge-border-radius", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "border", + "radius" + ] + }, + { + "key": "{badge.icon.size.small}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{badge.icon.size.small}" + }, + "name": "token-badge-icon-size-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "small" + ] + }, + { + "key": "{badge.icon.size.medium}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{badge.icon.size.medium}" + }, + "name": "token-badge-icon-size-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "medium" + ] + }, + { + "key": "{badge.icon.size.large}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{badge.icon.size.large}" + }, + "name": "token-badge-icon-size-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "large" + ] + }, + { + "key": "{button.height.small}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "$modes": { + "default": "28", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "$modes": { + "default": "28", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "key": "{button.height.small}" + }, + "name": "token-button-height-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "small" + ] + }, + { + "key": "{button.height.medium}", + "$type": "dimension", + "$value": "40px", + "unit": "px", + "$modes": { + "default": "36", + "cds-g0": "40", + "cds-g10": "40", + "cds-g90": "40", + "cds-g100": "40" + }, + "original": { + "$type": "dimension", + "$value": "40", + "unit": "px", + "$modes": { + "default": "36", + "cds-g0": "40", + "cds-g10": "40", + "cds-g90": "40", + "cds-g100": "40" + }, + "key": "{button.height.medium}" + }, + "name": "token-button-height-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "medium" + ] + }, + { + "key": "{button.height.large}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "$modes": { + "default": "48", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "$modes": { + "default": "48", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "key": "{button.height.large}" + }, + "name": "token-button-height-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "large" + ] + }, + { + "key": "{button.padding.horizontal.small}", + "$type": "dimension", + "$value": "15px", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "15", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.small}" + }, + "name": "token-button-padding-horizontal-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "small" + ] + }, + { + "key": "{button.padding.horizontal.medium}", + "$type": "dimension", + "$value": "15px", + "unit": "px", + "$modes": { + "default": "15", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "15", + "unit": "px", + "$modes": { + "default": "15", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.medium}" + }, + "name": "token-button-padding-horizontal-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "medium" + ] + }, + { + "key": "{button.padding.horizontal.large}", + "$type": "dimension", + "$value": "15px", + "unit": "px", + "$modes": { + "default": "19", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "15", + "unit": "px", + "$modes": { + "default": "19", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.large}" + }, + "name": "token-button-padding-horizontal-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "large" + ] + }, + { + "key": "{button.padding.vertical.small}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.small}" + }, + "name": "token-button-padding-vertical-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "small" + ] + }, + { + "key": "{button.padding.vertical.medium}", + "$type": "dimension", + "$value": "10px", + "unit": "px", + "$modes": { + "default": "9", + "cds-g0": "10", + "cds-g10": "10", + "cds-g90": "10", + "cds-g100": "10" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "10", + "unit": "px", + "$modes": { + "default": "9", + "cds-g0": "10", + "cds-g10": "10", + "cds-g90": "10", + "cds-g100": "10" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.medium}" + }, + "name": "token-button-padding-vertical-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "medium" + ] + }, + { + "key": "{button.padding.vertical.large}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "14", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.large}" + }, + "name": "token-button-padding-vertical-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "large" + ] + }, + { + "key": "{button.gap}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "key": "{button.gap}" + }, + "name": "token-button-gap", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "gap" + ] + }, + { + "key": "{button.typography.font-size.small}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.small}" + }, + "name": "token-button-typography-font-size-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "small" + ] + }, + { + "key": "{button.typography.font-size.medium}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.medium}" + }, + "name": "token-button-typography-font-size-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "medium" + ] + }, + { + "key": "{button.typography.font-size.large}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.large}" + }, + "name": "token-button-typography-font-size-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "large" + ] + }, + { + "key": "{button.typography.line-height.small}", + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)", + "$modes": { + "default": 0.9286, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)", + "$modes": { + "default": 0.9286, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.small}" + }, + "name": "token-button-typography-line-height-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "small" + ] + }, + { + "key": "{button.typography.line-height.medium}", + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 1.1429", + "$modes": { + "default": 1.1429, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 1.1429", + "$modes": { + "default": 1.1429, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.medium}" + }, + "name": "token-button-typography-line-height-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "medium" + ] + }, + { + "key": "{button.typography.line-height.large}", + "$type": "number", + "$value": 1.2858, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 1.2858, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.large}" + }, + "name": "token-button-typography-line-height-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "large" + ] + }, + { + "key": "{button.foreground.color.primary.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.default}" + }, + "name": "token-button-foreground-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "default" + ] + }, + { + "key": "{button.foreground.color.primary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.hover}" + }, + "name": "token-button-foreground-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "hover" + ] + }, + { + "key": "{button.foreground.color.primary.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.focus}" + }, + "name": "token-button-foreground-color-primary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "focus" + ] + }, + { + "key": "{button.foreground.color.primary.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.active}" + }, + "name": "token-button-foreground-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "active" + ] + }, + { + "key": "{button.foreground.color.secondary.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.default}" + }, + "name": "token-button-foreground-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "default" + ] + }, + { + "key": "{button.foreground.color.secondary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.hover}" + }, + "name": "token-button-foreground-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "hover" + ] + }, + { + "key": "{button.foreground.color.secondary.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.focus}" + }, + "name": "token-button-foreground-color-secondary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "focus" + ] + }, + { + "key": "{button.foreground.color.secondary.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.active}" + }, + "name": "token-button-foreground-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "active" + ] + }, + { + "key": "{button.foreground.color.tertiary.default}", + "$type": "color", + "$value": "#0f62fe", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiary.g10}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiary.g100}" + }, + "key": "{button.foreground.color.tertiary.default}" + }, + "name": "token-button-foreground-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "default" + ] + }, + { + "key": "{button.foreground.color.tertiary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#0043ce", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textInverse}", + "$modes": { + "default": "{color.foreground.action-hover}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.hover}" + }, + "name": "token-button-foreground-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "hover" + ] + }, + { + "key": "{button.foreground.color.tertiary.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textInverse}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.focus}" + }, + "name": "token-button-foreground-color-tertiary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "focus" + ] + }, + { + "key": "{button.foreground.color.tertiary.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#0043ce", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textInverse}", + "$modes": { + "default": "{color.foreground.action-active}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.active}" + }, + "name": "token-button-foreground-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "active" + ] + }, + { + "key": "{button.foreground.color.critical.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#a2191f", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textOnColor}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.default}" + }, + "name": "token-button-foreground-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "default" + ] + }, + { + "key": "{button.foreground.color.critical.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.hover}" + }, + "name": "token-button-foreground-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "hover" + ] + }, + { + "key": "{button.foreground.color.critical.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#a2191f", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textOnColor}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.focus}" + }, + "name": "token-button-foreground-color-critical-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "focus" + ] + }, + { + "key": "{button.foreground.color.critical.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.active}" + }, + "name": "token-button-foreground-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "active" + ] + }, + { + "key": "{button.foreground.color.disabled}", + "$type": "color", + "$value": "#8d8d8d", + "$modes": { + "default": "rgba(22, 22, 22, 0.25)", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "rgba(255, 255, 255, 0.25)", + "cds-g100": "rgba(255, 255, 255, 0.25)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textOnColorDisabled}", + "$modes": { + "default": "{color.foreground.disabled}", + "cds-g0": "{carbon.themes.white.textOnColorDisabled}", + "cds-g10": "{carbon.themes.g10.textOnColorDisabled}", + "cds-g90": "{carbon.themes.g90.textOnColorDisabled}", + "cds-g100": "{carbon.themes.g100.textOnColorDisabled}" + }, + "key": "{button.foreground.color.disabled}" + }, + "name": "token-button-foreground-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "disabled" + ] + }, + { + "key": "{button.surface.color.primary.default}", + "$type": "color", + "$value": "#0f62fe", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimary.g10}", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimary.g100}" + }, + "key": "{button.surface.color.primary.default}" + }, + "name": "token-button-surface-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "default" + ] + }, + { + "key": "{button.surface.color.primary.hover}", + "$type": "color", + "$value": "#0050e6", + "$modes": { + "default": "#0043ce", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#0050e6", + "cds-g100": "#0050e6" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimaryHover.g10}", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimaryHover.g100}" + }, + "key": "{button.surface.color.primary.hover}" + }, + "name": "token-button-surface-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "hover" + ] + }, + { + "key": "{button.surface.color.primary.focus}", + "$type": "color", + "$value": "#0f62fe", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimary.g10}", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimary.g100}" + }, + "key": "{button.surface.color.primary.focus}" + }, + "name": "token-button-surface-color-primary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "focus" + ] + }, + { + "key": "{button.surface.color.primary.active}", + "$type": "color", + "$value": "#002d9c", + "$modes": { + "default": "#002d9c", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#002d9c", + "cds-g100": "#002d9c" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimaryActive.g10}", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimaryActive.g100}" + }, + "key": "{button.surface.color.primary.active}" + }, + "name": "token-button-surface-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "active" + ] + }, + { + "key": "{button.surface.color.secondary.default}", + "$type": "color", + "$value": "#393939", + "$modes": { + "default": "#ffffff", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#6f6f6f", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondary.g10}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondary.g100}" + }, + "key": "{button.surface.color.secondary.default}" + }, + "name": "token-button-surface-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "default" + ] + }, + { + "key": "{button.surface.color.secondary.hover}", + "$type": "color", + "$value": "#474747", + "$modes": { + "default": "#ffffff", + "cds-g0": "#474747", + "cds-g10": "#474747", + "cds-g90": "#5e5e5e", + "cds-g100": "#5e5e5e" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondaryHover.g10}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondaryHover.g100}" + }, + "key": "{button.surface.color.secondary.hover}" + }, + "name": "token-button-surface-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "hover" + ] + }, + { + "key": "{button.surface.color.secondary.focus}", + "$type": "color", + "$value": "#393939", + "$modes": { + "default": "#ffffff", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#6f6f6f", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondary.g10}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondary.g100}" + }, + "key": "{button.surface.color.secondary.focus}" + }, + "name": "token-button-surface-color-secondary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "focus" + ] + }, + { + "key": "{button.surface.color.secondary.active}", + "$type": "color", + "$value": "#6f6f6f", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#6f6f6f", + "cds-g10": "#6f6f6f", + "cds-g90": "#393939", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondaryActive.g10}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondaryActive.g100}" + }, + "key": "{button.surface.color.secondary.active}" + }, + "name": "token-button-surface-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "active" + ] + }, + { + "key": "{button.surface.color.tertiary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{button.surface.color.tertiary.default}" + }, + "name": "token-button-surface-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "default" + ] + }, + { + "key": "{button.surface.color.tertiary.hover}", + "$type": "color", + "$value": "#0050e6", + "$modes": { + "default": "#ffffff", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiaryHover.g10}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryHover.g100}" + }, + "key": "{button.surface.color.tertiary.hover}" + }, + "name": "token-button-surface-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "hover" + ] + }, + { + "key": "{button.surface.color.tertiary.focus}", + "$type": "color", + "$value": "#0050e6", + "$modes": { + "default": "transparent", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiaryHover.g10}", + "$modes": { + "default": "transparent", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryHover.g100}" + }, + "key": "{button.surface.color.tertiary.focus}" + }, + "name": "token-button-surface-color-tertiary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "focus" + ] + }, + { + "key": "{button.surface.color.tertiary.active}", + "$type": "color", + "$value": "#002d9c", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiaryActive.g10}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryActive.g100}" + }, + "key": "{button.surface.color.tertiary.active}" + }, + "name": "token-button-surface-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "active" + ] + }, + { + "key": "{button.surface.color.critical.default}", + "$type": "color", + "$value": "#da1e28", + "$modes": { + "default": "#ffd7d9", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerPrimary.g10}", + "$modes": { + "default": "{color.surface.critical}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerPrimary.g100}" + }, + "key": "{button.surface.color.critical.default}" + }, + "name": "token-button-surface-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "default" + ] + }, + { + "key": "{button.surface.color.critical.hover}", + "$type": "color", + "$value": "#b81921", + "$modes": { + "default": "#a2191f", + "cds-g0": "#b81921", + "cds-g10": "#b81921", + "cds-g90": "#b81921", + "cds-g100": "#b81921" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerHover.g10}", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerHover.g100}" + }, + "key": "{button.surface.color.critical.hover}" + }, + "name": "token-button-surface-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "hover" + ] + }, + { + "key": "{button.surface.color.critical.focus}", + "$type": "color", + "$value": "#da1e28", + "$modes": { + "default": "#ffd7d9", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerPrimary.g10}", + "$modes": { + "default": "{color.surface.critical}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerPrimary.g100}" + }, + "key": "{button.surface.color.critical.focus}" + }, + "name": "token-button-surface-color-critical-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "focus" + ] + }, + { + "key": "{button.surface.color.critical.active}", + "$type": "color", + "$value": "#750e13", + "$modes": { + "default": "#750e13", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#750e13", + "cds-g100": "#750e13" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerActive.g10}", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerActive.g100}" + }, + "key": "{button.surface.color.critical.active}" + }, + "name": "token-button-surface-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "active" + ] + }, + { + "key": "{button.surface.color.disabled}", + "$type": "color", + "$value": "#c6c6c6", + "$modes": { + "default": "#ffffff", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDisabled.g10}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDisabled.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDisabled.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDisabled.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDisabled.g100}" + }, + "key": "{button.surface.color.disabled}" + }, + "name": "token-button-surface-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "disabled" + ] + }, + { + "key": "{button.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{button.border.width}" + }, + "name": "token-button-border-width", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "width" + ] + }, + { + "key": "{button.border.radius}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{button.border.radius}" + }, + "name": "token-button-border-radius", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "radius" + ] + }, + { + "key": "{button.border.color.primary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#0043ce", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.default}" + }, + "name": "token-button-border-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "default" + ] + }, + { + "key": "{button.border.color.primary.hover}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#0043ce", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.hover}" + }, + "name": "token-button-border-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "hover" + ] + }, + { + "key": "{button.border.color.primary.focus.internal}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#ffffff", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.primary.focus.internal}" + }, + "name": "token-button-border-color-primary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "focus", + "internal" + ] + }, + { + "key": "{button.border.color.primary.focus.external}", + "$type": "color", + "$value": "#ff00ff", + "$modes": { + "default": "#0f62fe", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "magenta", + "$modes": { + "default": "{color.focus.action.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.primary.focus.external}" + }, + "name": "token-button-border-color-primary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "focus", + "external" + ] + }, + { + "key": "{button.border.color.primary.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#002d9c", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.active}" + }, + "name": "token-button-border-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "active" + ] + }, + { + "key": "{button.border.color.secondary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.default}" + }, + "name": "token-button-border-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "default" + ] + }, + { + "key": "{button.border.color.secondary.hover}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.hover}" + }, + "name": "token-button-border-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "hover" + ] + }, + { + "key": "{button.border.color.secondary.focus.internal}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#ffffff", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.secondary.focus.internal}" + }, + "name": "token-button-border-color-secondary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "focus", + "internal" + ] + }, + { + "key": "{button.border.color.secondary.focus.external}", + "$type": "color", + "$value": "#ff00ff", + "$modes": { + "default": "#0f62fe", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "magenta", + "$modes": { + "default": "{color.focus.action.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.secondary.focus.external}" + }, + "name": "token-button-border-color-secondary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "focus", + "external" + ] + }, + { + "key": "{button.border.color.secondary.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.active}" + }, + "name": "token-button-border-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "active" + ] + }, + { + "key": "{button.border.color.tertiary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{button.border.color.tertiary.default}" + }, + "name": "token-button-border-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "default" + ] + }, + { + "key": "{button.border.color.tertiary.hover}", + "$type": "color", + "$value": "#8d8d8d", + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "key": "{button.border.color.tertiary.hover}" + }, + "name": "token-button-border-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "hover" + ] + }, + { + "key": "{button.border.color.tertiary.focus.internal}", + "$type": "color", + "$value": "#ffffff", + "original": { + "$type": "color", + "$value": "{color.focus.action.internal}", + "key": "{button.border.color.tertiary.focus.internal}" + }, + "name": "token-button-border-color-tertiary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "focus", + "internal" + ] + }, + { + "key": "{button.border.color.tertiary.focus.external}", + "$type": "color", + "$value": "#0f62fe", + "original": { + "$type": "color", + "$value": "{color.focus.action.external}", + "key": "{button.border.color.tertiary.focus.external}" + }, + "name": "token-button-border-color-tertiary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "focus", + "external" + ] + }, + { + "key": "{button.border.color.tertiary.active}", + "$type": "color", + "$value": "#8d8d8d", + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "key": "{button.border.color.tertiary.active}" + }, + "name": "token-button-border-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "active" + ] + }, + { + "key": "{button.border.color.critical.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#a2191f", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.default}" + }, + "name": "token-button-border-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "default" + ] + }, + { + "key": "{button.border.color.critical.hover}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#750e13", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.hover}" + }, + "name": "token-button-border-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "hover" + ] + }, + { + "key": "{button.border.color.critical.focus.internal}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#ffffff", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.critical.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.critical.focus.internal}" + }, + "name": "token-button-border-color-critical-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "focus", + "internal" + ] + }, + { + "key": "{button.border.color.critical.focus.external}", + "$type": "color", + "$value": "#ff00ff", + "$modes": { + "default": "#0f62fe", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "magenta", + "$modes": { + "default": "{color.focus.critical.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.critical.focus.external}" + }, + "name": "token-button-border-color-critical-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "focus", + "external" + ] + }, + { + "key": "{button.border.color.critical.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#750e13", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.active}" + }, + "name": "token-button-border-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "active" + ] + }, + { + "key": "{button.border.color.disabled}", + "$type": "color", + "$value": "#e0e0e0", + "original": { + "$type": "color", + "$value": "{color.border.primary}", + "key": "{button.border.color.disabled}" + }, + "name": "token-button-border-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "disabled" + ] + }, + { + "key": "{button.focus.border.width}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{button.focus.border.width}" + }, + "name": "token-button-focus-border-width", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "focus", + "border", + "width" + ] + }, + { + "key": "{button.icon.size.small}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.small}" + }, + "name": "token-button-icon-size-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "small" + ] + }, + { + "key": "{button.icon.size.medium}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.medium}" + }, + "name": "token-button-icon-size-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "medium" + ] + }, + { + "key": "{button.icon.size.large}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.large}" + }, + "name": "token-button-icon-size-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "large" + ] + }, + { + "key": "{dismiss-button.size}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "key": "{dismiss-button.size}" + }, + "name": "token-dismiss-button-size", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "size" + ] + }, + { + "key": "{dismiss-button.foreground.color.default}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#525252", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.iconPrimary}", + "$modes": { + "default": "{color.foreground.faint}", + "cds-g0": "{carbon.themes.white.iconPrimary}", + "cds-g10": "{carbon.themes.g10.iconPrimary}", + "cds-g90": "{carbon.themes.g90.iconPrimary}", + "cds-g100": "{carbon.themes.g100.iconPrimary}" + }, + "key": "{dismiss-button.foreground.color.default}" + }, + "name": "token-dismiss-button-foreground-color-default", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "foreground", + "color", + "default" + ] + }, + { + "key": "{dismiss-button.foreground.color.active}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.iconPrimary}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.white.iconPrimary}", + "cds-g10": "{carbon.themes.g10.iconPrimary}", + "cds-g90": "{carbon.themes.g90.iconPrimary}", + "cds-g100": "{carbon.themes.g100.iconPrimary}" + }, + "key": "{dismiss-button.foreground.color.active}" + }, + "name": "token-dismiss-button-foreground-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "foreground", + "color", + "active" + ] + }, + { + "key": "{dismiss-button.surface.color.hover}", + "$type": "color", + "$value": "rgba(141, 141, 141, 0.12)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "rgba(141, 141, 141, 0.12)", + "cds-g10": "rgba(141, 141, 141, 0.12)", + "cds-g90": "rgba(141, 141, 141, 0.16)", + "cds-g100": "rgba(141, 141, 141, 0.16)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.backgroundHover}", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "{carbon.themes.white.backgroundHover}", + "cds-g10": "{carbon.themes.g10.backgroundHover}", + "cds-g90": "{carbon.themes.g90.backgroundHover}", + "cds-g100": "{carbon.themes.g100.backgroundHover}" + }, + "key": "{dismiss-button.surface.color.hover}" + }, + "name": "token-dismiss-button-surface-color-hover", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "surface", + "color", + "hover" + ] + }, + { + "key": "{dismiss-button.surface.color.active}", + "$type": "color", + "$value": "rgba(141, 141, 141, 0.5)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "rgba(141, 141, 141, 0.5)", + "cds-g10": "rgba(141, 141, 141, 0.5)", + "cds-g90": "rgba(141, 141, 141, 0.4)", + "cds-g100": "rgba(141, 141, 141, 0.4)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.backgroundActive}", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "{carbon.themes.white.backgroundActive}", + "cds-g10": "{carbon.themes.g10.backgroundActive}", + "cds-g90": "{carbon.themes.g90.backgroundActive}", + "cds-g100": "{carbon.themes.g100.backgroundActive}" + }, + "key": "{dismiss-button.surface.color.active}" + }, + "name": "token-dismiss-button-surface-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "surface", + "color", + "active" + ] + }, + { + "key": "{dismiss-button.border.color.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{dismiss-button.border.color.active}" + }, + "name": "token-dismiss-button-border-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "border", + "color", + "active" + ] + }, + { + "key": "{dismiss-button.icon.size}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "20", + "cds-g10": "20", + "cds-g90": "20", + "cds-g100": "20" + }, + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "20", + "cds-g10": "20", + "cds-g90": "20", + "cds-g100": "20" + }, + "key": "{dismiss-button.icon.size}" + }, + "name": "token-dismiss-button-icon-size", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "icon", + "size" + ] + }, + { + "key": "{form.label.color}", + "$type": "color", + "$value": "#161616", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.strong}", + "group": "components", + "key": "{form.label.color}" + }, + "name": "token-form-label-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "label", + "color" + ] + }, + { + "key": "{form.legend.color}", + "$type": "color", + "$value": "#161616", + "group": "components", + "original": { + "$type": "color", + "$value": "{form.label.color}", + "group": "components", + "key": "{form.legend.color}" + }, + "name": "token-form-legend-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "legend", + "color" + ] + }, + { + "key": "{form.helper-text.color}", + "$type": "color", + "$value": "#525252", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.helper-text.color}" + }, + "name": "token-form-helper-text-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "helper-text", + "color" + ] + }, + { + "key": "{form.indicator.optional.color}", + "$type": "color", + "$value": "#525252", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.indicator.optional.color}" + }, + "name": "token-form-indicator-optional-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "indicator", + "optional", + "color" + ] + }, + { + "key": "{form.error.color}", + "$type": "color", + "$value": "#a2191f", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "components", + "key": "{form.error.color}" + }, + "name": "token-form-error-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "error", + "color" + ] + }, + { + "key": "{form.error.icon-size}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "14", + "unit": "px", + "key": "{form.error.icon-size}" + }, + "name": "token-form-error-icon-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "error", + "icon-size" + ] + }, + { + "key": "{form.checkbox.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.checkbox.size}" + }, + "name": "token-form-checkbox-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "size" + ] + }, + { + "key": "{form.checkbox.border.radius}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{form.checkbox.border.radius}" + }, + "name": "token-form-checkbox-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "border", + "radius" + ] + }, + { + "key": "{form.checkbox.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.checkbox.border.width}" + }, + "name": "token-form-checkbox-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "border", + "width" + ] + }, + { + "key": "{form.checkbox.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.checkbox.background-image.size}" + }, + "name": "token-form-checkbox-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "size" + ] + }, + { + "key": "{form.checkbox.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url}" + }, + "name": "token-form-checkbox-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url" + ] + }, + { + "key": "{form.checkbox.background-image.data-url-indeterminate}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url-indeterminate}" + }, + "name": "token-form-checkbox-background-image-data-url-indeterminate", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url-indeterminate" + ] + }, + { + "key": "{form.checkbox.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url-disabled}" + }, + "name": "token-form-checkbox-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url-disabled" + ] + }, + { + "key": "{form.checkbox.background-image.data-url-indeterminate-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url-indeterminate-disabled}" + }, + "name": "token-form-checkbox-background-image-data-url-indeterminate-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url-indeterminate-disabled" + ] + }, + { + "key": "{form.control.base.foreground.value-color}", + "$type": "color", + "$value": "#161616", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.strong}", + "group": "components", + "key": "{form.control.base.foreground.value-color}" + }, + "name": "token-form-control-base-foreground-value-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "foreground", + "value-color" + ] + }, + { + "key": "{form.control.base.foreground.placeholder-color}", + "$type": "color", + "$value": "#525252", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.control.base.foreground.placeholder-color}" + }, + "name": "token-form-control-base-foreground-placeholder-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "foreground", + "placeholder-color" + ] + }, + { + "key": "{form.control.base.surface-color.default}", + "$type": "color", + "$value": "#ffffff", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.interactive}", + "group": "components", + "key": "{form.control.base.surface-color.default}" + }, + "name": "token-form-control-base-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "surface-color", + "default" + ] + }, + { + "key": "{form.control.base.surface-color.hover}", + "$type": "color", + "$value": "#e8e8e8", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.interactive-hover}", + "group": "components", + "key": "{form.control.base.surface-color.hover}" + }, + "name": "token-form-control-base-surface-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "surface-color", + "hover" + ] + }, + { + "key": "{form.control.base.border-color.default}", + "$type": "color", + "$value": "#8d8d8d", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-400}", + "group": "components", + "key": "{form.control.base.border-color.default}" + }, + "name": "token-form-control-base-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "border-color", + "default" + ] + }, + { + "key": "{form.control.base.border-color.hover}", + "$type": "color", + "$value": "#525252", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "group": "components", + "key": "{form.control.base.border-color.hover}" + }, + "name": "token-form-control-base-border-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "border-color", + "hover" + ] + }, + { + "key": "{form.control.checked.foreground-color}", + "$type": "color", + "$value": "#ffffff", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "group": "components", + "key": "{form.control.checked.foreground-color}" + }, + "name": "token-form-control-checked-foreground-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "foreground-color" + ] + }, + { + "key": "{form.control.checked.surface-color.default}", + "$type": "color", + "$value": "#0f62fe", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "group": "components", + "key": "{form.control.checked.surface-color.default}" + }, + "name": "token-form-control-checked-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "surface-color", + "default" + ] + }, + { + "key": "{form.control.checked.surface-color.hover}", + "$type": "color", + "$value": "#0043ce", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "components", + "key": "{form.control.checked.surface-color.hover}" + }, + "name": "token-form-control-checked-surface-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "surface-color", + "hover" + ] + }, + { + "key": "{form.control.checked.border-color.default}", + "$type": "color", + "$value": "#0043ce", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "components", + "key": "{form.control.checked.border-color.default}" + }, + "name": "token-form-control-checked-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "border-color", + "default" + ] + }, + { + "key": "{form.control.checked.border-color.hover}", + "$type": "color", + "$value": "#002d9c", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "group": "components", + "key": "{form.control.checked.border-color.hover}" + }, + "name": "token-form-control-checked-border-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "border-color", + "hover" + ] + }, + { + "key": "{form.control.invalid.border-color.default}", + "$type": "color", + "$value": "#a2191f", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "components", + "key": "{form.control.invalid.border-color.default}" + }, + "name": "token-form-control-invalid-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "invalid", + "border-color", + "default" + ] + }, + { + "key": "{form.control.invalid.border-color.hover}", + "$type": "color", + "$value": "#750e13", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.red-400}", + "group": "components", + "key": "{form.control.invalid.border-color.hover}" + }, + "name": "token-form-control-invalid-border-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "invalid", + "border-color", + "hover" + ] + }, + { + "key": "{form.control.readonly.foreground-color}", + "$type": "color", + "$value": "#161616", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "group": "components", + "key": "{form.control.readonly.foreground-color}" + }, + "name": "token-form-control-readonly-foreground-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "readonly", + "foreground-color" + ] + }, + { + "key": "{form.control.readonly.surface-color}", + "$type": "color", + "$value": "#e0e0e0", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.strong}", + "group": "components", + "key": "{form.control.readonly.surface-color}" + }, + "name": "token-form-control-readonly-surface-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "readonly", + "surface-color" + ] + }, + { + "key": "{form.control.readonly.border-color}", + "$type": "color", + "$value": "#c6c6c6", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.border.faint}", + "group": "components", + "key": "{form.control.readonly.border-color}" + }, + "name": "token-form-control-readonly-border-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "readonly", + "border-color" + ] + }, + { + "key": "{form.control.disabled.foreground-color}", + "$type": "color", + "$value": "rgba(22, 22, 22, 0.25)", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.disabled}", + "group": "components", + "key": "{form.control.disabled.foreground-color}" + }, + "name": "token-form-control-disabled-foreground-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "disabled", + "foreground-color" + ] + }, + { + "key": "{form.control.disabled.surface-color}", + "$type": "color", + "$value": "#c6c6c6", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.interactive-disabled}", + "group": "components", + "key": "{form.control.disabled.surface-color}" + }, + "name": "token-form-control-disabled-surface-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "disabled", + "surface-color" + ] + }, + { + "key": "{form.control.disabled.border-color}", + "$type": "color", + "$value": "#e0e0e0", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.border.primary}", + "group": "components", + "key": "{form.control.disabled.border-color}" + }, + "name": "token-form-control-disabled-border-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "disabled", + "border-color" + ] + }, + { + "key": "{form.control.padding}", + "$type": "dimension", + "$value": "7px", + "unit": "px", + "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma.", + "original": { + "$type": "dimension", + "$value": "7", + "unit": "px", + "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma.", + "key": "{form.control.padding}" + }, + "name": "token-form-control-padding", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "padding" + ] + }, + { + "key": "{form.control.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{form.control.border.radius}" + }, + "name": "token-form-control-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "border", + "radius" + ] + }, + { + "key": "{form.control.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.control.border.width}" + }, + "name": "token-form-control-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "border", + "width" + ] + }, + { + "key": "{form.radio.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.radio.size}" + }, + "name": "token-form-radio-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "size" + ] + }, + { + "key": "{form.radio.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.radio.border.width}" + }, + "name": "token-form-radio-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "border", + "width" + ] + }, + { + "key": "{form.radio.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.radio.background-image.size}" + }, + "name": "token-form-radio-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "background-image", + "size" + ] + }, + { + "key": "{form.radio.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "key": "{form.radio.background-image.data-url}" + }, + "name": "token-form-radio-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "background-image", + "data-url" + ] + }, + { + "key": "{form.radio.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "key": "{form.radio.background-image.data-url-disabled}" + }, + "name": "token-form-radio-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "background-image", + "data-url-disabled" + ] + }, + { + "key": "{form.radiocard-group.gap}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.radiocard-group.gap}" + }, + "name": "token-form-radiocard-group-gap", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard-group", + "gap" + ] + }, + { + "key": "{form.radiocard.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.radiocard.border.width}" + }, + "name": "token-form-radiocard-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "width" + ] + }, + { + "key": "{form.radiocard.border.radius}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{form.radiocard.border.radius}" + }, + "name": "token-form-radiocard-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "radius" + ] + }, + { + "key": "{form.radiocard.border.color.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#ffffff", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{form.radiocard.border.color.default}" + }, + "name": "token-form-radiocard-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "default" + ] + }, + { + "key": "{form.radiocard.border.color.focus}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#ffffff", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "key": "{form.radiocard.border.color.focus}" + }, + "name": "token-form-radiocard-border-color-focus", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "focus" + ] + }, + { + "key": "{form.radiocard.border.color.default-checked}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#0043ce", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "key": "{form.radiocard.border.color.default-checked}" + }, + "name": "token-form-radiocard-border-color-default-checked", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "default-checked" + ] + }, + { + "key": "{form.radiocard.content-padding}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{form.radiocard.content-padding}" + }, + "name": "token-form-radiocard-content-padding", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "content-padding" + ] + }, + { + "key": "{form.radiocard.control-padding}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{form.radiocard.control-padding}" + }, + "name": "token-form-radiocard-control-padding", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "control-padding" + ] + }, + { + "key": "{form.radiocard.transition.duration}", + "$type": "duration", + "$value": "0.2s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.2", + "unit": "s", + "key": "{form.radiocard.transition.duration}" + }, + "name": "token-form-radiocard-transition-duration", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "transition", + "duration" + ] + }, + { + "key": "{form.select.background-image.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.select.background-image.size}" + }, + "name": "token-form-select-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "size" + ] + }, + { + "key": "{form.select.background-image.position-right-x}", + "$type": "dimension", + "$value": "7px", + "original": { + "$type": "dimension", + "$value": "{form.control.padding}", + "key": "{form.select.background-image.position-right-x}" + }, + "name": "token-form-select-background-image-position-right-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "position-right-x" + ] + }, + { + "key": "{form.select.background-image.position-top-y}", + "$type": "dimension", + "$value": "9px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "9", + "unit": "px", + "key": "{form.select.background-image.position-top-y}" + }, + "name": "token-form-select-background-image-position-top-y", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "position-top-y" + ] + }, + { + "key": "{form.select.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "key": "{form.select.background-image.data-url}" + }, + "name": "token-form-select-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "data-url" + ] + }, + { + "key": "{form.select.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "key": "{form.select.background-image.data-url-disabled}" + }, + "name": "token-form-select-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "data-url-disabled" + ] + }, + { + "key": "{form.text-input.background-image.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.text-input.background-image.size}" + }, + "name": "token-form-text-input-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "size" + ] + }, + { + "key": "{form.text-input.background-image.position-x}", + "$type": "dimension", + "$value": "7px", + "original": { + "$type": "dimension", + "$value": "{form.control.padding}", + "key": "{form.text-input.background-image.position-x}" + }, + "name": "token-form-text-input-background-image-position-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "position-x" + ] + }, + { + "key": "{form.text-input.background-image.data-url-date}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-date}" + }, + "name": "token-form-text-input-background-image-data-url-date", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-date" + ] + }, + { + "key": "{form.text-input.background-image.data-url-time}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-time}" + }, + "name": "token-form-text-input-background-image-data-url-time", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-time" + ] + }, + { + "key": "{form.text-input.background-image.data-url-search}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-search}" + }, + "name": "token-form-text-input-background-image-data-url-search", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search" + ] + }, + { + "key": "{form.text-input.background-image.data-url-search-cancel}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-search-cancel}" + }, + "name": "token-form-text-input-background-image-data-url-search-cancel", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search-cancel" + ] + }, + { + "key": "{form.text-input.background-image.data-url-search-loading}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color and animation are hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color and animation are hardcoded here!", + "key": "{form.text-input.background-image.data-url-search-loading}" + }, + "name": "token-form-text-input-background-image-data-url-search-loading", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search-loading" + ] + }, + { + "key": "{form.toggle.width}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{form.toggle.width}" + }, + "name": "token-form-toggle-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "width" + ] + }, + { + "key": "{form.toggle.height}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.toggle.height}" + }, + "name": "token-form-toggle-height", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "height" + ] + }, + { + "key": "{form.toggle.base.surface-color.default}", + "$type": "color", + "$value": "#e0e0e0", + "group": "components", + "comment": "the toggle has a different base surface color, compared to the other controls", + "original": { + "$type": "color", + "$value": "{color.surface.strong}", + "group": "components", + "comment": "the toggle has a different base surface color, compared to the other controls", + "key": "{form.toggle.base.surface-color.default}" + }, + "name": "token-form-toggle-base-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "base", + "surface-color", + "default" + ] + }, + { + "key": "{form.toggle.border.radius}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{form.toggle.border.radius}" + }, + "name": "token-form-toggle-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "border", + "radius" + ] + }, + { + "key": "{form.toggle.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.toggle.border.width}" + }, + "name": "token-form-toggle-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "border", + "width" + ] + }, + { + "key": "{form.toggle.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.toggle.background-image.size}" + }, + "name": "token-form-toggle-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "size" + ] + }, + { + "key": "{form.toggle.background-image.position-x}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{form.toggle.background-image.position-x}" + }, + "name": "token-form-toggle-background-image-position-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "position-x" + ] + }, + { + "key": "{form.toggle.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.toggle.background-image.data-url}" + }, + "name": "token-form-toggle-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "data-url" + ] + }, + { + "key": "{form.toggle.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.toggle.background-image.data-url-disabled}" + }, + "name": "token-form-toggle-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "data-url-disabled" + ] + }, + { + "key": "{form.toggle.transition.duration}", + "$type": "duration", + "$value": "0.2s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.2", + "unit": "s", + "key": "{form.toggle.transition.duration}" + }, + "name": "token-form-toggle-transition-duration", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "transition", + "duration" + ] + }, + { + "key": "{form.toggle.transition.timing-function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.68, -0.2, 0.265, 1.15)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.68, + -0.2, + 0.265, + 1.15 + ], + "key": "{form.toggle.transition.timing-function}" + }, + "name": "token-form-toggle-transition-timing-function", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "transition", + "timing-function" + ] + }, + { + "key": "{form.toggle.thumb-size}", + "$type": "dimension", + "$value": "16px", + "original": { + "$type": "dimension", + "$value": "{form.toggle.height}", + "key": "{form.toggle.thumb-size}" + }, + "name": "token-form-toggle-thumb-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "thumb-size" + ] + }, + { + "key": "{icon-tile.border.color.overlay}", + "$type": "color", + "$value": "#c6c6c6", + "$modes": { + "default": "#e0e0e0", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.borderSubtle02}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle02}", + "cds-g10": "{carbon.themes.g10.borderSubtle02}", + "cds-g90": "{carbon.themes.g90.borderSubtle02}", + "cds-g100": "{carbon.themes.g100.borderSubtle02}" + }, + "key": "{icon-tile.border.color.overlay}" + }, + "name": "token-icon-tile-border-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "overlay" + ] + }, + { + "key": "{icon-tile.border.color.logo}", + "$type": "color", + "$value": "#e0e0e0", + "$modes": { + "default": "#e0e0e0", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.borderSubtle01}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle01}", + "cds-g10": "{carbon.themes.g10.borderSubtle01}", + "cds-g90": "{carbon.themes.g90.borderSubtle01}", + "cds-g100": "{carbon.themes.g100.borderSubtle01}" + }, + "key": "{icon-tile.border.color.logo}" + }, + "name": "token-icon-tile-border-color-logo", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "logo" + ] + }, + { + "key": "{icon-tile.surface.color.overlay}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.layer02}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.white.layer02}", + "cds-g10": "{carbon.themes.g10.layer02}", + "cds-g90": "{carbon.themes.g90.layer02}", + "cds-g100": "{carbon.themes.g100.layer02}" + }, + "key": "{icon-tile.surface.color.overlay}" + }, + "name": "token-icon-tile-surface-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "surface", + "color", + "overlay" + ] + }, + { + "key": "{pagination.nav.control.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{pagination.nav.control.height}" + }, + "name": "token-pagination-nav-control-height", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "height" + ] + }, + { + "key": "{pagination.nav.control.padding.horizontal}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{pagination.nav.control.padding.horizontal}" + }, + "name": "token-pagination-nav-control-padding-horizontal", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "padding", + "horizontal" + ] + }, + { + "key": "{pagination.nav.control.focus-inset}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{pagination.nav.control.focus-inset}" + }, + "name": "token-pagination-nav-control-focus-inset", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "focus-inset" + ] + }, + { + "key": "{pagination.nav.control.icon-spacing}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{pagination.nav.control.icon-spacing}" + }, + "name": "token-pagination-nav-control-icon-spacing", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "icon-spacing" + ] + }, + { + "key": "{pagination.nav.indicator.height}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{pagination.nav.indicator.height}" + }, + "name": "token-pagination-nav-indicator-height", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "indicator", + "height" + ] + }, + { + "key": "{pagination.nav.indicator.spacing}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{pagination.nav.indicator.spacing}" + }, + "name": "token-pagination-nav-indicator-spacing", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "indicator", + "spacing" + ] + }, + { + "key": "{pagination.child.spacing.vertical}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{pagination.child.spacing.vertical}" + }, + "name": "token-pagination-child-spacing-vertical", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "child", + "spacing", + "vertical" + ] + }, + { + "key": "{pagination.child.spacing.horizontal}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "key": "{pagination.child.spacing.horizontal}" + }, + "name": "token-pagination-child-spacing-horizontal", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "child", + "spacing", + "horizontal" + ] + }, + { + "key": "{rich-tooltip.bubble.max-width}", + "$type": "dimension", + "$value": "288px", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "original": { + "$type": "dimension", + "$value": "288", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "key": "{rich-tooltip.bubble.max-width}" + }, + "name": "token-rich-tooltip-bubble-max-width", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "max-width" + ] + }, + { + "key": "{rich-tooltip.bubble.border.color}", + "$value": "#e0e0e0", + "$modes": { + "default": "#52525233", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#e0e0e0", + "cds-g100": "#e0e0e0" + }, + "original": { + "$value": "{color.palette.alpha-200}", + "$modes": { + "default": "{elevation.higher.border.color}", + "cds-g0": "{color.palette.alpha-200}", + "cds-g10": "{color.palette.alpha-200}", + "cds-g90": "{color.palette.alpha-200}", + "cds-g100": "{color.palette.alpha-200}" + }, + "key": "{rich-tooltip.bubble.border.color}" + }, + "name": "token-rich-tooltip-bubble-border-color", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "border", + "color" + ] + }, + { + "key": "{rich-tooltip.bubble.border.radius}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "key": "{rich-tooltip.bubble.border.radius}" + }, + "name": "token-rich-tooltip-bubble-border-radius", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "border", + "radius" + ] + }, + { + "key": "{rich-tooltip.bubble.arrow.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{rich-tooltip.bubble.arrow.size}" + }, + "name": "token-rich-tooltip-bubble-arrow-size", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "arrow", + "size" + ] + }, + { + "key": "{rich-tooltip.toggle.gap.horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{rich-tooltip.toggle.gap.horizontal}" + }, + "name": "token-rich-tooltip-toggle-gap-horizontal", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "gap", + "horizontal" + ] + }, + { + "key": "{rich-tooltip.toggle.foreground.color.default}", + "$value": "#525252", + "$modes": { + "default": "#161616", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$value": "{carbon.themes.g10.textSecondary}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.default}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-default", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "default" + ] + }, + { + "key": "{rich-tooltip.toggle.foreground.color.hover}", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$value": "{carbon.themes.g10.textPrimary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.hover}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-hover", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "hover" + ] + }, + { + "key": "{rich-tooltip.toggle.foreground.color.active}", + "$value": "#525252", + "$modes": { + "default": "#525252", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$value": "{carbon.themes.g10.textSecondary}", + "$modes": { + "default": "{color.foreground.faint}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.active}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-active", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "active" + ] + }, + { + "key": "{rich-tooltip.toggle.icon.size}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, + "original": { + "$type": "dimension", + "$value": "14", + "unit": "px", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, + "key": "{rich-tooltip.toggle.icon.size}" + }, + "name": "token-rich-tooltip-toggle-icon-size", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "icon", + "size" + ] + }, + { + "key": "{tabs.tab.height.medium}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{tabs.tab.height.medium}" + }, + "name": "token-tabs-tab-height-medium", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "height", + "medium" + ] + }, + { + "key": "{tabs.tab.height.large}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{tabs.tab.height.large}" + }, + "name": "token-tabs-tab-height-large", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "height", + "large" + ] + }, + { + "key": "{tabs.tab.padding.horizontal.medium}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{tabs.tab.padding.horizontal.medium}" + }, + "name": "token-tabs-tab-padding-horizontal-medium", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "padding", + "horizontal", + "medium" + ] + }, + { + "key": "{tabs.tab.padding.horizontal.large}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "key": "{tabs.tab.padding.horizontal.large}" + }, + "name": "token-tabs-tab-padding-horizontal-large", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "padding", + "horizontal", + "large" + ] + }, + { + "key": "{tabs.tab.padding.vertical}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "key": "{tabs.tab.padding.vertical}" + }, + "name": "token-tabs-tab-padding-vertical", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "padding", + "vertical" + ] + }, + { + "key": "{tabs.tab.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{tabs.tab.border-radius}" + }, + "name": "token-tabs-tab-border-radius", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "border-radius" + ] + }, + { + "key": "{tabs.tab.focus-inset}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{tabs.tab.focus-inset}" + }, + "name": "token-tabs-tab-focus-inset", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "focus-inset" + ] + }, + { + "key": "{tabs.tab.gutter}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{tabs.tab.gutter}" + }, + "name": "token-tabs-tab-gutter", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "gutter" + ] + }, + { + "key": "{tabs.indicator.height}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{tabs.indicator.height}" + }, + "name": "token-tabs-indicator-height", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "indicator", + "height" + ] + }, + { + "key": "{tabs.indicator.transition.function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.5, 1, 0.89, 1)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.5, + 1, + 0.89, + 1 + ], + "key": "{tabs.indicator.transition.function}" + }, + "name": "token-tabs-indicator-transition-function", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "indicator", + "transition", + "function" + ] + }, + { + "key": "{tabs.indicator.transition.duration}", + "$type": "duration", + "$value": "0.6s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.6", + "unit": "s", + "key": "{tabs.indicator.transition.duration}" + }, + "name": "token-tabs-indicator-transition-duration", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "indicator", + "transition", + "duration" + ] + }, + { + "key": "{tabs.divider.height}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{tabs.divider.height}" + }, + "name": "token-tabs-divider-height", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "divider", + "height" + ] + }, + { + "key": "{tooltip.max-width}", + "$type": "dimension", + "$value": "288px", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "original": { + "$type": "dimension", + "$value": "288", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "key": "{tooltip.max-width}" + }, + "name": "token-tooltip-max-width", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "max-width" + ] + }, + { + "key": "{tooltip.padding.horizontal}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16px", + "cds-g10": "16px", + "cds-g90": "16px", + "cds-g100": "16px" + }, + "original": { + "$type": "dimension", + "$value": "{carbon.themes.g10.spacing05}", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "{carbon.themes.white.spacing05}", + "cds-g10": "{carbon.themes.g10.spacing05}", + "cds-g90": "{carbon.themes.g90.spacing05}", + "cds-g100": "{carbon.themes.g100.spacing05}" + }, + "key": "{tooltip.padding.horizontal}" + }, + "name": "token-tooltip-padding-horizontal", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "horizontal" + ] + }, + { + "key": "{tooltip.padding.vertical}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "16px", + "cds-g10": "16px", + "cds-g90": "16px", + "cds-g100": "16px" + }, + "original": { + "$type": "dimension", + "$value": "{carbon.themes.g10.spacing05}", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "{carbon.themes.white.spacing05}", + "cds-g10": "{carbon.themes.g10.spacing05}", + "cds-g90": "{carbon.themes.g90.spacing05}", + "cds-g100": "{carbon.themes.g100.spacing05}" + }, + "key": "{tooltip.padding.vertical}" + }, + "name": "token-tooltip-padding-vertical", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "vertical" + ] + }, + { + "key": "{tooltip.border.radius}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "key": "{tooltip.border.radius}" + }, + "name": "token-tooltip-border-radius", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "border", + "radius" + ] + }, + { + "key": "{tooltip.caret.clip-path}", + "$value": "polygon(0 100%, 50% 0, 100% 100%)", + "$modes": { + "default": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "cds-g0": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g10": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g90": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g100": "polygon(0 100%, 50% 0, 100% 100%)" + }, + "original": { + "$value": "polygon(0 100%, 50% 0, 100% 100%)", + "$modes": { + "default": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "cds-g0": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g10": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g90": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g100": "polygon(0 100%, 50% 0, 100% 100%)" + }, + "key": "{tooltip.caret.clip-path}" + }, + "name": "token-tooltip-caret-clip-path", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "clip-path" + ] + }, + { + "key": "{tooltip.caret.height}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "7", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "7", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "key": "{tooltip.caret.height}" + }, + "name": "token-tooltip-caret-height", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "height" + ] + }, + { + "key": "{tooltip.caret.width}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{tooltip.caret.width}" + }, + "name": "token-tooltip-caret-width", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "width" + ] + }, + { + "key": "{tooltip.focus-offset}", + "$type": "dimension", + "$value": "-2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "-2", + "unit": "px", + "key": "{tooltip.focus-offset}" + }, + "name": "token-tooltip-focus-offset", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "focus-offset" + ] + }, + { + "key": "{tooltip.transition.function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.54, 1.5, 0.38, 1.11)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.54, + 1.5, + 0.38, + 1.11 + ], + "key": "{tooltip.transition.function}" + }, + "name": "token-tooltip-transition-function", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "transition", + "function" + ] + }, + { + "key": "{typography.font-stack.display}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.sans.display.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.font-stack.display}" + }, + "name": "token-typography-font-stack-display", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-stack", + "display" + ] + }, + { + "key": "{typography.font-stack.text}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.sans.text.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.font-stack.text}" + }, + "name": "token-typography-font-stack-text", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-stack", + "text" + ] + }, + { + "key": "{typography.font-stack.code}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.monospace.code.combined}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.font-stack.code}" + }, + "name": "token-typography-font-stack-code", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-stack", + "code" + ] + }, + { + "key": "{typography.font-weight.regular}", + "$type": "font-weight", + "$value": 400, + "$modes": { + "default": "400", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "default": "400", + "cds-g0": "{carbon.typography.font-weight.regular}", + "cds-g10": "{carbon.typography.font-weight.regular}", + "cds-g90": "{carbon.typography.font-weight.regular}", + "cds-g100": "{carbon.typography.font-weight.regular}" + }, + "key": "{typography.font-weight.regular}" + }, + "name": "token-typography-font-weight-regular", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "regular" + ] + }, + { + "key": "{typography.font-weight.medium}", + "$type": "font-weight", + "$value": 400, + "$modes": { + "default": "500", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "default": "500", + "cds-g0": "{carbon.typography.font-weight.regular}", + "cds-g10": "{carbon.typography.font-weight.regular}", + "cds-g90": "{carbon.typography.font-weight.regular}", + "cds-g100": "{carbon.typography.font-weight.regular}" + }, + "key": "{typography.font-weight.medium}" + }, + "name": "token-typography-font-weight-medium", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "medium" + ] + }, + { + "key": "{typography.font-weight.semibold}", + "$type": "font-weight", + "$value": 600, + "$modes": { + "default": "600", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "default": "600", + "cds-g0": "{carbon.typography.font-weight.semibold}", + "cds-g10": "{carbon.typography.font-weight.semibold}", + "cds-g90": "{carbon.typography.font-weight.semibold}", + "cds-g100": "{carbon.typography.font-weight.semibold}" + }, + "key": "{typography.font-weight.semibold}" + }, + "name": "token-typography-font-weight-semibold", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "semibold" + ] + }, + { + "key": "{typography.font-weight.bold}", + "$type": "font-weight", + "$value": 600, + "$modes": { + "default": "700", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "default": "700", + "cds-g0": "{carbon.typography.font-weight.semibold}", + "cds-g10": "{carbon.typography.font-weight.semibold}", + "cds-g90": "{carbon.typography.font-weight.semibold}", + "cds-g100": "{carbon.typography.font-weight.semibold}" + }, + "key": "{typography.font-weight.bold}" + }, + "name": "token-typography-font-weight-bold", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "bold" + ] + }, + { + "key": "{typography.display-500.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-500.font-family}" + }, + "name": "token-typography-display-500-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "font-family" + ] + }, + { + "key": "{typography.display-500.font-size}", + "$type": "font-size", + "$value": "2rem", + "unit": "px", + "comment": "30px/1.875rem", + "$modes": { + "default": "30", + "cds-g0": "2rem", + "cds-g10": "2rem", + "cds-g90": "2rem", + "cds-g100": "2rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading05.font-size}", + "unit": "px", + "comment": "30px/1.875rem", + "$modes": { + "default": "30", + "cds-g0": "{carbon.typography.heading05.font-size}", + "cds-g10": "{carbon.typography.heading05.font-size}", + "cds-g90": "{carbon.typography.heading05.font-size}", + "cds-g100": "{carbon.typography.heading05.font-size}" + }, + "key": "{typography.display-500.font-size}" + }, + "name": "token-typography-display-500-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "font-size" + ] + }, + { + "key": "{typography.display-500.line-height}", + "$type": "number", + "$value": 1.25, + "comment": "38px", + "$modes": { + "default": 1.2666, + "cds-g0": 1.25, + "cds-g10": 1.25, + "cds-g90": 1.25, + "cds-g100": 1.25 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading05.line-height}", + "comment": "38px", + "$modes": { + "default": 1.2666, + "cds-g0": "{carbon.typography.heading05.line-height}", + "cds-g10": "{carbon.typography.heading05.line-height}", + "cds-g90": "{carbon.typography.heading05.line-height}", + "cds-g100": "{carbon.typography.heading05.line-height}" + }, + "key": "{typography.display-500.line-height}" + }, + "name": "token-typography-display-500-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "line-height" + ] + }, + { + "key": "{typography.display-500.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading05.letter-spacing}", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading05.letter-spacing}", + "cds-g10": "{carbon.typography.heading05.letter-spacing}", + "cds-g90": "{carbon.typography.heading05.letter-spacing}", + "cds-g100": "{carbon.typography.heading05.letter-spacing}" + }, + "key": "{typography.display-500.letter-spacing}" + }, + "name": "token-typography-display-500-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "letter-spacing" + ] + }, + { + "key": "{typography.display-400.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-400.font-family}" + }, + "name": "token-typography-display-400-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "font-family" + ] + }, + { + "key": "{typography.display-400.font-size}", + "$type": "font-size", + "$value": "1.75rem", + "unit": "px", + "comment": "24px/1.5rem", + "$modes": { + "default": "24", + "cds-g0": "1.75rem", + "cds-g10": "1.75rem", + "cds-g90": "1.75rem", + "cds-g100": "1.75rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading04.font-size}", + "unit": "px", + "comment": "24px/1.5rem", + "$modes": { + "default": "24", + "cds-g0": "{carbon.typography.heading04.font-size}", + "cds-g10": "{carbon.typography.heading04.font-size}", + "cds-g90": "{carbon.typography.heading04.font-size}", + "cds-g100": "{carbon.typography.heading04.font-size}" + }, + "key": "{typography.display-400.font-size}" + }, + "name": "token-typography-display-400-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "font-size" + ] + }, + { + "key": "{typography.display-400.line-height}", + "$type": "number", + "$value": 1.28572, + "comment": "32px", + "$modes": { + "default": 1.3333, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading04.line-height}", + "comment": "32px", + "$modes": { + "default": 1.3333, + "cds-g0": "{carbon.typography.heading04.line-height}", + "cds-g10": "{carbon.typography.heading04.line-height}", + "cds-g90": "{carbon.typography.heading04.line-height}", + "cds-g100": "{carbon.typography.heading04.line-height}" + }, + "key": "{typography.display-400.line-height}" + }, + "name": "token-typography-display-400-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "line-height" + ] + }, + { + "key": "{typography.display-400.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading04.letter-spacing}", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.heading04.letter-spacing}", + "cds-g10": "{carbon.typography.heading04.letter-spacing}", + "cds-g90": "{carbon.typography.heading04.letter-spacing}", + "cds-g100": "{carbon.typography.heading04.letter-spacing}" + }, + "key": "{typography.display-400.letter-spacing}" + }, + "name": "token-typography-display-400-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "letter-spacing" + ] + }, + { + "key": "{typography.display-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-300.font-family}" + }, + "name": "token-typography-display-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "font-family" + ] + }, + { + "key": "{typography.display-300.font-size}", + "$type": "font-size", + "$value": "1.25rem", + "unit": "px", + "comment": "18px/1.125rem", + "$modes": { + "default": "18", + "cds-g0": "1.25rem", + "cds-g10": "1.25rem", + "cds-g90": "1.25rem", + "cds-g100": "1.25rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading03.font-size}", + "unit": "px", + "comment": "18px/1.125rem", + "$modes": { + "default": "18", + "cds-g0": "{carbon.typography.heading03.font-size}", + "cds-g10": "{carbon.typography.heading03.font-size}", + "cds-g90": "{carbon.typography.heading03.font-size}", + "cds-g100": "{carbon.typography.heading03.font-size}" + }, + "key": "{typography.display-300.font-size}" + }, + "name": "token-typography-display-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "font-size" + ] + }, + { + "key": "{typography.display-300.line-height}", + "$type": "number", + "$value": 1.4, + "comment": "24px", + "$modes": { + "default": 1.3333, + "cds-g0": 1.4, + "cds-g10": 1.4, + "cds-g90": 1.4, + "cds-g100": 1.4 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading03.line-height}", + "comment": "24px", + "$modes": { + "default": 1.3333, + "cds-g0": "{carbon.typography.heading03.line-height}", + "cds-g10": "{carbon.typography.heading03.line-height}", + "cds-g90": "{carbon.typography.heading03.line-height}", + "cds-g100": "{carbon.typography.heading03.line-height}" + }, + "key": "{typography.display-300.line-height}" + }, + "name": "token-typography-display-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "line-height" + ] + }, + { + "key": "{typography.display-300.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading03.letter-spacing}", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading03.letter-spacing}", + "cds-g10": "{carbon.typography.heading03.letter-spacing}", + "cds-g90": "{carbon.typography.heading03.letter-spacing}", + "cds-g100": "{carbon.typography.heading03.letter-spacing}" + }, + "key": "{typography.display-300.letter-spacing}" + }, + "name": "token-typography-display-300-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "letter-spacing" + ] + }, + { + "key": "{typography.display-200.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-200.font-family}" + }, + "name": "token-typography-display-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "font-family" + ] + }, + { + "key": "{typography.display-200.font-size}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading02.font-size}", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.heading02.font-size}", + "cds-g10": "{carbon.typography.heading02.font-size}", + "cds-g90": "{carbon.typography.heading02.font-size}", + "cds-g100": "{carbon.typography.heading02.font-size}" + }, + "key": "{typography.display-200.font-size}" + }, + "name": "token-typography-display-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "font-size" + ] + }, + { + "key": "{typography.display-200.line-height}", + "$type": "number", + "$value": 1.5, + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading02.line-height}", + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": "{carbon.typography.heading02.line-height}", + "cds-g10": "{carbon.typography.heading02.line-height}", + "cds-g90": "{carbon.typography.heading02.line-height}", + "cds-g100": "{carbon.typography.heading02.line-height}" + }, + "key": "{typography.display-200.line-height}" + }, + "name": "token-typography-display-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "line-height" + ] + }, + { + "key": "{typography.display-200.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading02.letter-spacing}", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading02.letter-spacing}", + "cds-g10": "{carbon.typography.heading02.letter-spacing}", + "cds-g90": "{carbon.typography.heading02.letter-spacing}", + "cds-g100": "{carbon.typography.heading02.letter-spacing}" + }, + "key": "{typography.display-200.letter-spacing}" + }, + "name": "token-typography-display-200-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "letter-spacing" + ] + }, + { + "key": "{typography.display-100.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-100.font-family}" + }, + "name": "token-typography-display-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "font-family" + ] + }, + { + "key": "{typography.display-100.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading01.font-size}", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.heading01.font-size}", + "cds-g10": "{carbon.typography.heading01.font-size}", + "cds-g90": "{carbon.typography.heading01.font-size}", + "cds-g100": "{carbon.typography.heading01.font-size}" + }, + "key": "{typography.display-100.font-size}" + }, + "name": "token-typography-display-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "font-size" + ] + }, + { + "key": "{typography.display-100.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading01.line-height}", + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": "{carbon.typography.heading01.line-height}", + "cds-g10": "{carbon.typography.heading01.line-height}", + "cds-g90": "{carbon.typography.heading01.line-height}", + "cds-g100": "{carbon.typography.heading01.line-height}" + }, + "key": "{typography.display-100.line-height}" + }, + "name": "token-typography-display-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "line-height" + ] + }, + { + "key": "{typography.display-100.letter-spacing}", + "$type": "letter-spacing", + "$value": "0.16px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0.16px", + "cds-g10": "0.16px", + "cds-g90": "0.16px", + "cds-g100": "0.16px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading01.letter-spacing}", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.heading01.letter-spacing}", + "cds-g10": "{carbon.typography.heading01.letter-spacing}", + "cds-g90": "{carbon.typography.heading01.letter-spacing}", + "cds-g100": "{carbon.typography.heading01.letter-spacing}" + }, + "key": "{typography.display-100.letter-spacing}" + }, + "name": "token-typography-display-100-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "letter-spacing" + ] + }, + { + "key": "{typography.body-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-300.font-family}" + }, + "name": "token-typography-body-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "font-family" + ] + }, + { + "key": "{typography.body-300.font-size}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.body02.font-size}", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.body02.font-size}", + "cds-g10": "{carbon.typography.body02.font-size}", + "cds-g90": "{carbon.typography.body02.font-size}", + "cds-g100": "{carbon.typography.body02.font-size}" + }, + "key": "{typography.body-300.font-size}" + }, + "name": "token-typography-body-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "font-size" + ] + }, + { + "key": "{typography.body-300.line-height}", + "$type": "number", + "$value": 1.5, + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.body02.line-height}", + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": "{carbon.typography.body02.line-height}", + "cds-g10": "{carbon.typography.body02.line-height}", + "cds-g90": "{carbon.typography.body02.line-height}", + "cds-g100": "{carbon.typography.body02.line-height}" + }, + "key": "{typography.body-300.line-height}" + }, + "name": "token-typography-body-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "line-height" + ] + }, + { + "key": "{typography.body-200.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-200.font-family}" + }, + "name": "token-typography-body-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "font-family" + ] + }, + { + "key": "{typography.body-200.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.body01.font-size}", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "{carbon.typography.body01.font-size}", + "cds-g10": "{carbon.typography.body01.font-size}", + "cds-g90": "{carbon.typography.body01.font-size}", + "cds-g100": "{carbon.typography.body01.font-size}" + }, + "key": "{typography.body-200.font-size}" + }, + "name": "token-typography-body-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "font-size" + ] + }, + { + "key": "{typography.body-200.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "20px", + "$modes": { + "default": 1.4286, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.body01.line-height}", + "comment": "20px", + "$modes": { + "default": 1.4286, + "cds-g0": "{carbon.typography.body01.line-height}", + "cds-g10": "{carbon.typography.body01.line-height}", + "cds-g90": "{carbon.typography.body01.line-height}", + "cds-g100": "{carbon.typography.body01.line-height}" + }, + "key": "{typography.body-200.line-height}" + }, + "name": "token-typography-body-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "line-height" + ] + }, + { + "key": "{typography.body-100.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-100.font-family}" + }, + "name": "token-typography-body-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "font-family" + ] + }, + { + "key": "{typography.body-100.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.bodyCompact01.font-size}", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.bodyCompact01.font-size}", + "cds-g10": "{carbon.typography.bodyCompact01.font-size}", + "cds-g90": "{carbon.typography.bodyCompact01.font-size}", + "cds-g100": "{carbon.typography.bodyCompact01.font-size}" + }, + "key": "{typography.body-100.font-size}" + }, + "name": "token-typography-body-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "font-size" + ] + }, + { + "key": "{typography.body-100.line-height}", + "$type": "number", + "$value": 1.28572, + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.bodyCompact01.line-height}", + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": "{carbon.typography.bodyCompact01.line-height}", + "cds-g10": "{carbon.typography.bodyCompact01.line-height}", + "cds-g90": "{carbon.typography.bodyCompact01.line-height}", + "cds-g100": "{carbon.typography.bodyCompact01.line-height}" + }, + "key": "{typography.body-100.line-height}" + }, + "name": "token-typography-body-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "line-height" + ] + }, + { + "key": "{typography.code-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-300.font-family}" + }, + "name": "token-typography-code-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "font-family" + ] + }, + { + "key": "{typography.code-300.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.code02.font-size}", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-300.font-size}" + }, + "name": "token-typography-code-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "font-size" + ] + }, + { + "key": "{typography.code-300.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "20px", + "$modes": { + "default": 1.25, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.code02.line-height}", + "comment": "20px", + "$modes": { + "default": 1.25, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-300.line-height}" + }, + "name": "token-typography-code-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "line-height" + ] + }, + { + "key": "{typography.code-200.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-200.font-family}" + }, + "name": "token-typography-code-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "font-family" + ] + }, + { + "key": "{typography.code-200.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.code02.font-size}", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-200.font-size}" + }, + "name": "token-typography-code-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "font-size" + ] + }, + { + "key": "{typography.code-200.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "18px", + "$modes": { + "default": 1.125, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.code02.line-height}", + "comment": "18px", + "$modes": { + "default": 1.125, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-200.line-height}" + }, + "name": "token-typography-code-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "line-height" + ] + }, + { + "key": "{typography.code-100.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-100.font-family}" + }, + "name": "token-typography-code-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "font-family" + ] + }, + { + "key": "{typography.code-100.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.code02.font-size}", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-100.font-size}" + }, + "name": "token-typography-code-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "font-size" + ] + }, + { + "key": "{typography.code-100.line-height}", + "$type": "number", + "$value": 1.33333, + "comment": "16px", + "$modes": { + "default": 1.23, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.code01.line-height}", + "comment": "16px", + "$modes": { + "default": 1.23, + "cds-g0": "{carbon.typography.code01.line-height}", + "cds-g10": "{carbon.typography.code01.line-height}", + "cds-g90": "{carbon.typography.code01.line-height}", + "cds-g100": "{carbon.typography.code01.line-height}" + }, + "key": "{typography.code-100.line-height}" + }, + "name": "token-typography-code-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "line-height" + ] + } +] \ No newline at end of file diff --git a/packages/tokens/dist/docs/products/themed-tokens/cds-g100.json b/packages/tokens/dist/docs/products/themed-tokens/cds-g100.json new file mode 100644 index 00000000000..4c7e6ba5207 --- /dev/null +++ b/packages/tokens/dist/docs/products/themed-tokens/cds-g100.json @@ -0,0 +1,15608 @@ +[ + { + "key": "{border.radius.x-small}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.x-small}" + }, + "name": "token-border-radius-x-small", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "x-small" + ] + }, + { + "key": "{border.radius.small}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.small}" + }, + "name": "token-border-radius-small", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "small" + ] + }, + { + "key": "{border.radius.medium}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.medium}" + }, + "name": "token-border-radius-medium", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "medium" + ] + }, + { + "key": "{border.radius.large}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.large}" + }, + "name": "token-border-radius-large", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "large" + ] + }, + { + "key": "{border.radius.rounded}", + "$type": "dimension", + "$value": "1000000000px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1000000000", + "unit": "px", + "key": "{border.radius.rounded}" + }, + "name": "token-border-radius-rounded", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "rounded" + ] + }, + { + "key": "{color.palette.blue-500}", + "$type": "color", + "$value": "#001141", + "group": "palette", + "$modes": { + "default": "#1c345f", + "cds-g0": "#001141", + "cds-g10": "#001141", + "cds-g90": "#001141", + "cds-g100": "#001141" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.100}", + "group": "palette", + "$modes": { + "default": "#1c345f", + "cds-g0": "{carbon.color.blue.100}", + "cds-g10": "{carbon.color.blue.100}", + "cds-g90": "{carbon.color.blue.100}", + "cds-g100": "{carbon.color.blue.100}" + }, + "key": "{color.palette.blue-500}" + }, + "name": "token-color-palette-blue-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-500" + ] + }, + { + "key": "{color.palette.blue-400}", + "$type": "color", + "$value": "#002d9c", + "group": "palette", + "$modes": { + "default": "#0046d1", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#002d9c", + "cds-g100": "#002d9c" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.80}", + "group": "palette", + "$modes": { + "default": "#0046d1", + "cds-g0": "{carbon.color.blue.80}", + "cds-g10": "{carbon.color.blue.80}", + "cds-g90": "{carbon.color.blue.80}", + "cds-g100": "{carbon.color.blue.80}" + }, + "key": "{color.palette.blue-400}" + }, + "name": "token-color-palette-blue-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-400" + ] + }, + { + "key": "{color.palette.blue-300}", + "$type": "color", + "$value": "#0043ce", + "group": "palette", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.70}", + "group": "palette", + "$modes": { + "default": "#0c56e9", + "cds-g0": "{carbon.color.blue.70}", + "cds-g10": "{carbon.color.blue.70}", + "cds-g90": "{carbon.color.blue.70}", + "cds-g100": "{carbon.color.blue.70}" + }, + "key": "{color.palette.blue-300}" + }, + "name": "token-color-palette-blue-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-300" + ] + }, + { + "key": "{color.palette.blue-200}", + "$type": "color", + "$value": "#0f62fe", + "group": "palette", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.60}", + "group": "palette", + "$modes": { + "default": "#1060ff", + "cds-g0": "{carbon.color.blue.60}", + "cds-g10": "{carbon.color.blue.60}", + "cds-g90": "{carbon.color.blue.60}", + "cds-g100": "{carbon.color.blue.60}" + }, + "key": "{color.palette.blue-200}" + }, + "name": "token-color-palette-blue-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-200" + ] + }, + { + "key": "{color.palette.blue-100}", + "$type": "color", + "$value": "#d0e2ff", + "group": "palette", + "$modes": { + "default": "#cce3fe", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.20}", + "group": "palette", + "$modes": { + "default": "#cce3fe", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.20}", + "cds-g100": "{carbon.color.blue.20}" + }, + "key": "{color.palette.blue-100}" + }, + "name": "token-color-palette-blue-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-100" + ] + }, + { + "key": "{color.palette.blue-50}", + "$type": "color", + "$value": "#edf5ff", + "group": "palette", + "$modes": { + "default": "#f2f8ff", + "cds-g0": "#edf5ff", + "cds-g10": "#edf5ff", + "cds-g90": "#edf5ff", + "cds-g100": "#edf5ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.10}", + "group": "palette", + "$modes": { + "default": "#f2f8ff", + "cds-g0": "{carbon.color.blue.10}", + "cds-g10": "{carbon.color.blue.10}", + "cds-g90": "{carbon.color.blue.10}", + "cds-g100": "{carbon.color.blue.10}" + }, + "key": "{color.palette.blue-50}" + }, + "name": "token-color-palette-blue-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-50" + ] + }, + { + "key": "{color.palette.purple-500}", + "$type": "color", + "$value": "#31135e", + "group": "palette", + "$modes": { + "default": "#42215b", + "cds-g0": "#31135e", + "cds-g10": "#31135e", + "cds-g90": "#31135e", + "cds-g100": "#31135e" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.90}", + "group": "palette", + "$modes": { + "default": "#42215b", + "cds-g0": "{carbon.color.purple.90}", + "cds-g10": "{carbon.color.purple.90}", + "cds-g90": "{carbon.color.purple.90}", + "cds-g100": "{carbon.color.purple.90}" + }, + "key": "{color.palette.purple-500}" + }, + "name": "token-color-palette-purple-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-500" + ] + }, + { + "key": "{color.palette.purple-400}", + "$type": "color", + "$value": "#6929c4", + "group": "palette", + "$modes": { + "default": "#7b00db", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.70}", + "group": "palette", + "$modes": { + "default": "#7b00db", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, + "key": "{color.palette.purple-400}" + }, + "name": "token-color-palette-purple-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-400" + ] + }, + { + "key": "{color.palette.purple-300}", + "$type": "color", + "$value": "#8a3ffc", + "group": "palette", + "$modes": { + "default": "#911ced", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#8a3ffc", + "cds-g100": "#8a3ffc" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.60}", + "group": "palette", + "$modes": { + "default": "#911ced", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.60}", + "cds-g100": "{carbon.color.purple.60}" + }, + "key": "{color.palette.purple-300}" + }, + "name": "token-color-palette-purple-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-300" + ] + }, + { + "key": "{color.palette.purple-200}", + "$type": "color", + "$value": "#a56eff", + "group": "palette", + "$modes": { + "default": "#a737ff", + "cds-g0": "#a56eff", + "cds-g10": "#a56eff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.50}", + "group": "palette", + "$modes": { + "default": "#a737ff", + "cds-g0": "{carbon.color.purple.50}", + "cds-g10": "{carbon.color.purple.50}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, + "key": "{color.palette.purple-200}" + }, + "name": "token-color-palette-purple-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-200" + ] + }, + { + "key": "{color.palette.purple-100}", + "$type": "color", + "$value": "#e8daff", + "group": "palette", + "$modes": { + "default": "#ead2fe", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.20}", + "group": "palette", + "$modes": { + "default": "#ead2fe", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.20}" + }, + "key": "{color.palette.purple-100}" + }, + "name": "token-color-palette-purple-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-100" + ] + }, + { + "key": "{color.palette.purple-50}", + "$type": "color", + "$value": "#f6f2ff", + "group": "palette", + "$modes": { + "default": "#f9f2ff", + "cds-g0": "#f6f2ff", + "cds-g10": "#f6f2ff", + "cds-g90": "#f6f2ff", + "cds-g100": "#f6f2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.10}", + "group": "palette", + "$modes": { + "default": "#f9f2ff", + "cds-g0": "{carbon.color.purple.10}", + "cds-g10": "{carbon.color.purple.10}", + "cds-g90": "{carbon.color.purple.10}", + "cds-g100": "{carbon.color.purple.10}" + }, + "key": "{color.palette.purple-50}" + }, + "name": "token-color-palette-purple-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-50" + ] + }, + { + "key": "{color.palette.green-500}", + "$type": "color", + "$value": "#044317", + "group": "palette", + "$modes": { + "default": "#054220", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#044317", + "cds-g100": "#044317" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.80}", + "group": "palette", + "$modes": { + "default": "#054220", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.80}", + "cds-g100": "{carbon.color.green.80}" + }, + "key": "{color.palette.green-500}" + }, + "name": "token-color-palette-green-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-500" + ] + }, + { + "key": "{color.palette.green-400}", + "$type": "color", + "$value": "#0e6027", + "group": "palette", + "$modes": { + "default": "#006619", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.70}", + "group": "palette", + "$modes": { + "default": "#006619", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, + "key": "{color.palette.green-400}" + }, + "name": "token-color-palette-green-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-400" + ] + }, + { + "key": "{color.palette.green-300}", + "$type": "color", + "$value": "#198038", + "group": "palette", + "$modes": { + "default": "#00781e", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#198038", + "cds-g100": "#198038" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.60}", + "group": "palette", + "$modes": { + "default": "#00781e", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.60}", + "cds-g100": "{carbon.color.green.60}" + }, + "key": "{color.palette.green-300}" + }, + "name": "token-color-palette-green-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-300" + ] + }, + { + "key": "{color.palette.green-200}", + "$type": "color", + "$value": "#24a148", + "group": "palette", + "$modes": { + "default": "#008a22", + "cds-g0": "#24a148", + "cds-g10": "#24a148", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.50}", + "group": "palette", + "$modes": { + "default": "#008a22", + "cds-g0": "{carbon.color.green.50}", + "cds-g10": "{carbon.color.green.50}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, + "key": "{color.palette.green-200}" + }, + "name": "token-color-palette-green-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-200" + ] + }, + { + "key": "{color.palette.green-100}", + "$type": "color", + "$value": "#a7f0ba", + "group": "palette", + "$modes": { + "default": "#cceeda", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.20}", + "group": "palette", + "$modes": { + "default": "#cceeda", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, + "key": "{color.palette.green-100}" + }, + "name": "token-color-palette-green-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-100" + ] + }, + { + "key": "{color.palette.green-50}", + "$type": "color", + "$value": "#defbe6", + "group": "palette", + "$modes": { + "default": "#f2fbf6", + "cds-g0": "#defbe6", + "cds-g10": "#defbe6", + "cds-g90": "#defbe6", + "cds-g100": "#defbe6" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.10}", + "group": "palette", + "$modes": { + "default": "#f2fbf6", + "cds-g0": "{carbon.color.green.10}", + "cds-g10": "{carbon.color.green.10}", + "cds-g90": "{carbon.color.green.10}", + "cds-g100": "{carbon.color.green.10}" + }, + "key": "{color.palette.green-50}" + }, + "name": "token-color-palette-green-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-50" + ] + }, + { + "key": "{color.palette.amber-500}", + "$type": "color", + "$value": "#3e1a00", + "group": "palette", + "$modes": { + "default": "#542800", + "cds-g0": "#3e1a00", + "cds-g10": "#3e1a00", + "cds-g90": "#3e1a00", + "cds-g100": "#3e1a00" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.90}", + "group": "palette", + "$modes": { + "default": "#542800", + "cds-g0": "{carbon.color.orange.90}", + "cds-g10": "{carbon.color.orange.90}", + "cds-g90": "{carbon.color.orange.90}", + "cds-g100": "{carbon.color.orange.90}" + }, + "key": "{color.palette.amber-500}" + }, + "name": "token-color-palette-amber-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-500" + ] + }, + { + "key": "{color.palette.amber-400}", + "$type": "color", + "$value": "#5e2900", + "group": "palette", + "$modes": { + "default": "#803d00", + "cds-g0": "#5e2900", + "cds-g10": "#5e2900", + "cds-g90": "#5e2900", + "cds-g100": "#5e2900" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.80}", + "group": "palette", + "$modes": { + "default": "#803d00", + "cds-g0": "{carbon.color.orange.80}", + "cds-g10": "{carbon.color.orange.80}", + "cds-g90": "{carbon.color.orange.80}", + "cds-g100": "{carbon.color.orange.80}" + }, + "key": "{color.palette.amber-400}" + }, + "name": "token-color-palette-amber-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-400" + ] + }, + { + "key": "{color.palette.amber-300}", + "$type": "color", + "$value": "#8a3800", + "group": "palette", + "$modes": { + "default": "#9e4b00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.70}", + "group": "palette", + "$modes": { + "default": "#9e4b00", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, + "key": "{color.palette.amber-300}" + }, + "name": "token-color-palette-amber-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-300" + ] + }, + { + "key": "{color.palette.amber-200}", + "$type": "color", + "$value": "#ba4e00", + "group": "palette", + "$modes": { + "default": "#bb5a00", + "cds-g0": "#ba4e00", + "cds-g10": "#ba4e00", + "cds-g90": "#ba4e00", + "cds-g100": "#ba4e00" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.60}", + "group": "palette", + "$modes": { + "default": "#bb5a00", + "cds-g0": "{carbon.color.orange.60}", + "cds-g10": "{carbon.color.orange.60}", + "cds-g90": "{carbon.color.orange.60}", + "cds-g100": "{carbon.color.orange.60}" + }, + "key": "{color.palette.amber-200}" + }, + "name": "token-color-palette-amber-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-200" + ] + }, + { + "key": "{color.palette.amber-100}", + "$type": "color", + "$value": "#ffd9be", + "group": "palette", + "$modes": { + "default": "#fbeabf", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.20}", + "group": "palette", + "$modes": { + "default": "#fbeabf", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "key": "{color.palette.amber-100}" + }, + "name": "token-color-palette-amber-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-100" + ] + }, + { + "key": "{color.palette.amber-50}", + "$type": "color", + "$value": "#fff2e8", + "group": "palette", + "$modes": { + "default": "#fff9e8", + "cds-g0": "#fff2e8", + "cds-g10": "#fff2e8", + "cds-g90": "#fff2e8", + "cds-g100": "#fff2e8" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.10}", + "group": "palette", + "$modes": { + "default": "#fff9e8", + "cds-g0": "{carbon.color.orange.10}", + "cds-g10": "{carbon.color.orange.10}", + "cds-g90": "{carbon.color.orange.10}", + "cds-g100": "{carbon.color.orange.10}" + }, + "key": "{color.palette.amber-50}" + }, + "name": "token-color-palette-amber-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-50" + ] + }, + { + "key": "{color.palette.red-500}", + "$type": "color", + "$value": "#520408", + "group": "palette", + "$modes": { + "default": "#51130a", + "cds-g0": "#520408", + "cds-g10": "#520408", + "cds-g90": "#520408", + "cds-g100": "#520408" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.90}", + "group": "palette", + "$modes": { + "default": "#51130a", + "cds-g0": "{carbon.color.red.90}", + "cds-g10": "{carbon.color.red.90}", + "cds-g90": "{carbon.color.red.90}", + "cds-g100": "{carbon.color.red.90}" + }, + "key": "{color.palette.red-500}" + }, + "name": "token-color-palette-red-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-500" + ] + }, + { + "key": "{color.palette.red-400}", + "$type": "color", + "$value": "#750e13", + "group": "palette", + "$modes": { + "default": "#940004", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#750e13", + "cds-g100": "#750e13" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.80}", + "group": "palette", + "$modes": { + "default": "#940004", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.80}", + "cds-g100": "{carbon.color.red.80}" + }, + "key": "{color.palette.red-400}" + }, + "name": "token-color-palette-red-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-400" + ] + }, + { + "key": "{color.palette.red-300}", + "$type": "color", + "$value": "#a2191f", + "group": "palette", + "$modes": { + "default": "#c00005", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.70}", + "group": "palette", + "$modes": { + "default": "#c00005", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, + "key": "{color.palette.red-300}" + }, + "name": "token-color-palette-red-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-300" + ] + }, + { + "key": "{color.palette.red-200}", + "$type": "color", + "$value": "#da1e28", + "group": "palette", + "$modes": { + "default": "#e52228", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.60}", + "group": "palette", + "$modes": { + "default": "#e52228", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.60}", + "cds-g100": "{carbon.color.red.60}" + }, + "key": "{color.palette.red-200}" + }, + "name": "token-color-palette-red-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-200" + ] + }, + { + "key": "{color.palette.red-100}", + "$type": "color", + "$value": "#ffd7d9", + "group": "palette", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.20}", + "group": "palette", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, + "key": "{color.palette.red-100}" + }, + "name": "token-color-palette-red-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-100" + ] + }, + { + "key": "{color.palette.red-50}", + "$type": "color", + "$value": "#fff1f1", + "group": "palette", + "$modes": { + "default": "#fff5f5", + "cds-g0": "#fff1f1", + "cds-g10": "#fff1f1", + "cds-g90": "#fff1f1", + "cds-g100": "#fff1f1" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.10}", + "group": "palette", + "$modes": { + "default": "#fff5f5", + "cds-g0": "{carbon.color.red.10}", + "cds-g10": "{carbon.color.red.10}", + "cds-g90": "{carbon.color.red.10}", + "cds-g100": "{carbon.color.red.10}" + }, + "key": "{color.palette.red-50}" + }, + "name": "token-color-palette-red-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-50" + ] + }, + { + "key": "{color.palette.neutral-700}", + "$type": "color", + "$value": "#161616", + "group": "palette", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.100}", + "group": "palette", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "{carbon.color.gray.100}", + "cds-g10": "{carbon.color.gray.100}", + "cds-g90": "{carbon.color.gray.100}", + "cds-g100": "{carbon.color.gray.100}" + }, + "key": "{color.palette.neutral-700}" + }, + "name": "token-color-palette-neutral-700", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-700" + ] + }, + { + "key": "{color.palette.neutral-600}", + "$type": "color", + "$value": "#393939", + "group": "palette", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#393939", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.80}", + "group": "palette", + "$modes": { + "default": "#3b3d45", + "cds-g0": "{carbon.color.gray.80}", + "cds-g10": "{carbon.color.gray.80}", + "cds-g90": "{carbon.color.gray.80}", + "cds-g100": "{carbon.color.gray.80}" + }, + "key": "{color.palette.neutral-600}" + }, + "name": "token-color-palette-neutral-600", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-600" + ] + }, + { + "key": "{color.palette.neutral-500}", + "$type": "color", + "$value": "#525252", + "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.70}", + "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": "{carbon.color.gray.70}", + "cds-g10": "{carbon.color.gray.70}", + "cds-g90": "{carbon.color.gray.70}", + "cds-g100": "{carbon.color.gray.70}" + }, + "key": "{color.palette.neutral-500}" + }, + "name": "token-color-palette-neutral-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-500" + ] + }, + { + "key": "{color.palette.neutral-400}", + "$type": "color", + "$value": "#8d8d8d", + "group": "palette", + "$modes": { + "default": "#8c909c", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.50}", + "group": "palette", + "$modes": { + "default": "#8c909c", + "cds-g0": "{carbon.color.gray.50}", + "cds-g10": "{carbon.color.gray.50}", + "cds-g90": "{carbon.color.gray.50}", + "cds-g100": "{carbon.color.gray.50}" + }, + "key": "{color.palette.neutral-400}" + }, + "name": "token-color-palette-neutral-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-400" + ] + }, + { + "key": "{color.palette.neutral-300}", + "$type": "color", + "$value": "#a8a8a8", + "group": "palette", + "$modes": { + "default": "#c2c5cb", + "cds-g0": "#a8a8a8", + "cds-g10": "#a8a8a8", + "cds-g90": "#a8a8a8", + "cds-g100": "#a8a8a8" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.40}", + "group": "palette", + "$modes": { + "default": "#c2c5cb", + "cds-g0": "{carbon.color.gray.40}", + "cds-g10": "{carbon.color.gray.40}", + "cds-g90": "{carbon.color.gray.40}", + "cds-g100": "{carbon.color.gray.40}" + }, + "key": "{color.palette.neutral-300}" + }, + "name": "token-color-palette-neutral-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-300" + ] + }, + { + "key": "{color.palette.neutral-200}", + "$type": "color", + "$value": "#c6c6c6", + "group": "palette", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.30}", + "group": "palette", + "$modes": { + "default": "#dedfe3", + "cds-g0": "{carbon.color.gray.30}", + "cds-g10": "{carbon.color.gray.30}", + "cds-g90": "{carbon.color.gray.30}", + "cds-g100": "{carbon.color.gray.30}" + }, + "key": "{color.palette.neutral-200}" + }, + "name": "token-color-palette-neutral-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-200" + ] + }, + { + "key": "{color.palette.neutral-100}", + "$type": "color", + "$value": "#e0e0e0", + "group": "palette", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#e0e0e0", + "cds-g100": "#e0e0e0" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.20}", + "group": "palette", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "{carbon.color.gray.20}", + "cds-g10": "{carbon.color.gray.20}", + "cds-g90": "{carbon.color.gray.20}", + "cds-g100": "{carbon.color.gray.20}" + }, + "key": "{color.palette.neutral-100}" + }, + "name": "token-color-palette-neutral-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-100" + ] + }, + { + "key": "{color.palette.neutral-50}", + "$type": "color", + "$value": "#f4f4f4", + "group": "palette", + "$modes": { + "default": "#fafafa", + "cds-g0": "#f4f4f4", + "cds-g10": "#f4f4f4", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.10}", + "group": "palette", + "$modes": { + "default": "#fafafa", + "cds-g0": "{carbon.color.gray.10}", + "cds-g10": "{carbon.color.gray.10}", + "cds-g90": "{carbon.color.gray.10}", + "cds-g100": "{carbon.color.gray.10}" + }, + "key": "{color.palette.neutral-50}" + }, + "name": "token-color-palette-neutral-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-50" + ] + }, + { + "key": "{color.palette.neutral-0}", + "$type": "color", + "$value": "#ffffff", + "group": "palette", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.white.0}", + "group": "palette", + "$modes": { + "default": "#ffffff", + "cds-g0": "{carbon.color.white.0}", + "cds-g10": "{carbon.color.white.0}", + "cds-g90": "{carbon.color.white.0}", + "cds-g100": "{carbon.color.white.0}" + }, + "key": "{color.palette.neutral-0}" + }, + "name": "token-color-palette-neutral-0", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-0" + ] + }, + { + "key": "{color.palette.alpha-300}", + "$type": "color", + "$value": "#6f6f6f", + "group": "palette", + "$modes": { + "default": "#393939", + "cds-g0": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#6f6f6f", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.60}", + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-600}", + "cds-g0": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.60}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "key": "{color.palette.alpha-300}" + }, + "name": "token-color-palette-alpha-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "alpha-300" + ] + }, + { + "key": "{color.palette.alpha-200}", + "$type": "color", + "$value": "#525252", + "group": "palette", + "$modes": { + "default": "#525252", + "cds-g0": { + "$value": "#c6c6c6", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#e0e0e0", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#6f6f6f", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#525252", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.70}", + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": { + "$value": "{carbon.color.gray.30}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.20}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.60}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.70}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "key": "{color.palette.alpha-200}" + }, + "name": "token-color-palette-alpha-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "alpha-200" + ] + }, + { + "key": "{color.palette.alpha-100}", + "$type": "color", + "$value": "#393939", + "group": "palette", + "$modes": { + "default": "#525252", + "cds-g0": { + "$value": "#e0e0e0", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#c6c6c6", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#525252", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#393939", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.80}", + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": { + "$value": "{carbon.color.gray.20}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.30}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.70}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.80}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "key": "{color.palette.alpha-100}" + }, + "name": "token-color-palette-alpha-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "alpha-100" + ] + }, + { + "key": "{color.border.primary}", + "$type": "color", + "$value": "#6f6f6f", + "group": "semantic", + "$modes": { + "default": "#525252", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.borderSubtle03}", + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-200}", + "cds-g0": "{carbon.themes.white.borderSubtle03}", + "cds-g10": "{carbon.themes.g10.borderSubtle03}", + "cds-g90": "{carbon.themes.g90.borderSubtle03}", + "cds-g100": "{carbon.themes.g100.borderSubtle03}" + }, + "key": "{color.border.primary}" + }, + "name": "token-color-border-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "primary" + ] + }, + { + "key": "{color.border.faint}", + "$type": "color", + "$value": "#393939", + "group": "semantic", + "$modes": { + "default": "#393939", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.borderSubtle00}", + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-100}", + "cds-g0": "{carbon.themes.white.borderSubtle00}", + "cds-g10": "{carbon.themes.g10.borderSubtle00}", + "cds-g90": "{carbon.themes.g90.borderSubtle00}", + "cds-g100": "{carbon.themes.g100.borderSubtle00}" + }, + "key": "{color.border.faint}" + }, + "name": "token-color-border-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "faint" + ] + }, + { + "key": "{color.border.strong}", + "$type": "color", + "$value": "#6f6f6f", + "group": "semantic", + "$modes": { + "default": "#6f6f6f", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.borderStrong01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-300}", + "cds-g0": "{carbon.themes.white.borderStrong01}", + "cds-g10": "{carbon.themes.g10.borderStrong01}", + "cds-g90": "{carbon.themes.g90.borderStrong01}", + "cds-g100": "{carbon.themes.g100.borderStrong01}" + }, + "key": "{color.border.strong}" + }, + "name": "token-color-border-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "strong" + ] + }, + { + "key": "{color.border.action}", + "$type": "color", + "$value": "#4589ff", + "group": "semantic", + "$modes": { + "default": "#d0e2ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.borderInteractive}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-100}", + "cds-g0": "{carbon.themes.white.borderInteractive}", + "cds-g10": "{carbon.themes.g10.borderInteractive}", + "cds-g90": "{carbon.themes.g90.borderInteractive}", + "cds-g100": "{carbon.themes.g100.borderInteractive}" + }, + "key": "{color.border.action}" + }, + "name": "token-color-border-action", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "action" + ] + }, + { + "key": "{color.border.highlight}", + "$type": "color", + "$value": "#a56eff", + "group": "semantic", + "$modes": { + "default": "#e8daff", + "cds-g0": "#be95ff", + "cds-g10": "#be95ff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-100}", + "cds-g0": "{carbon.color.purple.40}", + "cds-g10": "{carbon.color.purple.40}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, + "key": "{color.border.highlight}" + }, + "name": "token-color-border-highlight", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "highlight" + ] + }, + { + "key": "{color.border.success}", + "$type": "color", + "$value": "#24a148", + "group": "semantic", + "$modes": { + "default": "#a7f0ba", + "cds-g0": "#42be65", + "cds-g10": "#42be65", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-100}", + "cds-g0": "{carbon.color.green.40}", + "cds-g10": "{carbon.color.green.40}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, + "key": "{color.border.success}" + }, + "name": "token-color-border-success", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "success" + ] + }, + { + "key": "{color.border.warning}", + "$type": "color", + "$value": "#b28600", + "group": "semantic", + "$modes": { + "default": "#ffd9be", + "cds-g0": "#d2a106", + "cds-g10": "#d2a106", + "cds-g90": "#b28600", + "cds-g100": "#b28600" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.yellow.40}", + "cds-g10": "{carbon.color.yellow.40}", + "cds-g90": "{carbon.color.yellow.50}", + "cds-g100": "{carbon.color.yellow.50}" + }, + "key": "{color.border.warning}" + }, + "name": "token-color-border-warning", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "warning" + ] + }, + { + "key": "{color.border.critical}", + "$type": "color", + "$value": "#fa4d56", + "group": "semantic", + "$modes": { + "default": "#ffd7d9", + "cds-g0": "#ff8389", + "cds-g10": "#ff8389", + "cds-g90": "#fa4d56", + "cds-g100": "#fa4d56" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-100}", + "cds-g0": "{carbon.color.red.40}", + "cds-g10": "{carbon.color.red.40}", + "cds-g90": "{carbon.color.red.50}", + "cds-g100": "{carbon.color.red.50}" + }, + "key": "{color.border.critical}" + }, + "name": "token-color-border-critical", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "critical" + ] + }, + { + "key": "{color.focus.action.internal}", + "$type": "color", + "$value": "#161616", + "group": "semantic", + "$modes": { + "default": "#0043ce", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.focusInset}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, + "key": "{color.focus.action.internal}" + }, + "name": "token-color-focus-action-internal", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "action", + "internal" + ] + }, + { + "key": "{color.focus.action.external}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.focus}", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{color.focus.action.external}" + }, + "name": "token-color-focus-action-external", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "action", + "external" + ] + }, + { + "key": "{color.focus.critical.internal}", + "$type": "color", + "$value": "#161616", + "group": "semantic", + "$modes": { + "default": "#a2191f", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.focusInset}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, + "key": "{color.focus.critical.internal}" + }, + "name": "token-color-focus-critical-internal", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "critical", + "internal" + ] + }, + { + "key": "{color.focus.critical.external}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#dd7578", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.focus}", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#dd7578", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{color.focus.critical.external}" + }, + "name": "token-color-focus-critical-external", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "critical", + "external" + ] + }, + { + "key": "{color.foreground.strong}", + "$type": "color", + "$value": "#f4f4f4", + "group": "semantic", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textPrimary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{color.foreground.strong}" + }, + "name": "token-color-foreground-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "strong" + ] + }, + { + "key": "{color.foreground.primary}", + "$type": "color", + "$value": "#f4f4f4", + "group": "semantic", + "$modes": { + "default": "#393939", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textPrimary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-600}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{color.foreground.primary}" + }, + "name": "token-color-foreground-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "primary" + ] + }, + { + "key": "{color.foreground.faint}", + "$type": "color", + "$value": "#c6c6c6", + "group": "semantic", + "$modes": { + "default": "#525252", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textSecondary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{color.foreground.faint}" + }, + "name": "token-color-foreground-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "faint" + ] + }, + { + "key": "{color.foreground.high-contrast}", + "$type": "color", + "$value": "#161616", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textInverse}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{color.foreground.high-contrast}" + }, + "name": "token-color-foreground-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "high-contrast" + ] + }, + { + "key": "{color.foreground.disabled}", + "$type": "color", + "$value": "rgba(244, 244, 244, 0.25)", + "group": "semantic", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "rgba(22, 22, 22, 0.25)", + "cds-g10": "rgba(22, 22, 22, 0.25)", + "cds-g90": "rgba(244, 244, 244, 0.25)", + "cds-g100": "rgba(244, 244, 244, 0.25)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textDisabled}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textDisabled}", + "cds-g10": "{carbon.themes.g10.textDisabled}", + "cds-g90": "{carbon.themes.g90.textDisabled}", + "cds-g100": "{carbon.themes.g100.textDisabled}" + }, + "key": "{color.foreground.disabled}" + }, + "name": "token-color-foreground-disabled", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "disabled" + ] + }, + { + "key": "{color.foreground.action}", + "$type": "color", + "$value": "#78a9ff", + "group": "semantic", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#78a9ff", + "cds-g100": "#78a9ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.linkPrimary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.white.linkPrimary}", + "cds-g10": "{carbon.themes.g10.linkPrimary}", + "cds-g90": "{carbon.themes.g90.linkPrimary}", + "cds-g100": "{carbon.themes.g100.linkPrimary}" + }, + "key": "{color.foreground.action}" + }, + "name": "token-color-foreground-action", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "action" + ] + }, + { + "key": "{color.foreground.action-hover}", + "$type": "color", + "$value": "#a6c8ff", + "group": "semantic", + "$modes": { + "default": "#0043ce", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.linkPrimaryHover}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, + "key": "{color.foreground.action-hover}" + }, + "name": "token-color-foreground-action-hover", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "action-hover" + ] + }, + { + "key": "{color.foreground.action-active}", + "$type": "color", + "$value": "#a6c8ff", + "group": "semantic", + "$modes": { + "default": "#002d9c", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.linkPrimaryHover}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, + "key": "{color.foreground.action-active}" + }, + "name": "token-color-foreground-action-active", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "action-active" + ] + }, + { + "key": "{color.foreground.highlight}", + "$type": "color", + "$value": "#be95ff", + "group": "semantic", + "$modes": { + "default": "#a56eff", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, + "key": "{color.foreground.highlight}" + }, + "name": "token-color-foreground-highlight", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "highlight" + ] + }, + { + "key": "{color.foreground.highlight-on-surface}", + "$type": "color", + "$value": "#d4bbff", + "group": "semantic", + "$modes": { + "default": "#8a3ffc", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#d4bbff", + "cds-g100": "#d4bbff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.30}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-300}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.30}", + "cds-g100": "{carbon.color.purple.30}" + }, + "key": "{color.foreground.highlight-on-surface}" + }, + "name": "token-color-foreground-highlight-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "highlight-on-surface" + ] + }, + { + "key": "{color.foreground.highlight-high-contrast}", + "$type": "color", + "$value": "#d4bbff", + "group": "semantic", + "$modes": { + "default": "#31135e", + "cds-g0": "#491d8b", + "cds-g10": "#491d8b", + "cds-g90": "#e8daff", + "cds-g100": "#d4bbff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.30}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-500}", + "cds-g0": "{carbon.color.purple.80}", + "cds-g10": "{carbon.color.purple.80}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.30}" + }, + "key": "{color.foreground.highlight-high-contrast}" + }, + "name": "token-color-foreground-highlight-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "highlight-high-contrast" + ] + }, + { + "key": "{color.foreground.success}", + "$type": "color", + "$value": "#42be65", + "group": "semantic", + "$modes": { + "default": "#24a148", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#42be65", + "cds-g100": "#42be65" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-200}", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.40}", + "cds-g100": "{carbon.color.green.40}" + }, + "key": "{color.foreground.success}" + }, + "name": "token-color-foreground-success", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "success" + ] + }, + { + "key": "{color.foreground.success-on-surface}", + "$type": "color", + "$value": "#6fdc8c", + "group": "semantic", + "$modes": { + "default": "#198038", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#6fdc8c", + "cds-g100": "#6fdc8c" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.30}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-300}", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.30}", + "cds-g100": "{carbon.color.green.30}" + }, + "key": "{color.foreground.success-on-surface}" + }, + "name": "token-color-foreground-success-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "success-on-surface" + ] + }, + { + "key": "{color.foreground.success-high-contrast}", + "$type": "color", + "$value": "#a7f0ba", + "group": "semantic", + "$modes": { + "default": "#044317", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.20}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-500}", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, + "key": "{color.foreground.success-high-contrast}" + }, + "name": "token-color-foreground-success-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "success-high-contrast" + ] + }, + { + "key": "{color.foreground.warning}", + "$type": "color", + "$value": "#d2a106", + "group": "semantic", + "$modes": { + "default": "#ba4e00", + "cds-g0": "#8e6a00", + "cds-g10": "#8e6a00", + "cds-g90": "#d2a106", + "cds-g100": "#d2a106" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.yellow.60}", + "cds-g10": "{carbon.color.yellow.60}", + "cds-g90": "{carbon.color.yellow.40}", + "cds-g100": "{carbon.color.yellow.40}" + }, + "key": "{color.foreground.warning}" + }, + "name": "token-color-foreground-warning", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "warning" + ] + }, + { + "key": "{color.foreground.warning-on-surface}", + "$type": "color", + "$value": "#f1c21b", + "group": "semantic", + "$modes": { + "default": "#8a3800", + "cds-g0": "#684e00", + "cds-g10": "#684e00", + "cds-g90": "#f1c21b", + "cds-g100": "#f1c21b" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.30}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-300}", + "cds-g0": "{carbon.color.yellow.70}", + "cds-g10": "{carbon.color.yellow.70}", + "cds-g90": "{carbon.color.yellow.30}", + "cds-g100": "{carbon.color.yellow.30}" + }, + "key": "{color.foreground.warning-on-surface}" + }, + "name": "token-color-foreground-warning-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "warning-on-surface" + ] + }, + { + "key": "{color.foreground.warning-high-contrast}", + "$type": "color", + "$value": "#fddc69", + "group": "semantic", + "$modes": { + "default": "#3e1a00", + "cds-g0": "#483700", + "cds-g10": "#483700", + "cds-g90": "#fddc69", + "cds-g100": "#fddc69" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.20}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-500}", + "cds-g0": "{carbon.color.yellow.80}", + "cds-g10": "{carbon.color.yellow.80}", + "cds-g90": "{carbon.color.yellow.20}", + "cds-g100": "{carbon.color.yellow.20}" + }, + "key": "{color.foreground.warning-high-contrast}" + }, + "name": "token-color-foreground-warning-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "warning-high-contrast" + ] + }, + { + "key": "{color.foreground.critical}", + "$type": "color", + "$value": "#ff8389", + "group": "semantic", + "$modes": { + "default": "#da1e28", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#ff8389", + "cds-g100": "#ff8389" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-200}", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.40}", + "cds-g100": "{carbon.color.red.40}" + }, + "key": "{color.foreground.critical}" + }, + "name": "token-color-foreground-critical", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "critical" + ] + }, + { + "key": "{color.foreground.critical-on-surface}", + "$type": "color", + "$value": "#ffb3b8", + "group": "semantic", + "$modes": { + "default": "#a2191f", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffb3b8", + "cds-g100": "#ffb3b8" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.30}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.30}", + "cds-g100": "{carbon.color.red.30}" + }, + "key": "{color.foreground.critical-on-surface}" + }, + "name": "token-color-foreground-critical-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "critical-on-surface" + ] + }, + { + "key": "{color.foreground.critical-high-contrast}", + "$type": "color", + "$value": "#ffd7d9", + "group": "semantic", + "$modes": { + "default": "#520408", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.20}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-500}", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, + "key": "{color.foreground.critical-high-contrast}" + }, + "name": "token-color-foreground-critical-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "critical-high-contrast" + ] + }, + { + "key": "{color.page.primary}", + "$type": "color", + "$value": "#161616", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.background}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, + "key": "{color.page.primary}" + }, + "name": "token-color-page-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "page", + "primary" + ] + }, + { + "key": "{color.page.faint}", + "$type": "color", + "$value": "#161616", + "group": "semantic", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.background}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, + "key": "{color.page.faint}" + }, + "name": "token-color-page-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "page", + "faint" + ] + }, + { + "key": "{color.surface.primary}", + "$type": "color", + "$value": "#262626", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.layer01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, + "key": "{color.surface.primary}" + }, + "name": "token-color-surface-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "primary" + ] + }, + { + "key": "{color.surface.faint}", + "$type": "color", + "$value": "#262626", + "group": "semantic", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.layer01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, + "key": "{color.surface.faint}" + }, + "name": "token-color-surface-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "faint" + ] + }, + { + "key": "{color.surface.strong}", + "$type": "color", + "$value": "#393939", + "group": "semantic", + "$modes": { + "default": "#e0e0e0", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.layerAccent01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerAccent01}", + "cds-g10": "{carbon.themes.g10.layerAccent01}", + "cds-g90": "{carbon.themes.g90.layerAccent01}", + "cds-g100": "{carbon.themes.g100.layerAccent01}" + }, + "key": "{color.surface.strong}" + }, + "name": "token-color-surface-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "strong" + ] + }, + { + "key": "{color.surface.high-contrast}", + "$type": "color", + "$value": "#f4f4f4", + "group": "semantic", + "$modes": { + "default": "#161616", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.backgroundInverse}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "key": "{color.surface.high-contrast}" + }, + "name": "token-color-surface-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "high-contrast" + ] + }, + { + "key": "{color.surface.interactive}", + "$type": "color", + "$value": "#262626", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.layer01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, + "key": "{color.surface.interactive}" + }, + "name": "token-color-surface-interactive", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive" + ] + }, + { + "key": "{color.surface.interactive-hover}", + "$type": "color", + "$value": "#333333", + "group": "semantic", + "$modes": { + "default": "#e0e0e0", + "cds-g0": "#e8e8e8", + "cds-g10": "#e8e8e8", + "cds-g90": "#474747", + "cds-g100": "#333333" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.layerHover01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerHover01}", + "cds-g10": "{carbon.themes.g10.layerHover01}", + "cds-g90": "{carbon.themes.g90.layerHover01}", + "cds-g100": "{carbon.themes.g100.layerHover01}" + }, + "key": "{color.surface.interactive-hover}" + }, + "name": "token-color-surface-interactive-hover", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive-hover" + ] + }, + { + "key": "{color.surface.interactive-active}", + "$type": "color", + "$value": "#525252", + "group": "semantic", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.layerActive01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.white.layerActive01}", + "cds-g10": "{carbon.themes.g10.layerActive01}", + "cds-g90": "{carbon.themes.g90.layerActive01}", + "cds-g100": "{carbon.themes.g100.layerActive01}" + }, + "key": "{color.surface.interactive-active}" + }, + "name": "token-color-surface-interactive-active", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive-active" + ] + }, + { + "key": "{color.surface.interactive-disabled}", + "$type": "color", + "$value": "#525252", + "group": "semantic", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.color.gray.30}", + "cds-g10": "{carbon.color.gray.30}", + "cds-g90": "{carbon.color.gray.60}", + "cds-g100": "{carbon.color.gray.70}" + }, + "key": "{color.surface.interactive-disabled}" + }, + "name": "token-color-surface-interactive-disabled", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive-disabled" + ] + }, + { + "key": "{color.surface.action}", + "$type": "color", + "$value": "#0043ce", + "group": "semantic", + "$modes": { + "default": "#edf5ff", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0f62fe", + "cds-g100": "#0043ce" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-50}", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.60}", + "cds-g100": "{carbon.color.blue.70}" + }, + "key": "{color.surface.action}" + }, + "name": "token-color-surface-action", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "action" + ] + }, + { + "key": "{color.surface.highlight}", + "$type": "color", + "$value": "#6929c4", + "group": "semantic", + "$modes": { + "default": "#f6f2ff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-50}", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, + "key": "{color.surface.highlight}" + }, + "name": "token-color-surface-highlight", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "highlight" + ] + }, + { + "key": "{color.surface.success}", + "$type": "color", + "$value": "#0e6027", + "group": "semantic", + "$modes": { + "default": "#defbe6", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-50}", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, + "key": "{color.surface.success}" + }, + "name": "token-color-surface-success", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "success" + ] + }, + { + "key": "{color.surface.warning}", + "$type": "color", + "$value": "#684e00", + "group": "semantic", + "$modes": { + "default": "#fff2e8", + "cds-g0": "#fcf4d6", + "cds-g10": "#fcf4d6", + "cds-g90": "#684e00", + "cds-g100": "#684e00" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-50}", + "cds-g0": "{carbon.color.yellow.10}", + "cds-g10": "{carbon.color.yellow.10}", + "cds-g90": "{carbon.color.yellow.70}", + "cds-g100": "{carbon.color.yellow.70}" + }, + "key": "{color.surface.warning}" + }, + "name": "token-color-surface-warning", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "warning" + ] + }, + { + "key": "{color.surface.critical}", + "$type": "color", + "$value": "#a2191f", + "group": "semantic", + "$modes": { + "default": "#fff1f1", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-50}", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, + "key": "{color.surface.critical}" + }, + "name": "token-color-surface-critical", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "critical" + ] + }, + { + "key": "{color.hashicorp.brand}", + "$type": "color", + "$value": "#ffffff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.hashicorp-brand}", + "group": "branding", + "key": "{color.hashicorp.brand}" + }, + "name": "token-color-hashicorp-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "hashicorp", + "brand" + ] + }, + { + "key": "{color.boundary.brand}", + "$type": "color", + "$value": "#f24c53", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-brand}", + "group": "branding", + "key": "{color.boundary.brand}" + }, + "name": "token-color-boundary-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "brand" + ] + }, + { + "key": "{color.boundary.foreground}", + "$type": "color", + "$value": "#cf2d32", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-500}", + "group": "branding", + "key": "{color.boundary.foreground}" + }, + "name": "token-color-boundary-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "foreground" + ] + }, + { + "key": "{color.boundary.surface}", + "$type": "color", + "$value": "#ffecec", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-50}", + "group": "branding", + "key": "{color.boundary.surface}" + }, + "name": "token-color-boundary-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "surface" + ] + }, + { + "key": "{color.boundary.border}", + "$type": "color", + "$value": "#fbd7d8", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-100}", + "group": "branding", + "key": "{color.boundary.border}" + }, + "name": "token-color-boundary-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "border" + ] + }, + { + "key": "{color.boundary.gradient.primary.start}", + "$type": "color", + "$value": "#f97076", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-300}", + "group": "branding", + "key": "{color.boundary.gradient.primary.start}" + }, + "name": "token-color-boundary-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.boundary.gradient.primary.stop}", + "$type": "color", + "$value": "#db363b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-400}", + "group": "branding", + "key": "{color.boundary.gradient.primary.stop}" + }, + "name": "token-color-boundary-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.boundary.gradient.faint.start}", + "$type": "color", + "$value": "#fffafa", + "group": "branding", + "comment": "this is the 'boundary-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffafa", + "group": "branding", + "comment": "this is the 'boundary-50' value at 25% opacity on white", + "key": "{color.boundary.gradient.faint.start}" + }, + "name": "token-color-boundary-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.boundary.gradient.faint.stop}", + "$type": "color", + "$value": "#ffecec", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-50}", + "group": "branding", + "key": "{color.boundary.gradient.faint.stop}" + }, + "name": "token-color-boundary-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.consul.brand}", + "$type": "color", + "$value": "#e03875", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-brand}", + "group": "branding", + "key": "{color.consul.brand}" + }, + "name": "token-color-consul-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "brand" + ] + }, + { + "key": "{color.consul.foreground}", + "$type": "color", + "$value": "#d01c5b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-500}", + "group": "branding", + "key": "{color.consul.foreground}" + }, + "name": "token-color-consul-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "foreground" + ] + }, + { + "key": "{color.consul.surface}", + "$type": "color", + "$value": "#ffe9f1", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-50}", + "group": "branding", + "key": "{color.consul.surface}" + }, + "name": "token-color-consul-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "surface" + ] + }, + { + "key": "{color.consul.border}", + "$type": "color", + "$value": "#ffcede", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-100}", + "group": "branding", + "key": "{color.consul.border}" + }, + "name": "token-color-consul-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "border" + ] + }, + { + "key": "{color.consul.gradient.primary.start}", + "$type": "color", + "$value": "#ff99be", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-300}", + "group": "branding", + "key": "{color.consul.gradient.primary.start}" + }, + "name": "token-color-consul-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.consul.gradient.primary.stop}", + "$type": "color", + "$value": "#da306e", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-400}", + "group": "branding", + "key": "{color.consul.gradient.primary.stop}" + }, + "name": "token-color-consul-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.consul.gradient.faint.start}", + "$type": "color", + "$value": "#fff9fb", + "group": "branding", + "comment": "this is the 'consul-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fff9fb", + "group": "branding", + "comment": "this is the 'consul-50' value at 25% opacity on white", + "key": "{color.consul.gradient.faint.start}" + }, + "name": "token-color-consul-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.consul.gradient.faint.stop}", + "$type": "color", + "$value": "#ffe9f1", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-50}", + "group": "branding", + "key": "{color.consul.gradient.faint.stop}" + }, + "name": "token-color-consul-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.hcp.brand}", + "$type": "color", + "$value": "#ffffff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.hcp-brand}", + "group": "branding", + "key": "{color.hcp.brand}" + }, + "name": "token-color-hcp-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "hcp", + "brand" + ] + }, + { + "key": "{color.nomad.brand}", + "$type": "color", + "$value": "#06d092", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-brand}", + "group": "branding", + "key": "{color.nomad.brand}" + }, + "name": "token-color-nomad-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "brand" + ] + }, + { + "key": "{color.nomad.foreground}", + "$type": "color", + "$value": "#008661", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-500}", + "group": "branding", + "key": "{color.nomad.foreground}" + }, + "name": "token-color-nomad-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "foreground" + ] + }, + { + "key": "{color.nomad.surface}", + "$type": "color", + "$value": "#d3fdeb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-50}", + "group": "branding", + "key": "{color.nomad.surface}" + }, + "name": "token-color-nomad-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "surface" + ] + }, + { + "key": "{color.nomad.border}", + "$type": "color", + "$value": "#bff3dd", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-100}", + "group": "branding", + "key": "{color.nomad.border}" + }, + "name": "token-color-nomad-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "border" + ] + }, + { + "key": "{color.nomad.gradient.primary.start}", + "$type": "color", + "$value": "#bff3dd", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-100}", + "group": "branding", + "key": "{color.nomad.gradient.primary.start}" + }, + "name": "token-color-nomad-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.nomad.gradient.primary.stop}", + "$type": "color", + "$value": "#60dea9", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-200}", + "group": "branding", + "key": "{color.nomad.gradient.primary.stop}" + }, + "name": "token-color-nomad-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.nomad.gradient.faint.start}", + "$type": "color", + "$value": "#f3fff9", + "group": "branding", + "comment": "this is the 'nomad-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#f3fff9", + "group": "branding", + "comment": "this is the 'nomad-50' value at 25% opacity on white", + "key": "{color.nomad.gradient.faint.start}" + }, + "name": "token-color-nomad-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.nomad.gradient.faint.stop}", + "$type": "color", + "$value": "#d3fdeb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-50}", + "group": "branding", + "key": "{color.nomad.gradient.faint.stop}" + }, + "name": "token-color-nomad-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.packer.brand}", + "$type": "color", + "$value": "#02a8ef", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-brand}", + "group": "branding", + "key": "{color.packer.brand}" + }, + "name": "token-color-packer-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "brand" + ] + }, + { + "key": "{color.packer.foreground}", + "$type": "color", + "$value": "#007eb4", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-500}", + "group": "branding", + "key": "{color.packer.foreground}" + }, + "name": "token-color-packer-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "foreground" + ] + }, + { + "key": "{color.packer.surface}", + "$type": "color", + "$value": "#d4f2ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-50}", + "group": "branding", + "key": "{color.packer.surface}" + }, + "name": "token-color-packer-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "surface" + ] + }, + { + "key": "{color.packer.border}", + "$type": "color", + "$value": "#b4e4ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-100}", + "group": "branding", + "key": "{color.packer.border}" + }, + "name": "token-color-packer-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "border" + ] + }, + { + "key": "{color.packer.gradient.primary.start}", + "$type": "color", + "$value": "#b4e4ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-100}", + "group": "branding", + "key": "{color.packer.gradient.primary.start}" + }, + "name": "token-color-packer-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.packer.gradient.primary.stop}", + "$type": "color", + "$value": "#63d0ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-200}", + "group": "branding", + "key": "{color.packer.gradient.primary.stop}" + }, + "name": "token-color-packer-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.packer.gradient.faint.start}", + "$type": "color", + "$value": "#f3fcff", + "group": "branding", + "comment": "this is the 'packer-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#F3FCFF", + "group": "branding", + "comment": "this is the 'packer-50' value at 25% opacity on white", + "key": "{color.packer.gradient.faint.start}" + }, + "name": "token-color-packer-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.packer.gradient.faint.stop}", + "$type": "color", + "$value": "#d4f2ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-50}", + "group": "branding", + "key": "{color.packer.gradient.faint.stop}" + }, + "name": "token-color-packer-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.terraform.brand}", + "$type": "color", + "$value": "#7b42bc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-brand}", + "group": "branding", + "key": "{color.terraform.brand}" + }, + "name": "token-color-terraform-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "brand" + ] + }, + { + "key": "{color.terraform.brand-on-dark}", + "$type": "color", + "$value": "#a067da", + "group": "branding", + "comment": "this is an alternative brand color meant to be used on dark backgrounds", + "original": { + "$type": "color", + "$value": "#a067da", + "group": "branding", + "comment": "this is an alternative brand color meant to be used on dark backgrounds", + "key": "{color.terraform.brand-on-dark}" + }, + "name": "token-color-terraform-brand-on-dark", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "brand-on-dark" + ] + }, + { + "key": "{color.terraform.foreground}", + "$type": "color", + "$value": "#773cb4", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-500}", + "group": "branding", + "key": "{color.terraform.foreground}" + }, + "name": "token-color-terraform-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "foreground" + ] + }, + { + "key": "{color.terraform.surface}", + "$type": "color", + "$value": "#f4ecff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-50}", + "group": "branding", + "key": "{color.terraform.surface}" + }, + "name": "token-color-terraform-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "surface" + ] + }, + { + "key": "{color.terraform.border}", + "$type": "color", + "$value": "#ebdbfc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-100}", + "group": "branding", + "key": "{color.terraform.border}" + }, + "name": "token-color-terraform-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "border" + ] + }, + { + "key": "{color.terraform.gradient.primary.start}", + "$type": "color", + "$value": "#bb8deb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-300}", + "group": "branding", + "key": "{color.terraform.gradient.primary.start}" + }, + "name": "token-color-terraform-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.terraform.gradient.primary.stop}", + "$type": "color", + "$value": "#844fba", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-400}", + "group": "branding", + "key": "{color.terraform.gradient.primary.stop}" + }, + "name": "token-color-terraform-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.terraform.gradient.faint.start}", + "$type": "color", + "$value": "#fcfaff", + "group": "branding", + "comment": "this is the 'terraform-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fcfaff", + "group": "branding", + "comment": "this is the 'terraform-50' value at 25% opacity on white", + "key": "{color.terraform.gradient.faint.start}" + }, + "name": "token-color-terraform-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.terraform.gradient.faint.stop}", + "$type": "color", + "$value": "#f4ecff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-50}", + "group": "branding", + "key": "{color.terraform.gradient.faint.stop}" + }, + "name": "token-color-terraform-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.vagrant.brand}", + "$type": "color", + "$value": "#1868f2", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-brand}", + "group": "branding", + "key": "{color.vagrant.brand}" + }, + "name": "token-color-vagrant-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "brand" + ] + }, + { + "key": "{color.vagrant.foreground}", + "$type": "color", + "$value": "#1c61d8", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-500}", + "group": "branding", + "key": "{color.vagrant.foreground}" + }, + "name": "token-color-vagrant-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "foreground" + ] + }, + { + "key": "{color.vagrant.surface}", + "$type": "color", + "$value": "#d6ebff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-50}", + "group": "branding", + "key": "{color.vagrant.surface}" + }, + "name": "token-color-vagrant-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "surface" + ] + }, + { + "key": "{color.vagrant.border}", + "$type": "color", + "$value": "#c7dbfc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-100}", + "group": "branding", + "key": "{color.vagrant.border}" + }, + "name": "token-color-vagrant-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "border" + ] + }, + { + "key": "{color.vagrant.gradient.primary.start}", + "$type": "color", + "$value": "#639cff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-300}", + "group": "branding", + "key": "{color.vagrant.gradient.primary.start}" + }, + "name": "token-color-vagrant-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.vagrant.gradient.primary.stop}", + "$type": "color", + "$value": "#2e71e5", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-400}", + "group": "branding", + "key": "{color.vagrant.gradient.primary.stop}" + }, + "name": "token-color-vagrant-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.vagrant.gradient.faint.start}", + "$type": "color", + "$value": "#f4faff", + "group": "branding", + "comment": "this is the 'vagrant-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#f4faff", + "group": "branding", + "comment": "this is the 'vagrant-50' value at 25% opacity on white", + "key": "{color.vagrant.gradient.faint.start}" + }, + "name": "token-color-vagrant-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.vagrant.gradient.faint.stop}", + "$type": "color", + "$value": "#d6ebff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-50}", + "group": "branding", + "key": "{color.vagrant.gradient.faint.stop}" + }, + "name": "token-color-vagrant-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.vault-radar.brand}", + "$type": "color", + "$value": "#ffcf25", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-brand}", + "group": "branding", + "key": "{color.vault-radar.brand}" + }, + "name": "token-color-vault-radar-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "brand" + ] + }, + { + "key": "{color.vault-radar.brand-alt}", + "$type": "color", + "$value": "#ffffff", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work", + "original": { + "$type": "color", + "$value": "#FFF", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work", + "key": "{color.vault-radar.brand-alt}" + }, + "name": "token-color-vault-radar-brand-alt", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "brand-alt" + ] + }, + { + "key": "{color.vault-radar.foreground}", + "$type": "color", + "$value": "#9a6f00", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-500}", + "group": "branding", + "key": "{color.vault-radar.foreground}" + }, + "name": "token-color-vault-radar-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "foreground" + ] + }, + { + "key": "{color.vault-radar.surface}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-50}", + "group": "branding", + "key": "{color.vault-radar.surface}" + }, + "name": "token-color-vault-radar-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "surface" + ] + }, + { + "key": "{color.vault-radar.border}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-100}", + "group": "branding", + "key": "{color.vault-radar.border}" + }, + "name": "token-color-vault-radar-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "border" + ] + }, + { + "key": "{color.vault-radar.gradient.primary.start}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-100}", + "group": "branding", + "key": "{color.vault-radar.gradient.primary.start}" + }, + "name": "token-color-vault-radar-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.vault-radar.gradient.primary.stop}", + "$type": "color", + "$value": "#ffe543", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-200}", + "group": "branding", + "key": "{color.vault-radar.gradient.primary.stop}" + }, + "name": "token-color-vault-radar-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.vault-radar.gradient.faint.start}", + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-radar-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-radar-50' value at 25% opacity on white", + "key": "{color.vault-radar.gradient.faint.start}" + }, + "name": "token-color-vault-radar-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.vault-radar.gradient.faint.stop}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-50}", + "group": "branding", + "key": "{color.vault-radar.gradient.faint.stop}" + }, + "name": "token-color-vault-radar-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.vault-secrets.brand}", + "$type": "color", + "$value": "#ffcf25", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-brand}", + "group": "branding", + "key": "{color.vault-secrets.brand}" + }, + "name": "token-color-vault-secrets-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "brand" + ] + }, + { + "key": "{color.vault-secrets.brand-alt}", + "group": "branding", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work", + "original": { + "group": "branding", + "$type": "color", + "$value": "#FFF", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work", + "key": "{color.vault-secrets.brand-alt}" + }, + "name": "token-color-vault-secrets-brand-alt", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "brand-alt" + ] + }, + { + "key": "{color.vault-secrets.foreground}", + "$type": "color", + "$value": "#9a6f00", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-500}", + "group": "branding", + "key": "{color.vault-secrets.foreground}" + }, + "name": "token-color-vault-secrets-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "foreground" + ] + }, + { + "key": "{color.vault-secrets.surface}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-50}", + "group": "branding", + "key": "{color.vault-secrets.surface}" + }, + "name": "token-color-vault-secrets-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "surface" + ] + }, + { + "key": "{color.vault-secrets.border}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-100}", + "group": "branding", + "key": "{color.vault-secrets.border}" + }, + "name": "token-color-vault-secrets-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "border" + ] + }, + { + "key": "{color.vault-secrets.gradient.primary.start}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-100}", + "group": "branding", + "key": "{color.vault-secrets.gradient.primary.start}" + }, + "name": "token-color-vault-secrets-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.vault-secrets.gradient.primary.stop}", + "$type": "color", + "$value": "#ffe543", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-200}", + "group": "branding", + "key": "{color.vault-secrets.gradient.primary.stop}" + }, + "name": "token-color-vault-secrets-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.vault-secrets.gradient.faint.start}", + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-secrets-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-secrets-50' value at 25% opacity on white", + "key": "{color.vault-secrets.gradient.faint.start}" + }, + "name": "token-color-vault-secrets-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.vault-secrets.gradient.faint.stop}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-50}", + "group": "branding", + "key": "{color.vault-secrets.gradient.faint.stop}" + }, + "name": "token-color-vault-secrets-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.vault.brand}", + "$type": "color", + "$value": "#ffcf25", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-brand}", + "group": "branding", + "key": "{color.vault.brand}" + }, + "name": "token-color-vault-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "brand" + ] + }, + { + "key": "{color.vault.brand-alt}", + "$type": "color", + "$value": "#ffffff", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work", + "original": { + "$type": "color", + "$value": "#FFF", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work", + "key": "{color.vault.brand-alt}" + }, + "name": "token-color-vault-brand-alt", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "brand-alt" + ] + }, + { + "key": "{color.vault.foreground}", + "$type": "color", + "$value": "#9a6f00", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-500}", + "group": "branding", + "key": "{color.vault.foreground}" + }, + "name": "token-color-vault-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "foreground" + ] + }, + { + "key": "{color.vault.surface}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-50}", + "group": "branding", + "key": "{color.vault.surface}" + }, + "name": "token-color-vault-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "surface" + ] + }, + { + "key": "{color.vault.border}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-100}", + "group": "branding", + "key": "{color.vault.border}" + }, + "name": "token-color-vault-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "border" + ] + }, + { + "key": "{color.vault.gradient.primary.start}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-100}", + "group": "branding", + "key": "{color.vault.gradient.primary.start}" + }, + "name": "token-color-vault-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.vault.gradient.primary.stop}", + "$type": "color", + "$value": "#ffe543", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-200}", + "group": "branding", + "key": "{color.vault.gradient.primary.stop}" + }, + "name": "token-color-vault-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.vault.gradient.faint.start}", + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-50' value at 25% opacity on white", + "key": "{color.vault.gradient.faint.start}" + }, + "name": "token-color-vault-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.vault.gradient.faint.stop}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-50}", + "group": "branding", + "key": "{color.vault.gradient.faint.stop}" + }, + "name": "token-color-vault-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.waypoint.brand}", + "$type": "color", + "$value": "#14c6cb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-brand}", + "group": "branding", + "key": "{color.waypoint.brand}" + }, + "name": "token-color-waypoint-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "brand" + ] + }, + { + "key": "{color.waypoint.foreground}", + "$type": "color", + "$value": "#008196", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-500}", + "group": "branding", + "key": "{color.waypoint.foreground}" + }, + "name": "token-color-waypoint-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "foreground" + ] + }, + { + "key": "{color.waypoint.surface}", + "$type": "color", + "$value": "#e0fcff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-50}", + "group": "branding", + "key": "{color.waypoint.surface}" + }, + "name": "token-color-waypoint-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "surface" + ] + }, + { + "key": "{color.waypoint.border}", + "$type": "color", + "$value": "#cbf1f3", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-100}", + "group": "branding", + "key": "{color.waypoint.border}" + }, + "name": "token-color-waypoint-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "border" + ] + }, + { + "key": "{color.waypoint.gradient.primary.start}", + "$type": "color", + "$value": "#cbf1f3", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-100}", + "group": "branding", + "key": "{color.waypoint.gradient.primary.start}" + }, + "name": "token-color-waypoint-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.waypoint.gradient.primary.stop}", + "$type": "color", + "$value": "#62d4dc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-200}", + "group": "branding", + "key": "{color.waypoint.gradient.primary.stop}" + }, + "name": "token-color-waypoint-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.waypoint.gradient.faint.start}", + "$type": "color", + "$value": "#f6feff", + "group": "branding", + "comment": "this is the 'waypoint-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#f6feff", + "group": "branding", + "comment": "this is the 'waypoint-50' value at 25% opacity on white", + "key": "{color.waypoint.gradient.faint.start}" + }, + "name": "token-color-waypoint-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.waypoint.gradient.faint.stop}", + "$type": "color", + "$value": "#e0fcff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-50}", + "group": "branding", + "key": "{color.waypoint.gradient.faint.stop}" + }, + "name": "token-color-waypoint-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{elevation.inset.box-shadow}", + "$value": "none", + "$modes": { + "default": "inset 0px 1px 2px 1px #5252521a", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.inset.box-shadow-01}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.inset.box-shadow}" + }, + "name": "token-elevation-inset-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "inset", + "box-shadow" + ] + }, + { + "key": "{elevation.low.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 1px 1px 0px #5252520d, 0px 2px 2px 0px #5252520d", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.low.box-shadow-01}, {elevation.low.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.low.box-shadow}" + }, + "name": "token-elevation-low-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "low", + "box-shadow" + ] + }, + { + "key": "{elevation.mid.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #5252521a, 0px 8px 16px -10px #52525233", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.mid.box-shadow-01}, {elevation.mid.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.mid.box-shadow}" + }, + "name": "token-elevation-mid-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "mid", + "box-shadow" + ] + }, + { + "key": "{elevation.high.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #52525226, 0px 16px 16px -10px #52525233", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.high.box-shadow-01}, {elevation.high.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.high.box-shadow}" + }, + "name": "token-elevation-high-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "high", + "box-shadow" + ] + }, + { + "key": "{elevation.higher.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #5252521a, 0px 12px 28px 0px #52525240", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.higher.box-shadow-01}, {elevation.higher.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.higher.box-shadow}" + }, + "name": "token-elevation-higher-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "higher", + "box-shadow" + ] + }, + { + "key": "{elevation.overlay.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #39393940, 0px 12px 24px 0px #39393959", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.overlay.box-shadow-01}, {elevation.overlay.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.overlay.box-shadow}" + }, + "name": "token-elevation-overlay-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "overlay", + "box-shadow" + ] + }, + { + "key": "{surface.inset.box-shadow}", + "$value": "none", + "$modes": { + "default": "inset 0 0 0 1px #5252524d, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.inset.box-shadow-border}, {elevation.inset.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.inset.box-shadow}" + }, + "name": "token-surface-inset-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "inset", + "box-shadow" + ] + }, + { + "key": "{surface.base.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525233", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.base.box-shadow-border}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.base.box-shadow}" + }, + "name": "token-surface-base-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "base", + "box-shadow" + ] + }, + { + "key": "{surface.low.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525226, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.low.box-shadow-border}, {elevation.low.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.low.box-shadow}" + }, + "name": "token-surface-low-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "low", + "box-shadow" + ] + }, + { + "key": "{surface.mid.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525226, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.mid.box-shadow-border}, {elevation.mid.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.mid.box-shadow}" + }, + "name": "token-surface-mid-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "mid", + "box-shadow" + ] + }, + { + "key": "{surface.high.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525240, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.high.box-shadow-border}, {elevation.high.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.high.box-shadow}" + }, + "name": "token-surface-high-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "high", + "box-shadow" + ] + }, + { + "key": "{surface.higher.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525233, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.higher.box-shadow-border}, {elevation.higher.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.higher.box-shadow}" + }, + "name": "token-surface-higher-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "higher", + "box-shadow" + ] + }, + { + "key": "{surface.overlay.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #39393940, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.overlay.box-shadow-border}, {elevation.overlay.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.overlay.box-shadow}" + }, + "name": "token-surface-overlay-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "overlay", + "box-shadow" + ] + }, + { + "key": "{focus-ring.action.box-shadow}", + "$value": "inset 0 0 0 1px #161616, 0 0 0 3px #ffffff", + "original": { + "$value": "{focus-ring.action.internal-box-shadow}, {focus-ring.action.external-box-shadow}", + "key": "{focus-ring.action.box-shadow}" + }, + "name": "token-focus-ring-action-box-shadow", + "attributes": { + "category": "focus-ring" + }, + "path": [ + "focus-ring", + "action", + "box-shadow" + ] + }, + { + "key": "{focus-ring.critical.box-shadow}", + "$value": "inset 0 0 0 1px #161616, 0 0 0 3px #ffffff", + "original": { + "$value": "{focus-ring.critical.internal-box-shadow}, {focus-ring.critical.external-box-shadow}", + "key": "{focus-ring.critical.box-shadow}" + }, + "name": "token-focus-ring-critical-box-shadow", + "attributes": { + "category": "focus-ring" + }, + "path": [ + "focus-ring", + "critical", + "box-shadow" + ] + }, + { + "key": "{app-footer.focus.color.action.internal}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "var(--token-color-focus-action-internal)", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.focus}", + "$modes": { + "default": "var(--token-color-focus-action-internal)", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{app-footer.focus.color.action.internal}" + }, + "name": "token-app-footer-focus-color-action-internal", + "attributes": { + "category": "app-footer" + }, + "path": [ + "app-footer", + "focus", + "color", + "action", + "internal" + ] + }, + { + "key": "{app-header.height}", + "$type": "dimension", + "$value": "60px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "60", + "unit": "px", + "key": "{app-header.height}" + }, + "name": "token-app-header-height", + "attributes": { + "category": "app-header" + }, + "path": [ + "app-header", + "height" + ] + }, + { + "key": "{app-header.home-link.size}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{app-header.home-link.size}" + }, + "name": "token-app-header-home-link-size", + "attributes": { + "category": "app-header" + }, + "path": [ + "app-header", + "home-link", + "size" + ] + }, + { + "key": "{app-header.logo.size}", + "$type": "dimension", + "$value": "28px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "28", + "unit": "px", + "key": "{app-header.logo.size}" + }, + "name": "token-app-header-logo-size", + "attributes": { + "category": "app-header" + }, + "path": [ + "app-header", + "logo", + "size" + ] + }, + { + "key": "{app-side-nav.wrapper.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{app-side-nav.wrapper.border.width}" + }, + "name": "token-app-side-nav-wrapper-border-width", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "border", + "width" + ] + }, + { + "key": "{app-side-nav.wrapper.border.color}", + "$type": "color", + "$value": "var(--token-color-palette-neutral-200)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-palette-neutral-200)", + "group": "components", + "key": "{app-side-nav.wrapper.border.color}" + }, + "name": "token-app-side-nav-wrapper-border-color", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "border", + "color" + ] + }, + { + "key": "{app-side-nav.wrapper.padding.horizontal}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.horizontal}" + }, + "name": "token-app-side-nav-wrapper-padding-horizontal", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "horizontal" + ] + }, + { + "key": "{app-side-nav.wrapper.padding.vertical}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.vertical}" + }, + "name": "token-app-side-nav-wrapper-padding-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "vertical" + ] + }, + { + "key": "{app-side-nav.wrapper.padding.horizontal-minimized}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.horizontal-minimized}" + }, + "name": "token-app-side-nav-wrapper-padding-horizontal-minimized", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "horizontal-minimized" + ] + }, + { + "key": "{app-side-nav.wrapper.padding.vertical-minimized}", + "$type": "dimension", + "$value": "22px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "22", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.vertical-minimized}" + }, + "name": "token-app-side-nav-wrapper-padding-vertical-minimized", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "vertical-minimized" + ] + }, + { + "key": "{app-side-nav.toggle-button.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{app-side-nav.toggle-button.border.radius}" + }, + "name": "token-app-side-nav-toggle-button-border-radius", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "toggle-button", + "border", + "radius" + ] + }, + { + "key": "{app-side-nav.header.home-link.padding}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{app-side-nav.header.home-link.padding}" + }, + "name": "token-app-side-nav-header-home-link-padding", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "home-link", + "padding" + ] + }, + { + "key": "{app-side-nav.header.home-link.logo-size}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{app-side-nav.header.home-link.logo-size}" + }, + "name": "token-app-side-nav-header-home-link-logo-size", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "home-link", + "logo-size" + ] + }, + { + "key": "{app-side-nav.header.home-link.logo-size-minimized}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{app-side-nav.header.home-link.logo-size-minimized}" + }, + "name": "token-app-side-nav-header-home-link-logo-size-minimized", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "home-link", + "logo-size-minimized" + ] + }, + { + "key": "{app-side-nav.header.actions.spacing}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.header.actions.spacing}" + }, + "name": "token-app-side-nav-header-actions-spacing", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "actions", + "spacing" + ] + }, + { + "key": "{app-side-nav.body.list.margin-vertical}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{app-side-nav.body.list.margin-vertical}" + }, + "name": "token-app-side-nav-body-list-margin-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list", + "margin-vertical" + ] + }, + { + "key": "{app-side-nav.body.list-item.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{app-side-nav.body.list-item.height}" + }, + "name": "token-app-side-nav-body-list-item-height", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "height" + ] + }, + { + "key": "{app-side-nav.body.list-item.padding.horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.body.list-item.padding.horizontal}" + }, + "name": "token-app-side-nav-body-list-item-padding-horizontal", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "padding", + "horizontal" + ] + }, + { + "key": "{app-side-nav.body.list-item.padding.vertical}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{app-side-nav.body.list-item.padding.vertical}" + }, + "name": "token-app-side-nav-body-list-item-padding-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "padding", + "vertical" + ] + }, + { + "key": "{app-side-nav.body.list-item.spacing-vertical}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{app-side-nav.body.list-item.spacing-vertical}" + }, + "name": "token-app-side-nav-body-list-item-spacing-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "spacing-vertical" + ] + }, + { + "key": "{app-side-nav.body.list-item.content-spacing-horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.body.list-item.content-spacing-horizontal}" + }, + "name": "token-app-side-nav-body-list-item-content-spacing-horizontal", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "content-spacing-horizontal" + ] + }, + { + "key": "{app-side-nav.body.list-item.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{app-side-nav.body.list-item.border-radius}" + }, + "name": "token-app-side-nav-body-list-item-border-radius", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "border-radius" + ] + }, + { + "key": "{app-side-nav.color.foreground.primary}", + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "key": "{app-side-nav.color.foreground.primary}" + }, + "name": "token-app-side-nav-color-foreground-primary", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "foreground", + "primary" + ] + }, + { + "key": "{app-side-nav.color.foreground.strong}", + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "key": "{app-side-nav.color.foreground.strong}" + }, + "name": "token-app-side-nav-color-foreground-strong", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "foreground", + "strong" + ] + }, + { + "key": "{app-side-nav.color.foreground.faint}", + "$type": "color", + "$value": "var(--token-color-foreground-faint)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-foreground-faint)", + "group": "components", + "key": "{app-side-nav.color.foreground.faint}" + }, + "name": "token-app-side-nav-color-foreground-faint", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "foreground", + "faint" + ] + }, + { + "key": "{app-side-nav.color.surface.primary}", + "$type": "color", + "$value": "var(--token-color-surface-faint)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-surface-faint)", + "group": "components", + "key": "{app-side-nav.color.surface.primary}" + }, + "name": "token-app-side-nav-color-surface-primary", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "surface", + "primary" + ] + }, + { + "key": "{app-side-nav.color.surface.interactive-hover}", + "$type": "color", + "$value": "var(--token-color-surface-interactive-hover)", + "group": "semantic", + "original": { + "$type": "color", + "$value": "var(--token-color-surface-interactive-hover)", + "group": "semantic", + "key": "{app-side-nav.color.surface.interactive-hover}" + }, + "name": "token-app-side-nav-color-surface-interactive-hover", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "surface", + "interactive-hover" + ] + }, + { + "key": "{app-side-nav.color.surface.interactive-active}", + "$type": "color", + "$value": "var(--token-color-palette-neutral-300)", + "group": "semantic", + "original": { + "$type": "color", + "$value": "var(--token-color-palette-neutral-300)", + "group": "semantic", + "key": "{app-side-nav.color.surface.interactive-active}" + }, + "name": "token-app-side-nav-color-surface-interactive-active", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "surface", + "interactive-active" + ] + }, + { + "key": "{badge-count.padding.horizontal.small}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge-count.padding.horizontal.small}" + }, + "name": "token-badge-count-padding-horizontal-small", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "small" + ] + }, + { + "key": "{badge-count.padding.horizontal.medium}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge-count.padding.horizontal.medium}" + }, + "name": "token-badge-count-padding-horizontal-medium", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "medium" + ] + }, + { + "key": "{badge-count.padding.horizontal.large}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge-count.padding.horizontal.large}" + }, + "name": "token-badge-count-padding-horizontal-large", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "large" + ] + }, + { + "key": "{badge.height.small}", + "$type": "dimension", + "$value": "18px", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "18", + "cds-g10": "18", + "cds-g90": "18", + "cds-g100": "18" + }, + "original": { + "$type": "dimension", + "$value": "18", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "18", + "cds-g10": "18", + "cds-g90": "18", + "cds-g100": "18" + }, + "key": "{badge.height.small}" + }, + "name": "token-badge-height-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "small" + ] + }, + { + "key": "{badge.height.medium}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{badge.height.medium}" + }, + "name": "token-badge-height-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "medium" + ] + }, + { + "key": "{badge.height.large}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{badge.height.large}" + }, + "name": "token-badge-height-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "large" + ] + }, + { + "key": "{badge.padding.horizontal.small}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge.padding.horizontal.small}" + }, + "name": "token-badge-padding-horizontal-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "small" + ] + }, + { + "key": "{badge.padding.horizontal.medium}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge.padding.horizontal.medium}" + }, + "name": "token-badge-padding-horizontal-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "medium" + ] + }, + { + "key": "{badge.padding.horizontal.large}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.padding.horizontal.large}" + }, + "name": "token-badge-padding-horizontal-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "large" + ] + }, + { + "key": "{badge.padding.vertical.small}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "$modes": { + "default": "2", + "cds-g0": "1", + "cds-g10": "1", + "cds-g90": "1", + "cds-g100": "1" + }, + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "$modes": { + "default": "2", + "cds-g0": "1", + "cds-g10": "1", + "cds-g90": "1", + "cds-g100": "1" + }, + "key": "{badge.padding.vertical.small}" + }, + "name": "token-badge-padding-vertical-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "small" + ] + }, + { + "key": "{badge.padding.vertical.medium}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{badge.padding.vertical.medium}" + }, + "name": "token-badge-padding-vertical-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "medium" + ] + }, + { + "key": "{badge.padding.vertical.large}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{badge.padding.vertical.large}" + }, + "name": "token-badge-padding-vertical-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "large" + ] + }, + { + "key": "{badge.gap.small}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.small}" + }, + "name": "token-badge-gap-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "small" + ] + }, + { + "key": "{badge.gap.medium}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.medium}" + }, + "name": "token-badge-gap-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "medium" + ] + }, + { + "key": "{badge.gap.large}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.large}" + }, + "name": "token-badge-gap-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "large" + ] + }, + { + "key": "{badge.typography.font-size.small}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "12", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.small}" + }, + "name": "token-badge-typography-font-size-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "small" + ] + }, + { + "key": "{badge.typography.font-size.medium}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "12", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.medium}" + }, + "name": "token-badge-typography-font-size-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "medium" + ] + }, + { + "key": "{badge.typography.font-size.large}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "12", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.large}" + }, + "name": "token-badge-typography-font-size-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "large" + ] + }, + { + "key": "{badge.typography.line-height.small}", + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "original": { + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "key": "{badge.typography.line-height.small}" + }, + "name": "token-badge-typography-line-height-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "small" + ] + }, + { + "key": "{badge.typography.line-height.medium}", + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "original": { + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "key": "{badge.typography.line-height.medium}" + }, + "name": "token-badge-typography-line-height-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "medium" + ] + }, + { + "key": "{badge.typography.line-height.large}", + "$type": "number", + "$value": 1, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1, + "cds-g10": 1, + "cds-g90": 1, + "cds-g100": 1 + }, + "original": { + "$type": "number", + "$value": 1, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1, + "cds-g10": 1, + "cds-g90": 1, + "cds-g100": 1 + }, + "key": "{badge.typography.line-height.large}" + }, + "name": "token-badge-typography-line-height-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "large" + ] + }, + { + "key": "{badge.foreground.color.neutral.filled}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g100}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral.filled}" + }, + "name": "token-badge-foreground-color-neutral-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "filled" + ] + }, + { + "key": "{badge.foreground.color.neutral.inverted}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.100}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.color.gray.20}", + "cds-g10": "{carbon.color.gray.20}", + "cds-g90": "{carbon.color.gray.100}", + "cds-g100": "{carbon.color.gray.100}" + }, + "key": "{badge.foreground.color.neutral.inverted}" + }, + "name": "token-badge-foreground-color-neutral-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.neutral.outlined}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g100}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral.outlined}" + }, + "name": "token-badge-foreground-color-neutral-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "outlined" + ] + }, + { + "key": "{badge.foreground.color.neutral-dark-mode.filled}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.neutral-dark-mode.filled}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "filled" + ] + }, + { + "key": "{badge.foreground.color.neutral-dark-mode.inverted}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g100}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral-dark-mode.inverted}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.neutral-dark-mode.outlined}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "comments": { + "cds": "In Figma the `cds` value uses a token `Tag/HighContrast/TagColor` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "comments": { + "cds": "In Figma the `cds` value uses a token `Tag/HighContrast/TagColor` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.neutral-dark-mode.outlined}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "outlined" + ] + }, + { + "key": "{badge.foreground.color.highlight.filled}", + "$type": "color", + "$value": "#e8daff", + "comment": "we don't use `highlight-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#6929c4", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorPurple.g100}", + "comment": "we don't use `highlight-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.purple-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorPurple.g100}" + }, + "key": "{badge.foreground.color.highlight.filled}" + }, + "name": "token-badge-foreground-color-highlight-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "filled" + ] + }, + { + "key": "{badge.foreground.color.highlight.inverted}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.highlight.inverted}" + }, + "name": "token-badge-foreground-color-highlight-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.highlight.outlined}", + "$type": "color", + "$value": "#e8daff", + "$modes": { + "default": "#be95ff", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorPurple.g100}", + "$modes": { + "default": "{color.foreground.highlight}", + "cds-g0": "{carbon.themes.tagTokens.tagColorPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorPurple.g100}" + }, + "key": "{badge.foreground.color.highlight.outlined}" + }, + "name": "token-badge-foreground-color-highlight-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "outlined" + ] + }, + { + "key": "{badge.foreground.color.success.filled}", + "$type": "color", + "$value": "#a7f0ba", + "comment": "we don't use `success-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#0e6027", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGreen.g100}", + "comment": "we don't use `success-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.green-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.foreground.color.success.filled}" + }, + "name": "token-badge-foreground-color-success-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "filled" + ] + }, + { + "key": "{badge.foreground.color.success.inverted}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.success.inverted}" + }, + "name": "token-badge-foreground-color-success-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.success.outlined}", + "$type": "color", + "$value": "#a7f0ba", + "$modes": { + "default": "#42be65", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGreen.g100}", + "$modes": { + "default": "{color.foreground.success}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.foreground.color.success.outlined}" + }, + "name": "token-badge-foreground-color-success-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "outlined" + ] + }, + { + "key": "{badge.foreground.color.warning.filled}", + "$type": "color", + "$value": "#ffd9be", + "$modes": { + "default": "#5e2900", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "hds": "we don't use `warning-on-surface` for accessibility (better contrast)", + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.20}", + "$modes": { + "default": "{color.palette.amber-400}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "hds": "we don't use `warning-on-surface` for accessibility (better contrast)", + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.warning.filled}" + }, + "name": "token-badge-foreground-color-warning-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "filled" + ] + }, + { + "key": "{badge.foreground.color.warning.inverted}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.warning.inverted}" + }, + "name": "token-badge-foreground-color-warning-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.warning.outlined}", + "$type": "color", + "$value": "#ffd9be", + "$modes": { + "default": "#d2a106", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.20}", + "$modes": { + "default": "{color.foreground.warning}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.warning.outlined}" + }, + "name": "token-badge-foreground-color-warning-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "outlined" + ] + }, + { + "key": "{badge.foreground.color.critical.filled}", + "$type": "color", + "$value": "#ffd7d9", + "comment": "we don't use `critical-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#750e13", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorRed.g100}", + "comment": "we don't use `critical-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.foreground.color.critical.filled}" + }, + "name": "token-badge-foreground-color-critical-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "filled" + ] + }, + { + "key": "{badge.foreground.color.critical.inverted}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.critical.inverted}" + }, + "name": "token-badge-foreground-color-critical-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.critical.outlined}", + "$type": "color", + "$value": "#ffd7d9", + "$modes": { + "default": "#ff8389", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorRed.g100}", + "$modes": { + "default": "{color.foreground.critical}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.foreground.color.critical.outlined}" + }, + "name": "token-badge-foreground-color-critical-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "outlined" + ] + }, + { + "key": "{badge.surface.color.neutral.filled}", + "$type": "color", + "$value": "#525252", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGray.g100}", + "$modes": { + "default": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{badge.surface.color.neutral.filled}" + }, + "name": "token-badge-surface-color-neutral-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "filled" + ] + }, + { + "key": "{badge.surface.color.neutral.inverted}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#525252", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead", + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.backgroundInverse}", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead", + "key": "{badge.surface.color.neutral.inverted}" + }, + "name": "token-badge-surface-color-neutral-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "inverted" + ] + }, + { + "key": "{badge.surface.color.neutral.outlined}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{badge.surface.color.neutral.outlined}" + }, + "name": "token-badge-surface-color-neutral-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "outlined" + ] + }, + { + "key": "{badge.surface.color.neutral-dark-mode.filled}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#525252", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component", + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.backgroundInverse}", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component", + "key": "{badge.surface.color.neutral-dark-mode.filled}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "filled" + ] + }, + { + "key": "{badge.surface.color.neutral-dark-mode.inverted}", + "$type": "color", + "$value": "#525252", + "$modes": { + "default": "#262626", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGray.g100}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{badge.surface.color.neutral-dark-mode.inverted}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "inverted" + ] + }, + { + "key": "{badge.surface.color.neutral-dark-mode.outlined}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{badge.surface.color.neutral-dark-mode.outlined}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "outlined" + ] + }, + { + "key": "{badge.surface.color.highlight.filled}", + "$type": "color", + "$value": "#6929c4", + "comment": "we don't use `surface-highlight` for accessibility (better contrast)", + "$modes": { + "default": "#e8daff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundPurple.g100}", + "comment": "we don't use `surface-highlight` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.purple-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundPurple.g100}" + }, + "key": "{badge.surface.color.highlight.filled}" + }, + "name": "token-badge-surface-color-highlight-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "highlight", + "filled" + ] + }, + { + "key": "{badge.surface.color.highlight.inverted}", + "$type": "color", + "$value": "#be95ff", + "$modes": { + "default": "#a56eff", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.40}", + "$modes": { + "default": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, + "key": "{badge.surface.color.highlight.inverted}" + }, + "name": "token-badge-surface-color-highlight-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "highlight", + "inverted" + ] + }, + { + "key": "{badge.surface.color.success.filled}", + "$type": "color", + "$value": "#0e6027", + "comment": "we don't use `surface-success` for accessibility (better contrast)", + "$modes": { + "default": "#a7f0ba", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGreen.g100}", + "comment": "we don't use `surface-success` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.green-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGreen.g100}" + }, + "key": "{badge.surface.color.success.filled}" + }, + "name": "token-badge-surface-color-success-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "success", + "filled" + ] + }, + { + "key": "{badge.surface.color.success.inverted}", + "$type": "color", + "$value": "#a7f0ba", + "$modes": { + "default": "#24a148", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGreen.g100}", + "$modes": { + "default": "{color.palette.green-200}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.surface.color.success.inverted}" + }, + "name": "token-badge-surface-color-success-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "success", + "inverted" + ] + }, + { + "key": "{badge.surface.color.warning.filled}", + "$type": "color", + "$value": "#8a3800", + "comment": "we don't use `surface-warning` for accessibility (better contrast)", + "$modes": { + "default": "#ffd9be", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.70}", + "comment": "we don't use `surface-warning` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.surface.color.warning.filled}" + }, + "name": "token-badge-surface-color-warning-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "warning", + "filled" + ] + }, + { + "key": "{badge.surface.color.warning.inverted}", + "$type": "color", + "$value": "#ffd9be", + "$modes": { + "default": "#ba4e00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.20}", + "$modes": { + "default": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.surface.color.warning.inverted}" + }, + "name": "token-badge-surface-color-warning-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "warning", + "inverted" + ] + }, + { + "key": "{badge.surface.color.critical.filled}", + "$type": "color", + "$value": "#a2191f", + "comment": "we don't use `surface-critical` for accessibility (better contrast)", + "$modes": { + "default": "#ffd7d9", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundRed.g100}", + "comment": "we don't use `surface-critical` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.red-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundRed.g100}" + }, + "key": "{badge.surface.color.critical.filled}" + }, + "name": "token-badge-surface-color-critical-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "critical", + "filled" + ] + }, + { + "key": "{badge.surface.color.critical.inverted}", + "$type": "color", + "$value": "#ffd7d9", + "$modes": { + "default": "#da1e28", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorRed.g100}", + "$modes": { + "default": "{color.palette.red-200}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.surface.color.critical.inverted}" + }, + "name": "token-badge-surface-color-critical-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "critical", + "inverted" + ] + }, + { + "key": "{badge.border.radius}", + "$type": "dimension", + "$value": "1000000000px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "1000000000px", + "cds-g10": "1000000000px", + "cds-g90": "1000000000px", + "cds-g100": "1000000000px" + }, + "original": { + "$type": "dimension", + "$value": "{border.radius.rounded}", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "{border.radius.rounded}", + "cds-g10": "{border.radius.rounded}", + "cds-g90": "{border.radius.rounded}", + "cds-g100": "{border.radius.rounded}" + }, + "key": "{badge.border.radius}" + }, + "name": "token-badge-border-radius", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "border", + "radius" + ] + }, + { + "key": "{badge.icon.size.small}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{badge.icon.size.small}" + }, + "name": "token-badge-icon-size-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "small" + ] + }, + { + "key": "{badge.icon.size.medium}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{badge.icon.size.medium}" + }, + "name": "token-badge-icon-size-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "medium" + ] + }, + { + "key": "{badge.icon.size.large}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{badge.icon.size.large}" + }, + "name": "token-badge-icon-size-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "large" + ] + }, + { + "key": "{button.height.small}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "$modes": { + "default": "28", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "$modes": { + "default": "28", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "key": "{button.height.small}" + }, + "name": "token-button-height-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "small" + ] + }, + { + "key": "{button.height.medium}", + "$type": "dimension", + "$value": "40px", + "unit": "px", + "$modes": { + "default": "36", + "cds-g0": "40", + "cds-g10": "40", + "cds-g90": "40", + "cds-g100": "40" + }, + "original": { + "$type": "dimension", + "$value": "40", + "unit": "px", + "$modes": { + "default": "36", + "cds-g0": "40", + "cds-g10": "40", + "cds-g90": "40", + "cds-g100": "40" + }, + "key": "{button.height.medium}" + }, + "name": "token-button-height-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "medium" + ] + }, + { + "key": "{button.height.large}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "$modes": { + "default": "48", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "$modes": { + "default": "48", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "key": "{button.height.large}" + }, + "name": "token-button-height-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "large" + ] + }, + { + "key": "{button.padding.horizontal.small}", + "$type": "dimension", + "$value": "15px", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "15", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.small}" + }, + "name": "token-button-padding-horizontal-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "small" + ] + }, + { + "key": "{button.padding.horizontal.medium}", + "$type": "dimension", + "$value": "15px", + "unit": "px", + "$modes": { + "default": "15", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "15", + "unit": "px", + "$modes": { + "default": "15", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.medium}" + }, + "name": "token-button-padding-horizontal-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "medium" + ] + }, + { + "key": "{button.padding.horizontal.large}", + "$type": "dimension", + "$value": "15px", + "unit": "px", + "$modes": { + "default": "19", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "15", + "unit": "px", + "$modes": { + "default": "19", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.large}" + }, + "name": "token-button-padding-horizontal-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "large" + ] + }, + { + "key": "{button.padding.vertical.small}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.small}" + }, + "name": "token-button-padding-vertical-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "small" + ] + }, + { + "key": "{button.padding.vertical.medium}", + "$type": "dimension", + "$value": "10px", + "unit": "px", + "$modes": { + "default": "9", + "cds-g0": "10", + "cds-g10": "10", + "cds-g90": "10", + "cds-g100": "10" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "10", + "unit": "px", + "$modes": { + "default": "9", + "cds-g0": "10", + "cds-g10": "10", + "cds-g90": "10", + "cds-g100": "10" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.medium}" + }, + "name": "token-button-padding-vertical-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "medium" + ] + }, + { + "key": "{button.padding.vertical.large}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "14", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.large}" + }, + "name": "token-button-padding-vertical-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "large" + ] + }, + { + "key": "{button.gap}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "key": "{button.gap}" + }, + "name": "token-button-gap", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "gap" + ] + }, + { + "key": "{button.typography.font-size.small}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.small}" + }, + "name": "token-button-typography-font-size-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "small" + ] + }, + { + "key": "{button.typography.font-size.medium}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.medium}" + }, + "name": "token-button-typography-font-size-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "medium" + ] + }, + { + "key": "{button.typography.font-size.large}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.large}" + }, + "name": "token-button-typography-font-size-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "large" + ] + }, + { + "key": "{button.typography.line-height.small}", + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)", + "$modes": { + "default": 0.9286, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)", + "$modes": { + "default": 0.9286, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.small}" + }, + "name": "token-button-typography-line-height-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "small" + ] + }, + { + "key": "{button.typography.line-height.medium}", + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 1.1429", + "$modes": { + "default": 1.1429, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 1.1429", + "$modes": { + "default": 1.1429, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.medium}" + }, + "name": "token-button-typography-line-height-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "medium" + ] + }, + { + "key": "{button.typography.line-height.large}", + "$type": "number", + "$value": 1.2858, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 1.2858, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.large}" + }, + "name": "token-button-typography-line-height-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "large" + ] + }, + { + "key": "{button.foreground.color.primary.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.default}" + }, + "name": "token-button-foreground-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "default" + ] + }, + { + "key": "{button.foreground.color.primary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.hover}" + }, + "name": "token-button-foreground-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "hover" + ] + }, + { + "key": "{button.foreground.color.primary.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.focus}" + }, + "name": "token-button-foreground-color-primary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "focus" + ] + }, + { + "key": "{button.foreground.color.primary.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.active}" + }, + "name": "token-button-foreground-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "active" + ] + }, + { + "key": "{button.foreground.color.secondary.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.default}" + }, + "name": "token-button-foreground-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "default" + ] + }, + { + "key": "{button.foreground.color.secondary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.hover}" + }, + "name": "token-button-foreground-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "hover" + ] + }, + { + "key": "{button.foreground.color.secondary.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.focus}" + }, + "name": "token-button-foreground-color-secondary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "focus" + ] + }, + { + "key": "{button.foreground.color.secondary.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.active}" + }, + "name": "token-button-foreground-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "active" + ] + }, + { + "key": "{button.foreground.color.tertiary.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#78a9ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiary.g100}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiary.g100}" + }, + "key": "{button.foreground.color.tertiary.default}" + }, + "name": "token-button-foreground-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "default" + ] + }, + { + "key": "{button.foreground.color.tertiary.hover}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#a6c8ff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textInverse}", + "$modes": { + "default": "{color.foreground.action-hover}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.hover}" + }, + "name": "token-button-foreground-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "hover" + ] + }, + { + "key": "{button.foreground.color.tertiary.focus}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#78a9ff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textInverse}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.focus}" + }, + "name": "token-button-foreground-color-tertiary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "focus" + ] + }, + { + "key": "{button.foreground.color.tertiary.active}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#a6c8ff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textInverse}", + "$modes": { + "default": "{color.foreground.action-active}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.active}" + }, + "name": "token-button-foreground-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "active" + ] + }, + { + "key": "{button.foreground.color.critical.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffb3b8", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textOnColor}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.default}" + }, + "name": "token-button-foreground-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "default" + ] + }, + { + "key": "{button.foreground.color.critical.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.hover}" + }, + "name": "token-button-foreground-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "hover" + ] + }, + { + "key": "{button.foreground.color.critical.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffb3b8", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textOnColor}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.focus}" + }, + "name": "token-button-foreground-color-critical-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "focus" + ] + }, + { + "key": "{button.foreground.color.critical.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.active}" + }, + "name": "token-button-foreground-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "active" + ] + }, + { + "key": "{button.foreground.color.disabled}", + "$type": "color", + "$value": "rgba(255, 255, 255, 0.25)", + "$modes": { + "default": "rgba(244, 244, 244, 0.25)", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "rgba(255, 255, 255, 0.25)", + "cds-g100": "rgba(255, 255, 255, 0.25)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textOnColorDisabled}", + "$modes": { + "default": "{color.foreground.disabled}", + "cds-g0": "{carbon.themes.white.textOnColorDisabled}", + "cds-g10": "{carbon.themes.g10.textOnColorDisabled}", + "cds-g90": "{carbon.themes.g90.textOnColorDisabled}", + "cds-g100": "{carbon.themes.g100.textOnColorDisabled}" + }, + "key": "{button.foreground.color.disabled}" + }, + "name": "token-button-foreground-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "disabled" + ] + }, + { + "key": "{button.surface.color.primary.default}", + "$type": "color", + "$value": "#0f62fe", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimary.g100}", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimary.g100}" + }, + "key": "{button.surface.color.primary.default}" + }, + "name": "token-button-surface-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "default" + ] + }, + { + "key": "{button.surface.color.primary.hover}", + "$type": "color", + "$value": "#0050e6", + "$modes": { + "default": "#0043ce", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#0050e6", + "cds-g100": "#0050e6" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimaryHover.g100}", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimaryHover.g100}" + }, + "key": "{button.surface.color.primary.hover}" + }, + "name": "token-button-surface-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "hover" + ] + }, + { + "key": "{button.surface.color.primary.focus}", + "$type": "color", + "$value": "#0f62fe", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimary.g100}", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimary.g100}" + }, + "key": "{button.surface.color.primary.focus}" + }, + "name": "token-button-surface-color-primary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "focus" + ] + }, + { + "key": "{button.surface.color.primary.active}", + "$type": "color", + "$value": "#002d9c", + "$modes": { + "default": "#002d9c", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#002d9c", + "cds-g100": "#002d9c" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimaryActive.g100}", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimaryActive.g100}" + }, + "key": "{button.surface.color.primary.active}" + }, + "name": "token-button-surface-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "active" + ] + }, + { + "key": "{button.surface.color.secondary.default}", + "$type": "color", + "$value": "#6f6f6f", + "$modes": { + "default": "#262626", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#6f6f6f", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondary.g100}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondary.g100}" + }, + "key": "{button.surface.color.secondary.default}" + }, + "name": "token-button-surface-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "default" + ] + }, + { + "key": "{button.surface.color.secondary.hover}", + "$type": "color", + "$value": "#5e5e5e", + "$modes": { + "default": "#262626", + "cds-g0": "#474747", + "cds-g10": "#474747", + "cds-g90": "#5e5e5e", + "cds-g100": "#5e5e5e" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondaryHover.g100}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondaryHover.g100}" + }, + "key": "{button.surface.color.secondary.hover}" + }, + "name": "token-button-surface-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "hover" + ] + }, + { + "key": "{button.surface.color.secondary.focus}", + "$type": "color", + "$value": "#6f6f6f", + "$modes": { + "default": "#262626", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#6f6f6f", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondary.g100}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondary.g100}" + }, + "key": "{button.surface.color.secondary.focus}" + }, + "name": "token-button-surface-color-secondary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "focus" + ] + }, + { + "key": "{button.surface.color.secondary.active}", + "$type": "color", + "$value": "#393939", + "$modes": { + "default": "#525252", + "cds-g0": "#6f6f6f", + "cds-g10": "#6f6f6f", + "cds-g90": "#393939", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondaryActive.g100}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondaryActive.g100}" + }, + "key": "{button.surface.color.secondary.active}" + }, + "name": "token-button-surface-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "active" + ] + }, + { + "key": "{button.surface.color.tertiary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{button.surface.color.tertiary.default}" + }, + "name": "token-button-surface-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "default" + ] + }, + { + "key": "{button.surface.color.tertiary.hover}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#262626", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiaryHover.g100}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryHover.g100}" + }, + "key": "{button.surface.color.tertiary.hover}" + }, + "name": "token-button-surface-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "hover" + ] + }, + { + "key": "{button.surface.color.tertiary.focus}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "transparent", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiaryHover.g100}", + "$modes": { + "default": "transparent", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryHover.g100}" + }, + "key": "{button.surface.color.tertiary.focus}" + }, + "name": "token-button-surface-color-tertiary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "focus" + ] + }, + { + "key": "{button.surface.color.tertiary.active}", + "$type": "color", + "$value": "#c6c6c6", + "$modes": { + "default": "#525252", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiaryActive.g100}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryActive.g100}" + }, + "key": "{button.surface.color.tertiary.active}" + }, + "name": "token-button-surface-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "active" + ] + }, + { + "key": "{button.surface.color.critical.default}", + "$type": "color", + "$value": "#da1e28", + "$modes": { + "default": "#a2191f", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerPrimary.g100}", + "$modes": { + "default": "{color.surface.critical}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerPrimary.g100}" + }, + "key": "{button.surface.color.critical.default}" + }, + "name": "token-button-surface-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "default" + ] + }, + { + "key": "{button.surface.color.critical.hover}", + "$type": "color", + "$value": "#b81921", + "$modes": { + "default": "#a2191f", + "cds-g0": "#b81921", + "cds-g10": "#b81921", + "cds-g90": "#b81921", + "cds-g100": "#b81921" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerHover.g100}", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerHover.g100}" + }, + "key": "{button.surface.color.critical.hover}" + }, + "name": "token-button-surface-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "hover" + ] + }, + { + "key": "{button.surface.color.critical.focus}", + "$type": "color", + "$value": "#da1e28", + "$modes": { + "default": "#a2191f", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerPrimary.g100}", + "$modes": { + "default": "{color.surface.critical}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerPrimary.g100}" + }, + "key": "{button.surface.color.critical.focus}" + }, + "name": "token-button-surface-color-critical-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "focus" + ] + }, + { + "key": "{button.surface.color.critical.active}", + "$type": "color", + "$value": "#750e13", + "$modes": { + "default": "#750e13", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#750e13", + "cds-g100": "#750e13" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerActive.g100}", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerActive.g100}" + }, + "key": "{button.surface.color.critical.active}" + }, + "name": "token-button-surface-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "active" + ] + }, + { + "key": "{button.surface.color.disabled}", + "$type": "color", + "$value": "#8d8d8d", + "$modes": { + "default": "#262626", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDisabled.g100}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDisabled.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDisabled.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDisabled.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDisabled.g100}" + }, + "key": "{button.surface.color.disabled}" + }, + "name": "token-button-surface-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "disabled" + ] + }, + { + "key": "{button.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{button.border.width}" + }, + "name": "token-button-border-width", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "width" + ] + }, + { + "key": "{button.border.radius}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{button.border.radius}" + }, + "name": "token-button-border-radius", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "radius" + ] + }, + { + "key": "{button.border.color.primary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#0043ce", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.default}" + }, + "name": "token-button-border-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "default" + ] + }, + { + "key": "{button.border.color.primary.hover}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#0043ce", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.hover}" + }, + "name": "token-button-border-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "hover" + ] + }, + { + "key": "{button.border.color.primary.focus.internal}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#161616", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.primary.focus.internal}" + }, + "name": "token-button-border-color-primary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "focus", + "internal" + ] + }, + { + "key": "{button.border.color.primary.focus.external}", + "$type": "color", + "$value": "#ff00ff", + "$modes": { + "default": "#ffffff", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "magenta", + "$modes": { + "default": "{color.focus.action.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.primary.focus.external}" + }, + "name": "token-button-border-color-primary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "focus", + "external" + ] + }, + { + "key": "{button.border.color.primary.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#002d9c", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.active}" + }, + "name": "token-button-border-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "active" + ] + }, + { + "key": "{button.border.color.secondary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#6f6f6f", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.default}" + }, + "name": "token-button-border-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "default" + ] + }, + { + "key": "{button.border.color.secondary.hover}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#6f6f6f", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.hover}" + }, + "name": "token-button-border-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "hover" + ] + }, + { + "key": "{button.border.color.secondary.focus.internal}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#161616", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.secondary.focus.internal}" + }, + "name": "token-button-border-color-secondary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "focus", + "internal" + ] + }, + { + "key": "{button.border.color.secondary.focus.external}", + "$type": "color", + "$value": "#ff00ff", + "$modes": { + "default": "#ffffff", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "magenta", + "$modes": { + "default": "{color.focus.action.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.secondary.focus.external}" + }, + "name": "token-button-border-color-secondary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "focus", + "external" + ] + }, + { + "key": "{button.border.color.secondary.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#6f6f6f", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.active}" + }, + "name": "token-button-border-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "active" + ] + }, + { + "key": "{button.border.color.tertiary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{button.border.color.tertiary.default}" + }, + "name": "token-button-border-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "default" + ] + }, + { + "key": "{button.border.color.tertiary.hover}", + "$type": "color", + "$value": "#6f6f6f", + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "key": "{button.border.color.tertiary.hover}" + }, + "name": "token-button-border-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "hover" + ] + }, + { + "key": "{button.border.color.tertiary.focus.internal}", + "$type": "color", + "$value": "#161616", + "original": { + "$type": "color", + "$value": "{color.focus.action.internal}", + "key": "{button.border.color.tertiary.focus.internal}" + }, + "name": "token-button-border-color-tertiary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "focus", + "internal" + ] + }, + { + "key": "{button.border.color.tertiary.focus.external}", + "$type": "color", + "$value": "#ffffff", + "original": { + "$type": "color", + "$value": "{color.focus.action.external}", + "key": "{button.border.color.tertiary.focus.external}" + }, + "name": "token-button-border-color-tertiary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "focus", + "external" + ] + }, + { + "key": "{button.border.color.tertiary.active}", + "$type": "color", + "$value": "#6f6f6f", + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "key": "{button.border.color.tertiary.active}" + }, + "name": "token-button-border-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "active" + ] + }, + { + "key": "{button.border.color.critical.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#ffb3b8", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.default}" + }, + "name": "token-button-border-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "default" + ] + }, + { + "key": "{button.border.color.critical.hover}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#750e13", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.hover}" + }, + "name": "token-button-border-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "hover" + ] + }, + { + "key": "{button.border.color.critical.focus.internal}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#161616", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.critical.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.critical.focus.internal}" + }, + "name": "token-button-border-color-critical-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "focus", + "internal" + ] + }, + { + "key": "{button.border.color.critical.focus.external}", + "$type": "color", + "$value": "#ff00ff", + "$modes": { + "default": "#ffffff", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "magenta", + "$modes": { + "default": "{color.focus.critical.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.critical.focus.external}" + }, + "name": "token-button-border-color-critical-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "focus", + "external" + ] + }, + { + "key": "{button.border.color.critical.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#750e13", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.active}" + }, + "name": "token-button-border-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "active" + ] + }, + { + "key": "{button.border.color.disabled}", + "$type": "color", + "$value": "#6f6f6f", + "original": { + "$type": "color", + "$value": "{color.border.primary}", + "key": "{button.border.color.disabled}" + }, + "name": "token-button-border-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "disabled" + ] + }, + { + "key": "{button.focus.border.width}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{button.focus.border.width}" + }, + "name": "token-button-focus-border-width", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "focus", + "border", + "width" + ] + }, + { + "key": "{button.icon.size.small}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.small}" + }, + "name": "token-button-icon-size-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "small" + ] + }, + { + "key": "{button.icon.size.medium}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.medium}" + }, + "name": "token-button-icon-size-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "medium" + ] + }, + { + "key": "{button.icon.size.large}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.large}" + }, + "name": "token-button-icon-size-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "large" + ] + }, + { + "key": "{dismiss-button.size}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "key": "{dismiss-button.size}" + }, + "name": "token-dismiss-button-size", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "size" + ] + }, + { + "key": "{dismiss-button.foreground.color.default}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.iconPrimary}", + "$modes": { + "default": "{color.foreground.faint}", + "cds-g0": "{carbon.themes.white.iconPrimary}", + "cds-g10": "{carbon.themes.g10.iconPrimary}", + "cds-g90": "{carbon.themes.g90.iconPrimary}", + "cds-g100": "{carbon.themes.g100.iconPrimary}" + }, + "key": "{dismiss-button.foreground.color.default}" + }, + "name": "token-dismiss-button-foreground-color-default", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "foreground", + "color", + "default" + ] + }, + { + "key": "{dismiss-button.foreground.color.active}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.iconPrimary}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.white.iconPrimary}", + "cds-g10": "{carbon.themes.g10.iconPrimary}", + "cds-g90": "{carbon.themes.g90.iconPrimary}", + "cds-g100": "{carbon.themes.g100.iconPrimary}" + }, + "key": "{dismiss-button.foreground.color.active}" + }, + "name": "token-dismiss-button-foreground-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "foreground", + "color", + "active" + ] + }, + { + "key": "{dismiss-button.surface.color.hover}", + "$type": "color", + "$value": "rgba(141, 141, 141, 0.16)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "rgba(141, 141, 141, 0.12)", + "cds-g10": "rgba(141, 141, 141, 0.12)", + "cds-g90": "rgba(141, 141, 141, 0.16)", + "cds-g100": "rgba(141, 141, 141, 0.16)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.backgroundHover}", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "{carbon.themes.white.backgroundHover}", + "cds-g10": "{carbon.themes.g10.backgroundHover}", + "cds-g90": "{carbon.themes.g90.backgroundHover}", + "cds-g100": "{carbon.themes.g100.backgroundHover}" + }, + "key": "{dismiss-button.surface.color.hover}" + }, + "name": "token-dismiss-button-surface-color-hover", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "surface", + "color", + "hover" + ] + }, + { + "key": "{dismiss-button.surface.color.active}", + "$type": "color", + "$value": "rgba(141, 141, 141, 0.4)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "rgba(141, 141, 141, 0.5)", + "cds-g10": "rgba(141, 141, 141, 0.5)", + "cds-g90": "rgba(141, 141, 141, 0.4)", + "cds-g100": "rgba(141, 141, 141, 0.4)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.backgroundActive}", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "{carbon.themes.white.backgroundActive}", + "cds-g10": "{carbon.themes.g10.backgroundActive}", + "cds-g90": "{carbon.themes.g90.backgroundActive}", + "cds-g100": "{carbon.themes.g100.backgroundActive}" + }, + "key": "{dismiss-button.surface.color.active}" + }, + "name": "token-dismiss-button-surface-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "surface", + "color", + "active" + ] + }, + { + "key": "{dismiss-button.border.color.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#6f6f6f", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{dismiss-button.border.color.active}" + }, + "name": "token-dismiss-button-border-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "border", + "color", + "active" + ] + }, + { + "key": "{dismiss-button.icon.size}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "20", + "cds-g10": "20", + "cds-g90": "20", + "cds-g100": "20" + }, + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "20", + "cds-g10": "20", + "cds-g90": "20", + "cds-g100": "20" + }, + "key": "{dismiss-button.icon.size}" + }, + "name": "token-dismiss-button-icon-size", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "icon", + "size" + ] + }, + { + "key": "{form.label.color}", + "$type": "color", + "$value": "#f4f4f4", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.strong}", + "group": "components", + "key": "{form.label.color}" + }, + "name": "token-form-label-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "label", + "color" + ] + }, + { + "key": "{form.legend.color}", + "$type": "color", + "$value": "#f4f4f4", + "group": "components", + "original": { + "$type": "color", + "$value": "{form.label.color}", + "group": "components", + "key": "{form.legend.color}" + }, + "name": "token-form-legend-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "legend", + "color" + ] + }, + { + "key": "{form.helper-text.color}", + "$type": "color", + "$value": "#c6c6c6", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.helper-text.color}" + }, + "name": "token-form-helper-text-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "helper-text", + "color" + ] + }, + { + "key": "{form.indicator.optional.color}", + "$type": "color", + "$value": "#c6c6c6", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.indicator.optional.color}" + }, + "name": "token-form-indicator-optional-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "indicator", + "optional", + "color" + ] + }, + { + "key": "{form.error.color}", + "$type": "color", + "$value": "#a2191f", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "components", + "key": "{form.error.color}" + }, + "name": "token-form-error-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "error", + "color" + ] + }, + { + "key": "{form.error.icon-size}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "14", + "unit": "px", + "key": "{form.error.icon-size}" + }, + "name": "token-form-error-icon-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "error", + "icon-size" + ] + }, + { + "key": "{form.checkbox.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.checkbox.size}" + }, + "name": "token-form-checkbox-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "size" + ] + }, + { + "key": "{form.checkbox.border.radius}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{form.checkbox.border.radius}" + }, + "name": "token-form-checkbox-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "border", + "radius" + ] + }, + { + "key": "{form.checkbox.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.checkbox.border.width}" + }, + "name": "token-form-checkbox-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "border", + "width" + ] + }, + { + "key": "{form.checkbox.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.checkbox.background-image.size}" + }, + "name": "token-form-checkbox-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "size" + ] + }, + { + "key": "{form.checkbox.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url}" + }, + "name": "token-form-checkbox-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url" + ] + }, + { + "key": "{form.checkbox.background-image.data-url-indeterminate}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url-indeterminate}" + }, + "name": "token-form-checkbox-background-image-data-url-indeterminate", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url-indeterminate" + ] + }, + { + "key": "{form.checkbox.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url-disabled}" + }, + "name": "token-form-checkbox-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url-disabled" + ] + }, + { + "key": "{form.checkbox.background-image.data-url-indeterminate-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url-indeterminate-disabled}" + }, + "name": "token-form-checkbox-background-image-data-url-indeterminate-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url-indeterminate-disabled" + ] + }, + { + "key": "{form.control.base.foreground.value-color}", + "$type": "color", + "$value": "#f4f4f4", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.strong}", + "group": "components", + "key": "{form.control.base.foreground.value-color}" + }, + "name": "token-form-control-base-foreground-value-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "foreground", + "value-color" + ] + }, + { + "key": "{form.control.base.foreground.placeholder-color}", + "$type": "color", + "$value": "#c6c6c6", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.control.base.foreground.placeholder-color}" + }, + "name": "token-form-control-base-foreground-placeholder-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "foreground", + "placeholder-color" + ] + }, + { + "key": "{form.control.base.surface-color.default}", + "$type": "color", + "$value": "#262626", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.interactive}", + "group": "components", + "key": "{form.control.base.surface-color.default}" + }, + "name": "token-form-control-base-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "surface-color", + "default" + ] + }, + { + "key": "{form.control.base.surface-color.hover}", + "$type": "color", + "$value": "#333333", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.interactive-hover}", + "group": "components", + "key": "{form.control.base.surface-color.hover}" + }, + "name": "token-form-control-base-surface-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "surface-color", + "hover" + ] + }, + { + "key": "{form.control.base.border-color.default}", + "$type": "color", + "$value": "#8d8d8d", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-400}", + "group": "components", + "key": "{form.control.base.border-color.default}" + }, + "name": "token-form-control-base-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "border-color", + "default" + ] + }, + { + "key": "{form.control.base.border-color.hover}", + "$type": "color", + "$value": "#525252", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "group": "components", + "key": "{form.control.base.border-color.hover}" + }, + "name": "token-form-control-base-border-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "border-color", + "hover" + ] + }, + { + "key": "{form.control.checked.foreground-color}", + "$type": "color", + "$value": "#161616", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "group": "components", + "key": "{form.control.checked.foreground-color}" + }, + "name": "token-form-control-checked-foreground-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "foreground-color" + ] + }, + { + "key": "{form.control.checked.surface-color.default}", + "$type": "color", + "$value": "#0f62fe", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "group": "components", + "key": "{form.control.checked.surface-color.default}" + }, + "name": "token-form-control-checked-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "surface-color", + "default" + ] + }, + { + "key": "{form.control.checked.surface-color.hover}", + "$type": "color", + "$value": "#0043ce", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "components", + "key": "{form.control.checked.surface-color.hover}" + }, + "name": "token-form-control-checked-surface-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "surface-color", + "hover" + ] + }, + { + "key": "{form.control.checked.border-color.default}", + "$type": "color", + "$value": "#0043ce", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "components", + "key": "{form.control.checked.border-color.default}" + }, + "name": "token-form-control-checked-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "border-color", + "default" + ] + }, + { + "key": "{form.control.checked.border-color.hover}", + "$type": "color", + "$value": "#002d9c", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "group": "components", + "key": "{form.control.checked.border-color.hover}" + }, + "name": "token-form-control-checked-border-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "border-color", + "hover" + ] + }, + { + "key": "{form.control.invalid.border-color.default}", + "$type": "color", + "$value": "#a2191f", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "components", + "key": "{form.control.invalid.border-color.default}" + }, + "name": "token-form-control-invalid-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "invalid", + "border-color", + "default" + ] + }, + { + "key": "{form.control.invalid.border-color.hover}", + "$type": "color", + "$value": "#750e13", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.red-400}", + "group": "components", + "key": "{form.control.invalid.border-color.hover}" + }, + "name": "token-form-control-invalid-border-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "invalid", + "border-color", + "hover" + ] + }, + { + "key": "{form.control.readonly.foreground-color}", + "$type": "color", + "$value": "#f4f4f4", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "group": "components", + "key": "{form.control.readonly.foreground-color}" + }, + "name": "token-form-control-readonly-foreground-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "readonly", + "foreground-color" + ] + }, + { + "key": "{form.control.readonly.surface-color}", + "$type": "color", + "$value": "#393939", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.strong}", + "group": "components", + "key": "{form.control.readonly.surface-color}" + }, + "name": "token-form-control-readonly-surface-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "readonly", + "surface-color" + ] + }, + { + "key": "{form.control.readonly.border-color}", + "$type": "color", + "$value": "#393939", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.border.faint}", + "group": "components", + "key": "{form.control.readonly.border-color}" + }, + "name": "token-form-control-readonly-border-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "readonly", + "border-color" + ] + }, + { + "key": "{form.control.disabled.foreground-color}", + "$type": "color", + "$value": "rgba(244, 244, 244, 0.25)", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.disabled}", + "group": "components", + "key": "{form.control.disabled.foreground-color}" + }, + "name": "token-form-control-disabled-foreground-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "disabled", + "foreground-color" + ] + }, + { + "key": "{form.control.disabled.surface-color}", + "$type": "color", + "$value": "#525252", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.interactive-disabled}", + "group": "components", + "key": "{form.control.disabled.surface-color}" + }, + "name": "token-form-control-disabled-surface-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "disabled", + "surface-color" + ] + }, + { + "key": "{form.control.disabled.border-color}", + "$type": "color", + "$value": "#6f6f6f", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.border.primary}", + "group": "components", + "key": "{form.control.disabled.border-color}" + }, + "name": "token-form-control-disabled-border-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "disabled", + "border-color" + ] + }, + { + "key": "{form.control.padding}", + "$type": "dimension", + "$value": "7px", + "unit": "px", + "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma.", + "original": { + "$type": "dimension", + "$value": "7", + "unit": "px", + "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma.", + "key": "{form.control.padding}" + }, + "name": "token-form-control-padding", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "padding" + ] + }, + { + "key": "{form.control.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{form.control.border.radius}" + }, + "name": "token-form-control-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "border", + "radius" + ] + }, + { + "key": "{form.control.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.control.border.width}" + }, + "name": "token-form-control-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "border", + "width" + ] + }, + { + "key": "{form.radio.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.radio.size}" + }, + "name": "token-form-radio-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "size" + ] + }, + { + "key": "{form.radio.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.radio.border.width}" + }, + "name": "token-form-radio-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "border", + "width" + ] + }, + { + "key": "{form.radio.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.radio.background-image.size}" + }, + "name": "token-form-radio-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "background-image", + "size" + ] + }, + { + "key": "{form.radio.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "key": "{form.radio.background-image.data-url}" + }, + "name": "token-form-radio-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "background-image", + "data-url" + ] + }, + { + "key": "{form.radio.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "key": "{form.radio.background-image.data-url-disabled}" + }, + "name": "token-form-radio-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "background-image", + "data-url-disabled" + ] + }, + { + "key": "{form.radiocard-group.gap}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.radiocard-group.gap}" + }, + "name": "token-form-radiocard-group-gap", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard-group", + "gap" + ] + }, + { + "key": "{form.radiocard.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.radiocard.border.width}" + }, + "name": "token-form-radiocard-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "width" + ] + }, + { + "key": "{form.radiocard.border.radius}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{form.radiocard.border.radius}" + }, + "name": "token-form-radiocard-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "radius" + ] + }, + { + "key": "{form.radiocard.border.color.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#262626", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{form.radiocard.border.color.default}" + }, + "name": "token-form-radiocard-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "default" + ] + }, + { + "key": "{form.radiocard.border.color.focus}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#161616", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "key": "{form.radiocard.border.color.focus}" + }, + "name": "token-form-radiocard-border-color-focus", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "focus" + ] + }, + { + "key": "{form.radiocard.border.color.default-checked}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#0043ce", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "key": "{form.radiocard.border.color.default-checked}" + }, + "name": "token-form-radiocard-border-color-default-checked", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "default-checked" + ] + }, + { + "key": "{form.radiocard.content-padding}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{form.radiocard.content-padding}" + }, + "name": "token-form-radiocard-content-padding", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "content-padding" + ] + }, + { + "key": "{form.radiocard.control-padding}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{form.radiocard.control-padding}" + }, + "name": "token-form-radiocard-control-padding", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "control-padding" + ] + }, + { + "key": "{form.radiocard.transition.duration}", + "$type": "duration", + "$value": "0.2s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.2", + "unit": "s", + "key": "{form.radiocard.transition.duration}" + }, + "name": "token-form-radiocard-transition-duration", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "transition", + "duration" + ] + }, + { + "key": "{form.select.background-image.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.select.background-image.size}" + }, + "name": "token-form-select-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "size" + ] + }, + { + "key": "{form.select.background-image.position-right-x}", + "$type": "dimension", + "$value": "7px", + "original": { + "$type": "dimension", + "$value": "{form.control.padding}", + "key": "{form.select.background-image.position-right-x}" + }, + "name": "token-form-select-background-image-position-right-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "position-right-x" + ] + }, + { + "key": "{form.select.background-image.position-top-y}", + "$type": "dimension", + "$value": "9px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "9", + "unit": "px", + "key": "{form.select.background-image.position-top-y}" + }, + "name": "token-form-select-background-image-position-top-y", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "position-top-y" + ] + }, + { + "key": "{form.select.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "key": "{form.select.background-image.data-url}" + }, + "name": "token-form-select-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "data-url" + ] + }, + { + "key": "{form.select.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "key": "{form.select.background-image.data-url-disabled}" + }, + "name": "token-form-select-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "data-url-disabled" + ] + }, + { + "key": "{form.text-input.background-image.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.text-input.background-image.size}" + }, + "name": "token-form-text-input-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "size" + ] + }, + { + "key": "{form.text-input.background-image.position-x}", + "$type": "dimension", + "$value": "7px", + "original": { + "$type": "dimension", + "$value": "{form.control.padding}", + "key": "{form.text-input.background-image.position-x}" + }, + "name": "token-form-text-input-background-image-position-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "position-x" + ] + }, + { + "key": "{form.text-input.background-image.data-url-date}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-date}" + }, + "name": "token-form-text-input-background-image-data-url-date", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-date" + ] + }, + { + "key": "{form.text-input.background-image.data-url-time}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-time}" + }, + "name": "token-form-text-input-background-image-data-url-time", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-time" + ] + }, + { + "key": "{form.text-input.background-image.data-url-search}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-search}" + }, + "name": "token-form-text-input-background-image-data-url-search", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search" + ] + }, + { + "key": "{form.text-input.background-image.data-url-search-cancel}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-search-cancel}" + }, + "name": "token-form-text-input-background-image-data-url-search-cancel", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search-cancel" + ] + }, + { + "key": "{form.text-input.background-image.data-url-search-loading}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color and animation are hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color and animation are hardcoded here!", + "key": "{form.text-input.background-image.data-url-search-loading}" + }, + "name": "token-form-text-input-background-image-data-url-search-loading", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search-loading" + ] + }, + { + "key": "{form.toggle.width}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{form.toggle.width}" + }, + "name": "token-form-toggle-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "width" + ] + }, + { + "key": "{form.toggle.height}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.toggle.height}" + }, + "name": "token-form-toggle-height", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "height" + ] + }, + { + "key": "{form.toggle.base.surface-color.default}", + "$type": "color", + "$value": "#393939", + "group": "components", + "comment": "the toggle has a different base surface color, compared to the other controls", + "original": { + "$type": "color", + "$value": "{color.surface.strong}", + "group": "components", + "comment": "the toggle has a different base surface color, compared to the other controls", + "key": "{form.toggle.base.surface-color.default}" + }, + "name": "token-form-toggle-base-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "base", + "surface-color", + "default" + ] + }, + { + "key": "{form.toggle.border.radius}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{form.toggle.border.radius}" + }, + "name": "token-form-toggle-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "border", + "radius" + ] + }, + { + "key": "{form.toggle.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.toggle.border.width}" + }, + "name": "token-form-toggle-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "border", + "width" + ] + }, + { + "key": "{form.toggle.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.toggle.background-image.size}" + }, + "name": "token-form-toggle-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "size" + ] + }, + { + "key": "{form.toggle.background-image.position-x}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{form.toggle.background-image.position-x}" + }, + "name": "token-form-toggle-background-image-position-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "position-x" + ] + }, + { + "key": "{form.toggle.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.toggle.background-image.data-url}" + }, + "name": "token-form-toggle-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "data-url" + ] + }, + { + "key": "{form.toggle.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.toggle.background-image.data-url-disabled}" + }, + "name": "token-form-toggle-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "data-url-disabled" + ] + }, + { + "key": "{form.toggle.transition.duration}", + "$type": "duration", + "$value": "0.2s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.2", + "unit": "s", + "key": "{form.toggle.transition.duration}" + }, + "name": "token-form-toggle-transition-duration", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "transition", + "duration" + ] + }, + { + "key": "{form.toggle.transition.timing-function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.68, -0.2, 0.265, 1.15)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.68, + -0.2, + 0.265, + 1.15 + ], + "key": "{form.toggle.transition.timing-function}" + }, + "name": "token-form-toggle-transition-timing-function", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "transition", + "timing-function" + ] + }, + { + "key": "{form.toggle.thumb-size}", + "$type": "dimension", + "$value": "16px", + "original": { + "$type": "dimension", + "$value": "{form.toggle.height}", + "key": "{form.toggle.thumb-size}" + }, + "name": "token-form-toggle-thumb-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "thumb-size" + ] + }, + { + "key": "{icon-tile.border.color.overlay}", + "$type": "color", + "$value": "#6f6f6f", + "$modes": { + "default": "#6f6f6f", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.borderSubtle02}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle02}", + "cds-g10": "{carbon.themes.g10.borderSubtle02}", + "cds-g90": "{carbon.themes.g90.borderSubtle02}", + "cds-g100": "{carbon.themes.g100.borderSubtle02}" + }, + "key": "{icon-tile.border.color.overlay}" + }, + "name": "token-icon-tile-border-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "overlay" + ] + }, + { + "key": "{icon-tile.border.color.logo}", + "$type": "color", + "$value": "#525252", + "$modes": { + "default": "#6f6f6f", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.borderSubtle01}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle01}", + "cds-g10": "{carbon.themes.g10.borderSubtle01}", + "cds-g90": "{carbon.themes.g90.borderSubtle01}", + "cds-g100": "{carbon.themes.g100.borderSubtle01}" + }, + "key": "{icon-tile.border.color.logo}" + }, + "name": "token-icon-tile-border-color-logo", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "logo" + ] + }, + { + "key": "{icon-tile.surface.color.overlay}", + "$type": "color", + "$value": "#393939", + "$modes": { + "default": "#262626", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.layer02}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.white.layer02}", + "cds-g10": "{carbon.themes.g10.layer02}", + "cds-g90": "{carbon.themes.g90.layer02}", + "cds-g100": "{carbon.themes.g100.layer02}" + }, + "key": "{icon-tile.surface.color.overlay}" + }, + "name": "token-icon-tile-surface-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "surface", + "color", + "overlay" + ] + }, + { + "key": "{pagination.nav.control.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{pagination.nav.control.height}" + }, + "name": "token-pagination-nav-control-height", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "height" + ] + }, + { + "key": "{pagination.nav.control.padding.horizontal}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{pagination.nav.control.padding.horizontal}" + }, + "name": "token-pagination-nav-control-padding-horizontal", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "padding", + "horizontal" + ] + }, + { + "key": "{pagination.nav.control.focus-inset}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{pagination.nav.control.focus-inset}" + }, + "name": "token-pagination-nav-control-focus-inset", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "focus-inset" + ] + }, + { + "key": "{pagination.nav.control.icon-spacing}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{pagination.nav.control.icon-spacing}" + }, + "name": "token-pagination-nav-control-icon-spacing", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "icon-spacing" + ] + }, + { + "key": "{pagination.nav.indicator.height}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{pagination.nav.indicator.height}" + }, + "name": "token-pagination-nav-indicator-height", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "indicator", + "height" + ] + }, + { + "key": "{pagination.nav.indicator.spacing}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{pagination.nav.indicator.spacing}" + }, + "name": "token-pagination-nav-indicator-spacing", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "indicator", + "spacing" + ] + }, + { + "key": "{pagination.child.spacing.vertical}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{pagination.child.spacing.vertical}" + }, + "name": "token-pagination-child-spacing-vertical", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "child", + "spacing", + "vertical" + ] + }, + { + "key": "{pagination.child.spacing.horizontal}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "key": "{pagination.child.spacing.horizontal}" + }, + "name": "token-pagination-child-spacing-horizontal", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "child", + "spacing", + "horizontal" + ] + }, + { + "key": "{rich-tooltip.bubble.max-width}", + "$type": "dimension", + "$value": "288px", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "original": { + "$type": "dimension", + "$value": "288", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "key": "{rich-tooltip.bubble.max-width}" + }, + "name": "token-rich-tooltip-bubble-max-width", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "max-width" + ] + }, + { + "key": "{rich-tooltip.bubble.border.color}", + "$value": "#525252", + "$modes": { + "default": "#52525233", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$value": "{color.palette.alpha-200}", + "$modes": { + "default": "{elevation.higher.border.color}", + "cds-g0": "{color.palette.alpha-200}", + "cds-g10": "{color.palette.alpha-200}", + "cds-g90": "{color.palette.alpha-200}", + "cds-g100": "{color.palette.alpha-200}" + }, + "key": "{rich-tooltip.bubble.border.color}" + }, + "name": "token-rich-tooltip-bubble-border-color", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "border", + "color" + ] + }, + { + "key": "{rich-tooltip.bubble.border.radius}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "key": "{rich-tooltip.bubble.border.radius}" + }, + "name": "token-rich-tooltip-bubble-border-radius", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "border", + "radius" + ] + }, + { + "key": "{rich-tooltip.bubble.arrow.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{rich-tooltip.bubble.arrow.size}" + }, + "name": "token-rich-tooltip-bubble-arrow-size", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "arrow", + "size" + ] + }, + { + "key": "{rich-tooltip.toggle.gap.horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{rich-tooltip.toggle.gap.horizontal}" + }, + "name": "token-rich-tooltip-toggle-gap-horizontal", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "gap", + "horizontal" + ] + }, + { + "key": "{rich-tooltip.toggle.foreground.color.default}", + "$value": "#c6c6c6", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$value": "{carbon.themes.g100.textSecondary}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.default}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-default", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "default" + ] + }, + { + "key": "{rich-tooltip.toggle.foreground.color.hover}", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$value": "{carbon.themes.g100.textPrimary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.hover}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-hover", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "hover" + ] + }, + { + "key": "{rich-tooltip.toggle.foreground.color.active}", + "$value": "#c6c6c6", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$value": "{carbon.themes.g100.textSecondary}", + "$modes": { + "default": "{color.foreground.faint}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.active}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-active", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "active" + ] + }, + { + "key": "{rich-tooltip.toggle.icon.size}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, + "original": { + "$type": "dimension", + "$value": "14", + "unit": "px", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, + "key": "{rich-tooltip.toggle.icon.size}" + }, + "name": "token-rich-tooltip-toggle-icon-size", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "icon", + "size" + ] + }, + { + "key": "{tabs.tab.height.medium}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{tabs.tab.height.medium}" + }, + "name": "token-tabs-tab-height-medium", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "height", + "medium" + ] + }, + { + "key": "{tabs.tab.height.large}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{tabs.tab.height.large}" + }, + "name": "token-tabs-tab-height-large", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "height", + "large" + ] + }, + { + "key": "{tabs.tab.padding.horizontal.medium}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{tabs.tab.padding.horizontal.medium}" + }, + "name": "token-tabs-tab-padding-horizontal-medium", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "padding", + "horizontal", + "medium" + ] + }, + { + "key": "{tabs.tab.padding.horizontal.large}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "key": "{tabs.tab.padding.horizontal.large}" + }, + "name": "token-tabs-tab-padding-horizontal-large", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "padding", + "horizontal", + "large" + ] + }, + { + "key": "{tabs.tab.padding.vertical}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "key": "{tabs.tab.padding.vertical}" + }, + "name": "token-tabs-tab-padding-vertical", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "padding", + "vertical" + ] + }, + { + "key": "{tabs.tab.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{tabs.tab.border-radius}" + }, + "name": "token-tabs-tab-border-radius", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "border-radius" + ] + }, + { + "key": "{tabs.tab.focus-inset}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{tabs.tab.focus-inset}" + }, + "name": "token-tabs-tab-focus-inset", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "focus-inset" + ] + }, + { + "key": "{tabs.tab.gutter}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{tabs.tab.gutter}" + }, + "name": "token-tabs-tab-gutter", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "gutter" + ] + }, + { + "key": "{tabs.indicator.height}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{tabs.indicator.height}" + }, + "name": "token-tabs-indicator-height", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "indicator", + "height" + ] + }, + { + "key": "{tabs.indicator.transition.function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.5, 1, 0.89, 1)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.5, + 1, + 0.89, + 1 + ], + "key": "{tabs.indicator.transition.function}" + }, + "name": "token-tabs-indicator-transition-function", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "indicator", + "transition", + "function" + ] + }, + { + "key": "{tabs.indicator.transition.duration}", + "$type": "duration", + "$value": "0.6s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.6", + "unit": "s", + "key": "{tabs.indicator.transition.duration}" + }, + "name": "token-tabs-indicator-transition-duration", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "indicator", + "transition", + "duration" + ] + }, + { + "key": "{tabs.divider.height}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{tabs.divider.height}" + }, + "name": "token-tabs-divider-height", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "divider", + "height" + ] + }, + { + "key": "{tooltip.max-width}", + "$type": "dimension", + "$value": "288px", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "original": { + "$type": "dimension", + "$value": "288", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "key": "{tooltip.max-width}" + }, + "name": "token-tooltip-max-width", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "max-width" + ] + }, + { + "key": "{tooltip.padding.horizontal}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16px", + "cds-g10": "16px", + "cds-g90": "16px", + "cds-g100": "16px" + }, + "original": { + "$type": "dimension", + "$value": "{carbon.themes.g100.spacing05}", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "{carbon.themes.white.spacing05}", + "cds-g10": "{carbon.themes.g10.spacing05}", + "cds-g90": "{carbon.themes.g90.spacing05}", + "cds-g100": "{carbon.themes.g100.spacing05}" + }, + "key": "{tooltip.padding.horizontal}" + }, + "name": "token-tooltip-padding-horizontal", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "horizontal" + ] + }, + { + "key": "{tooltip.padding.vertical}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "16px", + "cds-g10": "16px", + "cds-g90": "16px", + "cds-g100": "16px" + }, + "original": { + "$type": "dimension", + "$value": "{carbon.themes.g100.spacing05}", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "{carbon.themes.white.spacing05}", + "cds-g10": "{carbon.themes.g10.spacing05}", + "cds-g90": "{carbon.themes.g90.spacing05}", + "cds-g100": "{carbon.themes.g100.spacing05}" + }, + "key": "{tooltip.padding.vertical}" + }, + "name": "token-tooltip-padding-vertical", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "vertical" + ] + }, + { + "key": "{tooltip.border.radius}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "key": "{tooltip.border.radius}" + }, + "name": "token-tooltip-border-radius", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "border", + "radius" + ] + }, + { + "key": "{tooltip.caret.clip-path}", + "$value": "polygon(0 100%, 50% 0, 100% 100%)", + "$modes": { + "default": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "cds-g0": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g10": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g90": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g100": "polygon(0 100%, 50% 0, 100% 100%)" + }, + "original": { + "$value": "polygon(0 100%, 50% 0, 100% 100%)", + "$modes": { + "default": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "cds-g0": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g10": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g90": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g100": "polygon(0 100%, 50% 0, 100% 100%)" + }, + "key": "{tooltip.caret.clip-path}" + }, + "name": "token-tooltip-caret-clip-path", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "clip-path" + ] + }, + { + "key": "{tooltip.caret.height}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "7", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "7", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "key": "{tooltip.caret.height}" + }, + "name": "token-tooltip-caret-height", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "height" + ] + }, + { + "key": "{tooltip.caret.width}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{tooltip.caret.width}" + }, + "name": "token-tooltip-caret-width", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "width" + ] + }, + { + "key": "{tooltip.focus-offset}", + "$type": "dimension", + "$value": "-2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "-2", + "unit": "px", + "key": "{tooltip.focus-offset}" + }, + "name": "token-tooltip-focus-offset", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "focus-offset" + ] + }, + { + "key": "{tooltip.transition.function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.54, 1.5, 0.38, 1.11)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.54, + 1.5, + 0.38, + 1.11 + ], + "key": "{tooltip.transition.function}" + }, + "name": "token-tooltip-transition-function", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "transition", + "function" + ] + }, + { + "key": "{typography.font-stack.display}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.sans.display.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.font-stack.display}" + }, + "name": "token-typography-font-stack-display", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-stack", + "display" + ] + }, + { + "key": "{typography.font-stack.text}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.sans.text.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.font-stack.text}" + }, + "name": "token-typography-font-stack-text", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-stack", + "text" + ] + }, + { + "key": "{typography.font-stack.code}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.monospace.code.combined}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.font-stack.code}" + }, + "name": "token-typography-font-stack-code", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-stack", + "code" + ] + }, + { + "key": "{typography.font-weight.regular}", + "$type": "font-weight", + "$value": 400, + "$modes": { + "default": "400", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "default": "400", + "cds-g0": "{carbon.typography.font-weight.regular}", + "cds-g10": "{carbon.typography.font-weight.regular}", + "cds-g90": "{carbon.typography.font-weight.regular}", + "cds-g100": "{carbon.typography.font-weight.regular}" + }, + "key": "{typography.font-weight.regular}" + }, + "name": "token-typography-font-weight-regular", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "regular" + ] + }, + { + "key": "{typography.font-weight.medium}", + "$type": "font-weight", + "$value": 400, + "$modes": { + "default": "500", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "default": "500", + "cds-g0": "{carbon.typography.font-weight.regular}", + "cds-g10": "{carbon.typography.font-weight.regular}", + "cds-g90": "{carbon.typography.font-weight.regular}", + "cds-g100": "{carbon.typography.font-weight.regular}" + }, + "key": "{typography.font-weight.medium}" + }, + "name": "token-typography-font-weight-medium", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "medium" + ] + }, + { + "key": "{typography.font-weight.semibold}", + "$type": "font-weight", + "$value": 600, + "$modes": { + "default": "600", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "default": "600", + "cds-g0": "{carbon.typography.font-weight.semibold}", + "cds-g10": "{carbon.typography.font-weight.semibold}", + "cds-g90": "{carbon.typography.font-weight.semibold}", + "cds-g100": "{carbon.typography.font-weight.semibold}" + }, + "key": "{typography.font-weight.semibold}" + }, + "name": "token-typography-font-weight-semibold", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "semibold" + ] + }, + { + "key": "{typography.font-weight.bold}", + "$type": "font-weight", + "$value": 600, + "$modes": { + "default": "700", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "default": "700", + "cds-g0": "{carbon.typography.font-weight.semibold}", + "cds-g10": "{carbon.typography.font-weight.semibold}", + "cds-g90": "{carbon.typography.font-weight.semibold}", + "cds-g100": "{carbon.typography.font-weight.semibold}" + }, + "key": "{typography.font-weight.bold}" + }, + "name": "token-typography-font-weight-bold", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "bold" + ] + }, + { + "key": "{typography.display-500.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-500.font-family}" + }, + "name": "token-typography-display-500-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "font-family" + ] + }, + { + "key": "{typography.display-500.font-size}", + "$type": "font-size", + "$value": "2rem", + "unit": "px", + "comment": "30px/1.875rem", + "$modes": { + "default": "30", + "cds-g0": "2rem", + "cds-g10": "2rem", + "cds-g90": "2rem", + "cds-g100": "2rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading05.font-size}", + "unit": "px", + "comment": "30px/1.875rem", + "$modes": { + "default": "30", + "cds-g0": "{carbon.typography.heading05.font-size}", + "cds-g10": "{carbon.typography.heading05.font-size}", + "cds-g90": "{carbon.typography.heading05.font-size}", + "cds-g100": "{carbon.typography.heading05.font-size}" + }, + "key": "{typography.display-500.font-size}" + }, + "name": "token-typography-display-500-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "font-size" + ] + }, + { + "key": "{typography.display-500.line-height}", + "$type": "number", + "$value": 1.25, + "comment": "38px", + "$modes": { + "default": 1.2666, + "cds-g0": 1.25, + "cds-g10": 1.25, + "cds-g90": 1.25, + "cds-g100": 1.25 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading05.line-height}", + "comment": "38px", + "$modes": { + "default": 1.2666, + "cds-g0": "{carbon.typography.heading05.line-height}", + "cds-g10": "{carbon.typography.heading05.line-height}", + "cds-g90": "{carbon.typography.heading05.line-height}", + "cds-g100": "{carbon.typography.heading05.line-height}" + }, + "key": "{typography.display-500.line-height}" + }, + "name": "token-typography-display-500-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "line-height" + ] + }, + { + "key": "{typography.display-500.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading05.letter-spacing}", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading05.letter-spacing}", + "cds-g10": "{carbon.typography.heading05.letter-spacing}", + "cds-g90": "{carbon.typography.heading05.letter-spacing}", + "cds-g100": "{carbon.typography.heading05.letter-spacing}" + }, + "key": "{typography.display-500.letter-spacing}" + }, + "name": "token-typography-display-500-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "letter-spacing" + ] + }, + { + "key": "{typography.display-400.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-400.font-family}" + }, + "name": "token-typography-display-400-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "font-family" + ] + }, + { + "key": "{typography.display-400.font-size}", + "$type": "font-size", + "$value": "1.75rem", + "unit": "px", + "comment": "24px/1.5rem", + "$modes": { + "default": "24", + "cds-g0": "1.75rem", + "cds-g10": "1.75rem", + "cds-g90": "1.75rem", + "cds-g100": "1.75rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading04.font-size}", + "unit": "px", + "comment": "24px/1.5rem", + "$modes": { + "default": "24", + "cds-g0": "{carbon.typography.heading04.font-size}", + "cds-g10": "{carbon.typography.heading04.font-size}", + "cds-g90": "{carbon.typography.heading04.font-size}", + "cds-g100": "{carbon.typography.heading04.font-size}" + }, + "key": "{typography.display-400.font-size}" + }, + "name": "token-typography-display-400-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "font-size" + ] + }, + { + "key": "{typography.display-400.line-height}", + "$type": "number", + "$value": 1.28572, + "comment": "32px", + "$modes": { + "default": 1.3333, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading04.line-height}", + "comment": "32px", + "$modes": { + "default": 1.3333, + "cds-g0": "{carbon.typography.heading04.line-height}", + "cds-g10": "{carbon.typography.heading04.line-height}", + "cds-g90": "{carbon.typography.heading04.line-height}", + "cds-g100": "{carbon.typography.heading04.line-height}" + }, + "key": "{typography.display-400.line-height}" + }, + "name": "token-typography-display-400-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "line-height" + ] + }, + { + "key": "{typography.display-400.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading04.letter-spacing}", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.heading04.letter-spacing}", + "cds-g10": "{carbon.typography.heading04.letter-spacing}", + "cds-g90": "{carbon.typography.heading04.letter-spacing}", + "cds-g100": "{carbon.typography.heading04.letter-spacing}" + }, + "key": "{typography.display-400.letter-spacing}" + }, + "name": "token-typography-display-400-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "letter-spacing" + ] + }, + { + "key": "{typography.display-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-300.font-family}" + }, + "name": "token-typography-display-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "font-family" + ] + }, + { + "key": "{typography.display-300.font-size}", + "$type": "font-size", + "$value": "1.25rem", + "unit": "px", + "comment": "18px/1.125rem", + "$modes": { + "default": "18", + "cds-g0": "1.25rem", + "cds-g10": "1.25rem", + "cds-g90": "1.25rem", + "cds-g100": "1.25rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading03.font-size}", + "unit": "px", + "comment": "18px/1.125rem", + "$modes": { + "default": "18", + "cds-g0": "{carbon.typography.heading03.font-size}", + "cds-g10": "{carbon.typography.heading03.font-size}", + "cds-g90": "{carbon.typography.heading03.font-size}", + "cds-g100": "{carbon.typography.heading03.font-size}" + }, + "key": "{typography.display-300.font-size}" + }, + "name": "token-typography-display-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "font-size" + ] + }, + { + "key": "{typography.display-300.line-height}", + "$type": "number", + "$value": 1.4, + "comment": "24px", + "$modes": { + "default": 1.3333, + "cds-g0": 1.4, + "cds-g10": 1.4, + "cds-g90": 1.4, + "cds-g100": 1.4 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading03.line-height}", + "comment": "24px", + "$modes": { + "default": 1.3333, + "cds-g0": "{carbon.typography.heading03.line-height}", + "cds-g10": "{carbon.typography.heading03.line-height}", + "cds-g90": "{carbon.typography.heading03.line-height}", + "cds-g100": "{carbon.typography.heading03.line-height}" + }, + "key": "{typography.display-300.line-height}" + }, + "name": "token-typography-display-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "line-height" + ] + }, + { + "key": "{typography.display-300.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading03.letter-spacing}", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading03.letter-spacing}", + "cds-g10": "{carbon.typography.heading03.letter-spacing}", + "cds-g90": "{carbon.typography.heading03.letter-spacing}", + "cds-g100": "{carbon.typography.heading03.letter-spacing}" + }, + "key": "{typography.display-300.letter-spacing}" + }, + "name": "token-typography-display-300-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "letter-spacing" + ] + }, + { + "key": "{typography.display-200.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-200.font-family}" + }, + "name": "token-typography-display-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "font-family" + ] + }, + { + "key": "{typography.display-200.font-size}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading02.font-size}", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.heading02.font-size}", + "cds-g10": "{carbon.typography.heading02.font-size}", + "cds-g90": "{carbon.typography.heading02.font-size}", + "cds-g100": "{carbon.typography.heading02.font-size}" + }, + "key": "{typography.display-200.font-size}" + }, + "name": "token-typography-display-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "font-size" + ] + }, + { + "key": "{typography.display-200.line-height}", + "$type": "number", + "$value": 1.5, + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading02.line-height}", + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": "{carbon.typography.heading02.line-height}", + "cds-g10": "{carbon.typography.heading02.line-height}", + "cds-g90": "{carbon.typography.heading02.line-height}", + "cds-g100": "{carbon.typography.heading02.line-height}" + }, + "key": "{typography.display-200.line-height}" + }, + "name": "token-typography-display-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "line-height" + ] + }, + { + "key": "{typography.display-200.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading02.letter-spacing}", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading02.letter-spacing}", + "cds-g10": "{carbon.typography.heading02.letter-spacing}", + "cds-g90": "{carbon.typography.heading02.letter-spacing}", + "cds-g100": "{carbon.typography.heading02.letter-spacing}" + }, + "key": "{typography.display-200.letter-spacing}" + }, + "name": "token-typography-display-200-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "letter-spacing" + ] + }, + { + "key": "{typography.display-100.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-100.font-family}" + }, + "name": "token-typography-display-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "font-family" + ] + }, + { + "key": "{typography.display-100.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading01.font-size}", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.heading01.font-size}", + "cds-g10": "{carbon.typography.heading01.font-size}", + "cds-g90": "{carbon.typography.heading01.font-size}", + "cds-g100": "{carbon.typography.heading01.font-size}" + }, + "key": "{typography.display-100.font-size}" + }, + "name": "token-typography-display-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "font-size" + ] + }, + { + "key": "{typography.display-100.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading01.line-height}", + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": "{carbon.typography.heading01.line-height}", + "cds-g10": "{carbon.typography.heading01.line-height}", + "cds-g90": "{carbon.typography.heading01.line-height}", + "cds-g100": "{carbon.typography.heading01.line-height}" + }, + "key": "{typography.display-100.line-height}" + }, + "name": "token-typography-display-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "line-height" + ] + }, + { + "key": "{typography.display-100.letter-spacing}", + "$type": "letter-spacing", + "$value": "0.16px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0.16px", + "cds-g10": "0.16px", + "cds-g90": "0.16px", + "cds-g100": "0.16px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading01.letter-spacing}", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.heading01.letter-spacing}", + "cds-g10": "{carbon.typography.heading01.letter-spacing}", + "cds-g90": "{carbon.typography.heading01.letter-spacing}", + "cds-g100": "{carbon.typography.heading01.letter-spacing}" + }, + "key": "{typography.display-100.letter-spacing}" + }, + "name": "token-typography-display-100-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "letter-spacing" + ] + }, + { + "key": "{typography.body-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-300.font-family}" + }, + "name": "token-typography-body-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "font-family" + ] + }, + { + "key": "{typography.body-300.font-size}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.body02.font-size}", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.body02.font-size}", + "cds-g10": "{carbon.typography.body02.font-size}", + "cds-g90": "{carbon.typography.body02.font-size}", + "cds-g100": "{carbon.typography.body02.font-size}" + }, + "key": "{typography.body-300.font-size}" + }, + "name": "token-typography-body-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "font-size" + ] + }, + { + "key": "{typography.body-300.line-height}", + "$type": "number", + "$value": 1.5, + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.body02.line-height}", + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": "{carbon.typography.body02.line-height}", + "cds-g10": "{carbon.typography.body02.line-height}", + "cds-g90": "{carbon.typography.body02.line-height}", + "cds-g100": "{carbon.typography.body02.line-height}" + }, + "key": "{typography.body-300.line-height}" + }, + "name": "token-typography-body-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "line-height" + ] + }, + { + "key": "{typography.body-200.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-200.font-family}" + }, + "name": "token-typography-body-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "font-family" + ] + }, + { + "key": "{typography.body-200.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.body01.font-size}", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "{carbon.typography.body01.font-size}", + "cds-g10": "{carbon.typography.body01.font-size}", + "cds-g90": "{carbon.typography.body01.font-size}", + "cds-g100": "{carbon.typography.body01.font-size}" + }, + "key": "{typography.body-200.font-size}" + }, + "name": "token-typography-body-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "font-size" + ] + }, + { + "key": "{typography.body-200.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "20px", + "$modes": { + "default": 1.4286, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.body01.line-height}", + "comment": "20px", + "$modes": { + "default": 1.4286, + "cds-g0": "{carbon.typography.body01.line-height}", + "cds-g10": "{carbon.typography.body01.line-height}", + "cds-g90": "{carbon.typography.body01.line-height}", + "cds-g100": "{carbon.typography.body01.line-height}" + }, + "key": "{typography.body-200.line-height}" + }, + "name": "token-typography-body-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "line-height" + ] + }, + { + "key": "{typography.body-100.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-100.font-family}" + }, + "name": "token-typography-body-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "font-family" + ] + }, + { + "key": "{typography.body-100.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.bodyCompact01.font-size}", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.bodyCompact01.font-size}", + "cds-g10": "{carbon.typography.bodyCompact01.font-size}", + "cds-g90": "{carbon.typography.bodyCompact01.font-size}", + "cds-g100": "{carbon.typography.bodyCompact01.font-size}" + }, + "key": "{typography.body-100.font-size}" + }, + "name": "token-typography-body-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "font-size" + ] + }, + { + "key": "{typography.body-100.line-height}", + "$type": "number", + "$value": 1.28572, + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.bodyCompact01.line-height}", + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": "{carbon.typography.bodyCompact01.line-height}", + "cds-g10": "{carbon.typography.bodyCompact01.line-height}", + "cds-g90": "{carbon.typography.bodyCompact01.line-height}", + "cds-g100": "{carbon.typography.bodyCompact01.line-height}" + }, + "key": "{typography.body-100.line-height}" + }, + "name": "token-typography-body-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "line-height" + ] + }, + { + "key": "{typography.code-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-300.font-family}" + }, + "name": "token-typography-code-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "font-family" + ] + }, + { + "key": "{typography.code-300.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.code02.font-size}", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-300.font-size}" + }, + "name": "token-typography-code-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "font-size" + ] + }, + { + "key": "{typography.code-300.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "20px", + "$modes": { + "default": 1.25, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.code02.line-height}", + "comment": "20px", + "$modes": { + "default": 1.25, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-300.line-height}" + }, + "name": "token-typography-code-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "line-height" + ] + }, + { + "key": "{typography.code-200.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-200.font-family}" + }, + "name": "token-typography-code-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "font-family" + ] + }, + { + "key": "{typography.code-200.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.code02.font-size}", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-200.font-size}" + }, + "name": "token-typography-code-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "font-size" + ] + }, + { + "key": "{typography.code-200.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "18px", + "$modes": { + "default": 1.125, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.code02.line-height}", + "comment": "18px", + "$modes": { + "default": 1.125, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-200.line-height}" + }, + "name": "token-typography-code-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "line-height" + ] + }, + { + "key": "{typography.code-100.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-100.font-family}" + }, + "name": "token-typography-code-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "font-family" + ] + }, + { + "key": "{typography.code-100.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.code02.font-size}", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-100.font-size}" + }, + "name": "token-typography-code-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "font-size" + ] + }, + { + "key": "{typography.code-100.line-height}", + "$type": "number", + "$value": 1.33333, + "comment": "16px", + "$modes": { + "default": 1.23, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.code01.line-height}", + "comment": "16px", + "$modes": { + "default": 1.23, + "cds-g0": "{carbon.typography.code01.line-height}", + "cds-g10": "{carbon.typography.code01.line-height}", + "cds-g90": "{carbon.typography.code01.line-height}", + "cds-g100": "{carbon.typography.code01.line-height}" + }, + "key": "{typography.code-100.line-height}" + }, + "name": "token-typography-code-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "line-height" + ] + } +] \ No newline at end of file diff --git a/packages/tokens/dist/docs/products/themed-tokens/cds-g90.json b/packages/tokens/dist/docs/products/themed-tokens/cds-g90.json new file mode 100644 index 00000000000..491c93ecb68 --- /dev/null +++ b/packages/tokens/dist/docs/products/themed-tokens/cds-g90.json @@ -0,0 +1,15608 @@ +[ + { + "key": "{border.radius.x-small}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.x-small}" + }, + "name": "token-border-radius-x-small", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "x-small" + ] + }, + { + "key": "{border.radius.small}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.small}" + }, + "name": "token-border-radius-small", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "small" + ] + }, + { + "key": "{border.radius.medium}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.medium}" + }, + "name": "token-border-radius-medium", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "medium" + ] + }, + { + "key": "{border.radius.large}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.large}" + }, + "name": "token-border-radius-large", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "large" + ] + }, + { + "key": "{border.radius.rounded}", + "$type": "dimension", + "$value": "1000000000px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1000000000", + "unit": "px", + "key": "{border.radius.rounded}" + }, + "name": "token-border-radius-rounded", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "rounded" + ] + }, + { + "key": "{color.palette.blue-500}", + "$type": "color", + "$value": "#001141", + "group": "palette", + "$modes": { + "default": "#1c345f", + "cds-g0": "#001141", + "cds-g10": "#001141", + "cds-g90": "#001141", + "cds-g100": "#001141" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.100}", + "group": "palette", + "$modes": { + "default": "#1c345f", + "cds-g0": "{carbon.color.blue.100}", + "cds-g10": "{carbon.color.blue.100}", + "cds-g90": "{carbon.color.blue.100}", + "cds-g100": "{carbon.color.blue.100}" + }, + "key": "{color.palette.blue-500}" + }, + "name": "token-color-palette-blue-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-500" + ] + }, + { + "key": "{color.palette.blue-400}", + "$type": "color", + "$value": "#002d9c", + "group": "palette", + "$modes": { + "default": "#0046d1", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#002d9c", + "cds-g100": "#002d9c" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.80}", + "group": "palette", + "$modes": { + "default": "#0046d1", + "cds-g0": "{carbon.color.blue.80}", + "cds-g10": "{carbon.color.blue.80}", + "cds-g90": "{carbon.color.blue.80}", + "cds-g100": "{carbon.color.blue.80}" + }, + "key": "{color.palette.blue-400}" + }, + "name": "token-color-palette-blue-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-400" + ] + }, + { + "key": "{color.palette.blue-300}", + "$type": "color", + "$value": "#0043ce", + "group": "palette", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.70}", + "group": "palette", + "$modes": { + "default": "#0c56e9", + "cds-g0": "{carbon.color.blue.70}", + "cds-g10": "{carbon.color.blue.70}", + "cds-g90": "{carbon.color.blue.70}", + "cds-g100": "{carbon.color.blue.70}" + }, + "key": "{color.palette.blue-300}" + }, + "name": "token-color-palette-blue-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-300" + ] + }, + { + "key": "{color.palette.blue-200}", + "$type": "color", + "$value": "#0f62fe", + "group": "palette", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.60}", + "group": "palette", + "$modes": { + "default": "#1060ff", + "cds-g0": "{carbon.color.blue.60}", + "cds-g10": "{carbon.color.blue.60}", + "cds-g90": "{carbon.color.blue.60}", + "cds-g100": "{carbon.color.blue.60}" + }, + "key": "{color.palette.blue-200}" + }, + "name": "token-color-palette-blue-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-200" + ] + }, + { + "key": "{color.palette.blue-100}", + "$type": "color", + "$value": "#d0e2ff", + "group": "palette", + "$modes": { + "default": "#cce3fe", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.20}", + "group": "palette", + "$modes": { + "default": "#cce3fe", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.20}", + "cds-g100": "{carbon.color.blue.20}" + }, + "key": "{color.palette.blue-100}" + }, + "name": "token-color-palette-blue-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-100" + ] + }, + { + "key": "{color.palette.blue-50}", + "$type": "color", + "$value": "#edf5ff", + "group": "palette", + "$modes": { + "default": "#f2f8ff", + "cds-g0": "#edf5ff", + "cds-g10": "#edf5ff", + "cds-g90": "#edf5ff", + "cds-g100": "#edf5ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.10}", + "group": "palette", + "$modes": { + "default": "#f2f8ff", + "cds-g0": "{carbon.color.blue.10}", + "cds-g10": "{carbon.color.blue.10}", + "cds-g90": "{carbon.color.blue.10}", + "cds-g100": "{carbon.color.blue.10}" + }, + "key": "{color.palette.blue-50}" + }, + "name": "token-color-palette-blue-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-50" + ] + }, + { + "key": "{color.palette.purple-500}", + "$type": "color", + "$value": "#31135e", + "group": "palette", + "$modes": { + "default": "#42215b", + "cds-g0": "#31135e", + "cds-g10": "#31135e", + "cds-g90": "#31135e", + "cds-g100": "#31135e" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.90}", + "group": "palette", + "$modes": { + "default": "#42215b", + "cds-g0": "{carbon.color.purple.90}", + "cds-g10": "{carbon.color.purple.90}", + "cds-g90": "{carbon.color.purple.90}", + "cds-g100": "{carbon.color.purple.90}" + }, + "key": "{color.palette.purple-500}" + }, + "name": "token-color-palette-purple-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-500" + ] + }, + { + "key": "{color.palette.purple-400}", + "$type": "color", + "$value": "#6929c4", + "group": "palette", + "$modes": { + "default": "#7b00db", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.70}", + "group": "palette", + "$modes": { + "default": "#7b00db", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, + "key": "{color.palette.purple-400}" + }, + "name": "token-color-palette-purple-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-400" + ] + }, + { + "key": "{color.palette.purple-300}", + "$type": "color", + "$value": "#8a3ffc", + "group": "palette", + "$modes": { + "default": "#911ced", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#8a3ffc", + "cds-g100": "#8a3ffc" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.60}", + "group": "palette", + "$modes": { + "default": "#911ced", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.60}", + "cds-g100": "{carbon.color.purple.60}" + }, + "key": "{color.palette.purple-300}" + }, + "name": "token-color-palette-purple-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-300" + ] + }, + { + "key": "{color.palette.purple-200}", + "$type": "color", + "$value": "#a56eff", + "group": "palette", + "$modes": { + "default": "#a737ff", + "cds-g0": "#a56eff", + "cds-g10": "#a56eff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.50}", + "group": "palette", + "$modes": { + "default": "#a737ff", + "cds-g0": "{carbon.color.purple.50}", + "cds-g10": "{carbon.color.purple.50}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, + "key": "{color.palette.purple-200}" + }, + "name": "token-color-palette-purple-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-200" + ] + }, + { + "key": "{color.palette.purple-100}", + "$type": "color", + "$value": "#e8daff", + "group": "palette", + "$modes": { + "default": "#ead2fe", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.20}", + "group": "palette", + "$modes": { + "default": "#ead2fe", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.20}" + }, + "key": "{color.palette.purple-100}" + }, + "name": "token-color-palette-purple-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-100" + ] + }, + { + "key": "{color.palette.purple-50}", + "$type": "color", + "$value": "#f6f2ff", + "group": "palette", + "$modes": { + "default": "#f9f2ff", + "cds-g0": "#f6f2ff", + "cds-g10": "#f6f2ff", + "cds-g90": "#f6f2ff", + "cds-g100": "#f6f2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.10}", + "group": "palette", + "$modes": { + "default": "#f9f2ff", + "cds-g0": "{carbon.color.purple.10}", + "cds-g10": "{carbon.color.purple.10}", + "cds-g90": "{carbon.color.purple.10}", + "cds-g100": "{carbon.color.purple.10}" + }, + "key": "{color.palette.purple-50}" + }, + "name": "token-color-palette-purple-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-50" + ] + }, + { + "key": "{color.palette.green-500}", + "$type": "color", + "$value": "#044317", + "group": "palette", + "$modes": { + "default": "#054220", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#044317", + "cds-g100": "#044317" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.80}", + "group": "palette", + "$modes": { + "default": "#054220", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.80}", + "cds-g100": "{carbon.color.green.80}" + }, + "key": "{color.palette.green-500}" + }, + "name": "token-color-palette-green-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-500" + ] + }, + { + "key": "{color.palette.green-400}", + "$type": "color", + "$value": "#0e6027", + "group": "palette", + "$modes": { + "default": "#006619", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.70}", + "group": "palette", + "$modes": { + "default": "#006619", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, + "key": "{color.palette.green-400}" + }, + "name": "token-color-palette-green-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-400" + ] + }, + { + "key": "{color.palette.green-300}", + "$type": "color", + "$value": "#198038", + "group": "palette", + "$modes": { + "default": "#00781e", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#198038", + "cds-g100": "#198038" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.60}", + "group": "palette", + "$modes": { + "default": "#00781e", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.60}", + "cds-g100": "{carbon.color.green.60}" + }, + "key": "{color.palette.green-300}" + }, + "name": "token-color-palette-green-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-300" + ] + }, + { + "key": "{color.palette.green-200}", + "$type": "color", + "$value": "#24a148", + "group": "palette", + "$modes": { + "default": "#008a22", + "cds-g0": "#24a148", + "cds-g10": "#24a148", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.50}", + "group": "palette", + "$modes": { + "default": "#008a22", + "cds-g0": "{carbon.color.green.50}", + "cds-g10": "{carbon.color.green.50}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, + "key": "{color.palette.green-200}" + }, + "name": "token-color-palette-green-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-200" + ] + }, + { + "key": "{color.palette.green-100}", + "$type": "color", + "$value": "#a7f0ba", + "group": "palette", + "$modes": { + "default": "#cceeda", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.20}", + "group": "palette", + "$modes": { + "default": "#cceeda", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, + "key": "{color.palette.green-100}" + }, + "name": "token-color-palette-green-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-100" + ] + }, + { + "key": "{color.palette.green-50}", + "$type": "color", + "$value": "#defbe6", + "group": "palette", + "$modes": { + "default": "#f2fbf6", + "cds-g0": "#defbe6", + "cds-g10": "#defbe6", + "cds-g90": "#defbe6", + "cds-g100": "#defbe6" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.10}", + "group": "palette", + "$modes": { + "default": "#f2fbf6", + "cds-g0": "{carbon.color.green.10}", + "cds-g10": "{carbon.color.green.10}", + "cds-g90": "{carbon.color.green.10}", + "cds-g100": "{carbon.color.green.10}" + }, + "key": "{color.palette.green-50}" + }, + "name": "token-color-palette-green-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-50" + ] + }, + { + "key": "{color.palette.amber-500}", + "$type": "color", + "$value": "#3e1a00", + "group": "palette", + "$modes": { + "default": "#542800", + "cds-g0": "#3e1a00", + "cds-g10": "#3e1a00", + "cds-g90": "#3e1a00", + "cds-g100": "#3e1a00" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.90}", + "group": "palette", + "$modes": { + "default": "#542800", + "cds-g0": "{carbon.color.orange.90}", + "cds-g10": "{carbon.color.orange.90}", + "cds-g90": "{carbon.color.orange.90}", + "cds-g100": "{carbon.color.orange.90}" + }, + "key": "{color.palette.amber-500}" + }, + "name": "token-color-palette-amber-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-500" + ] + }, + { + "key": "{color.palette.amber-400}", + "$type": "color", + "$value": "#5e2900", + "group": "palette", + "$modes": { + "default": "#803d00", + "cds-g0": "#5e2900", + "cds-g10": "#5e2900", + "cds-g90": "#5e2900", + "cds-g100": "#5e2900" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.80}", + "group": "palette", + "$modes": { + "default": "#803d00", + "cds-g0": "{carbon.color.orange.80}", + "cds-g10": "{carbon.color.orange.80}", + "cds-g90": "{carbon.color.orange.80}", + "cds-g100": "{carbon.color.orange.80}" + }, + "key": "{color.palette.amber-400}" + }, + "name": "token-color-palette-amber-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-400" + ] + }, + { + "key": "{color.palette.amber-300}", + "$type": "color", + "$value": "#8a3800", + "group": "palette", + "$modes": { + "default": "#9e4b00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.70}", + "group": "palette", + "$modes": { + "default": "#9e4b00", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, + "key": "{color.palette.amber-300}" + }, + "name": "token-color-palette-amber-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-300" + ] + }, + { + "key": "{color.palette.amber-200}", + "$type": "color", + "$value": "#ba4e00", + "group": "palette", + "$modes": { + "default": "#bb5a00", + "cds-g0": "#ba4e00", + "cds-g10": "#ba4e00", + "cds-g90": "#ba4e00", + "cds-g100": "#ba4e00" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.60}", + "group": "palette", + "$modes": { + "default": "#bb5a00", + "cds-g0": "{carbon.color.orange.60}", + "cds-g10": "{carbon.color.orange.60}", + "cds-g90": "{carbon.color.orange.60}", + "cds-g100": "{carbon.color.orange.60}" + }, + "key": "{color.palette.amber-200}" + }, + "name": "token-color-palette-amber-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-200" + ] + }, + { + "key": "{color.palette.amber-100}", + "$type": "color", + "$value": "#ffd9be", + "group": "palette", + "$modes": { + "default": "#fbeabf", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.20}", + "group": "palette", + "$modes": { + "default": "#fbeabf", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "key": "{color.palette.amber-100}" + }, + "name": "token-color-palette-amber-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-100" + ] + }, + { + "key": "{color.palette.amber-50}", + "$type": "color", + "$value": "#fff2e8", + "group": "palette", + "$modes": { + "default": "#fff9e8", + "cds-g0": "#fff2e8", + "cds-g10": "#fff2e8", + "cds-g90": "#fff2e8", + "cds-g100": "#fff2e8" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.10}", + "group": "palette", + "$modes": { + "default": "#fff9e8", + "cds-g0": "{carbon.color.orange.10}", + "cds-g10": "{carbon.color.orange.10}", + "cds-g90": "{carbon.color.orange.10}", + "cds-g100": "{carbon.color.orange.10}" + }, + "key": "{color.palette.amber-50}" + }, + "name": "token-color-palette-amber-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-50" + ] + }, + { + "key": "{color.palette.red-500}", + "$type": "color", + "$value": "#520408", + "group": "palette", + "$modes": { + "default": "#51130a", + "cds-g0": "#520408", + "cds-g10": "#520408", + "cds-g90": "#520408", + "cds-g100": "#520408" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.90}", + "group": "palette", + "$modes": { + "default": "#51130a", + "cds-g0": "{carbon.color.red.90}", + "cds-g10": "{carbon.color.red.90}", + "cds-g90": "{carbon.color.red.90}", + "cds-g100": "{carbon.color.red.90}" + }, + "key": "{color.palette.red-500}" + }, + "name": "token-color-palette-red-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-500" + ] + }, + { + "key": "{color.palette.red-400}", + "$type": "color", + "$value": "#750e13", + "group": "palette", + "$modes": { + "default": "#940004", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#750e13", + "cds-g100": "#750e13" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.80}", + "group": "palette", + "$modes": { + "default": "#940004", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.80}", + "cds-g100": "{carbon.color.red.80}" + }, + "key": "{color.palette.red-400}" + }, + "name": "token-color-palette-red-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-400" + ] + }, + { + "key": "{color.palette.red-300}", + "$type": "color", + "$value": "#a2191f", + "group": "palette", + "$modes": { + "default": "#c00005", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.70}", + "group": "palette", + "$modes": { + "default": "#c00005", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, + "key": "{color.palette.red-300}" + }, + "name": "token-color-palette-red-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-300" + ] + }, + { + "key": "{color.palette.red-200}", + "$type": "color", + "$value": "#da1e28", + "group": "palette", + "$modes": { + "default": "#e52228", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.60}", + "group": "palette", + "$modes": { + "default": "#e52228", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.60}", + "cds-g100": "{carbon.color.red.60}" + }, + "key": "{color.palette.red-200}" + }, + "name": "token-color-palette-red-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-200" + ] + }, + { + "key": "{color.palette.red-100}", + "$type": "color", + "$value": "#ffd7d9", + "group": "palette", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.20}", + "group": "palette", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, + "key": "{color.palette.red-100}" + }, + "name": "token-color-palette-red-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-100" + ] + }, + { + "key": "{color.palette.red-50}", + "$type": "color", + "$value": "#fff1f1", + "group": "palette", + "$modes": { + "default": "#fff5f5", + "cds-g0": "#fff1f1", + "cds-g10": "#fff1f1", + "cds-g90": "#fff1f1", + "cds-g100": "#fff1f1" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.10}", + "group": "palette", + "$modes": { + "default": "#fff5f5", + "cds-g0": "{carbon.color.red.10}", + "cds-g10": "{carbon.color.red.10}", + "cds-g90": "{carbon.color.red.10}", + "cds-g100": "{carbon.color.red.10}" + }, + "key": "{color.palette.red-50}" + }, + "name": "token-color-palette-red-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-50" + ] + }, + { + "key": "{color.palette.neutral-700}", + "$type": "color", + "$value": "#161616", + "group": "palette", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.100}", + "group": "palette", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "{carbon.color.gray.100}", + "cds-g10": "{carbon.color.gray.100}", + "cds-g90": "{carbon.color.gray.100}", + "cds-g100": "{carbon.color.gray.100}" + }, + "key": "{color.palette.neutral-700}" + }, + "name": "token-color-palette-neutral-700", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-700" + ] + }, + { + "key": "{color.palette.neutral-600}", + "$type": "color", + "$value": "#393939", + "group": "palette", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#393939", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.80}", + "group": "palette", + "$modes": { + "default": "#3b3d45", + "cds-g0": "{carbon.color.gray.80}", + "cds-g10": "{carbon.color.gray.80}", + "cds-g90": "{carbon.color.gray.80}", + "cds-g100": "{carbon.color.gray.80}" + }, + "key": "{color.palette.neutral-600}" + }, + "name": "token-color-palette-neutral-600", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-600" + ] + }, + { + "key": "{color.palette.neutral-500}", + "$type": "color", + "$value": "#525252", + "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.70}", + "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": "{carbon.color.gray.70}", + "cds-g10": "{carbon.color.gray.70}", + "cds-g90": "{carbon.color.gray.70}", + "cds-g100": "{carbon.color.gray.70}" + }, + "key": "{color.palette.neutral-500}" + }, + "name": "token-color-palette-neutral-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-500" + ] + }, + { + "key": "{color.palette.neutral-400}", + "$type": "color", + "$value": "#8d8d8d", + "group": "palette", + "$modes": { + "default": "#8c909c", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.50}", + "group": "palette", + "$modes": { + "default": "#8c909c", + "cds-g0": "{carbon.color.gray.50}", + "cds-g10": "{carbon.color.gray.50}", + "cds-g90": "{carbon.color.gray.50}", + "cds-g100": "{carbon.color.gray.50}" + }, + "key": "{color.palette.neutral-400}" + }, + "name": "token-color-palette-neutral-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-400" + ] + }, + { + "key": "{color.palette.neutral-300}", + "$type": "color", + "$value": "#a8a8a8", + "group": "palette", + "$modes": { + "default": "#c2c5cb", + "cds-g0": "#a8a8a8", + "cds-g10": "#a8a8a8", + "cds-g90": "#a8a8a8", + "cds-g100": "#a8a8a8" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.40}", + "group": "palette", + "$modes": { + "default": "#c2c5cb", + "cds-g0": "{carbon.color.gray.40}", + "cds-g10": "{carbon.color.gray.40}", + "cds-g90": "{carbon.color.gray.40}", + "cds-g100": "{carbon.color.gray.40}" + }, + "key": "{color.palette.neutral-300}" + }, + "name": "token-color-palette-neutral-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-300" + ] + }, + { + "key": "{color.palette.neutral-200}", + "$type": "color", + "$value": "#c6c6c6", + "group": "palette", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.30}", + "group": "palette", + "$modes": { + "default": "#dedfe3", + "cds-g0": "{carbon.color.gray.30}", + "cds-g10": "{carbon.color.gray.30}", + "cds-g90": "{carbon.color.gray.30}", + "cds-g100": "{carbon.color.gray.30}" + }, + "key": "{color.palette.neutral-200}" + }, + "name": "token-color-palette-neutral-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-200" + ] + }, + { + "key": "{color.palette.neutral-100}", + "$type": "color", + "$value": "#e0e0e0", + "group": "palette", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#e0e0e0", + "cds-g100": "#e0e0e0" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.20}", + "group": "palette", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "{carbon.color.gray.20}", + "cds-g10": "{carbon.color.gray.20}", + "cds-g90": "{carbon.color.gray.20}", + "cds-g100": "{carbon.color.gray.20}" + }, + "key": "{color.palette.neutral-100}" + }, + "name": "token-color-palette-neutral-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-100" + ] + }, + { + "key": "{color.palette.neutral-50}", + "$type": "color", + "$value": "#f4f4f4", + "group": "palette", + "$modes": { + "default": "#fafafa", + "cds-g0": "#f4f4f4", + "cds-g10": "#f4f4f4", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.10}", + "group": "palette", + "$modes": { + "default": "#fafafa", + "cds-g0": "{carbon.color.gray.10}", + "cds-g10": "{carbon.color.gray.10}", + "cds-g90": "{carbon.color.gray.10}", + "cds-g100": "{carbon.color.gray.10}" + }, + "key": "{color.palette.neutral-50}" + }, + "name": "token-color-palette-neutral-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-50" + ] + }, + { + "key": "{color.palette.neutral-0}", + "$type": "color", + "$value": "#ffffff", + "group": "palette", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.white.0}", + "group": "palette", + "$modes": { + "default": "#ffffff", + "cds-g0": "{carbon.color.white.0}", + "cds-g10": "{carbon.color.white.0}", + "cds-g90": "{carbon.color.white.0}", + "cds-g100": "{carbon.color.white.0}" + }, + "key": "{color.palette.neutral-0}" + }, + "name": "token-color-palette-neutral-0", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-0" + ] + }, + { + "key": "{color.palette.alpha-300}", + "$type": "color", + "$value": "#8d8d8d", + "group": "palette", + "$modes": { + "default": "#393939", + "cds-g0": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#6f6f6f", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.50}", + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-600}", + "cds-g0": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.60}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "key": "{color.palette.alpha-300}" + }, + "name": "token-color-palette-alpha-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "alpha-300" + ] + }, + { + "key": "{color.palette.alpha-200}", + "$type": "color", + "$value": "#6f6f6f", + "group": "palette", + "$modes": { + "default": "#525252", + "cds-g0": { + "$value": "#c6c6c6", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#e0e0e0", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#6f6f6f", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#525252", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.60}", + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": { + "$value": "{carbon.color.gray.30}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.20}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.60}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.70}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "key": "{color.palette.alpha-200}" + }, + "name": "token-color-palette-alpha-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "alpha-200" + ] + }, + { + "key": "{color.palette.alpha-100}", + "$type": "color", + "$value": "#525252", + "group": "palette", + "$modes": { + "default": "#525252", + "cds-g0": { + "$value": "#e0e0e0", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#c6c6c6", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#525252", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#393939", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.70}", + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": { + "$value": "{carbon.color.gray.20}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.30}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.70}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.80}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "key": "{color.palette.alpha-100}" + }, + "name": "token-color-palette-alpha-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "alpha-100" + ] + }, + { + "key": "{color.border.primary}", + "$type": "color", + "$value": "#8d8d8d", + "group": "semantic", + "$modes": { + "default": "#6f6f6f", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.borderSubtle03}", + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-200}", + "cds-g0": "{carbon.themes.white.borderSubtle03}", + "cds-g10": "{carbon.themes.g10.borderSubtle03}", + "cds-g90": "{carbon.themes.g90.borderSubtle03}", + "cds-g100": "{carbon.themes.g100.borderSubtle03}" + }, + "key": "{color.border.primary}" + }, + "name": "token-color-border-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "primary" + ] + }, + { + "key": "{color.border.faint}", + "$type": "color", + "$value": "#525252", + "group": "semantic", + "$modes": { + "default": "#525252", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.borderSubtle00}", + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-100}", + "cds-g0": "{carbon.themes.white.borderSubtle00}", + "cds-g10": "{carbon.themes.g10.borderSubtle00}", + "cds-g90": "{carbon.themes.g90.borderSubtle00}", + "cds-g100": "{carbon.themes.g100.borderSubtle00}" + }, + "key": "{color.border.faint}" + }, + "name": "token-color-border-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "faint" + ] + }, + { + "key": "{color.border.strong}", + "$type": "color", + "$value": "#8d8d8d", + "group": "semantic", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.borderStrong01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-300}", + "cds-g0": "{carbon.themes.white.borderStrong01}", + "cds-g10": "{carbon.themes.g10.borderStrong01}", + "cds-g90": "{carbon.themes.g90.borderStrong01}", + "cds-g100": "{carbon.themes.g100.borderStrong01}" + }, + "key": "{color.border.strong}" + }, + "name": "token-color-border-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "strong" + ] + }, + { + "key": "{color.border.action}", + "$type": "color", + "$value": "#4589ff", + "group": "semantic", + "$modes": { + "default": "#d0e2ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.borderInteractive}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-100}", + "cds-g0": "{carbon.themes.white.borderInteractive}", + "cds-g10": "{carbon.themes.g10.borderInteractive}", + "cds-g90": "{carbon.themes.g90.borderInteractive}", + "cds-g100": "{carbon.themes.g100.borderInteractive}" + }, + "key": "{color.border.action}" + }, + "name": "token-color-border-action", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "action" + ] + }, + { + "key": "{color.border.highlight}", + "$type": "color", + "$value": "#a56eff", + "group": "semantic", + "$modes": { + "default": "#e8daff", + "cds-g0": "#be95ff", + "cds-g10": "#be95ff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-100}", + "cds-g0": "{carbon.color.purple.40}", + "cds-g10": "{carbon.color.purple.40}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, + "key": "{color.border.highlight}" + }, + "name": "token-color-border-highlight", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "highlight" + ] + }, + { + "key": "{color.border.success}", + "$type": "color", + "$value": "#24a148", + "group": "semantic", + "$modes": { + "default": "#a7f0ba", + "cds-g0": "#42be65", + "cds-g10": "#42be65", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-100}", + "cds-g0": "{carbon.color.green.40}", + "cds-g10": "{carbon.color.green.40}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, + "key": "{color.border.success}" + }, + "name": "token-color-border-success", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "success" + ] + }, + { + "key": "{color.border.warning}", + "$type": "color", + "$value": "#b28600", + "group": "semantic", + "$modes": { + "default": "#ffd9be", + "cds-g0": "#d2a106", + "cds-g10": "#d2a106", + "cds-g90": "#b28600", + "cds-g100": "#b28600" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.yellow.40}", + "cds-g10": "{carbon.color.yellow.40}", + "cds-g90": "{carbon.color.yellow.50}", + "cds-g100": "{carbon.color.yellow.50}" + }, + "key": "{color.border.warning}" + }, + "name": "token-color-border-warning", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "warning" + ] + }, + { + "key": "{color.border.critical}", + "$type": "color", + "$value": "#fa4d56", + "group": "semantic", + "$modes": { + "default": "#ffd7d9", + "cds-g0": "#ff8389", + "cds-g10": "#ff8389", + "cds-g90": "#fa4d56", + "cds-g100": "#fa4d56" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-100}", + "cds-g0": "{carbon.color.red.40}", + "cds-g10": "{carbon.color.red.40}", + "cds-g90": "{carbon.color.red.50}", + "cds-g100": "{carbon.color.red.50}" + }, + "key": "{color.border.critical}" + }, + "name": "token-color-border-critical", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "critical" + ] + }, + { + "key": "{color.focus.action.internal}", + "$type": "color", + "$value": "#161616", + "group": "semantic", + "$modes": { + "default": "#0043ce", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.focusInset}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, + "key": "{color.focus.action.internal}" + }, + "name": "token-color-focus-action-internal", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "action", + "internal" + ] + }, + { + "key": "{color.focus.action.external}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.focus}", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{color.focus.action.external}" + }, + "name": "token-color-focus-action-external", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "action", + "external" + ] + }, + { + "key": "{color.focus.critical.internal}", + "$type": "color", + "$value": "#161616", + "group": "semantic", + "$modes": { + "default": "#a2191f", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.focusInset}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, + "key": "{color.focus.critical.internal}" + }, + "name": "token-color-focus-critical-internal", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "critical", + "internal" + ] + }, + { + "key": "{color.focus.critical.external}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#dd7578", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.focus}", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#dd7578", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{color.focus.critical.external}" + }, + "name": "token-color-focus-critical-external", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "critical", + "external" + ] + }, + { + "key": "{color.foreground.strong}", + "$type": "color", + "$value": "#f4f4f4", + "group": "semantic", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textPrimary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{color.foreground.strong}" + }, + "name": "token-color-foreground-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "strong" + ] + }, + { + "key": "{color.foreground.primary}", + "$type": "color", + "$value": "#f4f4f4", + "group": "semantic", + "$modes": { + "default": "#393939", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textPrimary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-600}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{color.foreground.primary}" + }, + "name": "token-color-foreground-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "primary" + ] + }, + { + "key": "{color.foreground.faint}", + "$type": "color", + "$value": "#c6c6c6", + "group": "semantic", + "$modes": { + "default": "#525252", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textSecondary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{color.foreground.faint}" + }, + "name": "token-color-foreground-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "faint" + ] + }, + { + "key": "{color.foreground.high-contrast}", + "$type": "color", + "$value": "#161616", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textInverse}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{color.foreground.high-contrast}" + }, + "name": "token-color-foreground-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "high-contrast" + ] + }, + { + "key": "{color.foreground.disabled}", + "$type": "color", + "$value": "rgba(244, 244, 244, 0.25)", + "group": "semantic", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "rgba(22, 22, 22, 0.25)", + "cds-g10": "rgba(22, 22, 22, 0.25)", + "cds-g90": "rgba(244, 244, 244, 0.25)", + "cds-g100": "rgba(244, 244, 244, 0.25)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textDisabled}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textDisabled}", + "cds-g10": "{carbon.themes.g10.textDisabled}", + "cds-g90": "{carbon.themes.g90.textDisabled}", + "cds-g100": "{carbon.themes.g100.textDisabled}" + }, + "key": "{color.foreground.disabled}" + }, + "name": "token-color-foreground-disabled", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "disabled" + ] + }, + { + "key": "{color.foreground.action}", + "$type": "color", + "$value": "#78a9ff", + "group": "semantic", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#78a9ff", + "cds-g100": "#78a9ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.linkPrimary}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.white.linkPrimary}", + "cds-g10": "{carbon.themes.g10.linkPrimary}", + "cds-g90": "{carbon.themes.g90.linkPrimary}", + "cds-g100": "{carbon.themes.g100.linkPrimary}" + }, + "key": "{color.foreground.action}" + }, + "name": "token-color-foreground-action", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "action" + ] + }, + { + "key": "{color.foreground.action-hover}", + "$type": "color", + "$value": "#a6c8ff", + "group": "semantic", + "$modes": { + "default": "#0043ce", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.linkPrimaryHover}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, + "key": "{color.foreground.action-hover}" + }, + "name": "token-color-foreground-action-hover", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "action-hover" + ] + }, + { + "key": "{color.foreground.action-active}", + "$type": "color", + "$value": "#a6c8ff", + "group": "semantic", + "$modes": { + "default": "#002d9c", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.linkPrimaryHover}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, + "key": "{color.foreground.action-active}" + }, + "name": "token-color-foreground-action-active", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "action-active" + ] + }, + { + "key": "{color.foreground.highlight}", + "$type": "color", + "$value": "#be95ff", + "group": "semantic", + "$modes": { + "default": "#a56eff", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, + "key": "{color.foreground.highlight}" + }, + "name": "token-color-foreground-highlight", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "highlight" + ] + }, + { + "key": "{color.foreground.highlight-on-surface}", + "$type": "color", + "$value": "#d4bbff", + "group": "semantic", + "$modes": { + "default": "#8a3ffc", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#d4bbff", + "cds-g100": "#d4bbff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.30}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-300}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.30}", + "cds-g100": "{carbon.color.purple.30}" + }, + "key": "{color.foreground.highlight-on-surface}" + }, + "name": "token-color-foreground-highlight-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "highlight-on-surface" + ] + }, + { + "key": "{color.foreground.highlight-high-contrast}", + "$type": "color", + "$value": "#e8daff", + "group": "semantic", + "$modes": { + "default": "#31135e", + "cds-g0": "#491d8b", + "cds-g10": "#491d8b", + "cds-g90": "#e8daff", + "cds-g100": "#d4bbff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.20}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-500}", + "cds-g0": "{carbon.color.purple.80}", + "cds-g10": "{carbon.color.purple.80}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.30}" + }, + "key": "{color.foreground.highlight-high-contrast}" + }, + "name": "token-color-foreground-highlight-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "highlight-high-contrast" + ] + }, + { + "key": "{color.foreground.success}", + "$type": "color", + "$value": "#42be65", + "group": "semantic", + "$modes": { + "default": "#24a148", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#42be65", + "cds-g100": "#42be65" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-200}", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.40}", + "cds-g100": "{carbon.color.green.40}" + }, + "key": "{color.foreground.success}" + }, + "name": "token-color-foreground-success", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "success" + ] + }, + { + "key": "{color.foreground.success-on-surface}", + "$type": "color", + "$value": "#6fdc8c", + "group": "semantic", + "$modes": { + "default": "#198038", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#6fdc8c", + "cds-g100": "#6fdc8c" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.30}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-300}", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.30}", + "cds-g100": "{carbon.color.green.30}" + }, + "key": "{color.foreground.success-on-surface}" + }, + "name": "token-color-foreground-success-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "success-on-surface" + ] + }, + { + "key": "{color.foreground.success-high-contrast}", + "$type": "color", + "$value": "#a7f0ba", + "group": "semantic", + "$modes": { + "default": "#044317", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.20}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-500}", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, + "key": "{color.foreground.success-high-contrast}" + }, + "name": "token-color-foreground-success-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "success-high-contrast" + ] + }, + { + "key": "{color.foreground.warning}", + "$type": "color", + "$value": "#d2a106", + "group": "semantic", + "$modes": { + "default": "#ba4e00", + "cds-g0": "#8e6a00", + "cds-g10": "#8e6a00", + "cds-g90": "#d2a106", + "cds-g100": "#d2a106" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.yellow.60}", + "cds-g10": "{carbon.color.yellow.60}", + "cds-g90": "{carbon.color.yellow.40}", + "cds-g100": "{carbon.color.yellow.40}" + }, + "key": "{color.foreground.warning}" + }, + "name": "token-color-foreground-warning", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "warning" + ] + }, + { + "key": "{color.foreground.warning-on-surface}", + "$type": "color", + "$value": "#f1c21b", + "group": "semantic", + "$modes": { + "default": "#8a3800", + "cds-g0": "#684e00", + "cds-g10": "#684e00", + "cds-g90": "#f1c21b", + "cds-g100": "#f1c21b" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.30}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-300}", + "cds-g0": "{carbon.color.yellow.70}", + "cds-g10": "{carbon.color.yellow.70}", + "cds-g90": "{carbon.color.yellow.30}", + "cds-g100": "{carbon.color.yellow.30}" + }, + "key": "{color.foreground.warning-on-surface}" + }, + "name": "token-color-foreground-warning-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "warning-on-surface" + ] + }, + { + "key": "{color.foreground.warning-high-contrast}", + "$type": "color", + "$value": "#fddc69", + "group": "semantic", + "$modes": { + "default": "#3e1a00", + "cds-g0": "#483700", + "cds-g10": "#483700", + "cds-g90": "#fddc69", + "cds-g100": "#fddc69" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.20}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-500}", + "cds-g0": "{carbon.color.yellow.80}", + "cds-g10": "{carbon.color.yellow.80}", + "cds-g90": "{carbon.color.yellow.20}", + "cds-g100": "{carbon.color.yellow.20}" + }, + "key": "{color.foreground.warning-high-contrast}" + }, + "name": "token-color-foreground-warning-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "warning-high-contrast" + ] + }, + { + "key": "{color.foreground.critical}", + "$type": "color", + "$value": "#ff8389", + "group": "semantic", + "$modes": { + "default": "#da1e28", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#ff8389", + "cds-g100": "#ff8389" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.40}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-200}", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.40}", + "cds-g100": "{carbon.color.red.40}" + }, + "key": "{color.foreground.critical}" + }, + "name": "token-color-foreground-critical", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "critical" + ] + }, + { + "key": "{color.foreground.critical-on-surface}", + "$type": "color", + "$value": "#ffb3b8", + "group": "semantic", + "$modes": { + "default": "#a2191f", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffb3b8", + "cds-g100": "#ffb3b8" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.30}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.30}", + "cds-g100": "{carbon.color.red.30}" + }, + "key": "{color.foreground.critical-on-surface}" + }, + "name": "token-color-foreground-critical-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "critical-on-surface" + ] + }, + { + "key": "{color.foreground.critical-high-contrast}", + "$type": "color", + "$value": "#ffd7d9", + "group": "semantic", + "$modes": { + "default": "#520408", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.20}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-500}", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, + "key": "{color.foreground.critical-high-contrast}" + }, + "name": "token-color-foreground-critical-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "critical-high-contrast" + ] + }, + { + "key": "{color.page.primary}", + "$type": "color", + "$value": "#262626", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.background}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, + "key": "{color.page.primary}" + }, + "name": "token-color-page-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "page", + "primary" + ] + }, + { + "key": "{color.page.faint}", + "$type": "color", + "$value": "#262626", + "group": "semantic", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.background}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, + "key": "{color.page.faint}" + }, + "name": "token-color-page-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "page", + "faint" + ] + }, + { + "key": "{color.surface.primary}", + "$type": "color", + "$value": "#393939", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.layer01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, + "key": "{color.surface.primary}" + }, + "name": "token-color-surface-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "primary" + ] + }, + { + "key": "{color.surface.faint}", + "$type": "color", + "$value": "#393939", + "group": "semantic", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.layer01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, + "key": "{color.surface.faint}" + }, + "name": "token-color-surface-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "faint" + ] + }, + { + "key": "{color.surface.strong}", + "$type": "color", + "$value": "#525252", + "group": "semantic", + "$modes": { + "default": "#e0e0e0", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.layerAccent01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerAccent01}", + "cds-g10": "{carbon.themes.g10.layerAccent01}", + "cds-g90": "{carbon.themes.g90.layerAccent01}", + "cds-g100": "{carbon.themes.g100.layerAccent01}" + }, + "key": "{color.surface.strong}" + }, + "name": "token-color-surface-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "strong" + ] + }, + { + "key": "{color.surface.high-contrast}", + "$type": "color", + "$value": "#f4f4f4", + "group": "semantic", + "$modes": { + "default": "#161616", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.backgroundInverse}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "key": "{color.surface.high-contrast}" + }, + "name": "token-color-surface-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "high-contrast" + ] + }, + { + "key": "{color.surface.interactive}", + "$type": "color", + "$value": "#393939", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.layer01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, + "key": "{color.surface.interactive}" + }, + "name": "token-color-surface-interactive", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive" + ] + }, + { + "key": "{color.surface.interactive-hover}", + "$type": "color", + "$value": "#474747", + "group": "semantic", + "$modes": { + "default": "#e0e0e0", + "cds-g0": "#e8e8e8", + "cds-g10": "#e8e8e8", + "cds-g90": "#474747", + "cds-g100": "#333333" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.layerHover01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerHover01}", + "cds-g10": "{carbon.themes.g10.layerHover01}", + "cds-g90": "{carbon.themes.g90.layerHover01}", + "cds-g100": "{carbon.themes.g100.layerHover01}" + }, + "key": "{color.surface.interactive-hover}" + }, + "name": "token-color-surface-interactive-hover", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive-hover" + ] + }, + { + "key": "{color.surface.interactive-active}", + "$type": "color", + "$value": "#6f6f6f", + "group": "semantic", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.layerActive01}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.white.layerActive01}", + "cds-g10": "{carbon.themes.g10.layerActive01}", + "cds-g90": "{carbon.themes.g90.layerActive01}", + "cds-g100": "{carbon.themes.g100.layerActive01}" + }, + "key": "{color.surface.interactive-active}" + }, + "name": "token-color-surface-interactive-active", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive-active" + ] + }, + { + "key": "{color.surface.interactive-disabled}", + "$type": "color", + "$value": "#6f6f6f", + "group": "semantic", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.60}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.color.gray.30}", + "cds-g10": "{carbon.color.gray.30}", + "cds-g90": "{carbon.color.gray.60}", + "cds-g100": "{carbon.color.gray.70}" + }, + "key": "{color.surface.interactive-disabled}" + }, + "name": "token-color-surface-interactive-disabled", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive-disabled" + ] + }, + { + "key": "{color.surface.action}", + "$type": "color", + "$value": "#0f62fe", + "group": "semantic", + "$modes": { + "default": "#edf5ff", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0f62fe", + "cds-g100": "#0043ce" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.blue.60}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-50}", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.60}", + "cds-g100": "{carbon.color.blue.70}" + }, + "key": "{color.surface.action}" + }, + "name": "token-color-surface-action", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "action" + ] + }, + { + "key": "{color.surface.highlight}", + "$type": "color", + "$value": "#6929c4", + "group": "semantic", + "$modes": { + "default": "#f6f2ff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-50}", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, + "key": "{color.surface.highlight}" + }, + "name": "token-color-surface-highlight", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "highlight" + ] + }, + { + "key": "{color.surface.success}", + "$type": "color", + "$value": "#0e6027", + "group": "semantic", + "$modes": { + "default": "#defbe6", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.green.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-50}", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, + "key": "{color.surface.success}" + }, + "name": "token-color-surface-success", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "success" + ] + }, + { + "key": "{color.surface.warning}", + "$type": "color", + "$value": "#684e00", + "group": "semantic", + "$modes": { + "default": "#fff2e8", + "cds-g0": "#fcf4d6", + "cds-g10": "#fcf4d6", + "cds-g90": "#684e00", + "cds-g100": "#684e00" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.yellow.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-50}", + "cds-g0": "{carbon.color.yellow.10}", + "cds-g10": "{carbon.color.yellow.10}", + "cds-g90": "{carbon.color.yellow.70}", + "cds-g100": "{carbon.color.yellow.70}" + }, + "key": "{color.surface.warning}" + }, + "name": "token-color-surface-warning", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "warning" + ] + }, + { + "key": "{color.surface.critical}", + "$type": "color", + "$value": "#a2191f", + "group": "semantic", + "$modes": { + "default": "#fff1f1", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.red.70}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-50}", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, + "key": "{color.surface.critical}" + }, + "name": "token-color-surface-critical", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "critical" + ] + }, + { + "key": "{color.hashicorp.brand}", + "$type": "color", + "$value": "#ffffff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.hashicorp-brand}", + "group": "branding", + "key": "{color.hashicorp.brand}" + }, + "name": "token-color-hashicorp-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "hashicorp", + "brand" + ] + }, + { + "key": "{color.boundary.brand}", + "$type": "color", + "$value": "#f24c53", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-brand}", + "group": "branding", + "key": "{color.boundary.brand}" + }, + "name": "token-color-boundary-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "brand" + ] + }, + { + "key": "{color.boundary.foreground}", + "$type": "color", + "$value": "#cf2d32", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-500}", + "group": "branding", + "key": "{color.boundary.foreground}" + }, + "name": "token-color-boundary-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "foreground" + ] + }, + { + "key": "{color.boundary.surface}", + "$type": "color", + "$value": "#ffecec", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-50}", + "group": "branding", + "key": "{color.boundary.surface}" + }, + "name": "token-color-boundary-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "surface" + ] + }, + { + "key": "{color.boundary.border}", + "$type": "color", + "$value": "#fbd7d8", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-100}", + "group": "branding", + "key": "{color.boundary.border}" + }, + "name": "token-color-boundary-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "border" + ] + }, + { + "key": "{color.boundary.gradient.primary.start}", + "$type": "color", + "$value": "#f97076", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-300}", + "group": "branding", + "key": "{color.boundary.gradient.primary.start}" + }, + "name": "token-color-boundary-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.boundary.gradient.primary.stop}", + "$type": "color", + "$value": "#db363b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-400}", + "group": "branding", + "key": "{color.boundary.gradient.primary.stop}" + }, + "name": "token-color-boundary-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.boundary.gradient.faint.start}", + "$type": "color", + "$value": "#fffafa", + "group": "branding", + "comment": "this is the 'boundary-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffafa", + "group": "branding", + "comment": "this is the 'boundary-50' value at 25% opacity on white", + "key": "{color.boundary.gradient.faint.start}" + }, + "name": "token-color-boundary-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.boundary.gradient.faint.stop}", + "$type": "color", + "$value": "#ffecec", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-50}", + "group": "branding", + "key": "{color.boundary.gradient.faint.stop}" + }, + "name": "token-color-boundary-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.consul.brand}", + "$type": "color", + "$value": "#e03875", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-brand}", + "group": "branding", + "key": "{color.consul.brand}" + }, + "name": "token-color-consul-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "brand" + ] + }, + { + "key": "{color.consul.foreground}", + "$type": "color", + "$value": "#d01c5b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-500}", + "group": "branding", + "key": "{color.consul.foreground}" + }, + "name": "token-color-consul-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "foreground" + ] + }, + { + "key": "{color.consul.surface}", + "$type": "color", + "$value": "#ffe9f1", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-50}", + "group": "branding", + "key": "{color.consul.surface}" + }, + "name": "token-color-consul-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "surface" + ] + }, + { + "key": "{color.consul.border}", + "$type": "color", + "$value": "#ffcede", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-100}", + "group": "branding", + "key": "{color.consul.border}" + }, + "name": "token-color-consul-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "border" + ] + }, + { + "key": "{color.consul.gradient.primary.start}", + "$type": "color", + "$value": "#ff99be", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-300}", + "group": "branding", + "key": "{color.consul.gradient.primary.start}" + }, + "name": "token-color-consul-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.consul.gradient.primary.stop}", + "$type": "color", + "$value": "#da306e", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-400}", + "group": "branding", + "key": "{color.consul.gradient.primary.stop}" + }, + "name": "token-color-consul-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.consul.gradient.faint.start}", + "$type": "color", + "$value": "#fff9fb", + "group": "branding", + "comment": "this is the 'consul-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fff9fb", + "group": "branding", + "comment": "this is the 'consul-50' value at 25% opacity on white", + "key": "{color.consul.gradient.faint.start}" + }, + "name": "token-color-consul-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.consul.gradient.faint.stop}", + "$type": "color", + "$value": "#ffe9f1", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-50}", + "group": "branding", + "key": "{color.consul.gradient.faint.stop}" + }, + "name": "token-color-consul-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.hcp.brand}", + "$type": "color", + "$value": "#ffffff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.hcp-brand}", + "group": "branding", + "key": "{color.hcp.brand}" + }, + "name": "token-color-hcp-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "hcp", + "brand" + ] + }, + { + "key": "{color.nomad.brand}", + "$type": "color", + "$value": "#06d092", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-brand}", + "group": "branding", + "key": "{color.nomad.brand}" + }, + "name": "token-color-nomad-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "brand" + ] + }, + { + "key": "{color.nomad.foreground}", + "$type": "color", + "$value": "#008661", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-500}", + "group": "branding", + "key": "{color.nomad.foreground}" + }, + "name": "token-color-nomad-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "foreground" + ] + }, + { + "key": "{color.nomad.surface}", + "$type": "color", + "$value": "#d3fdeb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-50}", + "group": "branding", + "key": "{color.nomad.surface}" + }, + "name": "token-color-nomad-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "surface" + ] + }, + { + "key": "{color.nomad.border}", + "$type": "color", + "$value": "#bff3dd", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-100}", + "group": "branding", + "key": "{color.nomad.border}" + }, + "name": "token-color-nomad-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "border" + ] + }, + { + "key": "{color.nomad.gradient.primary.start}", + "$type": "color", + "$value": "#bff3dd", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-100}", + "group": "branding", + "key": "{color.nomad.gradient.primary.start}" + }, + "name": "token-color-nomad-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.nomad.gradient.primary.stop}", + "$type": "color", + "$value": "#60dea9", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-200}", + "group": "branding", + "key": "{color.nomad.gradient.primary.stop}" + }, + "name": "token-color-nomad-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.nomad.gradient.faint.start}", + "$type": "color", + "$value": "#f3fff9", + "group": "branding", + "comment": "this is the 'nomad-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#f3fff9", + "group": "branding", + "comment": "this is the 'nomad-50' value at 25% opacity on white", + "key": "{color.nomad.gradient.faint.start}" + }, + "name": "token-color-nomad-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.nomad.gradient.faint.stop}", + "$type": "color", + "$value": "#d3fdeb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-50}", + "group": "branding", + "key": "{color.nomad.gradient.faint.stop}" + }, + "name": "token-color-nomad-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.packer.brand}", + "$type": "color", + "$value": "#02a8ef", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-brand}", + "group": "branding", + "key": "{color.packer.brand}" + }, + "name": "token-color-packer-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "brand" + ] + }, + { + "key": "{color.packer.foreground}", + "$type": "color", + "$value": "#007eb4", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-500}", + "group": "branding", + "key": "{color.packer.foreground}" + }, + "name": "token-color-packer-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "foreground" + ] + }, + { + "key": "{color.packer.surface}", + "$type": "color", + "$value": "#d4f2ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-50}", + "group": "branding", + "key": "{color.packer.surface}" + }, + "name": "token-color-packer-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "surface" + ] + }, + { + "key": "{color.packer.border}", + "$type": "color", + "$value": "#b4e4ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-100}", + "group": "branding", + "key": "{color.packer.border}" + }, + "name": "token-color-packer-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "border" + ] + }, + { + "key": "{color.packer.gradient.primary.start}", + "$type": "color", + "$value": "#b4e4ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-100}", + "group": "branding", + "key": "{color.packer.gradient.primary.start}" + }, + "name": "token-color-packer-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.packer.gradient.primary.stop}", + "$type": "color", + "$value": "#63d0ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-200}", + "group": "branding", + "key": "{color.packer.gradient.primary.stop}" + }, + "name": "token-color-packer-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.packer.gradient.faint.start}", + "$type": "color", + "$value": "#f3fcff", + "group": "branding", + "comment": "this is the 'packer-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#F3FCFF", + "group": "branding", + "comment": "this is the 'packer-50' value at 25% opacity on white", + "key": "{color.packer.gradient.faint.start}" + }, + "name": "token-color-packer-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.packer.gradient.faint.stop}", + "$type": "color", + "$value": "#d4f2ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-50}", + "group": "branding", + "key": "{color.packer.gradient.faint.stop}" + }, + "name": "token-color-packer-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.terraform.brand}", + "$type": "color", + "$value": "#7b42bc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-brand}", + "group": "branding", + "key": "{color.terraform.brand}" + }, + "name": "token-color-terraform-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "brand" + ] + }, + { + "key": "{color.terraform.brand-on-dark}", + "$type": "color", + "$value": "#a067da", + "group": "branding", + "comment": "this is an alternative brand color meant to be used on dark backgrounds", + "original": { + "$type": "color", + "$value": "#a067da", + "group": "branding", + "comment": "this is an alternative brand color meant to be used on dark backgrounds", + "key": "{color.terraform.brand-on-dark}" + }, + "name": "token-color-terraform-brand-on-dark", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "brand-on-dark" + ] + }, + { + "key": "{color.terraform.foreground}", + "$type": "color", + "$value": "#773cb4", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-500}", + "group": "branding", + "key": "{color.terraform.foreground}" + }, + "name": "token-color-terraform-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "foreground" + ] + }, + { + "key": "{color.terraform.surface}", + "$type": "color", + "$value": "#f4ecff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-50}", + "group": "branding", + "key": "{color.terraform.surface}" + }, + "name": "token-color-terraform-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "surface" + ] + }, + { + "key": "{color.terraform.border}", + "$type": "color", + "$value": "#ebdbfc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-100}", + "group": "branding", + "key": "{color.terraform.border}" + }, + "name": "token-color-terraform-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "border" + ] + }, + { + "key": "{color.terraform.gradient.primary.start}", + "$type": "color", + "$value": "#bb8deb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-300}", + "group": "branding", + "key": "{color.terraform.gradient.primary.start}" + }, + "name": "token-color-terraform-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.terraform.gradient.primary.stop}", + "$type": "color", + "$value": "#844fba", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-400}", + "group": "branding", + "key": "{color.terraform.gradient.primary.stop}" + }, + "name": "token-color-terraform-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.terraform.gradient.faint.start}", + "$type": "color", + "$value": "#fcfaff", + "group": "branding", + "comment": "this is the 'terraform-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fcfaff", + "group": "branding", + "comment": "this is the 'terraform-50' value at 25% opacity on white", + "key": "{color.terraform.gradient.faint.start}" + }, + "name": "token-color-terraform-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.terraform.gradient.faint.stop}", + "$type": "color", + "$value": "#f4ecff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-50}", + "group": "branding", + "key": "{color.terraform.gradient.faint.stop}" + }, + "name": "token-color-terraform-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.vagrant.brand}", + "$type": "color", + "$value": "#1868f2", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-brand}", + "group": "branding", + "key": "{color.vagrant.brand}" + }, + "name": "token-color-vagrant-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "brand" + ] + }, + { + "key": "{color.vagrant.foreground}", + "$type": "color", + "$value": "#1c61d8", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-500}", + "group": "branding", + "key": "{color.vagrant.foreground}" + }, + "name": "token-color-vagrant-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "foreground" + ] + }, + { + "key": "{color.vagrant.surface}", + "$type": "color", + "$value": "#d6ebff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-50}", + "group": "branding", + "key": "{color.vagrant.surface}" + }, + "name": "token-color-vagrant-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "surface" + ] + }, + { + "key": "{color.vagrant.border}", + "$type": "color", + "$value": "#c7dbfc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-100}", + "group": "branding", + "key": "{color.vagrant.border}" + }, + "name": "token-color-vagrant-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "border" + ] + }, + { + "key": "{color.vagrant.gradient.primary.start}", + "$type": "color", + "$value": "#639cff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-300}", + "group": "branding", + "key": "{color.vagrant.gradient.primary.start}" + }, + "name": "token-color-vagrant-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.vagrant.gradient.primary.stop}", + "$type": "color", + "$value": "#2e71e5", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-400}", + "group": "branding", + "key": "{color.vagrant.gradient.primary.stop}" + }, + "name": "token-color-vagrant-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.vagrant.gradient.faint.start}", + "$type": "color", + "$value": "#f4faff", + "group": "branding", + "comment": "this is the 'vagrant-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#f4faff", + "group": "branding", + "comment": "this is the 'vagrant-50' value at 25% opacity on white", + "key": "{color.vagrant.gradient.faint.start}" + }, + "name": "token-color-vagrant-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.vagrant.gradient.faint.stop}", + "$type": "color", + "$value": "#d6ebff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-50}", + "group": "branding", + "key": "{color.vagrant.gradient.faint.stop}" + }, + "name": "token-color-vagrant-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.vault-radar.brand}", + "$type": "color", + "$value": "#ffcf25", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-brand}", + "group": "branding", + "key": "{color.vault-radar.brand}" + }, + "name": "token-color-vault-radar-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "brand" + ] + }, + { + "key": "{color.vault-radar.brand-alt}", + "$type": "color", + "$value": "#ffffff", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work", + "original": { + "$type": "color", + "$value": "#FFF", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work", + "key": "{color.vault-radar.brand-alt}" + }, + "name": "token-color-vault-radar-brand-alt", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "brand-alt" + ] + }, + { + "key": "{color.vault-radar.foreground}", + "$type": "color", + "$value": "#9a6f00", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-500}", + "group": "branding", + "key": "{color.vault-radar.foreground}" + }, + "name": "token-color-vault-radar-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "foreground" + ] + }, + { + "key": "{color.vault-radar.surface}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-50}", + "group": "branding", + "key": "{color.vault-radar.surface}" + }, + "name": "token-color-vault-radar-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "surface" + ] + }, + { + "key": "{color.vault-radar.border}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-100}", + "group": "branding", + "key": "{color.vault-radar.border}" + }, + "name": "token-color-vault-radar-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "border" + ] + }, + { + "key": "{color.vault-radar.gradient.primary.start}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-100}", + "group": "branding", + "key": "{color.vault-radar.gradient.primary.start}" + }, + "name": "token-color-vault-radar-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.vault-radar.gradient.primary.stop}", + "$type": "color", + "$value": "#ffe543", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-200}", + "group": "branding", + "key": "{color.vault-radar.gradient.primary.stop}" + }, + "name": "token-color-vault-radar-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.vault-radar.gradient.faint.start}", + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-radar-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-radar-50' value at 25% opacity on white", + "key": "{color.vault-radar.gradient.faint.start}" + }, + "name": "token-color-vault-radar-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.vault-radar.gradient.faint.stop}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-50}", + "group": "branding", + "key": "{color.vault-radar.gradient.faint.stop}" + }, + "name": "token-color-vault-radar-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.vault-secrets.brand}", + "$type": "color", + "$value": "#ffcf25", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-brand}", + "group": "branding", + "key": "{color.vault-secrets.brand}" + }, + "name": "token-color-vault-secrets-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "brand" + ] + }, + { + "key": "{color.vault-secrets.brand-alt}", + "group": "branding", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work", + "original": { + "group": "branding", + "$type": "color", + "$value": "#FFF", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work", + "key": "{color.vault-secrets.brand-alt}" + }, + "name": "token-color-vault-secrets-brand-alt", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "brand-alt" + ] + }, + { + "key": "{color.vault-secrets.foreground}", + "$type": "color", + "$value": "#9a6f00", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-500}", + "group": "branding", + "key": "{color.vault-secrets.foreground}" + }, + "name": "token-color-vault-secrets-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "foreground" + ] + }, + { + "key": "{color.vault-secrets.surface}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-50}", + "group": "branding", + "key": "{color.vault-secrets.surface}" + }, + "name": "token-color-vault-secrets-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "surface" + ] + }, + { + "key": "{color.vault-secrets.border}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-100}", + "group": "branding", + "key": "{color.vault-secrets.border}" + }, + "name": "token-color-vault-secrets-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "border" + ] + }, + { + "key": "{color.vault-secrets.gradient.primary.start}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-100}", + "group": "branding", + "key": "{color.vault-secrets.gradient.primary.start}" + }, + "name": "token-color-vault-secrets-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.vault-secrets.gradient.primary.stop}", + "$type": "color", + "$value": "#ffe543", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-200}", + "group": "branding", + "key": "{color.vault-secrets.gradient.primary.stop}" + }, + "name": "token-color-vault-secrets-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.vault-secrets.gradient.faint.start}", + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-secrets-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-secrets-50' value at 25% opacity on white", + "key": "{color.vault-secrets.gradient.faint.start}" + }, + "name": "token-color-vault-secrets-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.vault-secrets.gradient.faint.stop}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-50}", + "group": "branding", + "key": "{color.vault-secrets.gradient.faint.stop}" + }, + "name": "token-color-vault-secrets-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.vault.brand}", + "$type": "color", + "$value": "#ffcf25", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-brand}", + "group": "branding", + "key": "{color.vault.brand}" + }, + "name": "token-color-vault-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "brand" + ] + }, + { + "key": "{color.vault.brand-alt}", + "$type": "color", + "$value": "#ffffff", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work", + "original": { + "$type": "color", + "$value": "#FFF", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work", + "key": "{color.vault.brand-alt}" + }, + "name": "token-color-vault-brand-alt", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "brand-alt" + ] + }, + { + "key": "{color.vault.foreground}", + "$type": "color", + "$value": "#9a6f00", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-500}", + "group": "branding", + "key": "{color.vault.foreground}" + }, + "name": "token-color-vault-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "foreground" + ] + }, + { + "key": "{color.vault.surface}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-50}", + "group": "branding", + "key": "{color.vault.surface}" + }, + "name": "token-color-vault-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "surface" + ] + }, + { + "key": "{color.vault.border}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-100}", + "group": "branding", + "key": "{color.vault.border}" + }, + "name": "token-color-vault-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "border" + ] + }, + { + "key": "{color.vault.gradient.primary.start}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-100}", + "group": "branding", + "key": "{color.vault.gradient.primary.start}" + }, + "name": "token-color-vault-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.vault.gradient.primary.stop}", + "$type": "color", + "$value": "#ffe543", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-200}", + "group": "branding", + "key": "{color.vault.gradient.primary.stop}" + }, + "name": "token-color-vault-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.vault.gradient.faint.start}", + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-50' value at 25% opacity on white", + "key": "{color.vault.gradient.faint.start}" + }, + "name": "token-color-vault-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.vault.gradient.faint.stop}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-50}", + "group": "branding", + "key": "{color.vault.gradient.faint.stop}" + }, + "name": "token-color-vault-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.waypoint.brand}", + "$type": "color", + "$value": "#14c6cb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-brand}", + "group": "branding", + "key": "{color.waypoint.brand}" + }, + "name": "token-color-waypoint-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "brand" + ] + }, + { + "key": "{color.waypoint.foreground}", + "$type": "color", + "$value": "#008196", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-500}", + "group": "branding", + "key": "{color.waypoint.foreground}" + }, + "name": "token-color-waypoint-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "foreground" + ] + }, + { + "key": "{color.waypoint.surface}", + "$type": "color", + "$value": "#e0fcff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-50}", + "group": "branding", + "key": "{color.waypoint.surface}" + }, + "name": "token-color-waypoint-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "surface" + ] + }, + { + "key": "{color.waypoint.border}", + "$type": "color", + "$value": "#cbf1f3", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-100}", + "group": "branding", + "key": "{color.waypoint.border}" + }, + "name": "token-color-waypoint-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "border" + ] + }, + { + "key": "{color.waypoint.gradient.primary.start}", + "$type": "color", + "$value": "#cbf1f3", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-100}", + "group": "branding", + "key": "{color.waypoint.gradient.primary.start}" + }, + "name": "token-color-waypoint-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.waypoint.gradient.primary.stop}", + "$type": "color", + "$value": "#62d4dc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-200}", + "group": "branding", + "key": "{color.waypoint.gradient.primary.stop}" + }, + "name": "token-color-waypoint-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.waypoint.gradient.faint.start}", + "$type": "color", + "$value": "#f6feff", + "group": "branding", + "comment": "this is the 'waypoint-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#f6feff", + "group": "branding", + "comment": "this is the 'waypoint-50' value at 25% opacity on white", + "key": "{color.waypoint.gradient.faint.start}" + }, + "name": "token-color-waypoint-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.waypoint.gradient.faint.stop}", + "$type": "color", + "$value": "#e0fcff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-50}", + "group": "branding", + "key": "{color.waypoint.gradient.faint.stop}" + }, + "name": "token-color-waypoint-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{elevation.inset.box-shadow}", + "$value": "none", + "$modes": { + "default": "inset 0px 1px 2px 1px #5252521a", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.inset.box-shadow-01}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.inset.box-shadow}" + }, + "name": "token-elevation-inset-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "inset", + "box-shadow" + ] + }, + { + "key": "{elevation.low.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 1px 1px 0px #5252520d, 0px 2px 2px 0px #5252520d", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.low.box-shadow-01}, {elevation.low.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.low.box-shadow}" + }, + "name": "token-elevation-low-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "low", + "box-shadow" + ] + }, + { + "key": "{elevation.mid.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #5252521a, 0px 8px 16px -10px #52525233", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.mid.box-shadow-01}, {elevation.mid.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.mid.box-shadow}" + }, + "name": "token-elevation-mid-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "mid", + "box-shadow" + ] + }, + { + "key": "{elevation.high.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #52525226, 0px 16px 16px -10px #52525233", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.high.box-shadow-01}, {elevation.high.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.high.box-shadow}" + }, + "name": "token-elevation-high-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "high", + "box-shadow" + ] + }, + { + "key": "{elevation.higher.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #5252521a, 0px 12px 28px 0px #52525240", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.higher.box-shadow-01}, {elevation.higher.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.higher.box-shadow}" + }, + "name": "token-elevation-higher-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "higher", + "box-shadow" + ] + }, + { + "key": "{elevation.overlay.box-shadow}", + "$value": "none", + "$modes": { + "default": "0px 2px 3px 0px #39393940, 0px 12px 24px 0px #39393959", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.overlay.box-shadow-01}, {elevation.overlay.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.overlay.box-shadow}" + }, + "name": "token-elevation-overlay-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "overlay", + "box-shadow" + ] + }, + { + "key": "{surface.inset.box-shadow}", + "$value": "none", + "$modes": { + "default": "inset 0 0 0 1px #5252524d, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.inset.box-shadow-border}, {elevation.inset.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.inset.box-shadow}" + }, + "name": "token-surface-inset-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "inset", + "box-shadow" + ] + }, + { + "key": "{surface.base.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525233", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.base.box-shadow-border}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.base.box-shadow}" + }, + "name": "token-surface-base-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "base", + "box-shadow" + ] + }, + { + "key": "{surface.low.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525226, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.low.box-shadow-border}, {elevation.low.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.low.box-shadow}" + }, + "name": "token-surface-low-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "low", + "box-shadow" + ] + }, + { + "key": "{surface.mid.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525226, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.mid.box-shadow-border}, {elevation.mid.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.mid.box-shadow}" + }, + "name": "token-surface-mid-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "mid", + "box-shadow" + ] + }, + { + "key": "{surface.high.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525240, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.high.box-shadow-border}, {elevation.high.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.high.box-shadow}" + }, + "name": "token-surface-high-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "high", + "box-shadow" + ] + }, + { + "key": "{surface.higher.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #52525233, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.higher.box-shadow-border}, {elevation.higher.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.higher.box-shadow}" + }, + "name": "token-surface-higher-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "higher", + "box-shadow" + ] + }, + { + "key": "{surface.overlay.box-shadow}", + "$value": "none", + "$modes": { + "default": "0 0 0 1px #39393940, none", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "none", + "$modes": { + "default": "{elevation.overlay.box-shadow-border}, {elevation.overlay.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.overlay.box-shadow}" + }, + "name": "token-surface-overlay-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "overlay", + "box-shadow" + ] + }, + { + "key": "{focus-ring.action.box-shadow}", + "$value": "inset 0 0 0 1px #161616, 0 0 0 3px #ffffff", + "original": { + "$value": "{focus-ring.action.internal-box-shadow}, {focus-ring.action.external-box-shadow}", + "key": "{focus-ring.action.box-shadow}" + }, + "name": "token-focus-ring-action-box-shadow", + "attributes": { + "category": "focus-ring" + }, + "path": [ + "focus-ring", + "action", + "box-shadow" + ] + }, + { + "key": "{focus-ring.critical.box-shadow}", + "$value": "inset 0 0 0 1px #161616, 0 0 0 3px #ffffff", + "original": { + "$value": "{focus-ring.critical.internal-box-shadow}, {focus-ring.critical.external-box-shadow}", + "key": "{focus-ring.critical.box-shadow}" + }, + "name": "token-focus-ring-critical-box-shadow", + "attributes": { + "category": "focus-ring" + }, + "path": [ + "focus-ring", + "critical", + "box-shadow" + ] + }, + { + "key": "{app-footer.focus.color.action.internal}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "var(--token-color-focus-action-internal)", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.focus}", + "$modes": { + "default": "var(--token-color-focus-action-internal)", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{app-footer.focus.color.action.internal}" + }, + "name": "token-app-footer-focus-color-action-internal", + "attributes": { + "category": "app-footer" + }, + "path": [ + "app-footer", + "focus", + "color", + "action", + "internal" + ] + }, + { + "key": "{app-header.height}", + "$type": "dimension", + "$value": "60px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "60", + "unit": "px", + "key": "{app-header.height}" + }, + "name": "token-app-header-height", + "attributes": { + "category": "app-header" + }, + "path": [ + "app-header", + "height" + ] + }, + { + "key": "{app-header.home-link.size}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{app-header.home-link.size}" + }, + "name": "token-app-header-home-link-size", + "attributes": { + "category": "app-header" + }, + "path": [ + "app-header", + "home-link", + "size" + ] + }, + { + "key": "{app-header.logo.size}", + "$type": "dimension", + "$value": "28px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "28", + "unit": "px", + "key": "{app-header.logo.size}" + }, + "name": "token-app-header-logo-size", + "attributes": { + "category": "app-header" + }, + "path": [ + "app-header", + "logo", + "size" + ] + }, + { + "key": "{app-side-nav.wrapper.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{app-side-nav.wrapper.border.width}" + }, + "name": "token-app-side-nav-wrapper-border-width", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "border", + "width" + ] + }, + { + "key": "{app-side-nav.wrapper.border.color}", + "$type": "color", + "$value": "var(--token-color-palette-neutral-200)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-palette-neutral-200)", + "group": "components", + "key": "{app-side-nav.wrapper.border.color}" + }, + "name": "token-app-side-nav-wrapper-border-color", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "border", + "color" + ] + }, + { + "key": "{app-side-nav.wrapper.padding.horizontal}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.horizontal}" + }, + "name": "token-app-side-nav-wrapper-padding-horizontal", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "horizontal" + ] + }, + { + "key": "{app-side-nav.wrapper.padding.vertical}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.vertical}" + }, + "name": "token-app-side-nav-wrapper-padding-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "vertical" + ] + }, + { + "key": "{app-side-nav.wrapper.padding.horizontal-minimized}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.horizontal-minimized}" + }, + "name": "token-app-side-nav-wrapper-padding-horizontal-minimized", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "horizontal-minimized" + ] + }, + { + "key": "{app-side-nav.wrapper.padding.vertical-minimized}", + "$type": "dimension", + "$value": "22px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "22", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.vertical-minimized}" + }, + "name": "token-app-side-nav-wrapper-padding-vertical-minimized", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "vertical-minimized" + ] + }, + { + "key": "{app-side-nav.toggle-button.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{app-side-nav.toggle-button.border.radius}" + }, + "name": "token-app-side-nav-toggle-button-border-radius", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "toggle-button", + "border", + "radius" + ] + }, + { + "key": "{app-side-nav.header.home-link.padding}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{app-side-nav.header.home-link.padding}" + }, + "name": "token-app-side-nav-header-home-link-padding", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "home-link", + "padding" + ] + }, + { + "key": "{app-side-nav.header.home-link.logo-size}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{app-side-nav.header.home-link.logo-size}" + }, + "name": "token-app-side-nav-header-home-link-logo-size", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "home-link", + "logo-size" + ] + }, + { + "key": "{app-side-nav.header.home-link.logo-size-minimized}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{app-side-nav.header.home-link.logo-size-minimized}" + }, + "name": "token-app-side-nav-header-home-link-logo-size-minimized", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "home-link", + "logo-size-minimized" + ] + }, + { + "key": "{app-side-nav.header.actions.spacing}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.header.actions.spacing}" + }, + "name": "token-app-side-nav-header-actions-spacing", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "actions", + "spacing" + ] + }, + { + "key": "{app-side-nav.body.list.margin-vertical}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{app-side-nav.body.list.margin-vertical}" + }, + "name": "token-app-side-nav-body-list-margin-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list", + "margin-vertical" + ] + }, + { + "key": "{app-side-nav.body.list-item.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{app-side-nav.body.list-item.height}" + }, + "name": "token-app-side-nav-body-list-item-height", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "height" + ] + }, + { + "key": "{app-side-nav.body.list-item.padding.horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.body.list-item.padding.horizontal}" + }, + "name": "token-app-side-nav-body-list-item-padding-horizontal", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "padding", + "horizontal" + ] + }, + { + "key": "{app-side-nav.body.list-item.padding.vertical}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{app-side-nav.body.list-item.padding.vertical}" + }, + "name": "token-app-side-nav-body-list-item-padding-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "padding", + "vertical" + ] + }, + { + "key": "{app-side-nav.body.list-item.spacing-vertical}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{app-side-nav.body.list-item.spacing-vertical}" + }, + "name": "token-app-side-nav-body-list-item-spacing-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "spacing-vertical" + ] + }, + { + "key": "{app-side-nav.body.list-item.content-spacing-horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.body.list-item.content-spacing-horizontal}" + }, + "name": "token-app-side-nav-body-list-item-content-spacing-horizontal", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "content-spacing-horizontal" + ] + }, + { + "key": "{app-side-nav.body.list-item.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{app-side-nav.body.list-item.border-radius}" + }, + "name": "token-app-side-nav-body-list-item-border-radius", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "border-radius" + ] + }, + { + "key": "{app-side-nav.color.foreground.primary}", + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "key": "{app-side-nav.color.foreground.primary}" + }, + "name": "token-app-side-nav-color-foreground-primary", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "foreground", + "primary" + ] + }, + { + "key": "{app-side-nav.color.foreground.strong}", + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "key": "{app-side-nav.color.foreground.strong}" + }, + "name": "token-app-side-nav-color-foreground-strong", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "foreground", + "strong" + ] + }, + { + "key": "{app-side-nav.color.foreground.faint}", + "$type": "color", + "$value": "var(--token-color-foreground-faint)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-foreground-faint)", + "group": "components", + "key": "{app-side-nav.color.foreground.faint}" + }, + "name": "token-app-side-nav-color-foreground-faint", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "foreground", + "faint" + ] + }, + { + "key": "{app-side-nav.color.surface.primary}", + "$type": "color", + "$value": "var(--token-color-surface-faint)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-surface-faint)", + "group": "components", + "key": "{app-side-nav.color.surface.primary}" + }, + "name": "token-app-side-nav-color-surface-primary", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "surface", + "primary" + ] + }, + { + "key": "{app-side-nav.color.surface.interactive-hover}", + "$type": "color", + "$value": "var(--token-color-surface-interactive-hover)", + "group": "semantic", + "original": { + "$type": "color", + "$value": "var(--token-color-surface-interactive-hover)", + "group": "semantic", + "key": "{app-side-nav.color.surface.interactive-hover}" + }, + "name": "token-app-side-nav-color-surface-interactive-hover", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "surface", + "interactive-hover" + ] + }, + { + "key": "{app-side-nav.color.surface.interactive-active}", + "$type": "color", + "$value": "var(--token-color-palette-neutral-300)", + "group": "semantic", + "original": { + "$type": "color", + "$value": "var(--token-color-palette-neutral-300)", + "group": "semantic", + "key": "{app-side-nav.color.surface.interactive-active}" + }, + "name": "token-app-side-nav-color-surface-interactive-active", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "surface", + "interactive-active" + ] + }, + { + "key": "{badge-count.padding.horizontal.small}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge-count.padding.horizontal.small}" + }, + "name": "token-badge-count-padding-horizontal-small", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "small" + ] + }, + { + "key": "{badge-count.padding.horizontal.medium}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge-count.padding.horizontal.medium}" + }, + "name": "token-badge-count-padding-horizontal-medium", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "medium" + ] + }, + { + "key": "{badge-count.padding.horizontal.large}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge-count.padding.horizontal.large}" + }, + "name": "token-badge-count-padding-horizontal-large", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "large" + ] + }, + { + "key": "{badge.height.small}", + "$type": "dimension", + "$value": "18px", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "18", + "cds-g10": "18", + "cds-g90": "18", + "cds-g100": "18" + }, + "original": { + "$type": "dimension", + "$value": "18", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "18", + "cds-g10": "18", + "cds-g90": "18", + "cds-g100": "18" + }, + "key": "{badge.height.small}" + }, + "name": "token-badge-height-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "small" + ] + }, + { + "key": "{badge.height.medium}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{badge.height.medium}" + }, + "name": "token-badge-height-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "medium" + ] + }, + { + "key": "{badge.height.large}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{badge.height.large}" + }, + "name": "token-badge-height-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "large" + ] + }, + { + "key": "{badge.padding.horizontal.small}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge.padding.horizontal.small}" + }, + "name": "token-badge-padding-horizontal-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "small" + ] + }, + { + "key": "{badge.padding.horizontal.medium}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge.padding.horizontal.medium}" + }, + "name": "token-badge-padding-horizontal-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "medium" + ] + }, + { + "key": "{badge.padding.horizontal.large}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.padding.horizontal.large}" + }, + "name": "token-badge-padding-horizontal-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "large" + ] + }, + { + "key": "{badge.padding.vertical.small}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "$modes": { + "default": "2", + "cds-g0": "1", + "cds-g10": "1", + "cds-g90": "1", + "cds-g100": "1" + }, + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "$modes": { + "default": "2", + "cds-g0": "1", + "cds-g10": "1", + "cds-g90": "1", + "cds-g100": "1" + }, + "key": "{badge.padding.vertical.small}" + }, + "name": "token-badge-padding-vertical-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "small" + ] + }, + { + "key": "{badge.padding.vertical.medium}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{badge.padding.vertical.medium}" + }, + "name": "token-badge-padding-vertical-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "medium" + ] + }, + { + "key": "{badge.padding.vertical.large}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{badge.padding.vertical.large}" + }, + "name": "token-badge-padding-vertical-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "large" + ] + }, + { + "key": "{badge.gap.small}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.small}" + }, + "name": "token-badge-gap-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "small" + ] + }, + { + "key": "{badge.gap.medium}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.medium}" + }, + "name": "token-badge-gap-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "medium" + ] + }, + { + "key": "{badge.gap.large}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.large}" + }, + "name": "token-badge-gap-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "large" + ] + }, + { + "key": "{badge.typography.font-size.small}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "12", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.small}" + }, + "name": "token-badge-typography-font-size-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "small" + ] + }, + { + "key": "{badge.typography.font-size.medium}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "12", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.medium}" + }, + "name": "token-badge-typography-font-size-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "medium" + ] + }, + { + "key": "{badge.typography.font-size.large}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "12", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.large}" + }, + "name": "token-badge-typography-font-size-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "large" + ] + }, + { + "key": "{badge.typography.line-height.small}", + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "original": { + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "key": "{badge.typography.line-height.small}" + }, + "name": "token-badge-typography-line-height-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "small" + ] + }, + { + "key": "{badge.typography.line-height.medium}", + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "original": { + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "key": "{badge.typography.line-height.medium}" + }, + "name": "token-badge-typography-line-height-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "medium" + ] + }, + { + "key": "{badge.typography.line-height.large}", + "$type": "number", + "$value": 1, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1, + "cds-g10": 1, + "cds-g90": 1, + "cds-g100": 1 + }, + "original": { + "$type": "number", + "$value": 1, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1, + "cds-g10": 1, + "cds-g90": 1, + "cds-g100": 1 + }, + "key": "{badge.typography.line-height.large}" + }, + "name": "token-badge-typography-line-height-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "large" + ] + }, + { + "key": "{badge.foreground.color.neutral.filled}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g90}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral.filled}" + }, + "name": "token-badge-foreground-color-neutral-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "filled" + ] + }, + { + "key": "{badge.foreground.color.neutral.inverted}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.gray.100}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.color.gray.20}", + "cds-g10": "{carbon.color.gray.20}", + "cds-g90": "{carbon.color.gray.100}", + "cds-g100": "{carbon.color.gray.100}" + }, + "key": "{badge.foreground.color.neutral.inverted}" + }, + "name": "token-badge-foreground-color-neutral-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.neutral.outlined}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g90}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral.outlined}" + }, + "name": "token-badge-foreground-color-neutral-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "outlined" + ] + }, + { + "key": "{badge.foreground.color.neutral-dark-mode.filled}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.neutral-dark-mode.filled}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "filled" + ] + }, + { + "key": "{badge.foreground.color.neutral-dark-mode.inverted}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g90}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral-dark-mode.inverted}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.neutral-dark-mode.outlined}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "comments": { + "cds": "In Figma the `cds` value uses a token `Tag/HighContrast/TagColor` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "comments": { + "cds": "In Figma the `cds` value uses a token `Tag/HighContrast/TagColor` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.neutral-dark-mode.outlined}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "outlined" + ] + }, + { + "key": "{badge.foreground.color.highlight.filled}", + "$type": "color", + "$value": "#e8daff", + "comment": "we don't use `highlight-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#6929c4", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorPurple.g90}", + "comment": "we don't use `highlight-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.purple-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorPurple.g100}" + }, + "key": "{badge.foreground.color.highlight.filled}" + }, + "name": "token-badge-foreground-color-highlight-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "filled" + ] + }, + { + "key": "{badge.foreground.color.highlight.inverted}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.highlight.inverted}" + }, + "name": "token-badge-foreground-color-highlight-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.highlight.outlined}", + "$type": "color", + "$value": "#e8daff", + "$modes": { + "default": "#be95ff", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorPurple.g90}", + "$modes": { + "default": "{color.foreground.highlight}", + "cds-g0": "{carbon.themes.tagTokens.tagColorPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorPurple.g100}" + }, + "key": "{badge.foreground.color.highlight.outlined}" + }, + "name": "token-badge-foreground-color-highlight-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "outlined" + ] + }, + { + "key": "{badge.foreground.color.success.filled}", + "$type": "color", + "$value": "#a7f0ba", + "comment": "we don't use `success-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#0e6027", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "comment": "we don't use `success-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.green-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.foreground.color.success.filled}" + }, + "name": "token-badge-foreground-color-success-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "filled" + ] + }, + { + "key": "{badge.foreground.color.success.inverted}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.success.inverted}" + }, + "name": "token-badge-foreground-color-success-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.success.outlined}", + "$type": "color", + "$value": "#a7f0ba", + "$modes": { + "default": "#42be65", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "$modes": { + "default": "{color.foreground.success}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.foreground.color.success.outlined}" + }, + "name": "token-badge-foreground-color-success-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "outlined" + ] + }, + { + "key": "{badge.foreground.color.warning.filled}", + "$type": "color", + "$value": "#ffd9be", + "$modes": { + "default": "#5e2900", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "hds": "we don't use `warning-on-surface` for accessibility (better contrast)", + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.20}", + "$modes": { + "default": "{color.palette.amber-400}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "hds": "we don't use `warning-on-surface` for accessibility (better contrast)", + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.warning.filled}" + }, + "name": "token-badge-foreground-color-warning-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "filled" + ] + }, + { + "key": "{badge.foreground.color.warning.inverted}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.warning.inverted}" + }, + "name": "token-badge-foreground-color-warning-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.warning.outlined}", + "$type": "color", + "$value": "#ffd9be", + "$modes": { + "default": "#d2a106", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.20}", + "$modes": { + "default": "{color.foreground.warning}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.warning.outlined}" + }, + "name": "token-badge-foreground-color-warning-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "outlined" + ] + }, + { + "key": "{badge.foreground.color.critical.filled}", + "$type": "color", + "$value": "#ffd7d9", + "comment": "we don't use `critical-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#750e13", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorRed.g90}", + "comment": "we don't use `critical-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.foreground.color.critical.filled}" + }, + "name": "token-badge-foreground-color-critical-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "filled" + ] + }, + { + "key": "{badge.foreground.color.critical.inverted}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textInverse}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.critical.inverted}" + }, + "name": "token-badge-foreground-color-critical-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.critical.outlined}", + "$type": "color", + "$value": "#ffd7d9", + "$modes": { + "default": "#ff8389", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorRed.g90}", + "$modes": { + "default": "{color.foreground.critical}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.foreground.color.critical.outlined}" + }, + "name": "token-badge-foreground-color-critical-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "outlined" + ] + }, + { + "key": "{badge.surface.color.neutral.filled}", + "$type": "color", + "$value": "#525252", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "$modes": { + "default": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{badge.surface.color.neutral.filled}" + }, + "name": "token-badge-surface-color-neutral-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "filled" + ] + }, + { + "key": "{badge.surface.color.neutral.inverted}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#525252", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead", + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.backgroundInverse}", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead", + "key": "{badge.surface.color.neutral.inverted}" + }, + "name": "token-badge-surface-color-neutral-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "inverted" + ] + }, + { + "key": "{badge.surface.color.neutral.outlined}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{badge.surface.color.neutral.outlined}" + }, + "name": "token-badge-surface-color-neutral-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "outlined" + ] + }, + { + "key": "{badge.surface.color.neutral-dark-mode.filled}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#525252", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component", + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.backgroundInverse}", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component", + "key": "{badge.surface.color.neutral-dark-mode.filled}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "filled" + ] + }, + { + "key": "{badge.surface.color.neutral-dark-mode.inverted}", + "$type": "color", + "$value": "#525252", + "$modes": { + "default": "#393939", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{badge.surface.color.neutral-dark-mode.inverted}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "inverted" + ] + }, + { + "key": "{badge.surface.color.neutral-dark-mode.outlined}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{badge.surface.color.neutral-dark-mode.outlined}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "outlined" + ] + }, + { + "key": "{badge.surface.color.highlight.filled}", + "$type": "color", + "$value": "#6929c4", + "comment": "we don't use `surface-highlight` for accessibility (better contrast)", + "$modes": { + "default": "#e8daff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundPurple.g90}", + "comment": "we don't use `surface-highlight` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.purple-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundPurple.g100}" + }, + "key": "{badge.surface.color.highlight.filled}" + }, + "name": "token-badge-surface-color-highlight-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "highlight", + "filled" + ] + }, + { + "key": "{badge.surface.color.highlight.inverted}", + "$type": "color", + "$value": "#be95ff", + "$modes": { + "default": "#a56eff", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.purple.40}", + "$modes": { + "default": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, + "key": "{badge.surface.color.highlight.inverted}" + }, + "name": "token-badge-surface-color-highlight-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "highlight", + "inverted" + ] + }, + { + "key": "{badge.surface.color.success.filled}", + "$type": "color", + "$value": "#0e6027", + "comment": "we don't use `surface-success` for accessibility (better contrast)", + "$modes": { + "default": "#a7f0ba", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGreen.g90}", + "comment": "we don't use `surface-success` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.green-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGreen.g100}" + }, + "key": "{badge.surface.color.success.filled}" + }, + "name": "token-badge-surface-color-success-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "success", + "filled" + ] + }, + { + "key": "{badge.surface.color.success.inverted}", + "$type": "color", + "$value": "#a7f0ba", + "$modes": { + "default": "#24a148", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "$modes": { + "default": "{color.palette.green-200}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.surface.color.success.inverted}" + }, + "name": "token-badge-surface-color-success-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "success", + "inverted" + ] + }, + { + "key": "{badge.surface.color.warning.filled}", + "$type": "color", + "$value": "#8a3800", + "comment": "we don't use `surface-warning` for accessibility (better contrast)", + "$modes": { + "default": "#ffd9be", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.70}", + "comment": "we don't use `surface-warning` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.surface.color.warning.filled}" + }, + "name": "token-badge-surface-color-warning-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "warning", + "filled" + ] + }, + { + "key": "{badge.surface.color.warning.inverted}", + "$type": "color", + "$value": "#ffd9be", + "$modes": { + "default": "#ba4e00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.orange.20}", + "$modes": { + "default": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.surface.color.warning.inverted}" + }, + "name": "token-badge-surface-color-warning-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "warning", + "inverted" + ] + }, + { + "key": "{badge.surface.color.critical.filled}", + "$type": "color", + "$value": "#a2191f", + "comment": "we don't use `surface-critical` for accessibility (better contrast)", + "$modes": { + "default": "#ffd7d9", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundRed.g90}", + "comment": "we don't use `surface-critical` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.red-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundRed.g100}" + }, + "key": "{badge.surface.color.critical.filled}" + }, + "name": "token-badge-surface-color-critical-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "critical", + "filled" + ] + }, + { + "key": "{badge.surface.color.critical.inverted}", + "$type": "color", + "$value": "#ffd7d9", + "$modes": { + "default": "#da1e28", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorRed.g90}", + "$modes": { + "default": "{color.palette.red-200}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.surface.color.critical.inverted}" + }, + "name": "token-badge-surface-color-critical-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "critical", + "inverted" + ] + }, + { + "key": "{badge.border.radius}", + "$type": "dimension", + "$value": "1000000000px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "1000000000px", + "cds-g10": "1000000000px", + "cds-g90": "1000000000px", + "cds-g100": "1000000000px" + }, + "original": { + "$type": "dimension", + "$value": "{border.radius.rounded}", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "{border.radius.rounded}", + "cds-g10": "{border.radius.rounded}", + "cds-g90": "{border.radius.rounded}", + "cds-g100": "{border.radius.rounded}" + }, + "key": "{badge.border.radius}" + }, + "name": "token-badge-border-radius", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "border", + "radius" + ] + }, + { + "key": "{badge.icon.size.small}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{badge.icon.size.small}" + }, + "name": "token-badge-icon-size-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "small" + ] + }, + { + "key": "{badge.icon.size.medium}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{badge.icon.size.medium}" + }, + "name": "token-badge-icon-size-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "medium" + ] + }, + { + "key": "{badge.icon.size.large}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{badge.icon.size.large}" + }, + "name": "token-badge-icon-size-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "large" + ] + }, + { + "key": "{button.height.small}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "$modes": { + "default": "28", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "$modes": { + "default": "28", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "key": "{button.height.small}" + }, + "name": "token-button-height-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "small" + ] + }, + { + "key": "{button.height.medium}", + "$type": "dimension", + "$value": "40px", + "unit": "px", + "$modes": { + "default": "36", + "cds-g0": "40", + "cds-g10": "40", + "cds-g90": "40", + "cds-g100": "40" + }, + "original": { + "$type": "dimension", + "$value": "40", + "unit": "px", + "$modes": { + "default": "36", + "cds-g0": "40", + "cds-g10": "40", + "cds-g90": "40", + "cds-g100": "40" + }, + "key": "{button.height.medium}" + }, + "name": "token-button-height-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "medium" + ] + }, + { + "key": "{button.height.large}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "$modes": { + "default": "48", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "$modes": { + "default": "48", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "key": "{button.height.large}" + }, + "name": "token-button-height-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "large" + ] + }, + { + "key": "{button.padding.horizontal.small}", + "$type": "dimension", + "$value": "15px", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "15", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.small}" + }, + "name": "token-button-padding-horizontal-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "small" + ] + }, + { + "key": "{button.padding.horizontal.medium}", + "$type": "dimension", + "$value": "15px", + "unit": "px", + "$modes": { + "default": "15", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "15", + "unit": "px", + "$modes": { + "default": "15", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.medium}" + }, + "name": "token-button-padding-horizontal-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "medium" + ] + }, + { + "key": "{button.padding.horizontal.large}", + "$type": "dimension", + "$value": "15px", + "unit": "px", + "$modes": { + "default": "19", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "15", + "unit": "px", + "$modes": { + "default": "19", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.large}" + }, + "name": "token-button-padding-horizontal-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "large" + ] + }, + { + "key": "{button.padding.vertical.small}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.small}" + }, + "name": "token-button-padding-vertical-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "small" + ] + }, + { + "key": "{button.padding.vertical.medium}", + "$type": "dimension", + "$value": "10px", + "unit": "px", + "$modes": { + "default": "9", + "cds-g0": "10", + "cds-g10": "10", + "cds-g90": "10", + "cds-g100": "10" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "10", + "unit": "px", + "$modes": { + "default": "9", + "cds-g0": "10", + "cds-g10": "10", + "cds-g90": "10", + "cds-g100": "10" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.medium}" + }, + "name": "token-button-padding-vertical-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "medium" + ] + }, + { + "key": "{button.padding.vertical.large}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "14", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.large}" + }, + "name": "token-button-padding-vertical-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "large" + ] + }, + { + "key": "{button.gap}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "key": "{button.gap}" + }, + "name": "token-button-gap", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "gap" + ] + }, + { + "key": "{button.typography.font-size.small}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.small}" + }, + "name": "token-button-typography-font-size-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "small" + ] + }, + { + "key": "{button.typography.font-size.medium}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.medium}" + }, + "name": "token-button-typography-font-size-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "medium" + ] + }, + { + "key": "{button.typography.font-size.large}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.large}" + }, + "name": "token-button-typography-font-size-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "large" + ] + }, + { + "key": "{button.typography.line-height.small}", + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)", + "$modes": { + "default": 0.9286, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)", + "$modes": { + "default": 0.9286, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.small}" + }, + "name": "token-button-typography-line-height-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "small" + ] + }, + { + "key": "{button.typography.line-height.medium}", + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 1.1429", + "$modes": { + "default": 1.1429, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 1.2858, + "comment": "14px ~ 1.1429", + "$modes": { + "default": 1.1429, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.medium}" + }, + "name": "token-button-typography-line-height-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "medium" + ] + }, + { + "key": "{button.typography.line-height.large}", + "$type": "number", + "$value": 1.2858, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 1.2858, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.large}" + }, + "name": "token-button-typography-line-height-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "large" + ] + }, + { + "key": "{button.foreground.color.primary.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.default}" + }, + "name": "token-button-foreground-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "default" + ] + }, + { + "key": "{button.foreground.color.primary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.hover}" + }, + "name": "token-button-foreground-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "hover" + ] + }, + { + "key": "{button.foreground.color.primary.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.focus}" + }, + "name": "token-button-foreground-color-primary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "focus" + ] + }, + { + "key": "{button.foreground.color.primary.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.active}" + }, + "name": "token-button-foreground-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "active" + ] + }, + { + "key": "{button.foreground.color.secondary.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.default}" + }, + "name": "token-button-foreground-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "default" + ] + }, + { + "key": "{button.foreground.color.secondary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.hover}" + }, + "name": "token-button-foreground-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "hover" + ] + }, + { + "key": "{button.foreground.color.secondary.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.focus}" + }, + "name": "token-button-foreground-color-secondary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "focus" + ] + }, + { + "key": "{button.foreground.color.secondary.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textOnColor}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.active}" + }, + "name": "token-button-foreground-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "active" + ] + }, + { + "key": "{button.foreground.color.tertiary.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#78a9ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiary.g90}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiary.g100}" + }, + "key": "{button.foreground.color.tertiary.default}" + }, + "name": "token-button-foreground-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "default" + ] + }, + { + "key": "{button.foreground.color.tertiary.hover}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#a6c8ff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textInverse}", + "$modes": { + "default": "{color.foreground.action-hover}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.hover}" + }, + "name": "token-button-foreground-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "hover" + ] + }, + { + "key": "{button.foreground.color.tertiary.focus}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#78a9ff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textInverse}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.focus}" + }, + "name": "token-button-foreground-color-tertiary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "focus" + ] + }, + { + "key": "{button.foreground.color.tertiary.active}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#a6c8ff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textInverse}", + "$modes": { + "default": "{color.foreground.action-active}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.active}" + }, + "name": "token-button-foreground-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "active" + ] + }, + { + "key": "{button.foreground.color.critical.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffb3b8", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textOnColor}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.default}" + }, + "name": "token-button-foreground-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "default" + ] + }, + { + "key": "{button.foreground.color.critical.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.hover}" + }, + "name": "token-button-foreground-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "hover" + ] + }, + { + "key": "{button.foreground.color.critical.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffb3b8", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textOnColor}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.focus}" + }, + "name": "token-button-foreground-color-critical-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "focus" + ] + }, + { + "key": "{button.foreground.color.critical.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#161616", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textOnColor}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.active}" + }, + "name": "token-button-foreground-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "active" + ] + }, + { + "key": "{button.foreground.color.disabled}", + "$type": "color", + "$value": "rgba(255, 255, 255, 0.25)", + "$modes": { + "default": "rgba(244, 244, 244, 0.25)", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "rgba(255, 255, 255, 0.25)", + "cds-g100": "rgba(255, 255, 255, 0.25)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textOnColorDisabled}", + "$modes": { + "default": "{color.foreground.disabled}", + "cds-g0": "{carbon.themes.white.textOnColorDisabled}", + "cds-g10": "{carbon.themes.g10.textOnColorDisabled}", + "cds-g90": "{carbon.themes.g90.textOnColorDisabled}", + "cds-g100": "{carbon.themes.g100.textOnColorDisabled}" + }, + "key": "{button.foreground.color.disabled}" + }, + "name": "token-button-foreground-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "disabled" + ] + }, + { + "key": "{button.surface.color.primary.default}", + "$type": "color", + "$value": "#0f62fe", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimary.g90}", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimary.g100}" + }, + "key": "{button.surface.color.primary.default}" + }, + "name": "token-button-surface-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "default" + ] + }, + { + "key": "{button.surface.color.primary.hover}", + "$type": "color", + "$value": "#0050e6", + "$modes": { + "default": "#0043ce", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#0050e6", + "cds-g100": "#0050e6" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimaryHover.g90}", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimaryHover.g100}" + }, + "key": "{button.surface.color.primary.hover}" + }, + "name": "token-button-surface-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "hover" + ] + }, + { + "key": "{button.surface.color.primary.focus}", + "$type": "color", + "$value": "#0f62fe", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimary.g90}", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimary.g100}" + }, + "key": "{button.surface.color.primary.focus}" + }, + "name": "token-button-surface-color-primary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "focus" + ] + }, + { + "key": "{button.surface.color.primary.active}", + "$type": "color", + "$value": "#002d9c", + "$modes": { + "default": "#002d9c", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#002d9c", + "cds-g100": "#002d9c" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonPrimaryActive.g90}", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimaryActive.g100}" + }, + "key": "{button.surface.color.primary.active}" + }, + "name": "token-button-surface-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "active" + ] + }, + { + "key": "{button.surface.color.secondary.default}", + "$type": "color", + "$value": "#6f6f6f", + "$modes": { + "default": "#393939", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#6f6f6f", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondary.g90}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondary.g100}" + }, + "key": "{button.surface.color.secondary.default}" + }, + "name": "token-button-surface-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "default" + ] + }, + { + "key": "{button.surface.color.secondary.hover}", + "$type": "color", + "$value": "#5e5e5e", + "$modes": { + "default": "#393939", + "cds-g0": "#474747", + "cds-g10": "#474747", + "cds-g90": "#5e5e5e", + "cds-g100": "#5e5e5e" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondaryHover.g90}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondaryHover.g100}" + }, + "key": "{button.surface.color.secondary.hover}" + }, + "name": "token-button-surface-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "hover" + ] + }, + { + "key": "{button.surface.color.secondary.focus}", + "$type": "color", + "$value": "#6f6f6f", + "$modes": { + "default": "#393939", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#6f6f6f", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondary.g90}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondary.g100}" + }, + "key": "{button.surface.color.secondary.focus}" + }, + "name": "token-button-surface-color-secondary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "focus" + ] + }, + { + "key": "{button.surface.color.secondary.active}", + "$type": "color", + "$value": "#393939", + "$modes": { + "default": "#6f6f6f", + "cds-g0": "#6f6f6f", + "cds-g10": "#6f6f6f", + "cds-g90": "#393939", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonSecondaryActive.g90}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondaryActive.g100}" + }, + "key": "{button.surface.color.secondary.active}" + }, + "name": "token-button-surface-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "active" + ] + }, + { + "key": "{button.surface.color.tertiary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{button.surface.color.tertiary.default}" + }, + "name": "token-button-surface-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "default" + ] + }, + { + "key": "{button.surface.color.tertiary.hover}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#393939", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiaryHover.g90}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryHover.g100}" + }, + "key": "{button.surface.color.tertiary.hover}" + }, + "name": "token-button-surface-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "hover" + ] + }, + { + "key": "{button.surface.color.tertiary.focus}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "transparent", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiaryHover.g90}", + "$modes": { + "default": "transparent", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryHover.g100}" + }, + "key": "{button.surface.color.tertiary.focus}" + }, + "name": "token-button-surface-color-tertiary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "focus" + ] + }, + { + "key": "{button.surface.color.tertiary.active}", + "$type": "color", + "$value": "#c6c6c6", + "$modes": { + "default": "#6f6f6f", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonTertiaryActive.g90}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryActive.g100}" + }, + "key": "{button.surface.color.tertiary.active}" + }, + "name": "token-button-surface-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "active" + ] + }, + { + "key": "{button.surface.color.critical.default}", + "$type": "color", + "$value": "#da1e28", + "$modes": { + "default": "#a2191f", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerPrimary.g90}", + "$modes": { + "default": "{color.surface.critical}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerPrimary.g100}" + }, + "key": "{button.surface.color.critical.default}" + }, + "name": "token-button-surface-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "default" + ] + }, + { + "key": "{button.surface.color.critical.hover}", + "$type": "color", + "$value": "#b81921", + "$modes": { + "default": "#a2191f", + "cds-g0": "#b81921", + "cds-g10": "#b81921", + "cds-g90": "#b81921", + "cds-g100": "#b81921" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerHover.g90}", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerHover.g100}" + }, + "key": "{button.surface.color.critical.hover}" + }, + "name": "token-button-surface-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "hover" + ] + }, + { + "key": "{button.surface.color.critical.focus}", + "$type": "color", + "$value": "#da1e28", + "$modes": { + "default": "#a2191f", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerPrimary.g90}", + "$modes": { + "default": "{color.surface.critical}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerPrimary.g100}" + }, + "key": "{button.surface.color.critical.focus}" + }, + "name": "token-button-surface-color-critical-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "focus" + ] + }, + { + "key": "{button.surface.color.critical.active}", + "$type": "color", + "$value": "#750e13", + "$modes": { + "default": "#750e13", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#750e13", + "cds-g100": "#750e13" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDangerActive.g90}", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerActive.g100}" + }, + "key": "{button.surface.color.critical.active}" + }, + "name": "token-button-surface-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "active" + ] + }, + { + "key": "{button.surface.color.disabled}", + "$type": "color", + "$value": "#8d8d8d", + "$modes": { + "default": "#393939", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.buttonTokens.buttonDisabled.g90}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDisabled.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDisabled.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDisabled.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDisabled.g100}" + }, + "key": "{button.surface.color.disabled}" + }, + "name": "token-button-surface-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "disabled" + ] + }, + { + "key": "{button.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{button.border.width}" + }, + "name": "token-button-border-width", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "width" + ] + }, + { + "key": "{button.border.radius}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{button.border.radius}" + }, + "name": "token-button-border-radius", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "radius" + ] + }, + { + "key": "{button.border.color.primary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#0043ce", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.default}" + }, + "name": "token-button-border-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "default" + ] + }, + { + "key": "{button.border.color.primary.hover}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#0043ce", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.hover}" + }, + "name": "token-button-border-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "hover" + ] + }, + { + "key": "{button.border.color.primary.focus.internal}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#161616", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.primary.focus.internal}" + }, + "name": "token-button-border-color-primary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "focus", + "internal" + ] + }, + { + "key": "{button.border.color.primary.focus.external}", + "$type": "color", + "$value": "#ff00ff", + "$modes": { + "default": "#ffffff", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "magenta", + "$modes": { + "default": "{color.focus.action.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.primary.focus.external}" + }, + "name": "token-button-border-color-primary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "focus", + "external" + ] + }, + { + "key": "{button.border.color.primary.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#002d9c", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.active}" + }, + "name": "token-button-border-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "active" + ] + }, + { + "key": "{button.border.color.secondary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.default}" + }, + "name": "token-button-border-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "default" + ] + }, + { + "key": "{button.border.color.secondary.hover}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.hover}" + }, + "name": "token-button-border-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "hover" + ] + }, + { + "key": "{button.border.color.secondary.focus.internal}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#161616", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.secondary.focus.internal}" + }, + "name": "token-button-border-color-secondary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "focus", + "internal" + ] + }, + { + "key": "{button.border.color.secondary.focus.external}", + "$type": "color", + "$value": "#ff00ff", + "$modes": { + "default": "#ffffff", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "magenta", + "$modes": { + "default": "{color.focus.action.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.secondary.focus.external}" + }, + "name": "token-button-border-color-secondary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "focus", + "external" + ] + }, + { + "key": "{button.border.color.secondary.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.active}" + }, + "name": "token-button-border-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "active" + ] + }, + { + "key": "{button.border.color.tertiary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{button.border.color.tertiary.default}" + }, + "name": "token-button-border-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "default" + ] + }, + { + "key": "{button.border.color.tertiary.hover}", + "$type": "color", + "$value": "#8d8d8d", + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "key": "{button.border.color.tertiary.hover}" + }, + "name": "token-button-border-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "hover" + ] + }, + { + "key": "{button.border.color.tertiary.focus.internal}", + "$type": "color", + "$value": "#161616", + "original": { + "$type": "color", + "$value": "{color.focus.action.internal}", + "key": "{button.border.color.tertiary.focus.internal}" + }, + "name": "token-button-border-color-tertiary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "focus", + "internal" + ] + }, + { + "key": "{button.border.color.tertiary.focus.external}", + "$type": "color", + "$value": "#ffffff", + "original": { + "$type": "color", + "$value": "{color.focus.action.external}", + "key": "{button.border.color.tertiary.focus.external}" + }, + "name": "token-button-border-color-tertiary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "focus", + "external" + ] + }, + { + "key": "{button.border.color.tertiary.active}", + "$type": "color", + "$value": "#8d8d8d", + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "key": "{button.border.color.tertiary.active}" + }, + "name": "token-button-border-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "active" + ] + }, + { + "key": "{button.border.color.critical.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#ffb3b8", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.default}" + }, + "name": "token-button-border-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "default" + ] + }, + { + "key": "{button.border.color.critical.hover}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#750e13", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.hover}" + }, + "name": "token-button-border-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "hover" + ] + }, + { + "key": "{button.border.color.critical.focus.internal}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#161616", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.critical.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.critical.focus.internal}" + }, + "name": "token-button-border-color-critical-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "focus", + "internal" + ] + }, + { + "key": "{button.border.color.critical.focus.external}", + "$type": "color", + "$value": "#ff00ff", + "$modes": { + "default": "#ffffff", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "magenta", + "$modes": { + "default": "{color.focus.critical.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.critical.focus.external}" + }, + "name": "token-button-border-color-critical-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "focus", + "external" + ] + }, + { + "key": "{button.border.color.critical.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#750e13", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.active}" + }, + "name": "token-button-border-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "active" + ] + }, + { + "key": "{button.border.color.disabled}", + "$type": "color", + "$value": "#8d8d8d", + "original": { + "$type": "color", + "$value": "{color.border.primary}", + "key": "{button.border.color.disabled}" + }, + "name": "token-button-border-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "disabled" + ] + }, + { + "key": "{button.focus.border.width}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{button.focus.border.width}" + }, + "name": "token-button-focus-border-width", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "focus", + "border", + "width" + ] + }, + { + "key": "{button.icon.size.small}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.small}" + }, + "name": "token-button-icon-size-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "small" + ] + }, + { + "key": "{button.icon.size.medium}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.medium}" + }, + "name": "token-button-icon-size-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "medium" + ] + }, + { + "key": "{button.icon.size.large}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.large}" + }, + "name": "token-button-icon-size-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "large" + ] + }, + { + "key": "{dismiss-button.size}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "key": "{dismiss-button.size}" + }, + "name": "token-dismiss-button-size", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "size" + ] + }, + { + "key": "{dismiss-button.foreground.color.default}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.iconPrimary}", + "$modes": { + "default": "{color.foreground.faint}", + "cds-g0": "{carbon.themes.white.iconPrimary}", + "cds-g10": "{carbon.themes.g10.iconPrimary}", + "cds-g90": "{carbon.themes.g90.iconPrimary}", + "cds-g100": "{carbon.themes.g100.iconPrimary}" + }, + "key": "{dismiss-button.foreground.color.default}" + }, + "name": "token-dismiss-button-foreground-color-default", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "foreground", + "color", + "default" + ] + }, + { + "key": "{dismiss-button.foreground.color.active}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.iconPrimary}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.white.iconPrimary}", + "cds-g10": "{carbon.themes.g10.iconPrimary}", + "cds-g90": "{carbon.themes.g90.iconPrimary}", + "cds-g100": "{carbon.themes.g100.iconPrimary}" + }, + "key": "{dismiss-button.foreground.color.active}" + }, + "name": "token-dismiss-button-foreground-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "foreground", + "color", + "active" + ] + }, + { + "key": "{dismiss-button.surface.color.hover}", + "$type": "color", + "$value": "rgba(141, 141, 141, 0.16)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "rgba(141, 141, 141, 0.12)", + "cds-g10": "rgba(141, 141, 141, 0.12)", + "cds-g90": "rgba(141, 141, 141, 0.16)", + "cds-g100": "rgba(141, 141, 141, 0.16)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.backgroundHover}", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "{carbon.themes.white.backgroundHover}", + "cds-g10": "{carbon.themes.g10.backgroundHover}", + "cds-g90": "{carbon.themes.g90.backgroundHover}", + "cds-g100": "{carbon.themes.g100.backgroundHover}" + }, + "key": "{dismiss-button.surface.color.hover}" + }, + "name": "token-dismiss-button-surface-color-hover", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "surface", + "color", + "hover" + ] + }, + { + "key": "{dismiss-button.surface.color.active}", + "$type": "color", + "$value": "rgba(141, 141, 141, 0.4)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "rgba(141, 141, 141, 0.5)", + "cds-g10": "rgba(141, 141, 141, 0.5)", + "cds-g90": "rgba(141, 141, 141, 0.4)", + "cds-g100": "rgba(141, 141, 141, 0.4)" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.backgroundActive}", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "{carbon.themes.white.backgroundActive}", + "cds-g10": "{carbon.themes.g10.backgroundActive}", + "cds-g90": "{carbon.themes.g90.backgroundActive}", + "cds-g100": "{carbon.themes.g100.backgroundActive}" + }, + "key": "{dismiss-button.surface.color.active}" + }, + "name": "token-dismiss-button-surface-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "surface", + "color", + "active" + ] + }, + { + "key": "{dismiss-button.border.color.active}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{dismiss-button.border.color.active}" + }, + "name": "token-dismiss-button-border-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "border", + "color", + "active" + ] + }, + { + "key": "{dismiss-button.icon.size}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "20", + "cds-g10": "20", + "cds-g90": "20", + "cds-g100": "20" + }, + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "20", + "cds-g10": "20", + "cds-g90": "20", + "cds-g100": "20" + }, + "key": "{dismiss-button.icon.size}" + }, + "name": "token-dismiss-button-icon-size", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "icon", + "size" + ] + }, + { + "key": "{form.label.color}", + "$type": "color", + "$value": "#f4f4f4", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.strong}", + "group": "components", + "key": "{form.label.color}" + }, + "name": "token-form-label-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "label", + "color" + ] + }, + { + "key": "{form.legend.color}", + "$type": "color", + "$value": "#f4f4f4", + "group": "components", + "original": { + "$type": "color", + "$value": "{form.label.color}", + "group": "components", + "key": "{form.legend.color}" + }, + "name": "token-form-legend-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "legend", + "color" + ] + }, + { + "key": "{form.helper-text.color}", + "$type": "color", + "$value": "#c6c6c6", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.helper-text.color}" + }, + "name": "token-form-helper-text-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "helper-text", + "color" + ] + }, + { + "key": "{form.indicator.optional.color}", + "$type": "color", + "$value": "#c6c6c6", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.indicator.optional.color}" + }, + "name": "token-form-indicator-optional-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "indicator", + "optional", + "color" + ] + }, + { + "key": "{form.error.color}", + "$type": "color", + "$value": "#a2191f", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "components", + "key": "{form.error.color}" + }, + "name": "token-form-error-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "error", + "color" + ] + }, + { + "key": "{form.error.icon-size}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "14", + "unit": "px", + "key": "{form.error.icon-size}" + }, + "name": "token-form-error-icon-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "error", + "icon-size" + ] + }, + { + "key": "{form.checkbox.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.checkbox.size}" + }, + "name": "token-form-checkbox-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "size" + ] + }, + { + "key": "{form.checkbox.border.radius}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{form.checkbox.border.radius}" + }, + "name": "token-form-checkbox-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "border", + "radius" + ] + }, + { + "key": "{form.checkbox.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.checkbox.border.width}" + }, + "name": "token-form-checkbox-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "border", + "width" + ] + }, + { + "key": "{form.checkbox.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.checkbox.background-image.size}" + }, + "name": "token-form-checkbox-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "size" + ] + }, + { + "key": "{form.checkbox.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url}" + }, + "name": "token-form-checkbox-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url" + ] + }, + { + "key": "{form.checkbox.background-image.data-url-indeterminate}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url-indeterminate}" + }, + "name": "token-form-checkbox-background-image-data-url-indeterminate", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url-indeterminate" + ] + }, + { + "key": "{form.checkbox.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url-disabled}" + }, + "name": "token-form-checkbox-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url-disabled" + ] + }, + { + "key": "{form.checkbox.background-image.data-url-indeterminate-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url-indeterminate-disabled}" + }, + "name": "token-form-checkbox-background-image-data-url-indeterminate-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url-indeterminate-disabled" + ] + }, + { + "key": "{form.control.base.foreground.value-color}", + "$type": "color", + "$value": "#f4f4f4", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.strong}", + "group": "components", + "key": "{form.control.base.foreground.value-color}" + }, + "name": "token-form-control-base-foreground-value-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "foreground", + "value-color" + ] + }, + { + "key": "{form.control.base.foreground.placeholder-color}", + "$type": "color", + "$value": "#c6c6c6", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.control.base.foreground.placeholder-color}" + }, + "name": "token-form-control-base-foreground-placeholder-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "foreground", + "placeholder-color" + ] + }, + { + "key": "{form.control.base.surface-color.default}", + "$type": "color", + "$value": "#393939", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.interactive}", + "group": "components", + "key": "{form.control.base.surface-color.default}" + }, + "name": "token-form-control-base-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "surface-color", + "default" + ] + }, + { + "key": "{form.control.base.surface-color.hover}", + "$type": "color", + "$value": "#474747", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.interactive-hover}", + "group": "components", + "key": "{form.control.base.surface-color.hover}" + }, + "name": "token-form-control-base-surface-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "surface-color", + "hover" + ] + }, + { + "key": "{form.control.base.border-color.default}", + "$type": "color", + "$value": "#8d8d8d", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-400}", + "group": "components", + "key": "{form.control.base.border-color.default}" + }, + "name": "token-form-control-base-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "border-color", + "default" + ] + }, + { + "key": "{form.control.base.border-color.hover}", + "$type": "color", + "$value": "#525252", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "group": "components", + "key": "{form.control.base.border-color.hover}" + }, + "name": "token-form-control-base-border-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "border-color", + "hover" + ] + }, + { + "key": "{form.control.checked.foreground-color}", + "$type": "color", + "$value": "#161616", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "group": "components", + "key": "{form.control.checked.foreground-color}" + }, + "name": "token-form-control-checked-foreground-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "foreground-color" + ] + }, + { + "key": "{form.control.checked.surface-color.default}", + "$type": "color", + "$value": "#0f62fe", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "group": "components", + "key": "{form.control.checked.surface-color.default}" + }, + "name": "token-form-control-checked-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "surface-color", + "default" + ] + }, + { + "key": "{form.control.checked.surface-color.hover}", + "$type": "color", + "$value": "#0043ce", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "components", + "key": "{form.control.checked.surface-color.hover}" + }, + "name": "token-form-control-checked-surface-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "surface-color", + "hover" + ] + }, + { + "key": "{form.control.checked.border-color.default}", + "$type": "color", + "$value": "#0043ce", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "components", + "key": "{form.control.checked.border-color.default}" + }, + "name": "token-form-control-checked-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "border-color", + "default" + ] + }, + { + "key": "{form.control.checked.border-color.hover}", + "$type": "color", + "$value": "#002d9c", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "group": "components", + "key": "{form.control.checked.border-color.hover}" + }, + "name": "token-form-control-checked-border-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "border-color", + "hover" + ] + }, + { + "key": "{form.control.invalid.border-color.default}", + "$type": "color", + "$value": "#a2191f", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "components", + "key": "{form.control.invalid.border-color.default}" + }, + "name": "token-form-control-invalid-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "invalid", + "border-color", + "default" + ] + }, + { + "key": "{form.control.invalid.border-color.hover}", + "$type": "color", + "$value": "#750e13", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.red-400}", + "group": "components", + "key": "{form.control.invalid.border-color.hover}" + }, + "name": "token-form-control-invalid-border-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "invalid", + "border-color", + "hover" + ] + }, + { + "key": "{form.control.readonly.foreground-color}", + "$type": "color", + "$value": "#f4f4f4", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "group": "components", + "key": "{form.control.readonly.foreground-color}" + }, + "name": "token-form-control-readonly-foreground-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "readonly", + "foreground-color" + ] + }, + { + "key": "{form.control.readonly.surface-color}", + "$type": "color", + "$value": "#525252", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.strong}", + "group": "components", + "key": "{form.control.readonly.surface-color}" + }, + "name": "token-form-control-readonly-surface-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "readonly", + "surface-color" + ] + }, + { + "key": "{form.control.readonly.border-color}", + "$type": "color", + "$value": "#525252", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.border.faint}", + "group": "components", + "key": "{form.control.readonly.border-color}" + }, + "name": "token-form-control-readonly-border-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "readonly", + "border-color" + ] + }, + { + "key": "{form.control.disabled.foreground-color}", + "$type": "color", + "$value": "rgba(244, 244, 244, 0.25)", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.disabled}", + "group": "components", + "key": "{form.control.disabled.foreground-color}" + }, + "name": "token-form-control-disabled-foreground-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "disabled", + "foreground-color" + ] + }, + { + "key": "{form.control.disabled.surface-color}", + "$type": "color", + "$value": "#6f6f6f", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.interactive-disabled}", + "group": "components", + "key": "{form.control.disabled.surface-color}" + }, + "name": "token-form-control-disabled-surface-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "disabled", + "surface-color" + ] + }, + { + "key": "{form.control.disabled.border-color}", + "$type": "color", + "$value": "#8d8d8d", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.border.primary}", + "group": "components", + "key": "{form.control.disabled.border-color}" + }, + "name": "token-form-control-disabled-border-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "disabled", + "border-color" + ] + }, + { + "key": "{form.control.padding}", + "$type": "dimension", + "$value": "7px", + "unit": "px", + "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma.", + "original": { + "$type": "dimension", + "$value": "7", + "unit": "px", + "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma.", + "key": "{form.control.padding}" + }, + "name": "token-form-control-padding", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "padding" + ] + }, + { + "key": "{form.control.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{form.control.border.radius}" + }, + "name": "token-form-control-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "border", + "radius" + ] + }, + { + "key": "{form.control.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.control.border.width}" + }, + "name": "token-form-control-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "border", + "width" + ] + }, + { + "key": "{form.radio.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.radio.size}" + }, + "name": "token-form-radio-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "size" + ] + }, + { + "key": "{form.radio.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.radio.border.width}" + }, + "name": "token-form-radio-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "border", + "width" + ] + }, + { + "key": "{form.radio.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.radio.background-image.size}" + }, + "name": "token-form-radio-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "background-image", + "size" + ] + }, + { + "key": "{form.radio.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "key": "{form.radio.background-image.data-url}" + }, + "name": "token-form-radio-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "background-image", + "data-url" + ] + }, + { + "key": "{form.radio.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "key": "{form.radio.background-image.data-url-disabled}" + }, + "name": "token-form-radio-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "background-image", + "data-url-disabled" + ] + }, + { + "key": "{form.radiocard-group.gap}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.radiocard-group.gap}" + }, + "name": "token-form-radiocard-group-gap", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard-group", + "gap" + ] + }, + { + "key": "{form.radiocard.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.radiocard.border.width}" + }, + "name": "token-form-radiocard-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "width" + ] + }, + { + "key": "{form.radiocard.border.radius}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{form.radiocard.border.radius}" + }, + "name": "token-form-radiocard-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "radius" + ] + }, + { + "key": "{form.radiocard.border.color.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "#393939", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{form.radiocard.border.color.default}" + }, + "name": "token-form-radiocard-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "default" + ] + }, + { + "key": "{form.radiocard.border.color.focus}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#161616", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "key": "{form.radiocard.border.color.focus}" + }, + "name": "token-form-radiocard-border-color-focus", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "focus" + ] + }, + { + "key": "{form.radiocard.border.color.default-checked}", + "$type": "color", + "$value": "#ffc0cb", + "$modes": { + "default": "#0043ce", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "original": { + "$type": "color", + "$value": "pink", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "key": "{form.radiocard.border.color.default-checked}" + }, + "name": "token-form-radiocard-border-color-default-checked", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "default-checked" + ] + }, + { + "key": "{form.radiocard.content-padding}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{form.radiocard.content-padding}" + }, + "name": "token-form-radiocard-content-padding", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "content-padding" + ] + }, + { + "key": "{form.radiocard.control-padding}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{form.radiocard.control-padding}" + }, + "name": "token-form-radiocard-control-padding", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "control-padding" + ] + }, + { + "key": "{form.radiocard.transition.duration}", + "$type": "duration", + "$value": "0.2s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.2", + "unit": "s", + "key": "{form.radiocard.transition.duration}" + }, + "name": "token-form-radiocard-transition-duration", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "transition", + "duration" + ] + }, + { + "key": "{form.select.background-image.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.select.background-image.size}" + }, + "name": "token-form-select-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "size" + ] + }, + { + "key": "{form.select.background-image.position-right-x}", + "$type": "dimension", + "$value": "7px", + "original": { + "$type": "dimension", + "$value": "{form.control.padding}", + "key": "{form.select.background-image.position-right-x}" + }, + "name": "token-form-select-background-image-position-right-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "position-right-x" + ] + }, + { + "key": "{form.select.background-image.position-top-y}", + "$type": "dimension", + "$value": "9px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "9", + "unit": "px", + "key": "{form.select.background-image.position-top-y}" + }, + "name": "token-form-select-background-image-position-top-y", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "position-top-y" + ] + }, + { + "key": "{form.select.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "key": "{form.select.background-image.data-url}" + }, + "name": "token-form-select-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "data-url" + ] + }, + { + "key": "{form.select.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "key": "{form.select.background-image.data-url-disabled}" + }, + "name": "token-form-select-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "data-url-disabled" + ] + }, + { + "key": "{form.text-input.background-image.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.text-input.background-image.size}" + }, + "name": "token-form-text-input-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "size" + ] + }, + { + "key": "{form.text-input.background-image.position-x}", + "$type": "dimension", + "$value": "7px", + "original": { + "$type": "dimension", + "$value": "{form.control.padding}", + "key": "{form.text-input.background-image.position-x}" + }, + "name": "token-form-text-input-background-image-position-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "position-x" + ] + }, + { + "key": "{form.text-input.background-image.data-url-date}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-date}" + }, + "name": "token-form-text-input-background-image-data-url-date", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-date" + ] + }, + { + "key": "{form.text-input.background-image.data-url-time}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-time}" + }, + "name": "token-form-text-input-background-image-data-url-time", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-time" + ] + }, + { + "key": "{form.text-input.background-image.data-url-search}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-search}" + }, + "name": "token-form-text-input-background-image-data-url-search", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search" + ] + }, + { + "key": "{form.text-input.background-image.data-url-search-cancel}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-search-cancel}" + }, + "name": "token-form-text-input-background-image-data-url-search-cancel", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search-cancel" + ] + }, + { + "key": "{form.text-input.background-image.data-url-search-loading}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color and animation are hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color and animation are hardcoded here!", + "key": "{form.text-input.background-image.data-url-search-loading}" + }, + "name": "token-form-text-input-background-image-data-url-search-loading", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search-loading" + ] + }, + { + "key": "{form.toggle.width}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{form.toggle.width}" + }, + "name": "token-form-toggle-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "width" + ] + }, + { + "key": "{form.toggle.height}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.toggle.height}" + }, + "name": "token-form-toggle-height", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "height" + ] + }, + { + "key": "{form.toggle.base.surface-color.default}", + "$type": "color", + "$value": "#525252", + "group": "components", + "comment": "the toggle has a different base surface color, compared to the other controls", + "original": { + "$type": "color", + "$value": "{color.surface.strong}", + "group": "components", + "comment": "the toggle has a different base surface color, compared to the other controls", + "key": "{form.toggle.base.surface-color.default}" + }, + "name": "token-form-toggle-base-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "base", + "surface-color", + "default" + ] + }, + { + "key": "{form.toggle.border.radius}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{form.toggle.border.radius}" + }, + "name": "token-form-toggle-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "border", + "radius" + ] + }, + { + "key": "{form.toggle.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.toggle.border.width}" + }, + "name": "token-form-toggle-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "border", + "width" + ] + }, + { + "key": "{form.toggle.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.toggle.background-image.size}" + }, + "name": "token-form-toggle-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "size" + ] + }, + { + "key": "{form.toggle.background-image.position-x}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{form.toggle.background-image.position-x}" + }, + "name": "token-form-toggle-background-image-position-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "position-x" + ] + }, + { + "key": "{form.toggle.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.toggle.background-image.data-url}" + }, + "name": "token-form-toggle-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "data-url" + ] + }, + { + "key": "{form.toggle.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.toggle.background-image.data-url-disabled}" + }, + "name": "token-form-toggle-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "data-url-disabled" + ] + }, + { + "key": "{form.toggle.transition.duration}", + "$type": "duration", + "$value": "0.2s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.2", + "unit": "s", + "key": "{form.toggle.transition.duration}" + }, + "name": "token-form-toggle-transition-duration", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "transition", + "duration" + ] + }, + { + "key": "{form.toggle.transition.timing-function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.68, -0.2, 0.265, 1.15)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.68, + -0.2, + 0.265, + 1.15 + ], + "key": "{form.toggle.transition.timing-function}" + }, + "name": "token-form-toggle-transition-timing-function", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "transition", + "timing-function" + ] + }, + { + "key": "{form.toggle.thumb-size}", + "$type": "dimension", + "$value": "16px", + "original": { + "$type": "dimension", + "$value": "{form.toggle.height}", + "key": "{form.toggle.thumb-size}" + }, + "name": "token-form-toggle-thumb-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "thumb-size" + ] + }, + { + "key": "{icon-tile.border.color.overlay}", + "$type": "color", + "$value": "#8d8d8d", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.borderSubtle02}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle02}", + "cds-g10": "{carbon.themes.g10.borderSubtle02}", + "cds-g90": "{carbon.themes.g90.borderSubtle02}", + "cds-g100": "{carbon.themes.g100.borderSubtle02}" + }, + "key": "{icon-tile.border.color.overlay}" + }, + "name": "token-icon-tile-border-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "overlay" + ] + }, + { + "key": "{icon-tile.border.color.logo}", + "$type": "color", + "$value": "#6f6f6f", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.borderSubtle01}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle01}", + "cds-g10": "{carbon.themes.g10.borderSubtle01}", + "cds-g90": "{carbon.themes.g90.borderSubtle01}", + "cds-g100": "{carbon.themes.g100.borderSubtle01}" + }, + "key": "{icon-tile.border.color.logo}" + }, + "name": "token-icon-tile-border-color-logo", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "logo" + ] + }, + { + "key": "{icon-tile.surface.color.overlay}", + "$type": "color", + "$value": "#525252", + "$modes": { + "default": "#393939", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.layer02}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.white.layer02}", + "cds-g10": "{carbon.themes.g10.layer02}", + "cds-g90": "{carbon.themes.g90.layer02}", + "cds-g100": "{carbon.themes.g100.layer02}" + }, + "key": "{icon-tile.surface.color.overlay}" + }, + "name": "token-icon-tile-surface-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "surface", + "color", + "overlay" + ] + }, + { + "key": "{pagination.nav.control.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{pagination.nav.control.height}" + }, + "name": "token-pagination-nav-control-height", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "height" + ] + }, + { + "key": "{pagination.nav.control.padding.horizontal}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{pagination.nav.control.padding.horizontal}" + }, + "name": "token-pagination-nav-control-padding-horizontal", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "padding", + "horizontal" + ] + }, + { + "key": "{pagination.nav.control.focus-inset}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{pagination.nav.control.focus-inset}" + }, + "name": "token-pagination-nav-control-focus-inset", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "focus-inset" + ] + }, + { + "key": "{pagination.nav.control.icon-spacing}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{pagination.nav.control.icon-spacing}" + }, + "name": "token-pagination-nav-control-icon-spacing", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "icon-spacing" + ] + }, + { + "key": "{pagination.nav.indicator.height}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{pagination.nav.indicator.height}" + }, + "name": "token-pagination-nav-indicator-height", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "indicator", + "height" + ] + }, + { + "key": "{pagination.nav.indicator.spacing}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{pagination.nav.indicator.spacing}" + }, + "name": "token-pagination-nav-indicator-spacing", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "indicator", + "spacing" + ] + }, + { + "key": "{pagination.child.spacing.vertical}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{pagination.child.spacing.vertical}" + }, + "name": "token-pagination-child-spacing-vertical", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "child", + "spacing", + "vertical" + ] + }, + { + "key": "{pagination.child.spacing.horizontal}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "key": "{pagination.child.spacing.horizontal}" + }, + "name": "token-pagination-child-spacing-horizontal", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "child", + "spacing", + "horizontal" + ] + }, + { + "key": "{rich-tooltip.bubble.max-width}", + "$type": "dimension", + "$value": "288px", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "original": { + "$type": "dimension", + "$value": "288", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "key": "{rich-tooltip.bubble.max-width}" + }, + "name": "token-rich-tooltip-bubble-max-width", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "max-width" + ] + }, + { + "key": "{rich-tooltip.bubble.border.color}", + "$value": "#6f6f6f", + "$modes": { + "default": "#52525233", + "cds-g0": "#6f6f6f", + "cds-g10": "#6f6f6f", + "cds-g90": "#6f6f6f", + "cds-g100": "#6f6f6f" + }, + "original": { + "$value": "{color.palette.alpha-200}", + "$modes": { + "default": "{elevation.higher.border.color}", + "cds-g0": "{color.palette.alpha-200}", + "cds-g10": "{color.palette.alpha-200}", + "cds-g90": "{color.palette.alpha-200}", + "cds-g100": "{color.palette.alpha-200}" + }, + "key": "{rich-tooltip.bubble.border.color}" + }, + "name": "token-rich-tooltip-bubble-border-color", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "border", + "color" + ] + }, + { + "key": "{rich-tooltip.bubble.border.radius}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "key": "{rich-tooltip.bubble.border.radius}" + }, + "name": "token-rich-tooltip-bubble-border-radius", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "border", + "radius" + ] + }, + { + "key": "{rich-tooltip.bubble.arrow.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{rich-tooltip.bubble.arrow.size}" + }, + "name": "token-rich-tooltip-bubble-arrow-size", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "arrow", + "size" + ] + }, + { + "key": "{rich-tooltip.toggle.gap.horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{rich-tooltip.toggle.gap.horizontal}" + }, + "name": "token-rich-tooltip-toggle-gap-horizontal", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "gap", + "horizontal" + ] + }, + { + "key": "{rich-tooltip.toggle.foreground.color.default}", + "$value": "#c6c6c6", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$value": "{carbon.themes.g90.textSecondary}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.default}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-default", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "default" + ] + }, + { + "key": "{rich-tooltip.toggle.foreground.color.hover}", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$value": "{carbon.themes.g90.textPrimary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.hover}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-hover", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "hover" + ] + }, + { + "key": "{rich-tooltip.toggle.foreground.color.active}", + "$value": "#c6c6c6", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$value": "{carbon.themes.g90.textSecondary}", + "$modes": { + "default": "{color.foreground.faint}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.active}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-active", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "active" + ] + }, + { + "key": "{rich-tooltip.toggle.icon.size}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, + "original": { + "$type": "dimension", + "$value": "14", + "unit": "px", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, + "key": "{rich-tooltip.toggle.icon.size}" + }, + "name": "token-rich-tooltip-toggle-icon-size", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "icon", + "size" + ] + }, + { + "key": "{tabs.tab.height.medium}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{tabs.tab.height.medium}" + }, + "name": "token-tabs-tab-height-medium", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "height", + "medium" + ] + }, + { + "key": "{tabs.tab.height.large}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{tabs.tab.height.large}" + }, + "name": "token-tabs-tab-height-large", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "height", + "large" + ] + }, + { + "key": "{tabs.tab.padding.horizontal.medium}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{tabs.tab.padding.horizontal.medium}" + }, + "name": "token-tabs-tab-padding-horizontal-medium", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "padding", + "horizontal", + "medium" + ] + }, + { + "key": "{tabs.tab.padding.horizontal.large}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "key": "{tabs.tab.padding.horizontal.large}" + }, + "name": "token-tabs-tab-padding-horizontal-large", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "padding", + "horizontal", + "large" + ] + }, + { + "key": "{tabs.tab.padding.vertical}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "key": "{tabs.tab.padding.vertical}" + }, + "name": "token-tabs-tab-padding-vertical", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "padding", + "vertical" + ] + }, + { + "key": "{tabs.tab.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{tabs.tab.border-radius}" + }, + "name": "token-tabs-tab-border-radius", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "border-radius" + ] + }, + { + "key": "{tabs.tab.focus-inset}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{tabs.tab.focus-inset}" + }, + "name": "token-tabs-tab-focus-inset", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "focus-inset" + ] + }, + { + "key": "{tabs.tab.gutter}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{tabs.tab.gutter}" + }, + "name": "token-tabs-tab-gutter", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "gutter" + ] + }, + { + "key": "{tabs.indicator.height}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{tabs.indicator.height}" + }, + "name": "token-tabs-indicator-height", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "indicator", + "height" + ] + }, + { + "key": "{tabs.indicator.transition.function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.5, 1, 0.89, 1)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.5, + 1, + 0.89, + 1 + ], + "key": "{tabs.indicator.transition.function}" + }, + "name": "token-tabs-indicator-transition-function", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "indicator", + "transition", + "function" + ] + }, + { + "key": "{tabs.indicator.transition.duration}", + "$type": "duration", + "$value": "0.6s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.6", + "unit": "s", + "key": "{tabs.indicator.transition.duration}" + }, + "name": "token-tabs-indicator-transition-duration", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "indicator", + "transition", + "duration" + ] + }, + { + "key": "{tabs.divider.height}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{tabs.divider.height}" + }, + "name": "token-tabs-divider-height", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "divider", + "height" + ] + }, + { + "key": "{tooltip.max-width}", + "$type": "dimension", + "$value": "288px", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "original": { + "$type": "dimension", + "$value": "288", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "key": "{tooltip.max-width}" + }, + "name": "token-tooltip-max-width", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "max-width" + ] + }, + { + "key": "{tooltip.padding.horizontal}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16px", + "cds-g10": "16px", + "cds-g90": "16px", + "cds-g100": "16px" + }, + "original": { + "$type": "dimension", + "$value": "{carbon.themes.g90.spacing05}", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "{carbon.themes.white.spacing05}", + "cds-g10": "{carbon.themes.g10.spacing05}", + "cds-g90": "{carbon.themes.g90.spacing05}", + "cds-g100": "{carbon.themes.g100.spacing05}" + }, + "key": "{tooltip.padding.horizontal}" + }, + "name": "token-tooltip-padding-horizontal", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "horizontal" + ] + }, + { + "key": "{tooltip.padding.vertical}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "16px", + "cds-g10": "16px", + "cds-g90": "16px", + "cds-g100": "16px" + }, + "original": { + "$type": "dimension", + "$value": "{carbon.themes.g90.spacing05}", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "{carbon.themes.white.spacing05}", + "cds-g10": "{carbon.themes.g10.spacing05}", + "cds-g90": "{carbon.themes.g90.spacing05}", + "cds-g100": "{carbon.themes.g100.spacing05}" + }, + "key": "{tooltip.padding.vertical}" + }, + "name": "token-tooltip-padding-vertical", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "vertical" + ] + }, + { + "key": "{tooltip.border.radius}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "key": "{tooltip.border.radius}" + }, + "name": "token-tooltip-border-radius", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "border", + "radius" + ] + }, + { + "key": "{tooltip.caret.clip-path}", + "$value": "polygon(0 100%, 50% 0, 100% 100%)", + "$modes": { + "default": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "cds-g0": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g10": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g90": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g100": "polygon(0 100%, 50% 0, 100% 100%)" + }, + "original": { + "$value": "polygon(0 100%, 50% 0, 100% 100%)", + "$modes": { + "default": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "cds-g0": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g10": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g90": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g100": "polygon(0 100%, 50% 0, 100% 100%)" + }, + "key": "{tooltip.caret.clip-path}" + }, + "name": "token-tooltip-caret-clip-path", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "clip-path" + ] + }, + { + "key": "{tooltip.caret.height}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "7", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "7", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "key": "{tooltip.caret.height}" + }, + "name": "token-tooltip-caret-height", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "height" + ] + }, + { + "key": "{tooltip.caret.width}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{tooltip.caret.width}" + }, + "name": "token-tooltip-caret-width", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "width" + ] + }, + { + "key": "{tooltip.focus-offset}", + "$type": "dimension", + "$value": "-2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "-2", + "unit": "px", + "key": "{tooltip.focus-offset}" + }, + "name": "token-tooltip-focus-offset", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "focus-offset" + ] + }, + { + "key": "{tooltip.transition.function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.54, 1.5, 0.38, 1.11)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.54, + 1.5, + 0.38, + 1.11 + ], + "key": "{tooltip.transition.function}" + }, + "name": "token-tooltip-transition-function", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "transition", + "function" + ] + }, + { + "key": "{typography.font-stack.display}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.sans.display.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.font-stack.display}" + }, + "name": "token-typography-font-stack-display", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-stack", + "display" + ] + }, + { + "key": "{typography.font-stack.text}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.sans.text.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.font-stack.text}" + }, + "name": "token-typography-font-stack-text", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-stack", + "text" + ] + }, + { + "key": "{typography.font-stack.code}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.monospace.code.combined}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.font-stack.code}" + }, + "name": "token-typography-font-stack-code", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-stack", + "code" + ] + }, + { + "key": "{typography.font-weight.regular}", + "$type": "font-weight", + "$value": 400, + "$modes": { + "default": "400", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "default": "400", + "cds-g0": "{carbon.typography.font-weight.regular}", + "cds-g10": "{carbon.typography.font-weight.regular}", + "cds-g90": "{carbon.typography.font-weight.regular}", + "cds-g100": "{carbon.typography.font-weight.regular}" + }, + "key": "{typography.font-weight.regular}" + }, + "name": "token-typography-font-weight-regular", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "regular" + ] + }, + { + "key": "{typography.font-weight.medium}", + "$type": "font-weight", + "$value": 400, + "$modes": { + "default": "500", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "default": "500", + "cds-g0": "{carbon.typography.font-weight.regular}", + "cds-g10": "{carbon.typography.font-weight.regular}", + "cds-g90": "{carbon.typography.font-weight.regular}", + "cds-g100": "{carbon.typography.font-weight.regular}" + }, + "key": "{typography.font-weight.medium}" + }, + "name": "token-typography-font-weight-medium", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "medium" + ] + }, + { + "key": "{typography.font-weight.semibold}", + "$type": "font-weight", + "$value": 600, + "$modes": { + "default": "600", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "default": "600", + "cds-g0": "{carbon.typography.font-weight.semibold}", + "cds-g10": "{carbon.typography.font-weight.semibold}", + "cds-g90": "{carbon.typography.font-weight.semibold}", + "cds-g100": "{carbon.typography.font-weight.semibold}" + }, + "key": "{typography.font-weight.semibold}" + }, + "name": "token-typography-font-weight-semibold", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "semibold" + ] + }, + { + "key": "{typography.font-weight.bold}", + "$type": "font-weight", + "$value": 600, + "$modes": { + "default": "700", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "default": "700", + "cds-g0": "{carbon.typography.font-weight.semibold}", + "cds-g10": "{carbon.typography.font-weight.semibold}", + "cds-g90": "{carbon.typography.font-weight.semibold}", + "cds-g100": "{carbon.typography.font-weight.semibold}" + }, + "key": "{typography.font-weight.bold}" + }, + "name": "token-typography-font-weight-bold", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "bold" + ] + }, + { + "key": "{typography.display-500.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-500.font-family}" + }, + "name": "token-typography-display-500-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "font-family" + ] + }, + { + "key": "{typography.display-500.font-size}", + "$type": "font-size", + "$value": "2rem", + "unit": "px", + "comment": "30px/1.875rem", + "$modes": { + "default": "30", + "cds-g0": "2rem", + "cds-g10": "2rem", + "cds-g90": "2rem", + "cds-g100": "2rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading05.font-size}", + "unit": "px", + "comment": "30px/1.875rem", + "$modes": { + "default": "30", + "cds-g0": "{carbon.typography.heading05.font-size}", + "cds-g10": "{carbon.typography.heading05.font-size}", + "cds-g90": "{carbon.typography.heading05.font-size}", + "cds-g100": "{carbon.typography.heading05.font-size}" + }, + "key": "{typography.display-500.font-size}" + }, + "name": "token-typography-display-500-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "font-size" + ] + }, + { + "key": "{typography.display-500.line-height}", + "$type": "number", + "$value": 1.25, + "comment": "38px", + "$modes": { + "default": 1.2666, + "cds-g0": 1.25, + "cds-g10": 1.25, + "cds-g90": 1.25, + "cds-g100": 1.25 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading05.line-height}", + "comment": "38px", + "$modes": { + "default": 1.2666, + "cds-g0": "{carbon.typography.heading05.line-height}", + "cds-g10": "{carbon.typography.heading05.line-height}", + "cds-g90": "{carbon.typography.heading05.line-height}", + "cds-g100": "{carbon.typography.heading05.line-height}" + }, + "key": "{typography.display-500.line-height}" + }, + "name": "token-typography-display-500-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "line-height" + ] + }, + { + "key": "{typography.display-500.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading05.letter-spacing}", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading05.letter-spacing}", + "cds-g10": "{carbon.typography.heading05.letter-spacing}", + "cds-g90": "{carbon.typography.heading05.letter-spacing}", + "cds-g100": "{carbon.typography.heading05.letter-spacing}" + }, + "key": "{typography.display-500.letter-spacing}" + }, + "name": "token-typography-display-500-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "letter-spacing" + ] + }, + { + "key": "{typography.display-400.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-400.font-family}" + }, + "name": "token-typography-display-400-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "font-family" + ] + }, + { + "key": "{typography.display-400.font-size}", + "$type": "font-size", + "$value": "1.75rem", + "unit": "px", + "comment": "24px/1.5rem", + "$modes": { + "default": "24", + "cds-g0": "1.75rem", + "cds-g10": "1.75rem", + "cds-g90": "1.75rem", + "cds-g100": "1.75rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading04.font-size}", + "unit": "px", + "comment": "24px/1.5rem", + "$modes": { + "default": "24", + "cds-g0": "{carbon.typography.heading04.font-size}", + "cds-g10": "{carbon.typography.heading04.font-size}", + "cds-g90": "{carbon.typography.heading04.font-size}", + "cds-g100": "{carbon.typography.heading04.font-size}" + }, + "key": "{typography.display-400.font-size}" + }, + "name": "token-typography-display-400-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "font-size" + ] + }, + { + "key": "{typography.display-400.line-height}", + "$type": "number", + "$value": 1.28572, + "comment": "32px", + "$modes": { + "default": 1.3333, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading04.line-height}", + "comment": "32px", + "$modes": { + "default": 1.3333, + "cds-g0": "{carbon.typography.heading04.line-height}", + "cds-g10": "{carbon.typography.heading04.line-height}", + "cds-g90": "{carbon.typography.heading04.line-height}", + "cds-g100": "{carbon.typography.heading04.line-height}" + }, + "key": "{typography.display-400.line-height}" + }, + "name": "token-typography-display-400-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "line-height" + ] + }, + { + "key": "{typography.display-400.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading04.letter-spacing}", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.heading04.letter-spacing}", + "cds-g10": "{carbon.typography.heading04.letter-spacing}", + "cds-g90": "{carbon.typography.heading04.letter-spacing}", + "cds-g100": "{carbon.typography.heading04.letter-spacing}" + }, + "key": "{typography.display-400.letter-spacing}" + }, + "name": "token-typography-display-400-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "letter-spacing" + ] + }, + { + "key": "{typography.display-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-300.font-family}" + }, + "name": "token-typography-display-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "font-family" + ] + }, + { + "key": "{typography.display-300.font-size}", + "$type": "font-size", + "$value": "1.25rem", + "unit": "px", + "comment": "18px/1.125rem", + "$modes": { + "default": "18", + "cds-g0": "1.25rem", + "cds-g10": "1.25rem", + "cds-g90": "1.25rem", + "cds-g100": "1.25rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading03.font-size}", + "unit": "px", + "comment": "18px/1.125rem", + "$modes": { + "default": "18", + "cds-g0": "{carbon.typography.heading03.font-size}", + "cds-g10": "{carbon.typography.heading03.font-size}", + "cds-g90": "{carbon.typography.heading03.font-size}", + "cds-g100": "{carbon.typography.heading03.font-size}" + }, + "key": "{typography.display-300.font-size}" + }, + "name": "token-typography-display-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "font-size" + ] + }, + { + "key": "{typography.display-300.line-height}", + "$type": "number", + "$value": 1.4, + "comment": "24px", + "$modes": { + "default": 1.3333, + "cds-g0": 1.4, + "cds-g10": 1.4, + "cds-g90": 1.4, + "cds-g100": 1.4 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading03.line-height}", + "comment": "24px", + "$modes": { + "default": 1.3333, + "cds-g0": "{carbon.typography.heading03.line-height}", + "cds-g10": "{carbon.typography.heading03.line-height}", + "cds-g90": "{carbon.typography.heading03.line-height}", + "cds-g100": "{carbon.typography.heading03.line-height}" + }, + "key": "{typography.display-300.line-height}" + }, + "name": "token-typography-display-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "line-height" + ] + }, + { + "key": "{typography.display-300.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading03.letter-spacing}", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading03.letter-spacing}", + "cds-g10": "{carbon.typography.heading03.letter-spacing}", + "cds-g90": "{carbon.typography.heading03.letter-spacing}", + "cds-g100": "{carbon.typography.heading03.letter-spacing}" + }, + "key": "{typography.display-300.letter-spacing}" + }, + "name": "token-typography-display-300-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "letter-spacing" + ] + }, + { + "key": "{typography.display-200.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-200.font-family}" + }, + "name": "token-typography-display-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "font-family" + ] + }, + { + "key": "{typography.display-200.font-size}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading02.font-size}", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.heading02.font-size}", + "cds-g10": "{carbon.typography.heading02.font-size}", + "cds-g90": "{carbon.typography.heading02.font-size}", + "cds-g100": "{carbon.typography.heading02.font-size}" + }, + "key": "{typography.display-200.font-size}" + }, + "name": "token-typography-display-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "font-size" + ] + }, + { + "key": "{typography.display-200.line-height}", + "$type": "number", + "$value": 1.5, + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading02.line-height}", + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": "{carbon.typography.heading02.line-height}", + "cds-g10": "{carbon.typography.heading02.line-height}", + "cds-g90": "{carbon.typography.heading02.line-height}", + "cds-g100": "{carbon.typography.heading02.line-height}" + }, + "key": "{typography.display-200.line-height}" + }, + "name": "token-typography-display-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "line-height" + ] + }, + { + "key": "{typography.display-200.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading02.letter-spacing}", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading02.letter-spacing}", + "cds-g10": "{carbon.typography.heading02.letter-spacing}", + "cds-g90": "{carbon.typography.heading02.letter-spacing}", + "cds-g100": "{carbon.typography.heading02.letter-spacing}" + }, + "key": "{typography.display-200.letter-spacing}" + }, + "name": "token-typography-display-200-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "letter-spacing" + ] + }, + { + "key": "{typography.display-100.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-100.font-family}" + }, + "name": "token-typography-display-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "font-family" + ] + }, + { + "key": "{typography.display-100.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.heading01.font-size}", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.heading01.font-size}", + "cds-g10": "{carbon.typography.heading01.font-size}", + "cds-g90": "{carbon.typography.heading01.font-size}", + "cds-g100": "{carbon.typography.heading01.font-size}" + }, + "key": "{typography.display-100.font-size}" + }, + "name": "token-typography-display-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "font-size" + ] + }, + { + "key": "{typography.display-100.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.heading01.line-height}", + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": "{carbon.typography.heading01.line-height}", + "cds-g10": "{carbon.typography.heading01.line-height}", + "cds-g90": "{carbon.typography.heading01.line-height}", + "cds-g100": "{carbon.typography.heading01.line-height}" + }, + "key": "{typography.display-100.line-height}" + }, + "name": "token-typography-display-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "line-height" + ] + }, + { + "key": "{typography.display-100.letter-spacing}", + "$type": "letter-spacing", + "$value": "0.16px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0.16px", + "cds-g10": "0.16px", + "cds-g90": "0.16px", + "cds-g100": "0.16px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading01.letter-spacing}", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.heading01.letter-spacing}", + "cds-g10": "{carbon.typography.heading01.letter-spacing}", + "cds-g90": "{carbon.typography.heading01.letter-spacing}", + "cds-g100": "{carbon.typography.heading01.letter-spacing}" + }, + "key": "{typography.display-100.letter-spacing}" + }, + "name": "token-typography-display-100-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "letter-spacing" + ] + }, + { + "key": "{typography.body-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-300.font-family}" + }, + "name": "token-typography-body-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "font-family" + ] + }, + { + "key": "{typography.body-300.font-size}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.body02.font-size}", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.body02.font-size}", + "cds-g10": "{carbon.typography.body02.font-size}", + "cds-g90": "{carbon.typography.body02.font-size}", + "cds-g100": "{carbon.typography.body02.font-size}" + }, + "key": "{typography.body-300.font-size}" + }, + "name": "token-typography-body-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "font-size" + ] + }, + { + "key": "{typography.body-300.line-height}", + "$type": "number", + "$value": 1.5, + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.body02.line-height}", + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": "{carbon.typography.body02.line-height}", + "cds-g10": "{carbon.typography.body02.line-height}", + "cds-g90": "{carbon.typography.body02.line-height}", + "cds-g100": "{carbon.typography.body02.line-height}" + }, + "key": "{typography.body-300.line-height}" + }, + "name": "token-typography-body-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "line-height" + ] + }, + { + "key": "{typography.body-200.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-200.font-family}" + }, + "name": "token-typography-body-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "font-family" + ] + }, + { + "key": "{typography.body-200.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.body01.font-size}", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "{carbon.typography.body01.font-size}", + "cds-g10": "{carbon.typography.body01.font-size}", + "cds-g90": "{carbon.typography.body01.font-size}", + "cds-g100": "{carbon.typography.body01.font-size}" + }, + "key": "{typography.body-200.font-size}" + }, + "name": "token-typography-body-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "font-size" + ] + }, + { + "key": "{typography.body-200.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "20px", + "$modes": { + "default": 1.4286, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.body01.line-height}", + "comment": "20px", + "$modes": { + "default": 1.4286, + "cds-g0": "{carbon.typography.body01.line-height}", + "cds-g10": "{carbon.typography.body01.line-height}", + "cds-g90": "{carbon.typography.body01.line-height}", + "cds-g100": "{carbon.typography.body01.line-height}" + }, + "key": "{typography.body-200.line-height}" + }, + "name": "token-typography-body-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "line-height" + ] + }, + { + "key": "{typography.body-100.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "default": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-100.font-family}" + }, + "name": "token-typography-body-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "font-family" + ] + }, + { + "key": "{typography.body-100.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.bodyCompact01.font-size}", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.bodyCompact01.font-size}", + "cds-g10": "{carbon.typography.bodyCompact01.font-size}", + "cds-g90": "{carbon.typography.bodyCompact01.font-size}", + "cds-g100": "{carbon.typography.bodyCompact01.font-size}" + }, + "key": "{typography.body-100.font-size}" + }, + "name": "token-typography-body-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "font-size" + ] + }, + { + "key": "{typography.body-100.line-height}", + "$type": "number", + "$value": 1.28572, + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.bodyCompact01.line-height}", + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": "{carbon.typography.bodyCompact01.line-height}", + "cds-g10": "{carbon.typography.bodyCompact01.line-height}", + "cds-g90": "{carbon.typography.bodyCompact01.line-height}", + "cds-g100": "{carbon.typography.bodyCompact01.line-height}" + }, + "key": "{typography.body-100.line-height}" + }, + "name": "token-typography-body-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "line-height" + ] + }, + { + "key": "{typography.code-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-300.font-family}" + }, + "name": "token-typography-code-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "font-family" + ] + }, + { + "key": "{typography.code-300.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.code02.font-size}", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-300.font-size}" + }, + "name": "token-typography-code-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "font-size" + ] + }, + { + "key": "{typography.code-300.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "20px", + "$modes": { + "default": 1.25, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.code02.line-height}", + "comment": "20px", + "$modes": { + "default": 1.25, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-300.line-height}" + }, + "name": "token-typography-code-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "line-height" + ] + }, + { + "key": "{typography.code-200.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-200.font-family}" + }, + "name": "token-typography-code-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "font-family" + ] + }, + { + "key": "{typography.code-200.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.code02.font-size}", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-200.font-size}" + }, + "name": "token-typography-code-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "font-size" + ] + }, + { + "key": "{typography.code-200.line-height}", + "$type": "number", + "$value": 1.42857, + "comment": "18px", + "$modes": { + "default": 1.125, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.code02.line-height}", + "comment": "18px", + "$modes": { + "default": 1.125, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-200.line-height}" + }, + "name": "token-typography-code-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "line-height" + ] + }, + { + "key": "{typography.code-100.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "default": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-100.font-family}" + }, + "name": "token-typography-code-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "font-family" + ] + }, + { + "key": "{typography.code-100.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.code02.font-size}", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-100.font-size}" + }, + "name": "token-typography-code-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "font-size" + ] + }, + { + "key": "{typography.code-100.line-height}", + "$type": "number", + "$value": 1.33333, + "comment": "16px", + "$modes": { + "default": 1.23, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.code01.line-height}", + "comment": "16px", + "$modes": { + "default": 1.23, + "cds-g0": "{carbon.typography.code01.line-height}", + "cds-g10": "{carbon.typography.code01.line-height}", + "cds-g90": "{carbon.typography.code01.line-height}", + "cds-g100": "{carbon.typography.code01.line-height}" + }, + "key": "{typography.code-100.line-height}" + }, + "name": "token-typography-code-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "line-height" + ] + } +] \ No newline at end of file diff --git a/packages/tokens/dist/docs/products/themed-tokens/default.json b/packages/tokens/dist/docs/products/themed-tokens/default.json new file mode 100644 index 00000000000..7997ebd2714 --- /dev/null +++ b/packages/tokens/dist/docs/products/themed-tokens/default.json @@ -0,0 +1,15614 @@ +[ + { + "key": "{border.radius.x-small}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.x-small}" + }, + "name": "token-border-radius-x-small", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "x-small" + ] + }, + { + "key": "{border.radius.small}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.small}" + }, + "name": "token-border-radius-small", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "small" + ] + }, + { + "key": "{border.radius.medium}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.medium}" + }, + "name": "token-border-radius-medium", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "medium" + ] + }, + { + "key": "{border.radius.large}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{border.radius.large}" + }, + "name": "token-border-radius-large", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "large" + ] + }, + { + "key": "{border.radius.rounded}", + "$type": "dimension", + "$value": "1000000000px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1000000000", + "unit": "px", + "key": "{border.radius.rounded}" + }, + "name": "token-border-radius-rounded", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "rounded" + ] + }, + { + "key": "{color.palette.blue-500}", + "$type": "color", + "$value": "#1c345f", + "group": "palette", + "$modes": { + "default": "#1c345f", + "cds-g0": "#001141", + "cds-g10": "#001141", + "cds-g90": "#001141", + "cds-g100": "#001141" + }, + "original": { + "$type": "color", + "$value": "#1c345f", + "group": "palette", + "$modes": { + "default": "#1c345f", + "cds-g0": "{carbon.color.blue.100}", + "cds-g10": "{carbon.color.blue.100}", + "cds-g90": "{carbon.color.blue.100}", + "cds-g100": "{carbon.color.blue.100}" + }, + "key": "{color.palette.blue-500}" + }, + "name": "token-color-palette-blue-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-500" + ] + }, + { + "key": "{color.palette.blue-400}", + "$type": "color", + "$value": "#0046d1", + "group": "palette", + "$modes": { + "default": "#0046d1", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#002d9c", + "cds-g100": "#002d9c" + }, + "original": { + "$type": "color", + "$value": "#0046d1", + "group": "palette", + "$modes": { + "default": "#0046d1", + "cds-g0": "{carbon.color.blue.80}", + "cds-g10": "{carbon.color.blue.80}", + "cds-g90": "{carbon.color.blue.80}", + "cds-g100": "{carbon.color.blue.80}" + }, + "key": "{color.palette.blue-400}" + }, + "name": "token-color-palette-blue-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-400" + ] + }, + { + "key": "{color.palette.blue-300}", + "$type": "color", + "$value": "#0c56e9", + "group": "palette", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, + "original": { + "$type": "color", + "$value": "#0c56e9", + "group": "palette", + "$modes": { + "default": "#0c56e9", + "cds-g0": "{carbon.color.blue.70}", + "cds-g10": "{carbon.color.blue.70}", + "cds-g90": "{carbon.color.blue.70}", + "cds-g100": "{carbon.color.blue.70}" + }, + "key": "{color.palette.blue-300}" + }, + "name": "token-color-palette-blue-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-300" + ] + }, + { + "key": "{color.palette.blue-200}", + "$type": "color", + "$value": "#1060ff", + "group": "palette", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "#1060ff", + "group": "palette", + "$modes": { + "default": "#1060ff", + "cds-g0": "{carbon.color.blue.60}", + "cds-g10": "{carbon.color.blue.60}", + "cds-g90": "{carbon.color.blue.60}", + "cds-g100": "{carbon.color.blue.60}" + }, + "key": "{color.palette.blue-200}" + }, + "name": "token-color-palette-blue-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-200" + ] + }, + { + "key": "{color.palette.blue-100}", + "$type": "color", + "$value": "#cce3fe", + "group": "palette", + "$modes": { + "default": "#cce3fe", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "#cce3fe", + "group": "palette", + "$modes": { + "default": "#cce3fe", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.20}", + "cds-g100": "{carbon.color.blue.20}" + }, + "key": "{color.palette.blue-100}" + }, + "name": "token-color-palette-blue-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-100" + ] + }, + { + "key": "{color.palette.blue-50}", + "$type": "color", + "$value": "#f2f8ff", + "group": "palette", + "$modes": { + "default": "#f2f8ff", + "cds-g0": "#edf5ff", + "cds-g10": "#edf5ff", + "cds-g90": "#edf5ff", + "cds-g100": "#edf5ff" + }, + "original": { + "$type": "color", + "$value": "#f2f8ff", + "group": "palette", + "$modes": { + "default": "#f2f8ff", + "cds-g0": "{carbon.color.blue.10}", + "cds-g10": "{carbon.color.blue.10}", + "cds-g90": "{carbon.color.blue.10}", + "cds-g100": "{carbon.color.blue.10}" + }, + "key": "{color.palette.blue-50}" + }, + "name": "token-color-palette-blue-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "blue-50" + ] + }, + { + "key": "{color.palette.purple-500}", + "$type": "color", + "$value": "#42215b", + "group": "palette", + "$modes": { + "default": "#42215b", + "cds-g0": "#31135e", + "cds-g10": "#31135e", + "cds-g90": "#31135e", + "cds-g100": "#31135e" + }, + "original": { + "$type": "color", + "$value": "#42215b", + "group": "palette", + "$modes": { + "default": "#42215b", + "cds-g0": "{carbon.color.purple.90}", + "cds-g10": "{carbon.color.purple.90}", + "cds-g90": "{carbon.color.purple.90}", + "cds-g100": "{carbon.color.purple.90}" + }, + "key": "{color.palette.purple-500}" + }, + "name": "token-color-palette-purple-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-500" + ] + }, + { + "key": "{color.palette.purple-400}", + "$type": "color", + "$value": "#7b00db", + "group": "palette", + "$modes": { + "default": "#7b00db", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "#7b00db", + "group": "palette", + "$modes": { + "default": "#7b00db", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, + "key": "{color.palette.purple-400}" + }, + "name": "token-color-palette-purple-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-400" + ] + }, + { + "key": "{color.palette.purple-300}", + "$type": "color", + "$value": "#911ced", + "group": "palette", + "$modes": { + "default": "#911ced", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#8a3ffc", + "cds-g100": "#8a3ffc" + }, + "original": { + "$type": "color", + "$value": "#911ced", + "group": "palette", + "$modes": { + "default": "#911ced", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.60}", + "cds-g100": "{carbon.color.purple.60}" + }, + "key": "{color.palette.purple-300}" + }, + "name": "token-color-palette-purple-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-300" + ] + }, + { + "key": "{color.palette.purple-200}", + "$type": "color", + "$value": "#a737ff", + "group": "palette", + "$modes": { + "default": "#a737ff", + "cds-g0": "#a56eff", + "cds-g10": "#a56eff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, + "original": { + "$type": "color", + "$value": "#a737ff", + "group": "palette", + "$modes": { + "default": "#a737ff", + "cds-g0": "{carbon.color.purple.50}", + "cds-g10": "{carbon.color.purple.50}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, + "key": "{color.palette.purple-200}" + }, + "name": "token-color-palette-purple-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-200" + ] + }, + { + "key": "{color.palette.purple-100}", + "$type": "color", + "$value": "#ead2fe", + "group": "palette", + "$modes": { + "default": "#ead2fe", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "#ead2fe", + "group": "palette", + "$modes": { + "default": "#ead2fe", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.20}" + }, + "key": "{color.palette.purple-100}" + }, + "name": "token-color-palette-purple-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-100" + ] + }, + { + "key": "{color.palette.purple-50}", + "$type": "color", + "$value": "#f9f2ff", + "group": "palette", + "$modes": { + "default": "#f9f2ff", + "cds-g0": "#f6f2ff", + "cds-g10": "#f6f2ff", + "cds-g90": "#f6f2ff", + "cds-g100": "#f6f2ff" + }, + "original": { + "$type": "color", + "$value": "#f9f2ff", + "group": "palette", + "$modes": { + "default": "#f9f2ff", + "cds-g0": "{carbon.color.purple.10}", + "cds-g10": "{carbon.color.purple.10}", + "cds-g90": "{carbon.color.purple.10}", + "cds-g100": "{carbon.color.purple.10}" + }, + "key": "{color.palette.purple-50}" + }, + "name": "token-color-palette-purple-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "purple-50" + ] + }, + { + "key": "{color.palette.green-500}", + "$type": "color", + "$value": "#054220", + "group": "palette", + "$modes": { + "default": "#054220", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#044317", + "cds-g100": "#044317" + }, + "original": { + "$type": "color", + "$value": "#054220", + "group": "palette", + "$modes": { + "default": "#054220", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.80}", + "cds-g100": "{carbon.color.green.80}" + }, + "key": "{color.palette.green-500}" + }, + "name": "token-color-palette-green-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-500" + ] + }, + { + "key": "{color.palette.green-400}", + "$type": "color", + "$value": "#006619", + "group": "palette", + "$modes": { + "default": "#006619", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "#006619", + "group": "palette", + "$modes": { + "default": "#006619", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, + "key": "{color.palette.green-400}" + }, + "name": "token-color-palette-green-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-400" + ] + }, + { + "key": "{color.palette.green-300}", + "$type": "color", + "$value": "#00781e", + "group": "palette", + "$modes": { + "default": "#00781e", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#198038", + "cds-g100": "#198038" + }, + "original": { + "$type": "color", + "$value": "#00781e", + "group": "palette", + "$modes": { + "default": "#00781e", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.60}", + "cds-g100": "{carbon.color.green.60}" + }, + "key": "{color.palette.green-300}" + }, + "name": "token-color-palette-green-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-300" + ] + }, + { + "key": "{color.palette.green-200}", + "$type": "color", + "$value": "#008a22", + "group": "palette", + "$modes": { + "default": "#008a22", + "cds-g0": "#24a148", + "cds-g10": "#24a148", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, + "original": { + "$type": "color", + "$value": "#008a22", + "group": "palette", + "$modes": { + "default": "#008a22", + "cds-g0": "{carbon.color.green.50}", + "cds-g10": "{carbon.color.green.50}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, + "key": "{color.palette.green-200}" + }, + "name": "token-color-palette-green-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-200" + ] + }, + { + "key": "{color.palette.green-100}", + "$type": "color", + "$value": "#cceeda", + "group": "palette", + "$modes": { + "default": "#cceeda", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "#cceeda", + "group": "palette", + "$modes": { + "default": "#cceeda", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, + "key": "{color.palette.green-100}" + }, + "name": "token-color-palette-green-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-100" + ] + }, + { + "key": "{color.palette.green-50}", + "$type": "color", + "$value": "#f2fbf6", + "group": "palette", + "$modes": { + "default": "#f2fbf6", + "cds-g0": "#defbe6", + "cds-g10": "#defbe6", + "cds-g90": "#defbe6", + "cds-g100": "#defbe6" + }, + "original": { + "$type": "color", + "$value": "#f2fbf6", + "group": "palette", + "$modes": { + "default": "#f2fbf6", + "cds-g0": "{carbon.color.green.10}", + "cds-g10": "{carbon.color.green.10}", + "cds-g90": "{carbon.color.green.10}", + "cds-g100": "{carbon.color.green.10}" + }, + "key": "{color.palette.green-50}" + }, + "name": "token-color-palette-green-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "green-50" + ] + }, + { + "key": "{color.palette.amber-500}", + "$type": "color", + "$value": "#542800", + "group": "palette", + "$modes": { + "default": "#542800", + "cds-g0": "#3e1a00", + "cds-g10": "#3e1a00", + "cds-g90": "#3e1a00", + "cds-g100": "#3e1a00" + }, + "original": { + "$type": "color", + "$value": "#542800", + "group": "palette", + "$modes": { + "default": "#542800", + "cds-g0": "{carbon.color.orange.90}", + "cds-g10": "{carbon.color.orange.90}", + "cds-g90": "{carbon.color.orange.90}", + "cds-g100": "{carbon.color.orange.90}" + }, + "key": "{color.palette.amber-500}" + }, + "name": "token-color-palette-amber-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-500" + ] + }, + { + "key": "{color.palette.amber-400}", + "$type": "color", + "$value": "#803d00", + "group": "palette", + "$modes": { + "default": "#803d00", + "cds-g0": "#5e2900", + "cds-g10": "#5e2900", + "cds-g90": "#5e2900", + "cds-g100": "#5e2900" + }, + "original": { + "$type": "color", + "$value": "#803d00", + "group": "palette", + "$modes": { + "default": "#803d00", + "cds-g0": "{carbon.color.orange.80}", + "cds-g10": "{carbon.color.orange.80}", + "cds-g90": "{carbon.color.orange.80}", + "cds-g100": "{carbon.color.orange.80}" + }, + "key": "{color.palette.amber-400}" + }, + "name": "token-color-palette-amber-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-400" + ] + }, + { + "key": "{color.palette.amber-300}", + "$type": "color", + "$value": "#9e4b00", + "group": "palette", + "$modes": { + "default": "#9e4b00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, + "original": { + "$type": "color", + "$value": "#9e4b00", + "group": "palette", + "$modes": { + "default": "#9e4b00", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, + "key": "{color.palette.amber-300}" + }, + "name": "token-color-palette-amber-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-300" + ] + }, + { + "key": "{color.palette.amber-200}", + "$type": "color", + "$value": "#bb5a00", + "group": "palette", + "$modes": { + "default": "#bb5a00", + "cds-g0": "#ba4e00", + "cds-g10": "#ba4e00", + "cds-g90": "#ba4e00", + "cds-g100": "#ba4e00" + }, + "original": { + "$type": "color", + "$value": "#bb5a00", + "group": "palette", + "$modes": { + "default": "#bb5a00", + "cds-g0": "{carbon.color.orange.60}", + "cds-g10": "{carbon.color.orange.60}", + "cds-g90": "{carbon.color.orange.60}", + "cds-g100": "{carbon.color.orange.60}" + }, + "key": "{color.palette.amber-200}" + }, + "name": "token-color-palette-amber-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-200" + ] + }, + { + "key": "{color.palette.amber-100}", + "$type": "color", + "$value": "#fbeabf", + "group": "palette", + "$modes": { + "default": "#fbeabf", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "original": { + "$type": "color", + "$value": "#fbeabf", + "group": "palette", + "$modes": { + "default": "#fbeabf", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "key": "{color.palette.amber-100}" + }, + "name": "token-color-palette-amber-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-100" + ] + }, + { + "key": "{color.palette.amber-50}", + "$type": "color", + "$value": "#fff9e8", + "group": "palette", + "$modes": { + "default": "#fff9e8", + "cds-g0": "#fff2e8", + "cds-g10": "#fff2e8", + "cds-g90": "#fff2e8", + "cds-g100": "#fff2e8" + }, + "original": { + "$type": "color", + "$value": "#fff9e8", + "group": "palette", + "$modes": { + "default": "#fff9e8", + "cds-g0": "{carbon.color.orange.10}", + "cds-g10": "{carbon.color.orange.10}", + "cds-g90": "{carbon.color.orange.10}", + "cds-g100": "{carbon.color.orange.10}" + }, + "key": "{color.palette.amber-50}" + }, + "name": "token-color-palette-amber-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "amber-50" + ] + }, + { + "key": "{color.palette.red-500}", + "$type": "color", + "$value": "#51130a", + "group": "palette", + "$modes": { + "default": "#51130a", + "cds-g0": "#520408", + "cds-g10": "#520408", + "cds-g90": "#520408", + "cds-g100": "#520408" + }, + "original": { + "$type": "color", + "$value": "#51130a", + "group": "palette", + "$modes": { + "default": "#51130a", + "cds-g0": "{carbon.color.red.90}", + "cds-g10": "{carbon.color.red.90}", + "cds-g90": "{carbon.color.red.90}", + "cds-g100": "{carbon.color.red.90}" + }, + "key": "{color.palette.red-500}" + }, + "name": "token-color-palette-red-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-500" + ] + }, + { + "key": "{color.palette.red-400}", + "$type": "color", + "$value": "#940004", + "group": "palette", + "$modes": { + "default": "#940004", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#750e13", + "cds-g100": "#750e13" + }, + "original": { + "$type": "color", + "$value": "#940004", + "group": "palette", + "$modes": { + "default": "#940004", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.80}", + "cds-g100": "{carbon.color.red.80}" + }, + "key": "{color.palette.red-400}" + }, + "name": "token-color-palette-red-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-400" + ] + }, + { + "key": "{color.palette.red-300}", + "$type": "color", + "$value": "#c00005", + "group": "palette", + "$modes": { + "default": "#c00005", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "#c00005", + "group": "palette", + "$modes": { + "default": "#c00005", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, + "key": "{color.palette.red-300}" + }, + "name": "token-color-palette-red-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-300" + ] + }, + { + "key": "{color.palette.red-200}", + "$type": "color", + "$value": "#e52228", + "group": "palette", + "$modes": { + "default": "#e52228", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "#e52228", + "group": "palette", + "$modes": { + "default": "#e52228", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.60}", + "cds-g100": "{carbon.color.red.60}" + }, + "key": "{color.palette.red-200}" + }, + "name": "token-color-palette-red-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-200" + ] + }, + { + "key": "{color.palette.red-100}", + "$type": "color", + "$value": "#fbd4d4", + "group": "palette", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "#fbd4d4", + "group": "palette", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, + "key": "{color.palette.red-100}" + }, + "name": "token-color-palette-red-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-100" + ] + }, + { + "key": "{color.palette.red-50}", + "$type": "color", + "$value": "#fff5f5", + "group": "palette", + "$modes": { + "default": "#fff5f5", + "cds-g0": "#fff1f1", + "cds-g10": "#fff1f1", + "cds-g90": "#fff1f1", + "cds-g100": "#fff1f1" + }, + "original": { + "$type": "color", + "$value": "#fff5f5", + "group": "palette", + "$modes": { + "default": "#fff5f5", + "cds-g0": "{carbon.color.red.10}", + "cds-g10": "{carbon.color.red.10}", + "cds-g90": "{carbon.color.red.10}", + "cds-g100": "{carbon.color.red.10}" + }, + "key": "{color.palette.red-50}" + }, + "name": "token-color-palette-red-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "red-50" + ] + }, + { + "key": "{color.palette.neutral-700}", + "$type": "color", + "$value": "#0c0c0e", + "group": "palette", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "#0c0c0e", + "group": "palette", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "{carbon.color.gray.100}", + "cds-g10": "{carbon.color.gray.100}", + "cds-g90": "{carbon.color.gray.100}", + "cds-g100": "{carbon.color.gray.100}" + }, + "key": "{color.palette.neutral-700}" + }, + "name": "token-color-palette-neutral-700", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-700" + ] + }, + { + "key": "{color.palette.neutral-600}", + "$type": "color", + "$value": "#3b3d45", + "group": "palette", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#393939", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "#3b3d45", + "group": "palette", + "$modes": { + "default": "#3b3d45", + "cds-g0": "{carbon.color.gray.80}", + "cds-g10": "{carbon.color.gray.80}", + "cds-g90": "{carbon.color.gray.80}", + "cds-g100": "{carbon.color.gray.80}" + }, + "key": "{color.palette.neutral-600}" + }, + "name": "token-color-palette-neutral-600", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-600" + ] + }, + { + "key": "{color.palette.neutral-500}", + "$type": "color", + "$value": "#656a76", + "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "#656a76", + "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": "{carbon.color.gray.70}", + "cds-g10": "{carbon.color.gray.70}", + "cds-g90": "{carbon.color.gray.70}", + "cds-g100": "{carbon.color.gray.70}" + }, + "key": "{color.palette.neutral-500}" + }, + "name": "token-color-palette-neutral-500", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-500" + ] + }, + { + "key": "{color.palette.neutral-400}", + "$type": "color", + "$value": "#8c909c", + "group": "palette", + "$modes": { + "default": "#8c909c", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, + "original": { + "$type": "color", + "$value": "#8c909c", + "group": "palette", + "$modes": { + "default": "#8c909c", + "cds-g0": "{carbon.color.gray.50}", + "cds-g10": "{carbon.color.gray.50}", + "cds-g90": "{carbon.color.gray.50}", + "cds-g100": "{carbon.color.gray.50}" + }, + "key": "{color.palette.neutral-400}" + }, + "name": "token-color-palette-neutral-400", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-400" + ] + }, + { + "key": "{color.palette.neutral-300}", + "$type": "color", + "$value": "#c2c5cb", + "group": "palette", + "$modes": { + "default": "#c2c5cb", + "cds-g0": "#a8a8a8", + "cds-g10": "#a8a8a8", + "cds-g90": "#a8a8a8", + "cds-g100": "#a8a8a8" + }, + "original": { + "$type": "color", + "$value": "#c2c5cb", + "group": "palette", + "$modes": { + "default": "#c2c5cb", + "cds-g0": "{carbon.color.gray.40}", + "cds-g10": "{carbon.color.gray.40}", + "cds-g90": "{carbon.color.gray.40}", + "cds-g100": "{carbon.color.gray.40}" + }, + "key": "{color.palette.neutral-300}" + }, + "name": "token-color-palette-neutral-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-300" + ] + }, + { + "key": "{color.palette.neutral-200}", + "$type": "color", + "$value": "#dedfe3", + "group": "palette", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "#dedfe3", + "group": "palette", + "$modes": { + "default": "#dedfe3", + "cds-g0": "{carbon.color.gray.30}", + "cds-g10": "{carbon.color.gray.30}", + "cds-g90": "{carbon.color.gray.30}", + "cds-g100": "{carbon.color.gray.30}" + }, + "key": "{color.palette.neutral-200}" + }, + "name": "token-color-palette-neutral-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-200" + ] + }, + { + "key": "{color.palette.neutral-100}", + "$type": "color", + "$value": "#f1f2f3", + "group": "palette", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#e0e0e0", + "cds-g100": "#e0e0e0" + }, + "original": { + "$type": "color", + "$value": "#f1f2f3", + "group": "palette", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "{carbon.color.gray.20}", + "cds-g10": "{carbon.color.gray.20}", + "cds-g90": "{carbon.color.gray.20}", + "cds-g100": "{carbon.color.gray.20}" + }, + "key": "{color.palette.neutral-100}" + }, + "name": "token-color-palette-neutral-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-100" + ] + }, + { + "key": "{color.palette.neutral-50}", + "$type": "color", + "$value": "#fafafa", + "group": "palette", + "$modes": { + "default": "#fafafa", + "cds-g0": "#f4f4f4", + "cds-g10": "#f4f4f4", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "#fafafa", + "group": "palette", + "$modes": { + "default": "#fafafa", + "cds-g0": "{carbon.color.gray.10}", + "cds-g10": "{carbon.color.gray.10}", + "cds-g90": "{carbon.color.gray.10}", + "cds-g100": "{carbon.color.gray.10}" + }, + "key": "{color.palette.neutral-50}" + }, + "name": "token-color-palette-neutral-50", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-50" + ] + }, + { + "key": "{color.palette.neutral-0}", + "$type": "color", + "$value": "#ffffff", + "group": "palette", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "#ffffff", + "group": "palette", + "$modes": { + "default": "#ffffff", + "cds-g0": "{carbon.color.white.0}", + "cds-g10": "{carbon.color.white.0}", + "cds-g90": "{carbon.color.white.0}", + "cds-g100": "{carbon.color.white.0}" + }, + "key": "{color.palette.neutral-0}" + }, + "name": "token-color-palette-neutral-0", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "neutral-0" + ] + }, + { + "key": "{color.palette.alpha-300}", + "$type": "color", + "$value": "#3b3d4566", + "alpha": "0.4", + "group": "palette", + "$modes": { + "default": "#3b3d45", + "cds-g0": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#6f6f6f", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-600}", + "alpha": "0.4", + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-600}", + "cds-g0": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.60}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "key": "{color.palette.alpha-300}" + }, + "name": "token-color-palette-alpha-300", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "alpha-300" + ] + }, + { + "key": "{color.palette.alpha-200}", + "$type": "color", + "$value": "#656a7633", + "alpha": "0.2", + "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": { + "$value": "#c6c6c6", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#e0e0e0", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#6f6f6f", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#525252", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "alpha": "0.2", + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": { + "$value": "{carbon.color.gray.30}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.20}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.60}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.70}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "key": "{color.palette.alpha-200}" + }, + "name": "token-color-palette-alpha-200", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "alpha-200" + ] + }, + { + "key": "{color.palette.alpha-100}", + "$type": "color", + "$value": "#656a761a", + "alpha": "0.1", + "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": { + "$value": "#e0e0e0", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#c6c6c6", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#525252", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#393939", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "alpha": "0.1", + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": { + "$value": "{carbon.color.gray.20}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.30}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.70}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.80}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, + "key": "{color.palette.alpha-100}" + }, + "name": "token-color-palette-alpha-100", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "palette", + "alpha-100" + ] + }, + { + "key": "{color.border.primary}", + "$type": "color", + "$value": "#656a7633", + "group": "semantic", + "$modes": { + "default": "#656a7633", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{color.palette.alpha-200}", + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-200}", + "cds-g0": "{carbon.themes.white.borderSubtle03}", + "cds-g10": "{carbon.themes.g10.borderSubtle03}", + "cds-g90": "{carbon.themes.g90.borderSubtle03}", + "cds-g100": "{carbon.themes.g100.borderSubtle03}" + }, + "key": "{color.border.primary}" + }, + "name": "token-color-border-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "primary" + ] + }, + { + "key": "{color.border.faint}", + "$type": "color", + "$value": "#656a761a", + "group": "semantic", + "$modes": { + "default": "#656a761a", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{color.palette.alpha-100}", + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-100}", + "cds-g0": "{carbon.themes.white.borderSubtle00}", + "cds-g10": "{carbon.themes.g10.borderSubtle00}", + "cds-g90": "{carbon.themes.g90.borderSubtle00}", + "cds-g100": "{carbon.themes.g100.borderSubtle00}" + }, + "key": "{color.border.faint}" + }, + "name": "token-color-border-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "faint" + ] + }, + { + "key": "{color.border.strong}", + "$type": "color", + "$value": "#3b3d4566", + "group": "semantic", + "$modes": { + "default": "#3b3d4566", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{color.palette.alpha-300}", + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-300}", + "cds-g0": "{carbon.themes.white.borderStrong01}", + "cds-g10": "{carbon.themes.g10.borderStrong01}", + "cds-g90": "{carbon.themes.g90.borderStrong01}", + "cds-g100": "{carbon.themes.g100.borderStrong01}" + }, + "key": "{color.border.strong}" + }, + "name": "token-color-border-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "strong" + ] + }, + { + "key": "{color.border.action}", + "$type": "color", + "$value": "#cce3fe", + "group": "semantic", + "$modes": { + "default": "#cce3fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-100}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-100}", + "cds-g0": "{carbon.themes.white.borderInteractive}", + "cds-g10": "{carbon.themes.g10.borderInteractive}", + "cds-g90": "{carbon.themes.g90.borderInteractive}", + "cds-g100": "{carbon.themes.g100.borderInteractive}" + }, + "key": "{color.border.action}" + }, + "name": "token-color-border-action", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "action" + ] + }, + { + "key": "{color.border.highlight}", + "$type": "color", + "$value": "#ead2fe", + "group": "semantic", + "$modes": { + "default": "#ead2fe", + "cds-g0": "#be95ff", + "cds-g10": "#be95ff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, + "original": { + "$type": "color", + "$value": "{color.palette.purple-100}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-100}", + "cds-g0": "{carbon.color.purple.40}", + "cds-g10": "{carbon.color.purple.40}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, + "key": "{color.border.highlight}" + }, + "name": "token-color-border-highlight", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "highlight" + ] + }, + { + "key": "{color.border.success}", + "$type": "color", + "$value": "#cceeda", + "group": "semantic", + "$modes": { + "default": "#cceeda", + "cds-g0": "#42be65", + "cds-g10": "#42be65", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, + "original": { + "$type": "color", + "$value": "{color.palette.green-100}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-100}", + "cds-g0": "{carbon.color.green.40}", + "cds-g10": "{carbon.color.green.40}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, + "key": "{color.border.success}" + }, + "name": "token-color-border-success", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "success" + ] + }, + { + "key": "{color.border.warning}", + "$type": "color", + "$value": "#fbeabf", + "group": "semantic", + "$modes": { + "default": "#fbeabf", + "cds-g0": "#d2a106", + "cds-g10": "#d2a106", + "cds-g90": "#b28600", + "cds-g100": "#b28600" + }, + "original": { + "$type": "color", + "$value": "{color.palette.amber-100}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.yellow.40}", + "cds-g10": "{carbon.color.yellow.40}", + "cds-g90": "{carbon.color.yellow.50}", + "cds-g100": "{carbon.color.yellow.50}" + }, + "key": "{color.border.warning}" + }, + "name": "token-color-border-warning", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "warning" + ] + }, + { + "key": "{color.border.critical}", + "$type": "color", + "$value": "#fbd4d4", + "group": "semantic", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "#ff8389", + "cds-g10": "#ff8389", + "cds-g90": "#fa4d56", + "cds-g100": "#fa4d56" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-100}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-100}", + "cds-g0": "{carbon.color.red.40}", + "cds-g10": "{carbon.color.red.40}", + "cds-g90": "{carbon.color.red.50}", + "cds-g100": "{carbon.color.red.50}" + }, + "key": "{color.border.critical}" + }, + "name": "token-color-border-critical", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "border", + "critical" + ] + }, + { + "key": "{color.focus.action.internal}", + "$type": "color", + "$value": "#0c56e9", + "group": "semantic", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, + "key": "{color.focus.action.internal}" + }, + "name": "token-color-focus-action-internal", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "action", + "internal" + ] + }, + { + "key": "{color.focus.action.external}", + "$type": "color", + "$value": "#5990ff", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "#5990ff", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{color.focus.action.external}" + }, + "name": "token-color-focus-action-external", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "action", + "external" + ] + }, + { + "key": "{color.focus.critical.internal}", + "$type": "color", + "$value": "#c00005", + "group": "semantic", + "$modes": { + "default": "#c00005", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, + "key": "{color.focus.critical.internal}" + }, + "name": "token-color-focus-critical-internal", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "critical", + "internal" + ] + }, + { + "key": "{color.focus.critical.external}", + "$type": "color", + "$value": "#dd7578", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#dd7578", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "#dd7578", + "group": "semantic", + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#dd7578", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{color.focus.critical.external}" + }, + "name": "token-color-focus-critical-external", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "focus", + "critical", + "external" + ] + }, + { + "key": "{color.foreground.strong}", + "$type": "color", + "$value": "#0c0c0e", + "group": "semantic", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-700}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{color.foreground.strong}" + }, + "name": "token-color-foreground-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "strong" + ] + }, + { + "key": "{color.foreground.primary}", + "$type": "color", + "$value": "#3b3d45", + "group": "semantic", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-600}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-600}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{color.foreground.primary}" + }, + "name": "token-color-foreground-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "primary" + ] + }, + { + "key": "{color.foreground.faint}", + "$type": "color", + "$value": "#656a76", + "group": "semantic", + "$modes": { + "default": "#656a76", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{color.foreground.faint}" + }, + "name": "token-color-foreground-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "faint" + ] + }, + { + "key": "{color.foreground.high-contrast}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{color.foreground.high-contrast}" + }, + "name": "token-color-foreground-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "high-contrast" + ] + }, + { + "key": "{color.foreground.disabled}", + "$type": "color", + "$value": "#8c909c", + "group": "semantic", + "$modes": { + "default": "#8c909c", + "cds-g0": "rgba(22, 22, 22, 0.25)", + "cds-g10": "rgba(22, 22, 22, 0.25)", + "cds-g90": "rgba(244, 244, 244, 0.25)", + "cds-g100": "rgba(244, 244, 244, 0.25)" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-400}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textDisabled}", + "cds-g10": "{carbon.themes.g10.textDisabled}", + "cds-g90": "{carbon.themes.g90.textDisabled}", + "cds-g100": "{carbon.themes.g100.textDisabled}" + }, + "key": "{color.foreground.disabled}" + }, + "name": "token-color-foreground-disabled", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "disabled" + ] + }, + { + "key": "{color.foreground.action}", + "$type": "color", + "$value": "#1060ff", + "group": "semantic", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#78a9ff", + "cds-g100": "#78a9ff" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.white.linkPrimary}", + "cds-g10": "{carbon.themes.g10.linkPrimary}", + "cds-g90": "{carbon.themes.g90.linkPrimary}", + "cds-g100": "{carbon.themes.g100.linkPrimary}" + }, + "key": "{color.foreground.action}" + }, + "name": "token-color-foreground-action", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "action" + ] + }, + { + "key": "{color.foreground.action-hover}", + "$type": "color", + "$value": "#0c56e9", + "group": "semantic", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, + "key": "{color.foreground.action-hover}" + }, + "name": "token-color-foreground-action-hover", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "action-hover" + ] + }, + { + "key": "{color.foreground.action-active}", + "$type": "color", + "$value": "#0046d1", + "group": "semantic", + "$modes": { + "default": "#0046d1", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, + "key": "{color.foreground.action-active}" + }, + "name": "token-color-foreground-action-active", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "action-active" + ] + }, + { + "key": "{color.foreground.highlight}", + "$type": "color", + "$value": "#a737ff", + "group": "semantic", + "$modes": { + "default": "#a737ff", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, + "original": { + "$type": "color", + "$value": "{color.palette.purple-200}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, + "key": "{color.foreground.highlight}" + }, + "name": "token-color-foreground-highlight", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "highlight" + ] + }, + { + "key": "{color.foreground.highlight-on-surface}", + "$type": "color", + "$value": "#911ced", + "group": "semantic", + "$modes": { + "default": "#911ced", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#d4bbff", + "cds-g100": "#d4bbff" + }, + "original": { + "$type": "color", + "$value": "{color.palette.purple-300}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-300}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.30}", + "cds-g100": "{carbon.color.purple.30}" + }, + "key": "{color.foreground.highlight-on-surface}" + }, + "name": "token-color-foreground-highlight-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "highlight-on-surface" + ] + }, + { + "key": "{color.foreground.highlight-high-contrast}", + "$type": "color", + "$value": "#42215b", + "group": "semantic", + "$modes": { + "default": "#42215b", + "cds-g0": "#491d8b", + "cds-g10": "#491d8b", + "cds-g90": "#e8daff", + "cds-g100": "#d4bbff" + }, + "original": { + "$type": "color", + "$value": "{color.palette.purple-500}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-500}", + "cds-g0": "{carbon.color.purple.80}", + "cds-g10": "{carbon.color.purple.80}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.30}" + }, + "key": "{color.foreground.highlight-high-contrast}" + }, + "name": "token-color-foreground-highlight-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "highlight-high-contrast" + ] + }, + { + "key": "{color.foreground.success}", + "$type": "color", + "$value": "#008a22", + "group": "semantic", + "$modes": { + "default": "#008a22", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#42be65", + "cds-g100": "#42be65" + }, + "original": { + "$type": "color", + "$value": "{color.palette.green-200}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-200}", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.40}", + "cds-g100": "{carbon.color.green.40}" + }, + "key": "{color.foreground.success}" + }, + "name": "token-color-foreground-success", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "success" + ] + }, + { + "key": "{color.foreground.success-on-surface}", + "$type": "color", + "$value": "#00781e", + "group": "semantic", + "$modes": { + "default": "#00781e", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#6fdc8c", + "cds-g100": "#6fdc8c" + }, + "original": { + "$type": "color", + "$value": "{color.palette.green-300}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-300}", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.30}", + "cds-g100": "{carbon.color.green.30}" + }, + "key": "{color.foreground.success-on-surface}" + }, + "name": "token-color-foreground-success-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "success-on-surface" + ] + }, + { + "key": "{color.foreground.success-high-contrast}", + "$type": "color", + "$value": "#054220", + "group": "semantic", + "$modes": { + "default": "#054220", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{color.palette.green-500}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-500}", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, + "key": "{color.foreground.success-high-contrast}" + }, + "name": "token-color-foreground-success-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "success-high-contrast" + ] + }, + { + "key": "{color.foreground.warning}", + "$type": "color", + "$value": "#bb5a00", + "group": "semantic", + "$modes": { + "default": "#bb5a00", + "cds-g0": "#8e6a00", + "cds-g10": "#8e6a00", + "cds-g90": "#d2a106", + "cds-g100": "#d2a106" + }, + "original": { + "$type": "color", + "$value": "{color.palette.amber-200}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.yellow.60}", + "cds-g10": "{carbon.color.yellow.60}", + "cds-g90": "{carbon.color.yellow.40}", + "cds-g100": "{carbon.color.yellow.40}" + }, + "key": "{color.foreground.warning}" + }, + "name": "token-color-foreground-warning", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "warning" + ] + }, + { + "key": "{color.foreground.warning-on-surface}", + "$type": "color", + "$value": "#9e4b00", + "group": "semantic", + "$modes": { + "default": "#9e4b00", + "cds-g0": "#684e00", + "cds-g10": "#684e00", + "cds-g90": "#f1c21b", + "cds-g100": "#f1c21b" + }, + "original": { + "$type": "color", + "$value": "{color.palette.amber-300}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-300}", + "cds-g0": "{carbon.color.yellow.70}", + "cds-g10": "{carbon.color.yellow.70}", + "cds-g90": "{carbon.color.yellow.30}", + "cds-g100": "{carbon.color.yellow.30}" + }, + "key": "{color.foreground.warning-on-surface}" + }, + "name": "token-color-foreground-warning-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "warning-on-surface" + ] + }, + { + "key": "{color.foreground.warning-high-contrast}", + "$type": "color", + "$value": "#542800", + "group": "semantic", + "$modes": { + "default": "#542800", + "cds-g0": "#483700", + "cds-g10": "#483700", + "cds-g90": "#fddc69", + "cds-g100": "#fddc69" + }, + "original": { + "$type": "color", + "$value": "{color.palette.amber-500}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-500}", + "cds-g0": "{carbon.color.yellow.80}", + "cds-g10": "{carbon.color.yellow.80}", + "cds-g90": "{carbon.color.yellow.20}", + "cds-g100": "{carbon.color.yellow.20}" + }, + "key": "{color.foreground.warning-high-contrast}" + }, + "name": "token-color-foreground-warning-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "warning-high-contrast" + ] + }, + { + "key": "{color.foreground.critical}", + "$type": "color", + "$value": "#e52228", + "group": "semantic", + "$modes": { + "default": "#e52228", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#ff8389", + "cds-g100": "#ff8389" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-200}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-200}", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.40}", + "cds-g100": "{carbon.color.red.40}" + }, + "key": "{color.foreground.critical}" + }, + "name": "token-color-foreground-critical", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "critical" + ] + }, + { + "key": "{color.foreground.critical-on-surface}", + "$type": "color", + "$value": "#c00005", + "group": "semantic", + "$modes": { + "default": "#c00005", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffb3b8", + "cds-g100": "#ffb3b8" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.30}", + "cds-g100": "{carbon.color.red.30}" + }, + "key": "{color.foreground.critical-on-surface}" + }, + "name": "token-color-foreground-critical-on-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "critical-on-surface" + ] + }, + { + "key": "{color.foreground.critical-high-contrast}", + "$type": "color", + "$value": "#51130a", + "group": "semantic", + "$modes": { + "default": "#51130a", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-500}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-500}", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, + "key": "{color.foreground.critical-high-contrast}" + }, + "name": "token-color-foreground-critical-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "critical-high-contrast" + ] + }, + { + "key": "{color.page.primary}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, + "key": "{color.page.primary}" + }, + "name": "token-color-page-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "page", + "primary" + ] + }, + { + "key": "{color.page.faint}", + "$type": "color", + "$value": "#fafafa", + "group": "semantic", + "$modes": { + "default": "#fafafa", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, + "key": "{color.page.faint}" + }, + "name": "token-color-page-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "page", + "faint" + ] + }, + { + "key": "{color.surface.primary}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, + "key": "{color.surface.primary}" + }, + "name": "token-color-surface-primary", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "primary" + ] + }, + { + "key": "{color.surface.faint}", + "$type": "color", + "$value": "#fafafa", + "group": "semantic", + "$modes": { + "default": "#fafafa", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, + "key": "{color.surface.faint}" + }, + "name": "token-color-surface-faint", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "faint" + ] + }, + { + "key": "{color.surface.strong}", + "$type": "color", + "$value": "#f1f2f3", + "group": "semantic", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-100}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerAccent01}", + "cds-g10": "{carbon.themes.g10.layerAccent01}", + "cds-g90": "{carbon.themes.g90.layerAccent01}", + "cds-g100": "{carbon.themes.g100.layerAccent01}" + }, + "key": "{color.surface.strong}" + }, + "name": "token-color-surface-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "strong" + ] + }, + { + "key": "{color.surface.high-contrast}", + "$type": "color", + "$value": "#0c0c0e", + "group": "semantic", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-700}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "key": "{color.surface.high-contrast}" + }, + "name": "token-color-surface-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "high-contrast" + ] + }, + { + "key": "{color.surface.interactive}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, + "key": "{color.surface.interactive}" + }, + "name": "token-color-surface-interactive", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive" + ] + }, + { + "key": "{color.surface.interactive-hover}", + "$type": "color", + "$value": "#f1f2f3", + "group": "semantic", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "#e8e8e8", + "cds-g10": "#e8e8e8", + "cds-g90": "#474747", + "cds-g100": "#333333" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-100}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerHover01}", + "cds-g10": "{carbon.themes.g10.layerHover01}", + "cds-g90": "{carbon.themes.g90.layerHover01}", + "cds-g100": "{carbon.themes.g100.layerHover01}" + }, + "key": "{color.surface.interactive-hover}" + }, + "name": "token-color-surface-interactive-hover", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive-hover" + ] + }, + { + "key": "{color.surface.interactive-active}", + "$type": "color", + "$value": "#dedfe3", + "group": "semantic", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-200}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.white.layerActive01}", + "cds-g10": "{carbon.themes.g10.layerActive01}", + "cds-g90": "{carbon.themes.g90.layerActive01}", + "cds-g100": "{carbon.themes.g100.layerActive01}" + }, + "key": "{color.surface.interactive-active}" + }, + "name": "token-color-surface-interactive-active", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive-active" + ] + }, + { + "key": "{color.surface.interactive-disabled}", + "$type": "color", + "$value": "#fafafa", + "group": "semantic", + "$modes": { + "default": "#fafafa", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.color.gray.30}", + "cds-g10": "{carbon.color.gray.30}", + "cds-g90": "{carbon.color.gray.60}", + "cds-g100": "{carbon.color.gray.70}" + }, + "key": "{color.surface.interactive-disabled}" + }, + "name": "token-color-surface-interactive-disabled", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "interactive-disabled" + ] + }, + { + "key": "{color.surface.action}", + "$type": "color", + "$value": "#f2f8ff", + "group": "semantic", + "$modes": { + "default": "#f2f8ff", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0f62fe", + "cds-g100": "#0043ce" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-50}", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.60}", + "cds-g100": "{carbon.color.blue.70}" + }, + "key": "{color.surface.action}" + }, + "name": "token-color-surface-action", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "action" + ] + }, + { + "key": "{color.surface.highlight}", + "$type": "color", + "$value": "#f9f2ff", + "group": "semantic", + "$modes": { + "default": "#f9f2ff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "{color.palette.purple-50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-50}", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, + "key": "{color.surface.highlight}" + }, + "name": "token-color-surface-highlight", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "highlight" + ] + }, + { + "key": "{color.surface.success}", + "$type": "color", + "$value": "#f2fbf6", + "group": "semantic", + "$modes": { + "default": "#f2fbf6", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "{color.palette.green-50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.green-50}", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, + "key": "{color.surface.success}" + }, + "name": "token-color-surface-success", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "success" + ] + }, + { + "key": "{color.surface.warning}", + "$type": "color", + "$value": "#fff9e8", + "group": "semantic", + "$modes": { + "default": "#fff9e8", + "cds-g0": "#fcf4d6", + "cds-g10": "#fcf4d6", + "cds-g90": "#684e00", + "cds-g100": "#684e00" + }, + "original": { + "$type": "color", + "$value": "{color.palette.amber-50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-50}", + "cds-g0": "{carbon.color.yellow.10}", + "cds-g10": "{carbon.color.yellow.10}", + "cds-g90": "{carbon.color.yellow.70}", + "cds-g100": "{carbon.color.yellow.70}" + }, + "key": "{color.surface.warning}" + }, + "name": "token-color-surface-warning", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "warning" + ] + }, + { + "key": "{color.surface.critical}", + "$type": "color", + "$value": "#fff5f5", + "group": "semantic", + "$modes": { + "default": "#fff5f5", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-50}", + "group": "semantic", + "$modes": { + "default": "{color.palette.red-50}", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, + "key": "{color.surface.critical}" + }, + "name": "token-color-surface-critical", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "critical" + ] + }, + { + "key": "{color.hashicorp.brand}", + "$type": "color", + "$value": "#000000", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.hashicorp-brand}", + "group": "branding", + "key": "{color.hashicorp.brand}" + }, + "name": "token-color-hashicorp-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "hashicorp", + "brand" + ] + }, + { + "key": "{color.boundary.brand}", + "$type": "color", + "$value": "#f24c53", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-brand}", + "group": "branding", + "key": "{color.boundary.brand}" + }, + "name": "token-color-boundary-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "brand" + ] + }, + { + "key": "{color.boundary.foreground}", + "$type": "color", + "$value": "#cf2d32", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-500}", + "group": "branding", + "key": "{color.boundary.foreground}" + }, + "name": "token-color-boundary-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "foreground" + ] + }, + { + "key": "{color.boundary.surface}", + "$type": "color", + "$value": "#ffecec", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-50}", + "group": "branding", + "key": "{color.boundary.surface}" + }, + "name": "token-color-boundary-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "surface" + ] + }, + { + "key": "{color.boundary.border}", + "$type": "color", + "$value": "#fbd7d8", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-100}", + "group": "branding", + "key": "{color.boundary.border}" + }, + "name": "token-color-boundary-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "border" + ] + }, + { + "key": "{color.boundary.gradient.primary.start}", + "$type": "color", + "$value": "#f97076", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-300}", + "group": "branding", + "key": "{color.boundary.gradient.primary.start}" + }, + "name": "token-color-boundary-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.boundary.gradient.primary.stop}", + "$type": "color", + "$value": "#db363b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-400}", + "group": "branding", + "key": "{color.boundary.gradient.primary.stop}" + }, + "name": "token-color-boundary-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.boundary.gradient.faint.start}", + "$type": "color", + "$value": "#fffafa", + "group": "branding", + "comment": "this is the 'boundary-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffafa", + "group": "branding", + "comment": "this is the 'boundary-50' value at 25% opacity on white", + "key": "{color.boundary.gradient.faint.start}" + }, + "name": "token-color-boundary-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.boundary.gradient.faint.stop}", + "$type": "color", + "$value": "#ffecec", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.boundary-50}", + "group": "branding", + "key": "{color.boundary.gradient.faint.stop}" + }, + "name": "token-color-boundary-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "boundary", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.consul.brand}", + "$type": "color", + "$value": "#e03875", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-brand}", + "group": "branding", + "key": "{color.consul.brand}" + }, + "name": "token-color-consul-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "brand" + ] + }, + { + "key": "{color.consul.foreground}", + "$type": "color", + "$value": "#d01c5b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-500}", + "group": "branding", + "key": "{color.consul.foreground}" + }, + "name": "token-color-consul-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "foreground" + ] + }, + { + "key": "{color.consul.surface}", + "$type": "color", + "$value": "#ffe9f1", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-50}", + "group": "branding", + "key": "{color.consul.surface}" + }, + "name": "token-color-consul-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "surface" + ] + }, + { + "key": "{color.consul.border}", + "$type": "color", + "$value": "#ffcede", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-100}", + "group": "branding", + "key": "{color.consul.border}" + }, + "name": "token-color-consul-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "border" + ] + }, + { + "key": "{color.consul.gradient.primary.start}", + "$type": "color", + "$value": "#ff99be", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-300}", + "group": "branding", + "key": "{color.consul.gradient.primary.start}" + }, + "name": "token-color-consul-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.consul.gradient.primary.stop}", + "$type": "color", + "$value": "#da306e", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-400}", + "group": "branding", + "key": "{color.consul.gradient.primary.stop}" + }, + "name": "token-color-consul-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.consul.gradient.faint.start}", + "$type": "color", + "$value": "#fff9fb", + "group": "branding", + "comment": "this is the 'consul-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fff9fb", + "group": "branding", + "comment": "this is the 'consul-50' value at 25% opacity on white", + "key": "{color.consul.gradient.faint.start}" + }, + "name": "token-color-consul-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.consul.gradient.faint.stop}", + "$type": "color", + "$value": "#ffe9f1", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.consul-50}", + "group": "branding", + "key": "{color.consul.gradient.faint.stop}" + }, + "name": "token-color-consul-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "consul", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.hcp.brand}", + "$type": "color", + "$value": "#000000", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.hcp-brand}", + "group": "branding", + "key": "{color.hcp.brand}" + }, + "name": "token-color-hcp-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "hcp", + "brand" + ] + }, + { + "key": "{color.nomad.brand}", + "$type": "color", + "$value": "#06d092", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-brand}", + "group": "branding", + "key": "{color.nomad.brand}" + }, + "name": "token-color-nomad-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "brand" + ] + }, + { + "key": "{color.nomad.foreground}", + "$type": "color", + "$value": "#008661", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-500}", + "group": "branding", + "key": "{color.nomad.foreground}" + }, + "name": "token-color-nomad-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "foreground" + ] + }, + { + "key": "{color.nomad.surface}", + "$type": "color", + "$value": "#d3fdeb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-50}", + "group": "branding", + "key": "{color.nomad.surface}" + }, + "name": "token-color-nomad-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "surface" + ] + }, + { + "key": "{color.nomad.border}", + "$type": "color", + "$value": "#bff3dd", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-100}", + "group": "branding", + "key": "{color.nomad.border}" + }, + "name": "token-color-nomad-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "border" + ] + }, + { + "key": "{color.nomad.gradient.primary.start}", + "$type": "color", + "$value": "#bff3dd", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-100}", + "group": "branding", + "key": "{color.nomad.gradient.primary.start}" + }, + "name": "token-color-nomad-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.nomad.gradient.primary.stop}", + "$type": "color", + "$value": "#60dea9", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-200}", + "group": "branding", + "key": "{color.nomad.gradient.primary.stop}" + }, + "name": "token-color-nomad-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.nomad.gradient.faint.start}", + "$type": "color", + "$value": "#f3fff9", + "group": "branding", + "comment": "this is the 'nomad-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#f3fff9", + "group": "branding", + "comment": "this is the 'nomad-50' value at 25% opacity on white", + "key": "{color.nomad.gradient.faint.start}" + }, + "name": "token-color-nomad-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.nomad.gradient.faint.stop}", + "$type": "color", + "$value": "#d3fdeb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.nomad-50}", + "group": "branding", + "key": "{color.nomad.gradient.faint.stop}" + }, + "name": "token-color-nomad-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "nomad", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.packer.brand}", + "$type": "color", + "$value": "#02a8ef", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-brand}", + "group": "branding", + "key": "{color.packer.brand}" + }, + "name": "token-color-packer-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "brand" + ] + }, + { + "key": "{color.packer.foreground}", + "$type": "color", + "$value": "#007eb4", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-500}", + "group": "branding", + "key": "{color.packer.foreground}" + }, + "name": "token-color-packer-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "foreground" + ] + }, + { + "key": "{color.packer.surface}", + "$type": "color", + "$value": "#d4f2ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-50}", + "group": "branding", + "key": "{color.packer.surface}" + }, + "name": "token-color-packer-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "surface" + ] + }, + { + "key": "{color.packer.border}", + "$type": "color", + "$value": "#b4e4ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-100}", + "group": "branding", + "key": "{color.packer.border}" + }, + "name": "token-color-packer-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "border" + ] + }, + { + "key": "{color.packer.gradient.primary.start}", + "$type": "color", + "$value": "#b4e4ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-100}", + "group": "branding", + "key": "{color.packer.gradient.primary.start}" + }, + "name": "token-color-packer-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.packer.gradient.primary.stop}", + "$type": "color", + "$value": "#63d0ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-200}", + "group": "branding", + "key": "{color.packer.gradient.primary.stop}" + }, + "name": "token-color-packer-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.packer.gradient.faint.start}", + "$type": "color", + "$value": "#f3fcff", + "group": "branding", + "comment": "this is the 'packer-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#F3FCFF", + "group": "branding", + "comment": "this is the 'packer-50' value at 25% opacity on white", + "key": "{color.packer.gradient.faint.start}" + }, + "name": "token-color-packer-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.packer.gradient.faint.stop}", + "$type": "color", + "$value": "#d4f2ff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.packer-50}", + "group": "branding", + "key": "{color.packer.gradient.faint.stop}" + }, + "name": "token-color-packer-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "packer", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.terraform.brand}", + "$type": "color", + "$value": "#7b42bc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-brand}", + "group": "branding", + "key": "{color.terraform.brand}" + }, + "name": "token-color-terraform-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "brand" + ] + }, + { + "key": "{color.terraform.brand-on-dark}", + "$type": "color", + "$value": "#a067da", + "group": "branding", + "comment": "this is an alternative brand color meant to be used on dark backgrounds", + "original": { + "$type": "color", + "$value": "#a067da", + "group": "branding", + "comment": "this is an alternative brand color meant to be used on dark backgrounds", + "key": "{color.terraform.brand-on-dark}" + }, + "name": "token-color-terraform-brand-on-dark", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "brand-on-dark" + ] + }, + { + "key": "{color.terraform.foreground}", + "$type": "color", + "$value": "#773cb4", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-500}", + "group": "branding", + "key": "{color.terraform.foreground}" + }, + "name": "token-color-terraform-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "foreground" + ] + }, + { + "key": "{color.terraform.surface}", + "$type": "color", + "$value": "#f4ecff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-50}", + "group": "branding", + "key": "{color.terraform.surface}" + }, + "name": "token-color-terraform-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "surface" + ] + }, + { + "key": "{color.terraform.border}", + "$type": "color", + "$value": "#ebdbfc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-100}", + "group": "branding", + "key": "{color.terraform.border}" + }, + "name": "token-color-terraform-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "border" + ] + }, + { + "key": "{color.terraform.gradient.primary.start}", + "$type": "color", + "$value": "#bb8deb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-300}", + "group": "branding", + "key": "{color.terraform.gradient.primary.start}" + }, + "name": "token-color-terraform-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.terraform.gradient.primary.stop}", + "$type": "color", + "$value": "#844fba", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-400}", + "group": "branding", + "key": "{color.terraform.gradient.primary.stop}" + }, + "name": "token-color-terraform-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.terraform.gradient.faint.start}", + "$type": "color", + "$value": "#fcfaff", + "group": "branding", + "comment": "this is the 'terraform-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fcfaff", + "group": "branding", + "comment": "this is the 'terraform-50' value at 25% opacity on white", + "key": "{color.terraform.gradient.faint.start}" + }, + "name": "token-color-terraform-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.terraform.gradient.faint.stop}", + "$type": "color", + "$value": "#f4ecff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.terraform-50}", + "group": "branding", + "key": "{color.terraform.gradient.faint.stop}" + }, + "name": "token-color-terraform-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "terraform", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.vagrant.brand}", + "$type": "color", + "$value": "#1868f2", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-brand}", + "group": "branding", + "key": "{color.vagrant.brand}" + }, + "name": "token-color-vagrant-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "brand" + ] + }, + { + "key": "{color.vagrant.foreground}", + "$type": "color", + "$value": "#1c61d8", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-500}", + "group": "branding", + "key": "{color.vagrant.foreground}" + }, + "name": "token-color-vagrant-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "foreground" + ] + }, + { + "key": "{color.vagrant.surface}", + "$type": "color", + "$value": "#d6ebff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-50}", + "group": "branding", + "key": "{color.vagrant.surface}" + }, + "name": "token-color-vagrant-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "surface" + ] + }, + { + "key": "{color.vagrant.border}", + "$type": "color", + "$value": "#c7dbfc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-100}", + "group": "branding", + "key": "{color.vagrant.border}" + }, + "name": "token-color-vagrant-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "border" + ] + }, + { + "key": "{color.vagrant.gradient.primary.start}", + "$type": "color", + "$value": "#639cff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-300}", + "group": "branding", + "key": "{color.vagrant.gradient.primary.start}" + }, + "name": "token-color-vagrant-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.vagrant.gradient.primary.stop}", + "$type": "color", + "$value": "#2e71e5", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-400}", + "group": "branding", + "key": "{color.vagrant.gradient.primary.stop}" + }, + "name": "token-color-vagrant-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.vagrant.gradient.faint.start}", + "$type": "color", + "$value": "#f4faff", + "group": "branding", + "comment": "this is the 'vagrant-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#f4faff", + "group": "branding", + "comment": "this is the 'vagrant-50' value at 25% opacity on white", + "key": "{color.vagrant.gradient.faint.start}" + }, + "name": "token-color-vagrant-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.vagrant.gradient.faint.stop}", + "$type": "color", + "$value": "#d6ebff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vagrant-50}", + "group": "branding", + "key": "{color.vagrant.gradient.faint.stop}" + }, + "name": "token-color-vagrant-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vagrant", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.vault-radar.brand}", + "$type": "color", + "$value": "#ffcf25", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-brand}", + "group": "branding", + "key": "{color.vault-radar.brand}" + }, + "name": "token-color-vault-radar-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "brand" + ] + }, + { + "key": "{color.vault-radar.brand-alt}", + "$type": "color", + "$value": "#000000", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work", + "original": { + "$type": "color", + "$value": "#000", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work", + "key": "{color.vault-radar.brand-alt}" + }, + "name": "token-color-vault-radar-brand-alt", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "brand-alt" + ] + }, + { + "key": "{color.vault-radar.foreground}", + "$type": "color", + "$value": "#9a6f00", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-500}", + "group": "branding", + "key": "{color.vault-radar.foreground}" + }, + "name": "token-color-vault-radar-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "foreground" + ] + }, + { + "key": "{color.vault-radar.surface}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-50}", + "group": "branding", + "key": "{color.vault-radar.surface}" + }, + "name": "token-color-vault-radar-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "surface" + ] + }, + { + "key": "{color.vault-radar.border}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-100}", + "group": "branding", + "key": "{color.vault-radar.border}" + }, + "name": "token-color-vault-radar-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "border" + ] + }, + { + "key": "{color.vault-radar.gradient.primary.start}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-100}", + "group": "branding", + "key": "{color.vault-radar.gradient.primary.start}" + }, + "name": "token-color-vault-radar-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.vault-radar.gradient.primary.stop}", + "$type": "color", + "$value": "#ffe543", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-200}", + "group": "branding", + "key": "{color.vault-radar.gradient.primary.stop}" + }, + "name": "token-color-vault-radar-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.vault-radar.gradient.faint.start}", + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-radar-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-radar-50' value at 25% opacity on white", + "key": "{color.vault-radar.gradient.faint.start}" + }, + "name": "token-color-vault-radar-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.vault-radar.gradient.faint.stop}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-radar-50}", + "group": "branding", + "key": "{color.vault-radar.gradient.faint.stop}" + }, + "name": "token-color-vault-radar-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-radar", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.vault-secrets.brand}", + "$type": "color", + "$value": "#ffcf25", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-brand}", + "group": "branding", + "key": "{color.vault-secrets.brand}" + }, + "name": "token-color-vault-secrets-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "brand" + ] + }, + { + "key": "{color.vault-secrets.brand-alt}", + "group": "branding", + "$type": "color", + "$value": "#000000", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work", + "original": { + "group": "branding", + "$type": "color", + "$value": "#000", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work", + "key": "{color.vault-secrets.brand-alt}" + }, + "name": "token-color-vault-secrets-brand-alt", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "brand-alt" + ] + }, + { + "key": "{color.vault-secrets.foreground}", + "$type": "color", + "$value": "#9a6f00", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-500}", + "group": "branding", + "key": "{color.vault-secrets.foreground}" + }, + "name": "token-color-vault-secrets-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "foreground" + ] + }, + { + "key": "{color.vault-secrets.surface}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-50}", + "group": "branding", + "key": "{color.vault-secrets.surface}" + }, + "name": "token-color-vault-secrets-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "surface" + ] + }, + { + "key": "{color.vault-secrets.border}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-100}", + "group": "branding", + "key": "{color.vault-secrets.border}" + }, + "name": "token-color-vault-secrets-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "border" + ] + }, + { + "key": "{color.vault-secrets.gradient.primary.start}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-100}", + "group": "branding", + "key": "{color.vault-secrets.gradient.primary.start}" + }, + "name": "token-color-vault-secrets-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.vault-secrets.gradient.primary.stop}", + "$type": "color", + "$value": "#ffe543", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-200}", + "group": "branding", + "key": "{color.vault-secrets.gradient.primary.stop}" + }, + "name": "token-color-vault-secrets-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.vault-secrets.gradient.faint.start}", + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-secrets-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-secrets-50' value at 25% opacity on white", + "key": "{color.vault-secrets.gradient.faint.start}" + }, + "name": "token-color-vault-secrets-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.vault-secrets.gradient.faint.stop}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-secrets-50}", + "group": "branding", + "key": "{color.vault-secrets.gradient.faint.stop}" + }, + "name": "token-color-vault-secrets-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault-secrets", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.vault.brand}", + "$type": "color", + "$value": "#ffcf25", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-brand}", + "group": "branding", + "key": "{color.vault.brand}" + }, + "name": "token-color-vault-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "brand" + ] + }, + { + "key": "{color.vault.brand-alt}", + "$type": "color", + "$value": "#000000", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work", + "original": { + "$type": "color", + "$value": "#000", + "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work", + "key": "{color.vault.brand-alt}" + }, + "name": "token-color-vault-brand-alt", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "brand-alt" + ] + }, + { + "key": "{color.vault.foreground}", + "$type": "color", + "$value": "#9a6f00", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-500}", + "group": "branding", + "key": "{color.vault.foreground}" + }, + "name": "token-color-vault-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "foreground" + ] + }, + { + "key": "{color.vault.surface}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-50}", + "group": "branding", + "key": "{color.vault.surface}" + }, + "name": "token-color-vault-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "surface" + ] + }, + { + "key": "{color.vault.border}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-100}", + "group": "branding", + "key": "{color.vault.border}" + }, + "name": "token-color-vault-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "border" + ] + }, + { + "key": "{color.vault.gradient.primary.start}", + "$type": "color", + "$value": "#feec7b", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-100}", + "group": "branding", + "key": "{color.vault.gradient.primary.start}" + }, + "name": "token-color-vault-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.vault.gradient.primary.stop}", + "$type": "color", + "$value": "#ffe543", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-200}", + "group": "branding", + "key": "{color.vault.gradient.primary.stop}" + }, + "name": "token-color-vault-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.vault.gradient.faint.start}", + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#fffdf2", + "group": "branding", + "comment": "this is the 'vault-50' value at 25% opacity on white", + "key": "{color.vault.gradient.faint.start}" + }, + "name": "token-color-vault-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.vault.gradient.faint.stop}", + "$type": "color", + "$value": "#fff9cf", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.vault-50}", + "group": "branding", + "key": "{color.vault.gradient.faint.stop}" + }, + "name": "token-color-vault-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "vault", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{color.waypoint.brand}", + "$type": "color", + "$value": "#14c6cb", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-brand}", + "group": "branding", + "key": "{color.waypoint.brand}" + }, + "name": "token-color-waypoint-brand", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "brand" + ] + }, + { + "key": "{color.waypoint.foreground}", + "$type": "color", + "$value": "#008196", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-500}", + "group": "branding", + "key": "{color.waypoint.foreground}" + }, + "name": "token-color-waypoint-foreground", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "foreground" + ] + }, + { + "key": "{color.waypoint.surface}", + "$type": "color", + "$value": "#e0fcff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-50}", + "group": "branding", + "key": "{color.waypoint.surface}" + }, + "name": "token-color-waypoint-surface", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "surface" + ] + }, + { + "key": "{color.waypoint.border}", + "$type": "color", + "$value": "#cbf1f3", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-100}", + "group": "branding", + "key": "{color.waypoint.border}" + }, + "name": "token-color-waypoint-border", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "border" + ] + }, + { + "key": "{color.waypoint.gradient.primary.start}", + "$type": "color", + "$value": "#cbf1f3", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-100}", + "group": "branding", + "key": "{color.waypoint.gradient.primary.start}" + }, + "name": "token-color-waypoint-gradient-primary-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "primary", + "start" + ] + }, + { + "key": "{color.waypoint.gradient.primary.stop}", + "$type": "color", + "$value": "#62d4dc", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-200}", + "group": "branding", + "key": "{color.waypoint.gradient.primary.stop}" + }, + "name": "token-color-waypoint-gradient-primary-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "primary", + "stop" + ] + }, + { + "key": "{color.waypoint.gradient.faint.start}", + "$type": "color", + "$value": "#f6feff", + "group": "branding", + "comment": "this is the 'waypoint-50' value at 25% opacity on white", + "original": { + "$type": "color", + "$value": "#f6feff", + "group": "branding", + "comment": "this is the 'waypoint-50' value at 25% opacity on white", + "key": "{color.waypoint.gradient.faint.start}" + }, + "name": "token-color-waypoint-gradient-faint-start", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "faint", + "start" + ] + }, + { + "key": "{color.waypoint.gradient.faint.stop}", + "$type": "color", + "$value": "#e0fcff", + "group": "branding", + "original": { + "$type": "color", + "$value": "{color.palette.waypoint-50}", + "group": "branding", + "key": "{color.waypoint.gradient.faint.stop}" + }, + "name": "token-color-waypoint-gradient-faint-stop", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "waypoint", + "gradient", + "faint", + "stop" + ] + }, + { + "key": "{elevation.inset.box-shadow}", + "$value": "inset 0px 1px 2px 1px #656a761a", + "$modes": { + "default": "inset 0px 1px 2px 1px #656a761a", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "{elevation.inset.box-shadow-01}", + "$modes": { + "default": "{elevation.inset.box-shadow-01}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.inset.box-shadow}" + }, + "name": "token-elevation-inset-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "inset", + "box-shadow" + ] + }, + { + "key": "{elevation.low.box-shadow}", + "$value": "0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d", + "$modes": { + "default": "0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "{elevation.low.box-shadow-01}, {elevation.low.box-shadow-02}", + "$modes": { + "default": "{elevation.low.box-shadow-01}, {elevation.low.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.low.box-shadow}" + }, + "name": "token-elevation-low-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "low", + "box-shadow" + ] + }, + { + "key": "{elevation.mid.box-shadow}", + "$value": "0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633", + "$modes": { + "default": "0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "{elevation.mid.box-shadow-01}, {elevation.mid.box-shadow-02}", + "$modes": { + "default": "{elevation.mid.box-shadow-01}, {elevation.mid.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.mid.box-shadow}" + }, + "name": "token-elevation-mid-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "mid", + "box-shadow" + ] + }, + { + "key": "{elevation.high.box-shadow}", + "$value": "0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633", + "$modes": { + "default": "0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "{elevation.high.box-shadow-01}, {elevation.high.box-shadow-02}", + "$modes": { + "default": "{elevation.high.box-shadow-01}, {elevation.high.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.high.box-shadow}" + }, + "name": "token-elevation-high-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "high", + "box-shadow" + ] + }, + { + "key": "{elevation.higher.box-shadow}", + "$value": "0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640", + "$modes": { + "default": "0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "{elevation.higher.box-shadow-01}, {elevation.higher.box-shadow-02}", + "$modes": { + "default": "{elevation.higher.box-shadow-01}, {elevation.higher.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.higher.box-shadow}" + }, + "name": "token-elevation-higher-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "higher", + "box-shadow" + ] + }, + { + "key": "{elevation.overlay.box-shadow}", + "$value": "0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559", + "$modes": { + "default": "0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "{elevation.overlay.box-shadow-01}, {elevation.overlay.box-shadow-02}", + "$modes": { + "default": "{elevation.overlay.box-shadow-01}, {elevation.overlay.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{elevation.overlay.box-shadow}" + }, + "name": "token-elevation-overlay-box-shadow", + "attributes": { + "category": "elevation" + }, + "path": [ + "elevation", + "overlay", + "box-shadow" + ] + }, + { + "key": "{surface.inset.box-shadow}", + "$value": "inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a", + "$modes": { + "default": "inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "{elevation.inset.box-shadow-border}, {elevation.inset.box-shadow}", + "$modes": { + "default": "{elevation.inset.box-shadow-border}, {elevation.inset.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.inset.box-shadow}" + }, + "name": "token-surface-inset-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "inset", + "box-shadow" + ] + }, + { + "key": "{surface.base.box-shadow}", + "$value": "0 0 0 1px #656a7633", + "$modes": { + "default": "0 0 0 1px #656a7633", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "{elevation.base.box-shadow-border}", + "$modes": { + "default": "{elevation.base.box-shadow-border}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.base.box-shadow}" + }, + "name": "token-surface-base-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "base", + "box-shadow" + ] + }, + { + "key": "{surface.low.box-shadow}", + "$value": "0 0 0 1px #656a7626, 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d", + "$modes": { + "default": "0 0 0 1px #656a7626, 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "{elevation.low.box-shadow-border}, {elevation.low.box-shadow}", + "$modes": { + "default": "{elevation.low.box-shadow-border}, {elevation.low.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.low.box-shadow}" + }, + "name": "token-surface-low-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "low", + "box-shadow" + ] + }, + { + "key": "{surface.mid.box-shadow}", + "$value": "0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633", + "$modes": { + "default": "0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "{elevation.mid.box-shadow-border}, {elevation.mid.box-shadow}", + "$modes": { + "default": "{elevation.mid.box-shadow-border}, {elevation.mid.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.mid.box-shadow}" + }, + "name": "token-surface-mid-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "mid", + "box-shadow" + ] + }, + { + "key": "{surface.high.box-shadow}", + "$value": "0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633", + "$modes": { + "default": "0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "{elevation.high.box-shadow-border}, {elevation.high.box-shadow}", + "$modes": { + "default": "{elevation.high.box-shadow-border}, {elevation.high.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.high.box-shadow}" + }, + "name": "token-surface-high-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "high", + "box-shadow" + ] + }, + { + "key": "{surface.higher.box-shadow}", + "$value": "0 0 0 1px #656a7633, 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640", + "$modes": { + "default": "0 0 0 1px #656a7633, 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "{elevation.higher.box-shadow-border}, {elevation.higher.box-shadow}", + "$modes": { + "default": "{elevation.higher.box-shadow-border}, {elevation.higher.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.higher.box-shadow}" + }, + "name": "token-surface-higher-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "higher", + "box-shadow" + ] + }, + { + "key": "{surface.overlay.box-shadow}", + "$value": "0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559", + "$modes": { + "default": "0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "original": { + "$value": "{elevation.overlay.box-shadow-border}, {elevation.overlay.box-shadow}", + "$modes": { + "default": "{elevation.overlay.box-shadow-border}, {elevation.overlay.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, + "key": "{surface.overlay.box-shadow}" + }, + "name": "token-surface-overlay-box-shadow", + "attributes": { + "category": "surface" + }, + "path": [ + "surface", + "overlay", + "box-shadow" + ] + }, + { + "key": "{focus-ring.action.box-shadow}", + "$value": "inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff", + "original": { + "$value": "{focus-ring.action.internal-box-shadow}, {focus-ring.action.external-box-shadow}", + "key": "{focus-ring.action.box-shadow}" + }, + "name": "token-focus-ring-action-box-shadow", + "attributes": { + "category": "focus-ring" + }, + "path": [ + "focus-ring", + "action", + "box-shadow" + ] + }, + { + "key": "{focus-ring.critical.box-shadow}", + "$value": "inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578", + "original": { + "$value": "{focus-ring.critical.internal-box-shadow}, {focus-ring.critical.external-box-shadow}", + "key": "{focus-ring.critical.box-shadow}" + }, + "name": "token-focus-ring-critical-box-shadow", + "attributes": { + "category": "focus-ring" + }, + "path": [ + "focus-ring", + "critical", + "box-shadow" + ] + }, + { + "key": "{app-footer.focus.color.action.internal}", + "$type": "color", + "$value": "var(--token-color-focus-action-internal)", + "$modes": { + "default": "var(--token-color-focus-action-internal)", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "var(--token-color-focus-action-internal)", + "$modes": { + "default": "var(--token-color-focus-action-internal)", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{app-footer.focus.color.action.internal}" + }, + "name": "token-app-footer-focus-color-action-internal", + "attributes": { + "category": "app-footer" + }, + "path": [ + "app-footer", + "focus", + "color", + "action", + "internal" + ] + }, + { + "key": "{app-header.height}", + "$type": "dimension", + "$value": "60px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "60", + "unit": "px", + "key": "{app-header.height}" + }, + "name": "token-app-header-height", + "attributes": { + "category": "app-header" + }, + "path": [ + "app-header", + "height" + ] + }, + { + "key": "{app-header.home-link.size}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{app-header.home-link.size}" + }, + "name": "token-app-header-home-link-size", + "attributes": { + "category": "app-header" + }, + "path": [ + "app-header", + "home-link", + "size" + ] + }, + { + "key": "{app-header.logo.size}", + "$type": "dimension", + "$value": "28px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "28", + "unit": "px", + "key": "{app-header.logo.size}" + }, + "name": "token-app-header-logo-size", + "attributes": { + "category": "app-header" + }, + "path": [ + "app-header", + "logo", + "size" + ] + }, + { + "key": "{app-side-nav.wrapper.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{app-side-nav.wrapper.border.width}" + }, + "name": "token-app-side-nav-wrapper-border-width", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "border", + "width" + ] + }, + { + "key": "{app-side-nav.wrapper.border.color}", + "$type": "color", + "$value": "var(--token-color-palette-neutral-200)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-palette-neutral-200)", + "group": "components", + "key": "{app-side-nav.wrapper.border.color}" + }, + "name": "token-app-side-nav-wrapper-border-color", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "border", + "color" + ] + }, + { + "key": "{app-side-nav.wrapper.padding.horizontal}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.horizontal}" + }, + "name": "token-app-side-nav-wrapper-padding-horizontal", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "horizontal" + ] + }, + { + "key": "{app-side-nav.wrapper.padding.vertical}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.vertical}" + }, + "name": "token-app-side-nav-wrapper-padding-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "vertical" + ] + }, + { + "key": "{app-side-nav.wrapper.padding.horizontal-minimized}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.horizontal-minimized}" + }, + "name": "token-app-side-nav-wrapper-padding-horizontal-minimized", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "horizontal-minimized" + ] + }, + { + "key": "{app-side-nav.wrapper.padding.vertical-minimized}", + "$type": "dimension", + "$value": "22px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "22", + "unit": "px", + "key": "{app-side-nav.wrapper.padding.vertical-minimized}" + }, + "name": "token-app-side-nav-wrapper-padding-vertical-minimized", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "wrapper", + "padding", + "vertical-minimized" + ] + }, + { + "key": "{app-side-nav.toggle-button.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{app-side-nav.toggle-button.border.radius}" + }, + "name": "token-app-side-nav-toggle-button-border-radius", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "toggle-button", + "border", + "radius" + ] + }, + { + "key": "{app-side-nav.header.home-link.padding}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{app-side-nav.header.home-link.padding}" + }, + "name": "token-app-side-nav-header-home-link-padding", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "home-link", + "padding" + ] + }, + { + "key": "{app-side-nav.header.home-link.logo-size}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{app-side-nav.header.home-link.logo-size}" + }, + "name": "token-app-side-nav-header-home-link-logo-size", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "home-link", + "logo-size" + ] + }, + { + "key": "{app-side-nav.header.home-link.logo-size-minimized}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{app-side-nav.header.home-link.logo-size-minimized}" + }, + "name": "token-app-side-nav-header-home-link-logo-size-minimized", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "home-link", + "logo-size-minimized" + ] + }, + { + "key": "{app-side-nav.header.actions.spacing}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.header.actions.spacing}" + }, + "name": "token-app-side-nav-header-actions-spacing", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "header", + "actions", + "spacing" + ] + }, + { + "key": "{app-side-nav.body.list.margin-vertical}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{app-side-nav.body.list.margin-vertical}" + }, + "name": "token-app-side-nav-body-list-margin-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list", + "margin-vertical" + ] + }, + { + "key": "{app-side-nav.body.list-item.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{app-side-nav.body.list-item.height}" + }, + "name": "token-app-side-nav-body-list-item-height", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "height" + ] + }, + { + "key": "{app-side-nav.body.list-item.padding.horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.body.list-item.padding.horizontal}" + }, + "name": "token-app-side-nav-body-list-item-padding-horizontal", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "padding", + "horizontal" + ] + }, + { + "key": "{app-side-nav.body.list-item.padding.vertical}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{app-side-nav.body.list-item.padding.vertical}" + }, + "name": "token-app-side-nav-body-list-item-padding-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "padding", + "vertical" + ] + }, + { + "key": "{app-side-nav.body.list-item.spacing-vertical}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{app-side-nav.body.list-item.spacing-vertical}" + }, + "name": "token-app-side-nav-body-list-item-spacing-vertical", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "spacing-vertical" + ] + }, + { + "key": "{app-side-nav.body.list-item.content-spacing-horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{app-side-nav.body.list-item.content-spacing-horizontal}" + }, + "name": "token-app-side-nav-body-list-item-content-spacing-horizontal", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "content-spacing-horizontal" + ] + }, + { + "key": "{app-side-nav.body.list-item.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{app-side-nav.body.list-item.border-radius}" + }, + "name": "token-app-side-nav-body-list-item-border-radius", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "body", + "list-item", + "border-radius" + ] + }, + { + "key": "{app-side-nav.color.foreground.primary}", + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "key": "{app-side-nav.color.foreground.primary}" + }, + "name": "token-app-side-nav-color-foreground-primary", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "foreground", + "primary" + ] + }, + { + "key": "{app-side-nav.color.foreground.strong}", + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-foreground-primary)", + "group": "components", + "key": "{app-side-nav.color.foreground.strong}" + }, + "name": "token-app-side-nav-color-foreground-strong", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "foreground", + "strong" + ] + }, + { + "key": "{app-side-nav.color.foreground.faint}", + "$type": "color", + "$value": "var(--token-color-foreground-faint)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-foreground-faint)", + "group": "components", + "key": "{app-side-nav.color.foreground.faint}" + }, + "name": "token-app-side-nav-color-foreground-faint", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "foreground", + "faint" + ] + }, + { + "key": "{app-side-nav.color.surface.primary}", + "$type": "color", + "$value": "var(--token-color-surface-faint)", + "group": "components", + "original": { + "$type": "color", + "$value": "var(--token-color-surface-faint)", + "group": "components", + "key": "{app-side-nav.color.surface.primary}" + }, + "name": "token-app-side-nav-color-surface-primary", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "surface", + "primary" + ] + }, + { + "key": "{app-side-nav.color.surface.interactive-hover}", + "$type": "color", + "$value": "var(--token-color-surface-interactive-hover)", + "group": "semantic", + "original": { + "$type": "color", + "$value": "var(--token-color-surface-interactive-hover)", + "group": "semantic", + "key": "{app-side-nav.color.surface.interactive-hover}" + }, + "name": "token-app-side-nav-color-surface-interactive-hover", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "surface", + "interactive-hover" + ] + }, + { + "key": "{app-side-nav.color.surface.interactive-active}", + "$type": "color", + "$value": "var(--token-color-palette-neutral-300)", + "group": "semantic", + "original": { + "$type": "color", + "$value": "var(--token-color-palette-neutral-300)", + "group": "semantic", + "key": "{app-side-nav.color.surface.interactive-active}" + }, + "name": "token-app-side-nav-color-surface-interactive-active", + "attributes": { + "category": "app-side-nav" + }, + "path": [ + "app-side-nav", + "color", + "surface", + "interactive-active" + ] + }, + { + "key": "{badge-count.padding.horizontal.small}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge-count.padding.horizontal.small}" + }, + "name": "token-badge-count-padding-horizontal-small", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "small" + ] + }, + { + "key": "{badge-count.padding.horizontal.medium}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge-count.padding.horizontal.medium}" + }, + "name": "token-badge-count-padding-horizontal-medium", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "medium" + ] + }, + { + "key": "{badge-count.padding.horizontal.large}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "14", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge-count.padding.horizontal.large}" + }, + "name": "token-badge-count-padding-horizontal-large", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "large" + ] + }, + { + "key": "{badge.height.small}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "18", + "cds-g10": "18", + "cds-g90": "18", + "cds-g100": "18" + }, + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "18", + "cds-g10": "18", + "cds-g90": "18", + "cds-g100": "18" + }, + "key": "{badge.height.small}" + }, + "name": "token-badge-height-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "small" + ] + }, + { + "key": "{badge.height.medium}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{badge.height.medium}" + }, + "name": "token-badge-height-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "medium" + ] + }, + { + "key": "{badge.height.large}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{badge.height.large}" + }, + "name": "token-badge-height-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "large" + ] + }, + { + "key": "{badge.padding.horizontal.small}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge.padding.horizontal.small}" + }, + "name": "token-badge-padding-horizontal-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "small" + ] + }, + { + "key": "{badge.padding.horizontal.medium}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge.padding.horizontal.medium}" + }, + "name": "token-badge-padding-horizontal-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "medium" + ] + }, + { + "key": "{badge.padding.horizontal.large}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.padding.horizontal.large}" + }, + "name": "token-badge-padding-horizontal-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "large" + ] + }, + { + "key": "{badge.padding.vertical.small}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "$modes": { + "default": "2", + "cds-g0": "1", + "cds-g10": "1", + "cds-g90": "1", + "cds-g100": "1" + }, + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "$modes": { + "default": "2", + "cds-g0": "1", + "cds-g10": "1", + "cds-g90": "1", + "cds-g100": "1" + }, + "key": "{badge.padding.vertical.small}" + }, + "name": "token-badge-padding-vertical-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "small" + ] + }, + { + "key": "{badge.padding.vertical.medium}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{badge.padding.vertical.medium}" + }, + "name": "token-badge-padding-vertical-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "medium" + ] + }, + { + "key": "{badge.padding.vertical.large}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{badge.padding.vertical.large}" + }, + "name": "token-badge-padding-vertical-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "large" + ] + }, + { + "key": "{badge.gap.small}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.small}" + }, + "name": "token-badge-gap-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "small" + ] + }, + { + "key": "{badge.gap.medium}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.medium}" + }, + "name": "token-badge-gap-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "medium" + ] + }, + { + "key": "{badge.gap.large}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.large}" + }, + "name": "token-badge-gap-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "large" + ] + }, + { + "key": "{badge.typography.font-size.small}", + "$type": "font-size", + "$value": "0.8125rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.small}" + }, + "name": "token-badge-typography-font-size-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "small" + ] + }, + { + "key": "{badge.typography.font-size.medium}", + "$type": "font-size", + "$value": "0.8125rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.medium}" + }, + "name": "token-badge-typography-font-size-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "medium" + ] + }, + { + "key": "{badge.typography.font-size.large}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.large}" + }, + "name": "token-badge-typography-font-size-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "large" + ] + }, + { + "key": "{badge.typography.line-height.small}", + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "original": { + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "key": "{badge.typography.line-height.small}" + }, + "name": "token-badge-typography-line-height-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "small" + ] + }, + { + "key": "{badge.typography.line-height.medium}", + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "original": { + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "key": "{badge.typography.line-height.medium}" + }, + "name": "token-badge-typography-line-height-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "medium" + ] + }, + { + "key": "{badge.typography.line-height.large}", + "$type": "number", + "$value": 1.5, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1, + "cds-g10": 1, + "cds-g90": 1, + "cds-g100": 1 + }, + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1, + "cds-g10": 1, + "cds-g90": 1, + "cds-g100": 1 + }, + "key": "{badge.typography.line-height.large}" + }, + "name": "token-badge-typography-line-height-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "large" + ] + }, + { + "key": "{badge.foreground.color.neutral.filled}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral.filled}" + }, + "name": "token-badge-foreground-color-neutral-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "filled" + ] + }, + { + "key": "{badge.foreground.color.neutral.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.color.gray.20}", + "cds-g10": "{carbon.color.gray.20}", + "cds-g90": "{carbon.color.gray.100}", + "cds-g100": "{carbon.color.gray.100}" + }, + "key": "{badge.foreground.color.neutral.inverted}" + }, + "name": "token-badge-foreground-color-neutral-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.neutral.outlined}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral.outlined}" + }, + "name": "token-badge-foreground-color-neutral-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "outlined" + ] + }, + { + "key": "{badge.foreground.color.neutral-dark-mode.filled}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.neutral-dark-mode.filled}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "filled" + ] + }, + { + "key": "{badge.foreground.color.neutral-dark-mode.inverted}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral-dark-mode.inverted}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.neutral-dark-mode.outlined}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "comments": { + "cds": "In Figma the `cds` value uses a token `Tag/HighContrast/TagColor` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "comments": { + "cds": "In Figma the `cds` value uses a token `Tag/HighContrast/TagColor` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.neutral-dark-mode.outlined}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "outlined" + ] + }, + { + "key": "{badge.foreground.color.highlight.filled}", + "$type": "color", + "$value": "#7b00db", + "comment": "we don't use `highlight-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#7b00db", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "{color.palette.purple-400}", + "comment": "we don't use `highlight-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.purple-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorPurple.g100}" + }, + "key": "{badge.foreground.color.highlight.filled}" + }, + "name": "token-badge-foreground-color-highlight-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "filled" + ] + }, + { + "key": "{badge.foreground.color.highlight.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.highlight.inverted}" + }, + "name": "token-badge-foreground-color-highlight-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.highlight.outlined}", + "$type": "color", + "$value": "#a737ff", + "$modes": { + "default": "#a737ff", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.highlight}", + "$modes": { + "default": "{color.foreground.highlight}", + "cds-g0": "{carbon.themes.tagTokens.tagColorPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorPurple.g100}" + }, + "key": "{badge.foreground.color.highlight.outlined}" + }, + "name": "token-badge-foreground-color-highlight-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "outlined" + ] + }, + { + "key": "{badge.foreground.color.success.filled}", + "$type": "color", + "$value": "#006619", + "comment": "we don't use `success-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#006619", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{color.palette.green-400}", + "comment": "we don't use `success-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.green-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.foreground.color.success.filled}" + }, + "name": "token-badge-foreground-color-success-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "filled" + ] + }, + { + "key": "{badge.foreground.color.success.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.success.inverted}" + }, + "name": "token-badge-foreground-color-success-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.success.outlined}", + "$type": "color", + "$value": "#008a22", + "$modes": { + "default": "#008a22", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.success}", + "$modes": { + "default": "{color.foreground.success}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.foreground.color.success.outlined}" + }, + "name": "token-badge-foreground-color-success-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "outlined" + ] + }, + { + "key": "{badge.foreground.color.warning.filled}", + "$type": "color", + "$value": "#803d00", + "$modes": { + "default": "#803d00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "hds": "we don't use `warning-on-surface` for accessibility (better contrast)", + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{color.palette.amber-400}", + "$modes": { + "default": "{color.palette.amber-400}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "hds": "we don't use `warning-on-surface` for accessibility (better contrast)", + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.warning.filled}" + }, + "name": "token-badge-foreground-color-warning-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "filled" + ] + }, + { + "key": "{badge.foreground.color.warning.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.warning.inverted}" + }, + "name": "token-badge-foreground-color-warning-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.warning.outlined}", + "$type": "color", + "$value": "#bb5a00", + "$modes": { + "default": "#bb5a00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.warning}", + "$modes": { + "default": "{color.foreground.warning}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.warning.outlined}" + }, + "name": "token-badge-foreground-color-warning-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "outlined" + ] + }, + { + "key": "{badge.foreground.color.critical.filled}", + "$type": "color", + "$value": "#940004", + "comment": "we don't use `critical-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#940004", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-400}", + "comment": "we don't use `critical-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.foreground.color.critical.filled}" + }, + "name": "token-badge-foreground-color-critical-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "filled" + ] + }, + { + "key": "{badge.foreground.color.critical.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.critical.inverted}" + }, + "name": "token-badge-foreground-color-critical-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.critical.outlined}", + "$type": "color", + "$value": "#e52228", + "$modes": { + "default": "#e52228", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.critical}", + "$modes": { + "default": "{color.foreground.critical}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.foreground.color.critical.outlined}" + }, + "name": "token-badge-foreground-color-critical-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "outlined" + ] + }, + { + "key": "{badge.surface.color.neutral.filled}", + "$type": "color", + "$value": "#dedfe3", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-200}", + "$modes": { + "default": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{badge.surface.color.neutral.filled}" + }, + "name": "token-badge-surface-color-neutral-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "filled" + ] + }, + { + "key": "{badge.surface.color.neutral.inverted}", + "$type": "color", + "$value": "#656a76", + "$modes": { + "default": "#656a76", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead", + "key": "{badge.surface.color.neutral.inverted}" + }, + "name": "token-badge-surface-color-neutral-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "inverted" + ] + }, + { + "key": "{badge.surface.color.neutral.outlined}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{badge.surface.color.neutral.outlined}" + }, + "name": "token-badge-surface-color-neutral-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "outlined" + ] + }, + { + "key": "{badge.surface.color.neutral-dark-mode.filled}", + "$type": "color", + "$value": "#656a76", + "$modes": { + "default": "#656a76", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component", + "key": "{badge.surface.color.neutral-dark-mode.filled}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "filled" + ] + }, + { + "key": "{badge.surface.color.neutral-dark-mode.inverted}", + "$type": "color", + "$value": "#fafafa", + "$modes": { + "default": "#fafafa", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{color.surface.faint}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{badge.surface.color.neutral-dark-mode.inverted}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "inverted" + ] + }, + { + "key": "{badge.surface.color.neutral-dark-mode.outlined}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{badge.surface.color.neutral-dark-mode.outlined}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "outlined" + ] + }, + { + "key": "{badge.surface.color.highlight.filled}", + "$type": "color", + "$value": "#ead2fe", + "comment": "we don't use `surface-highlight` for accessibility (better contrast)", + "$modes": { + "default": "#ead2fe", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "{color.palette.purple-100}", + "comment": "we don't use `surface-highlight` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.purple-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundPurple.g100}" + }, + "key": "{badge.surface.color.highlight.filled}" + }, + "name": "token-badge-surface-color-highlight-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "highlight", + "filled" + ] + }, + { + "key": "{badge.surface.color.highlight.inverted}", + "$type": "color", + "$value": "#a737ff", + "$modes": { + "default": "#a737ff", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, + "original": { + "$type": "color", + "$value": "{color.palette.purple-200}", + "$modes": { + "default": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, + "key": "{badge.surface.color.highlight.inverted}" + }, + "name": "token-badge-surface-color-highlight-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "highlight", + "inverted" + ] + }, + { + "key": "{badge.surface.color.success.filled}", + "$type": "color", + "$value": "#cceeda", + "comment": "we don't use `surface-success` for accessibility (better contrast)", + "$modes": { + "default": "#cceeda", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "{color.palette.green-100}", + "comment": "we don't use `surface-success` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.green-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGreen.g100}" + }, + "key": "{badge.surface.color.success.filled}" + }, + "name": "token-badge-surface-color-success-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "success", + "filled" + ] + }, + { + "key": "{badge.surface.color.success.inverted}", + "$type": "color", + "$value": "#008a22", + "$modes": { + "default": "#008a22", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{color.palette.green-200}", + "$modes": { + "default": "{color.palette.green-200}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.surface.color.success.inverted}" + }, + "name": "token-badge-surface-color-success-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "success", + "inverted" + ] + }, + { + "key": "{badge.surface.color.warning.filled}", + "$type": "color", + "$value": "#fbeabf", + "comment": "we don't use `surface-warning` for accessibility (better contrast)", + "$modes": { + "default": "#fbeabf", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{color.palette.amber-100}", + "comment": "we don't use `surface-warning` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.surface.color.warning.filled}" + }, + "name": "token-badge-surface-color-warning-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "warning", + "filled" + ] + }, + { + "key": "{badge.surface.color.warning.inverted}", + "$type": "color", + "$value": "#bb5a00", + "$modes": { + "default": "#bb5a00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{color.palette.amber-200}", + "$modes": { + "default": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.surface.color.warning.inverted}" + }, + "name": "token-badge-surface-color-warning-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "warning", + "inverted" + ] + }, + { + "key": "{badge.surface.color.critical.filled}", + "$type": "color", + "$value": "#fbd4d4", + "comment": "we don't use `surface-critical` for accessibility (better contrast)", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-100}", + "comment": "we don't use `surface-critical` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.red-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundRed.g100}" + }, + "key": "{badge.surface.color.critical.filled}" + }, + "name": "token-badge-surface-color-critical-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "critical", + "filled" + ] + }, + { + "key": "{badge.surface.color.critical.inverted}", + "$type": "color", + "$value": "#e52228", + "$modes": { + "default": "#e52228", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-200}", + "$modes": { + "default": "{color.palette.red-200}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.surface.color.critical.inverted}" + }, + "name": "token-badge-surface-color-critical-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "critical", + "inverted" + ] + }, + { + "key": "{badge.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "$modes": { + "default": "5px", + "cds-g0": "1000000000px", + "cds-g10": "1000000000px", + "cds-g90": "1000000000px", + "cds-g100": "1000000000px" + }, + "original": { + "$type": "dimension", + "$value": "{border.radius.small}", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "{border.radius.rounded}", + "cds-g10": "{border.radius.rounded}", + "cds-g90": "{border.radius.rounded}", + "cds-g100": "{border.radius.rounded}" + }, + "key": "{badge.border.radius}" + }, + "name": "token-badge-border-radius", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "border", + "radius" + ] + }, + { + "key": "{badge.icon.size.small}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{badge.icon.size.small}" + }, + "name": "token-badge-icon-size-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "small" + ] + }, + { + "key": "{badge.icon.size.medium}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{badge.icon.size.medium}" + }, + "name": "token-badge-icon-size-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "medium" + ] + }, + { + "key": "{badge.icon.size.large}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{badge.icon.size.large}" + }, + "name": "token-badge-icon-size-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "large" + ] + }, + { + "key": "{button.height.small}", + "$type": "dimension", + "$value": "28px", + "unit": "px", + "$modes": { + "default": "28", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "original": { + "$type": "dimension", + "$value": "28", + "unit": "px", + "$modes": { + "default": "28", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "key": "{button.height.small}" + }, + "name": "token-button-height-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "small" + ] + }, + { + "key": "{button.height.medium}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "$modes": { + "default": "36", + "cds-g0": "40", + "cds-g10": "40", + "cds-g90": "40", + "cds-g100": "40" + }, + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "$modes": { + "default": "36", + "cds-g0": "40", + "cds-g10": "40", + "cds-g90": "40", + "cds-g100": "40" + }, + "key": "{button.height.medium}" + }, + "name": "token-button-height-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "medium" + ] + }, + { + "key": "{button.height.large}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "$modes": { + "default": "48", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "$modes": { + "default": "48", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "key": "{button.height.large}" + }, + "name": "token-button-height-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "large" + ] + }, + { + "key": "{button.padding.horizontal.small}", + "$type": "dimension", + "$value": "11px", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "11", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.small}" + }, + "name": "token-button-padding-horizontal-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "small" + ] + }, + { + "key": "{button.padding.horizontal.medium}", + "$type": "dimension", + "$value": "15px", + "unit": "px", + "$modes": { + "default": "15", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "15", + "unit": "px", + "$modes": { + "default": "15", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.medium}" + }, + "name": "token-button-padding-horizontal-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "medium" + ] + }, + { + "key": "{button.padding.horizontal.large}", + "$type": "dimension", + "$value": "19px", + "unit": "px", + "$modes": { + "default": "19", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "19", + "unit": "px", + "$modes": { + "default": "19", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.large}" + }, + "name": "token-button-padding-horizontal-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "large" + ] + }, + { + "key": "{button.padding.vertical.small}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.small}" + }, + "name": "token-button-padding-vertical-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "small" + ] + }, + { + "key": "{button.padding.vertical.medium}", + "$type": "dimension", + "$value": "9px", + "unit": "px", + "$modes": { + "default": "9", + "cds-g0": "10", + "cds-g10": "10", + "cds-g90": "10", + "cds-g100": "10" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "9", + "unit": "px", + "$modes": { + "default": "9", + "cds-g0": "10", + "cds-g10": "10", + "cds-g90": "10", + "cds-g100": "10" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.medium}" + }, + "name": "token-button-padding-vertical-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "medium" + ] + }, + { + "key": "{button.padding.vertical.large}", + "$type": "dimension", + "$value": "11px", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "11", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.large}" + }, + "name": "token-button-padding-vertical-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "large" + ] + }, + { + "key": "{button.gap}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "key": "{button.gap}" + }, + "name": "token-button-gap", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "gap" + ] + }, + { + "key": "{button.typography.font-size.small}", + "$type": "font-size", + "$value": "0.8125rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.small}" + }, + "name": "token-button-typography-font-size-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "small" + ] + }, + { + "key": "{button.typography.font-size.medium}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.medium}" + }, + "name": "token-button-typography-font-size-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "medium" + ] + }, + { + "key": "{button.typography.font-size.large}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.large}" + }, + "name": "token-button-typography-font-size-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "large" + ] + }, + { + "key": "{button.typography.line-height.small}", + "$type": "number", + "$value": 0.9286, + "comment": "14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)", + "$modes": { + "default": 0.9286, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 0.9286, + "comment": "14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)", + "$modes": { + "default": 0.9286, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.small}" + }, + "name": "token-button-typography-line-height-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "small" + ] + }, + { + "key": "{button.typography.line-height.medium}", + "$type": "number", + "$value": 1.1429, + "comment": "14px ~ 1.1429", + "$modes": { + "default": 1.1429, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 1.1429, + "comment": "14px ~ 1.1429", + "$modes": { + "default": 1.1429, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.medium}" + }, + "name": "token-button-typography-line-height-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "medium" + ] + }, + { + "key": "{button.typography.line-height.large}", + "$type": "number", + "$value": 1.5, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.large}" + }, + "name": "token-button-typography-line-height-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "large" + ] + }, + { + "key": "{button.foreground.color.primary.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.default}" + }, + "name": "token-button-foreground-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "default" + ] + }, + { + "key": "{button.foreground.color.primary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.hover}" + }, + "name": "token-button-foreground-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "hover" + ] + }, + { + "key": "{button.foreground.color.primary.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.focus}" + }, + "name": "token-button-foreground-color-primary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "focus" + ] + }, + { + "key": "{button.foreground.color.primary.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.active}" + }, + "name": "token-button-foreground-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "active" + ] + }, + { + "key": "{button.foreground.color.secondary.default}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.default}" + }, + "name": "token-button-foreground-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "default" + ] + }, + { + "key": "{button.foreground.color.secondary.hover}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.hover}" + }, + "name": "token-button-foreground-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "hover" + ] + }, + { + "key": "{button.foreground.color.secondary.focus}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.focus}" + }, + "name": "token-button-foreground-color-secondary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "focus" + ] + }, + { + "key": "{button.foreground.color.secondary.active}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.active}" + }, + "name": "token-button-foreground-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "active" + ] + }, + { + "key": "{button.foreground.color.tertiary.default}", + "$type": "color", + "$value": "#1060ff", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.action}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiary.g100}" + }, + "key": "{button.foreground.color.tertiary.default}" + }, + "name": "token-button-foreground-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "default" + ] + }, + { + "key": "{button.foreground.color.tertiary.hover}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.action-hover}", + "$modes": { + "default": "{color.foreground.action-hover}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.hover}" + }, + "name": "token-button-foreground-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "hover" + ] + }, + { + "key": "{button.foreground.color.tertiary.focus}", + "$type": "color", + "$value": "#1060ff", + "$modes": { + "default": "#1060ff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.action}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.focus}" + }, + "name": "token-button-foreground-color-tertiary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "focus" + ] + }, + { + "key": "{button.foreground.color.tertiary.active}", + "$type": "color", + "$value": "#0046d1", + "$modes": { + "default": "#0046d1", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.action-active}", + "$modes": { + "default": "{color.foreground.action-active}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.active}" + }, + "name": "token-button-foreground-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "active" + ] + }, + { + "key": "{button.foreground.color.critical.default}", + "$type": "color", + "$value": "#c00005", + "$modes": { + "default": "#c00005", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.critical-on-surface}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.default}" + }, + "name": "token-button-foreground-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "default" + ] + }, + { + "key": "{button.foreground.color.critical.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.hover}" + }, + "name": "token-button-foreground-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "hover" + ] + }, + { + "key": "{button.foreground.color.critical.focus}", + "$type": "color", + "$value": "#c00005", + "$modes": { + "default": "#c00005", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.critical-on-surface}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.focus}" + }, + "name": "token-button-foreground-color-critical-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "focus" + ] + }, + { + "key": "{button.foreground.color.critical.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.active}" + }, + "name": "token-button-foreground-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "active" + ] + }, + { + "key": "{button.foreground.color.disabled}", + "$type": "color", + "$value": "#8c909c", + "$modes": { + "default": "#8c909c", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "rgba(255, 255, 255, 0.25)", + "cds-g100": "rgba(255, 255, 255, 0.25)" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.disabled}", + "$modes": { + "default": "{color.foreground.disabled}", + "cds-g0": "{carbon.themes.white.textOnColorDisabled}", + "cds-g10": "{carbon.themes.g10.textOnColorDisabled}", + "cds-g90": "{carbon.themes.g90.textOnColorDisabled}", + "cds-g100": "{carbon.themes.g100.textOnColorDisabled}" + }, + "key": "{button.foreground.color.disabled}" + }, + "name": "token-button-foreground-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "disabled" + ] + }, + { + "key": "{button.surface.color.primary.default}", + "$type": "color", + "$value": "#1060ff", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimary.g100}" + }, + "key": "{button.surface.color.primary.default}" + }, + "name": "token-button-surface-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "default" + ] + }, + { + "key": "{button.surface.color.primary.hover}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#0050e6", + "cds-g100": "#0050e6" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimaryHover.g100}" + }, + "key": "{button.surface.color.primary.hover}" + }, + "name": "token-button-surface-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "hover" + ] + }, + { + "key": "{button.surface.color.primary.focus}", + "$type": "color", + "$value": "#1060ff", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimary.g100}" + }, + "key": "{button.surface.color.primary.focus}" + }, + "name": "token-button-surface-color-primary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "focus" + ] + }, + { + "key": "{button.surface.color.primary.active}", + "$type": "color", + "$value": "#0046d1", + "$modes": { + "default": "#0046d1", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#002d9c", + "cds-g100": "#002d9c" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimaryActive.g100}" + }, + "key": "{button.surface.color.primary.active}" + }, + "name": "token-button-surface-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "active" + ] + }, + { + "key": "{button.surface.color.secondary.default}", + "$type": "color", + "$value": "#fafafa", + "$modes": { + "default": "#fafafa", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#6f6f6f", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{color.surface.faint}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondary.g100}" + }, + "key": "{button.surface.color.secondary.default}" + }, + "name": "token-button-surface-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "default" + ] + }, + { + "key": "{button.surface.color.secondary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#474747", + "cds-g10": "#474747", + "cds-g90": "#5e5e5e", + "cds-g100": "#5e5e5e" + }, + "original": { + "$type": "color", + "$value": "{color.surface.primary}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondaryHover.g100}" + }, + "key": "{button.surface.color.secondary.hover}" + }, + "name": "token-button-surface-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "hover" + ] + }, + { + "key": "{button.surface.color.secondary.focus}", + "$type": "color", + "$value": "#fafafa", + "$modes": { + "default": "#fafafa", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#6f6f6f", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{color.surface.faint}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondary.g100}" + }, + "key": "{button.surface.color.secondary.focus}" + }, + "name": "token-button-surface-color-secondary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "focus" + ] + }, + { + "key": "{button.surface.color.secondary.active}", + "$type": "color", + "$value": "#dedfe3", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#6f6f6f", + "cds-g10": "#6f6f6f", + "cds-g90": "#393939", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{color.surface.interactive-active}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondaryActive.g100}" + }, + "key": "{button.surface.color.secondary.active}" + }, + "name": "token-button-surface-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "active" + ] + }, + { + "key": "{button.surface.color.tertiary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{button.surface.color.tertiary.default}" + }, + "name": "token-button-surface-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "default" + ] + }, + { + "key": "{button.surface.color.tertiary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.surface.primary}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryHover.g100}" + }, + "key": "{button.surface.color.tertiary.hover}" + }, + "name": "token-button-surface-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "hover" + ] + }, + { + "key": "{button.surface.color.tertiary.focus}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "transparent", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "transparent", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryHover.g100}" + }, + "key": "{button.surface.color.tertiary.focus}" + }, + "name": "token-button-surface-color-tertiary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "focus" + ] + }, + { + "key": "{button.surface.color.tertiary.active}", + "$type": "color", + "$value": "#dedfe3", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "{color.surface.interactive-active}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryActive.g100}" + }, + "key": "{button.surface.color.tertiary.active}" + }, + "name": "token-button-surface-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "active" + ] + }, + { + "key": "{button.surface.color.critical.default}", + "$type": "color", + "$value": "#fff5f5", + "$modes": { + "default": "#fff5f5", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "{color.surface.critical}", + "$modes": { + "default": "{color.surface.critical}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerPrimary.g100}" + }, + "key": "{button.surface.color.critical.default}" + }, + "name": "token-button-surface-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "default" + ] + }, + { + "key": "{button.surface.color.critical.hover}", + "$type": "color", + "$value": "#c00005", + "$modes": { + "default": "#c00005", + "cds-g0": "#b81921", + "cds-g10": "#b81921", + "cds-g90": "#b81921", + "cds-g100": "#b81921" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerHover.g100}" + }, + "key": "{button.surface.color.critical.hover}" + }, + "name": "token-button-surface-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "hover" + ] + }, + { + "key": "{button.surface.color.critical.focus}", + "$type": "color", + "$value": "#fff5f5", + "$modes": { + "default": "#fff5f5", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "{color.surface.critical}", + "$modes": { + "default": "{color.surface.critical}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerPrimary.g100}" + }, + "key": "{button.surface.color.critical.focus}" + }, + "name": "token-button-surface-color-critical-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "focus" + ] + }, + { + "key": "{button.surface.color.critical.active}", + "$type": "color", + "$value": "#940004", + "$modes": { + "default": "#940004", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#750e13", + "cds-g100": "#750e13" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-400}", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerActive.g100}" + }, + "key": "{button.surface.color.critical.active}" + }, + "name": "token-button-surface-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "active" + ] + }, + { + "key": "{button.surface.color.disabled}", + "$type": "color", + "$value": "#fafafa", + "$modes": { + "default": "#fafafa", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, + "original": { + "$type": "color", + "$value": "{color.surface.faint}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDisabled.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDisabled.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDisabled.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDisabled.g100}" + }, + "key": "{button.surface.color.disabled}" + }, + "name": "token-button-surface-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "disabled" + ] + }, + { + "key": "{button.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{button.border.width}" + }, + "name": "token-button-border-width", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "width" + ] + }, + { + "key": "{button.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "$modes": { + "default": "5px", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "{border.radius.small}", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{button.border.radius}" + }, + "name": "token-button-border-radius", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "radius" + ] + }, + { + "key": "{button.border.color.primary.default}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.default}" + }, + "name": "token-button-border-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "default" + ] + }, + { + "key": "{button.border.color.primary.hover}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.hover}" + }, + "name": "token-button-border-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "hover" + ] + }, + { + "key": "{button.border.color.primary.focus.internal}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "{color.focus.action.internal}", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.primary.focus.internal}" + }, + "name": "token-button-border-color-primary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "focus", + "internal" + ] + }, + { + "key": "{button.border.color.primary.focus.external}", + "$type": "color", + "$value": "#5990ff", + "$modes": { + "default": "#5990ff", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "{color.focus.action.external}", + "$modes": { + "default": "{color.focus.action.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.primary.focus.external}" + }, + "name": "token-button-border-color-primary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "focus", + "external" + ] + }, + { + "key": "{button.border.color.primary.active}", + "$type": "color", + "$value": "#0046d1", + "$modes": { + "default": "#0046d1", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.active}" + }, + "name": "token-button-border-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "active" + ] + }, + { + "key": "{button.border.color.secondary.default}", + "$type": "color", + "$value": "#3b3d4566", + "$modes": { + "default": "#3b3d4566", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.default}" + }, + "name": "token-button-border-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "default" + ] + }, + { + "key": "{button.border.color.secondary.hover}", + "$type": "color", + "$value": "#3b3d4566", + "$modes": { + "default": "#3b3d4566", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.hover}" + }, + "name": "token-button-border-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "hover" + ] + }, + { + "key": "{button.border.color.secondary.focus.internal}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "{color.focus.action.internal}", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.secondary.focus.internal}" + }, + "name": "token-button-border-color-secondary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "focus", + "internal" + ] + }, + { + "key": "{button.border.color.secondary.focus.external}", + "$type": "color", + "$value": "#5990ff", + "$modes": { + "default": "#5990ff", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "{color.focus.action.external}", + "$modes": { + "default": "{color.focus.action.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.secondary.focus.external}" + }, + "name": "token-button-border-color-secondary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "focus", + "external" + ] + }, + { + "key": "{button.border.color.secondary.active}", + "$type": "color", + "$value": "#3b3d4566", + "$modes": { + "default": "#3b3d4566", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.active}" + }, + "name": "token-button-border-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "active" + ] + }, + { + "key": "{button.border.color.tertiary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{button.border.color.tertiary.default}" + }, + "name": "token-button-border-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "default" + ] + }, + { + "key": "{button.border.color.tertiary.hover}", + "$type": "color", + "$value": "#3b3d4566", + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "key": "{button.border.color.tertiary.hover}" + }, + "name": "token-button-border-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "hover" + ] + }, + { + "key": "{button.border.color.tertiary.focus.internal}", + "$type": "color", + "$value": "#0c56e9", + "original": { + "$type": "color", + "$value": "{color.focus.action.internal}", + "key": "{button.border.color.tertiary.focus.internal}" + }, + "name": "token-button-border-color-tertiary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "focus", + "internal" + ] + }, + { + "key": "{button.border.color.tertiary.focus.external}", + "$type": "color", + "$value": "#5990ff", + "original": { + "$type": "color", + "$value": "{color.focus.action.external}", + "key": "{button.border.color.tertiary.focus.external}" + }, + "name": "token-button-border-color-tertiary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "focus", + "external" + ] + }, + { + "key": "{button.border.color.tertiary.active}", + "$type": "color", + "$value": "#3b3d4566", + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "key": "{button.border.color.tertiary.active}" + }, + "name": "token-button-border-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "active" + ] + }, + { + "key": "{button.border.color.critical.default}", + "$type": "color", + "$value": "#c00005", + "$modes": { + "default": "#c00005", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.critical-on-surface}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.default}" + }, + "name": "token-button-border-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "default" + ] + }, + { + "key": "{button.border.color.critical.hover}", + "$type": "color", + "$value": "#940004", + "$modes": { + "default": "#940004", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-400}", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.hover}" + }, + "name": "token-button-border-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "hover" + ] + }, + { + "key": "{button.border.color.critical.focus.internal}", + "$type": "color", + "$value": "#c00005", + "$modes": { + "default": "#c00005", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "{color.focus.critical.internal}", + "$modes": { + "default": "{color.focus.critical.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.critical.focus.internal}" + }, + "name": "token-button-border-color-critical-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "focus", + "internal" + ] + }, + { + "key": "{button.border.color.critical.focus.external}", + "$type": "color", + "$value": "#dd7578", + "$modes": { + "default": "#dd7578", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "{color.focus.critical.external}", + "$modes": { + "default": "{color.focus.critical.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.critical.focus.external}" + }, + "name": "token-button-border-color-critical-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "focus", + "external" + ] + }, + { + "key": "{button.border.color.critical.active}", + "$type": "color", + "$value": "#940004", + "$modes": { + "default": "#940004", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-400}", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.active}" + }, + "name": "token-button-border-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "active" + ] + }, + { + "key": "{button.border.color.disabled}", + "$type": "color", + "$value": "#656a7633", + "original": { + "$type": "color", + "$value": "{color.border.primary}", + "key": "{button.border.color.disabled}" + }, + "name": "token-button-border-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "disabled" + ] + }, + { + "key": "{button.focus.border.width}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{button.focus.border.width}" + }, + "name": "token-button-focus-border-width", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "focus", + "border", + "width" + ] + }, + { + "key": "{button.icon.size.small}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.small}" + }, + "name": "token-button-icon-size-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "small" + ] + }, + { + "key": "{button.icon.size.medium}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.medium}" + }, + "name": "token-button-icon-size-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "medium" + ] + }, + { + "key": "{button.icon.size.large}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.large}" + }, + "name": "token-button-icon-size-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "large" + ] + }, + { + "key": "{dismiss-button.size}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "key": "{dismiss-button.size}" + }, + "name": "token-dismiss-button-size", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "size" + ] + }, + { + "key": "{dismiss-button.foreground.color.default}", + "$type": "color", + "$value": "#656a76", + "$modes": { + "default": "#656a76", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "$modes": { + "default": "{color.foreground.faint}", + "cds-g0": "{carbon.themes.white.iconPrimary}", + "cds-g10": "{carbon.themes.g10.iconPrimary}", + "cds-g90": "{carbon.themes.g90.iconPrimary}", + "cds-g100": "{carbon.themes.g100.iconPrimary}" + }, + "key": "{dismiss-button.foreground.color.default}" + }, + "name": "token-dismiss-button-foreground-color-default", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "foreground", + "color", + "default" + ] + }, + { + "key": "{dismiss-button.foreground.color.active}", + "$type": "color", + "$value": "#0c0c0e", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.strong}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.white.iconPrimary}", + "cds-g10": "{carbon.themes.g10.iconPrimary}", + "cds-g90": "{carbon.themes.g90.iconPrimary}", + "cds-g100": "{carbon.themes.g100.iconPrimary}" + }, + "key": "{dismiss-button.foreground.color.active}" + }, + "name": "token-dismiss-button-foreground-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "foreground", + "color", + "active" + ] + }, + { + "key": "{dismiss-button.surface.color.hover}", + "$type": "color", + "$value": "rgba(222, 223, 227, 0.4)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "rgba(141, 141, 141, 0.12)", + "cds-g10": "rgba(141, 141, 141, 0.12)", + "cds-g90": "rgba(141, 141, 141, 0.16)", + "cds-g100": "rgba(141, 141, 141, 0.16)" + }, + "original": { + "$type": "color", + "$value": "rgba(222, 223, 227, 0.4)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "{carbon.themes.white.backgroundHover}", + "cds-g10": "{carbon.themes.g10.backgroundHover}", + "cds-g90": "{carbon.themes.g90.backgroundHover}", + "cds-g100": "{carbon.themes.g100.backgroundHover}" + }, + "key": "{dismiss-button.surface.color.hover}" + }, + "name": "token-dismiss-button-surface-color-hover", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "surface", + "color", + "hover" + ] + }, + { + "key": "{dismiss-button.surface.color.active}", + "$type": "color", + "$value": "rgba(222, 223, 227, 0.4)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "rgba(141, 141, 141, 0.5)", + "cds-g10": "rgba(141, 141, 141, 0.5)", + "cds-g90": "rgba(141, 141, 141, 0.4)", + "cds-g100": "rgba(141, 141, 141, 0.4)" + }, + "original": { + "$type": "color", + "$value": "rgba(222, 223, 227, 0.4)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "{carbon.themes.white.backgroundActive}", + "cds-g10": "{carbon.themes.g10.backgroundActive}", + "cds-g90": "{carbon.themes.g90.backgroundActive}", + "cds-g100": "{carbon.themes.g100.backgroundActive}" + }, + "key": "{dismiss-button.surface.color.active}" + }, + "name": "token-dismiss-button-surface-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "surface", + "color", + "active" + ] + }, + { + "key": "{dismiss-button.border.color.active}", + "$type": "color", + "$value": "#3b3d4566", + "$modes": { + "default": "#3b3d4566", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{dismiss-button.border.color.active}" + }, + "name": "token-dismiss-button-border-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "border", + "color", + "active" + ] + }, + { + "key": "{dismiss-button.icon.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "20", + "cds-g10": "20", + "cds-g90": "20", + "cds-g100": "20" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "20", + "cds-g10": "20", + "cds-g90": "20", + "cds-g100": "20" + }, + "key": "{dismiss-button.icon.size}" + }, + "name": "token-dismiss-button-icon-size", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "icon", + "size" + ] + }, + { + "key": "{form.label.color}", + "$type": "color", + "$value": "#0c0c0e", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.strong}", + "group": "components", + "key": "{form.label.color}" + }, + "name": "token-form-label-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "label", + "color" + ] + }, + { + "key": "{form.legend.color}", + "$type": "color", + "$value": "#0c0c0e", + "group": "components", + "original": { + "$type": "color", + "$value": "{form.label.color}", + "group": "components", + "key": "{form.legend.color}" + }, + "name": "token-form-legend-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "legend", + "color" + ] + }, + { + "key": "{form.helper-text.color}", + "$type": "color", + "$value": "#656a76", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.helper-text.color}" + }, + "name": "token-form-helper-text-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "helper-text", + "color" + ] + }, + { + "key": "{form.indicator.optional.color}", + "$type": "color", + "$value": "#656a76", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.indicator.optional.color}" + }, + "name": "token-form-indicator-optional-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "indicator", + "optional", + "color" + ] + }, + { + "key": "{form.error.color}", + "$type": "color", + "$value": "#c00005", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "components", + "key": "{form.error.color}" + }, + "name": "token-form-error-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "error", + "color" + ] + }, + { + "key": "{form.error.icon-size}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "14", + "unit": "px", + "key": "{form.error.icon-size}" + }, + "name": "token-form-error-icon-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "error", + "icon-size" + ] + }, + { + "key": "{form.checkbox.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.checkbox.size}" + }, + "name": "token-form-checkbox-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "size" + ] + }, + { + "key": "{form.checkbox.border.radius}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{form.checkbox.border.radius}" + }, + "name": "token-form-checkbox-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "border", + "radius" + ] + }, + { + "key": "{form.checkbox.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.checkbox.border.width}" + }, + "name": "token-form-checkbox-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "border", + "width" + ] + }, + { + "key": "{form.checkbox.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.checkbox.background-image.size}" + }, + "name": "token-form-checkbox-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "size" + ] + }, + { + "key": "{form.checkbox.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url}" + }, + "name": "token-form-checkbox-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url" + ] + }, + { + "key": "{form.checkbox.background-image.data-url-indeterminate}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url-indeterminate}" + }, + "name": "token-form-checkbox-background-image-data-url-indeterminate", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url-indeterminate" + ] + }, + { + "key": "{form.checkbox.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url-disabled}" + }, + "name": "token-form-checkbox-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url-disabled" + ] + }, + { + "key": "{form.checkbox.background-image.data-url-indeterminate-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dash' color is hardcoded here!", + "key": "{form.checkbox.background-image.data-url-indeterminate-disabled}" + }, + "name": "token-form-checkbox-background-image-data-url-indeterminate-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "background-image", + "data-url-indeterminate-disabled" + ] + }, + { + "key": "{form.control.base.foreground.value-color}", + "$type": "color", + "$value": "#0c0c0e", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.strong}", + "group": "components", + "key": "{form.control.base.foreground.value-color}" + }, + "name": "token-form-control-base-foreground-value-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "foreground", + "value-color" + ] + }, + { + "key": "{form.control.base.foreground.placeholder-color}", + "$type": "color", + "$value": "#656a76", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.control.base.foreground.placeholder-color}" + }, + "name": "token-form-control-base-foreground-placeholder-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "foreground", + "placeholder-color" + ] + }, + { + "key": "{form.control.base.surface-color.default}", + "$type": "color", + "$value": "#ffffff", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.interactive}", + "group": "components", + "key": "{form.control.base.surface-color.default}" + }, + "name": "token-form-control-base-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "surface-color", + "default" + ] + }, + { + "key": "{form.control.base.surface-color.hover}", + "$type": "color", + "$value": "#f1f2f3", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.interactive-hover}", + "group": "components", + "key": "{form.control.base.surface-color.hover}" + }, + "name": "token-form-control-base-surface-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "surface-color", + "hover" + ] + }, + { + "key": "{form.control.base.border-color.default}", + "$type": "color", + "$value": "#8c909c", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-400}", + "group": "components", + "key": "{form.control.base.border-color.default}" + }, + "name": "token-form-control-base-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "border-color", + "default" + ] + }, + { + "key": "{form.control.base.border-color.hover}", + "$type": "color", + "$value": "#656a76", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "group": "components", + "key": "{form.control.base.border-color.hover}" + }, + "name": "token-form-control-base-border-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "base", + "border-color", + "hover" + ] + }, + { + "key": "{form.control.checked.foreground-color}", + "$type": "color", + "$value": "#ffffff", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "group": "components", + "key": "{form.control.checked.foreground-color}" + }, + "name": "token-form-control-checked-foreground-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "foreground-color" + ] + }, + { + "key": "{form.control.checked.surface-color.default}", + "$type": "color", + "$value": "#1060ff", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "group": "components", + "key": "{form.control.checked.surface-color.default}" + }, + "name": "token-form-control-checked-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "surface-color", + "default" + ] + }, + { + "key": "{form.control.checked.surface-color.hover}", + "$type": "color", + "$value": "#0c56e9", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "components", + "key": "{form.control.checked.surface-color.hover}" + }, + "name": "token-form-control-checked-surface-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "surface-color", + "hover" + ] + }, + { + "key": "{form.control.checked.border-color.default}", + "$type": "color", + "$value": "#0c56e9", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "components", + "key": "{form.control.checked.border-color.default}" + }, + "name": "token-form-control-checked-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "border-color", + "default" + ] + }, + { + "key": "{form.control.checked.border-color.hover}", + "$type": "color", + "$value": "#0046d1", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "group": "components", + "key": "{form.control.checked.border-color.hover}" + }, + "name": "token-form-control-checked-border-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "checked", + "border-color", + "hover" + ] + }, + { + "key": "{form.control.invalid.border-color.default}", + "$type": "color", + "$value": "#c00005", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "components", + "key": "{form.control.invalid.border-color.default}" + }, + "name": "token-form-control-invalid-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "invalid", + "border-color", + "default" + ] + }, + { + "key": "{form.control.invalid.border-color.hover}", + "$type": "color", + "$value": "#940004", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.palette.red-400}", + "group": "components", + "key": "{form.control.invalid.border-color.hover}" + }, + "name": "token-form-control-invalid-border-color-hover", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "invalid", + "border-color", + "hover" + ] + }, + { + "key": "{form.control.readonly.foreground-color}", + "$type": "color", + "$value": "#3b3d45", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "group": "components", + "key": "{form.control.readonly.foreground-color}" + }, + "name": "token-form-control-readonly-foreground-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "readonly", + "foreground-color" + ] + }, + { + "key": "{form.control.readonly.surface-color}", + "$type": "color", + "$value": "#f1f2f3", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.strong}", + "group": "components", + "key": "{form.control.readonly.surface-color}" + }, + "name": "token-form-control-readonly-surface-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "readonly", + "surface-color" + ] + }, + { + "key": "{form.control.readonly.border-color}", + "$type": "color", + "$value": "#656a761a", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.border.faint}", + "group": "components", + "key": "{form.control.readonly.border-color}" + }, + "name": "token-form-control-readonly-border-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "readonly", + "border-color" + ] + }, + { + "key": "{form.control.disabled.foreground-color}", + "$type": "color", + "$value": "#8c909c", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.disabled}", + "group": "components", + "key": "{form.control.disabled.foreground-color}" + }, + "name": "token-form-control-disabled-foreground-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "disabled", + "foreground-color" + ] + }, + { + "key": "{form.control.disabled.surface-color}", + "$type": "color", + "$value": "#fafafa", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.surface.interactive-disabled}", + "group": "components", + "key": "{form.control.disabled.surface-color}" + }, + "name": "token-form-control-disabled-surface-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "disabled", + "surface-color" + ] + }, + { + "key": "{form.control.disabled.border-color}", + "$type": "color", + "$value": "#656a7633", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.border.primary}", + "group": "components", + "key": "{form.control.disabled.border-color}" + }, + "name": "token-form-control-disabled-border-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "disabled", + "border-color" + ] + }, + { + "key": "{form.control.padding}", + "$type": "dimension", + "$value": "7px", + "unit": "px", + "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma.", + "original": { + "$type": "dimension", + "$value": "7", + "unit": "px", + "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma.", + "key": "{form.control.padding}" + }, + "name": "token-form-control-padding", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "padding" + ] + }, + { + "key": "{form.control.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{form.control.border.radius}" + }, + "name": "token-form-control-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "border", + "radius" + ] + }, + { + "key": "{form.control.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.control.border.width}" + }, + "name": "token-form-control-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "control", + "border", + "width" + ] + }, + { + "key": "{form.radio.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.radio.size}" + }, + "name": "token-form-radio-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "size" + ] + }, + { + "key": "{form.radio.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.radio.border.width}" + }, + "name": "token-form-radio-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "border", + "width" + ] + }, + { + "key": "{form.radio.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.radio.background-image.size}" + }, + "name": "token-form-radio-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "background-image", + "size" + ] + }, + { + "key": "{form.radio.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "key": "{form.radio.background-image.data-url}" + }, + "name": "token-form-radio-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "background-image", + "data-url" + ] + }, + { + "key": "{form.radio.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'dot' color is hardcoded here!", + "key": "{form.radio.background-image.data-url-disabled}" + }, + "name": "token-form-radio-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radio", + "background-image", + "data-url-disabled" + ] + }, + { + "key": "{form.radiocard-group.gap}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.radiocard-group.gap}" + }, + "name": "token-form-radiocard-group-gap", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard-group", + "gap" + ] + }, + { + "key": "{form.radiocard.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.radiocard.border.width}" + }, + "name": "token-form-radiocard-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "width" + ] + }, + { + "key": "{form.radiocard.border.radius}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{form.radiocard.border.radius}" + }, + "name": "token-form-radiocard-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "radius" + ] + }, + { + "key": "{form.radiocard.border.color.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.surface.primary}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{form.radiocard.border.color.default}" + }, + "name": "token-form-radiocard-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "default" + ] + }, + { + "key": "{form.radiocard.border.color.focus}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "original": { + "$type": "color", + "$value": "{color.focus.action.internal}", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "key": "{form.radiocard.border.color.focus}" + }, + "name": "token-form-radiocard-border-color-focus", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "focus" + ] + }, + { + "key": "{form.radiocard.border.color.default-checked}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "key": "{form.radiocard.border.color.default-checked}" + }, + "name": "token-form-radiocard-border-color-default-checked", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "default-checked" + ] + }, + { + "key": "{form.radiocard.content-padding}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{form.radiocard.content-padding}" + }, + "name": "token-form-radiocard-content-padding", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "content-padding" + ] + }, + { + "key": "{form.radiocard.control-padding}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{form.radiocard.control-padding}" + }, + "name": "token-form-radiocard-control-padding", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "control-padding" + ] + }, + { + "key": "{form.radiocard.transition.duration}", + "$type": "duration", + "$value": "0.2s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.2", + "unit": "s", + "key": "{form.radiocard.transition.duration}" + }, + "name": "token-form-radiocard-transition-duration", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "transition", + "duration" + ] + }, + { + "key": "{form.select.background-image.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.select.background-image.size}" + }, + "name": "token-form-select-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "size" + ] + }, + { + "key": "{form.select.background-image.position-right-x}", + "$type": "dimension", + "$value": "7px", + "original": { + "$type": "dimension", + "$value": "{form.control.padding}", + "key": "{form.select.background-image.position-right-x}" + }, + "name": "token-form-select-background-image-position-right-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "position-right-x" + ] + }, + { + "key": "{form.select.background-image.position-top-y}", + "$type": "dimension", + "$value": "9px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "9", + "unit": "px", + "key": "{form.select.background-image.position-top-y}" + }, + "name": "token-form-select-background-image-position-top-y", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "position-top-y" + ] + }, + { + "key": "{form.select.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "key": "{form.select.background-image.data-url}" + }, + "name": "token-form-select-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "data-url" + ] + }, + { + "key": "{form.select.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E\")", + "comment": "notice: the 'caret' color is hardcoded here!", + "key": "{form.select.background-image.data-url-disabled}" + }, + "name": "token-form-select-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "select", + "background-image", + "data-url-disabled" + ] + }, + { + "key": "{form.text-input.background-image.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.text-input.background-image.size}" + }, + "name": "token-form-text-input-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "size" + ] + }, + { + "key": "{form.text-input.background-image.position-x}", + "$type": "dimension", + "$value": "7px", + "original": { + "$type": "dimension", + "$value": "{form.control.padding}", + "key": "{form.text-input.background-image.position-x}" + }, + "name": "token-form-text-input-background-image-position-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "position-x" + ] + }, + { + "key": "{form.text-input.background-image.data-url-date}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-date}" + }, + "name": "token-form-text-input-background-image-data-url-date", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-date" + ] + }, + { + "key": "{form.text-input.background-image.data-url-time}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-time}" + }, + "name": "token-form-text-input-background-image-data-url-time", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-time" + ] + }, + { + "key": "{form.text-input.background-image.data-url-search}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-search}" + }, + "name": "token-form-text-input-background-image-data-url-search", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search" + ] + }, + { + "key": "{form.text-input.background-image.data-url-search-cancel}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e\")", + "comment": "notice: the icon color is hardcoded here!", + "key": "{form.text-input.background-image.data-url-search-cancel}" + }, + "name": "token-form-text-input-background-image-data-url-search-cancel", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search-cancel" + ] + }, + { + "key": "{form.text-input.background-image.data-url-search-loading}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color and animation are hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color and animation are hardcoded here!", + "key": "{form.text-input.background-image.data-url-search-loading}" + }, + "name": "token-form-text-input-background-image-data-url-search-loading", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search-loading" + ] + }, + { + "key": "{form.toggle.width}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{form.toggle.width}" + }, + "name": "token-form-toggle-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "width" + ] + }, + { + "key": "{form.toggle.height}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.toggle.height}" + }, + "name": "token-form-toggle-height", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "height" + ] + }, + { + "key": "{form.toggle.base.surface-color.default}", + "$type": "color", + "$value": "#f1f2f3", + "group": "components", + "comment": "the toggle has a different base surface color, compared to the other controls", + "original": { + "$type": "color", + "$value": "{color.surface.strong}", + "group": "components", + "comment": "the toggle has a different base surface color, compared to the other controls", + "key": "{form.toggle.base.surface-color.default}" + }, + "name": "token-form-toggle-base-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "base", + "surface-color", + "default" + ] + }, + { + "key": "{form.toggle.border.radius}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{form.toggle.border.radius}" + }, + "name": "token-form-toggle-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "border", + "radius" + ] + }, + { + "key": "{form.toggle.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.toggle.border.width}" + }, + "name": "token-form-toggle-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "border", + "width" + ] + }, + { + "key": "{form.toggle.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.toggle.background-image.size}" + }, + "name": "token-form-toggle-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "size" + ] + }, + { + "key": "{form.toggle.background-image.position-x}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{form.toggle.background-image.position-x}" + }, + "name": "token-form-toggle-background-image-position-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "position-x" + ] + }, + { + "key": "{form.toggle.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.toggle.background-image.data-url}" + }, + "name": "token-form-toggle-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "data-url" + ] + }, + { + "key": "{form.toggle.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.toggle.background-image.data-url-disabled}" + }, + "name": "token-form-toggle-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "data-url-disabled" + ] + }, + { + "key": "{form.toggle.transition.duration}", + "$type": "duration", + "$value": "0.2s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.2", + "unit": "s", + "key": "{form.toggle.transition.duration}" + }, + "name": "token-form-toggle-transition-duration", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "transition", + "duration" + ] + }, + { + "key": "{form.toggle.transition.timing-function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.68, -0.2, 0.265, 1.15)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.68, + -0.2, + 0.265, + 1.15 + ], + "key": "{form.toggle.transition.timing-function}" + }, + "name": "token-form-toggle-transition-timing-function", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "transition", + "timing-function" + ] + }, + { + "key": "{form.toggle.thumb-size}", + "$type": "dimension", + "$value": "16px", + "original": { + "$type": "dimension", + "$value": "{form.toggle.height}", + "key": "{form.toggle.thumb-size}" + }, + "name": "token-form-toggle-thumb-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "thumb-size" + ] + }, + { + "key": "{icon-tile.border.color.overlay}", + "$type": "color", + "$value": "#656a7633", + "$modes": { + "default": "#656a7633", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{color.border.primary}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle02}", + "cds-g10": "{carbon.themes.g10.borderSubtle02}", + "cds-g90": "{carbon.themes.g90.borderSubtle02}", + "cds-g100": "{carbon.themes.g100.borderSubtle02}" + }, + "key": "{icon-tile.border.color.overlay}" + }, + "name": "token-icon-tile-border-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "overlay" + ] + }, + { + "key": "{icon-tile.border.color.logo}", + "$type": "color", + "$value": "#656a7633", + "$modes": { + "default": "#656a7633", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{color.border.primary}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle01}", + "cds-g10": "{carbon.themes.g10.borderSubtle01}", + "cds-g90": "{carbon.themes.g90.borderSubtle01}", + "cds-g100": "{carbon.themes.g100.borderSubtle01}" + }, + "key": "{icon-tile.border.color.logo}" + }, + "name": "token-icon-tile-border-color-logo", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "logo" + ] + }, + { + "key": "{icon-tile.surface.color.overlay}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{color.surface.primary}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.white.layer02}", + "cds-g10": "{carbon.themes.g10.layer02}", + "cds-g90": "{carbon.themes.g90.layer02}", + "cds-g100": "{carbon.themes.g100.layer02}" + }, + "key": "{icon-tile.surface.color.overlay}" + }, + "name": "token-icon-tile-surface-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "surface", + "color", + "overlay" + ] + }, + { + "key": "{pagination.nav.control.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{pagination.nav.control.height}" + }, + "name": "token-pagination-nav-control-height", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "height" + ] + }, + { + "key": "{pagination.nav.control.padding.horizontal}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{pagination.nav.control.padding.horizontal}" + }, + "name": "token-pagination-nav-control-padding-horizontal", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "padding", + "horizontal" + ] + }, + { + "key": "{pagination.nav.control.focus-inset}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{pagination.nav.control.focus-inset}" + }, + "name": "token-pagination-nav-control-focus-inset", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "focus-inset" + ] + }, + { + "key": "{pagination.nav.control.icon-spacing}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{pagination.nav.control.icon-spacing}" + }, + "name": "token-pagination-nav-control-icon-spacing", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "icon-spacing" + ] + }, + { + "key": "{pagination.nav.indicator.height}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{pagination.nav.indicator.height}" + }, + "name": "token-pagination-nav-indicator-height", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "indicator", + "height" + ] + }, + { + "key": "{pagination.nav.indicator.spacing}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{pagination.nav.indicator.spacing}" + }, + "name": "token-pagination-nav-indicator-spacing", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "indicator", + "spacing" + ] + }, + { + "key": "{pagination.child.spacing.vertical}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{pagination.child.spacing.vertical}" + }, + "name": "token-pagination-child-spacing-vertical", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "child", + "spacing", + "vertical" + ] + }, + { + "key": "{pagination.child.spacing.horizontal}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "key": "{pagination.child.spacing.horizontal}" + }, + "name": "token-pagination-child-spacing-horizontal", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "child", + "spacing", + "horizontal" + ] + }, + { + "key": "{rich-tooltip.bubble.max-width}", + "$type": "dimension", + "$value": "280px", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "original": { + "$type": "dimension", + "$value": "280", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "key": "{rich-tooltip.bubble.max-width}" + }, + "name": "token-rich-tooltip-bubble-max-width", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "max-width" + ] + }, + { + "key": "{rich-tooltip.bubble.border.color}", + "$value": "#656a7633", + "$modes": { + "default": "#656a7633", + "cds-g0": "#656a7633", + "cds-g10": "#656a7633", + "cds-g90": "#656a7633", + "cds-g100": "#656a7633" + }, + "original": { + "$value": "{elevation.higher.border.color}", + "$modes": { + "default": "{elevation.higher.border.color}", + "cds-g0": "{color.palette.alpha-200}", + "cds-g10": "{color.palette.alpha-200}", + "cds-g90": "{color.palette.alpha-200}", + "cds-g100": "{color.palette.alpha-200}" + }, + "key": "{rich-tooltip.bubble.border.color}" + }, + "name": "token-rich-tooltip-bubble-border-color", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "border", + "color" + ] + }, + { + "key": "{rich-tooltip.bubble.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "$modes": { + "default": "5px", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "original": { + "$type": "dimension", + "$value": "{border.radius.small}", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "key": "{rich-tooltip.bubble.border.radius}" + }, + "name": "token-rich-tooltip-bubble-border-radius", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "border", + "radius" + ] + }, + { + "key": "{rich-tooltip.bubble.arrow.size}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{rich-tooltip.bubble.arrow.size}" + }, + "name": "token-rich-tooltip-bubble-arrow-size", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "arrow", + "size" + ] + }, + { + "key": "{rich-tooltip.toggle.gap.horizontal}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{rich-tooltip.toggle.gap.horizontal}" + }, + "name": "token-rich-tooltip-toggle-gap-horizontal", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "gap", + "horizontal" + ] + }, + { + "key": "{rich-tooltip.toggle.foreground.color.default}", + "$value": "#0c0c0e", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$value": "{color.foreground.strong}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.default}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-default", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "default" + ] + }, + { + "key": "{rich-tooltip.toggle.foreground.color.hover}", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.hover}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-hover", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "hover" + ] + }, + { + "key": "{rich-tooltip.toggle.foreground.color.active}", + "$value": "#656a76", + "$modes": { + "default": "#656a76", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$value": "{color.foreground.faint}", + "$modes": { + "default": "{color.foreground.faint}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.active}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-active", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "active" + ] + }, + { + "key": "{rich-tooltip.toggle.icon.size}", + "$type": "dimension", + "$value": "1em", + "unit": "em", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, + "original": { + "$type": "dimension", + "$value": "1", + "unit": "em", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, + "key": "{rich-tooltip.toggle.icon.size}" + }, + "name": "token-rich-tooltip-toggle-icon-size", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "icon", + "size" + ] + }, + { + "key": "{tabs.tab.height.medium}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{tabs.tab.height.medium}" + }, + "name": "token-tabs-tab-height-medium", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "height", + "medium" + ] + }, + { + "key": "{tabs.tab.height.large}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{tabs.tab.height.large}" + }, + "name": "token-tabs-tab-height-large", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "height", + "large" + ] + }, + { + "key": "{tabs.tab.padding.horizontal.medium}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{tabs.tab.padding.horizontal.medium}" + }, + "name": "token-tabs-tab-padding-horizontal-medium", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "padding", + "horizontal", + "medium" + ] + }, + { + "key": "{tabs.tab.padding.horizontal.large}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "key": "{tabs.tab.padding.horizontal.large}" + }, + "name": "token-tabs-tab-padding-horizontal-large", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "padding", + "horizontal", + "large" + ] + }, + { + "key": "{tabs.tab.padding.vertical}", + "$type": "dimension", + "$value": "0px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "0", + "unit": "px", + "key": "{tabs.tab.padding.vertical}" + }, + "name": "token-tabs-tab-padding-vertical", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "padding", + "vertical" + ] + }, + { + "key": "{tabs.tab.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{tabs.tab.border-radius}" + }, + "name": "token-tabs-tab-border-radius", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "border-radius" + ] + }, + { + "key": "{tabs.tab.focus-inset}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{tabs.tab.focus-inset}" + }, + "name": "token-tabs-tab-focus-inset", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "focus-inset" + ] + }, + { + "key": "{tabs.tab.gutter}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{tabs.tab.gutter}" + }, + "name": "token-tabs-tab-gutter", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "tab", + "gutter" + ] + }, + { + "key": "{tabs.indicator.height}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{tabs.indicator.height}" + }, + "name": "token-tabs-indicator-height", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "indicator", + "height" + ] + }, + { + "key": "{tabs.indicator.transition.function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.5, 1, 0.89, 1)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.5, + 1, + 0.89, + 1 + ], + "key": "{tabs.indicator.transition.function}" + }, + "name": "token-tabs-indicator-transition-function", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "indicator", + "transition", + "function" + ] + }, + { + "key": "{tabs.indicator.transition.duration}", + "$type": "duration", + "$value": "0.6s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.6", + "unit": "s", + "key": "{tabs.indicator.transition.duration}" + }, + "name": "token-tabs-indicator-transition-duration", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "indicator", + "transition", + "duration" + ] + }, + { + "key": "{tabs.divider.height}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{tabs.divider.height}" + }, + "name": "token-tabs-divider-height", + "attributes": { + "category": "tabs" + }, + "path": [ + "tabs", + "divider", + "height" + ] + }, + { + "key": "{tooltip.max-width}", + "$type": "dimension", + "$value": "280px", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "original": { + "$type": "dimension", + "$value": "280", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "key": "{tooltip.max-width}" + }, + "name": "token-tooltip-max-width", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "max-width" + ] + }, + { + "key": "{tooltip.padding.horizontal}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16px", + "cds-g10": "16px", + "cds-g90": "16px", + "cds-g100": "16px" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "{carbon.themes.white.spacing05}", + "cds-g10": "{carbon.themes.g10.spacing05}", + "cds-g90": "{carbon.themes.g90.spacing05}", + "cds-g100": "{carbon.themes.g100.spacing05}" + }, + "key": "{tooltip.padding.horizontal}" + }, + "name": "token-tooltip-padding-horizontal", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "horizontal" + ] + }, + { + "key": "{tooltip.padding.vertical}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "16px", + "cds-g10": "16px", + "cds-g90": "16px", + "cds-g100": "16px" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "{carbon.themes.white.spacing05}", + "cds-g10": "{carbon.themes.g10.spacing05}", + "cds-g90": "{carbon.themes.g90.spacing05}", + "cds-g100": "{carbon.themes.g100.spacing05}" + }, + "key": "{tooltip.padding.vertical}" + }, + "name": "token-tooltip-padding-vertical", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "vertical" + ] + }, + { + "key": "{tooltip.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "$modes": { + "default": "5px", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "original": { + "$type": "dimension", + "$value": "{border.radius.small}", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "key": "{tooltip.border.radius}" + }, + "name": "token-tooltip-border-radius", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "border", + "radius" + ] + }, + { + "key": "{tooltip.caret.clip-path}", + "$value": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "$modes": { + "default": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "cds-g0": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g10": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g90": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g100": "polygon(0 100%, 50% 0, 100% 100%)" + }, + "original": { + "$value": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "$modes": { + "default": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "cds-g0": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g10": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g90": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g100": "polygon(0 100%, 50% 0, 100% 100%)" + }, + "key": "{tooltip.caret.clip-path}" + }, + "name": "token-tooltip-caret-clip-path", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "clip-path" + ] + }, + { + "key": "{tooltip.caret.height}", + "$type": "dimension", + "$value": "7px", + "unit": "px", + "$modes": { + "default": "7", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "original": { + "$type": "dimension", + "$value": "7", + "unit": "px", + "$modes": { + "default": "7", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "key": "{tooltip.caret.height}" + }, + "name": "token-tooltip-caret-height", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "height" + ] + }, + { + "key": "{tooltip.caret.width}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{tooltip.caret.width}" + }, + "name": "token-tooltip-caret-width", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "width" + ] + }, + { + "key": "{tooltip.focus-offset}", + "$type": "dimension", + "$value": "-2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "-2", + "unit": "px", + "key": "{tooltip.focus-offset}" + }, + "name": "token-tooltip-focus-offset", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "focus-offset" + ] + }, + { + "key": "{tooltip.transition.function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.54, 1.5, 0.38, 1.11)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.54, + 1.5, + 0.38, + 1.11 + ], + "key": "{tooltip.transition.function}" + }, + "name": "token-tooltip-transition-function", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "transition", + "function" + ] + }, + { + "key": "{typography.font-stack.display}", + "$type": "font-family", + "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.sans.display.combined}", + "$modes": { + "default": "{typography.font-stack.sans.display.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.font-stack.display}" + }, + "name": "token-typography-font-stack-display", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-stack", + "display" + ] + }, + { + "key": "{typography.font-stack.text}", + "$type": "font-family", + "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.sans.text.combined}", + "$modes": { + "default": "{typography.font-stack.sans.text.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.font-stack.text}" + }, + "name": "token-typography-font-stack-text", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-stack", + "text" + ] + }, + { + "key": "{typography.font-stack.code}", + "$type": "font-family", + "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "default": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.monospace.code.combined}", + "$modes": { + "default": "{typography.font-stack.monospace.code.combined}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.font-stack.code}" + }, + "name": "token-typography-font-stack-code", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-stack", + "code" + ] + }, + { + "key": "{typography.font-weight.regular}", + "$type": "font-weight", + "$value": "400", + "$modes": { + "default": "400", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "400", + "$modes": { + "default": "400", + "cds-g0": "{carbon.typography.font-weight.regular}", + "cds-g10": "{carbon.typography.font-weight.regular}", + "cds-g90": "{carbon.typography.font-weight.regular}", + "cds-g100": "{carbon.typography.font-weight.regular}" + }, + "key": "{typography.font-weight.regular}" + }, + "name": "token-typography-font-weight-regular", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "regular" + ] + }, + { + "key": "{typography.font-weight.medium}", + "$type": "font-weight", + "$value": "500", + "$modes": { + "default": "500", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "500", + "$modes": { + "default": "500", + "cds-g0": "{carbon.typography.font-weight.regular}", + "cds-g10": "{carbon.typography.font-weight.regular}", + "cds-g90": "{carbon.typography.font-weight.regular}", + "cds-g100": "{carbon.typography.font-weight.regular}" + }, + "key": "{typography.font-weight.medium}" + }, + "name": "token-typography-font-weight-medium", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "medium" + ] + }, + { + "key": "{typography.font-weight.semibold}", + "$type": "font-weight", + "$value": "600", + "$modes": { + "default": "600", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "600", + "$modes": { + "default": "600", + "cds-g0": "{carbon.typography.font-weight.semibold}", + "cds-g10": "{carbon.typography.font-weight.semibold}", + "cds-g90": "{carbon.typography.font-weight.semibold}", + "cds-g100": "{carbon.typography.font-weight.semibold}" + }, + "key": "{typography.font-weight.semibold}" + }, + "name": "token-typography-font-weight-semibold", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "semibold" + ] + }, + { + "key": "{typography.font-weight.bold}", + "$type": "font-weight", + "$value": "700", + "$modes": { + "default": "700", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "700", + "$modes": { + "default": "700", + "cds-g0": "{carbon.typography.font-weight.semibold}", + "cds-g10": "{carbon.typography.font-weight.semibold}", + "cds-g90": "{carbon.typography.font-weight.semibold}", + "cds-g100": "{carbon.typography.font-weight.semibold}" + }, + "key": "{typography.font-weight.bold}" + }, + "name": "token-typography-font-weight-bold", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "font-weight", + "bold" + ] + }, + { + "key": "{typography.display-500.font-family}", + "$type": "font-family", + "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-500.font-family}" + }, + "name": "token-typography-display-500-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "font-family" + ] + }, + { + "key": "{typography.display-500.font-size}", + "$type": "font-size", + "$value": "1.875rem", + "unit": "px", + "comment": "30px/1.875rem", + "$modes": { + "default": "30", + "cds-g0": "2rem", + "cds-g10": "2rem", + "cds-g90": "2rem", + "cds-g100": "2rem" + }, + "original": { + "$type": "font-size", + "$value": "30", + "unit": "px", + "comment": "30px/1.875rem", + "$modes": { + "default": "30", + "cds-g0": "{carbon.typography.heading05.font-size}", + "cds-g10": "{carbon.typography.heading05.font-size}", + "cds-g90": "{carbon.typography.heading05.font-size}", + "cds-g100": "{carbon.typography.heading05.font-size}" + }, + "key": "{typography.display-500.font-size}" + }, + "name": "token-typography-display-500-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "font-size" + ] + }, + { + "key": "{typography.display-500.line-height}", + "$type": "number", + "$value": 1.2666, + "comment": "38px", + "$modes": { + "default": 1.2666, + "cds-g0": 1.25, + "cds-g10": 1.25, + "cds-g90": 1.25, + "cds-g100": 1.25 + }, + "original": { + "$type": "number", + "$value": 1.2666, + "comment": "38px", + "$modes": { + "default": 1.2666, + "cds-g0": "{carbon.typography.heading05.line-height}", + "cds-g10": "{carbon.typography.heading05.line-height}", + "cds-g90": "{carbon.typography.heading05.line-height}", + "cds-g100": "{carbon.typography.heading05.line-height}" + }, + "key": "{typography.display-500.line-height}" + }, + "name": "token-typography-display-500-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "line-height" + ] + }, + { + "key": "{typography.display-500.letter-spacing}", + "$type": "letter-spacing", + "$value": "-0.5px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading05.letter-spacing}", + "cds-g10": "{carbon.typography.heading05.letter-spacing}", + "cds-g90": "{carbon.typography.heading05.letter-spacing}", + "cds-g100": "{carbon.typography.heading05.letter-spacing}" + }, + "key": "{typography.display-500.letter-spacing}" + }, + "name": "token-typography-display-500-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "letter-spacing" + ] + }, + { + "key": "{typography.display-400.font-family}", + "$type": "font-family", + "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-400.font-family}" + }, + "name": "token-typography-display-400-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "font-family" + ] + }, + { + "key": "{typography.display-400.font-size}", + "$type": "font-size", + "$value": "1.5rem", + "unit": "px", + "comment": "24px/1.5rem", + "$modes": { + "default": "24", + "cds-g0": "1.75rem", + "cds-g10": "1.75rem", + "cds-g90": "1.75rem", + "cds-g100": "1.75rem" + }, + "original": { + "$type": "font-size", + "$value": "24", + "unit": "px", + "comment": "24px/1.5rem", + "$modes": { + "default": "24", + "cds-g0": "{carbon.typography.heading04.font-size}", + "cds-g10": "{carbon.typography.heading04.font-size}", + "cds-g90": "{carbon.typography.heading04.font-size}", + "cds-g100": "{carbon.typography.heading04.font-size}" + }, + "key": "{typography.display-400.font-size}" + }, + "name": "token-typography-display-400-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "font-size" + ] + }, + { + "key": "{typography.display-400.line-height}", + "$type": "number", + "$value": 1.3333, + "comment": "32px", + "$modes": { + "default": 1.3333, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, + "original": { + "$type": "number", + "$value": 1.3333, + "comment": "32px", + "$modes": { + "default": 1.3333, + "cds-g0": "{carbon.typography.heading04.line-height}", + "cds-g10": "{carbon.typography.heading04.line-height}", + "cds-g90": "{carbon.typography.heading04.line-height}", + "cds-g100": "{carbon.typography.heading04.line-height}" + }, + "key": "{typography.display-400.line-height}" + }, + "name": "token-typography-display-400-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "line-height" + ] + }, + { + "key": "{typography.display-400.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": 0, + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.heading04.letter-spacing}", + "cds-g10": "{carbon.typography.heading04.letter-spacing}", + "cds-g90": "{carbon.typography.heading04.letter-spacing}", + "cds-g100": "{carbon.typography.heading04.letter-spacing}" + }, + "key": "{typography.display-400.letter-spacing}" + }, + "name": "token-typography-display-400-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "letter-spacing" + ] + }, + { + "key": "{typography.display-300.font-family}", + "$type": "font-family", + "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-300.font-family}" + }, + "name": "token-typography-display-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "font-family" + ] + }, + { + "key": "{typography.display-300.font-size}", + "$type": "font-size", + "$value": "1.125rem", + "unit": "px", + "comment": "18px/1.125rem", + "$modes": { + "default": "18", + "cds-g0": "1.25rem", + "cds-g10": "1.25rem", + "cds-g90": "1.25rem", + "cds-g100": "1.25rem" + }, + "original": { + "$type": "font-size", + "$value": "18", + "unit": "px", + "comment": "18px/1.125rem", + "$modes": { + "default": "18", + "cds-g0": "{carbon.typography.heading03.font-size}", + "cds-g10": "{carbon.typography.heading03.font-size}", + "cds-g90": "{carbon.typography.heading03.font-size}", + "cds-g100": "{carbon.typography.heading03.font-size}" + }, + "key": "{typography.display-300.font-size}" + }, + "name": "token-typography-display-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "font-size" + ] + }, + { + "key": "{typography.display-300.line-height}", + "$type": "number", + "$value": 1.3333, + "comment": "24px", + "$modes": { + "default": 1.3333, + "cds-g0": 1.4, + "cds-g10": 1.4, + "cds-g90": 1.4, + "cds-g100": 1.4 + }, + "original": { + "$type": "number", + "$value": 1.3333, + "comment": "24px", + "$modes": { + "default": 1.3333, + "cds-g0": "{carbon.typography.heading03.line-height}", + "cds-g10": "{carbon.typography.heading03.line-height}", + "cds-g90": "{carbon.typography.heading03.line-height}", + "cds-g100": "{carbon.typography.heading03.line-height}" + }, + "key": "{typography.display-300.line-height}" + }, + "name": "token-typography-display-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "line-height" + ] + }, + { + "key": "{typography.display-300.letter-spacing}", + "$type": "letter-spacing", + "$value": "-0.5px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading03.letter-spacing}", + "cds-g10": "{carbon.typography.heading03.letter-spacing}", + "cds-g90": "{carbon.typography.heading03.letter-spacing}", + "cds-g100": "{carbon.typography.heading03.letter-spacing}" + }, + "key": "{typography.display-300.letter-spacing}" + }, + "name": "token-typography-display-300-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "letter-spacing" + ] + }, + { + "key": "{typography.display-200.font-family}", + "$type": "font-family", + "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-200.font-family}" + }, + "name": "token-typography-display-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "font-family" + ] + }, + { + "key": "{typography.display-200.font-size}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.heading02.font-size}", + "cds-g10": "{carbon.typography.heading02.font-size}", + "cds-g90": "{carbon.typography.heading02.font-size}", + "cds-g100": "{carbon.typography.heading02.font-size}" + }, + "key": "{typography.display-200.font-size}" + }, + "name": "token-typography-display-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "font-size" + ] + }, + { + "key": "{typography.display-200.line-height}", + "$type": "number", + "$value": 1.5, + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": "{carbon.typography.heading02.line-height}", + "cds-g10": "{carbon.typography.heading02.line-height}", + "cds-g90": "{carbon.typography.heading02.line-height}", + "cds-g100": "{carbon.typography.heading02.line-height}" + }, + "key": "{typography.display-200.line-height}" + }, + "name": "token-typography-display-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "line-height" + ] + }, + { + "key": "{typography.display-200.letter-spacing}", + "$type": "letter-spacing", + "$value": "-0.5px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading02.letter-spacing}", + "cds-g10": "{carbon.typography.heading02.letter-spacing}", + "cds-g90": "{carbon.typography.heading02.letter-spacing}", + "cds-g100": "{carbon.typography.heading02.letter-spacing}" + }, + "key": "{typography.display-200.letter-spacing}" + }, + "name": "token-typography-display-200-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "letter-spacing" + ] + }, + { + "key": "{typography.display-100.font-family}", + "$type": "font-family", + "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-100.font-family}" + }, + "name": "token-typography-display-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "font-family" + ] + }, + { + "key": "{typography.display-100.font-size}", + "$type": "font-size", + "$value": "0.8125rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.heading01.font-size}", + "cds-g10": "{carbon.typography.heading01.font-size}", + "cds-g90": "{carbon.typography.heading01.font-size}", + "cds-g100": "{carbon.typography.heading01.font-size}" + }, + "key": "{typography.display-100.font-size}" + }, + "name": "token-typography-display-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "font-size" + ] + }, + { + "key": "{typography.display-100.line-height}", + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": "{carbon.typography.heading01.line-height}", + "cds-g10": "{carbon.typography.heading01.line-height}", + "cds-g90": "{carbon.typography.heading01.line-height}", + "cds-g100": "{carbon.typography.heading01.line-height}" + }, + "key": "{typography.display-100.line-height}" + }, + "name": "token-typography-display-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "line-height" + ] + }, + { + "key": "{typography.display-100.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0.16px", + "cds-g10": "0.16px", + "cds-g90": "0.16px", + "cds-g100": "0.16px" + }, + "original": { + "$type": "letter-spacing", + "$value": 0, + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.heading01.letter-spacing}", + "cds-g10": "{carbon.typography.heading01.letter-spacing}", + "cds-g90": "{carbon.typography.heading01.letter-spacing}", + "cds-g100": "{carbon.typography.heading01.letter-spacing}" + }, + "key": "{typography.display-100.letter-spacing}" + }, + "name": "token-typography-display-100-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "letter-spacing" + ] + }, + { + "key": "{typography.body-300.font-family}", + "$type": "font-family", + "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-300.font-family}" + }, + "name": "token-typography-body-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "font-family" + ] + }, + { + "key": "{typography.body-300.font-size}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.body02.font-size}", + "cds-g10": "{carbon.typography.body02.font-size}", + "cds-g90": "{carbon.typography.body02.font-size}", + "cds-g100": "{carbon.typography.body02.font-size}" + }, + "key": "{typography.body-300.font-size}" + }, + "name": "token-typography-body-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "font-size" + ] + }, + { + "key": "{typography.body-300.line-height}", + "$type": "number", + "$value": 1.5, + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": "{carbon.typography.body02.line-height}", + "cds-g10": "{carbon.typography.body02.line-height}", + "cds-g90": "{carbon.typography.body02.line-height}", + "cds-g100": "{carbon.typography.body02.line-height}" + }, + "key": "{typography.body-300.line-height}" + }, + "name": "token-typography-body-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "line-height" + ] + }, + { + "key": "{typography.body-200.font-family}", + "$type": "font-family", + "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-200.font-family}" + }, + "name": "token-typography-body-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "font-family" + ] + }, + { + "key": "{typography.body-200.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "{carbon.typography.body01.font-size}", + "cds-g10": "{carbon.typography.body01.font-size}", + "cds-g90": "{carbon.typography.body01.font-size}", + "cds-g100": "{carbon.typography.body01.font-size}" + }, + "key": "{typography.body-200.font-size}" + }, + "name": "token-typography-body-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "font-size" + ] + }, + { + "key": "{typography.body-200.line-height}", + "$type": "number", + "$value": 1.4286, + "comment": "20px", + "$modes": { + "default": 1.4286, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": 1.4286, + "comment": "20px", + "$modes": { + "default": 1.4286, + "cds-g0": "{carbon.typography.body01.line-height}", + "cds-g10": "{carbon.typography.body01.line-height}", + "cds-g90": "{carbon.typography.body01.line-height}", + "cds-g100": "{carbon.typography.body01.line-height}" + }, + "key": "{typography.body-200.line-height}" + }, + "name": "token-typography-body-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "line-height" + ] + }, + { + "key": "{typography.body-100.font-family}", + "$type": "font-family", + "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-100.font-family}" + }, + "name": "token-typography-body-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "font-family" + ] + }, + { + "key": "{typography.body-100.font-size}", + "$type": "font-size", + "$value": "0.8125rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.bodyCompact01.font-size}", + "cds-g10": "{carbon.typography.bodyCompact01.font-size}", + "cds-g90": "{carbon.typography.bodyCompact01.font-size}", + "cds-g100": "{carbon.typography.bodyCompact01.font-size}" + }, + "key": "{typography.body-100.font-size}" + }, + "name": "token-typography-body-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "font-size" + ] + }, + { + "key": "{typography.body-100.line-height}", + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, + "original": { + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": "{carbon.typography.bodyCompact01.line-height}", + "cds-g10": "{carbon.typography.bodyCompact01.line-height}", + "cds-g90": "{carbon.typography.bodyCompact01.line-height}", + "cds-g100": "{carbon.typography.bodyCompact01.line-height}" + }, + "key": "{typography.body-100.line-height}" + }, + "name": "token-typography-body-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "line-height" + ] + }, + { + "key": "{typography.code-300.font-family}", + "$type": "font-family", + "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "default": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-300.font-family}" + }, + "name": "token-typography-code-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "font-family" + ] + }, + { + "key": "{typography.code-300.font-size}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-300.font-size}" + }, + "name": "token-typography-code-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "font-size" + ] + }, + { + "key": "{typography.code-300.line-height}", + "$type": "number", + "$value": 1.25, + "comment": "20px", + "$modes": { + "default": 1.25, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": 1.25, + "comment": "20px", + "$modes": { + "default": 1.25, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-300.line-height}" + }, + "name": "token-typography-code-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "line-height" + ] + }, + { + "key": "{typography.code-200.font-family}", + "$type": "font-family", + "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "default": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-200.font-family}" + }, + "name": "token-typography-code-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "font-family" + ] + }, + { + "key": "{typography.code-200.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-200.font-size}" + }, + "name": "token-typography-code-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "font-size" + ] + }, + { + "key": "{typography.code-200.line-height}", + "$type": "number", + "$value": 1.125, + "comment": "18px", + "$modes": { + "default": 1.125, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": 1.125, + "comment": "18px", + "$modes": { + "default": 1.125, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-200.line-height}" + }, + "name": "token-typography-code-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "line-height" + ] + }, + { + "key": "{typography.code-100.font-family}", + "$type": "font-family", + "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "default": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-100.font-family}" + }, + "name": "token-typography-code-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "font-family" + ] + }, + { + "key": "{typography.code-100.font-size}", + "$type": "font-size", + "$value": "0.8125rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-100.font-size}" + }, + "name": "token-typography-code-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "font-size" + ] + }, + { + "key": "{typography.code-100.line-height}", + "$type": "number", + "$value": 1.23, + "comment": "16px", + "$modes": { + "default": 1.23, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, + "original": { + "$type": "number", + "$value": 1.23, + "comment": "16px", + "$modes": { + "default": 1.23, + "cds-g0": "{carbon.typography.code01.line-height}", + "cds-g10": "{carbon.typography.code01.line-height}", + "cds-g90": "{carbon.typography.code01.line-height}", + "cds-g100": "{carbon.typography.code01.line-height}" + }, + "key": "{typography.code-100.line-height}" + }, + "name": "token-typography-code-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "line-height" + ] + } +] \ No newline at end of file diff --git a/packages/tokens/dist/docs/products/tokens.json b/packages/tokens/dist/docs/products/tokens.json index 93e5200b0d8..7997ebd2714 100644 --- a/packages/tokens/dist/docs/products/tokens.json +++ b/packages/tokens/dist/docs/products/tokens.json @@ -4,10 +4,24 @@ "$type": "dimension", "$value": "3px", "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, "original": { "$type": "dimension", "$value": "3", "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, "key": "{border.radius.x-small}" }, "name": "token-border-radius-x-small", @@ -25,10 +39,24 @@ "$type": "dimension", "$value": "5px", "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, "original": { "$type": "dimension", "$value": "5", "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, "key": "{border.radius.small}" }, "name": "token-border-radius-small", @@ -46,10 +74,24 @@ "$type": "dimension", "$value": "6px", "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, "original": { "$type": "dimension", "$value": "6", "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, "key": "{border.radius.medium}" }, "name": "token-border-radius-medium", @@ -67,10 +109,24 @@ "$type": "dimension", "$value": "8px", "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, "original": { "$type": "dimension", "$value": "8", "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, "key": "{border.radius.large}" }, "name": "token-border-radius-large", @@ -83,15 +139,50 @@ "large" ] }, + { + "key": "{border.radius.rounded}", + "$type": "dimension", + "$value": "1000000000px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1000000000", + "unit": "px", + "key": "{border.radius.rounded}" + }, + "name": "token-border-radius-rounded", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "rounded" + ] + }, { "key": "{color.palette.blue-500}", "$type": "color", "$value": "#1c345f", "group": "palette", + "$modes": { + "default": "#1c345f", + "cds-g0": "#001141", + "cds-g10": "#001141", + "cds-g90": "#001141", + "cds-g100": "#001141" + }, "original": { "$type": "color", "$value": "#1c345f", "group": "palette", + "$modes": { + "default": "#1c345f", + "cds-g0": "{carbon.color.blue.100}", + "cds-g10": "{carbon.color.blue.100}", + "cds-g90": "{carbon.color.blue.100}", + "cds-g100": "{carbon.color.blue.100}" + }, "key": "{color.palette.blue-500}" }, "name": "token-color-palette-blue-500", @@ -109,10 +200,24 @@ "$type": "color", "$value": "#0046d1", "group": "palette", + "$modes": { + "default": "#0046d1", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#002d9c", + "cds-g100": "#002d9c" + }, "original": { "$type": "color", "$value": "#0046d1", "group": "palette", + "$modes": { + "default": "#0046d1", + "cds-g0": "{carbon.color.blue.80}", + "cds-g10": "{carbon.color.blue.80}", + "cds-g90": "{carbon.color.blue.80}", + "cds-g100": "{carbon.color.blue.80}" + }, "key": "{color.palette.blue-400}" }, "name": "token-color-palette-blue-400", @@ -130,10 +235,24 @@ "$type": "color", "$value": "#0c56e9", "group": "palette", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, "original": { "$type": "color", "$value": "#0c56e9", "group": "palette", + "$modes": { + "default": "#0c56e9", + "cds-g0": "{carbon.color.blue.70}", + "cds-g10": "{carbon.color.blue.70}", + "cds-g90": "{carbon.color.blue.70}", + "cds-g100": "{carbon.color.blue.70}" + }, "key": "{color.palette.blue-300}" }, "name": "token-color-palette-blue-300", @@ -151,10 +270,24 @@ "$type": "color", "$value": "#1060ff", "group": "palette", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, "original": { "$type": "color", "$value": "#1060ff", "group": "palette", + "$modes": { + "default": "#1060ff", + "cds-g0": "{carbon.color.blue.60}", + "cds-g10": "{carbon.color.blue.60}", + "cds-g90": "{carbon.color.blue.60}", + "cds-g100": "{carbon.color.blue.60}" + }, "key": "{color.palette.blue-200}" }, "name": "token-color-palette-blue-200", @@ -172,10 +305,24 @@ "$type": "color", "$value": "#cce3fe", "group": "palette", + "$modes": { + "default": "#cce3fe", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, "original": { "$type": "color", "$value": "#cce3fe", "group": "palette", + "$modes": { + "default": "#cce3fe", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.20}", + "cds-g100": "{carbon.color.blue.20}" + }, "key": "{color.palette.blue-100}" }, "name": "token-color-palette-blue-100", @@ -193,10 +340,24 @@ "$type": "color", "$value": "#f2f8ff", "group": "palette", + "$modes": { + "default": "#f2f8ff", + "cds-g0": "#edf5ff", + "cds-g10": "#edf5ff", + "cds-g90": "#edf5ff", + "cds-g100": "#edf5ff" + }, "original": { "$type": "color", "$value": "#f2f8ff", "group": "palette", + "$modes": { + "default": "#f2f8ff", + "cds-g0": "{carbon.color.blue.10}", + "cds-g10": "{carbon.color.blue.10}", + "cds-g90": "{carbon.color.blue.10}", + "cds-g100": "{carbon.color.blue.10}" + }, "key": "{color.palette.blue-50}" }, "name": "token-color-palette-blue-50", @@ -214,10 +375,24 @@ "$type": "color", "$value": "#42215b", "group": "palette", + "$modes": { + "default": "#42215b", + "cds-g0": "#31135e", + "cds-g10": "#31135e", + "cds-g90": "#31135e", + "cds-g100": "#31135e" + }, "original": { "$type": "color", "$value": "#42215b", "group": "palette", + "$modes": { + "default": "#42215b", + "cds-g0": "{carbon.color.purple.90}", + "cds-g10": "{carbon.color.purple.90}", + "cds-g90": "{carbon.color.purple.90}", + "cds-g100": "{carbon.color.purple.90}" + }, "key": "{color.palette.purple-500}" }, "name": "token-color-palette-purple-500", @@ -235,10 +410,24 @@ "$type": "color", "$value": "#7b00db", "group": "palette", + "$modes": { + "default": "#7b00db", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, "original": { "$type": "color", "$value": "#7b00db", "group": "palette", + "$modes": { + "default": "#7b00db", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, "key": "{color.palette.purple-400}" }, "name": "token-color-palette-purple-400", @@ -256,10 +445,24 @@ "$type": "color", "$value": "#911ced", "group": "palette", + "$modes": { + "default": "#911ced", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#8a3ffc", + "cds-g100": "#8a3ffc" + }, "original": { "$type": "color", "$value": "#911ced", "group": "palette", + "$modes": { + "default": "#911ced", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.60}", + "cds-g100": "{carbon.color.purple.60}" + }, "key": "{color.palette.purple-300}" }, "name": "token-color-palette-purple-300", @@ -277,10 +480,24 @@ "$type": "color", "$value": "#a737ff", "group": "palette", + "$modes": { + "default": "#a737ff", + "cds-g0": "#a56eff", + "cds-g10": "#a56eff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, "original": { "$type": "color", "$value": "#a737ff", "group": "palette", + "$modes": { + "default": "#a737ff", + "cds-g0": "{carbon.color.purple.50}", + "cds-g10": "{carbon.color.purple.50}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, "key": "{color.palette.purple-200}" }, "name": "token-color-palette-purple-200", @@ -298,10 +515,24 @@ "$type": "color", "$value": "#ead2fe", "group": "palette", + "$modes": { + "default": "#ead2fe", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, "original": { "$type": "color", "$value": "#ead2fe", "group": "palette", + "$modes": { + "default": "#ead2fe", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.20}" + }, "key": "{color.palette.purple-100}" }, "name": "token-color-palette-purple-100", @@ -319,10 +550,24 @@ "$type": "color", "$value": "#f9f2ff", "group": "palette", + "$modes": { + "default": "#f9f2ff", + "cds-g0": "#f6f2ff", + "cds-g10": "#f6f2ff", + "cds-g90": "#f6f2ff", + "cds-g100": "#f6f2ff" + }, "original": { "$type": "color", "$value": "#f9f2ff", "group": "palette", + "$modes": { + "default": "#f9f2ff", + "cds-g0": "{carbon.color.purple.10}", + "cds-g10": "{carbon.color.purple.10}", + "cds-g90": "{carbon.color.purple.10}", + "cds-g100": "{carbon.color.purple.10}" + }, "key": "{color.palette.purple-50}" }, "name": "token-color-palette-purple-50", @@ -340,10 +585,24 @@ "$type": "color", "$value": "#054220", "group": "palette", + "$modes": { + "default": "#054220", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#044317", + "cds-g100": "#044317" + }, "original": { "$type": "color", "$value": "#054220", "group": "palette", + "$modes": { + "default": "#054220", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.80}", + "cds-g100": "{carbon.color.green.80}" + }, "key": "{color.palette.green-500}" }, "name": "token-color-palette-green-500", @@ -361,10 +620,24 @@ "$type": "color", "$value": "#006619", "group": "palette", + "$modes": { + "default": "#006619", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, "original": { "$type": "color", "$value": "#006619", "group": "palette", + "$modes": { + "default": "#006619", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, "key": "{color.palette.green-400}" }, "name": "token-color-palette-green-400", @@ -382,10 +655,24 @@ "$type": "color", "$value": "#00781e", "group": "palette", + "$modes": { + "default": "#00781e", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#198038", + "cds-g100": "#198038" + }, "original": { "$type": "color", "$value": "#00781e", "group": "palette", + "$modes": { + "default": "#00781e", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.60}", + "cds-g100": "{carbon.color.green.60}" + }, "key": "{color.palette.green-300}" }, "name": "token-color-palette-green-300", @@ -403,10 +690,24 @@ "$type": "color", "$value": "#008a22", "group": "palette", + "$modes": { + "default": "#008a22", + "cds-g0": "#24a148", + "cds-g10": "#24a148", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, "original": { "$type": "color", "$value": "#008a22", "group": "palette", + "$modes": { + "default": "#008a22", + "cds-g0": "{carbon.color.green.50}", + "cds-g10": "{carbon.color.green.50}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, "key": "{color.palette.green-200}" }, "name": "token-color-palette-green-200", @@ -424,10 +725,24 @@ "$type": "color", "$value": "#cceeda", "group": "palette", + "$modes": { + "default": "#cceeda", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, "original": { "$type": "color", "$value": "#cceeda", "group": "palette", + "$modes": { + "default": "#cceeda", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, "key": "{color.palette.green-100}" }, "name": "token-color-palette-green-100", @@ -445,10 +760,24 @@ "$type": "color", "$value": "#f2fbf6", "group": "palette", + "$modes": { + "default": "#f2fbf6", + "cds-g0": "#defbe6", + "cds-g10": "#defbe6", + "cds-g90": "#defbe6", + "cds-g100": "#defbe6" + }, "original": { "$type": "color", "$value": "#f2fbf6", "group": "palette", + "$modes": { + "default": "#f2fbf6", + "cds-g0": "{carbon.color.green.10}", + "cds-g10": "{carbon.color.green.10}", + "cds-g90": "{carbon.color.green.10}", + "cds-g100": "{carbon.color.green.10}" + }, "key": "{color.palette.green-50}" }, "name": "token-color-palette-green-50", @@ -466,10 +795,24 @@ "$type": "color", "$value": "#542800", "group": "palette", + "$modes": { + "default": "#542800", + "cds-g0": "#3e1a00", + "cds-g10": "#3e1a00", + "cds-g90": "#3e1a00", + "cds-g100": "#3e1a00" + }, "original": { "$type": "color", "$value": "#542800", "group": "palette", + "$modes": { + "default": "#542800", + "cds-g0": "{carbon.color.orange.90}", + "cds-g10": "{carbon.color.orange.90}", + "cds-g90": "{carbon.color.orange.90}", + "cds-g100": "{carbon.color.orange.90}" + }, "key": "{color.palette.amber-500}" }, "name": "token-color-palette-amber-500", @@ -487,10 +830,24 @@ "$type": "color", "$value": "#803d00", "group": "palette", + "$modes": { + "default": "#803d00", + "cds-g0": "#5e2900", + "cds-g10": "#5e2900", + "cds-g90": "#5e2900", + "cds-g100": "#5e2900" + }, "original": { "$type": "color", "$value": "#803d00", "group": "palette", + "$modes": { + "default": "#803d00", + "cds-g0": "{carbon.color.orange.80}", + "cds-g10": "{carbon.color.orange.80}", + "cds-g90": "{carbon.color.orange.80}", + "cds-g100": "{carbon.color.orange.80}" + }, "key": "{color.palette.amber-400}" }, "name": "token-color-palette-amber-400", @@ -508,10 +865,24 @@ "$type": "color", "$value": "#9e4b00", "group": "palette", + "$modes": { + "default": "#9e4b00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, "original": { "$type": "color", "$value": "#9e4b00", "group": "palette", + "$modes": { + "default": "#9e4b00", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, "key": "{color.palette.amber-300}" }, "name": "token-color-palette-amber-300", @@ -529,10 +900,24 @@ "$type": "color", "$value": "#bb5a00", "group": "palette", + "$modes": { + "default": "#bb5a00", + "cds-g0": "#ba4e00", + "cds-g10": "#ba4e00", + "cds-g90": "#ba4e00", + "cds-g100": "#ba4e00" + }, "original": { "$type": "color", "$value": "#bb5a00", "group": "palette", + "$modes": { + "default": "#bb5a00", + "cds-g0": "{carbon.color.orange.60}", + "cds-g10": "{carbon.color.orange.60}", + "cds-g90": "{carbon.color.orange.60}", + "cds-g100": "{carbon.color.orange.60}" + }, "key": "{color.palette.amber-200}" }, "name": "token-color-palette-amber-200", @@ -550,10 +935,24 @@ "$type": "color", "$value": "#fbeabf", "group": "palette", + "$modes": { + "default": "#fbeabf", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, "original": { "$type": "color", "$value": "#fbeabf", "group": "palette", + "$modes": { + "default": "#fbeabf", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, "key": "{color.palette.amber-100}" }, "name": "token-color-palette-amber-100", @@ -571,10 +970,24 @@ "$type": "color", "$value": "#fff9e8", "group": "palette", + "$modes": { + "default": "#fff9e8", + "cds-g0": "#fff2e8", + "cds-g10": "#fff2e8", + "cds-g90": "#fff2e8", + "cds-g100": "#fff2e8" + }, "original": { "$type": "color", "$value": "#fff9e8", "group": "palette", + "$modes": { + "default": "#fff9e8", + "cds-g0": "{carbon.color.orange.10}", + "cds-g10": "{carbon.color.orange.10}", + "cds-g90": "{carbon.color.orange.10}", + "cds-g100": "{carbon.color.orange.10}" + }, "key": "{color.palette.amber-50}" }, "name": "token-color-palette-amber-50", @@ -592,10 +1005,24 @@ "$type": "color", "$value": "#51130a", "group": "palette", + "$modes": { + "default": "#51130a", + "cds-g0": "#520408", + "cds-g10": "#520408", + "cds-g90": "#520408", + "cds-g100": "#520408" + }, "original": { "$type": "color", "$value": "#51130a", "group": "palette", + "$modes": { + "default": "#51130a", + "cds-g0": "{carbon.color.red.90}", + "cds-g10": "{carbon.color.red.90}", + "cds-g90": "{carbon.color.red.90}", + "cds-g100": "{carbon.color.red.90}" + }, "key": "{color.palette.red-500}" }, "name": "token-color-palette-red-500", @@ -613,10 +1040,24 @@ "$type": "color", "$value": "#940004", "group": "palette", + "$modes": { + "default": "#940004", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#750e13", + "cds-g100": "#750e13" + }, "original": { "$type": "color", "$value": "#940004", "group": "palette", + "$modes": { + "default": "#940004", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.80}", + "cds-g100": "{carbon.color.red.80}" + }, "key": "{color.palette.red-400}" }, "name": "token-color-palette-red-400", @@ -634,10 +1075,24 @@ "$type": "color", "$value": "#c00005", "group": "palette", + "$modes": { + "default": "#c00005", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, "original": { "$type": "color", "$value": "#c00005", "group": "palette", + "$modes": { + "default": "#c00005", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, "key": "{color.palette.red-300}" }, "name": "token-color-palette-red-300", @@ -655,10 +1110,24 @@ "$type": "color", "$value": "#e52228", "group": "palette", + "$modes": { + "default": "#e52228", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, "original": { "$type": "color", "$value": "#e52228", "group": "palette", + "$modes": { + "default": "#e52228", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.60}", + "cds-g100": "{carbon.color.red.60}" + }, "key": "{color.palette.red-200}" }, "name": "token-color-palette-red-200", @@ -676,10 +1145,24 @@ "$type": "color", "$value": "#fbd4d4", "group": "palette", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, "original": { "$type": "color", "$value": "#fbd4d4", "group": "palette", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, "key": "{color.palette.red-100}" }, "name": "token-color-palette-red-100", @@ -697,10 +1180,24 @@ "$type": "color", "$value": "#fff5f5", "group": "palette", + "$modes": { + "default": "#fff5f5", + "cds-g0": "#fff1f1", + "cds-g10": "#fff1f1", + "cds-g90": "#fff1f1", + "cds-g100": "#fff1f1" + }, "original": { "$type": "color", "$value": "#fff5f5", "group": "palette", + "$modes": { + "default": "#fff5f5", + "cds-g0": "{carbon.color.red.10}", + "cds-g10": "{carbon.color.red.10}", + "cds-g90": "{carbon.color.red.10}", + "cds-g100": "{carbon.color.red.10}" + }, "key": "{color.palette.red-50}" }, "name": "token-color-palette-red-50", @@ -718,10 +1215,24 @@ "$type": "color", "$value": "#0c0c0e", "group": "palette", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", "$value": "#0c0c0e", "group": "palette", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "{carbon.color.gray.100}", + "cds-g10": "{carbon.color.gray.100}", + "cds-g90": "{carbon.color.gray.100}", + "cds-g100": "{carbon.color.gray.100}" + }, "key": "{color.palette.neutral-700}" }, "name": "token-color-palette-neutral-700", @@ -739,10 +1250,24 @@ "$type": "color", "$value": "#3b3d45", "group": "palette", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#393939", + "cds-g100": "#393939" + }, "original": { "$type": "color", "$value": "#3b3d45", "group": "palette", + "$modes": { + "default": "#3b3d45", + "cds-g0": "{carbon.color.gray.80}", + "cds-g10": "{carbon.color.gray.80}", + "cds-g90": "{carbon.color.gray.80}", + "cds-g100": "{carbon.color.gray.80}" + }, "key": "{color.palette.neutral-600}" }, "name": "token-color-palette-neutral-600", @@ -760,10 +1285,24 @@ "$type": "color", "$value": "#656a76", "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, "original": { "$type": "color", "$value": "#656a76", "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": "{carbon.color.gray.70}", + "cds-g10": "{carbon.color.gray.70}", + "cds-g90": "{carbon.color.gray.70}", + "cds-g100": "{carbon.color.gray.70}" + }, "key": "{color.palette.neutral-500}" }, "name": "token-color-palette-neutral-500", @@ -781,10 +1320,24 @@ "$type": "color", "$value": "#8c909c", "group": "palette", + "$modes": { + "default": "#8c909c", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, "original": { "$type": "color", "$value": "#8c909c", "group": "palette", + "$modes": { + "default": "#8c909c", + "cds-g0": "{carbon.color.gray.50}", + "cds-g10": "{carbon.color.gray.50}", + "cds-g90": "{carbon.color.gray.50}", + "cds-g100": "{carbon.color.gray.50}" + }, "key": "{color.palette.neutral-400}" }, "name": "token-color-palette-neutral-400", @@ -802,10 +1355,24 @@ "$type": "color", "$value": "#c2c5cb", "group": "palette", + "$modes": { + "default": "#c2c5cb", + "cds-g0": "#a8a8a8", + "cds-g10": "#a8a8a8", + "cds-g90": "#a8a8a8", + "cds-g100": "#a8a8a8" + }, "original": { "$type": "color", "$value": "#c2c5cb", "group": "palette", + "$modes": { + "default": "#c2c5cb", + "cds-g0": "{carbon.color.gray.40}", + "cds-g10": "{carbon.color.gray.40}", + "cds-g90": "{carbon.color.gray.40}", + "cds-g100": "{carbon.color.gray.40}" + }, "key": "{color.palette.neutral-300}" }, "name": "token-color-palette-neutral-300", @@ -823,10 +1390,24 @@ "$type": "color", "$value": "#dedfe3", "group": "palette", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, "original": { "$type": "color", "$value": "#dedfe3", "group": "palette", + "$modes": { + "default": "#dedfe3", + "cds-g0": "{carbon.color.gray.30}", + "cds-g10": "{carbon.color.gray.30}", + "cds-g90": "{carbon.color.gray.30}", + "cds-g100": "{carbon.color.gray.30}" + }, "key": "{color.palette.neutral-200}" }, "name": "token-color-palette-neutral-200", @@ -844,10 +1425,24 @@ "$type": "color", "$value": "#f1f2f3", "group": "palette", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#e0e0e0", + "cds-g100": "#e0e0e0" + }, "original": { "$type": "color", "$value": "#f1f2f3", "group": "palette", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "{carbon.color.gray.20}", + "cds-g10": "{carbon.color.gray.20}", + "cds-g90": "{carbon.color.gray.20}", + "cds-g100": "{carbon.color.gray.20}" + }, "key": "{color.palette.neutral-100}" }, "name": "token-color-palette-neutral-100", @@ -865,10 +1460,24 @@ "$type": "color", "$value": "#fafafa", "group": "palette", + "$modes": { + "default": "#fafafa", + "cds-g0": "#f4f4f4", + "cds-g10": "#f4f4f4", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { "$type": "color", "$value": "#fafafa", "group": "palette", + "$modes": { + "default": "#fafafa", + "cds-g0": "{carbon.color.gray.10}", + "cds-g10": "{carbon.color.gray.10}", + "cds-g90": "{carbon.color.gray.10}", + "cds-g100": "{carbon.color.gray.10}" + }, "key": "{color.palette.neutral-50}" }, "name": "token-color-palette-neutral-50", @@ -886,10 +1495,24 @@ "$type": "color", "$value": "#ffffff", "group": "palette", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, "original": { "$type": "color", "$value": "#ffffff", "group": "palette", + "$modes": { + "default": "#ffffff", + "cds-g0": "{carbon.color.white.0}", + "cds-g10": "{carbon.color.white.0}", + "cds-g90": "{carbon.color.white.0}", + "cds-g100": "{carbon.color.white.0}" + }, "key": "{color.palette.neutral-0}" }, "name": "token-color-palette-neutral-0", @@ -908,11 +1531,73 @@ "$value": "#3b3d4566", "alpha": "0.4", "group": "palette", + "$modes": { + "default": "#3b3d45", + "cds-g0": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#6f6f6f", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, "original": { "$type": "color", "$value": "{color.palette.neutral-600}", "alpha": "0.4", "group": "palette", + "$modes": { + "default": "{color.palette.neutral-600}", + "cds-g0": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.60}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, "key": "{color.palette.alpha-300}" }, "name": "token-color-palette-alpha-300", @@ -931,11 +1616,73 @@ "$value": "#656a7633", "alpha": "0.2", "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": { + "$value": "#c6c6c6", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#e0e0e0", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#6f6f6f", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#525252", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, "original": { "$type": "color", "$value": "{color.palette.neutral-500}", "alpha": "0.2", "group": "palette", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": { + "$value": "{carbon.color.gray.30}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.20}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.60}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.70}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, "key": "{color.palette.alpha-200}" }, "name": "token-color-palette-alpha-200", @@ -954,11 +1701,73 @@ "$value": "#656a761a", "alpha": "0.1", "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": { + "$value": "#e0e0e0", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#c6c6c6", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#525252", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#393939", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, "original": { "$type": "color", "$value": "{color.palette.neutral-500}", "alpha": "0.1", "group": "palette", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": { + "$value": "{carbon.color.gray.20}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.30}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.70}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.80}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, "key": "{color.palette.alpha-100}" }, "name": "token-color-palette-alpha-100", @@ -976,10 +1785,24 @@ "$type": "color", "$value": "#656a7633", "group": "semantic", + "$modes": { + "default": "#656a7633", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, "original": { "$type": "color", "$value": "{color.palette.alpha-200}", "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-200}", + "cds-g0": "{carbon.themes.white.borderSubtle03}", + "cds-g10": "{carbon.themes.g10.borderSubtle03}", + "cds-g90": "{carbon.themes.g90.borderSubtle03}", + "cds-g100": "{carbon.themes.g100.borderSubtle03}" + }, "key": "{color.border.primary}" }, "name": "token-color-border-primary", @@ -997,10 +1820,24 @@ "$type": "color", "$value": "#656a761a", "group": "semantic", + "$modes": { + "default": "#656a761a", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, "original": { "$type": "color", "$value": "{color.palette.alpha-100}", "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-100}", + "cds-g0": "{carbon.themes.white.borderSubtle00}", + "cds-g10": "{carbon.themes.g10.borderSubtle00}", + "cds-g90": "{carbon.themes.g90.borderSubtle00}", + "cds-g100": "{carbon.themes.g100.borderSubtle00}" + }, "key": "{color.border.faint}" }, "name": "token-color-border-faint", @@ -1018,10 +1855,24 @@ "$type": "color", "$value": "#3b3d4566", "group": "semantic", + "$modes": { + "default": "#3b3d4566", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, "original": { "$type": "color", "$value": "{color.palette.alpha-300}", "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-300}", + "cds-g0": "{carbon.themes.white.borderStrong01}", + "cds-g10": "{carbon.themes.g10.borderStrong01}", + "cds-g90": "{carbon.themes.g90.borderStrong01}", + "cds-g100": "{carbon.themes.g100.borderStrong01}" + }, "key": "{color.border.strong}" }, "name": "token-color-border-strong", @@ -1039,10 +1890,24 @@ "$type": "color", "$value": "#cce3fe", "group": "semantic", + "$modes": { + "default": "#cce3fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, "original": { "$type": "color", "$value": "{color.palette.blue-100}", "group": "semantic", + "$modes": { + "default": "{color.palette.blue-100}", + "cds-g0": "{carbon.themes.white.borderInteractive}", + "cds-g10": "{carbon.themes.g10.borderInteractive}", + "cds-g90": "{carbon.themes.g90.borderInteractive}", + "cds-g100": "{carbon.themes.g100.borderInteractive}" + }, "key": "{color.border.action}" }, "name": "token-color-border-action", @@ -1060,10 +1925,24 @@ "$type": "color", "$value": "#ead2fe", "group": "semantic", + "$modes": { + "default": "#ead2fe", + "cds-g0": "#be95ff", + "cds-g10": "#be95ff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, "original": { "$type": "color", "$value": "{color.palette.purple-100}", "group": "semantic", + "$modes": { + "default": "{color.palette.purple-100}", + "cds-g0": "{carbon.color.purple.40}", + "cds-g10": "{carbon.color.purple.40}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, "key": "{color.border.highlight}" }, "name": "token-color-border-highlight", @@ -1081,10 +1960,24 @@ "$type": "color", "$value": "#cceeda", "group": "semantic", + "$modes": { + "default": "#cceeda", + "cds-g0": "#42be65", + "cds-g10": "#42be65", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, "original": { "$type": "color", "$value": "{color.palette.green-100}", "group": "semantic", + "$modes": { + "default": "{color.palette.green-100}", + "cds-g0": "{carbon.color.green.40}", + "cds-g10": "{carbon.color.green.40}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, "key": "{color.border.success}" }, "name": "token-color-border-success", @@ -1102,10 +1995,24 @@ "$type": "color", "$value": "#fbeabf", "group": "semantic", + "$modes": { + "default": "#fbeabf", + "cds-g0": "#d2a106", + "cds-g10": "#d2a106", + "cds-g90": "#b28600", + "cds-g100": "#b28600" + }, "original": { "$type": "color", "$value": "{color.palette.amber-100}", "group": "semantic", + "$modes": { + "default": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.yellow.40}", + "cds-g10": "{carbon.color.yellow.40}", + "cds-g90": "{carbon.color.yellow.50}", + "cds-g100": "{carbon.color.yellow.50}" + }, "key": "{color.border.warning}" }, "name": "token-color-border-warning", @@ -1123,10 +2030,24 @@ "$type": "color", "$value": "#fbd4d4", "group": "semantic", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "#ff8389", + "cds-g10": "#ff8389", + "cds-g90": "#fa4d56", + "cds-g100": "#fa4d56" + }, "original": { "$type": "color", "$value": "{color.palette.red-100}", "group": "semantic", + "$modes": { + "default": "{color.palette.red-100}", + "cds-g0": "{carbon.color.red.40}", + "cds-g10": "{carbon.color.red.40}", + "cds-g90": "{carbon.color.red.50}", + "cds-g100": "{carbon.color.red.50}" + }, "key": "{color.border.critical}" }, "name": "token-color-border-critical", @@ -1144,10 +2065,24 @@ "$type": "color", "$value": "#0c56e9", "group": "semantic", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", "$value": "{color.palette.blue-300}", "group": "semantic", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, "key": "{color.focus.action.internal}" }, "name": "token-color-focus-action-internal", @@ -1167,11 +2102,25 @@ "$value": "#5990ff", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, "original": { "$type": "color", "$value": "#5990ff", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, "key": "{color.focus.action.external}" }, "name": "token-color-focus-action-external", @@ -1190,10 +2139,24 @@ "$type": "color", "$value": "#c00005", "group": "semantic", + "$modes": { + "default": "#c00005", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", "$value": "{color.palette.red-300}", "group": "semantic", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, "key": "{color.focus.critical.internal}" }, "name": "token-color-focus-critical-internal", @@ -1213,11 +2176,25 @@ "$value": "#dd7578", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#dd7578", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, "original": { "$type": "color", "$value": "#dd7578", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#dd7578", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, "key": "{color.focus.critical.external}" }, "name": "token-color-focus-critical-external", @@ -1236,10 +2213,24 @@ "$type": "color", "$value": "#0c0c0e", "group": "semantic", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-700}", "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, "key": "{color.foreground.strong}" }, "name": "token-color-foreground-strong", @@ -1257,10 +2248,24 @@ "$type": "color", "$value": "#3b3d45", "group": "semantic", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-600}", "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-600}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, "key": "{color.foreground.primary}" }, "name": "token-color-foreground-primary", @@ -1278,10 +2283,24 @@ "$type": "color", "$value": "#656a76", "group": "semantic", + "$modes": { + "default": "#656a76", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-500}", "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, "key": "{color.foreground.faint}" }, "name": "token-color-foreground-faint", @@ -1299,10 +2318,24 @@ "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-0}", "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, "key": "{color.foreground.high-contrast}" }, "name": "token-color-foreground-high-contrast", @@ -1320,10 +2353,24 @@ "$type": "color", "$value": "#8c909c", "group": "semantic", + "$modes": { + "default": "#8c909c", + "cds-g0": "rgba(22, 22, 22, 0.25)", + "cds-g10": "rgba(22, 22, 22, 0.25)", + "cds-g90": "rgba(244, 244, 244, 0.25)", + "cds-g100": "rgba(244, 244, 244, 0.25)" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-400}", "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textDisabled}", + "cds-g10": "{carbon.themes.g10.textDisabled}", + "cds-g90": "{carbon.themes.g90.textDisabled}", + "cds-g100": "{carbon.themes.g100.textDisabled}" + }, "key": "{color.foreground.disabled}" }, "name": "token-color-foreground-disabled", @@ -1341,10 +2388,24 @@ "$type": "color", "$value": "#1060ff", "group": "semantic", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#78a9ff", + "cds-g100": "#78a9ff" + }, "original": { "$type": "color", "$value": "{color.palette.blue-200}", "group": "semantic", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.white.linkPrimary}", + "cds-g10": "{carbon.themes.g10.linkPrimary}", + "cds-g90": "{carbon.themes.g90.linkPrimary}", + "cds-g100": "{carbon.themes.g100.linkPrimary}" + }, "key": "{color.foreground.action}" }, "name": "token-color-foreground-action", @@ -1362,10 +2423,24 @@ "$type": "color", "$value": "#0c56e9", "group": "semantic", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, "original": { "$type": "color", "$value": "{color.palette.blue-300}", "group": "semantic", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, "key": "{color.foreground.action-hover}" }, "name": "token-color-foreground-action-hover", @@ -1383,10 +2458,24 @@ "$type": "color", "$value": "#0046d1", "group": "semantic", + "$modes": { + "default": "#0046d1", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, "original": { "$type": "color", "$value": "{color.palette.blue-400}", "group": "semantic", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, "key": "{color.foreground.action-active}" }, "name": "token-color-foreground-action-active", @@ -1404,10 +2493,24 @@ "$type": "color", "$value": "#a737ff", "group": "semantic", + "$modes": { + "default": "#a737ff", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, "original": { "$type": "color", "$value": "{color.palette.purple-200}", "group": "semantic", + "$modes": { + "default": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, "key": "{color.foreground.highlight}" }, "name": "token-color-foreground-highlight", @@ -1425,10 +2528,24 @@ "$type": "color", "$value": "#911ced", "group": "semantic", + "$modes": { + "default": "#911ced", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#d4bbff", + "cds-g100": "#d4bbff" + }, "original": { "$type": "color", "$value": "{color.palette.purple-300}", "group": "semantic", + "$modes": { + "default": "{color.palette.purple-300}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.30}", + "cds-g100": "{carbon.color.purple.30}" + }, "key": "{color.foreground.highlight-on-surface}" }, "name": "token-color-foreground-highlight-on-surface", @@ -1446,10 +2563,24 @@ "$type": "color", "$value": "#42215b", "group": "semantic", + "$modes": { + "default": "#42215b", + "cds-g0": "#491d8b", + "cds-g10": "#491d8b", + "cds-g90": "#e8daff", + "cds-g100": "#d4bbff" + }, "original": { "$type": "color", "$value": "{color.palette.purple-500}", "group": "semantic", + "$modes": { + "default": "{color.palette.purple-500}", + "cds-g0": "{carbon.color.purple.80}", + "cds-g10": "{carbon.color.purple.80}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.30}" + }, "key": "{color.foreground.highlight-high-contrast}" }, "name": "token-color-foreground-highlight-high-contrast", @@ -1467,10 +2598,24 @@ "$type": "color", "$value": "#008a22", "group": "semantic", + "$modes": { + "default": "#008a22", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#42be65", + "cds-g100": "#42be65" + }, "original": { "$type": "color", "$value": "{color.palette.green-200}", "group": "semantic", + "$modes": { + "default": "{color.palette.green-200}", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.40}", + "cds-g100": "{carbon.color.green.40}" + }, "key": "{color.foreground.success}" }, "name": "token-color-foreground-success", @@ -1488,10 +2633,24 @@ "$type": "color", "$value": "#00781e", "group": "semantic", + "$modes": { + "default": "#00781e", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#6fdc8c", + "cds-g100": "#6fdc8c" + }, "original": { "$type": "color", "$value": "{color.palette.green-300}", "group": "semantic", + "$modes": { + "default": "{color.palette.green-300}", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.30}", + "cds-g100": "{carbon.color.green.30}" + }, "key": "{color.foreground.success-on-surface}" }, "name": "token-color-foreground-success-on-surface", @@ -1509,10 +2668,24 @@ "$type": "color", "$value": "#054220", "group": "semantic", + "$modes": { + "default": "#054220", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, "original": { "$type": "color", "$value": "{color.palette.green-500}", "group": "semantic", + "$modes": { + "default": "{color.palette.green-500}", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, "key": "{color.foreground.success-high-contrast}" }, "name": "token-color-foreground-success-high-contrast", @@ -1530,10 +2703,24 @@ "$type": "color", "$value": "#bb5a00", "group": "semantic", + "$modes": { + "default": "#bb5a00", + "cds-g0": "#8e6a00", + "cds-g10": "#8e6a00", + "cds-g90": "#d2a106", + "cds-g100": "#d2a106" + }, "original": { "$type": "color", "$value": "{color.palette.amber-200}", "group": "semantic", + "$modes": { + "default": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.yellow.60}", + "cds-g10": "{carbon.color.yellow.60}", + "cds-g90": "{carbon.color.yellow.40}", + "cds-g100": "{carbon.color.yellow.40}" + }, "key": "{color.foreground.warning}" }, "name": "token-color-foreground-warning", @@ -1551,10 +2738,24 @@ "$type": "color", "$value": "#9e4b00", "group": "semantic", + "$modes": { + "default": "#9e4b00", + "cds-g0": "#684e00", + "cds-g10": "#684e00", + "cds-g90": "#f1c21b", + "cds-g100": "#f1c21b" + }, "original": { "$type": "color", "$value": "{color.palette.amber-300}", "group": "semantic", + "$modes": { + "default": "{color.palette.amber-300}", + "cds-g0": "{carbon.color.yellow.70}", + "cds-g10": "{carbon.color.yellow.70}", + "cds-g90": "{carbon.color.yellow.30}", + "cds-g100": "{carbon.color.yellow.30}" + }, "key": "{color.foreground.warning-on-surface}" }, "name": "token-color-foreground-warning-on-surface", @@ -1572,10 +2773,24 @@ "$type": "color", "$value": "#542800", "group": "semantic", + "$modes": { + "default": "#542800", + "cds-g0": "#483700", + "cds-g10": "#483700", + "cds-g90": "#fddc69", + "cds-g100": "#fddc69" + }, "original": { "$type": "color", "$value": "{color.palette.amber-500}", "group": "semantic", + "$modes": { + "default": "{color.palette.amber-500}", + "cds-g0": "{carbon.color.yellow.80}", + "cds-g10": "{carbon.color.yellow.80}", + "cds-g90": "{carbon.color.yellow.20}", + "cds-g100": "{carbon.color.yellow.20}" + }, "key": "{color.foreground.warning-high-contrast}" }, "name": "token-color-foreground-warning-high-contrast", @@ -1593,10 +2808,24 @@ "$type": "color", "$value": "#e52228", "group": "semantic", + "$modes": { + "default": "#e52228", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#ff8389", + "cds-g100": "#ff8389" + }, "original": { "$type": "color", "$value": "{color.palette.red-200}", "group": "semantic", + "$modes": { + "default": "{color.palette.red-200}", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.40}", + "cds-g100": "{carbon.color.red.40}" + }, "key": "{color.foreground.critical}" }, "name": "token-color-foreground-critical", @@ -1614,10 +2843,24 @@ "$type": "color", "$value": "#c00005", "group": "semantic", + "$modes": { + "default": "#c00005", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffb3b8", + "cds-g100": "#ffb3b8" + }, "original": { "$type": "color", "$value": "{color.palette.red-300}", "group": "semantic", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.30}", + "cds-g100": "{carbon.color.red.30}" + }, "key": "{color.foreground.critical-on-surface}" }, "name": "token-color-foreground-critical-on-surface", @@ -1635,10 +2878,24 @@ "$type": "color", "$value": "#51130a", "group": "semantic", + "$modes": { + "default": "#51130a", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, "original": { "$type": "color", "$value": "{color.palette.red-500}", "group": "semantic", + "$modes": { + "default": "{color.palette.red-500}", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, "key": "{color.foreground.critical-high-contrast}" }, "name": "token-color-foreground-critical-high-contrast", @@ -1656,10 +2913,24 @@ "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-0}", "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, "key": "{color.page.primary}" }, "name": "token-color-page-primary", @@ -1677,10 +2948,24 @@ "$type": "color", "$value": "#fafafa", "group": "semantic", + "$modes": { + "default": "#fafafa", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-50}", "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, "key": "{color.page.faint}" }, "name": "token-color-page-faint", @@ -1698,10 +2983,24 @@ "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-0}", "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.primary}" }, "name": "token-color-surface-primary", @@ -1719,10 +3018,24 @@ "$type": "color", "$value": "#fafafa", "group": "semantic", + "$modes": { + "default": "#fafafa", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-50}", "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.faint}" }, "name": "token-color-surface-faint", @@ -1740,10 +3053,24 @@ "$type": "color", "$value": "#f1f2f3", "group": "semantic", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-100}", "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerAccent01}", + "cds-g10": "{carbon.themes.g10.layerAccent01}", + "cds-g90": "{carbon.themes.g90.layerAccent01}", + "cds-g100": "{carbon.themes.g100.layerAccent01}" + }, "key": "{color.surface.strong}" }, "name": "token-color-surface-strong", @@ -1756,15 +3083,64 @@ "strong" ] }, + { + "key": "{color.surface.high-contrast}", + "$type": "color", + "$value": "#0c0c0e", + "group": "semantic", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-700}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "key": "{color.surface.high-contrast}" + }, + "name": "token-color-surface-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "high-contrast" + ] + }, { "key": "{color.surface.interactive}", "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-0}", "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.interactive}" }, "name": "token-color-surface-interactive", @@ -1782,10 +3158,24 @@ "$type": "color", "$value": "#f1f2f3", "group": "semantic", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "#e8e8e8", + "cds-g10": "#e8e8e8", + "cds-g90": "#474747", + "cds-g100": "#333333" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-100}", "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerHover01}", + "cds-g10": "{carbon.themes.g10.layerHover01}", + "cds-g90": "{carbon.themes.g90.layerHover01}", + "cds-g100": "{carbon.themes.g100.layerHover01}" + }, "key": "{color.surface.interactive-hover}" }, "name": "token-color-surface-interactive-hover", @@ -1803,10 +3193,24 @@ "$type": "color", "$value": "#dedfe3", "group": "semantic", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-200}", "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.white.layerActive01}", + "cds-g10": "{carbon.themes.g10.layerActive01}", + "cds-g90": "{carbon.themes.g90.layerActive01}", + "cds-g100": "{carbon.themes.g100.layerActive01}" + }, "key": "{color.surface.interactive-active}" }, "name": "token-color-surface-interactive-active", @@ -1824,10 +3228,24 @@ "$type": "color", "$value": "#fafafa", "group": "semantic", + "$modes": { + "default": "#fafafa", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-50}", "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.color.gray.30}", + "cds-g10": "{carbon.color.gray.30}", + "cds-g90": "{carbon.color.gray.60}", + "cds-g100": "{carbon.color.gray.70}" + }, "key": "{color.surface.interactive-disabled}" }, "name": "token-color-surface-interactive-disabled", @@ -1845,10 +3263,24 @@ "$type": "color", "$value": "#f2f8ff", "group": "semantic", + "$modes": { + "default": "#f2f8ff", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0f62fe", + "cds-g100": "#0043ce" + }, "original": { "$type": "color", "$value": "{color.palette.blue-50}", "group": "semantic", + "$modes": { + "default": "{color.palette.blue-50}", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.60}", + "cds-g100": "{carbon.color.blue.70}" + }, "key": "{color.surface.action}" }, "name": "token-color-surface-action", @@ -1866,10 +3298,24 @@ "$type": "color", "$value": "#f9f2ff", "group": "semantic", + "$modes": { + "default": "#f9f2ff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, "original": { "$type": "color", "$value": "{color.palette.purple-50}", "group": "semantic", + "$modes": { + "default": "{color.palette.purple-50}", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, "key": "{color.surface.highlight}" }, "name": "token-color-surface-highlight", @@ -1887,10 +3333,24 @@ "$type": "color", "$value": "#f2fbf6", "group": "semantic", + "$modes": { + "default": "#f2fbf6", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, "original": { "$type": "color", "$value": "{color.palette.green-50}", "group": "semantic", + "$modes": { + "default": "{color.palette.green-50}", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, "key": "{color.surface.success}" }, "name": "token-color-surface-success", @@ -1908,10 +3368,24 @@ "$type": "color", "$value": "#fff9e8", "group": "semantic", + "$modes": { + "default": "#fff9e8", + "cds-g0": "#fcf4d6", + "cds-g10": "#fcf4d6", + "cds-g90": "#684e00", + "cds-g100": "#684e00" + }, "original": { "$type": "color", "$value": "{color.palette.amber-50}", "group": "semantic", + "$modes": { + "default": "{color.palette.amber-50}", + "cds-g0": "{carbon.color.yellow.10}", + "cds-g10": "{carbon.color.yellow.10}", + "cds-g90": "{carbon.color.yellow.70}", + "cds-g100": "{carbon.color.yellow.70}" + }, "key": "{color.surface.warning}" }, "name": "token-color-surface-warning", @@ -1929,10 +3403,24 @@ "$type": "color", "$value": "#fff5f5", "group": "semantic", + "$modes": { + "default": "#fff5f5", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, "original": { "$type": "color", "$value": "{color.palette.red-50}", "group": "semantic", + "$modes": { + "default": "{color.palette.red-50}", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, "key": "{color.surface.critical}" }, "name": "token-color-surface-critical", @@ -3104,12 +4592,26 @@ "$type": "color", "$value": "#000000", "group": "branding", - "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault radar would not work", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work", "original": { "$type": "color", "$value": "#000", "group": "branding", - "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault radar would not work", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work", "key": "{color.vault-radar.brand-alt}" }, "name": "token-color-vault-radar-brand-alt", @@ -3305,11 +4807,25 @@ "group": "branding", "$type": "color", "$value": "#000000", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work", "original": { "group": "branding", "$type": "color", "$value": "#000", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work", "key": "{color.vault-secrets.brand-alt}" }, @@ -3506,11 +5022,25 @@ "$type": "color", "$value": "#000000", "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work", "original": { "$type": "color", "$value": "#000", "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work", "key": "{color.vault.brand-alt}" }, @@ -3862,8 +5392,22 @@ { "key": "{elevation.inset.box-shadow}", "$value": "inset 0px 1px 2px 1px #656a761a", + "$modes": { + "default": "inset 0px 1px 2px 1px #656a761a", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "original": { "$value": "{elevation.inset.box-shadow-01}", + "$modes": { + "default": "{elevation.inset.box-shadow-01}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "key": "{elevation.inset.box-shadow}" }, "name": "token-elevation-inset-box-shadow", @@ -3879,8 +5423,22 @@ { "key": "{elevation.low.box-shadow}", "$value": "0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d", + "$modes": { + "default": "0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "original": { "$value": "{elevation.low.box-shadow-01}, {elevation.low.box-shadow-02}", + "$modes": { + "default": "{elevation.low.box-shadow-01}, {elevation.low.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "key": "{elevation.low.box-shadow}" }, "name": "token-elevation-low-box-shadow", @@ -3896,8 +5454,22 @@ { "key": "{elevation.mid.box-shadow}", "$value": "0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633", + "$modes": { + "default": "0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "original": { "$value": "{elevation.mid.box-shadow-01}, {elevation.mid.box-shadow-02}", + "$modes": { + "default": "{elevation.mid.box-shadow-01}, {elevation.mid.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "key": "{elevation.mid.box-shadow}" }, "name": "token-elevation-mid-box-shadow", @@ -3913,8 +5485,22 @@ { "key": "{elevation.high.box-shadow}", "$value": "0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633", + "$modes": { + "default": "0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "original": { "$value": "{elevation.high.box-shadow-01}, {elevation.high.box-shadow-02}", + "$modes": { + "default": "{elevation.high.box-shadow-01}, {elevation.high.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "key": "{elevation.high.box-shadow}" }, "name": "token-elevation-high-box-shadow", @@ -3930,8 +5516,22 @@ { "key": "{elevation.higher.box-shadow}", "$value": "0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640", + "$modes": { + "default": "0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "original": { "$value": "{elevation.higher.box-shadow-01}, {elevation.higher.box-shadow-02}", + "$modes": { + "default": "{elevation.higher.box-shadow-01}, {elevation.higher.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "key": "{elevation.higher.box-shadow}" }, "name": "token-elevation-higher-box-shadow", @@ -3947,8 +5547,22 @@ { "key": "{elevation.overlay.box-shadow}", "$value": "0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559", + "$modes": { + "default": "0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "original": { "$value": "{elevation.overlay.box-shadow-01}, {elevation.overlay.box-shadow-02}", + "$modes": { + "default": "{elevation.overlay.box-shadow-01}, {elevation.overlay.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "key": "{elevation.overlay.box-shadow}" }, "name": "token-elevation-overlay-box-shadow", @@ -3964,8 +5578,22 @@ { "key": "{surface.inset.box-shadow}", "$value": "inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a", + "$modes": { + "default": "inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "original": { "$value": "{elevation.inset.box-shadow-border}, {elevation.inset.box-shadow}", + "$modes": { + "default": "{elevation.inset.box-shadow-border}, {elevation.inset.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "key": "{surface.inset.box-shadow}" }, "name": "token-surface-inset-box-shadow", @@ -3981,8 +5609,22 @@ { "key": "{surface.base.box-shadow}", "$value": "0 0 0 1px #656a7633", + "$modes": { + "default": "0 0 0 1px #656a7633", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "original": { "$value": "{elevation.base.box-shadow-border}", + "$modes": { + "default": "{elevation.base.box-shadow-border}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "key": "{surface.base.box-shadow}" }, "name": "token-surface-base-box-shadow", @@ -3998,8 +5640,22 @@ { "key": "{surface.low.box-shadow}", "$value": "0 0 0 1px #656a7626, 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d", + "$modes": { + "default": "0 0 0 1px #656a7626, 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "original": { "$value": "{elevation.low.box-shadow-border}, {elevation.low.box-shadow}", + "$modes": { + "default": "{elevation.low.box-shadow-border}, {elevation.low.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "key": "{surface.low.box-shadow}" }, "name": "token-surface-low-box-shadow", @@ -4015,8 +5671,22 @@ { "key": "{surface.mid.box-shadow}", "$value": "0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633", + "$modes": { + "default": "0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "original": { "$value": "{elevation.mid.box-shadow-border}, {elevation.mid.box-shadow}", + "$modes": { + "default": "{elevation.mid.box-shadow-border}, {elevation.mid.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "key": "{surface.mid.box-shadow}" }, "name": "token-surface-mid-box-shadow", @@ -4032,8 +5702,22 @@ { "key": "{surface.high.box-shadow}", "$value": "0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633", + "$modes": { + "default": "0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "original": { "$value": "{elevation.high.box-shadow-border}, {elevation.high.box-shadow}", + "$modes": { + "default": "{elevation.high.box-shadow-border}, {elevation.high.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "key": "{surface.high.box-shadow}" }, "name": "token-surface-high-box-shadow", @@ -4049,8 +5733,22 @@ { "key": "{surface.higher.box-shadow}", "$value": "0 0 0 1px #656a7633, 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640", + "$modes": { + "default": "0 0 0 1px #656a7633, 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "original": { "$value": "{elevation.higher.box-shadow-border}, {elevation.higher.box-shadow}", + "$modes": { + "default": "{elevation.higher.box-shadow-border}, {elevation.higher.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "key": "{surface.higher.box-shadow}" }, "name": "token-surface-higher-box-shadow", @@ -4066,8 +5764,22 @@ { "key": "{surface.overlay.box-shadow}", "$value": "0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559", + "$modes": { + "default": "0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "original": { "$value": "{elevation.overlay.box-shadow-border}, {elevation.overlay.box-shadow}", + "$modes": { + "default": "{elevation.overlay.box-shadow-border}, {elevation.overlay.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "key": "{surface.overlay.box-shadow}" }, "name": "token-surface-overlay-box-shadow", @@ -4114,6 +5826,41 @@ "box-shadow" ] }, + { + "key": "{app-footer.focus.color.action.internal}", + "$type": "color", + "$value": "var(--token-color-focus-action-internal)", + "$modes": { + "default": "var(--token-color-focus-action-internal)", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "var(--token-color-focus-action-internal)", + "$modes": { + "default": "var(--token-color-focus-action-internal)", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{app-footer.focus.color.action.internal}" + }, + "name": "token-app-footer-focus-color-action-internal", + "attributes": { + "category": "app-footer" + }, + "path": [ + "app-footer", + "focus", + "color", + "action", + "internal" + ] + }, { "key": "{app-header.height}", "$type": "dimension", @@ -4707,95 +6454,4856 @@ ] }, { - "key": "{form.label.color}", - "$type": "color", - "$value": "#0c0c0e", - "group": "components", + "key": "{badge-count.padding.horizontal.small}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, "original": { - "$type": "color", - "$value": "{color.foreground.strong}", - "group": "components", - "key": "{form.label.color}" + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge-count.padding.horizontal.small}" }, - "name": "token-form-label-color", + "name": "token-badge-count-padding-horizontal-small", "attributes": { - "category": "form" + "category": "badge-count" }, "path": [ - "form", - "label", - "color" + "badge-count", + "padding", + "horizontal", + "small" ] }, { - "key": "{form.legend.color}", - "$type": "color", - "$value": "#0c0c0e", - "group": "components", + "key": "{badge-count.padding.horizontal.medium}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, "original": { - "$type": "color", - "$value": "{form.label.color}", - "group": "components", - "key": "{form.legend.color}" + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge-count.padding.horizontal.medium}" }, - "name": "token-form-legend-color", + "name": "token-badge-count-padding-horizontal-medium", "attributes": { - "category": "form" + "category": "badge-count" }, "path": [ - "form", - "legend", - "color" + "badge-count", + "padding", + "horizontal", + "medium" ] }, { - "key": "{form.helper-text.color}", - "$type": "color", - "$value": "#656a76", - "group": "components", + "key": "{badge-count.padding.horizontal.large}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, "original": { - "$type": "color", - "$value": "{color.foreground.faint}", - "group": "components", - "key": "{form.helper-text.color}" + "$type": "dimension", + "$value": "14", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge-count.padding.horizontal.large}" }, - "name": "token-form-helper-text-color", + "name": "token-badge-count-padding-horizontal-large", "attributes": { - "category": "form" + "category": "badge-count" }, "path": [ - "form", - "helper-text", - "color" + "badge-count", + "padding", + "horizontal", + "large" ] }, { - "key": "{form.indicator.optional.color}", - "$type": "color", - "$value": "#656a76", - "group": "components", + "key": "{badge.height.small}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "18", + "cds-g10": "18", + "cds-g90": "18", + "cds-g100": "18" + }, "original": { - "$type": "color", - "$value": "{color.foreground.faint}", - "group": "components", - "key": "{form.indicator.optional.color}" + "$type": "dimension", + "$value": "20", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "18", + "cds-g10": "18", + "cds-g90": "18", + "cds-g100": "18" + }, + "key": "{badge.height.small}" }, - "name": "token-form-indicator-optional-color", + "name": "token-badge-height-small", "attributes": { - "category": "form" + "category": "badge" }, "path": [ - "form", - "indicator", - "optional", - "color" + "badge", + "height", + "small" ] }, { - "key": "{form.error.color}", - "$type": "color", - "$value": "#c00005", - "group": "components", + "key": "{badge.height.medium}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{badge.height.medium}" + }, + "name": "token-badge-height-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "medium" + ] + }, + { + "key": "{badge.height.large}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{badge.height.large}" + }, + "name": "token-badge-height-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "height", + "large" + ] + }, + { + "key": "{badge.padding.horizontal.small}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge.padding.horizontal.small}" + }, + "name": "token-badge-padding-horizontal-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "small" + ] + }, + { + "key": "{badge.padding.horizontal.medium}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge.padding.horizontal.medium}" + }, + "name": "token-badge-padding-horizontal-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "medium" + ] + }, + { + "key": "{badge.padding.horizontal.large}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.padding.horizontal.large}" + }, + "name": "token-badge-padding-horizontal-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "large" + ] + }, + { + "key": "{badge.padding.vertical.small}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "$modes": { + "default": "2", + "cds-g0": "1", + "cds-g10": "1", + "cds-g90": "1", + "cds-g100": "1" + }, + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "$modes": { + "default": "2", + "cds-g0": "1", + "cds-g10": "1", + "cds-g90": "1", + "cds-g100": "1" + }, + "key": "{badge.padding.vertical.small}" + }, + "name": "token-badge-padding-vertical-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "small" + ] + }, + { + "key": "{badge.padding.vertical.medium}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{badge.padding.vertical.medium}" + }, + "name": "token-badge-padding-vertical-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "medium" + ] + }, + { + "key": "{badge.padding.vertical.large}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{badge.padding.vertical.large}" + }, + "name": "token-badge-padding-vertical-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "large" + ] + }, + { + "key": "{badge.gap.small}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.small}" + }, + "name": "token-badge-gap-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "small" + ] + }, + { + "key": "{badge.gap.medium}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.medium}" + }, + "name": "token-badge-gap-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "medium" + ] + }, + { + "key": "{badge.gap.large}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.large}" + }, + "name": "token-badge-gap-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "large" + ] + }, + { + "key": "{badge.typography.font-size.small}", + "$type": "font-size", + "$value": "0.8125rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.small}" + }, + "name": "token-badge-typography-font-size-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "small" + ] + }, + { + "key": "{badge.typography.font-size.medium}", + "$type": "font-size", + "$value": "0.8125rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.medium}" + }, + "name": "token-badge-typography-font-size-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "medium" + ] + }, + { + "key": "{badge.typography.font-size.large}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.large}" + }, + "name": "token-badge-typography-font-size-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "large" + ] + }, + { + "key": "{badge.typography.line-height.small}", + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "original": { + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "key": "{badge.typography.line-height.small}" + }, + "name": "token-badge-typography-line-height-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "small" + ] + }, + { + "key": "{badge.typography.line-height.medium}", + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "original": { + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "key": "{badge.typography.line-height.medium}" + }, + "name": "token-badge-typography-line-height-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "medium" + ] + }, + { + "key": "{badge.typography.line-height.large}", + "$type": "number", + "$value": 1.5, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1, + "cds-g10": 1, + "cds-g90": 1, + "cds-g100": 1 + }, + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1, + "cds-g10": 1, + "cds-g90": 1, + "cds-g100": 1 + }, + "key": "{badge.typography.line-height.large}" + }, + "name": "token-badge-typography-line-height-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "large" + ] + }, + { + "key": "{badge.foreground.color.neutral.filled}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral.filled}" + }, + "name": "token-badge-foreground-color-neutral-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "filled" + ] + }, + { + "key": "{badge.foreground.color.neutral.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.color.gray.20}", + "cds-g10": "{carbon.color.gray.20}", + "cds-g90": "{carbon.color.gray.100}", + "cds-g100": "{carbon.color.gray.100}" + }, + "key": "{badge.foreground.color.neutral.inverted}" + }, + "name": "token-badge-foreground-color-neutral-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.neutral.outlined}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral.outlined}" + }, + "name": "token-badge-foreground-color-neutral-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "outlined" + ] + }, + { + "key": "{badge.foreground.color.neutral-dark-mode.filled}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.neutral-dark-mode.filled}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "filled" + ] + }, + { + "key": "{badge.foreground.color.neutral-dark-mode.inverted}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral-dark-mode.inverted}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.neutral-dark-mode.outlined}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "comments": { + "cds": "In Figma the `cds` value uses a token `Tag/HighContrast/TagColor` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "comments": { + "cds": "In Figma the `cds` value uses a token `Tag/HighContrast/TagColor` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.neutral-dark-mode.outlined}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "outlined" + ] + }, + { + "key": "{badge.foreground.color.highlight.filled}", + "$type": "color", + "$value": "#7b00db", + "comment": "we don't use `highlight-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#7b00db", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "{color.palette.purple-400}", + "comment": "we don't use `highlight-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.purple-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorPurple.g100}" + }, + "key": "{badge.foreground.color.highlight.filled}" + }, + "name": "token-badge-foreground-color-highlight-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "filled" + ] + }, + { + "key": "{badge.foreground.color.highlight.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.highlight.inverted}" + }, + "name": "token-badge-foreground-color-highlight-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.highlight.outlined}", + "$type": "color", + "$value": "#a737ff", + "$modes": { + "default": "#a737ff", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.highlight}", + "$modes": { + "default": "{color.foreground.highlight}", + "cds-g0": "{carbon.themes.tagTokens.tagColorPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorPurple.g100}" + }, + "key": "{badge.foreground.color.highlight.outlined}" + }, + "name": "token-badge-foreground-color-highlight-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "outlined" + ] + }, + { + "key": "{badge.foreground.color.success.filled}", + "$type": "color", + "$value": "#006619", + "comment": "we don't use `success-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#006619", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{color.palette.green-400}", + "comment": "we don't use `success-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.green-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.foreground.color.success.filled}" + }, + "name": "token-badge-foreground-color-success-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "filled" + ] + }, + { + "key": "{badge.foreground.color.success.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.success.inverted}" + }, + "name": "token-badge-foreground-color-success-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.success.outlined}", + "$type": "color", + "$value": "#008a22", + "$modes": { + "default": "#008a22", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.success}", + "$modes": { + "default": "{color.foreground.success}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.foreground.color.success.outlined}" + }, + "name": "token-badge-foreground-color-success-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "outlined" + ] + }, + { + "key": "{badge.foreground.color.warning.filled}", + "$type": "color", + "$value": "#803d00", + "$modes": { + "default": "#803d00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "hds": "we don't use `warning-on-surface` for accessibility (better contrast)", + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{color.palette.amber-400}", + "$modes": { + "default": "{color.palette.amber-400}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "hds": "we don't use `warning-on-surface` for accessibility (better contrast)", + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.warning.filled}" + }, + "name": "token-badge-foreground-color-warning-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "filled" + ] + }, + { + "key": "{badge.foreground.color.warning.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.warning.inverted}" + }, + "name": "token-badge-foreground-color-warning-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.warning.outlined}", + "$type": "color", + "$value": "#bb5a00", + "$modes": { + "default": "#bb5a00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.warning}", + "$modes": { + "default": "{color.foreground.warning}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.warning.outlined}" + }, + "name": "token-badge-foreground-color-warning-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "outlined" + ] + }, + { + "key": "{badge.foreground.color.critical.filled}", + "$type": "color", + "$value": "#940004", + "comment": "we don't use `critical-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#940004", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-400}", + "comment": "we don't use `critical-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.foreground.color.critical.filled}" + }, + "name": "token-badge-foreground-color-critical-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "filled" + ] + }, + { + "key": "{badge.foreground.color.critical.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.critical.inverted}" + }, + "name": "token-badge-foreground-color-critical-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "inverted" + ] + }, + { + "key": "{badge.foreground.color.critical.outlined}", + "$type": "color", + "$value": "#e52228", + "$modes": { + "default": "#e52228", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.critical}", + "$modes": { + "default": "{color.foreground.critical}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.foreground.color.critical.outlined}" + }, + "name": "token-badge-foreground-color-critical-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "outlined" + ] + }, + { + "key": "{badge.surface.color.neutral.filled}", + "$type": "color", + "$value": "#dedfe3", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-200}", + "$modes": { + "default": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{badge.surface.color.neutral.filled}" + }, + "name": "token-badge-surface-color-neutral-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "filled" + ] + }, + { + "key": "{badge.surface.color.neutral.inverted}", + "$type": "color", + "$value": "#656a76", + "$modes": { + "default": "#656a76", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead", + "key": "{badge.surface.color.neutral.inverted}" + }, + "name": "token-badge-surface-color-neutral-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "inverted" + ] + }, + { + "key": "{badge.surface.color.neutral.outlined}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{badge.surface.color.neutral.outlined}" + }, + "name": "token-badge-surface-color-neutral-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "outlined" + ] + }, + { + "key": "{badge.surface.color.neutral-dark-mode.filled}", + "$type": "color", + "$value": "#656a76", + "$modes": { + "default": "#656a76", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component", + "key": "{badge.surface.color.neutral-dark-mode.filled}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "filled" + ] + }, + { + "key": "{badge.surface.color.neutral-dark-mode.inverted}", + "$type": "color", + "$value": "#fafafa", + "$modes": { + "default": "#fafafa", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{color.surface.faint}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{badge.surface.color.neutral-dark-mode.inverted}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "inverted" + ] + }, + { + "key": "{badge.surface.color.neutral-dark-mode.outlined}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{badge.surface.color.neutral-dark-mode.outlined}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "outlined" + ] + }, + { + "key": "{badge.surface.color.highlight.filled}", + "$type": "color", + "$value": "#ead2fe", + "comment": "we don't use `surface-highlight` for accessibility (better contrast)", + "$modes": { + "default": "#ead2fe", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { + "$type": "color", + "$value": "{color.palette.purple-100}", + "comment": "we don't use `surface-highlight` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.purple-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundPurple.g100}" + }, + "key": "{badge.surface.color.highlight.filled}" + }, + "name": "token-badge-surface-color-highlight-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "highlight", + "filled" + ] + }, + { + "key": "{badge.surface.color.highlight.inverted}", + "$type": "color", + "$value": "#a737ff", + "$modes": { + "default": "#a737ff", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, + "original": { + "$type": "color", + "$value": "{color.palette.purple-200}", + "$modes": { + "default": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, + "key": "{badge.surface.color.highlight.inverted}" + }, + "name": "token-badge-surface-color-highlight-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "highlight", + "inverted" + ] + }, + { + "key": "{badge.surface.color.success.filled}", + "$type": "color", + "$value": "#cceeda", + "comment": "we don't use `surface-success` for accessibility (better contrast)", + "$modes": { + "default": "#cceeda", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "original": { + "$type": "color", + "$value": "{color.palette.green-100}", + "comment": "we don't use `surface-success` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.green-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGreen.g100}" + }, + "key": "{badge.surface.color.success.filled}" + }, + "name": "token-badge-surface-color-success-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "success", + "filled" + ] + }, + { + "key": "{badge.surface.color.success.inverted}", + "$type": "color", + "$value": "#008a22", + "$modes": { + "default": "#008a22", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "original": { + "$type": "color", + "$value": "{color.palette.green-200}", + "$modes": { + "default": "{color.palette.green-200}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.surface.color.success.inverted}" + }, + "name": "token-badge-surface-color-success-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "success", + "inverted" + ] + }, + { + "key": "{badge.surface.color.warning.filled}", + "$type": "color", + "$value": "#fbeabf", + "comment": "we don't use `surface-warning` for accessibility (better contrast)", + "$modes": { + "default": "#fbeabf", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{color.palette.amber-100}", + "comment": "we don't use `surface-warning` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.surface.color.warning.filled}" + }, + "name": "token-badge-surface-color-warning-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "warning", + "filled" + ] + }, + { + "key": "{badge.surface.color.warning.inverted}", + "$type": "color", + "$value": "#bb5a00", + "$modes": { + "default": "#bb5a00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "original": { + "$type": "color", + "$value": "{color.palette.amber-200}", + "$modes": { + "default": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.surface.color.warning.inverted}" + }, + "name": "token-badge-surface-color-warning-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "warning", + "inverted" + ] + }, + { + "key": "{badge.surface.color.critical.filled}", + "$type": "color", + "$value": "#fbd4d4", + "comment": "we don't use `surface-critical` for accessibility (better contrast)", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-100}", + "comment": "we don't use `surface-critical` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.red-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundRed.g100}" + }, + "key": "{badge.surface.color.critical.filled}" + }, + "name": "token-badge-surface-color-critical-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "critical", + "filled" + ] + }, + { + "key": "{badge.surface.color.critical.inverted}", + "$type": "color", + "$value": "#e52228", + "$modes": { + "default": "#e52228", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-200}", + "$modes": { + "default": "{color.palette.red-200}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.surface.color.critical.inverted}" + }, + "name": "token-badge-surface-color-critical-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "critical", + "inverted" + ] + }, + { + "key": "{badge.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "$modes": { + "default": "5px", + "cds-g0": "1000000000px", + "cds-g10": "1000000000px", + "cds-g90": "1000000000px", + "cds-g100": "1000000000px" + }, + "original": { + "$type": "dimension", + "$value": "{border.radius.small}", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "{border.radius.rounded}", + "cds-g10": "{border.radius.rounded}", + "cds-g90": "{border.radius.rounded}", + "cds-g100": "{border.radius.rounded}" + }, + "key": "{badge.border.radius}" + }, + "name": "token-badge-border-radius", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "border", + "radius" + ] + }, + { + "key": "{badge.icon.size.small}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{badge.icon.size.small}" + }, + "name": "token-badge-icon-size-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "small" + ] + }, + { + "key": "{badge.icon.size.medium}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{badge.icon.size.medium}" + }, + "name": "token-badge-icon-size-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "medium" + ] + }, + { + "key": "{badge.icon.size.large}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{badge.icon.size.large}" + }, + "name": "token-badge-icon-size-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "large" + ] + }, + { + "key": "{button.height.small}", + "$type": "dimension", + "$value": "28px", + "unit": "px", + "$modes": { + "default": "28", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "original": { + "$type": "dimension", + "$value": "28", + "unit": "px", + "$modes": { + "default": "28", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "key": "{button.height.small}" + }, + "name": "token-button-height-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "small" + ] + }, + { + "key": "{button.height.medium}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "$modes": { + "default": "36", + "cds-g0": "40", + "cds-g10": "40", + "cds-g90": "40", + "cds-g100": "40" + }, + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "$modes": { + "default": "36", + "cds-g0": "40", + "cds-g10": "40", + "cds-g90": "40", + "cds-g100": "40" + }, + "key": "{button.height.medium}" + }, + "name": "token-button-height-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "medium" + ] + }, + { + "key": "{button.height.large}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "$modes": { + "default": "48", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "$modes": { + "default": "48", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "key": "{button.height.large}" + }, + "name": "token-button-height-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "large" + ] + }, + { + "key": "{button.padding.horizontal.small}", + "$type": "dimension", + "$value": "11px", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "11", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.small}" + }, + "name": "token-button-padding-horizontal-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "small" + ] + }, + { + "key": "{button.padding.horizontal.medium}", + "$type": "dimension", + "$value": "15px", + "unit": "px", + "$modes": { + "default": "15", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "15", + "unit": "px", + "$modes": { + "default": "15", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.medium}" + }, + "name": "token-button-padding-horizontal-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "medium" + ] + }, + { + "key": "{button.padding.horizontal.large}", + "$type": "dimension", + "$value": "19px", + "unit": "px", + "$modes": { + "default": "19", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "19", + "unit": "px", + "$modes": { + "default": "19", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.large}" + }, + "name": "token-button-padding-horizontal-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "large" + ] + }, + { + "key": "{button.padding.vertical.small}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.small}" + }, + "name": "token-button-padding-vertical-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "small" + ] + }, + { + "key": "{button.padding.vertical.medium}", + "$type": "dimension", + "$value": "9px", + "unit": "px", + "$modes": { + "default": "9", + "cds-g0": "10", + "cds-g10": "10", + "cds-g90": "10", + "cds-g100": "10" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "9", + "unit": "px", + "$modes": { + "default": "9", + "cds-g0": "10", + "cds-g10": "10", + "cds-g90": "10", + "cds-g100": "10" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.medium}" + }, + "name": "token-button-padding-vertical-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "medium" + ] + }, + { + "key": "{button.padding.vertical.large}", + "$type": "dimension", + "$value": "11px", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "comment": "here we're taking into account the 1px border", + "original": { + "$type": "dimension", + "$value": "11", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.large}" + }, + "name": "token-button-padding-vertical-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "large" + ] + }, + { + "key": "{button.gap}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "key": "{button.gap}" + }, + "name": "token-button-gap", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "gap" + ] + }, + { + "key": "{button.typography.font-size.small}", + "$type": "font-size", + "$value": "0.8125rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.small}" + }, + "name": "token-button-typography-font-size-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "small" + ] + }, + { + "key": "{button.typography.font-size.medium}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.medium}" + }, + "name": "token-button-typography-font-size-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "medium" + ] + }, + { + "key": "{button.typography.font-size.large}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.large}" + }, + "name": "token-button-typography-font-size-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "large" + ] + }, + { + "key": "{button.typography.line-height.small}", + "$type": "number", + "$value": 0.9286, + "comment": "14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)", + "$modes": { + "default": 0.9286, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 0.9286, + "comment": "14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)", + "$modes": { + "default": 0.9286, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.small}" + }, + "name": "token-button-typography-line-height-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "small" + ] + }, + { + "key": "{button.typography.line-height.medium}", + "$type": "number", + "$value": 1.1429, + "comment": "14px ~ 1.1429", + "$modes": { + "default": 1.1429, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 1.1429, + "comment": "14px ~ 1.1429", + "$modes": { + "default": 1.1429, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.medium}" + }, + "name": "token-button-typography-line-height-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "medium" + ] + }, + { + "key": "{button.typography.line-height.large}", + "$type": "number", + "$value": 1.5, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.large}" + }, + "name": "token-button-typography-line-height-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "large" + ] + }, + { + "key": "{button.foreground.color.primary.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.default}" + }, + "name": "token-button-foreground-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "default" + ] + }, + { + "key": "{button.foreground.color.primary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.hover}" + }, + "name": "token-button-foreground-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "hover" + ] + }, + { + "key": "{button.foreground.color.primary.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.focus}" + }, + "name": "token-button-foreground-color-primary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "focus" + ] + }, + { + "key": "{button.foreground.color.primary.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.active}" + }, + "name": "token-button-foreground-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "active" + ] + }, + { + "key": "{button.foreground.color.secondary.default}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.default}" + }, + "name": "token-button-foreground-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "default" + ] + }, + { + "key": "{button.foreground.color.secondary.hover}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.hover}" + }, + "name": "token-button-foreground-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "hover" + ] + }, + { + "key": "{button.foreground.color.secondary.focus}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.focus}" + }, + "name": "token-button-foreground-color-secondary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "focus" + ] + }, + { + "key": "{button.foreground.color.secondary.active}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.active}" + }, + "name": "token-button-foreground-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "active" + ] + }, + { + "key": "{button.foreground.color.tertiary.default}", + "$type": "color", + "$value": "#1060ff", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.action}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiary.g100}" + }, + "key": "{button.foreground.color.tertiary.default}" + }, + "name": "token-button-foreground-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "default" + ] + }, + { + "key": "{button.foreground.color.tertiary.hover}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.action-hover}", + "$modes": { + "default": "{color.foreground.action-hover}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.hover}" + }, + "name": "token-button-foreground-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "hover" + ] + }, + { + "key": "{button.foreground.color.tertiary.focus}", + "$type": "color", + "$value": "#1060ff", + "$modes": { + "default": "#1060ff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.action}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.focus}" + }, + "name": "token-button-foreground-color-tertiary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "focus" + ] + }, + { + "key": "{button.foreground.color.tertiary.active}", + "$type": "color", + "$value": "#0046d1", + "$modes": { + "default": "#0046d1", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.action-active}", + "$modes": { + "default": "{color.foreground.action-active}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.active}" + }, + "name": "token-button-foreground-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "active" + ] + }, + { + "key": "{button.foreground.color.critical.default}", + "$type": "color", + "$value": "#c00005", + "$modes": { + "default": "#c00005", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.critical-on-surface}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.default}" + }, + "name": "token-button-foreground-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "default" + ] + }, + { + "key": "{button.foreground.color.critical.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.hover}" + }, + "name": "token-button-foreground-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "hover" + ] + }, + { + "key": "{button.foreground.color.critical.focus}", + "$type": "color", + "$value": "#c00005", + "$modes": { + "default": "#c00005", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.critical-on-surface}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.focus}" + }, + "name": "token-button-foreground-color-critical-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "focus" + ] + }, + { + "key": "{button.foreground.color.critical.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.active}" + }, + "name": "token-button-foreground-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "active" + ] + }, + { + "key": "{button.foreground.color.disabled}", + "$type": "color", + "$value": "#8c909c", + "$modes": { + "default": "#8c909c", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "rgba(255, 255, 255, 0.25)", + "cds-g100": "rgba(255, 255, 255, 0.25)" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.disabled}", + "$modes": { + "default": "{color.foreground.disabled}", + "cds-g0": "{carbon.themes.white.textOnColorDisabled}", + "cds-g10": "{carbon.themes.g10.textOnColorDisabled}", + "cds-g90": "{carbon.themes.g90.textOnColorDisabled}", + "cds-g100": "{carbon.themes.g100.textOnColorDisabled}" + }, + "key": "{button.foreground.color.disabled}" + }, + "name": "token-button-foreground-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "disabled" + ] + }, + { + "key": "{button.surface.color.primary.default}", + "$type": "color", + "$value": "#1060ff", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimary.g100}" + }, + "key": "{button.surface.color.primary.default}" + }, + "name": "token-button-surface-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "default" + ] + }, + { + "key": "{button.surface.color.primary.hover}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#0050e6", + "cds-g100": "#0050e6" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimaryHover.g100}" + }, + "key": "{button.surface.color.primary.hover}" + }, + "name": "token-button-surface-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "hover" + ] + }, + { + "key": "{button.surface.color.primary.focus}", + "$type": "color", + "$value": "#1060ff", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimary.g100}" + }, + "key": "{button.surface.color.primary.focus}" + }, + "name": "token-button-surface-color-primary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "focus" + ] + }, + { + "key": "{button.surface.color.primary.active}", + "$type": "color", + "$value": "#0046d1", + "$modes": { + "default": "#0046d1", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#002d9c", + "cds-g100": "#002d9c" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimaryActive.g100}" + }, + "key": "{button.surface.color.primary.active}" + }, + "name": "token-button-surface-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "active" + ] + }, + { + "key": "{button.surface.color.secondary.default}", + "$type": "color", + "$value": "#fafafa", + "$modes": { + "default": "#fafafa", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#6f6f6f", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{color.surface.faint}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondary.g100}" + }, + "key": "{button.surface.color.secondary.default}" + }, + "name": "token-button-surface-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "default" + ] + }, + { + "key": "{button.surface.color.secondary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#474747", + "cds-g10": "#474747", + "cds-g90": "#5e5e5e", + "cds-g100": "#5e5e5e" + }, + "original": { + "$type": "color", + "$value": "{color.surface.primary}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondaryHover.g100}" + }, + "key": "{button.surface.color.secondary.hover}" + }, + "name": "token-button-surface-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "hover" + ] + }, + { + "key": "{button.surface.color.secondary.focus}", + "$type": "color", + "$value": "#fafafa", + "$modes": { + "default": "#fafafa", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#6f6f6f", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{color.surface.faint}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondary.g100}" + }, + "key": "{button.surface.color.secondary.focus}" + }, + "name": "token-button-surface-color-secondary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "focus" + ] + }, + { + "key": "{button.surface.color.secondary.active}", + "$type": "color", + "$value": "#dedfe3", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#6f6f6f", + "cds-g10": "#6f6f6f", + "cds-g90": "#393939", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{color.surface.interactive-active}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondaryActive.g100}" + }, + "key": "{button.surface.color.secondary.active}" + }, + "name": "token-button-surface-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "active" + ] + }, + { + "key": "{button.surface.color.tertiary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{button.surface.color.tertiary.default}" + }, + "name": "token-button-surface-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "default" + ] + }, + { + "key": "{button.surface.color.tertiary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.surface.primary}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryHover.g100}" + }, + "key": "{button.surface.color.tertiary.hover}" + }, + "name": "token-button-surface-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "hover" + ] + }, + { + "key": "{button.surface.color.tertiary.focus}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "transparent", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "transparent", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryHover.g100}" + }, + "key": "{button.surface.color.tertiary.focus}" + }, + "name": "token-button-surface-color-tertiary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "focus" + ] + }, + { + "key": "{button.surface.color.tertiary.active}", + "$type": "color", + "$value": "#dedfe3", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$type": "color", + "$value": "{color.surface.interactive-active}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryActive.g100}" + }, + "key": "{button.surface.color.tertiary.active}" + }, + "name": "token-button-surface-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "active" + ] + }, + { + "key": "{button.surface.color.critical.default}", + "$type": "color", + "$value": "#fff5f5", + "$modes": { + "default": "#fff5f5", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "{color.surface.critical}", + "$modes": { + "default": "{color.surface.critical}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerPrimary.g100}" + }, + "key": "{button.surface.color.critical.default}" + }, + "name": "token-button-surface-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "default" + ] + }, + { + "key": "{button.surface.color.critical.hover}", + "$type": "color", + "$value": "#c00005", + "$modes": { + "default": "#c00005", + "cds-g0": "#b81921", + "cds-g10": "#b81921", + "cds-g90": "#b81921", + "cds-g100": "#b81921" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerHover.g100}" + }, + "key": "{button.surface.color.critical.hover}" + }, + "name": "token-button-surface-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "hover" + ] + }, + { + "key": "{button.surface.color.critical.focus}", + "$type": "color", + "$value": "#fff5f5", + "$modes": { + "default": "#fff5f5", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "original": { + "$type": "color", + "$value": "{color.surface.critical}", + "$modes": { + "default": "{color.surface.critical}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerPrimary.g100}" + }, + "key": "{button.surface.color.critical.focus}" + }, + "name": "token-button-surface-color-critical-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "focus" + ] + }, + { + "key": "{button.surface.color.critical.active}", + "$type": "color", + "$value": "#940004", + "$modes": { + "default": "#940004", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#750e13", + "cds-g100": "#750e13" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-400}", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerActive.g100}" + }, + "key": "{button.surface.color.critical.active}" + }, + "name": "token-button-surface-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "active" + ] + }, + { + "key": "{button.surface.color.disabled}", + "$type": "color", + "$value": "#fafafa", + "$modes": { + "default": "#fafafa", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, + "original": { + "$type": "color", + "$value": "{color.surface.faint}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDisabled.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDisabled.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDisabled.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDisabled.g100}" + }, + "key": "{button.surface.color.disabled}" + }, + "name": "token-button-surface-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "disabled" + ] + }, + { + "key": "{button.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{button.border.width}" + }, + "name": "token-button-border-width", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "width" + ] + }, + { + "key": "{button.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "$modes": { + "default": "5px", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "{border.radius.small}", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{button.border.radius}" + }, + "name": "token-button-border-radius", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "radius" + ] + }, + { + "key": "{button.border.color.primary.default}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.default}" + }, + "name": "token-button-border-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "default" + ] + }, + { + "key": "{button.border.color.primary.hover}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.hover}" + }, + "name": "token-button-border-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "hover" + ] + }, + { + "key": "{button.border.color.primary.focus.internal}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "{color.focus.action.internal}", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.primary.focus.internal}" + }, + "name": "token-button-border-color-primary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "focus", + "internal" + ] + }, + { + "key": "{button.border.color.primary.focus.external}", + "$type": "color", + "$value": "#5990ff", + "$modes": { + "default": "#5990ff", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "{color.focus.action.external}", + "$modes": { + "default": "{color.focus.action.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.primary.focus.external}" + }, + "name": "token-button-border-color-primary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "focus", + "external" + ] + }, + { + "key": "{button.border.color.primary.active}", + "$type": "color", + "$value": "#0046d1", + "$modes": { + "default": "#0046d1", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.active}" + }, + "name": "token-button-border-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "active" + ] + }, + { + "key": "{button.border.color.secondary.default}", + "$type": "color", + "$value": "#3b3d4566", + "$modes": { + "default": "#3b3d4566", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.default}" + }, + "name": "token-button-border-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "default" + ] + }, + { + "key": "{button.border.color.secondary.hover}", + "$type": "color", + "$value": "#3b3d4566", + "$modes": { + "default": "#3b3d4566", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.hover}" + }, + "name": "token-button-border-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "hover" + ] + }, + { + "key": "{button.border.color.secondary.focus.internal}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "{color.focus.action.internal}", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.secondary.focus.internal}" + }, + "name": "token-button-border-color-secondary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "focus", + "internal" + ] + }, + { + "key": "{button.border.color.secondary.focus.external}", + "$type": "color", + "$value": "#5990ff", + "$modes": { + "default": "#5990ff", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "{color.focus.action.external}", + "$modes": { + "default": "{color.focus.action.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.secondary.focus.external}" + }, + "name": "token-button-border-color-secondary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "focus", + "external" + ] + }, + { + "key": "{button.border.color.secondary.active}", + "$type": "color", + "$value": "#3b3d4566", + "$modes": { + "default": "#3b3d4566", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.active}" + }, + "name": "token-button-border-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "active" + ] + }, + { + "key": "{button.border.color.tertiary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "original": { + "$type": "color", + "$value": "transparent", + "key": "{button.border.color.tertiary.default}" + }, + "name": "token-button-border-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "default" + ] + }, + { + "key": "{button.border.color.tertiary.hover}", + "$type": "color", + "$value": "#3b3d4566", + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "key": "{button.border.color.tertiary.hover}" + }, + "name": "token-button-border-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "hover" + ] + }, + { + "key": "{button.border.color.tertiary.focus.internal}", + "$type": "color", + "$value": "#0c56e9", + "original": { + "$type": "color", + "$value": "{color.focus.action.internal}", + "key": "{button.border.color.tertiary.focus.internal}" + }, + "name": "token-button-border-color-tertiary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "focus", + "internal" + ] + }, + { + "key": "{button.border.color.tertiary.focus.external}", + "$type": "color", + "$value": "#5990ff", + "original": { + "$type": "color", + "$value": "{color.focus.action.external}", + "key": "{button.border.color.tertiary.focus.external}" + }, + "name": "token-button-border-color-tertiary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "focus", + "external" + ] + }, + { + "key": "{button.border.color.tertiary.active}", + "$type": "color", + "$value": "#3b3d4566", + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "key": "{button.border.color.tertiary.active}" + }, + "name": "token-button-border-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "active" + ] + }, + { + "key": "{button.border.color.critical.default}", + "$type": "color", + "$value": "#c00005", + "$modes": { + "default": "#c00005", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.critical-on-surface}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.default}" + }, + "name": "token-button-border-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "default" + ] + }, + { + "key": "{button.border.color.critical.hover}", + "$type": "color", + "$value": "#940004", + "$modes": { + "default": "#940004", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-400}", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.hover}" + }, + "name": "token-button-border-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "hover" + ] + }, + { + "key": "{button.border.color.critical.focus.internal}", + "$type": "color", + "$value": "#c00005", + "$modes": { + "default": "#c00005", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "original": { + "$type": "color", + "$value": "{color.focus.critical.internal}", + "$modes": { + "default": "{color.focus.critical.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.critical.focus.internal}" + }, + "name": "token-button-border-color-critical-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "focus", + "internal" + ] + }, + { + "key": "{button.border.color.critical.focus.external}", + "$type": "color", + "$value": "#dd7578", + "$modes": { + "default": "#dd7578", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "original": { + "$type": "color", + "$value": "{color.focus.critical.external}", + "$modes": { + "default": "{color.focus.critical.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.critical.focus.external}" + }, + "name": "token-button-border-color-critical-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "focus", + "external" + ] + }, + { + "key": "{button.border.color.critical.active}", + "$type": "color", + "$value": "#940004", + "$modes": { + "default": "#940004", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.palette.red-400}", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.active}" + }, + "name": "token-button-border-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "active" + ] + }, + { + "key": "{button.border.color.disabled}", + "$type": "color", + "$value": "#656a7633", + "original": { + "$type": "color", + "$value": "{color.border.primary}", + "key": "{button.border.color.disabled}" + }, + "name": "token-button-border-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "disabled" + ] + }, + { + "key": "{button.focus.border.width}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{button.focus.border.width}" + }, + "name": "token-button-focus-border-width", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "focus", + "border", + "width" + ] + }, + { + "key": "{button.icon.size.small}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.small}" + }, + "name": "token-button-icon-size-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "small" + ] + }, + { + "key": "{button.icon.size.medium}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.medium}" + }, + "name": "token-button-icon-size-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "medium" + ] + }, + { + "key": "{button.icon.size.large}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.large}" + }, + "name": "token-button-icon-size-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "large" + ] + }, + { + "key": "{dismiss-button.size}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "key": "{dismiss-button.size}" + }, + "name": "token-dismiss-button-size", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "size" + ] + }, + { + "key": "{dismiss-button.foreground.color.default}", + "$type": "color", + "$value": "#656a76", + "$modes": { + "default": "#656a76", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "$modes": { + "default": "{color.foreground.faint}", + "cds-g0": "{carbon.themes.white.iconPrimary}", + "cds-g10": "{carbon.themes.g10.iconPrimary}", + "cds-g90": "{carbon.themes.g90.iconPrimary}", + "cds-g100": "{carbon.themes.g100.iconPrimary}" + }, + "key": "{dismiss-button.foreground.color.default}" + }, + "name": "token-dismiss-button-foreground-color-default", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "foreground", + "color", + "default" + ] + }, + { + "key": "{dismiss-button.foreground.color.active}", + "$type": "color", + "$value": "#0c0c0e", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.strong}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.white.iconPrimary}", + "cds-g10": "{carbon.themes.g10.iconPrimary}", + "cds-g90": "{carbon.themes.g90.iconPrimary}", + "cds-g100": "{carbon.themes.g100.iconPrimary}" + }, + "key": "{dismiss-button.foreground.color.active}" + }, + "name": "token-dismiss-button-foreground-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "foreground", + "color", + "active" + ] + }, + { + "key": "{dismiss-button.surface.color.hover}", + "$type": "color", + "$value": "rgba(222, 223, 227, 0.4)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "rgba(141, 141, 141, 0.12)", + "cds-g10": "rgba(141, 141, 141, 0.12)", + "cds-g90": "rgba(141, 141, 141, 0.16)", + "cds-g100": "rgba(141, 141, 141, 0.16)" + }, + "original": { + "$type": "color", + "$value": "rgba(222, 223, 227, 0.4)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "{carbon.themes.white.backgroundHover}", + "cds-g10": "{carbon.themes.g10.backgroundHover}", + "cds-g90": "{carbon.themes.g90.backgroundHover}", + "cds-g100": "{carbon.themes.g100.backgroundHover}" + }, + "key": "{dismiss-button.surface.color.hover}" + }, + "name": "token-dismiss-button-surface-color-hover", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "surface", + "color", + "hover" + ] + }, + { + "key": "{dismiss-button.surface.color.active}", + "$type": "color", + "$value": "rgba(222, 223, 227, 0.4)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "rgba(141, 141, 141, 0.5)", + "cds-g10": "rgba(141, 141, 141, 0.5)", + "cds-g90": "rgba(141, 141, 141, 0.4)", + "cds-g100": "rgba(141, 141, 141, 0.4)" + }, + "original": { + "$type": "color", + "$value": "rgba(222, 223, 227, 0.4)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "{carbon.themes.white.backgroundActive}", + "cds-g10": "{carbon.themes.g10.backgroundActive}", + "cds-g90": "{carbon.themes.g90.backgroundActive}", + "cds-g100": "{carbon.themes.g100.backgroundActive}" + }, + "key": "{dismiss-button.surface.color.active}" + }, + "name": "token-dismiss-button-surface-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "surface", + "color", + "active" + ] + }, + { + "key": "{dismiss-button.border.color.active}", + "$type": "color", + "$value": "#3b3d4566", + "$modes": { + "default": "#3b3d4566", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{dismiss-button.border.color.active}" + }, + "name": "token-dismiss-button-border-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "border", + "color", + "active" + ] + }, + { + "key": "{dismiss-button.icon.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "20", + "cds-g10": "20", + "cds-g90": "20", + "cds-g100": "20" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "20", + "cds-g10": "20", + "cds-g90": "20", + "cds-g100": "20" + }, + "key": "{dismiss-button.icon.size}" + }, + "name": "token-dismiss-button-icon-size", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "icon", + "size" + ] + }, + { + "key": "{form.label.color}", + "$type": "color", + "$value": "#0c0c0e", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.strong}", + "group": "components", + "key": "{form.label.color}" + }, + "name": "token-form-label-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "label", + "color" + ] + }, + { + "key": "{form.legend.color}", + "$type": "color", + "$value": "#0c0c0e", + "group": "components", + "original": { + "$type": "color", + "$value": "{form.label.color}", + "group": "components", + "key": "{form.legend.color}" + }, + "name": "token-form-legend-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "legend", + "color" + ] + }, + { + "key": "{form.helper-text.color}", + "$type": "color", + "$value": "#656a76", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.helper-text.color}" + }, + "name": "token-form-helper-text-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "helper-text", + "color" + ] + }, + { + "key": "{form.indicator.optional.color}", + "$type": "color", + "$value": "#656a76", + "group": "components", + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.indicator.optional.color}" + }, + "name": "token-form-indicator-optional-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "indicator", + "optional", + "color" + ] + }, + { + "key": "{form.error.color}", + "$type": "color", + "$value": "#c00005", + "group": "components", "original": { "$type": "color", "$value": "{color.palette.red-300}", @@ -5613,28 +12121,133 @@ "unit": "px", "key": "{form.radiocard-group.gap}" }, - "name": "token-form-radiocard-group-gap", + "name": "token-form-radiocard-group-gap", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard-group", + "gap" + ] + }, + { + "key": "{form.radiocard.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.radiocard.border.width}" + }, + "name": "token-form-radiocard-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "width" + ] + }, + { + "key": "{form.radiocard.border.radius}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{form.radiocard.border.radius}" + }, + "name": "token-form-radiocard-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "radius" + ] + }, + { + "key": "{form.radiocard.border.color.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "original": { + "$type": "color", + "$value": "{color.surface.primary}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{form.radiocard.border.color.default}" + }, + "name": "token-form-radiocard-border-color-default", "attributes": { "category": "form" }, "path": [ "form", - "radiocard-group", - "gap" + "radiocard", + "border", + "color", + "default" ] }, { - "key": "{form.radiocard.border.width}", - "$type": "dimension", - "$value": "1px", - "unit": "px", + "key": "{form.radiocard.border.color.focus}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, "original": { - "$type": "dimension", - "$value": "1", - "unit": "px", - "key": "{form.radiocard.border.width}" + "$type": "color", + "$value": "{color.focus.action.internal}", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "key": "{form.radiocard.border.color.focus}" }, - "name": "token-form-radiocard-border-width", + "name": "token-form-radiocard-border-color-focus", "attributes": { "category": "form" }, @@ -5642,21 +12255,34 @@ "form", "radiocard", "border", - "width" + "color", + "focus" ] }, { - "key": "{form.radiocard.border.radius}", - "$type": "dimension", - "$value": "6px", - "unit": "px", + "key": "{form.radiocard.border.color.default-checked}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, "original": { - "$type": "dimension", - "$value": "6", - "unit": "px", - "key": "{form.radiocard.border.radius}" + "$type": "color", + "$value": "{color.palette.blue-300}", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "key": "{form.radiocard.border.color.default-checked}" }, - "name": "token-form-radiocard-border-radius", + "name": "token-form-radiocard-border-color-default-checked", "attributes": { "category": "form" }, @@ -5664,7 +12290,8 @@ "form", "radiocard", "border", - "radius" + "color", + "default-checked" ] }, { @@ -6238,6 +12865,108 @@ "thumb-size" ] }, + { + "key": "{icon-tile.border.color.overlay}", + "$type": "color", + "$value": "#656a7633", + "$modes": { + "default": "#656a7633", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{color.border.primary}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle02}", + "cds-g10": "{carbon.themes.g10.borderSubtle02}", + "cds-g90": "{carbon.themes.g90.borderSubtle02}", + "cds-g100": "{carbon.themes.g100.borderSubtle02}" + }, + "key": "{icon-tile.border.color.overlay}" + }, + "name": "token-icon-tile-border-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "overlay" + ] + }, + { + "key": "{icon-tile.border.color.logo}", + "$type": "color", + "$value": "#656a7633", + "$modes": { + "default": "#656a7633", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{color.border.primary}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle01}", + "cds-g10": "{carbon.themes.g10.borderSubtle01}", + "cds-g90": "{carbon.themes.g90.borderSubtle01}", + "cds-g100": "{carbon.themes.g100.borderSubtle01}" + }, + "key": "{icon-tile.border.color.logo}" + }, + "name": "token-icon-tile-border-color-logo", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "logo" + ] + }, + { + "key": "{icon-tile.surface.color.overlay}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{color.surface.primary}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.white.layer02}", + "cds-g10": "{carbon.themes.g10.layer02}", + "cds-g90": "{carbon.themes.g90.layer02}", + "cds-g100": "{carbon.themes.g100.layer02}" + }, + "key": "{icon-tile.surface.color.overlay}" + }, + "name": "token-icon-tile-surface-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "surface", + "color", + "overlay" + ] + }, { "key": "{pagination.nav.control.height}", "$type": "dimension", @@ -6415,6 +13144,364 @@ "horizontal" ] }, + { + "key": "{rich-tooltip.bubble.max-width}", + "$type": "dimension", + "$value": "280px", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "original": { + "$type": "dimension", + "$value": "280", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "key": "{rich-tooltip.bubble.max-width}" + }, + "name": "token-rich-tooltip-bubble-max-width", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "max-width" + ] + }, + { + "key": "{rich-tooltip.bubble.border.color}", + "$value": "#656a7633", + "$modes": { + "default": "#656a7633", + "cds-g0": "#656a7633", + "cds-g10": "#656a7633", + "cds-g90": "#656a7633", + "cds-g100": "#656a7633" + }, + "original": { + "$value": "{elevation.higher.border.color}", + "$modes": { + "default": "{elevation.higher.border.color}", + "cds-g0": "{color.palette.alpha-200}", + "cds-g10": "{color.palette.alpha-200}", + "cds-g90": "{color.palette.alpha-200}", + "cds-g100": "{color.palette.alpha-200}" + }, + "key": "{rich-tooltip.bubble.border.color}" + }, + "name": "token-rich-tooltip-bubble-border-color", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "border", + "color" + ] + }, + { + "key": "{rich-tooltip.bubble.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "$modes": { + "default": "5px", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "original": { + "$type": "dimension", + "$value": "{border.radius.small}", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "key": "{rich-tooltip.bubble.border.radius}" + }, + "name": "token-rich-tooltip-bubble-border-radius", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "border", + "radius" + ] + }, + { + "key": "{rich-tooltip.bubble.arrow.size}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{rich-tooltip.bubble.arrow.size}" + }, + "name": "token-rich-tooltip-bubble-arrow-size", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "arrow", + "size" + ] + }, + { + "key": "{rich-tooltip.toggle.gap.horizontal}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{rich-tooltip.toggle.gap.horizontal}" + }, + "name": "token-rich-tooltip-toggle-gap-horizontal", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "gap", + "horizontal" + ] + }, + { + "key": "{rich-tooltip.toggle.foreground.color.default}", + "$value": "#0c0c0e", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$value": "{color.foreground.strong}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.default}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-default", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "default" + ] + }, + { + "key": "{rich-tooltip.toggle.foreground.color.hover}", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.hover}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-hover", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "hover" + ] + }, + { + "key": "{rich-tooltip.toggle.foreground.color.active}", + "$value": "#656a76", + "$modes": { + "default": "#656a76", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$value": "{color.foreground.faint}", + "$modes": { + "default": "{color.foreground.faint}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.active}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-active", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "active" + ] + }, + { + "key": "{rich-tooltip.toggle.icon.size}", + "$type": "dimension", + "$value": "1em", + "unit": "em", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, + "original": { + "$type": "dimension", + "$value": "1", + "unit": "em", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, + "key": "{rich-tooltip.toggle.icon.size}" + }, + "name": "token-rich-tooltip-toggle-icon-size", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "icon", + "size" + ] + }, { "key": "{tabs.tab.height.medium}", "$type": "dimension", @@ -6680,149 +13767,263 @@ ] }, { - "key": "{tooltip.border-radius}", + "key": "{tooltip.max-width}", "$type": "dimension", - "$value": "5px", + "$value": "280px", "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, "original": { "$type": "dimension", - "$value": "5", + "$value": "280", "unit": "px", - "key": "{tooltip.border-radius}" + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "key": "{tooltip.max-width}" }, - "name": "token-tooltip-border-radius", + "name": "token-tooltip-max-width", "attributes": { "category": "tooltip" }, "path": [ "tooltip", - "border-radius" + "max-width" ] }, { - "key": "{tooltip.color.foreground.primary}", - "$type": "color", - "$value": "var(--token-color-foreground-high-contrast)", - "group": "components", + "key": "{tooltip.padding.horizontal}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16px", + "cds-g10": "16px", + "cds-g90": "16px", + "cds-g100": "16px" + }, "original": { - "$type": "color", - "$value": "var(--token-color-foreground-high-contrast)", - "group": "components", - "key": "{tooltip.color.foreground.primary}" + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "{carbon.themes.white.spacing05}", + "cds-g10": "{carbon.themes.g10.spacing05}", + "cds-g90": "{carbon.themes.g90.spacing05}", + "cds-g100": "{carbon.themes.g100.spacing05}" + }, + "key": "{tooltip.padding.horizontal}" + }, + "name": "token-tooltip-padding-horizontal", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "horizontal" + ] + }, + { + "key": "{tooltip.padding.vertical}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "16px", + "cds-g10": "16px", + "cds-g90": "16px", + "cds-g100": "16px" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "{carbon.themes.white.spacing05}", + "cds-g10": "{carbon.themes.g10.spacing05}", + "cds-g90": "{carbon.themes.g90.spacing05}", + "cds-g100": "{carbon.themes.g100.spacing05}" + }, + "key": "{tooltip.padding.vertical}" }, - "name": "token-tooltip-color-foreground-primary", + "name": "token-tooltip-padding-vertical", "attributes": { "category": "tooltip" }, "path": [ "tooltip", - "color", - "foreground", - "primary" + "padding", + "vertical" ] }, { - "key": "{tooltip.color.surface.primary}", - "$type": "color", - "$value": "var(--token-color-palette-neutral-700)", - "group": "components", + "key": "{tooltip.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "$modes": { + "default": "5px", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, "original": { - "$type": "color", - "$value": "var(--token-color-palette-neutral-700)", - "group": "components", - "key": "{tooltip.color.surface.primary}" + "$type": "dimension", + "$value": "{border.radius.small}", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "key": "{tooltip.border.radius}" }, - "name": "token-tooltip-color-surface-primary", + "name": "token-tooltip-border-radius", "attributes": { "category": "tooltip" }, "path": [ "tooltip", - "color", - "surface", - "primary" + "border", + "radius" ] }, { - "key": "{tooltip.focus-offset}", - "$type": "dimension", - "$value": "-2px", - "unit": "px", + "key": "{tooltip.caret.clip-path}", + "$value": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "$modes": { + "default": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "cds-g0": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g10": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g90": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g100": "polygon(0 100%, 50% 0, 100% 100%)" + }, "original": { - "$type": "dimension", - "$value": "-2", - "unit": "px", - "key": "{tooltip.focus-offset}" + "$value": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "$modes": { + "default": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "cds-g0": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g10": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g90": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g100": "polygon(0 100%, 50% 0, 100% 100%)" + }, + "key": "{tooltip.caret.clip-path}" }, - "name": "token-tooltip-focus-offset", + "name": "token-tooltip-caret-clip-path", "attributes": { "category": "tooltip" }, "path": [ "tooltip", - "focus-offset" + "caret", + "clip-path" ] }, { - "key": "{tooltip.max-width}", + "key": "{tooltip.caret.height}", "$type": "dimension", - "$value": "280px", + "$value": "7px", "unit": "px", + "$modes": { + "default": "7", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, "original": { "$type": "dimension", - "$value": "280", + "$value": "7", "unit": "px", - "key": "{tooltip.max-width}" + "$modes": { + "default": "7", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "key": "{tooltip.caret.height}" }, - "name": "token-tooltip-max-width", + "name": "token-tooltip-caret-height", "attributes": { "category": "tooltip" }, "path": [ "tooltip", - "max-width" + "caret", + "height" ] }, { - "key": "{tooltip.padding.horizontal}", + "key": "{tooltip.caret.width}", "$type": "dimension", - "$value": "12px", + "$value": "16px", "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, "original": { "$type": "dimension", - "$value": "12", + "$value": "16", "unit": "px", - "key": "{tooltip.padding.horizontal}" + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{tooltip.caret.width}" }, - "name": "token-tooltip-padding-horizontal", + "name": "token-tooltip-caret-width", "attributes": { "category": "tooltip" }, "path": [ "tooltip", - "padding", - "horizontal" + "caret", + "width" ] }, { - "key": "{tooltip.padding.vertical}", + "key": "{tooltip.focus-offset}", "$type": "dimension", - "$value": "8px", + "$value": "-2px", "unit": "px", "original": { "$type": "dimension", - "$value": "8", + "$value": "-2", "unit": "px", - "key": "{tooltip.padding.vertical}" + "key": "{tooltip.focus-offset}" }, - "name": "token-tooltip-padding-vertical", + "name": "token-tooltip-focus-offset", "attributes": { "category": "tooltip" }, "path": [ "tooltip", - "padding", - "vertical" + "focus-offset" ] }, { @@ -6853,14 +14054,23 @@ "key": "{typography.font-stack.display}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.display.macOS}", - "{typography.font-stack.sans.display.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.display.emoji}" - ], + "$value": "{typography.font-stack.sans.display.combined}", + "$modes": { + "default": "{typography.font-stack.sans.display.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.font-stack.display}" }, "name": "token-typography-font-stack-display", @@ -6877,14 +14087,23 @@ "key": "{typography.font-stack.text}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.text.macOS}", - "{typography.font-stack.sans.text.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.text.emoji}" - ], + "$value": "{typography.font-stack.sans.text.combined}", + "$modes": { + "default": "{typography.font-stack.sans.text.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.font-stack.text}" }, "name": "token-typography-font-stack-text", @@ -6901,13 +14120,23 @@ "key": "{typography.font-stack.code}", "$type": "font-family", "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "default": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.monospace.code.macOS}", - "{typography.font-stack.monospace.code.windows}", - "monospace" - ], + "$value": "{typography.font-stack.monospace.code.combined}", + "$modes": { + "default": "{typography.font-stack.monospace.code.combined}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, "key": "{typography.font-stack.code}" }, "name": "token-typography-font-stack-code", @@ -6923,10 +14152,24 @@ { "key": "{typography.font-weight.regular}", "$type": "font-weight", - "$value": 400, + "$value": "400", + "$modes": { + "default": "400", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, "original": { "$type": "font-weight", - "$value": 400, + "$value": "400", + "$modes": { + "default": "400", + "cds-g0": "{carbon.typography.font-weight.regular}", + "cds-g10": "{carbon.typography.font-weight.regular}", + "cds-g90": "{carbon.typography.font-weight.regular}", + "cds-g100": "{carbon.typography.font-weight.regular}" + }, "key": "{typography.font-weight.regular}" }, "name": "token-typography-font-weight-regular", @@ -6942,10 +14185,24 @@ { "key": "{typography.font-weight.medium}", "$type": "font-weight", - "$value": 500, + "$value": "500", + "$modes": { + "default": "500", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, "original": { "$type": "font-weight", - "$value": 500, + "$value": "500", + "$modes": { + "default": "500", + "cds-g0": "{carbon.typography.font-weight.regular}", + "cds-g10": "{carbon.typography.font-weight.regular}", + "cds-g90": "{carbon.typography.font-weight.regular}", + "cds-g100": "{carbon.typography.font-weight.regular}" + }, "key": "{typography.font-weight.medium}" }, "name": "token-typography-font-weight-medium", @@ -6961,10 +14218,24 @@ { "key": "{typography.font-weight.semibold}", "$type": "font-weight", - "$value": 600, + "$value": "600", + "$modes": { + "default": "600", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, "original": { "$type": "font-weight", - "$value": 600, + "$value": "600", + "$modes": { + "default": "600", + "cds-g0": "{carbon.typography.font-weight.semibold}", + "cds-g10": "{carbon.typography.font-weight.semibold}", + "cds-g90": "{carbon.typography.font-weight.semibold}", + "cds-g100": "{carbon.typography.font-weight.semibold}" + }, "key": "{typography.font-weight.semibold}" }, "name": "token-typography-font-weight-semibold", @@ -6980,10 +14251,24 @@ { "key": "{typography.font-weight.bold}", "$type": "font-weight", - "$value": 700, + "$value": "700", + "$modes": { + "default": "700", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, "original": { "$type": "font-weight", - "$value": 700, + "$value": "700", + "$modes": { + "default": "700", + "cds-g0": "{carbon.typography.font-weight.semibold}", + "cds-g10": "{carbon.typography.font-weight.semibold}", + "cds-g90": "{carbon.typography.font-weight.semibold}", + "cds-g100": "{carbon.typography.font-weight.semibold}" + }, "key": "{typography.font-weight.bold}" }, "name": "token-typography-font-weight-bold", @@ -7000,9 +14285,23 @@ "key": "{typography.display-500.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.display}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-500.font-family}" }, "name": "token-typography-display-500-font-family", @@ -7021,11 +14320,25 @@ "$value": "1.875rem", "unit": "px", "comment": "30px/1.875rem", + "$modes": { + "default": "30", + "cds-g0": "2rem", + "cds-g10": "2rem", + "cds-g90": "2rem", + "cds-g100": "2rem" + }, "original": { "$type": "font-size", "$value": "30", "unit": "px", "comment": "30px/1.875rem", + "$modes": { + "default": "30", + "cds-g0": "{carbon.typography.heading05.font-size}", + "cds-g10": "{carbon.typography.heading05.font-size}", + "cds-g90": "{carbon.typography.heading05.font-size}", + "cds-g100": "{carbon.typography.heading05.font-size}" + }, "key": "{typography.display-500.font-size}" }, "name": "token-typography-display-500-font-size", @@ -7043,10 +14356,24 @@ "$type": "number", "$value": 1.2666, "comment": "38px", + "$modes": { + "default": 1.2666, + "cds-g0": 1.25, + "cds-g10": 1.25, + "cds-g90": 1.25, + "cds-g100": 1.25 + }, "original": { "$type": "number", "$value": 1.2666, "comment": "38px", + "$modes": { + "default": 1.2666, + "cds-g0": "{carbon.typography.heading05.line-height}", + "cds-g10": "{carbon.typography.heading05.line-height}", + "cds-g90": "{carbon.typography.heading05.line-height}", + "cds-g100": "{carbon.typography.heading05.line-height}" + }, "key": "{typography.display-500.line-height}" }, "name": "token-typography-display-500-line-height", @@ -7059,13 +14386,62 @@ "line-height" ] }, + { + "key": "{typography.display-500.letter-spacing}", + "$type": "letter-spacing", + "$value": "-0.5px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading05.letter-spacing}", + "cds-g10": "{carbon.typography.heading05.letter-spacing}", + "cds-g90": "{carbon.typography.heading05.letter-spacing}", + "cds-g100": "{carbon.typography.heading05.letter-spacing}" + }, + "key": "{typography.display-500.letter-spacing}" + }, + "name": "token-typography-display-500-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "letter-spacing" + ] + }, { "key": "{typography.display-400.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.display}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-400.font-family}" }, "name": "token-typography-display-400-font-family", @@ -7084,11 +14460,25 @@ "$value": "1.5rem", "unit": "px", "comment": "24px/1.5rem", + "$modes": { + "default": "24", + "cds-g0": "1.75rem", + "cds-g10": "1.75rem", + "cds-g90": "1.75rem", + "cds-g100": "1.75rem" + }, "original": { "$type": "font-size", "$value": "24", "unit": "px", "comment": "24px/1.5rem", + "$modes": { + "default": "24", + "cds-g0": "{carbon.typography.heading04.font-size}", + "cds-g10": "{carbon.typography.heading04.font-size}", + "cds-g90": "{carbon.typography.heading04.font-size}", + "cds-g100": "{carbon.typography.heading04.font-size}" + }, "key": "{typography.display-400.font-size}" }, "name": "token-typography-display-400-font-size", @@ -7106,10 +14496,24 @@ "$type": "number", "$value": 1.3333, "comment": "32px", + "$modes": { + "default": 1.3333, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, "original": { "$type": "number", "$value": 1.3333, "comment": "32px", + "$modes": { + "default": 1.3333, + "cds-g0": "{carbon.typography.heading04.line-height}", + "cds-g10": "{carbon.typography.heading04.line-height}", + "cds-g90": "{carbon.typography.heading04.line-height}", + "cds-g100": "{carbon.typography.heading04.line-height}" + }, "key": "{typography.display-400.line-height}" }, "name": "token-typography-display-400-line-height", @@ -7122,13 +14526,62 @@ "line-height" ] }, + { + "key": "{typography.display-400.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": 0, + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.heading04.letter-spacing}", + "cds-g10": "{carbon.typography.heading04.letter-spacing}", + "cds-g90": "{carbon.typography.heading04.letter-spacing}", + "cds-g100": "{carbon.typography.heading04.letter-spacing}" + }, + "key": "{typography.display-400.letter-spacing}" + }, + "name": "token-typography-display-400-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "letter-spacing" + ] + }, { "key": "{typography.display-300.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.text}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-300.font-family}" }, "name": "token-typography-display-300-font-family", @@ -7147,11 +14600,25 @@ "$value": "1.125rem", "unit": "px", "comment": "18px/1.125rem", + "$modes": { + "default": "18", + "cds-g0": "1.25rem", + "cds-g10": "1.25rem", + "cds-g90": "1.25rem", + "cds-g100": "1.25rem" + }, "original": { "$type": "font-size", "$value": "18", "unit": "px", "comment": "18px/1.125rem", + "$modes": { + "default": "18", + "cds-g0": "{carbon.typography.heading03.font-size}", + "cds-g10": "{carbon.typography.heading03.font-size}", + "cds-g90": "{carbon.typography.heading03.font-size}", + "cds-g100": "{carbon.typography.heading03.font-size}" + }, "key": "{typography.display-300.font-size}" }, "name": "token-typography-display-300-font-size", @@ -7169,10 +14636,24 @@ "$type": "number", "$value": 1.3333, "comment": "24px", + "$modes": { + "default": 1.3333, + "cds-g0": 1.4, + "cds-g10": 1.4, + "cds-g90": 1.4, + "cds-g100": 1.4 + }, "original": { "$type": "number", "$value": 1.3333, "comment": "24px", + "$modes": { + "default": 1.3333, + "cds-g0": "{carbon.typography.heading03.line-height}", + "cds-g10": "{carbon.typography.heading03.line-height}", + "cds-g90": "{carbon.typography.heading03.line-height}", + "cds-g100": "{carbon.typography.heading03.line-height}" + }, "key": "{typography.display-300.line-height}" }, "name": "token-typography-display-300-line-height", @@ -7190,12 +14671,24 @@ "$type": "letter-spacing", "$value": "-0.5px", "unit": "px", - "comment": "this is `tracking`", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, "original": { "$type": "letter-spacing", "$value": -0.5, "unit": "px", - "comment": "this is `tracking`", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading03.letter-spacing}", + "cds-g10": "{carbon.typography.heading03.letter-spacing}", + "cds-g90": "{carbon.typography.heading03.letter-spacing}", + "cds-g100": "{carbon.typography.heading03.letter-spacing}" + }, "key": "{typography.display-300.letter-spacing}" }, "name": "token-typography-display-300-letter-spacing", @@ -7212,9 +14705,23 @@ "key": "{typography.display-200.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.display}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-200.font-family}" }, "name": "token-typography-display-200-font-family", @@ -7233,11 +14740,25 @@ "$value": "1rem", "unit": "px", "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, "original": { "$type": "font-size", "$value": "16", "unit": "px", "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.heading02.font-size}", + "cds-g10": "{carbon.typography.heading02.font-size}", + "cds-g90": "{carbon.typography.heading02.font-size}", + "cds-g100": "{carbon.typography.heading02.font-size}" + }, "key": "{typography.display-200.font-size}" }, "name": "token-typography-display-200-font-size", @@ -7255,10 +14776,24 @@ "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, "original": { "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": "{carbon.typography.heading02.line-height}", + "cds-g10": "{carbon.typography.heading02.line-height}", + "cds-g90": "{carbon.typography.heading02.line-height}", + "cds-g100": "{carbon.typography.heading02.line-height}" + }, "key": "{typography.display-200.line-height}" }, "name": "token-typography-display-200-line-height", @@ -7276,12 +14811,24 @@ "$type": "letter-spacing", "$value": "-0.5px", "unit": "px", - "comment": "this is `tracking`", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, "original": { "$type": "letter-spacing", "$value": -0.5, "unit": "px", - "comment": "this is `tracking`", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading02.letter-spacing}", + "cds-g10": "{carbon.typography.heading02.letter-spacing}", + "cds-g90": "{carbon.typography.heading02.letter-spacing}", + "cds-g100": "{carbon.typography.heading02.letter-spacing}" + }, "key": "{typography.display-200.letter-spacing}" }, "name": "token-typography-display-200-letter-spacing", @@ -7298,9 +14845,23 @@ "key": "{typography.display-100.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{typography.font-stack.display}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-100.font-family}" }, "name": "token-typography-display-100-font-family", @@ -7319,11 +14880,25 @@ "$value": "0.8125rem", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", "$value": "13", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.heading01.font-size}", + "cds-g10": "{carbon.typography.heading01.font-size}", + "cds-g90": "{carbon.typography.heading01.font-size}", + "cds-g100": "{carbon.typography.heading01.font-size}" + }, "key": "{typography.display-100.font-size}" }, "name": "token-typography-display-100-font-size", @@ -7341,10 +14916,24 @@ "$type": "number", "$value": 1.3846, "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", "$value": 1.3846, "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": "{carbon.typography.heading01.line-height}", + "cds-g10": "{carbon.typography.heading01.line-height}", + "cds-g90": "{carbon.typography.heading01.line-height}", + "cds-g100": "{carbon.typography.heading01.line-height}" + }, "key": "{typography.display-100.line-height}" }, "name": "token-typography-display-100-line-height", @@ -7357,13 +14946,62 @@ "line-height" ] }, + { + "key": "{typography.display-100.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0.16px", + "cds-g10": "0.16px", + "cds-g90": "0.16px", + "cds-g100": "0.16px" + }, + "original": { + "$type": "letter-spacing", + "$value": 0, + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.heading01.letter-spacing}", + "cds-g10": "{carbon.typography.heading01.letter-spacing}", + "cds-g90": "{carbon.typography.heading01.letter-spacing}", + "cds-g100": "{carbon.typography.heading01.letter-spacing}" + }, + "key": "{typography.display-100.letter-spacing}" + }, + "name": "token-typography-display-100-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "letter-spacing" + ] + }, { "key": "{typography.body-300.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.text}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-300.font-family}" }, "name": "token-typography-body-300-font-family", @@ -7382,11 +15020,25 @@ "$value": "1rem", "unit": "px", "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, "original": { "$type": "font-size", "$value": "16", "unit": "px", "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.body02.font-size}", + "cds-g10": "{carbon.typography.body02.font-size}", + "cds-g90": "{carbon.typography.body02.font-size}", + "cds-g100": "{carbon.typography.body02.font-size}" + }, "key": "{typography.body-300.font-size}" }, "name": "token-typography-body-300-font-size", @@ -7404,10 +15056,24 @@ "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, "original": { "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": "{carbon.typography.body02.line-height}", + "cds-g10": "{carbon.typography.body02.line-height}", + "cds-g90": "{carbon.typography.body02.line-height}", + "cds-g100": "{carbon.typography.body02.line-height}" + }, "key": "{typography.body-300.line-height}" }, "name": "token-typography-body-300-line-height", @@ -7424,9 +15090,23 @@ "key": "{typography.body-200.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.text}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-200.font-family}" }, "name": "token-typography-body-200-font-family", @@ -7445,11 +15125,25 @@ "$value": "0.875rem", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", "$value": "14", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "{carbon.typography.body01.font-size}", + "cds-g10": "{carbon.typography.body01.font-size}", + "cds-g90": "{carbon.typography.body01.font-size}", + "cds-g100": "{carbon.typography.body01.font-size}" + }, "key": "{typography.body-200.font-size}" }, "name": "token-typography-body-200-font-size", @@ -7467,10 +15161,24 @@ "$type": "number", "$value": 1.4286, "comment": "20px", + "$modes": { + "default": 1.4286, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", "$value": 1.4286, "comment": "20px", + "$modes": { + "default": 1.4286, + "cds-g0": "{carbon.typography.body01.line-height}", + "cds-g10": "{carbon.typography.body01.line-height}", + "cds-g90": "{carbon.typography.body01.line-height}", + "cds-g100": "{carbon.typography.body01.line-height}" + }, "key": "{typography.body-200.line-height}" }, "name": "token-typography-body-200-line-height", @@ -7487,9 +15195,23 @@ "key": "{typography.body-100.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.text}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-100.font-family}" }, "name": "token-typography-body-100-font-family", @@ -7508,11 +15230,25 @@ "$value": "0.8125rem", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", "$value": "13", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.bodyCompact01.font-size}", + "cds-g10": "{carbon.typography.bodyCompact01.font-size}", + "cds-g90": "{carbon.typography.bodyCompact01.font-size}", + "cds-g100": "{carbon.typography.bodyCompact01.font-size}" + }, "key": "{typography.body-100.font-size}" }, "name": "token-typography-body-100-font-size", @@ -7530,10 +15266,24 @@ "$type": "number", "$value": 1.3846, "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, "original": { "$type": "number", "$value": 1.3846, "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": "{carbon.typography.bodyCompact01.line-height}", + "cds-g10": "{carbon.typography.bodyCompact01.line-height}", + "cds-g90": "{carbon.typography.bodyCompact01.line-height}", + "cds-g100": "{carbon.typography.bodyCompact01.line-height}" + }, "key": "{typography.body-100.line-height}" }, "name": "token-typography-body-100-line-height", @@ -7547,65 +15297,107 @@ ] }, { - "key": "{typography.code-100.font-family}", + "key": "{typography.code-300.font-family}", "$type": "font-family", "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "default": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.code}", - "key": "{typography.code-100.font-family}" + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-300.font-family}" }, - "name": "token-typography-code-100-font-family", + "name": "token-typography-code-300-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "font-family" ] }, { - "key": "{typography.code-100.font-size}", + "key": "{typography.code-300.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "1rem", "unit": "px", - "comment": "13px/0.8125rem", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "13", + "$value": "16", "unit": "px", - "comment": "13px/0.8125rem", - "key": "{typography.code-100.font-size}" + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-300.font-size}" }, - "name": "token-typography-code-100-font-size", + "name": "token-typography-code-300-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "font-size" ] }, { - "key": "{typography.code-100.line-height}", + "key": "{typography.code-300.line-height}", "$type": "number", - "$value": 1.23, - "comment": "16px", + "$value": 1.25, + "comment": "20px", + "$modes": { + "default": 1.25, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.23, - "comment": "16px", - "key": "{typography.code-100.line-height}" + "$value": 1.25, + "comment": "20px", + "$modes": { + "default": 1.25, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-300.line-height}" }, - "name": "token-typography-code-100-line-height", + "name": "token-typography-code-300-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "line-height" ] }, @@ -7613,9 +15405,23 @@ "key": "{typography.code-200.font-family}", "$type": "font-family", "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "default": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.code}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, "key": "{typography.code-200.font-family}" }, "name": "token-typography-code-200-font-family", @@ -7634,11 +15440,25 @@ "$value": "0.875rem", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", "$value": "14", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, "key": "{typography.code-200.font-size}" }, "name": "token-typography-code-200-font-size", @@ -7656,10 +15476,24 @@ "$type": "number", "$value": 1.125, "comment": "18px", + "$modes": { + "default": 1.125, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", "$value": 1.125, "comment": "18px", + "$modes": { + "default": 1.125, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, "key": "{typography.code-200.line-height}" }, "name": "token-typography-code-200-line-height", @@ -7673,65 +15507,107 @@ ] }, { - "key": "{typography.code-300.font-family}", + "key": "{typography.code-100.font-family}", "$type": "font-family", "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "default": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.code}", - "key": "{typography.code-300.font-family}" + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-100.font-family}" }, - "name": "token-typography-code-300-font-family", + "name": "token-typography-code-100-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "font-family" ] }, { - "key": "{typography.code-300.font-size}", + "key": "{typography.code-100.font-size}", "$type": "font-size", - "$value": "1rem", + "$value": "0.8125rem", "unit": "px", - "comment": "16px/1rem", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "16", + "$value": "13", "unit": "px", - "comment": "16px/1rem", - "key": "{typography.code-300.font-size}" + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-100.font-size}" }, - "name": "token-typography-code-300-font-size", + "name": "token-typography-code-100-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "font-size" ] }, { - "key": "{typography.code-300.line-height}", + "key": "{typography.code-100.line-height}", "$type": "number", - "$value": 1.25, - "comment": "20px", + "$value": 1.23, + "comment": "16px", + "$modes": { + "default": 1.23, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, "original": { "$type": "number", - "$value": 1.25, - "comment": "20px", - "key": "{typography.code-300.line-height}" + "$value": 1.23, + "comment": "16px", + "$modes": { + "default": 1.23, + "cds-g0": "{carbon.typography.code01.line-height}", + "cds-g10": "{carbon.typography.code01.line-height}", + "cds-g90": "{carbon.typography.code01.line-height}", + "cds-g100": "{carbon.typography.code01.line-height}" + }, + "key": "{typography.code-100.line-height}" }, - "name": "token-typography-code-300-line-height", + "name": "token-typography-code-100-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "line-height" ] } diff --git a/packages/tokens/dist/marketing/css/helpers/color.css b/packages/tokens/dist/marketing/css/helpers/color.css index 9dd87a49f3b..c5938c8456d 100644 --- a/packages/tokens/dist/marketing/css/helpers/color.css +++ b/packages/tokens/dist/marketing/css/helpers/color.css @@ -35,6 +35,7 @@ .hds-surface-primary { background-color: var(--token-color-surface-primary); } .hds-surface-faint { background-color: var(--token-color-surface-faint); } .hds-surface-strong { background-color: var(--token-color-surface-strong); } +.hds-surface-high-contrast { background-color: var(--token-color-surface-high-contrast); } .hds-surface-interactive { background-color: var(--token-color-surface-interactive); } .hds-surface-interactive-hover { background-color: var(--token-color-surface-interactive-hover); } .hds-surface-interactive-active { background-color: var(--token-color-surface-interactive-active); } diff --git a/packages/tokens/dist/marketing/css/helpers/typography.css b/packages/tokens/dist/marketing/css/helpers/typography.css index c0913ef1a67..63dd3021863 100644 --- a/packages/tokens/dist/marketing/css/helpers/typography.css +++ b/packages/tokens/dist/marketing/css/helpers/typography.css @@ -17,6 +17,6 @@ .hds-typography-body-300 { font-family: var(--token-typography-body-300-font-family); font-size: var(--token-typography-body-300-font-size); line-height: var(--token-typography-body-300-line-height); margin: 0; padding: 0; } .hds-typography-body-200 { font-family: var(--token-typography-body-200-font-family); font-size: var(--token-typography-body-200-font-size); line-height: var(--token-typography-body-200-line-height); margin: 0; padding: 0; } .hds-typography-body-100 { font-family: var(--token-typography-body-100-font-family); font-size: var(--token-typography-body-100-font-size); line-height: var(--token-typography-body-100-line-height); margin: 0; padding: 0; } -.hds-typography-code-100 { font-family: var(--token-typography-code-100-font-family); font-size: var(--token-typography-code-100-font-size); line-height: var(--token-typography-code-100-line-height); margin: 0; padding: 0; } -.hds-typography-code-200 { font-family: var(--token-typography-code-200-font-family); font-size: var(--token-typography-code-200-font-size); line-height: var(--token-typography-code-200-line-height); margin: 0; padding: 0; } .hds-typography-code-300 { font-family: var(--token-typography-code-300-font-family); font-size: var(--token-typography-code-300-font-size); line-height: var(--token-typography-code-300-line-height); margin: 0; padding: 0; } +.hds-typography-code-200 { font-family: var(--token-typography-code-200-font-family); font-size: var(--token-typography-code-200-font-size); line-height: var(--token-typography-code-200-line-height); margin: 0; padding: 0; } +.hds-typography-code-100 { font-family: var(--token-typography-code-100-font-family); font-size: var(--token-typography-code-100-font-size); line-height: var(--token-typography-code-100-line-height); margin: 0; padding: 0; } diff --git a/packages/tokens/dist/marketing/css/tokens.css b/packages/tokens/dist/marketing/css/tokens.css index d848059dd4f..73161d316a1 100644 --- a/packages/tokens/dist/marketing/css/tokens.css +++ b/packages/tokens/dist/marketing/css/tokens.css @@ -7,6 +7,7 @@ --token-border-radius-small: 5px; --token-border-radius-medium: 6px; --token-border-radius-large: 8px; + --token-border-radius-rounded: 1000000000px; --token-color-palette-blue-500: #1c345f; --token-color-palette-blue-400: #0046d1; --token-color-palette-blue-300: #0c56e9; @@ -86,6 +87,7 @@ --token-color-surface-primary: #ffffff; --token-color-surface-faint: #fafafa; --token-color-surface-strong: #f1f2f3; + --token-color-surface-high-contrast: #0c0c0e; --token-color-surface-interactive: #ffffff; --token-color-surface-interactive-hover: #f1f2f3; --token-color-surface-interactive-active: #dedfe3; @@ -147,7 +149,7 @@ --token-color-vagrant-gradient-faint-start: #f4faff; /** this is the 'vagrant-50' value at 25% opacity on white */ --token-color-vagrant-gradient-faint-stop: #d6ebff; --token-color-vault-radar-brand: #ffcf25; - --token-color-vault-radar-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault radar would not work */ + --token-color-vault-radar-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ --token-color-vault-radar-foreground: #9a6f00; --token-color-vault-radar-surface: #fff9cf; --token-color-vault-radar-border: #feec7b; @@ -196,6 +198,7 @@ --token-surface-overlay-box-shadow: 0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; --token-focus-ring-action-box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff; --token-focus-ring-critical-box-shadow: inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578; + --token-app-footer-focus-color-action-internal: var(--token-color-focus-action-internal); --token-app-header-height: 60px; --token-app-header-home-link-size: 36px; --token-app-header-logo-size: 28px; @@ -223,6 +226,147 @@ --token-app-side-nav-color-surface-primary: var(--token-color-surface-faint); --token-app-side-nav-color-surface-interactive-hover: var(--token-color-surface-interactive-hover); --token-app-side-nav-color-surface-interactive-active: var(--token-color-palette-neutral-300); + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-count-padding-horizontal-medium: 12px; + --token-badge-count-padding-horizontal-large: 14px; + --token-badge-height-small: 20px; + --token-badge-height-medium: 24px; + --token-badge-height-large: 32px; + --token-badge-padding-horizontal-small: 6px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-large: 8px; + --token-badge-padding-vertical-small: 2px; + --token-badge-padding-vertical-medium: 4px; + --token-badge-padding-vertical-large: 4px; + --token-badge-gap-small: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-large: 6px; + --token-badge-typography-font-size-small: 0.8125rem; + --token-badge-typography-font-size-medium: 0.8125rem; + --token-badge-typography-font-size-large: 1rem; + --token-badge-typography-line-height-small: 1.2308; /** 16px = 1.2308 */ + --token-badge-typography-line-height-medium: 1.2308; /** 16px = 1.2308 */ + --token-badge-typography-line-height-large: 1.5; /** 24px = 1.5 */ + --token-badge-foreground-color-neutral-filled: #3b3d45; + --token-badge-foreground-color-neutral-inverted: #ffffff; + --token-badge-foreground-color-neutral-outlined: #3b3d45; + --token-badge-foreground-color-neutral-dark-mode-filled: #ffffff; + --token-badge-foreground-color-neutral-dark-mode-inverted: #3b3d45; + --token-badge-foreground-color-neutral-dark-mode-outlined: #ffffff; + --token-badge-foreground-color-highlight-filled: #7b00db; /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: #ffffff; + --token-badge-foreground-color-highlight-outlined: #a737ff; + --token-badge-foreground-color-success-filled: #006619; /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: #ffffff; + --token-badge-foreground-color-success-outlined: #008a22; + --token-badge-foreground-color-warning-filled: #803d00; + --token-badge-foreground-color-warning-inverted: #ffffff; + --token-badge-foreground-color-warning-outlined: #bb5a00; + --token-badge-foreground-color-critical-filled: #940004; /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: #ffffff; + --token-badge-foreground-color-critical-outlined: #e52228; + --token-badge-surface-color-neutral-filled: #dedfe3; + --token-badge-surface-color-neutral-inverted: #656a76; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-neutral-outlined: rgba(0, 0, 0, 0); + --token-badge-surface-color-neutral-dark-mode-filled: #656a76; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: #fafafa; + --token-badge-surface-color-neutral-dark-mode-outlined: rgba(0, 0, 0, 0); + --token-badge-surface-color-highlight-filled: #ead2fe; /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: #a737ff; + --token-badge-surface-color-success-filled: #cceeda; /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: #008a22; + --token-badge-surface-color-warning-filled: #fbeabf; /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: #bb5a00; + --token-badge-surface-color-critical-filled: #fbd4d4; /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: #e52228; + --token-badge-border-radius: 5px; + --token-badge-icon-size-small: 12px; + --token-badge-icon-size-medium: 16px; + --token-badge-icon-size-large: 16px; + --token-button-height-small: 28px; + --token-button-height-medium: 36px; + --token-button-height-large: 48px; + --token-button-padding-horizontal-small: 11px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-large: 19px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 9px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 11px; /** here we're taking into account the 1px border */ + --token-button-gap: 6px; + --token-button-typography-font-size-small: 0.8125rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-large: 1rem; + --token-button-typography-line-height-small: 0.9286; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-button-typography-line-height-medium: 1.1429; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-large: 1.5; /** 24px = 1.5 */ + --token-button-foreground-color-primary-default: #ffffff; + --token-button-foreground-color-primary-hover: #ffffff; + --token-button-foreground-color-primary-focus: #ffffff; + --token-button-foreground-color-primary-active: #ffffff; + --token-button-foreground-color-secondary-default: #3b3d45; + --token-button-foreground-color-secondary-hover: #3b3d45; + --token-button-foreground-color-secondary-focus: #3b3d45; + --token-button-foreground-color-secondary-active: #3b3d45; + --token-button-foreground-color-tertiary-default: #1060ff; + --token-button-foreground-color-tertiary-hover: #0c56e9; + --token-button-foreground-color-tertiary-focus: #1060ff; + --token-button-foreground-color-tertiary-active: #0046d1; + --token-button-foreground-color-critical-default: #c00005; + --token-button-foreground-color-critical-hover: #ffffff; + --token-button-foreground-color-critical-focus: #c00005; + --token-button-foreground-color-critical-active: #ffffff; + --token-button-foreground-color-disabled: #8c909c; + --token-button-surface-color-primary-default: #1060ff; + --token-button-surface-color-primary-hover: #0c56e9; + --token-button-surface-color-primary-focus: #1060ff; + --token-button-surface-color-primary-active: #0046d1; + --token-button-surface-color-secondary-default: #fafafa; + --token-button-surface-color-secondary-hover: #ffffff; + --token-button-surface-color-secondary-focus: #fafafa; + --token-button-surface-color-secondary-active: #dedfe3; + --token-button-surface-color-tertiary-default: rgba(0, 0, 0, 0); + --token-button-surface-color-tertiary-hover: #ffffff; + --token-button-surface-color-tertiary-focus: rgba(0, 0, 0, 0); + --token-button-surface-color-tertiary-active: #dedfe3; + --token-button-surface-color-critical-default: #fff5f5; + --token-button-surface-color-critical-hover: #c00005; + --token-button-surface-color-critical-focus: #fff5f5; + --token-button-surface-color-critical-active: #940004; + --token-button-surface-color-disabled: #fafafa; + --token-button-border-width: 1px; + --token-button-border-radius: 5px; + --token-button-border-color-primary-default: #0c56e9; + --token-button-border-color-primary-hover: #0c56e9; + --token-button-border-color-primary-focus-internal: #0c56e9; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-focus-external: #5990ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-active: #0046d1; + --token-button-border-color-secondary-default: #3b3d4566; + --token-button-border-color-secondary-hover: #3b3d4566; + --token-button-border-color-secondary-focus-internal: #0c56e9; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-focus-external: #5990ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-active: #3b3d4566; + --token-button-border-color-tertiary-default: rgba(0, 0, 0, 0); + --token-button-border-color-tertiary-hover: #3b3d4566; + --token-button-border-color-tertiary-focus-internal: #0c56e9; + --token-button-border-color-tertiary-focus-external: #5990ff; + --token-button-border-color-tertiary-active: #3b3d4566; + --token-button-border-color-critical-default: #c00005; + --token-button-border-color-critical-hover: #940004; + --token-button-border-color-critical-focus-internal: #c00005; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-focus-external: #dd7578; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-active: #940004; + --token-button-border-color-disabled: #656a7633; + --token-button-focus-border-width: 3px; + --token-button-icon-size-small: 12px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-large: 24px; + --token-dismiss-button-size: 24px; + --token-dismiss-button-foreground-color-default: #656a76; + --token-dismiss-button-foreground-color-active: #0c0c0e; + --token-dismiss-button-surface-color-hover: rgba(222, 223, 227, 0.4); + --token-dismiss-button-surface-color-active: rgba(222, 223, 227, 0.4); + --token-dismiss-button-border-color-active: #3b3d4566; + --token-dismiss-button-icon-size: 16px; --token-form-label-color: #0c0c0e; --token-form-legend-color: #0c0c0e; --token-form-helper-text-color: #656a76; @@ -267,6 +411,9 @@ --token-form-radiocard-group-gap: 16px; --token-form-radiocard-border-width: 1px; --token-form-radiocard-border-radius: 6px; + --token-form-radiocard-border-color-default: #ffffff; + --token-form-radiocard-border-color-focus: #0c56e9; + --token-form-radiocard-border-color-default-checked: #0c56e9; --token-form-radiocard-content-padding: 24px; --token-form-radiocard-control-padding: 8px; --token-form-radiocard-transition-duration: 0.2s; @@ -294,6 +441,9 @@ --token-form-toggle-transition-duration: 0.2s; --token-form-toggle-transition-timing-function: cubic-bezier(0.68, -0.2, 0.265, 1.15); --token-form-toggle-thumb-size: 16px; + --token-icon-tile-border-color-overlay: #656a7633; + --token-icon-tile-border-color-logo: #656a7633; + --token-icon-tile-surface-color-overlay: #ffffff; --token-pagination-nav-control-height: 36px; --token-pagination-nav-control-padding-horizontal: 12px; --token-pagination-nav-control-focus-inset: 4px; @@ -302,6 +452,15 @@ --token-pagination-nav-indicator-spacing: 6px; --token-pagination-child-spacing-vertical: 8px; --token-pagination-child-spacing-horizontal: 20px; + --token-rich-tooltip-bubble-max-width: 280px; + --token-rich-tooltip-bubble-border-color: #656a7633; + --token-rich-tooltip-bubble-border-radius: 5px; + --token-rich-tooltip-bubble-arrow-size: 20px; + --token-rich-tooltip-toggle-gap-horizontal: 4px; + --token-rich-tooltip-toggle-foreground-color-default: #0c0c0e; + --token-rich-tooltip-toggle-foreground-color-hover: #3b3d45; + --token-rich-tooltip-toggle-foreground-color-active: #656a76; + --token-rich-tooltip-toggle-icon-size: 1em; --token-tabs-tab-height-medium: 36px; --token-tabs-tab-height-large: 48px; --token-tabs-tab-padding-horizontal-medium: 12px; @@ -314,13 +473,14 @@ --token-tabs-indicator-transition-function: cubic-bezier(0.5, 1, 0.89, 1); --token-tabs-indicator-transition-duration: 0.6s; --token-tabs-divider-height: 1px; - --token-tooltip-border-radius: 5px; - --token-tooltip-color-foreground-primary: var(--token-color-foreground-high-contrast); - --token-tooltip-color-surface-primary: var(--token-color-palette-neutral-700); - --token-tooltip-focus-offset: -2px; --token-tooltip-max-width: 280px; --token-tooltip-padding-horizontal: 12px; --token-tooltip-padding-vertical: 8px; + --token-tooltip-border-radius: 5px; + --token-tooltip-caret-clip-path: path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z'); + --token-tooltip-caret-height: 7px; + --token-tooltip-caret-width: 16px; + --token-tooltip-focus-offset: -2px; --token-tooltip-transition-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); --token-typography-font-stack-display: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-font-stack-text: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; @@ -332,20 +492,23 @@ --token-typography-display-500-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-display-500-font-size: 1.875rem; /** 30px/1.875rem */ --token-typography-display-500-line-height: 1.2666; /** 38px */ + --token-typography-display-500-letter-spacing: -0.5px; --token-typography-display-400-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-display-400-font-size: 1.5rem; /** 24px/1.5rem */ --token-typography-display-400-line-height: 1.3333; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; --token-typography-display-300-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-display-300-font-size: 1.125rem; /** 18px/1.125rem */ --token-typography-display-300-line-height: 1.3333; /** 24px */ - --token-typography-display-300-letter-spacing: -0.5px; /** this is `tracking` */ + --token-typography-display-300-letter-spacing: -0.5px; --token-typography-display-200-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ --token-typography-display-200-line-height: 1.5; /** 24px */ - --token-typography-display-200-letter-spacing: -0.5px; /** this is `tracking` */ + --token-typography-display-200-letter-spacing: -0.5px; --token-typography-display-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-display-100-font-size: 0.8125rem; /** 13px/0.8125rem */ --token-typography-display-100-line-height: 1.3846; /** 18px */ + --token-typography-display-100-letter-spacing: 0px; --token-typography-body-300-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ --token-typography-body-300-line-height: 1.5; /** 24px */ @@ -355,13 +518,13 @@ --token-typography-body-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-body-100-font-size: 0.8125rem; /** 13px/0.8125rem */ --token-typography-body-100-line-height: 1.3846; /** 18px */ - --token-typography-code-100-font-family: ui-monospace, Menlo, Consolas, monospace; - --token-typography-code-100-font-size: 0.8125rem; /** 13px/0.8125rem */ - --token-typography-code-100-line-height: 1.23; /** 16px */ - --token-typography-code-200-font-family: ui-monospace, Menlo, Consolas, monospace; - --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ - --token-typography-code-200-line-height: 1.125; /** 18px */ --token-typography-code-300-font-family: ui-monospace, Menlo, Consolas, monospace; --token-typography-code-300-font-size: 1rem; /** 16px/1rem */ --token-typography-code-300-line-height: 1.25; /** 20px */ + --token-typography-code-200-font-family: ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.125; /** 18px */ + --token-typography-code-100-font-family: ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-100-font-size: 0.8125rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.23; /** 16px */ } diff --git a/packages/tokens/dist/marketing/tokens.json b/packages/tokens/dist/marketing/tokens.json index 2fbb92aa020..6dafcedb1c2 100644 --- a/packages/tokens/dist/marketing/tokens.json +++ b/packages/tokens/dist/marketing/tokens.json @@ -6,12 +6,26 @@ "$type": "dimension", "$value": "3px", "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, "filePath": "src/global/border/radius.json", "isSource": true, "original": { "$type": "dimension", "$value": "3", "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, "key": "{border.radius.x-small}" }, "name": "token-border-radius-x-small", @@ -29,12 +43,26 @@ "$type": "dimension", "$value": "5px", "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, "filePath": "src/global/border/radius.json", "isSource": true, "original": { "$type": "dimension", "$value": "5", "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, "key": "{border.radius.small}" }, "name": "token-border-radius-small", @@ -52,12 +80,26 @@ "$type": "dimension", "$value": "6px", "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, "filePath": "src/global/border/radius.json", "isSource": true, "original": { "$type": "dimension", "$value": "6", "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, "key": "{border.radius.medium}" }, "name": "token-border-radius-medium", @@ -75,12 +117,26 @@ "$type": "dimension", "$value": "8px", "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, "filePath": "src/global/border/radius.json", "isSource": true, "original": { "$type": "dimension", "$value": "8", "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, "key": "{border.radius.large}" }, "name": "token-border-radius-large", @@ -92,6 +148,29 @@ "radius", "large" ] + }, + "rounded": { + "key": "{border.radius.rounded}", + "$type": "dimension", + "$value": "1000000000px", + "unit": "px", + "filePath": "src/global/border/radius.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "1000000000", + "unit": "px", + "key": "{border.radius.rounded}" + }, + "name": "token-border-radius-rounded", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "rounded" + ] } } }, @@ -102,12 +181,26 @@ "$type": "color", "$value": "#1c345f", "group": "palette", + "$modes": { + "default": "#1c345f", + "cds-g0": "#001141", + "cds-g10": "#001141", + "cds-g90": "#001141", + "cds-g100": "#001141" + }, "filePath": "src/global/color/palette-accents.json", "isSource": true, "original": { "$type": "color", "$value": "#1c345f", "group": "palette", + "$modes": { + "default": "#1c345f", + "cds-g0": "{carbon.color.blue.100}", + "cds-g10": "{carbon.color.blue.100}", + "cds-g90": "{carbon.color.blue.100}", + "cds-g100": "{carbon.color.blue.100}" + }, "key": "{color.palette.blue-500}" }, "name": "token-color-palette-blue-500", @@ -125,12 +218,26 @@ "$type": "color", "$value": "#0046d1", "group": "palette", + "$modes": { + "default": "#0046d1", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#002d9c", + "cds-g100": "#002d9c" + }, "filePath": "src/global/color/palette-accents.json", "isSource": true, "original": { "$type": "color", "$value": "#0046d1", "group": "palette", + "$modes": { + "default": "#0046d1", + "cds-g0": "{carbon.color.blue.80}", + "cds-g10": "{carbon.color.blue.80}", + "cds-g90": "{carbon.color.blue.80}", + "cds-g100": "{carbon.color.blue.80}" + }, "key": "{color.palette.blue-400}" }, "name": "token-color-palette-blue-400", @@ -148,12 +255,26 @@ "$type": "color", "$value": "#0c56e9", "group": "palette", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, "filePath": "src/global/color/palette-accents.json", "isSource": true, "original": { "$type": "color", "$value": "#0c56e9", "group": "palette", + "$modes": { + "default": "#0c56e9", + "cds-g0": "{carbon.color.blue.70}", + "cds-g10": "{carbon.color.blue.70}", + "cds-g90": "{carbon.color.blue.70}", + "cds-g100": "{carbon.color.blue.70}" + }, "key": "{color.palette.blue-300}" }, "name": "token-color-palette-blue-300", @@ -171,12 +292,26 @@ "$type": "color", "$value": "#1060ff", "group": "palette", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, "filePath": "src/global/color/palette-accents.json", "isSource": true, "original": { "$type": "color", "$value": "#1060ff", "group": "palette", + "$modes": { + "default": "#1060ff", + "cds-g0": "{carbon.color.blue.60}", + "cds-g10": "{carbon.color.blue.60}", + "cds-g90": "{carbon.color.blue.60}", + "cds-g100": "{carbon.color.blue.60}" + }, "key": "{color.palette.blue-200}" }, "name": "token-color-palette-blue-200", @@ -194,12 +329,26 @@ "$type": "color", "$value": "#cce3fe", "group": "palette", + "$modes": { + "default": "#cce3fe", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, "filePath": "src/global/color/palette-accents.json", "isSource": true, "original": { "$type": "color", "$value": "#cce3fe", "group": "palette", + "$modes": { + "default": "#cce3fe", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.20}", + "cds-g100": "{carbon.color.blue.20}" + }, "key": "{color.palette.blue-100}" }, "name": "token-color-palette-blue-100", @@ -217,12 +366,26 @@ "$type": "color", "$value": "#f2f8ff", "group": "palette", + "$modes": { + "default": "#f2f8ff", + "cds-g0": "#edf5ff", + "cds-g10": "#edf5ff", + "cds-g90": "#edf5ff", + "cds-g100": "#edf5ff" + }, "filePath": "src/global/color/palette-accents.json", "isSource": true, "original": { "$type": "color", "$value": "#f2f8ff", "group": "palette", + "$modes": { + "default": "#f2f8ff", + "cds-g0": "{carbon.color.blue.10}", + "cds-g10": "{carbon.color.blue.10}", + "cds-g90": "{carbon.color.blue.10}", + "cds-g100": "{carbon.color.blue.10}" + }, "key": "{color.palette.blue-50}" }, "name": "token-color-palette-blue-50", @@ -240,12 +403,26 @@ "$type": "color", "$value": "#42215b", "group": "palette", + "$modes": { + "default": "#42215b", + "cds-g0": "#31135e", + "cds-g10": "#31135e", + "cds-g90": "#31135e", + "cds-g100": "#31135e" + }, "filePath": "src/global/color/palette-accents.json", "isSource": true, "original": { "$type": "color", "$value": "#42215b", "group": "palette", + "$modes": { + "default": "#42215b", + "cds-g0": "{carbon.color.purple.90}", + "cds-g10": "{carbon.color.purple.90}", + "cds-g90": "{carbon.color.purple.90}", + "cds-g100": "{carbon.color.purple.90}" + }, "key": "{color.palette.purple-500}" }, "name": "token-color-palette-purple-500", @@ -263,12 +440,26 @@ "$type": "color", "$value": "#7b00db", "group": "palette", + "$modes": { + "default": "#7b00db", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, "filePath": "src/global/color/palette-accents.json", "isSource": true, "original": { "$type": "color", "$value": "#7b00db", "group": "palette", + "$modes": { + "default": "#7b00db", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, "key": "{color.palette.purple-400}" }, "name": "token-color-palette-purple-400", @@ -286,12 +477,26 @@ "$type": "color", "$value": "#911ced", "group": "palette", + "$modes": { + "default": "#911ced", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#8a3ffc", + "cds-g100": "#8a3ffc" + }, "filePath": "src/global/color/palette-accents.json", "isSource": true, "original": { "$type": "color", "$value": "#911ced", "group": "palette", + "$modes": { + "default": "#911ced", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.60}", + "cds-g100": "{carbon.color.purple.60}" + }, "key": "{color.palette.purple-300}" }, "name": "token-color-palette-purple-300", @@ -309,12 +514,26 @@ "$type": "color", "$value": "#a737ff", "group": "palette", + "$modes": { + "default": "#a737ff", + "cds-g0": "#a56eff", + "cds-g10": "#a56eff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, "filePath": "src/global/color/palette-accents.json", "isSource": true, "original": { "$type": "color", "$value": "#a737ff", "group": "palette", + "$modes": { + "default": "#a737ff", + "cds-g0": "{carbon.color.purple.50}", + "cds-g10": "{carbon.color.purple.50}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, "key": "{color.palette.purple-200}" }, "name": "token-color-palette-purple-200", @@ -332,12 +551,26 @@ "$type": "color", "$value": "#ead2fe", "group": "palette", + "$modes": { + "default": "#ead2fe", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, "filePath": "src/global/color/palette-accents.json", "isSource": true, "original": { "$type": "color", "$value": "#ead2fe", "group": "palette", + "$modes": { + "default": "#ead2fe", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.20}" + }, "key": "{color.palette.purple-100}" }, "name": "token-color-palette-purple-100", @@ -355,12 +588,26 @@ "$type": "color", "$value": "#f9f2ff", "group": "palette", + "$modes": { + "default": "#f9f2ff", + "cds-g0": "#f6f2ff", + "cds-g10": "#f6f2ff", + "cds-g90": "#f6f2ff", + "cds-g100": "#f6f2ff" + }, "filePath": "src/global/color/palette-accents.json", "isSource": true, "original": { "$type": "color", "$value": "#f9f2ff", "group": "palette", + "$modes": { + "default": "#f9f2ff", + "cds-g0": "{carbon.color.purple.10}", + "cds-g10": "{carbon.color.purple.10}", + "cds-g90": "{carbon.color.purple.10}", + "cds-g100": "{carbon.color.purple.10}" + }, "key": "{color.palette.purple-50}" }, "name": "token-color-palette-purple-50", @@ -378,12 +625,26 @@ "$type": "color", "$value": "#054220", "group": "palette", + "$modes": { + "default": "#054220", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#044317", + "cds-g100": "#044317" + }, "filePath": "src/global/color/palette-accents.json", "isSource": true, "original": { "$type": "color", "$value": "#054220", "group": "palette", + "$modes": { + "default": "#054220", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.80}", + "cds-g100": "{carbon.color.green.80}" + }, "key": "{color.palette.green-500}" }, "name": "token-color-palette-green-500", @@ -401,12 +662,26 @@ "$type": "color", "$value": "#006619", "group": "palette", + "$modes": { + "default": "#006619", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, "filePath": "src/global/color/palette-accents.json", "isSource": true, "original": { "$type": "color", "$value": "#006619", "group": "palette", + "$modes": { + "default": "#006619", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, "key": "{color.palette.green-400}" }, "name": "token-color-palette-green-400", @@ -424,12 +699,26 @@ "$type": "color", "$value": "#00781e", "group": "palette", + "$modes": { + "default": "#00781e", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#198038", + "cds-g100": "#198038" + }, "filePath": "src/global/color/palette-accents.json", "isSource": true, "original": { "$type": "color", "$value": "#00781e", "group": "palette", + "$modes": { + "default": "#00781e", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.60}", + "cds-g100": "{carbon.color.green.60}" + }, "key": "{color.palette.green-300}" }, "name": "token-color-palette-green-300", @@ -447,12 +736,26 @@ "$type": "color", "$value": "#008a22", "group": "palette", + "$modes": { + "default": "#008a22", + "cds-g0": "#24a148", + "cds-g10": "#24a148", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, "filePath": "src/global/color/palette-accents.json", "isSource": true, "original": { "$type": "color", "$value": "#008a22", "group": "palette", + "$modes": { + "default": "#008a22", + "cds-g0": "{carbon.color.green.50}", + "cds-g10": "{carbon.color.green.50}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, "key": "{color.palette.green-200}" }, "name": "token-color-palette-green-200", @@ -470,12 +773,26 @@ "$type": "color", "$value": "#cceeda", "group": "palette", + "$modes": { + "default": "#cceeda", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, "filePath": "src/global/color/palette-accents.json", "isSource": true, "original": { "$type": "color", "$value": "#cceeda", "group": "palette", + "$modes": { + "default": "#cceeda", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, "key": "{color.palette.green-100}" }, "name": "token-color-palette-green-100", @@ -493,12 +810,26 @@ "$type": "color", "$value": "#f2fbf6", "group": "palette", + "$modes": { + "default": "#f2fbf6", + "cds-g0": "#defbe6", + "cds-g10": "#defbe6", + "cds-g90": "#defbe6", + "cds-g100": "#defbe6" + }, "filePath": "src/global/color/palette-accents.json", "isSource": true, "original": { "$type": "color", "$value": "#f2fbf6", "group": "palette", + "$modes": { + "default": "#f2fbf6", + "cds-g0": "{carbon.color.green.10}", + "cds-g10": "{carbon.color.green.10}", + "cds-g90": "{carbon.color.green.10}", + "cds-g100": "{carbon.color.green.10}" + }, "key": "{color.palette.green-50}" }, "name": "token-color-palette-green-50", @@ -516,12 +847,26 @@ "$type": "color", "$value": "#542800", "group": "palette", + "$modes": { + "default": "#542800", + "cds-g0": "#3e1a00", + "cds-g10": "#3e1a00", + "cds-g90": "#3e1a00", + "cds-g100": "#3e1a00" + }, "filePath": "src/global/color/palette-accents.json", "isSource": true, "original": { "$type": "color", "$value": "#542800", "group": "palette", + "$modes": { + "default": "#542800", + "cds-g0": "{carbon.color.orange.90}", + "cds-g10": "{carbon.color.orange.90}", + "cds-g90": "{carbon.color.orange.90}", + "cds-g100": "{carbon.color.orange.90}" + }, "key": "{color.palette.amber-500}" }, "name": "token-color-palette-amber-500", @@ -539,12 +884,26 @@ "$type": "color", "$value": "#803d00", "group": "palette", + "$modes": { + "default": "#803d00", + "cds-g0": "#5e2900", + "cds-g10": "#5e2900", + "cds-g90": "#5e2900", + "cds-g100": "#5e2900" + }, "filePath": "src/global/color/palette-accents.json", "isSource": true, "original": { "$type": "color", "$value": "#803d00", "group": "palette", + "$modes": { + "default": "#803d00", + "cds-g0": "{carbon.color.orange.80}", + "cds-g10": "{carbon.color.orange.80}", + "cds-g90": "{carbon.color.orange.80}", + "cds-g100": "{carbon.color.orange.80}" + }, "key": "{color.palette.amber-400}" }, "name": "token-color-palette-amber-400", @@ -562,12 +921,26 @@ "$type": "color", "$value": "#9e4b00", "group": "palette", + "$modes": { + "default": "#9e4b00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, "filePath": "src/global/color/palette-accents.json", "isSource": true, "original": { "$type": "color", "$value": "#9e4b00", "group": "palette", + "$modes": { + "default": "#9e4b00", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, "key": "{color.palette.amber-300}" }, "name": "token-color-palette-amber-300", @@ -585,12 +958,26 @@ "$type": "color", "$value": "#bb5a00", "group": "palette", + "$modes": { + "default": "#bb5a00", + "cds-g0": "#ba4e00", + "cds-g10": "#ba4e00", + "cds-g90": "#ba4e00", + "cds-g100": "#ba4e00" + }, "filePath": "src/global/color/palette-accents.json", "isSource": true, "original": { "$type": "color", "$value": "#bb5a00", "group": "palette", + "$modes": { + "default": "#bb5a00", + "cds-g0": "{carbon.color.orange.60}", + "cds-g10": "{carbon.color.orange.60}", + "cds-g90": "{carbon.color.orange.60}", + "cds-g100": "{carbon.color.orange.60}" + }, "key": "{color.palette.amber-200}" }, "name": "token-color-palette-amber-200", @@ -608,12 +995,26 @@ "$type": "color", "$value": "#fbeabf", "group": "palette", + "$modes": { + "default": "#fbeabf", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, "filePath": "src/global/color/palette-accents.json", "isSource": true, "original": { "$type": "color", "$value": "#fbeabf", "group": "palette", + "$modes": { + "default": "#fbeabf", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, "key": "{color.palette.amber-100}" }, "name": "token-color-palette-amber-100", @@ -631,12 +1032,26 @@ "$type": "color", "$value": "#fff9e8", "group": "palette", + "$modes": { + "default": "#fff9e8", + "cds-g0": "#fff2e8", + "cds-g10": "#fff2e8", + "cds-g90": "#fff2e8", + "cds-g100": "#fff2e8" + }, "filePath": "src/global/color/palette-accents.json", "isSource": true, "original": { "$type": "color", "$value": "#fff9e8", "group": "palette", + "$modes": { + "default": "#fff9e8", + "cds-g0": "{carbon.color.orange.10}", + "cds-g10": "{carbon.color.orange.10}", + "cds-g90": "{carbon.color.orange.10}", + "cds-g100": "{carbon.color.orange.10}" + }, "key": "{color.palette.amber-50}" }, "name": "token-color-palette-amber-50", @@ -654,12 +1069,26 @@ "$type": "color", "$value": "#51130a", "group": "palette", + "$modes": { + "default": "#51130a", + "cds-g0": "#520408", + "cds-g10": "#520408", + "cds-g90": "#520408", + "cds-g100": "#520408" + }, "filePath": "src/global/color/palette-accents.json", "isSource": true, "original": { "$type": "color", "$value": "#51130a", "group": "palette", + "$modes": { + "default": "#51130a", + "cds-g0": "{carbon.color.red.90}", + "cds-g10": "{carbon.color.red.90}", + "cds-g90": "{carbon.color.red.90}", + "cds-g100": "{carbon.color.red.90}" + }, "key": "{color.palette.red-500}" }, "name": "token-color-palette-red-500", @@ -677,12 +1106,26 @@ "$type": "color", "$value": "#940004", "group": "palette", + "$modes": { + "default": "#940004", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#750e13", + "cds-g100": "#750e13" + }, "filePath": "src/global/color/palette-accents.json", "isSource": true, "original": { "$type": "color", "$value": "#940004", "group": "palette", + "$modes": { + "default": "#940004", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.80}", + "cds-g100": "{carbon.color.red.80}" + }, "key": "{color.palette.red-400}" }, "name": "token-color-palette-red-400", @@ -700,12 +1143,26 @@ "$type": "color", "$value": "#c00005", "group": "palette", + "$modes": { + "default": "#c00005", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, "filePath": "src/global/color/palette-accents.json", "isSource": true, "original": { "$type": "color", "$value": "#c00005", "group": "palette", + "$modes": { + "default": "#c00005", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, "key": "{color.palette.red-300}" }, "name": "token-color-palette-red-300", @@ -723,12 +1180,26 @@ "$type": "color", "$value": "#e52228", "group": "palette", + "$modes": { + "default": "#e52228", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, "filePath": "src/global/color/palette-accents.json", "isSource": true, "original": { "$type": "color", "$value": "#e52228", "group": "palette", + "$modes": { + "default": "#e52228", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.60}", + "cds-g100": "{carbon.color.red.60}" + }, "key": "{color.palette.red-200}" }, "name": "token-color-palette-red-200", @@ -746,12 +1217,26 @@ "$type": "color", "$value": "#fbd4d4", "group": "palette", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, "filePath": "src/global/color/palette-accents.json", "isSource": true, "original": { "$type": "color", "$value": "#fbd4d4", "group": "palette", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, "key": "{color.palette.red-100}" }, "name": "token-color-palette-red-100", @@ -769,12 +1254,26 @@ "$type": "color", "$value": "#fff5f5", "group": "palette", + "$modes": { + "default": "#fff5f5", + "cds-g0": "#fff1f1", + "cds-g10": "#fff1f1", + "cds-g90": "#fff1f1", + "cds-g100": "#fff1f1" + }, "filePath": "src/global/color/palette-accents.json", "isSource": true, "original": { "$type": "color", "$value": "#fff5f5", "group": "palette", + "$modes": { + "default": "#fff5f5", + "cds-g0": "{carbon.color.red.10}", + "cds-g10": "{carbon.color.red.10}", + "cds-g90": "{carbon.color.red.10}", + "cds-g100": "{carbon.color.red.10}" + }, "key": "{color.palette.red-50}" }, "name": "token-color-palette-red-50", @@ -792,12 +1291,26 @@ "$type": "color", "$value": "#0c0c0e", "group": "palette", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "filePath": "src/global/color/palette-neutrals.json", "isSource": true, "original": { "$type": "color", "$value": "#0c0c0e", "group": "palette", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "{carbon.color.gray.100}", + "cds-g10": "{carbon.color.gray.100}", + "cds-g90": "{carbon.color.gray.100}", + "cds-g100": "{carbon.color.gray.100}" + }, "key": "{color.palette.neutral-700}" }, "name": "token-color-palette-neutral-700", @@ -815,12 +1328,26 @@ "$type": "color", "$value": "#3b3d45", "group": "palette", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#393939", + "cds-g100": "#393939" + }, "filePath": "src/global/color/palette-neutrals.json", "isSource": true, "original": { "$type": "color", "$value": "#3b3d45", "group": "palette", + "$modes": { + "default": "#3b3d45", + "cds-g0": "{carbon.color.gray.80}", + "cds-g10": "{carbon.color.gray.80}", + "cds-g90": "{carbon.color.gray.80}", + "cds-g100": "{carbon.color.gray.80}" + }, "key": "{color.palette.neutral-600}" }, "name": "token-color-palette-neutral-600", @@ -838,12 +1365,26 @@ "$type": "color", "$value": "#656a76", "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, "filePath": "src/global/color/palette-neutrals.json", "isSource": true, "original": { "$type": "color", "$value": "#656a76", "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": "{carbon.color.gray.70}", + "cds-g10": "{carbon.color.gray.70}", + "cds-g90": "{carbon.color.gray.70}", + "cds-g100": "{carbon.color.gray.70}" + }, "key": "{color.palette.neutral-500}" }, "name": "token-color-palette-neutral-500", @@ -861,12 +1402,26 @@ "$type": "color", "$value": "#8c909c", "group": "palette", + "$modes": { + "default": "#8c909c", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, "filePath": "src/global/color/palette-neutrals.json", "isSource": true, "original": { "$type": "color", "$value": "#8c909c", "group": "palette", + "$modes": { + "default": "#8c909c", + "cds-g0": "{carbon.color.gray.50}", + "cds-g10": "{carbon.color.gray.50}", + "cds-g90": "{carbon.color.gray.50}", + "cds-g100": "{carbon.color.gray.50}" + }, "key": "{color.palette.neutral-400}" }, "name": "token-color-palette-neutral-400", @@ -884,12 +1439,26 @@ "$type": "color", "$value": "#c2c5cb", "group": "palette", + "$modes": { + "default": "#c2c5cb", + "cds-g0": "#a8a8a8", + "cds-g10": "#a8a8a8", + "cds-g90": "#a8a8a8", + "cds-g100": "#a8a8a8" + }, "filePath": "src/global/color/palette-neutrals.json", "isSource": true, "original": { "$type": "color", "$value": "#c2c5cb", "group": "palette", + "$modes": { + "default": "#c2c5cb", + "cds-g0": "{carbon.color.gray.40}", + "cds-g10": "{carbon.color.gray.40}", + "cds-g90": "{carbon.color.gray.40}", + "cds-g100": "{carbon.color.gray.40}" + }, "key": "{color.palette.neutral-300}" }, "name": "token-color-palette-neutral-300", @@ -907,12 +1476,26 @@ "$type": "color", "$value": "#dedfe3", "group": "palette", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, "filePath": "src/global/color/palette-neutrals.json", "isSource": true, "original": { "$type": "color", "$value": "#dedfe3", "group": "palette", + "$modes": { + "default": "#dedfe3", + "cds-g0": "{carbon.color.gray.30}", + "cds-g10": "{carbon.color.gray.30}", + "cds-g90": "{carbon.color.gray.30}", + "cds-g100": "{carbon.color.gray.30}" + }, "key": "{color.palette.neutral-200}" }, "name": "token-color-palette-neutral-200", @@ -930,12 +1513,26 @@ "$type": "color", "$value": "#f1f2f3", "group": "palette", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#e0e0e0", + "cds-g100": "#e0e0e0" + }, "filePath": "src/global/color/palette-neutrals.json", "isSource": true, "original": { "$type": "color", "$value": "#f1f2f3", "group": "palette", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "{carbon.color.gray.20}", + "cds-g10": "{carbon.color.gray.20}", + "cds-g90": "{carbon.color.gray.20}", + "cds-g100": "{carbon.color.gray.20}" + }, "key": "{color.palette.neutral-100}" }, "name": "token-color-palette-neutral-100", @@ -953,12 +1550,26 @@ "$type": "color", "$value": "#fafafa", "group": "palette", + "$modes": { + "default": "#fafafa", + "cds-g0": "#f4f4f4", + "cds-g10": "#f4f4f4", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "filePath": "src/global/color/palette-neutrals.json", "isSource": true, "original": { "$type": "color", "$value": "#fafafa", "group": "palette", + "$modes": { + "default": "#fafafa", + "cds-g0": "{carbon.color.gray.10}", + "cds-g10": "{carbon.color.gray.10}", + "cds-g90": "{carbon.color.gray.10}", + "cds-g100": "{carbon.color.gray.10}" + }, "key": "{color.palette.neutral-50}" }, "name": "token-color-palette-neutral-50", @@ -976,12 +1587,26 @@ "$type": "color", "$value": "#ffffff", "group": "palette", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, "filePath": "src/global/color/palette-neutrals.json", "isSource": true, "original": { "$type": "color", "$value": "#ffffff", "group": "palette", + "$modes": { + "default": "#ffffff", + "cds-g0": "{carbon.color.white.0}", + "cds-g10": "{carbon.color.white.0}", + "cds-g90": "{carbon.color.white.0}", + "cds-g100": "{carbon.color.white.0}" + }, "key": "{color.palette.neutral-0}" }, "name": "token-color-palette-neutral-0", @@ -1000,6 +1625,37 @@ "$value": "#3b3d4566", "alpha": "0.4", "group": "palette", + "$modes": { + "default": "#3b3d45", + "cds-g0": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#8d8d8d", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#6f6f6f", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, "filePath": "src/global/color/palette-neutrals.json", "isSource": true, "original": { @@ -1007,6 +1663,37 @@ "$value": "{color.palette.neutral-600}", "alpha": "0.4", "group": "palette", + "$modes": { + "default": "{color.palette.neutral-600}", + "cds-g0": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.50}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.60}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, "key": "{color.palette.alpha-300}" }, "name": "token-color-palette-alpha-300", @@ -1025,6 +1712,37 @@ "$value": "#656a7633", "alpha": "0.2", "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": { + "$value": "#c6c6c6", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#e0e0e0", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#6f6f6f", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#525252", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, "filePath": "src/global/color/palette-neutrals.json", "isSource": true, "original": { @@ -1032,6 +1750,37 @@ "$value": "{color.palette.neutral-500}", "alpha": "0.2", "group": "palette", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": { + "$value": "{carbon.color.gray.30}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.20}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.60}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.70}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, "key": "{color.palette.alpha-200}" }, "name": "token-color-palette-alpha-200", @@ -1050,6 +1799,37 @@ "$value": "#656a761a", "alpha": "0.1", "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": { + "$value": "#e0e0e0", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "#c6c6c6", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "#525252", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "#393939", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, "filePath": "src/global/color/palette-neutrals.json", "isSource": true, "original": { @@ -1057,6 +1837,37 @@ "$value": "{color.palette.neutral-500}", "alpha": "0.1", "group": "palette", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": { + "$value": "{carbon.color.gray.20}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g10": { + "$value": "{carbon.color.gray.30}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g90": { + "$value": "{carbon.color.gray.70}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + }, + "cds-g100": { + "$value": "{carbon.color.gray.80}", + "alpha": null, + "filePath": "src/global/color/palette-neutrals.json", + "isSource": true, + "$type": "color" + } + }, "key": "{color.palette.alpha-100}" }, "name": "token-color-palette-alpha-100", @@ -1076,12 +1887,26 @@ "$type": "color", "$value": "#656a7633", "group": "semantic", + "$modes": { + "default": "#656a7633", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, "filePath": "src/global/color/semantic-border.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.alpha-200}", "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-200}", + "cds-g0": "{carbon.themes.white.borderSubtle03}", + "cds-g10": "{carbon.themes.g10.borderSubtle03}", + "cds-g90": "{carbon.themes.g90.borderSubtle03}", + "cds-g100": "{carbon.themes.g100.borderSubtle03}" + }, "key": "{color.border.primary}" }, "name": "token-color-border-primary", @@ -1099,12 +1924,26 @@ "$type": "color", "$value": "#656a761a", "group": "semantic", + "$modes": { + "default": "#656a761a", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, "filePath": "src/global/color/semantic-border.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.alpha-100}", "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-100}", + "cds-g0": "{carbon.themes.white.borderSubtle00}", + "cds-g10": "{carbon.themes.g10.borderSubtle00}", + "cds-g90": "{carbon.themes.g90.borderSubtle00}", + "cds-g100": "{carbon.themes.g100.borderSubtle00}" + }, "key": "{color.border.faint}" }, "name": "token-color-border-faint", @@ -1122,12 +1961,26 @@ "$type": "color", "$value": "#3b3d4566", "group": "semantic", + "$modes": { + "default": "#3b3d4566", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, "filePath": "src/global/color/semantic-border.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.alpha-300}", "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-300}", + "cds-g0": "{carbon.themes.white.borderStrong01}", + "cds-g10": "{carbon.themes.g10.borderStrong01}", + "cds-g90": "{carbon.themes.g90.borderStrong01}", + "cds-g100": "{carbon.themes.g100.borderStrong01}" + }, "key": "{color.border.strong}" }, "name": "token-color-border-strong", @@ -1145,12 +1998,26 @@ "$type": "color", "$value": "#cce3fe", "group": "semantic", + "$modes": { + "default": "#cce3fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, "filePath": "src/global/color/semantic-border.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.blue-100}", "group": "semantic", + "$modes": { + "default": "{color.palette.blue-100}", + "cds-g0": "{carbon.themes.white.borderInteractive}", + "cds-g10": "{carbon.themes.g10.borderInteractive}", + "cds-g90": "{carbon.themes.g90.borderInteractive}", + "cds-g100": "{carbon.themes.g100.borderInteractive}" + }, "key": "{color.border.action}" }, "name": "token-color-border-action", @@ -1168,12 +2035,26 @@ "$type": "color", "$value": "#ead2fe", "group": "semantic", + "$modes": { + "default": "#ead2fe", + "cds-g0": "#be95ff", + "cds-g10": "#be95ff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, "filePath": "src/global/color/semantic-border.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.purple-100}", "group": "semantic", + "$modes": { + "default": "{color.palette.purple-100}", + "cds-g0": "{carbon.color.purple.40}", + "cds-g10": "{carbon.color.purple.40}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, "key": "{color.border.highlight}" }, "name": "token-color-border-highlight", @@ -1191,12 +2072,26 @@ "$type": "color", "$value": "#cceeda", "group": "semantic", + "$modes": { + "default": "#cceeda", + "cds-g0": "#42be65", + "cds-g10": "#42be65", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, "filePath": "src/global/color/semantic-border.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.green-100}", "group": "semantic", + "$modes": { + "default": "{color.palette.green-100}", + "cds-g0": "{carbon.color.green.40}", + "cds-g10": "{carbon.color.green.40}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, "key": "{color.border.success}" }, "name": "token-color-border-success", @@ -1214,12 +2109,26 @@ "$type": "color", "$value": "#fbeabf", "group": "semantic", + "$modes": { + "default": "#fbeabf", + "cds-g0": "#d2a106", + "cds-g10": "#d2a106", + "cds-g90": "#b28600", + "cds-g100": "#b28600" + }, "filePath": "src/global/color/semantic-border.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.amber-100}", "group": "semantic", + "$modes": { + "default": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.yellow.40}", + "cds-g10": "{carbon.color.yellow.40}", + "cds-g90": "{carbon.color.yellow.50}", + "cds-g100": "{carbon.color.yellow.50}" + }, "key": "{color.border.warning}" }, "name": "token-color-border-warning", @@ -1237,12 +2146,26 @@ "$type": "color", "$value": "#fbd4d4", "group": "semantic", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "#ff8389", + "cds-g10": "#ff8389", + "cds-g90": "#fa4d56", + "cds-g100": "#fa4d56" + }, "filePath": "src/global/color/semantic-border.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.red-100}", "group": "semantic", + "$modes": { + "default": "{color.palette.red-100}", + "cds-g0": "{carbon.color.red.40}", + "cds-g10": "{carbon.color.red.40}", + "cds-g90": "{carbon.color.red.50}", + "cds-g100": "{carbon.color.red.50}" + }, "key": "{color.border.critical}" }, "name": "token-color-border-critical", @@ -1263,12 +2186,26 @@ "$type": "color", "$value": "#0c56e9", "group": "semantic", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "filePath": "src/global/color/semantic-focus.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.blue-300}", "group": "semantic", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, "key": "{color.focus.action.internal}" }, "name": "token-color-focus-action-internal", @@ -1288,6 +2225,13 @@ "$value": "#5990ff", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, "filePath": "src/global/color/semantic-focus.json", "isSource": true, "original": { @@ -1295,6 +2239,13 @@ "$value": "#5990ff", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, "key": "{color.focus.action.external}" }, "name": "token-color-focus-action-external", @@ -1315,12 +2266,26 @@ "$type": "color", "$value": "#c00005", "group": "semantic", + "$modes": { + "default": "#c00005", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "filePath": "src/global/color/semantic-focus.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.red-300}", "group": "semantic", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, "key": "{color.focus.critical.internal}" }, "name": "token-color-focus-critical-internal", @@ -1340,6 +2305,13 @@ "$value": "#dd7578", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#dd7578", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, "filePath": "src/global/color/semantic-focus.json", "isSource": true, "original": { @@ -1347,6 +2319,13 @@ "$value": "#dd7578", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#dd7578", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, "key": "{color.focus.critical.external}" }, "name": "token-color-focus-critical-external", @@ -1368,12 +2347,26 @@ "$type": "color", "$value": "#0c0c0e", "group": "semantic", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.neutral-700}", "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, "key": "{color.foreground.strong}" }, "name": "token-color-foreground-strong", @@ -1391,12 +2384,26 @@ "$type": "color", "$value": "#3b3d45", "group": "semantic", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.neutral-600}", "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-600}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, "key": "{color.foreground.primary}" }, "name": "token-color-foreground-primary", @@ -1414,12 +2421,26 @@ "$type": "color", "$value": "#656a76", "group": "semantic", + "$modes": { + "default": "#656a76", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.neutral-500}", "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, "key": "{color.foreground.faint}" }, "name": "token-color-foreground-faint", @@ -1437,12 +2458,26 @@ "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.neutral-0}", "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, "key": "{color.foreground.high-contrast}" }, "name": "token-color-foreground-high-contrast", @@ -1460,12 +2495,26 @@ "$type": "color", "$value": "#8c909c", "group": "semantic", + "$modes": { + "default": "#8c909c", + "cds-g0": "rgba(22, 22, 22, 0.25)", + "cds-g10": "rgba(22, 22, 22, 0.25)", + "cds-g90": "rgba(244, 244, 244, 0.25)", + "cds-g100": "rgba(244, 244, 244, 0.25)" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.neutral-400}", "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textDisabled}", + "cds-g10": "{carbon.themes.g10.textDisabled}", + "cds-g90": "{carbon.themes.g90.textDisabled}", + "cds-g100": "{carbon.themes.g100.textDisabled}" + }, "key": "{color.foreground.disabled}" }, "name": "token-color-foreground-disabled", @@ -1483,12 +2532,26 @@ "$type": "color", "$value": "#1060ff", "group": "semantic", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#78a9ff", + "cds-g100": "#78a9ff" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.blue-200}", "group": "semantic", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.white.linkPrimary}", + "cds-g10": "{carbon.themes.g10.linkPrimary}", + "cds-g90": "{carbon.themes.g90.linkPrimary}", + "cds-g100": "{carbon.themes.g100.linkPrimary}" + }, "key": "{color.foreground.action}" }, "name": "token-color-foreground-action", @@ -1506,12 +2569,26 @@ "$type": "color", "$value": "#0c56e9", "group": "semantic", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.blue-300}", "group": "semantic", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, "key": "{color.foreground.action-hover}" }, "name": "token-color-foreground-action-hover", @@ -1529,12 +2606,26 @@ "$type": "color", "$value": "#0046d1", "group": "semantic", + "$modes": { + "default": "#0046d1", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.blue-400}", "group": "semantic", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, "key": "{color.foreground.action-active}" }, "name": "token-color-foreground-action-active", @@ -1552,12 +2643,26 @@ "$type": "color", "$value": "#a737ff", "group": "semantic", + "$modes": { + "default": "#a737ff", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.purple-200}", "group": "semantic", + "$modes": { + "default": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, "key": "{color.foreground.highlight}" }, "name": "token-color-foreground-highlight", @@ -1575,12 +2680,26 @@ "$type": "color", "$value": "#911ced", "group": "semantic", + "$modes": { + "default": "#911ced", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#d4bbff", + "cds-g100": "#d4bbff" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.purple-300}", "group": "semantic", + "$modes": { + "default": "{color.palette.purple-300}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.30}", + "cds-g100": "{carbon.color.purple.30}" + }, "key": "{color.foreground.highlight-on-surface}" }, "name": "token-color-foreground-highlight-on-surface", @@ -1598,12 +2717,26 @@ "$type": "color", "$value": "#42215b", "group": "semantic", + "$modes": { + "default": "#42215b", + "cds-g0": "#491d8b", + "cds-g10": "#491d8b", + "cds-g90": "#e8daff", + "cds-g100": "#d4bbff" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.purple-500}", "group": "semantic", + "$modes": { + "default": "{color.palette.purple-500}", + "cds-g0": "{carbon.color.purple.80}", + "cds-g10": "{carbon.color.purple.80}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.30}" + }, "key": "{color.foreground.highlight-high-contrast}" }, "name": "token-color-foreground-highlight-high-contrast", @@ -1621,12 +2754,26 @@ "$type": "color", "$value": "#008a22", "group": "semantic", + "$modes": { + "default": "#008a22", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#42be65", + "cds-g100": "#42be65" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.green-200}", "group": "semantic", + "$modes": { + "default": "{color.palette.green-200}", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.40}", + "cds-g100": "{carbon.color.green.40}" + }, "key": "{color.foreground.success}" }, "name": "token-color-foreground-success", @@ -1644,12 +2791,26 @@ "$type": "color", "$value": "#00781e", "group": "semantic", + "$modes": { + "default": "#00781e", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#6fdc8c", + "cds-g100": "#6fdc8c" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.green-300}", "group": "semantic", + "$modes": { + "default": "{color.palette.green-300}", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.30}", + "cds-g100": "{carbon.color.green.30}" + }, "key": "{color.foreground.success-on-surface}" }, "name": "token-color-foreground-success-on-surface", @@ -1667,12 +2828,26 @@ "$type": "color", "$value": "#054220", "group": "semantic", + "$modes": { + "default": "#054220", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.green-500}", "group": "semantic", + "$modes": { + "default": "{color.palette.green-500}", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, "key": "{color.foreground.success-high-contrast}" }, "name": "token-color-foreground-success-high-contrast", @@ -1690,12 +2865,26 @@ "$type": "color", "$value": "#bb5a00", "group": "semantic", + "$modes": { + "default": "#bb5a00", + "cds-g0": "#8e6a00", + "cds-g10": "#8e6a00", + "cds-g90": "#d2a106", + "cds-g100": "#d2a106" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.amber-200}", "group": "semantic", + "$modes": { + "default": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.yellow.60}", + "cds-g10": "{carbon.color.yellow.60}", + "cds-g90": "{carbon.color.yellow.40}", + "cds-g100": "{carbon.color.yellow.40}" + }, "key": "{color.foreground.warning}" }, "name": "token-color-foreground-warning", @@ -1713,12 +2902,26 @@ "$type": "color", "$value": "#9e4b00", "group": "semantic", + "$modes": { + "default": "#9e4b00", + "cds-g0": "#684e00", + "cds-g10": "#684e00", + "cds-g90": "#f1c21b", + "cds-g100": "#f1c21b" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.amber-300}", "group": "semantic", + "$modes": { + "default": "{color.palette.amber-300}", + "cds-g0": "{carbon.color.yellow.70}", + "cds-g10": "{carbon.color.yellow.70}", + "cds-g90": "{carbon.color.yellow.30}", + "cds-g100": "{carbon.color.yellow.30}" + }, "key": "{color.foreground.warning-on-surface}" }, "name": "token-color-foreground-warning-on-surface", @@ -1736,12 +2939,26 @@ "$type": "color", "$value": "#542800", "group": "semantic", + "$modes": { + "default": "#542800", + "cds-g0": "#483700", + "cds-g10": "#483700", + "cds-g90": "#fddc69", + "cds-g100": "#fddc69" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.amber-500}", "group": "semantic", + "$modes": { + "default": "{color.palette.amber-500}", + "cds-g0": "{carbon.color.yellow.80}", + "cds-g10": "{carbon.color.yellow.80}", + "cds-g90": "{carbon.color.yellow.20}", + "cds-g100": "{carbon.color.yellow.20}" + }, "key": "{color.foreground.warning-high-contrast}" }, "name": "token-color-foreground-warning-high-contrast", @@ -1759,12 +2976,26 @@ "$type": "color", "$value": "#e52228", "group": "semantic", + "$modes": { + "default": "#e52228", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#ff8389", + "cds-g100": "#ff8389" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.red-200}", "group": "semantic", + "$modes": { + "default": "{color.palette.red-200}", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.40}", + "cds-g100": "{carbon.color.red.40}" + }, "key": "{color.foreground.critical}" }, "name": "token-color-foreground-critical", @@ -1782,12 +3013,26 @@ "$type": "color", "$value": "#c00005", "group": "semantic", + "$modes": { + "default": "#c00005", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffb3b8", + "cds-g100": "#ffb3b8" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.red-300}", "group": "semantic", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.30}", + "cds-g100": "{carbon.color.red.30}" + }, "key": "{color.foreground.critical-on-surface}" }, "name": "token-color-foreground-critical-on-surface", @@ -1805,12 +3050,26 @@ "$type": "color", "$value": "#51130a", "group": "semantic", + "$modes": { + "default": "#51130a", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.red-500}", "group": "semantic", + "$modes": { + "default": "{color.palette.red-500}", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, "key": "{color.foreground.critical-high-contrast}" }, "name": "token-color-foreground-critical-high-contrast", @@ -1830,12 +3089,26 @@ "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, "filePath": "src/global/color/semantic-page.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.neutral-0}", "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, "key": "{color.page.primary}" }, "name": "token-color-page-primary", @@ -1853,12 +3126,26 @@ "$type": "color", "$value": "#fafafa", "group": "semantic", + "$modes": { + "default": "#fafafa", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, "filePath": "src/global/color/semantic-page.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.neutral-50}", "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, "key": "{color.page.faint}" }, "name": "token-color-page-faint", @@ -1878,12 +3165,26 @@ "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "filePath": "src/global/color/semantic-surface.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.neutral-0}", "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.primary}" }, "name": "token-color-surface-primary", @@ -1901,12 +3202,26 @@ "$type": "color", "$value": "#fafafa", "group": "semantic", + "$modes": { + "default": "#fafafa", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "filePath": "src/global/color/semantic-surface.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.neutral-50}", "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.faint}" }, "name": "token-color-surface-faint", @@ -1924,12 +3239,26 @@ "$type": "color", "$value": "#f1f2f3", "group": "semantic", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, "filePath": "src/global/color/semantic-surface.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.neutral-100}", "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerAccent01}", + "cds-g10": "{carbon.themes.g10.layerAccent01}", + "cds-g90": "{carbon.themes.g90.layerAccent01}", + "cds-g100": "{carbon.themes.g100.layerAccent01}" + }, "key": "{color.surface.strong}" }, "name": "token-color-surface-strong", @@ -1942,17 +3271,68 @@ "strong" ] }, + "high-contrast": { + "key": "{color.surface.high-contrast}", + "$type": "color", + "$value": "#0c0c0e", + "group": "semantic", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "filePath": "src/global/color/semantic-surface.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-700}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "key": "{color.surface.high-contrast}" + }, + "name": "token-color-surface-high-contrast", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "high-contrast" + ] + }, "interactive": { "key": "{color.surface.interactive}", "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "default": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "filePath": "src/global/color/semantic-surface.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.neutral-0}", "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.interactive}" }, "name": "token-color-surface-interactive", @@ -1970,12 +3350,26 @@ "$type": "color", "$value": "#f1f2f3", "group": "semantic", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "#e8e8e8", + "cds-g10": "#e8e8e8", + "cds-g90": "#474747", + "cds-g100": "#333333" + }, "filePath": "src/global/color/semantic-surface.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.neutral-100}", "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerHover01}", + "cds-g10": "{carbon.themes.g10.layerHover01}", + "cds-g90": "{carbon.themes.g90.layerHover01}", + "cds-g100": "{carbon.themes.g100.layerHover01}" + }, "key": "{color.surface.interactive-hover}" }, "name": "token-color-surface-interactive-hover", @@ -1993,12 +3387,26 @@ "$type": "color", "$value": "#dedfe3", "group": "semantic", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, "filePath": "src/global/color/semantic-surface.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.neutral-200}", "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.white.layerActive01}", + "cds-g10": "{carbon.themes.g10.layerActive01}", + "cds-g90": "{carbon.themes.g90.layerActive01}", + "cds-g100": "{carbon.themes.g100.layerActive01}" + }, "key": "{color.surface.interactive-active}" }, "name": "token-color-surface-interactive-active", @@ -2016,12 +3424,26 @@ "$type": "color", "$value": "#fafafa", "group": "semantic", + "$modes": { + "default": "#fafafa", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, "filePath": "src/global/color/semantic-surface.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.neutral-50}", "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.color.gray.30}", + "cds-g10": "{carbon.color.gray.30}", + "cds-g90": "{carbon.color.gray.60}", + "cds-g100": "{carbon.color.gray.70}" + }, "key": "{color.surface.interactive-disabled}" }, "name": "token-color-surface-interactive-disabled", @@ -2039,12 +3461,26 @@ "$type": "color", "$value": "#f2f8ff", "group": "semantic", + "$modes": { + "default": "#f2f8ff", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0f62fe", + "cds-g100": "#0043ce" + }, "filePath": "src/global/color/semantic-surface.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.blue-50}", "group": "semantic", + "$modes": { + "default": "{color.palette.blue-50}", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.60}", + "cds-g100": "{carbon.color.blue.70}" + }, "key": "{color.surface.action}" }, "name": "token-color-surface-action", @@ -2062,12 +3498,26 @@ "$type": "color", "$value": "#f9f2ff", "group": "semantic", + "$modes": { + "default": "#f9f2ff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, "filePath": "src/global/color/semantic-surface.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.purple-50}", "group": "semantic", + "$modes": { + "default": "{color.palette.purple-50}", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, "key": "{color.surface.highlight}" }, "name": "token-color-surface-highlight", @@ -2085,12 +3535,26 @@ "$type": "color", "$value": "#f2fbf6", "group": "semantic", + "$modes": { + "default": "#f2fbf6", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, "filePath": "src/global/color/semantic-surface.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.green-50}", "group": "semantic", + "$modes": { + "default": "{color.palette.green-50}", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, "key": "{color.surface.success}" }, "name": "token-color-surface-success", @@ -2108,12 +3572,26 @@ "$type": "color", "$value": "#fff9e8", "group": "semantic", + "$modes": { + "default": "#fff9e8", + "cds-g0": "#fcf4d6", + "cds-g10": "#fcf4d6", + "cds-g90": "#684e00", + "cds-g100": "#684e00" + }, "filePath": "src/global/color/semantic-surface.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.amber-50}", "group": "semantic", + "$modes": { + "default": "{color.palette.amber-50}", + "cds-g0": "{carbon.color.yellow.10}", + "cds-g10": "{carbon.color.yellow.10}", + "cds-g90": "{carbon.color.yellow.70}", + "cds-g100": "{carbon.color.yellow.70}" + }, "key": "{color.surface.warning}" }, "name": "token-color-surface-warning", @@ -2131,12 +3609,26 @@ "$type": "color", "$value": "#fff5f5", "group": "semantic", + "$modes": { + "default": "#fff5f5", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, "filePath": "src/global/color/semantic-surface.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.red-50}", "group": "semantic", + "$modes": { + "default": "{color.palette.red-50}", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, "key": "{color.surface.critical}" }, "name": "token-color-surface-critical", @@ -3466,14 +4958,28 @@ "$type": "color", "$value": "#000000", "group": "branding", - "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault radar would not work", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work", "filePath": "src/products/shared/color/semantic-product-vault-radar.json", "isSource": true, "original": { "$type": "color", "$value": "#000", "group": "branding", - "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault radar would not work", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work", "key": "{color.vault-radar.brand-alt}" }, "name": "token-color-vault-radar-brand-alt", @@ -3693,6 +5199,13 @@ "group": "branding", "$type": "color", "$value": "#000000", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work", "filePath": "src/products/shared/color/semantic-product-vault-secrets.json", "isSource": true, @@ -3700,6 +5213,13 @@ "group": "branding", "$type": "color", "$value": "#000", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work", "key": "{color.vault-secrets.brand-alt}" }, @@ -3920,6 +5440,13 @@ "$type": "color", "$value": "#000000", "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work", "filePath": "src/products/shared/color/semantic-product-vault.json", "isSource": true, @@ -3927,6 +5454,13 @@ "$type": "color", "$value": "#000", "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work", "key": "{color.vault.brand-alt}" }, @@ -4326,10 +5860,24 @@ "box-shadow": { "key": "{elevation.inset.box-shadow}", "$value": "inset 0px 1px 2px 1px #656a761a", + "$modes": { + "default": "inset 0px 1px 2px 1px #656a761a", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "filePath": "src/global/elevation/elevation.json", "isSource": true, "original": { "$value": "{elevation.inset.box-shadow-01}", + "$modes": { + "default": "{elevation.inset.box-shadow-01}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "key": "{elevation.inset.box-shadow}" }, "name": "token-elevation-inset-box-shadow", @@ -4347,10 +5895,24 @@ "box-shadow": { "key": "{elevation.low.box-shadow}", "$value": "0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d", + "$modes": { + "default": "0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "filePath": "src/global/elevation/elevation.json", "isSource": true, "original": { "$value": "{elevation.low.box-shadow-01}, {elevation.low.box-shadow-02}", + "$modes": { + "default": "{elevation.low.box-shadow-01}, {elevation.low.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "key": "{elevation.low.box-shadow}" }, "name": "token-elevation-low-box-shadow", @@ -4368,10 +5930,24 @@ "box-shadow": { "key": "{elevation.mid.box-shadow}", "$value": "0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633", + "$modes": { + "default": "0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "filePath": "src/global/elevation/elevation.json", "isSource": true, "original": { "$value": "{elevation.mid.box-shadow-01}, {elevation.mid.box-shadow-02}", + "$modes": { + "default": "{elevation.mid.box-shadow-01}, {elevation.mid.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "key": "{elevation.mid.box-shadow}" }, "name": "token-elevation-mid-box-shadow", @@ -4389,10 +5965,24 @@ "box-shadow": { "key": "{elevation.high.box-shadow}", "$value": "0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633", + "$modes": { + "default": "0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "filePath": "src/global/elevation/elevation.json", "isSource": true, "original": { "$value": "{elevation.high.box-shadow-01}, {elevation.high.box-shadow-02}", + "$modes": { + "default": "{elevation.high.box-shadow-01}, {elevation.high.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "key": "{elevation.high.box-shadow}" }, "name": "token-elevation-high-box-shadow", @@ -4410,10 +6000,24 @@ "box-shadow": { "key": "{elevation.higher.box-shadow}", "$value": "0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640", + "$modes": { + "default": "0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "filePath": "src/global/elevation/elevation.json", "isSource": true, "original": { "$value": "{elevation.higher.box-shadow-01}, {elevation.higher.box-shadow-02}", + "$modes": { + "default": "{elevation.higher.box-shadow-01}, {elevation.higher.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "key": "{elevation.higher.box-shadow}" }, "name": "token-elevation-higher-box-shadow", @@ -4431,10 +6035,24 @@ "box-shadow": { "key": "{elevation.overlay.box-shadow}", "$value": "0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559", + "$modes": { + "default": "0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "filePath": "src/global/elevation/elevation.json", "isSource": true, "original": { "$value": "{elevation.overlay.box-shadow-01}, {elevation.overlay.box-shadow-02}", + "$modes": { + "default": "{elevation.overlay.box-shadow-01}, {elevation.overlay.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "key": "{elevation.overlay.box-shadow}" }, "name": "token-elevation-overlay-box-shadow", @@ -4454,10 +6072,24 @@ "box-shadow": { "key": "{surface.inset.box-shadow}", "$value": "inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a", + "$modes": { + "default": "inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "filePath": "src/global/elevation/surface.json", "isSource": true, "original": { "$value": "{elevation.inset.box-shadow-border}, {elevation.inset.box-shadow}", + "$modes": { + "default": "{elevation.inset.box-shadow-border}, {elevation.inset.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "key": "{surface.inset.box-shadow}" }, "name": "token-surface-inset-box-shadow", @@ -4475,10 +6107,24 @@ "box-shadow": { "key": "{surface.base.box-shadow}", "$value": "0 0 0 1px #656a7633", + "$modes": { + "default": "0 0 0 1px #656a7633", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "filePath": "src/global/elevation/surface.json", "isSource": true, "original": { "$value": "{elevation.base.box-shadow-border}", + "$modes": { + "default": "{elevation.base.box-shadow-border}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "key": "{surface.base.box-shadow}" }, "name": "token-surface-base-box-shadow", @@ -4496,10 +6142,24 @@ "box-shadow": { "key": "{surface.low.box-shadow}", "$value": "0 0 0 1px #656a7626, 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d", + "$modes": { + "default": "0 0 0 1px #656a7626, 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "filePath": "src/global/elevation/surface.json", "isSource": true, "original": { "$value": "{elevation.low.box-shadow-border}, {elevation.low.box-shadow}", + "$modes": { + "default": "{elevation.low.box-shadow-border}, {elevation.low.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "key": "{surface.low.box-shadow}" }, "name": "token-surface-low-box-shadow", @@ -4517,10 +6177,24 @@ "box-shadow": { "key": "{surface.mid.box-shadow}", "$value": "0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633", + "$modes": { + "default": "0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "filePath": "src/global/elevation/surface.json", "isSource": true, "original": { "$value": "{elevation.mid.box-shadow-border}, {elevation.mid.box-shadow}", + "$modes": { + "default": "{elevation.mid.box-shadow-border}, {elevation.mid.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "key": "{surface.mid.box-shadow}" }, "name": "token-surface-mid-box-shadow", @@ -4538,10 +6212,24 @@ "box-shadow": { "key": "{surface.high.box-shadow}", "$value": "0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633", + "$modes": { + "default": "0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "filePath": "src/global/elevation/surface.json", "isSource": true, "original": { "$value": "{elevation.high.box-shadow-border}, {elevation.high.box-shadow}", + "$modes": { + "default": "{elevation.high.box-shadow-border}, {elevation.high.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "key": "{surface.high.box-shadow}" }, "name": "token-surface-high-box-shadow", @@ -4559,10 +6247,24 @@ "box-shadow": { "key": "{surface.higher.box-shadow}", "$value": "0 0 0 1px #656a7633, 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640", + "$modes": { + "default": "0 0 0 1px #656a7633, 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "filePath": "src/global/elevation/surface.json", "isSource": true, "original": { "$value": "{elevation.higher.box-shadow-border}, {elevation.higher.box-shadow}", + "$modes": { + "default": "{elevation.higher.box-shadow-border}, {elevation.higher.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "key": "{surface.higher.box-shadow}" }, "name": "token-surface-higher-box-shadow", @@ -4580,10 +6282,24 @@ "box-shadow": { "key": "{surface.overlay.box-shadow}", "$value": "0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559", + "$modes": { + "default": "0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "filePath": "src/global/elevation/surface.json", "isSource": true, "original": { "$value": "{elevation.overlay.box-shadow-border}, {elevation.overlay.box-shadow}", + "$modes": { + "default": "{elevation.overlay.box-shadow-border}, {elevation.overlay.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + }, "key": "{surface.overlay.box-shadow}" }, "name": "token-surface-overlay-box-shadow", @@ -4642,6 +6358,51 @@ } } }, + "app-footer": { + "focus": { + "color": { + "action": { + "internal": { + "key": "{app-footer.focus.color.action.internal}", + "$type": "color", + "$value": "var(--token-color-focus-action-internal)", + "$modes": { + "default": "var(--token-color-focus-action-internal)", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "filePath": "src/products/shared/app-footer.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "var(--token-color-focus-action-internal)", + "$modes": { + "default": "var(--token-color-focus-action-internal)", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, + "key": "{app-footer.focus.color.action.internal}" + }, + "name": "token-app-footer-focus-color-action-internal", + "attributes": { + "category": "app-footer" + }, + "path": [ + "app-footer", + "focus", + "color", + "action", + "internal" + ] + } + } + } + } + }, "app-header": { "height": { "key": "{app-header.height}", @@ -5326,187 +7087,5376 @@ } } }, - "form": { - "label": { - "color": { - "key": "{form.label.color}", - "$type": "color", - "$value": "#0c0c0e", - "group": "components", - "filePath": "src/products/shared/form/base-elements.json", - "isSource": true, - "original": { - "$type": "color", - "$value": "{color.foreground.strong}", - "group": "components", - "key": "{form.label.color}" - }, - "name": "token-form-label-color", - "attributes": { - "category": "form" - }, - "path": [ - "form", - "label", - "color" - ] - } - }, - "legend": { - "color": { - "key": "{form.legend.color}", - "$type": "color", - "$value": "#0c0c0e", - "group": "components", - "filePath": "src/products/shared/form/base-elements.json", - "isSource": true, - "original": { - "$type": "color", - "$value": "{form.label.color}", - "group": "components", - "key": "{form.legend.color}" - }, - "name": "token-form-legend-color", - "attributes": { - "category": "form" - }, - "path": [ - "form", - "legend", - "color" - ] - } - }, - "helper-text": { - "color": { - "key": "{form.helper-text.color}", - "$type": "color", - "$value": "#656a76", - "group": "components", - "filePath": "src/products/shared/form/base-elements.json", - "isSource": true, - "original": { - "$type": "color", - "$value": "{color.foreground.faint}", - "group": "components", - "key": "{form.helper-text.color}" + "badge-count": { + "padding": { + "horizontal": { + "small": { + "key": "{badge-count.padding.horizontal.small}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "filePath": "src/products/shared/badge-count.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge-count.padding.horizontal.small}" + }, + "name": "token-badge-count-padding-horizontal-small", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "small" + ] }, - "name": "token-form-helper-text-color", - "attributes": { - "category": "form" + "medium": { + "key": "{badge-count.padding.horizontal.medium}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "filePath": "src/products/shared/badge-count.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge-count.padding.horizontal.medium}" + }, + "name": "token-badge-count-padding-horizontal-medium", + "attributes": { + "category": "badge-count" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "medium" + ] }, - "path": [ - "form", - "helper-text", - "color" - ] - } - }, - "indicator": { - "optional": { - "color": { - "key": "{form.indicator.optional.color}", - "$type": "color", - "$value": "#656a76", - "group": "components", - "filePath": "src/products/shared/form/base-elements.json", + "large": { + "key": "{badge-count.padding.horizontal.large}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "filePath": "src/products/shared/badge-count.json", "isSource": true, "original": { - "$type": "color", - "$value": "{color.foreground.faint}", - "group": "components", - "key": "{form.indicator.optional.color}" + "$type": "dimension", + "$value": "14", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge-count.padding.horizontal.large}" }, - "name": "token-form-indicator-optional-color", + "name": "token-badge-count-padding-horizontal-large", "attributes": { - "category": "form" + "category": "badge-count" }, "path": [ - "form", - "indicator", - "optional", - "color" + "badge-count", + "padding", + "horizontal", + "large" ] } } - }, - "error": { - "color": { - "key": "{form.error.color}", - "$type": "color", - "$value": "#c00005", - "group": "components", - "filePath": "src/products/shared/form/base-elements.json", + } + }, + "badge": { + "height": { + "small": { + "key": "{badge.height.small}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "18", + "cds-g10": "18", + "cds-g90": "18", + "cds-g100": "18" + }, + "filePath": "src/products/shared/badge.json", "isSource": true, "original": { - "$type": "color", - "$value": "{color.palette.red-300}", - "group": "components", - "key": "{form.error.color}" + "$type": "dimension", + "$value": "20", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "18", + "cds-g10": "18", + "cds-g90": "18", + "cds-g100": "18" + }, + "key": "{badge.height.small}" }, - "name": "token-form-error-color", + "name": "token-badge-height-small", "attributes": { - "category": "form" + "category": "badge" }, "path": [ - "form", - "error", - "color" + "badge", + "height", + "small" ] }, - "icon-size": { - "key": "{form.error.icon-size}", + "medium": { + "key": "{badge.height.medium}", "$type": "dimension", - "$value": "14px", + "$value": "24px", "unit": "px", - "filePath": "src/products/shared/form/base-elements.json", + "filePath": "src/products/shared/badge.json", "isSource": true, "original": { "$type": "dimension", - "$value": "14", + "$value": "24", "unit": "px", - "key": "{form.error.icon-size}" + "key": "{badge.height.medium}" }, - "name": "token-form-error-icon-size", + "name": "token-badge-height-medium", "attributes": { - "category": "form" + "category": "badge" }, "path": [ - "form", - "error", - "icon-size" + "badge", + "height", + "medium" ] - } - }, - "checkbox": { - "size": { - "key": "{form.checkbox.size}", + }, + "large": { + "key": "{badge.height.large}", "$type": "dimension", - "$value": "16px", + "$value": "32px", "unit": "px", - "filePath": "src/products/shared/form/checkbox.json", + "filePath": "src/products/shared/badge.json", "isSource": true, "original": { "$type": "dimension", - "$value": "16", + "$value": "32", "unit": "px", - "key": "{form.checkbox.size}" + "key": "{badge.height.large}" }, - "name": "token-form-checkbox-size", + "name": "token-badge-height-large", "attributes": { - "category": "form" + "category": "badge" }, "path": [ - "form", - "checkbox", - "size" + "badge", + "height", + "large" ] - }, - "border": { - "radius": { - "key": "{form.checkbox.border.radius}", + } + }, + "padding": { + "horizontal": { + "small": { + "key": "{badge.padding.horizontal.small}", "$type": "dimension", - "$value": "3px", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge.padding.horizontal.small}" + }, + "name": "token-badge-padding-horizontal-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "small" + ] + }, + "medium": { + "key": "{badge.padding.horizontal.medium}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{badge.padding.horizontal.medium}" + }, + "name": "token-badge-padding-horizontal-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "medium" + ] + }, + "large": { + "key": "{badge.padding.horizontal.large}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.padding.horizontal.large}" + }, + "name": "token-badge-padding-horizontal-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "horizontal", + "large" + ] + } + }, + "vertical": { + "small": { + "key": "{badge.padding.vertical.small}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "$modes": { + "default": "2", + "cds-g0": "1", + "cds-g10": "1", + "cds-g90": "1", + "cds-g100": "1" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "$modes": { + "default": "2", + "cds-g0": "1", + "cds-g10": "1", + "cds-g90": "1", + "cds-g100": "1" + }, + "key": "{badge.padding.vertical.small}" + }, + "name": "token-badge-padding-vertical-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "small" + ] + }, + "medium": { + "key": "{badge.padding.vertical.medium}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{badge.padding.vertical.medium}" + }, + "name": "token-badge-padding-vertical-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "medium" + ] + }, + "large": { + "key": "{badge.padding.vertical.large}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{badge.padding.vertical.large}" + }, + "name": "token-badge-padding-vertical-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "padding", + "vertical", + "large" + ] + } + } + }, + "gap": { + "small": { + "key": "{badge.gap.small}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.small}" + }, + "name": "token-badge-gap-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "small" + ] + }, + "medium": { + "key": "{badge.gap.medium}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.medium}" + }, + "name": "token-badge-gap-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "medium" + ] + }, + "large": { + "key": "{badge.gap.large}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{badge.gap.large}" + }, + "name": "token-badge-gap-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "gap", + "large" + ] + } + }, + "typography": { + "font-size": { + "small": { + "key": "{badge.typography.font-size.small}", + "$type": "font-size", + "$value": "0.8125rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.small}" + }, + "name": "token-badge-typography-font-size-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "small" + ] + }, + "medium": { + "key": "{badge.typography.font-size.medium}", + "$type": "font-size", + "$value": "0.8125rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.medium}" + }, + "name": "token-badge-typography-font-size-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "medium" + ] + }, + "large": { + "key": "{badge.typography.font-size.large}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{badge.typography.font-size.large}" + }, + "name": "token-badge-typography-font-size-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "font-size", + "large" + ] + } + }, + "line-height": { + "small": { + "key": "{badge.typography.line-height.small}", + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "key": "{badge.typography.line-height.small}" + }, + "name": "token-badge-typography-line-height-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "small" + ] + }, + "medium": { + "key": "{badge.typography.line-height.medium}", + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308", + "key": "{badge.typography.line-height.medium}" + }, + "name": "token-badge-typography-line-height-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "medium" + ] + }, + "large": { + "key": "{badge.typography.line-height.large}", + "$type": "number", + "$value": 1.5, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1, + "cds-g10": 1, + "cds-g90": 1, + "cds-g100": 1 + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1, + "cds-g10": 1, + "cds-g90": 1, + "cds-g100": 1 + }, + "key": "{badge.typography.line-height.large}" + }, + "name": "token-badge-typography-line-height-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "typography", + "line-height", + "large" + ] + } + } + }, + "foreground": { + "color": { + "neutral": { + "filled": { + "key": "{badge.foreground.color.neutral.filled}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral.filled}" + }, + "name": "token-badge-foreground-color-neutral-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "filled" + ] + }, + "inverted": { + "key": "{badge.foreground.color.neutral.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.color.gray.20}", + "cds-g10": "{carbon.color.gray.20}", + "cds-g90": "{carbon.color.gray.100}", + "cds-g100": "{carbon.color.gray.100}" + }, + "key": "{badge.foreground.color.neutral.inverted}" + }, + "name": "token-badge-foreground-color-neutral-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "inverted" + ] + }, + "outlined": { + "key": "{badge.foreground.color.neutral.outlined}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral.outlined}" + }, + "name": "token-badge-foreground-color-neutral-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral", + "outlined" + ] + } + }, + "neutral-dark-mode": { + "filled": { + "key": "{badge.foreground.color.neutral-dark-mode.filled}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.neutral-dark-mode.filled}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "filled" + ] + }, + "inverted": { + "key": "{badge.foreground.color.neutral-dark-mode.inverted}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{badge.foreground.color.neutral-dark-mode.inverted}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "inverted" + ] + }, + "outlined": { + "key": "{badge.foreground.color.neutral-dark-mode.outlined}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "comments": { + "cds": "In Figma the `cds` value uses a token `Tag/HighContrast/TagColor` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "comments": { + "cds": "In Figma the `cds` value uses a token `Tag/HighContrast/TagColor` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.neutral-dark-mode.outlined}" + }, + "name": "token-badge-foreground-color-neutral-dark-mode-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "neutral-dark-mode", + "outlined" + ] + } + }, + "highlight": { + "filled": { + "key": "{badge.foreground.color.highlight.filled}", + "$type": "color", + "$value": "#7b00db", + "comment": "we don't use `highlight-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#7b00db", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.palette.purple-400}", + "comment": "we don't use `highlight-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.purple-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorPurple.g100}" + }, + "key": "{badge.foreground.color.highlight.filled}" + }, + "name": "token-badge-foreground-color-highlight-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "filled" + ] + }, + "inverted": { + "key": "{badge.foreground.color.highlight.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.highlight.inverted}" + }, + "name": "token-badge-foreground-color-highlight-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "inverted" + ] + }, + "outlined": { + "key": "{badge.foreground.color.highlight.outlined}", + "$type": "color", + "$value": "#a737ff", + "$modes": { + "default": "#a737ff", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#e8daff", + "cds-g100": "#e8daff" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.highlight}", + "$modes": { + "default": "{color.foreground.highlight}", + "cds-g0": "{carbon.themes.tagTokens.tagColorPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorPurple.g100}" + }, + "key": "{badge.foreground.color.highlight.outlined}" + }, + "name": "token-badge-foreground-color-highlight-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "highlight", + "outlined" + ] + } + }, + "success": { + "filled": { + "key": "{badge.foreground.color.success.filled}", + "$type": "color", + "$value": "#006619", + "comment": "we don't use `success-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#006619", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.palette.green-400}", + "comment": "we don't use `success-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.green-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.foreground.color.success.filled}" + }, + "name": "token-badge-foreground-color-success-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "filled" + ] + }, + "inverted": { + "key": "{badge.foreground.color.success.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.success.inverted}" + }, + "name": "token-badge-foreground-color-success-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "inverted" + ] + }, + "outlined": { + "key": "{badge.foreground.color.success.outlined}", + "$type": "color", + "$value": "#008a22", + "$modes": { + "default": "#008a22", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.success}", + "$modes": { + "default": "{color.foreground.success}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.foreground.color.success.outlined}" + }, + "name": "token-badge-foreground-color-success-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "success", + "outlined" + ] + } + }, + "warning": { + "filled": { + "key": "{badge.foreground.color.warning.filled}", + "$type": "color", + "$value": "#803d00", + "$modes": { + "default": "#803d00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "hds": "we don't use `warning-on-surface` for accessibility (better contrast)", + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.palette.amber-400}", + "$modes": { + "default": "{color.palette.amber-400}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "hds": "we don't use `warning-on-surface` for accessibility (better contrast)", + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.warning.filled}" + }, + "name": "token-badge-foreground-color-warning-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "filled" + ] + }, + "inverted": { + "key": "{badge.foreground.color.warning.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.warning.inverted}" + }, + "name": "token-badge-foreground-color-warning-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "inverted" + ] + }, + "outlined": { + "key": "{badge.foreground.color.warning.outlined}", + "$type": "color", + "$value": "#bb5a00", + "$modes": { + "default": "#bb5a00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.warning}", + "$modes": { + "default": "{color.foreground.warning}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.foreground.color.warning.outlined}" + }, + "name": "token-badge-foreground-color-warning-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "warning", + "outlined" + ] + } + }, + "critical": { + "filled": { + "key": "{badge.foreground.color.critical.filled}", + "$type": "color", + "$value": "#940004", + "comment": "we don't use `critical-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "#940004", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.palette.red-400}", + "comment": "we don't use `critical-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.foreground.color.critical.filled}" + }, + "name": "token-badge-foreground-color-critical-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "filled" + ] + }, + "inverted": { + "key": "{badge.foreground.color.critical.inverted}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{badge.foreground.color.critical.inverted}" + }, + "name": "token-badge-foreground-color-critical-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "inverted" + ] + }, + "outlined": { + "key": "{badge.foreground.color.critical.outlined}", + "$type": "color", + "$value": "#e52228", + "$modes": { + "default": "#e52228", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.critical}", + "$modes": { + "default": "{color.foreground.critical}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.foreground.color.critical.outlined}" + }, + "name": "token-badge-foreground-color-critical-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "foreground", + "color", + "critical", + "outlined" + ] + } + } + } + }, + "surface": { + "color": { + "neutral": { + "filled": { + "key": "{badge.surface.color.neutral.filled}", + "$type": "color", + "$value": "#dedfe3", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-200}", + "$modes": { + "default": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{badge.surface.color.neutral.filled}" + }, + "name": "token-badge-surface-color-neutral-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "filled" + ] + }, + "inverted": { + "key": "{badge.surface.color.neutral.inverted}", + "$type": "color", + "$value": "#656a76", + "$modes": { + "default": "#656a76", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead", + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead", + "key": "{badge.surface.color.neutral.inverted}" + }, + "name": "token-badge-surface-color-neutral-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "inverted" + ] + }, + "outlined": { + "key": "{badge.surface.color.neutral.outlined}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "transparent", + "key": "{badge.surface.color.neutral.outlined}" + }, + "name": "token-badge-surface-color-neutral-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral", + "outlined" + ] + } + }, + "neutral-dark-mode": { + "filled": { + "key": "{badge.surface.color.neutral-dark-mode.filled}", + "$type": "color", + "$value": "#656a76", + "$modes": { + "default": "#656a76", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component", + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component", + "key": "{badge.surface.color.neutral-dark-mode.filled}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "filled" + ] + }, + "inverted": { + "key": "{badge.surface.color.neutral-dark-mode.inverted}", + "$type": "color", + "$value": "#fafafa", + "$modes": { + "default": "#fafafa", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.surface.faint}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{badge.surface.color.neutral-dark-mode.inverted}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "inverted" + ] + }, + "outlined": { + "key": "{badge.surface.color.neutral-dark-mode.outlined}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "transparent", + "key": "{badge.surface.color.neutral-dark-mode.outlined}" + }, + "name": "token-badge-surface-color-neutral-dark-mode-outlined", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "neutral-dark-mode", + "outlined" + ] + } + }, + "highlight": { + "filled": { + "key": "{badge.surface.color.highlight.filled}", + "$type": "color", + "$value": "#ead2fe", + "comment": "we don't use `surface-highlight` for accessibility (better contrast)", + "$modes": { + "default": "#ead2fe", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.palette.purple-100}", + "comment": "we don't use `surface-highlight` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.purple-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundPurple.g100}" + }, + "key": "{badge.surface.color.highlight.filled}" + }, + "name": "token-badge-surface-color-highlight-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "highlight", + "filled" + ] + }, + "inverted": { + "key": "{badge.surface.color.highlight.inverted}", + "$type": "color", + "$value": "#a737ff", + "$modes": { + "default": "#a737ff", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.palette.purple-200}", + "$modes": { + "default": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, + "key": "{badge.surface.color.highlight.inverted}" + }, + "name": "token-badge-surface-color-highlight-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "highlight", + "inverted" + ] + } + }, + "success": { + "filled": { + "key": "{badge.surface.color.success.filled}", + "$type": "color", + "$value": "#cceeda", + "comment": "we don't use `surface-success` for accessibility (better contrast)", + "$modes": { + "default": "#cceeda", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.palette.green-100}", + "comment": "we don't use `surface-success` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.green-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGreen.g100}" + }, + "key": "{badge.surface.color.success.filled}" + }, + "name": "token-badge-surface-color-success-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "success", + "filled" + ] + }, + "inverted": { + "key": "{badge.surface.color.success.inverted}", + "$type": "color", + "$value": "#008a22", + "$modes": { + "default": "#008a22", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.palette.green-200}", + "$modes": { + "default": "{color.palette.green-200}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + }, + "key": "{badge.surface.color.success.inverted}" + }, + "name": "token-badge-surface-color-success-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "success", + "inverted" + ] + } + }, + "warning": { + "filled": { + "key": "{badge.surface.color.warning.filled}", + "$type": "color", + "$value": "#fbeabf", + "comment": "we don't use `surface-warning` for accessibility (better contrast)", + "$modes": { + "default": "#fbeabf", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.palette.amber-100}", + "comment": "we don't use `surface-warning` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.surface.color.warning.filled}" + }, + "name": "token-badge-surface-color-warning-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "warning", + "filled" + ] + }, + "inverted": { + "key": "{badge.surface.color.warning.inverted}", + "$type": "color", + "$value": "#bb5a00", + "$modes": { + "default": "#bb5a00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.palette.amber-200}", + "$modes": { + "default": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + }, + "key": "{badge.surface.color.warning.inverted}" + }, + "name": "token-badge-surface-color-warning-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "warning", + "inverted" + ] + } + }, + "critical": { + "filled": { + "key": "{badge.surface.color.critical.filled}", + "$type": "color", + "$value": "#fbd4d4", + "comment": "we don't use `surface-critical` for accessibility (better contrast)", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.palette.red-100}", + "comment": "we don't use `surface-critical` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.red-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundRed.g100}" + }, + "key": "{badge.surface.color.critical.filled}" + }, + "name": "token-badge-surface-color-critical-filled", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "critical", + "filled" + ] + }, + "inverted": { + "key": "{badge.surface.color.critical.inverted}", + "$type": "color", + "$value": "#e52228", + "$modes": { + "default": "#e52228", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.palette.red-200}", + "$modes": { + "default": "{color.palette.red-200}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + }, + "key": "{badge.surface.color.critical.inverted}" + }, + "name": "token-badge-surface-color-critical-inverted", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "surface", + "color", + "critical", + "inverted" + ] + } + } + } + }, + "border": { + "radius": { + "key": "{badge.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "$modes": { + "default": "5px", + "cds-g0": "1000000000px", + "cds-g10": "1000000000px", + "cds-g90": "1000000000px", + "cds-g100": "1000000000px" + }, + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "{border.radius.small}", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "{border.radius.rounded}", + "cds-g10": "{border.radius.rounded}", + "cds-g90": "{border.radius.rounded}", + "cds-g100": "{border.radius.rounded}" + }, + "key": "{badge.border.radius}" + }, + "name": "token-badge-border-radius", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "border", + "radius" + ] + } + }, + "icon": { + "size": { + "small": { + "key": "{badge.icon.size.small}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{badge.icon.size.small}" + }, + "name": "token-badge-icon-size-small", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "small" + ] + }, + "medium": { + "key": "{badge.icon.size.medium}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{badge.icon.size.medium}" + }, + "name": "token-badge-icon-size-medium", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "medium" + ] + }, + "large": { + "key": "{badge.icon.size.large}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "filePath": "src/products/shared/badge.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{badge.icon.size.large}" + }, + "name": "token-badge-icon-size-large", + "attributes": { + "category": "badge" + }, + "path": [ + "badge", + "icon", + "size", + "large" + ] + } + } + } + }, + "button": { + "height": { + "small": { + "key": "{button.height.small}", + "$type": "dimension", + "$value": "28px", + "unit": "px", + "$modes": { + "default": "28", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "28", + "unit": "px", + "$modes": { + "default": "28", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "key": "{button.height.small}" + }, + "name": "token-button-height-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "small" + ] + }, + "medium": { + "key": "{button.height.medium}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "$modes": { + "default": "36", + "cds-g0": "40", + "cds-g10": "40", + "cds-g90": "40", + "cds-g100": "40" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "$modes": { + "default": "36", + "cds-g0": "40", + "cds-g10": "40", + "cds-g90": "40", + "cds-g100": "40" + }, + "key": "{button.height.medium}" + }, + "name": "token-button-height-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "medium" + ] + }, + "large": { + "key": "{button.height.large}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "$modes": { + "default": "48", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "$modes": { + "default": "48", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "key": "{button.height.large}" + }, + "name": "token-button-height-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "height", + "large" + ] + } + }, + "padding": { + "horizontal": { + "small": { + "key": "{button.padding.horizontal.small}", + "$type": "dimension", + "$value": "11px", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "11", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.small}" + }, + "name": "token-button-padding-horizontal-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "small" + ] + }, + "medium": { + "key": "{button.padding.horizontal.medium}", + "$type": "dimension", + "$value": "15px", + "unit": "px", + "$modes": { + "default": "15", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "15", + "unit": "px", + "$modes": { + "default": "15", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.medium}" + }, + "name": "token-button-padding-horizontal-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "medium" + ] + }, + "large": { + "key": "{button.padding.horizontal.large}", + "$type": "dimension", + "$value": "19px", + "unit": "px", + "$modes": { + "default": "19", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "19", + "unit": "px", + "$modes": { + "default": "19", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.horizontal.large}" + }, + "name": "token-button-padding-horizontal-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "horizontal", + "large" + ] + } + }, + "vertical": { + "small": { + "key": "{button.padding.vertical.small}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "comment": "here we're taking into account the 1px border", + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.small}" + }, + "name": "token-button-padding-vertical-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "small" + ] + }, + "medium": { + "key": "{button.padding.vertical.medium}", + "$type": "dimension", + "$value": "9px", + "unit": "px", + "$modes": { + "default": "9", + "cds-g0": "10", + "cds-g10": "10", + "cds-g90": "10", + "cds-g100": "10" + }, + "comment": "here we're taking into account the 1px border", + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "9", + "unit": "px", + "$modes": { + "default": "9", + "cds-g0": "10", + "cds-g10": "10", + "cds-g90": "10", + "cds-g100": "10" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.medium}" + }, + "name": "token-button-padding-vertical-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "medium" + ] + }, + "large": { + "key": "{button.padding.vertical.large}", + "$type": "dimension", + "$value": "11px", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "comment": "here we're taking into account the 1px border", + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "11", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "comment": "here we're taking into account the 1px border", + "key": "{button.padding.vertical.large}" + }, + "name": "token-button-padding-vertical-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "padding", + "vertical", + "large" + ] + } + } + }, + "gap": { + "key": "{button.gap}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + }, + "key": "{button.gap}" + }, + "name": "token-button-gap", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "gap" + ] + }, + "typography": { + "font-size": { + "small": { + "key": "{button.typography.font-size.small}", + "$type": "font-size", + "$value": "0.8125rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.small}" + }, + "name": "token-button-typography-font-size-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "small" + ] + }, + "medium": { + "key": "{button.typography.font-size.medium}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.medium}" + }, + "name": "token-button-typography-font-size-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "medium" + ] + }, + "large": { + "key": "{button.typography.font-size.large}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "key": "{button.typography.font-size.large}" + }, + "name": "token-button-typography-font-size-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "font-size", + "large" + ] + } + }, + "line-height": { + "small": { + "key": "{button.typography.line-height.small}", + "$type": "number", + "$value": 0.9286, + "comment": "14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)", + "$modes": { + "default": 0.9286, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "number", + "$value": 0.9286, + "comment": "14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)", + "$modes": { + "default": 0.9286, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.small}" + }, + "name": "token-button-typography-line-height-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "small" + ] + }, + "medium": { + "key": "{button.typography.line-height.medium}", + "$type": "number", + "$value": 1.1429, + "comment": "14px ~ 1.1429", + "$modes": { + "default": 1.1429, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "number", + "$value": 1.1429, + "comment": "14px ~ 1.1429", + "$modes": { + "default": 1.1429, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.medium}" + }, + "name": "token-button-typography-line-height-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "medium" + ] + }, + "large": { + "key": "{button.typography.line-height.large}", + "$type": "number", + "$value": 1.5, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + }, + "key": "{button.typography.line-height.large}" + }, + "name": "token-button-typography-line-height-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "typography", + "line-height", + "large" + ] + } + } + }, + "foreground": { + "color": { + "primary": { + "default": { + "key": "{button.foreground.color.primary.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.default}" + }, + "name": "token-button-foreground-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "default" + ] + }, + "hover": { + "key": "{button.foreground.color.primary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.hover}" + }, + "name": "token-button-foreground-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "hover" + ] + }, + "focus": { + "key": "{button.foreground.color.primary.focus}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.focus}" + }, + "name": "token-button-foreground-color-primary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "focus" + ] + }, + "active": { + "key": "{button.foreground.color.primary.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.primary.active}" + }, + "name": "token-button-foreground-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "primary", + "active" + ] + } + }, + "secondary": { + "default": { + "key": "{button.foreground.color.secondary.default}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.default}" + }, + "name": "token-button-foreground-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "default" + ] + }, + "hover": { + "key": "{button.foreground.color.secondary.hover}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.hover}" + }, + "name": "token-button-foreground-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "hover" + ] + }, + "focus": { + "key": "{button.foreground.color.secondary.focus}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.focus}" + }, + "name": "token-button-foreground-color-secondary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "focus" + ] + }, + "active": { + "key": "{button.foreground.color.secondary.active}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.secondary.active}" + }, + "name": "token-button-foreground-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "secondary", + "active" + ] + } + }, + "tertiary": { + "default": { + "key": "{button.foreground.color.tertiary.default}", + "$type": "color", + "$value": "#1060ff", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.action}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiary.g100}" + }, + "key": "{button.foreground.color.tertiary.default}" + }, + "name": "token-button-foreground-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "default" + ] + }, + "hover": { + "key": "{button.foreground.color.tertiary.hover}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.action-hover}", + "$modes": { + "default": "{color.foreground.action-hover}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.hover}" + }, + "name": "token-button-foreground-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "hover" + ] + }, + "focus": { + "key": "{button.foreground.color.tertiary.focus}", + "$type": "color", + "$value": "#1060ff", + "$modes": { + "default": "#1060ff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.action}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.focus}" + }, + "name": "token-button-foreground-color-tertiary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "focus" + ] + }, + "active": { + "key": "{button.foreground.color.tertiary.active}", + "$type": "color", + "$value": "#0046d1", + "$modes": { + "default": "#0046d1", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.action-active}", + "$modes": { + "default": "{color.foreground.action-active}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "key": "{button.foreground.color.tertiary.active}" + }, + "name": "token-button-foreground-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "tertiary", + "active" + ] + } + }, + "critical": { + "default": { + "key": "{button.foreground.color.critical.default}", + "$type": "color", + "$value": "#c00005", + "$modes": { + "default": "#c00005", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.critical-on-surface}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.default}" + }, + "name": "token-button-foreground-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "default" + ] + }, + "hover": { + "key": "{button.foreground.color.critical.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.hover}" + }, + "name": "token-button-foreground-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "hover" + ] + }, + "focus": { + "key": "{button.foreground.color.critical.focus}", + "$type": "color", + "$value": "#c00005", + "$modes": { + "default": "#c00005", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.critical-on-surface}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.focus}" + }, + "name": "token-button-foreground-color-critical-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "focus" + ] + }, + "active": { + "key": "{button.foreground.color.critical.active}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + }, + "key": "{button.foreground.color.critical.active}" + }, + "name": "token-button-foreground-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "critical", + "active" + ] + } + }, + "disabled": { + "key": "{button.foreground.color.disabled}", + "$type": "color", + "$value": "#8c909c", + "$modes": { + "default": "#8c909c", + "cds-g0": "#8d8d8d", + "cds-g10": "#8d8d8d", + "cds-g90": "rgba(255, 255, 255, 0.25)", + "cds-g100": "rgba(255, 255, 255, 0.25)" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.disabled}", + "$modes": { + "default": "{color.foreground.disabled}", + "cds-g0": "{carbon.themes.white.textOnColorDisabled}", + "cds-g10": "{carbon.themes.g10.textOnColorDisabled}", + "cds-g90": "{carbon.themes.g90.textOnColorDisabled}", + "cds-g100": "{carbon.themes.g100.textOnColorDisabled}" + }, + "key": "{button.foreground.color.disabled}" + }, + "name": "token-button-foreground-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "foreground", + "color", + "disabled" + ] + } + } + }, + "surface": { + "color": { + "primary": { + "default": { + "key": "{button.surface.color.primary.default}", + "$type": "color", + "$value": "#1060ff", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimary.g100}" + }, + "key": "{button.surface.color.primary.default}" + }, + "name": "token-button-surface-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "default" + ] + }, + "hover": { + "key": "{button.surface.color.primary.hover}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#0050e6", + "cds-g100": "#0050e6" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimaryHover.g100}" + }, + "key": "{button.surface.color.primary.hover}" + }, + "name": "token-button-surface-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "hover" + ] + }, + "focus": { + "key": "{button.surface.color.primary.focus}", + "$type": "color", + "$value": "#1060ff", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#0f62fe", + "cds-g100": "#0f62fe" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimary.g100}" + }, + "key": "{button.surface.color.primary.focus}" + }, + "name": "token-button-surface-color-primary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "focus" + ] + }, + "active": { + "key": "{button.surface.color.primary.active}", + "$type": "color", + "$value": "#0046d1", + "$modes": { + "default": "#0046d1", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#002d9c", + "cds-g100": "#002d9c" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimaryActive.g100}" + }, + "key": "{button.surface.color.primary.active}" + }, + "name": "token-button-surface-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "primary", + "active" + ] + } + }, + "secondary": { + "default": { + "key": "{button.surface.color.secondary.default}", + "$type": "color", + "$value": "#fafafa", + "$modes": { + "default": "#fafafa", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#6f6f6f", + "cds-g100": "#6f6f6f" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.surface.faint}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondary.g100}" + }, + "key": "{button.surface.color.secondary.default}" + }, + "name": "token-button-surface-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "default" + ] + }, + "hover": { + "key": "{button.surface.color.secondary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#474747", + "cds-g10": "#474747", + "cds-g90": "#5e5e5e", + "cds-g100": "#5e5e5e" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.surface.primary}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondaryHover.g100}" + }, + "key": "{button.surface.color.secondary.hover}" + }, + "name": "token-button-surface-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "hover" + ] + }, + "focus": { + "key": "{button.surface.color.secondary.focus}", + "$type": "color", + "$value": "#fafafa", + "$modes": { + "default": "#fafafa", + "cds-g0": "#393939", + "cds-g10": "#393939", + "cds-g90": "#6f6f6f", + "cds-g100": "#6f6f6f" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.surface.faint}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondary.g100}" + }, + "key": "{button.surface.color.secondary.focus}" + }, + "name": "token-button-surface-color-secondary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "focus" + ] + }, + "active": { + "key": "{button.surface.color.secondary.active}", + "$type": "color", + "$value": "#dedfe3", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#6f6f6f", + "cds-g10": "#6f6f6f", + "cds-g90": "#393939", + "cds-g100": "#393939" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.surface.interactive-active}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondaryActive.g100}" + }, + "key": "{button.surface.color.secondary.active}" + }, + "name": "token-button-surface-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "secondary", + "active" + ] + } + }, + "tertiary": { + "default": { + "key": "{button.surface.color.tertiary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "transparent", + "key": "{button.surface.color.tertiary.default}" + }, + "name": "token-button-surface-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "default" + ] + }, + "hover": { + "key": "{button.surface.color.tertiary.hover}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.surface.primary}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryHover.g100}" + }, + "key": "{button.surface.color.tertiary.hover}" + }, + "name": "token-button-surface-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "hover" + ] + }, + "focus": { + "key": "{button.surface.color.tertiary.focus}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "$modes": { + "default": "transparent", + "cds-g0": "#0050e6", + "cds-g10": "#0050e6", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "transparent", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryHover.g100}" + }, + "key": "{button.surface.color.tertiary.focus}" + }, + "name": "token-button-surface-color-tertiary-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "focus" + ] + }, + "active": { + "key": "{button.surface.color.tertiary.active}", + "$type": "color", + "$value": "#dedfe3", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#002d9c", + "cds-g10": "#002d9c", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.surface.interactive-active}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryActive.g100}" + }, + "key": "{button.surface.color.tertiary.active}" + }, + "name": "token-button-surface-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "tertiary", + "active" + ] + } + }, + "critical": { + "default": { + "key": "{button.surface.color.critical.default}", + "$type": "color", + "$value": "#fff5f5", + "$modes": { + "default": "#fff5f5", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.surface.critical}", + "$modes": { + "default": "{color.surface.critical}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerPrimary.g100}" + }, + "key": "{button.surface.color.critical.default}" + }, + "name": "token-button-surface-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "default" + ] + }, + "hover": { + "key": "{button.surface.color.critical.hover}", + "$type": "color", + "$value": "#c00005", + "$modes": { + "default": "#c00005", + "cds-g0": "#b81921", + "cds-g10": "#b81921", + "cds-g90": "#b81921", + "cds-g100": "#b81921" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerHover.g100}" + }, + "key": "{button.surface.color.critical.hover}" + }, + "name": "token-button-surface-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "hover" + ] + }, + "focus": { + "key": "{button.surface.color.critical.focus}", + "$type": "color", + "$value": "#fff5f5", + "$modes": { + "default": "#fff5f5", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#da1e28", + "cds-g100": "#da1e28" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.surface.critical}", + "$modes": { + "default": "{color.surface.critical}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerPrimary.g100}" + }, + "key": "{button.surface.color.critical.focus}" + }, + "name": "token-button-surface-color-critical-focus", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "focus" + ] + }, + "active": { + "key": "{button.surface.color.critical.active}", + "$type": "color", + "$value": "#940004", + "$modes": { + "default": "#940004", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#750e13", + "cds-g100": "#750e13" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.palette.red-400}", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerActive.g100}" + }, + "key": "{button.surface.color.critical.active}" + }, + "name": "token-button-surface-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "critical", + "active" + ] + } + }, + "disabled": { + "key": "{button.surface.color.disabled}", + "$type": "color", + "$value": "#fafafa", + "$modes": { + "default": "#fafafa", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.surface.faint}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDisabled.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDisabled.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDisabled.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDisabled.g100}" + }, + "key": "{button.surface.color.disabled}" + }, + "name": "token-button-surface-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "surface", + "color", + "disabled" + ] + } + } + }, + "border": { + "width": { + "key": "{button.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{button.border.width}" + }, + "name": "token-button-border-width", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "width" + ] + }, + "radius": { + "key": "{button.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "$modes": { + "default": "5px", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "{border.radius.small}", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, + "key": "{button.border.radius}" + }, + "name": "token-button-border-radius", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "radius" + ] + }, + "color": { + "primary": { + "default": { + "key": "{button.border.color.primary.default}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.default}" + }, + "name": "token-button-border-color-primary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "default" + ] + }, + "hover": { + "key": "{button.border.color.primary.hover}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.hover}" + }, + "name": "token-button-border-color-primary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "hover" + ] + }, + "focus": { + "internal": { + "key": "{button.border.color.primary.focus.internal}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.focus.action.internal}", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.primary.focus.internal}" + }, + "name": "token-button-border-color-primary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "focus", + "internal" + ] + }, + "external": { + "key": "{button.border.color.primary.focus.external}", + "$type": "color", + "$value": "#5990ff", + "$modes": { + "default": "#5990ff", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.focus.action.external}", + "$modes": { + "default": "{color.focus.action.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.primary.focus.external}" + }, + "name": "token-button-border-color-primary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "focus", + "external" + ] + } + }, + "active": { + "key": "{button.border.color.primary.active}", + "$type": "color", + "$value": "#0046d1", + "$modes": { + "default": "#0046d1", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.primary.active}" + }, + "name": "token-button-border-color-primary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "primary", + "active" + ] + } + }, + "secondary": { + "default": { + "key": "{button.border.color.secondary.default}", + "$type": "color", + "$value": "#3b3d4566", + "$modes": { + "default": "#3b3d4566", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.default}" + }, + "name": "token-button-border-color-secondary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "default" + ] + }, + "hover": { + "key": "{button.border.color.secondary.hover}", + "$type": "color", + "$value": "#3b3d4566", + "$modes": { + "default": "#3b3d4566", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.hover}" + }, + "name": "token-button-border-color-secondary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "hover" + ] + }, + "focus": { + "internal": { + "key": "{button.border.color.secondary.focus.internal}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.focus.action.internal}", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.secondary.focus.internal}" + }, + "name": "token-button-border-color-secondary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "focus", + "internal" + ] + }, + "external": { + "key": "{button.border.color.secondary.focus.external}", + "$type": "color", + "$value": "#5990ff", + "$modes": { + "default": "#5990ff", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.focus.action.external}", + "$modes": { + "default": "{color.focus.action.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.secondary.focus.external}" + }, + "name": "token-button-border-color-secondary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "focus", + "external" + ] + } + }, + "active": { + "key": "{button.border.color.secondary.active}", + "$type": "color", + "$value": "#3b3d4566", + "$modes": { + "default": "#3b3d4566", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.secondary.active}" + }, + "name": "token-button-border-color-secondary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "secondary", + "active" + ] + } + }, + "tertiary": { + "default": { + "key": "{button.border.color.tertiary.default}", + "$type": "color", + "$value": "rgba(0, 0, 0, 0)", + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "transparent", + "key": "{button.border.color.tertiary.default}" + }, + "name": "token-button-border-color-tertiary-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "default" + ] + }, + "hover": { + "key": "{button.border.color.tertiary.hover}", + "$type": "color", + "$value": "#3b3d4566", + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "key": "{button.border.color.tertiary.hover}" + }, + "name": "token-button-border-color-tertiary-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "hover" + ] + }, + "focus": { + "internal": { + "key": "{button.border.color.tertiary.focus.internal}", + "$type": "color", + "$value": "#0c56e9", + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.focus.action.internal}", + "key": "{button.border.color.tertiary.focus.internal}" + }, + "name": "token-button-border-color-tertiary-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "focus", + "internal" + ] + }, + "external": { + "key": "{button.border.color.tertiary.focus.external}", + "$type": "color", + "$value": "#5990ff", + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.focus.action.external}", + "key": "{button.border.color.tertiary.focus.external}" + }, + "name": "token-button-border-color-tertiary-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "focus", + "external" + ] + } + }, + "active": { + "key": "{button.border.color.tertiary.active}", + "$type": "color", + "$value": "#3b3d4566", + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "key": "{button.border.color.tertiary.active}" + }, + "name": "token-button-border-color-tertiary-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "tertiary", + "active" + ] + } + }, + "critical": { + "default": { + "key": "{button.border.color.critical.default}", + "$type": "color", + "$value": "#c00005", + "$modes": { + "default": "#c00005", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.critical-on-surface}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.default}" + }, + "name": "token-button-border-color-critical-default", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "default" + ] + }, + "hover": { + "key": "{button.border.color.critical.hover}", + "$type": "color", + "$value": "#940004", + "$modes": { + "default": "#940004", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.palette.red-400}", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.hover}" + }, + "name": "token-button-border-color-critical-hover", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "hover" + ] + }, + "focus": { + "internal": { + "key": "{button.border.color.critical.focus.internal}", + "$type": "color", + "$value": "#c00005", + "$modes": { + "default": "#c00005", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.focus.critical.internal}", + "$modes": { + "default": "{color.focus.critical.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones", + "key": "{button.border.color.critical.focus.internal}" + }, + "name": "token-button-border-color-critical-focus-internal", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "focus", + "internal" + ] + }, + "external": { + "key": "{button.border.color.critical.focus.external}", + "$type": "color", + "$value": "#dd7578", + "$modes": { + "default": "#dd7578", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.focus.critical.external}", + "$modes": { + "default": "{color.focus.critical.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones", + "key": "{button.border.color.critical.focus.external}" + }, + "name": "token-button-border-color-critical-focus-external", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "focus", + "external" + ] + } + }, + "active": { + "key": "{button.border.color.critical.active}", + "$type": "color", + "$value": "#940004", + "$modes": { + "default": "#940004", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.palette.red-400}", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{button.border.color.critical.active}" + }, + "name": "token-button-border-color-critical-active", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "critical", + "active" + ] + } + }, + "disabled": { + "key": "{button.border.color.disabled}", + "$type": "color", + "$value": "#656a7633", + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.border.primary}", + "key": "{button.border.color.disabled}" + }, + "name": "token-button-border-color-disabled", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "border", + "color", + "disabled" + ] + } + } + }, + "focus": { + "border": { + "width": { + "key": "{button.focus.border.width}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{button.focus.border.width}" + }, + "name": "token-button-focus-border-width", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "focus", + "border", + "width" + ] + } + } + }, + "icon": { + "size": { + "small": { + "key": "{button.icon.size.small}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.small}" + }, + "name": "token-button-icon-size-small", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "small" + ] + }, + "medium": { + "key": "{button.icon.size.medium}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.medium}" + }, + "name": "token-button-icon-size-medium", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "medium" + ] + }, + "large": { + "key": "{button.icon.size.large}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "filePath": "src/products/shared/button.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{button.icon.size.large}" + }, + "name": "token-button-icon-size-large", + "attributes": { + "category": "button" + }, + "path": [ + "button", + "icon", + "size", + "large" + ] + } + } + } + }, + "dismiss-button": { + "size": { + "key": "{dismiss-button.size}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "filePath": "src/products/shared/dismiss-button.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + }, + "key": "{dismiss-button.size}" + }, + "name": "token-dismiss-button-size", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "size" + ] + }, + "foreground": { + "color": { + "default": { + "key": "{dismiss-button.foreground.color.default}", + "$type": "color", + "$value": "#656a76", + "$modes": { + "default": "#656a76", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "filePath": "src/products/shared/dismiss-button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "$modes": { + "default": "{color.foreground.faint}", + "cds-g0": "{carbon.themes.white.iconPrimary}", + "cds-g10": "{carbon.themes.g10.iconPrimary}", + "cds-g90": "{carbon.themes.g90.iconPrimary}", + "cds-g100": "{carbon.themes.g100.iconPrimary}" + }, + "key": "{dismiss-button.foreground.color.default}" + }, + "name": "token-dismiss-button-foreground-color-default", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "foreground", + "color", + "default" + ] + }, + "active": { + "key": "{dismiss-button.foreground.color.active}", + "$type": "color", + "$value": "#0c0c0e", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "filePath": "src/products/shared/dismiss-button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.strong}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.white.iconPrimary}", + "cds-g10": "{carbon.themes.g10.iconPrimary}", + "cds-g90": "{carbon.themes.g90.iconPrimary}", + "cds-g100": "{carbon.themes.g100.iconPrimary}" + }, + "key": "{dismiss-button.foreground.color.active}" + }, + "name": "token-dismiss-button-foreground-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "foreground", + "color", + "active" + ] + } + } + }, + "surface": { + "color": { + "hover": { + "key": "{dismiss-button.surface.color.hover}", + "$type": "color", + "$value": "rgba(222, 223, 227, 0.4)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "rgba(141, 141, 141, 0.12)", + "cds-g10": "rgba(141, 141, 141, 0.12)", + "cds-g90": "rgba(141, 141, 141, 0.16)", + "cds-g100": "rgba(141, 141, 141, 0.16)" + }, + "filePath": "src/products/shared/dismiss-button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "rgba(222, 223, 227, 0.4)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "{carbon.themes.white.backgroundHover}", + "cds-g10": "{carbon.themes.g10.backgroundHover}", + "cds-g90": "{carbon.themes.g90.backgroundHover}", + "cds-g100": "{carbon.themes.g100.backgroundHover}" + }, + "key": "{dismiss-button.surface.color.hover}" + }, + "name": "token-dismiss-button-surface-color-hover", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "surface", + "color", + "hover" + ] + }, + "active": { + "key": "{dismiss-button.surface.color.active}", + "$type": "color", + "$value": "rgba(222, 223, 227, 0.4)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "rgba(141, 141, 141, 0.5)", + "cds-g10": "rgba(141, 141, 141, 0.5)", + "cds-g90": "rgba(141, 141, 141, 0.4)", + "cds-g100": "rgba(141, 141, 141, 0.4)" + }, + "filePath": "src/products/shared/dismiss-button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "rgba(222, 223, 227, 0.4)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "{carbon.themes.white.backgroundActive}", + "cds-g10": "{carbon.themes.g10.backgroundActive}", + "cds-g90": "{carbon.themes.g90.backgroundActive}", + "cds-g100": "{carbon.themes.g100.backgroundActive}" + }, + "key": "{dismiss-button.surface.color.active}" + }, + "name": "token-dismiss-button-surface-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "surface", + "color", + "active" + ] + } + } + }, + "border": { + "color": { + "active": { + "key": "{dismiss-button.border.color.active}", + "$type": "color", + "$value": "#3b3d4566", + "$modes": { + "default": "#3b3d4566", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "filePath": "src/products/shared/dismiss-button.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{dismiss-button.border.color.active}" + }, + "name": "token-dismiss-button-border-color-active", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "border", + "color", + "active" + ] + } + } + }, + "icon": { + "size": { + "key": "{dismiss-button.icon.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "20", + "cds-g10": "20", + "cds-g90": "20", + "cds-g100": "20" + }, + "filePath": "src/products/shared/dismiss-button.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "20", + "cds-g10": "20", + "cds-g90": "20", + "cds-g100": "20" + }, + "key": "{dismiss-button.icon.size}" + }, + "name": "token-dismiss-button-icon-size", + "attributes": { + "category": "dismiss-button" + }, + "path": [ + "dismiss-button", + "icon", + "size" + ] + } + } + }, + "form": { + "label": { + "color": { + "key": "{form.label.color}", + "$type": "color", + "$value": "#0c0c0e", + "group": "components", + "filePath": "src/products/shared/form/base-elements.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.strong}", + "group": "components", + "key": "{form.label.color}" + }, + "name": "token-form-label-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "label", + "color" + ] + } + }, + "legend": { + "color": { + "key": "{form.legend.color}", + "$type": "color", + "$value": "#0c0c0e", + "group": "components", + "filePath": "src/products/shared/form/base-elements.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{form.label.color}", + "group": "components", + "key": "{form.legend.color}" + }, + "name": "token-form-legend-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "legend", + "color" + ] + } + }, + "helper-text": { + "color": { + "key": "{form.helper-text.color}", + "$type": "color", + "$value": "#656a76", + "group": "components", + "filePath": "src/products/shared/form/base-elements.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.helper-text.color}" + }, + "name": "token-form-helper-text-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "helper-text", + "color" + ] + } + }, + "indicator": { + "optional": { + "color": { + "key": "{form.indicator.optional.color}", + "$type": "color", + "$value": "#656a76", + "group": "components", + "filePath": "src/products/shared/form/base-elements.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.faint}", + "group": "components", + "key": "{form.indicator.optional.color}" + }, + "name": "token-form-indicator-optional-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "indicator", + "optional", + "color" + ] + } + } + }, + "error": { + "color": { + "key": "{form.error.color}", + "$type": "color", + "$value": "#c00005", + "group": "components", + "filePath": "src/products/shared/form/base-elements.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "components", + "key": "{form.error.color}" + }, + "name": "token-form-error-color", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "error", + "color" + ] + }, + "icon-size": { + "key": "{form.error.icon-size}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "filePath": "src/products/shared/form/base-elements.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "14", + "unit": "px", + "key": "{form.error.icon-size}" + }, + "name": "token-form-error-icon-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "error", + "icon-size" + ] + } + }, + "checkbox": { + "size": { + "key": "{form.checkbox.size}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "filePath": "src/products/shared/form/checkbox.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.checkbox.size}" + }, + "name": "token-form-checkbox-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "checkbox", + "size" + ] + }, + "border": { + "radius": { + "key": "{form.checkbox.border.radius}", + "$type": "dimension", + "$value": "3px", "unit": "px", "filePath": "src/products/shared/form/checkbox.json", "isSource": true, @@ -6411,12 +13361,26 @@ "$type": "dimension", "$value": "6px", "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, "filePath": "src/products/shared/form/radiocard.json", "isSource": true, "original": { "$type": "dimension", "$value": "6", "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + }, "key": "{form.radiocard.border.radius}" }, "name": "token-form-radiocard-border-radius", @@ -6429,6 +13393,119 @@ "border", "radius" ] + }, + "color": { + "default": { + "key": "{form.radiocard.border.color.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "filePath": "src/products/shared/form/radiocard.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.surface.primary}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + }, + "key": "{form.radiocard.border.color.default}" + }, + "name": "token-form-radiocard-border-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "default" + ] + }, + "focus": { + "key": "{form.radiocard.border.color.focus}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "filePath": "src/products/shared/form/radiocard.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.focus.action.internal}", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "key": "{form.radiocard.border.color.focus}" + }, + "name": "token-form-radiocard-border-color-focus", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "focus" + ] + }, + "default-checked": { + "key": "{form.radiocard.border.color.default-checked}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "filePath": "src/products/shared/form/radiocard.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "key": "{form.radiocard.border.color.default-checked}" + }, + "name": "token-form-radiocard-border-color-default-checked", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "color", + "default-checked" + ] + } } }, "content-padding": { @@ -7080,6 +14157,124 @@ } } }, + "icon-tile": { + "border": { + "color": { + "overlay": { + "key": "{icon-tile.border.color.overlay}", + "$type": "color", + "$value": "#656a7633", + "$modes": { + "default": "#656a7633", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "filePath": "src/products/shared/icon-tile.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.border.primary}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle02}", + "cds-g10": "{carbon.themes.g10.borderSubtle02}", + "cds-g90": "{carbon.themes.g90.borderSubtle02}", + "cds-g100": "{carbon.themes.g100.borderSubtle02}" + }, + "key": "{icon-tile.border.color.overlay}" + }, + "name": "token-icon-tile-border-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "overlay" + ] + }, + "logo": { + "key": "{icon-tile.border.color.logo}", + "$type": "color", + "$value": "#656a7633", + "$modes": { + "default": "#656a7633", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "filePath": "src/products/shared/icon-tile.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.border.primary}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle01}", + "cds-g10": "{carbon.themes.g10.borderSubtle01}", + "cds-g90": "{carbon.themes.g90.borderSubtle01}", + "cds-g100": "{carbon.themes.g100.borderSubtle01}" + }, + "key": "{icon-tile.border.color.logo}" + }, + "name": "token-icon-tile-border-color-logo", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "logo" + ] + } + } + }, + "surface": { + "color": { + "overlay": { + "key": "{icon-tile.surface.color.overlay}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "filePath": "src/products/shared/icon-tile.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.surface.primary}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.white.layer02}", + "cds-g10": "{carbon.themes.g10.layer02}", + "cds-g90": "{carbon.themes.g90.layer02}", + "cds-g100": "{carbon.themes.g100.layer02}" + }, + "key": "{icon-tile.surface.color.overlay}" + }, + "name": "token-icon-tile-surface-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "surface", + "color", + "overlay" + ] + } + } + } + }, "pagination": { "nav": { "control": { @@ -7239,49 +14434,443 @@ "vertical": { "key": "{pagination.child.spacing.vertical}", "$type": "dimension", - "$value": "8px", + "$value": "8px", + "unit": "px", + "filePath": "src/products/shared/pagination.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{pagination.child.spacing.vertical}" + }, + "name": "token-pagination-child-spacing-vertical", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "child", + "spacing", + "vertical" + ] + }, + "horizontal": { + "key": "{pagination.child.spacing.horizontal}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "filePath": "src/products/shared/pagination.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "key": "{pagination.child.spacing.horizontal}" + }, + "name": "token-pagination-child-spacing-horizontal", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "child", + "spacing", + "horizontal" + ] + } + } + } + }, + "rich-tooltip": { + "bubble": { + "max-width": { + "key": "{rich-tooltip.bubble.max-width}", + "$type": "dimension", + "$value": "280px", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "280", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "key": "{rich-tooltip.bubble.max-width}" + }, + "name": "token-rich-tooltip-bubble-max-width", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "max-width" + ] + }, + "border": { + "color": { + "key": "{rich-tooltip.bubble.border.color}", + "$value": "#656a7633", + "$modes": { + "default": "#656a7633", + "cds-g0": "#656a7633", + "cds-g10": "#656a7633", + "cds-g90": "#656a7633", + "cds-g100": "#656a7633" + }, + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "original": { + "$value": "{elevation.higher.border.color}", + "$modes": { + "default": "{elevation.higher.border.color}", + "cds-g0": "{color.palette.alpha-200}", + "cds-g10": "{color.palette.alpha-200}", + "cds-g90": "{color.palette.alpha-200}", + "cds-g100": "{color.palette.alpha-200}" + }, + "key": "{rich-tooltip.bubble.border.color}" + }, + "name": "token-rich-tooltip-bubble-border-color", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "border", + "color" + ] + }, + "radius": { + "key": "{rich-tooltip.bubble.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "$modes": { + "default": "5px", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "{border.radius.small}", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "key": "{rich-tooltip.bubble.border.radius}" + }, + "name": "token-rich-tooltip-bubble-border-radius", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "border", + "radius" + ] + } + }, + "arrow": { + "size": { + "key": "{rich-tooltip.bubble.arrow.size}", + "$type": "dimension", + "$value": "20px", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{rich-tooltip.bubble.arrow.size}" + }, + "name": "token-rich-tooltip-bubble-arrow-size", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", + "arrow", + "size" + ] + } + } + }, + "toggle": { + "gap": { + "horizontal": { + "key": "{rich-tooltip.toggle.gap.horizontal}", + "$type": "dimension", + "$value": "4px", "unit": "px", - "filePath": "src/products/shared/pagination.json", + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "filePath": "src/products/shared/rich-tooltip.json", "isSource": true, "original": { "$type": "dimension", - "$value": "8", + "$value": "4", "unit": "px", - "key": "{pagination.child.spacing.vertical}" + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{rich-tooltip.toggle.gap.horizontal}" }, - "name": "token-pagination-child-spacing-vertical", + "name": "token-rich-tooltip-toggle-gap-horizontal", "attributes": { - "category": "pagination" + "category": "rich-tooltip" }, "path": [ - "pagination", - "child", - "spacing", - "vertical" + "rich-tooltip", + "toggle", + "gap", + "horizontal" ] - }, - "horizontal": { - "key": "{pagination.child.spacing.horizontal}", + } + }, + "foreground": { + "color": { + "default": { + "key": "{rich-tooltip.toggle.foreground.color.default}", + "$value": "#0c0c0e", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "original": { + "$value": "{color.foreground.strong}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.default}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-default", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "default" + ] + }, + "hover": { + "key": "{rich-tooltip.toggle.foreground.color.hover}", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "original": { + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.hover}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-hover", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "hover" + ] + }, + "active": { + "key": "{rich-tooltip.toggle.foreground.color.active}", + "$value": "#656a76", + "$modes": { + "default": "#656a76", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "original": { + "$value": "{color.foreground.faint}", + "$modes": { + "default": "{color.foreground.faint}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.active}" + }, + "name": "token-rich-tooltip-toggle-foreground-color-active", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "toggle", + "foreground", + "color", + "active" + ] + } + } + }, + "icon": { + "size": { + "key": "{rich-tooltip.toggle.icon.size}", "$type": "dimension", - "$value": "20px", - "unit": "px", - "filePath": "src/products/shared/pagination.json", + "$value": "1em", + "unit": "em", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, + "filePath": "src/products/shared/rich-tooltip.json", "isSource": true, "original": { "$type": "dimension", - "$value": "20", - "unit": "px", - "key": "{pagination.child.spacing.horizontal}" + "$value": "1", + "unit": "em", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, + "key": "{rich-tooltip.toggle.icon.size}" }, - "name": "token-pagination-child-spacing-horizontal", + "name": "token-rich-tooltip-toggle-icon-size", "attributes": { - "category": "pagination" + "category": "rich-tooltip" }, "path": [ - "pagination", - "child", - "spacing", - "horizontal" + "rich-tooltip", + "toggle", + "icon", + "size" ] } } @@ -7592,115 +15181,31 @@ } }, "tooltip": { - "border-radius": { - "key": "{tooltip.border-radius}", - "$type": "dimension", - "$value": "5px", - "unit": "px", - "filePath": "src/products/shared/tooltip.json", - "isSource": true, - "original": { - "$type": "dimension", - "$value": "5", - "unit": "px", - "key": "{tooltip.border-radius}" - }, - "name": "token-tooltip-border-radius", - "attributes": { - "category": "tooltip" - }, - "path": [ - "tooltip", - "border-radius" - ] - }, - "color": { - "foreground": { - "primary": { - "key": "{tooltip.color.foreground.primary}", - "$type": "color", - "$value": "var(--token-color-foreground-high-contrast)", - "group": "components", - "filePath": "src/products/shared/tooltip.json", - "isSource": true, - "original": { - "$type": "color", - "$value": "var(--token-color-foreground-high-contrast)", - "group": "components", - "key": "{tooltip.color.foreground.primary}" - }, - "name": "token-tooltip-color-foreground-primary", - "attributes": { - "category": "tooltip" - }, - "path": [ - "tooltip", - "color", - "foreground", - "primary" - ] - } - }, - "surface": { - "primary": { - "key": "{tooltip.color.surface.primary}", - "$type": "color", - "$value": "var(--token-color-palette-neutral-700)", - "group": "components", - "filePath": "src/products/shared/tooltip.json", - "isSource": true, - "original": { - "$type": "color", - "$value": "var(--token-color-palette-neutral-700)", - "group": "components", - "key": "{tooltip.color.surface.primary}" - }, - "name": "token-tooltip-color-surface-primary", - "attributes": { - "category": "tooltip" - }, - "path": [ - "tooltip", - "color", - "surface", - "primary" - ] - } - } - }, - "focus-offset": { - "key": "{tooltip.focus-offset}", - "$type": "dimension", - "$value": "-2px", - "unit": "px", - "filePath": "src/products/shared/tooltip.json", - "isSource": true, - "original": { - "$type": "dimension", - "$value": "-2", - "unit": "px", - "key": "{tooltip.focus-offset}" - }, - "name": "token-tooltip-focus-offset", - "attributes": { - "category": "tooltip" - }, - "path": [ - "tooltip", - "focus-offset" - ] - }, "max-width": { "key": "{tooltip.max-width}", "$type": "dimension", "$value": "280px", "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, "filePath": "src/products/shared/tooltip.json", "isSource": true, "original": { "$type": "dimension", "$value": "280", "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, "key": "{tooltip.max-width}" }, "name": "token-tooltip-max-width", @@ -7718,12 +15223,26 @@ "$type": "dimension", "$value": "12px", "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16px", + "cds-g10": "16px", + "cds-g90": "16px", + "cds-g100": "16px" + }, "filePath": "src/products/shared/tooltip.json", "isSource": true, "original": { "$type": "dimension", "$value": "12", "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "{carbon.themes.white.spacing05}", + "cds-g10": "{carbon.themes.g10.spacing05}", + "cds-g90": "{carbon.themes.g90.spacing05}", + "cds-g100": "{carbon.themes.g100.spacing05}" + }, "key": "{tooltip.padding.horizontal}" }, "name": "token-tooltip-padding-horizontal", @@ -7741,12 +15260,26 @@ "$type": "dimension", "$value": "8px", "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "16px", + "cds-g10": "16px", + "cds-g90": "16px", + "cds-g100": "16px" + }, "filePath": "src/products/shared/tooltip.json", "isSource": true, "original": { "$type": "dimension", "$value": "8", "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "{carbon.themes.white.spacing05}", + "cds-g10": "{carbon.themes.g10.spacing05}", + "cds-g90": "{carbon.themes.g90.spacing05}", + "cds-g100": "{carbon.themes.g100.spacing05}" + }, "key": "{tooltip.padding.vertical}" }, "name": "token-tooltip-padding-vertical", @@ -7760,6 +15293,176 @@ ] } }, + "border": { + "radius": { + "key": "{tooltip.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "$modes": { + "default": "5px", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "filePath": "src/products/shared/tooltip.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "{border.radius.small}", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "key": "{tooltip.border.radius}" + }, + "name": "token-tooltip-border-radius", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "border", + "radius" + ] + } + }, + "caret": { + "clip-path": { + "key": "{tooltip.caret.clip-path}", + "$value": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "$modes": { + "default": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "cds-g0": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g10": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g90": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g100": "polygon(0 100%, 50% 0, 100% 100%)" + }, + "filePath": "src/products/shared/tooltip.json", + "isSource": true, + "original": { + "$value": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "$modes": { + "default": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "cds-g0": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g10": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g90": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g100": "polygon(0 100%, 50% 0, 100% 100%)" + }, + "key": "{tooltip.caret.clip-path}" + }, + "name": "token-tooltip-caret-clip-path", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "clip-path" + ] + }, + "height": { + "key": "{tooltip.caret.height}", + "$type": "dimension", + "$value": "7px", + "unit": "px", + "$modes": { + "default": "7", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "filePath": "src/products/shared/tooltip.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "7", + "unit": "px", + "$modes": { + "default": "7", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "key": "{tooltip.caret.height}" + }, + "name": "token-tooltip-caret-height", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "height" + ] + }, + "width": { + "key": "{tooltip.caret.width}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "filePath": "src/products/shared/tooltip.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{tooltip.caret.width}" + }, + "name": "token-tooltip-caret-width", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "caret", + "width" + ] + } + }, + "focus-offset": { + "key": "{tooltip.focus-offset}", + "$type": "dimension", + "$value": "-2px", + "unit": "px", + "filePath": "src/products/shared/tooltip.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "-2", + "unit": "px", + "key": "{tooltip.focus-offset}" + }, + "name": "token-tooltip-focus-offset", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "focus-offset" + ] + }, "transition": { "function": { "key": "{tooltip.transition.function}", @@ -7795,16 +15498,25 @@ "key": "{typography.font-stack.display}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.display.macOS}", - "{typography.font-stack.sans.display.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.display.emoji}" - ], + "$value": "{typography.font-stack.sans.display.combined}", + "$modes": { + "default": "{typography.font-stack.sans.display.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.font-stack.display}" }, "name": "token-typography-font-stack-display", @@ -7821,16 +15533,25 @@ "key": "{typography.font-stack.text}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.text.macOS}", - "{typography.font-stack.sans.text.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.text.emoji}" - ], + "$value": "{typography.font-stack.sans.text.combined}", + "$modes": { + "default": "{typography.font-stack.sans.text.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.font-stack.text}" }, "name": "token-typography-font-stack-text", @@ -7847,15 +15568,25 @@ "key": "{typography.font-stack.code}", "$type": "font-family", "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "default": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.monospace.code.macOS}", - "{typography.font-stack.monospace.code.windows}", - "monospace" - ], + "$value": "{typography.font-stack.monospace.code.combined}", + "$modes": { + "default": "{typography.font-stack.monospace.code.combined}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, "key": "{typography.font-stack.code}" }, "name": "token-typography-font-stack-code", @@ -7873,12 +15604,26 @@ "regular": { "key": "{typography.font-weight.regular}", "$type": "font-weight", - "$value": 400, + "$value": "400", + "$modes": { + "default": "400", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-weight", - "$value": 400, + "$value": "400", + "$modes": { + "default": "400", + "cds-g0": "{carbon.typography.font-weight.regular}", + "cds-g10": "{carbon.typography.font-weight.regular}", + "cds-g90": "{carbon.typography.font-weight.regular}", + "cds-g100": "{carbon.typography.font-weight.regular}" + }, "key": "{typography.font-weight.regular}" }, "name": "token-typography-font-weight-regular", @@ -7894,12 +15639,26 @@ "medium": { "key": "{typography.font-weight.medium}", "$type": "font-weight", - "$value": 500, + "$value": "500", + "$modes": { + "default": "500", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-weight", - "$value": 500, + "$value": "500", + "$modes": { + "default": "500", + "cds-g0": "{carbon.typography.font-weight.regular}", + "cds-g10": "{carbon.typography.font-weight.regular}", + "cds-g90": "{carbon.typography.font-weight.regular}", + "cds-g100": "{carbon.typography.font-weight.regular}" + }, "key": "{typography.font-weight.medium}" }, "name": "token-typography-font-weight-medium", @@ -7915,12 +15674,26 @@ "semibold": { "key": "{typography.font-weight.semibold}", "$type": "font-weight", - "$value": 600, + "$value": "600", + "$modes": { + "default": "600", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-weight", - "$value": 600, + "$value": "600", + "$modes": { + "default": "600", + "cds-g0": "{carbon.typography.font-weight.semibold}", + "cds-g10": "{carbon.typography.font-weight.semibold}", + "cds-g90": "{carbon.typography.font-weight.semibold}", + "cds-g100": "{carbon.typography.font-weight.semibold}" + }, "key": "{typography.font-weight.semibold}" }, "name": "token-typography-font-weight-semibold", @@ -7936,12 +15709,26 @@ "bold": { "key": "{typography.font-weight.bold}", "$type": "font-weight", - "$value": 700, + "$value": "700", + "$modes": { + "default": "700", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-weight", - "$value": 700, + "$value": "700", + "$modes": { + "default": "700", + "cds-g0": "{carbon.typography.font-weight.semibold}", + "cds-g10": "{carbon.typography.font-weight.semibold}", + "cds-g90": "{carbon.typography.font-weight.semibold}", + "cds-g100": "{carbon.typography.font-weight.semibold}" + }, "key": "{typography.font-weight.bold}" }, "name": "token-typography-font-weight-bold", @@ -7960,11 +15747,25 @@ "key": "{typography.display-500.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-family", "$value": "{typography.font-stack.display}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-500.font-family}" }, "name": "token-typography-display-500-font-family", @@ -7983,6 +15784,13 @@ "$value": "1.875rem", "unit": "px", "comment": "30px/1.875rem", + "$modes": { + "default": "30", + "cds-g0": "2rem", + "cds-g10": "2rem", + "cds-g90": "2rem", + "cds-g100": "2rem" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { @@ -7990,6 +15798,13 @@ "$value": "30", "unit": "px", "comment": "30px/1.875rem", + "$modes": { + "default": "30", + "cds-g0": "{carbon.typography.heading05.font-size}", + "cds-g10": "{carbon.typography.heading05.font-size}", + "cds-g90": "{carbon.typography.heading05.font-size}", + "cds-g100": "{carbon.typography.heading05.font-size}" + }, "key": "{typography.display-500.font-size}" }, "name": "token-typography-display-500-font-size", @@ -8007,12 +15822,26 @@ "$type": "number", "$value": 1.2666, "comment": "38px", + "$modes": { + "default": 1.2666, + "cds-g0": 1.25, + "cds-g10": 1.25, + "cds-g90": 1.25, + "cds-g100": 1.25 + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "number", "$value": 1.2666, "comment": "38px", + "$modes": { + "default": 1.2666, + "cds-g0": "{carbon.typography.heading05.line-height}", + "cds-g10": "{carbon.typography.heading05.line-height}", + "cds-g90": "{carbon.typography.heading05.line-height}", + "cds-g100": "{carbon.typography.heading05.line-height}" + }, "key": "{typography.display-500.line-height}" }, "name": "token-typography-display-500-line-height", @@ -8024,6 +15853,43 @@ "display-500", "line-height" ] + }, + "letter-spacing": { + "key": "{typography.display-500.letter-spacing}", + "$type": "letter-spacing", + "$value": "-0.5px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "filePath": "src/products/shared/typography.json", + "isSource": true, + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading05.letter-spacing}", + "cds-g10": "{carbon.typography.heading05.letter-spacing}", + "cds-g90": "{carbon.typography.heading05.letter-spacing}", + "cds-g100": "{carbon.typography.heading05.letter-spacing}" + }, + "key": "{typography.display-500.letter-spacing}" + }, + "name": "token-typography-display-500-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "letter-spacing" + ] } }, "display-400": { @@ -8031,11 +15897,25 @@ "key": "{typography.display-400.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-family", "$value": "{typography.font-stack.display}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-400.font-family}" }, "name": "token-typography-display-400-font-family", @@ -8054,6 +15934,13 @@ "$value": "1.5rem", "unit": "px", "comment": "24px/1.5rem", + "$modes": { + "default": "24", + "cds-g0": "1.75rem", + "cds-g10": "1.75rem", + "cds-g90": "1.75rem", + "cds-g100": "1.75rem" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { @@ -8061,6 +15948,13 @@ "$value": "24", "unit": "px", "comment": "24px/1.5rem", + "$modes": { + "default": "24", + "cds-g0": "{carbon.typography.heading04.font-size}", + "cds-g10": "{carbon.typography.heading04.font-size}", + "cds-g90": "{carbon.typography.heading04.font-size}", + "cds-g100": "{carbon.typography.heading04.font-size}" + }, "key": "{typography.display-400.font-size}" }, "name": "token-typography-display-400-font-size", @@ -8078,12 +15972,26 @@ "$type": "number", "$value": 1.3333, "comment": "32px", + "$modes": { + "default": 1.3333, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "number", "$value": 1.3333, "comment": "32px", + "$modes": { + "default": 1.3333, + "cds-g0": "{carbon.typography.heading04.line-height}", + "cds-g10": "{carbon.typography.heading04.line-height}", + "cds-g90": "{carbon.typography.heading04.line-height}", + "cds-g100": "{carbon.typography.heading04.line-height}" + }, "key": "{typography.display-400.line-height}" }, "name": "token-typography-display-400-line-height", @@ -8095,6 +16003,43 @@ "display-400", "line-height" ] + }, + "letter-spacing": { + "key": "{typography.display-400.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "filePath": "src/products/shared/typography.json", + "isSource": true, + "original": { + "$type": "letter-spacing", + "$value": 0, + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.heading04.letter-spacing}", + "cds-g10": "{carbon.typography.heading04.letter-spacing}", + "cds-g90": "{carbon.typography.heading04.letter-spacing}", + "cds-g100": "{carbon.typography.heading04.letter-spacing}" + }, + "key": "{typography.display-400.letter-spacing}" + }, + "name": "token-typography-display-400-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "letter-spacing" + ] } }, "display-300": { @@ -8102,11 +16047,25 @@ "key": "{typography.display-300.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-family", "$value": "{typography.font-stack.text}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-300.font-family}" }, "name": "token-typography-display-300-font-family", @@ -8125,6 +16084,13 @@ "$value": "1.125rem", "unit": "px", "comment": "18px/1.125rem", + "$modes": { + "default": "18", + "cds-g0": "1.25rem", + "cds-g10": "1.25rem", + "cds-g90": "1.25rem", + "cds-g100": "1.25rem" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { @@ -8132,6 +16098,13 @@ "$value": "18", "unit": "px", "comment": "18px/1.125rem", + "$modes": { + "default": "18", + "cds-g0": "{carbon.typography.heading03.font-size}", + "cds-g10": "{carbon.typography.heading03.font-size}", + "cds-g90": "{carbon.typography.heading03.font-size}", + "cds-g100": "{carbon.typography.heading03.font-size}" + }, "key": "{typography.display-300.font-size}" }, "name": "token-typography-display-300-font-size", @@ -8149,12 +16122,26 @@ "$type": "number", "$value": 1.3333, "comment": "24px", + "$modes": { + "default": 1.3333, + "cds-g0": 1.4, + "cds-g10": 1.4, + "cds-g90": 1.4, + "cds-g100": 1.4 + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "number", "$value": 1.3333, "comment": "24px", + "$modes": { + "default": 1.3333, + "cds-g0": "{carbon.typography.heading03.line-height}", + "cds-g10": "{carbon.typography.heading03.line-height}", + "cds-g90": "{carbon.typography.heading03.line-height}", + "cds-g100": "{carbon.typography.heading03.line-height}" + }, "key": "{typography.display-300.line-height}" }, "name": "token-typography-display-300-line-height", @@ -8172,14 +16159,26 @@ "$type": "letter-spacing", "$value": "-0.5px", "unit": "px", - "comment": "this is `tracking`", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "letter-spacing", "$value": -0.5, "unit": "px", - "comment": "this is `tracking`", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading03.letter-spacing}", + "cds-g10": "{carbon.typography.heading03.letter-spacing}", + "cds-g90": "{carbon.typography.heading03.letter-spacing}", + "cds-g100": "{carbon.typography.heading03.letter-spacing}" + }, "key": "{typography.display-300.letter-spacing}" }, "name": "token-typography-display-300-letter-spacing", @@ -8198,11 +16197,25 @@ "key": "{typography.display-200.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-family", "$value": "{typography.font-stack.display}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-200.font-family}" }, "name": "token-typography-display-200-font-family", @@ -8221,6 +16234,13 @@ "$value": "1rem", "unit": "px", "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { @@ -8228,6 +16248,13 @@ "$value": "16", "unit": "px", "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.heading02.font-size}", + "cds-g10": "{carbon.typography.heading02.font-size}", + "cds-g90": "{carbon.typography.heading02.font-size}", + "cds-g100": "{carbon.typography.heading02.font-size}" + }, "key": "{typography.display-200.font-size}" }, "name": "token-typography-display-200-font-size", @@ -8245,12 +16272,26 @@ "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": "{carbon.typography.heading02.line-height}", + "cds-g10": "{carbon.typography.heading02.line-height}", + "cds-g90": "{carbon.typography.heading02.line-height}", + "cds-g100": "{carbon.typography.heading02.line-height}" + }, "key": "{typography.display-200.line-height}" }, "name": "token-typography-display-200-line-height", @@ -8268,14 +16309,26 @@ "$type": "letter-spacing", "$value": "-0.5px", "unit": "px", - "comment": "this is `tracking`", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "letter-spacing", "$value": -0.5, "unit": "px", - "comment": "this is `tracking`", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading02.letter-spacing}", + "cds-g10": "{carbon.typography.heading02.letter-spacing}", + "cds-g90": "{carbon.typography.heading02.letter-spacing}", + "cds-g100": "{carbon.typography.heading02.letter-spacing}" + }, "key": "{typography.display-200.letter-spacing}" }, "name": "token-typography-display-200-letter-spacing", @@ -8294,11 +16347,25 @@ "key": "{typography.display-100.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{typography.font-stack.display}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-100.font-family}" }, "name": "token-typography-display-100-font-family", @@ -8317,6 +16384,13 @@ "$value": "0.8125rem", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { @@ -8324,6 +16398,13 @@ "$value": "13", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.heading01.font-size}", + "cds-g10": "{carbon.typography.heading01.font-size}", + "cds-g90": "{carbon.typography.heading01.font-size}", + "cds-g100": "{carbon.typography.heading01.font-size}" + }, "key": "{typography.display-100.font-size}" }, "name": "token-typography-display-100-font-size", @@ -8341,12 +16422,26 @@ "$type": "number", "$value": 1.3846, "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "number", "$value": 1.3846, "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": "{carbon.typography.heading01.line-height}", + "cds-g10": "{carbon.typography.heading01.line-height}", + "cds-g90": "{carbon.typography.heading01.line-height}", + "cds-g100": "{carbon.typography.heading01.line-height}" + }, "key": "{typography.display-100.line-height}" }, "name": "token-typography-display-100-line-height", @@ -8358,6 +16453,43 @@ "display-100", "line-height" ] + }, + "letter-spacing": { + "key": "{typography.display-100.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0.16px", + "cds-g10": "0.16px", + "cds-g90": "0.16px", + "cds-g100": "0.16px" + }, + "filePath": "src/products/shared/typography.json", + "isSource": true, + "original": { + "$type": "letter-spacing", + "$value": 0, + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.heading01.letter-spacing}", + "cds-g10": "{carbon.typography.heading01.letter-spacing}", + "cds-g90": "{carbon.typography.heading01.letter-spacing}", + "cds-g100": "{carbon.typography.heading01.letter-spacing}" + }, + "key": "{typography.display-100.letter-spacing}" + }, + "name": "token-typography-display-100-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "letter-spacing" + ] } }, "body-300": { @@ -8365,11 +16497,25 @@ "key": "{typography.body-300.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-family", "$value": "{typography.font-stack.text}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-300.font-family}" }, "name": "token-typography-body-300-font-family", @@ -8388,6 +16534,13 @@ "$value": "1rem", "unit": "px", "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { @@ -8395,6 +16548,13 @@ "$value": "16", "unit": "px", "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.body02.font-size}", + "cds-g10": "{carbon.typography.body02.font-size}", + "cds-g90": "{carbon.typography.body02.font-size}", + "cds-g100": "{carbon.typography.body02.font-size}" + }, "key": "{typography.body-300.font-size}" }, "name": "token-typography-body-300-font-size", @@ -8412,12 +16572,26 @@ "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": "{carbon.typography.body02.line-height}", + "cds-g10": "{carbon.typography.body02.line-height}", + "cds-g90": "{carbon.typography.body02.line-height}", + "cds-g100": "{carbon.typography.body02.line-height}" + }, "key": "{typography.body-300.line-height}" }, "name": "token-typography-body-300-line-height", @@ -8436,11 +16610,25 @@ "key": "{typography.body-200.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-family", "$value": "{typography.font-stack.text}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-200.font-family}" }, "name": "token-typography-body-200-font-family", @@ -8459,6 +16647,13 @@ "$value": "0.875rem", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { @@ -8466,6 +16661,13 @@ "$value": "14", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "{carbon.typography.body01.font-size}", + "cds-g10": "{carbon.typography.body01.font-size}", + "cds-g90": "{carbon.typography.body01.font-size}", + "cds-g100": "{carbon.typography.body01.font-size}" + }, "key": "{typography.body-200.font-size}" }, "name": "token-typography-body-200-font-size", @@ -8483,12 +16685,26 @@ "$type": "number", "$value": 1.4286, "comment": "20px", + "$modes": { + "default": 1.4286, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "number", "$value": 1.4286, "comment": "20px", + "$modes": { + "default": 1.4286, + "cds-g0": "{carbon.typography.body01.line-height}", + "cds-g10": "{carbon.typography.body01.line-height}", + "cds-g90": "{carbon.typography.body01.line-height}", + "cds-g100": "{carbon.typography.body01.line-height}" + }, "key": "{typography.body-200.line-height}" }, "name": "token-typography-body-200-line-height", @@ -8507,11 +16723,25 @@ "key": "{typography.body-100.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-family", "$value": "{typography.font-stack.text}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-100.font-family}" }, "name": "token-typography-body-100-font-family", @@ -8530,6 +16760,13 @@ "$value": "0.8125rem", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { @@ -8537,6 +16774,13 @@ "$value": "13", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.bodyCompact01.font-size}", + "cds-g10": "{carbon.typography.bodyCompact01.font-size}", + "cds-g90": "{carbon.typography.bodyCompact01.font-size}", + "cds-g100": "{carbon.typography.bodyCompact01.font-size}" + }, "key": "{typography.body-100.font-size}" }, "name": "token-typography-body-100-font-size", @@ -8554,12 +16798,26 @@ "$type": "number", "$value": 1.3846, "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "number", "$value": 1.3846, "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": "{carbon.typography.bodyCompact01.line-height}", + "cds-g10": "{carbon.typography.bodyCompact01.line-height}", + "cds-g90": "{carbon.typography.bodyCompact01.line-height}", + "cds-g100": "{carbon.typography.bodyCompact01.line-height}" + }, "key": "{typography.body-100.line-height}" }, "name": "token-typography-body-100-line-height", @@ -8573,73 +16831,115 @@ ] } }, - "code-100": { + "code-300": { "font-family": { - "key": "{typography.code-100.font-family}", + "key": "{typography.code-300.font-family}", "$type": "font-family", "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "default": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-family", "$value": "{typography.font-stack.code}", - "key": "{typography.code-100.font-family}" + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-300.font-family}" }, - "name": "token-typography-code-100-font-family", + "name": "token-typography-code-300-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "font-family" ] }, "font-size": { - "key": "{typography.code-100.font-size}", + "key": "{typography.code-300.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "1rem", "unit": "px", - "comment": "13px/0.8125rem", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-size", - "$value": "13", + "$value": "16", "unit": "px", - "comment": "13px/0.8125rem", - "key": "{typography.code-100.font-size}" + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-300.font-size}" }, - "name": "token-typography-code-100-font-size", + "name": "token-typography-code-300-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "font-size" ] }, "line-height": { - "key": "{typography.code-100.line-height}", + "key": "{typography.code-300.line-height}", "$type": "number", - "$value": 1.23, - "comment": "16px", + "$value": 1.25, + "comment": "20px", + "$modes": { + "default": 1.25, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "number", - "$value": 1.23, - "comment": "16px", - "key": "{typography.code-100.line-height}" + "$value": 1.25, + "comment": "20px", + "$modes": { + "default": 1.25, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-300.line-height}" }, - "name": "token-typography-code-100-line-height", + "name": "token-typography-code-300-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "line-height" ] } @@ -8649,11 +16949,25 @@ "key": "{typography.code-200.font-family}", "$type": "font-family", "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "default": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-family", "$value": "{typography.font-stack.code}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, "key": "{typography.code-200.font-family}" }, "name": "token-typography-code-200-font-family", @@ -8672,6 +16986,13 @@ "$value": "0.875rem", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { @@ -8679,6 +17000,13 @@ "$value": "14", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, "key": "{typography.code-200.font-size}" }, "name": "token-typography-code-200-font-size", @@ -8696,12 +17024,26 @@ "$type": "number", "$value": 1.125, "comment": "18px", + "$modes": { + "default": 1.125, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "number", "$value": 1.125, "comment": "18px", + "$modes": { + "default": 1.125, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, "key": "{typography.code-200.line-height}" }, "name": "token-typography-code-200-line-height", @@ -8715,73 +17057,115 @@ ] } }, - "code-300": { + "code-100": { "font-family": { - "key": "{typography.code-300.font-family}", + "key": "{typography.code-100.font-family}", "$type": "font-family", "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "default": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-family", "$value": "{typography.font-stack.code}", - "key": "{typography.code-300.font-family}" + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-100.font-family}" }, - "name": "token-typography-code-300-font-family", + "name": "token-typography-code-100-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "font-family" ] }, "font-size": { - "key": "{typography.code-300.font-size}", + "key": "{typography.code-100.font-size}", "$type": "font-size", - "$value": "1rem", + "$value": "0.8125rem", "unit": "px", - "comment": "16px/1rem", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-size", - "$value": "16", + "$value": "13", "unit": "px", - "comment": "16px/1rem", - "key": "{typography.code-300.font-size}" + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-100.font-size}" }, - "name": "token-typography-code-300-font-size", + "name": "token-typography-code-100-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "font-size" ] }, "line-height": { - "key": "{typography.code-300.line-height}", + "key": "{typography.code-100.line-height}", "$type": "number", - "$value": 1.25, - "comment": "20px", + "$value": 1.23, + "comment": "16px", + "$modes": { + "default": 1.23, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "number", - "$value": 1.25, - "comment": "20px", - "key": "{typography.code-300.line-height}" + "$value": 1.23, + "comment": "16px", + "$modes": { + "default": 1.23, + "cds-g0": "{carbon.typography.code01.line-height}", + "cds-g10": "{carbon.typography.code01.line-height}", + "cds-g90": "{carbon.typography.code01.line-height}", + "cds-g100": "{carbon.typography.code01.line-height}" + }, + "key": "{typography.code-100.line-height}" }, - "name": "token-typography-code-300-line-height", + "name": "token-typography-code-100-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "line-height" ] } diff --git a/packages/tokens/dist/products/css/helpers/color.css b/packages/tokens/dist/products/css/helpers/color.css index 9dd87a49f3b..c5938c8456d 100644 --- a/packages/tokens/dist/products/css/helpers/color.css +++ b/packages/tokens/dist/products/css/helpers/color.css @@ -35,6 +35,7 @@ .hds-surface-primary { background-color: var(--token-color-surface-primary); } .hds-surface-faint { background-color: var(--token-color-surface-faint); } .hds-surface-strong { background-color: var(--token-color-surface-strong); } +.hds-surface-high-contrast { background-color: var(--token-color-surface-high-contrast); } .hds-surface-interactive { background-color: var(--token-color-surface-interactive); } .hds-surface-interactive-hover { background-color: var(--token-color-surface-interactive-hover); } .hds-surface-interactive-active { background-color: var(--token-color-surface-interactive-active); } diff --git a/packages/tokens/dist/products/css/helpers/typography.css b/packages/tokens/dist/products/css/helpers/typography.css index c0913ef1a67..63dd3021863 100644 --- a/packages/tokens/dist/products/css/helpers/typography.css +++ b/packages/tokens/dist/products/css/helpers/typography.css @@ -17,6 +17,6 @@ .hds-typography-body-300 { font-family: var(--token-typography-body-300-font-family); font-size: var(--token-typography-body-300-font-size); line-height: var(--token-typography-body-300-line-height); margin: 0; padding: 0; } .hds-typography-body-200 { font-family: var(--token-typography-body-200-font-family); font-size: var(--token-typography-body-200-font-size); line-height: var(--token-typography-body-200-line-height); margin: 0; padding: 0; } .hds-typography-body-100 { font-family: var(--token-typography-body-100-font-family); font-size: var(--token-typography-body-100-font-size); line-height: var(--token-typography-body-100-line-height); margin: 0; padding: 0; } -.hds-typography-code-100 { font-family: var(--token-typography-code-100-font-family); font-size: var(--token-typography-code-100-font-size); line-height: var(--token-typography-code-100-line-height); margin: 0; padding: 0; } -.hds-typography-code-200 { font-family: var(--token-typography-code-200-font-family); font-size: var(--token-typography-code-200-font-size); line-height: var(--token-typography-code-200-line-height); margin: 0; padding: 0; } .hds-typography-code-300 { font-family: var(--token-typography-code-300-font-family); font-size: var(--token-typography-code-300-font-size); line-height: var(--token-typography-code-300-line-height); margin: 0; padding: 0; } +.hds-typography-code-200 { font-family: var(--token-typography-code-200-font-family); font-size: var(--token-typography-code-200-font-size); line-height: var(--token-typography-code-200-line-height); margin: 0; padding: 0; } +.hds-typography-code-100 { font-family: var(--token-typography-code-100-font-family); font-size: var(--token-typography-code-100-font-size); line-height: var(--token-typography-code-100-line-height); margin: 0; padding: 0; } diff --git a/packages/tokens/dist/products/css/themed-tokens/with-css-selectors--advanced/tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-css-selectors--advanced/tokens.css new file mode 100644 index 00000000000..9ae2916a8cc --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-css-selectors--advanced/tokens.css @@ -0,0 +1,2888 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root, +.hds-theme-default { + --token-app-footer-focus-color-action-internal: var( + --token-color-focus-action-internal + ); + --token-badge-border-radius: var(--token-border-radius-small); + --token-badge-count-padding-horizontal-large: 14px; + --token-badge-count-padding-horizontal-medium: 12px; + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-foreground-color-critical-filled: var( + --token-color-palette-red-400 + ); /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: var( + --token-color-foreground-high-contrast + ); + --token-badge-foreground-color-critical-outlined: var( + --token-color-foreground-critical + ); + --token-badge-foreground-color-highlight-filled: var( + --token-color-palette-purple-400 + ); /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: var( + --token-color-foreground-high-contrast + ); + --token-badge-foreground-color-highlight-outlined: var( + --token-color-foreground-highlight + ); + --token-badge-foreground-color-neutral-dark-mode-filled: var( + --token-color-foreground-high-contrast + ); + --token-badge-foreground-color-neutral-dark-mode-inverted: var( + --token-color-foreground-primary + ); + --token-badge-foreground-color-neutral-dark-mode-outlined: var( + --token-color-foreground-high-contrast + ); + --token-badge-foreground-color-neutral-filled: var( + --token-color-foreground-primary + ); + --token-badge-foreground-color-neutral-inverted: var( + --token-color-foreground-high-contrast + ); + --token-badge-foreground-color-neutral-outlined: var( + --token-color-foreground-primary + ); + --token-badge-foreground-color-success-filled: var( + --token-color-palette-green-400 + ); /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: var( + --token-color-foreground-high-contrast + ); + --token-badge-foreground-color-success-outlined: var( + --token-color-foreground-success + ); + --token-badge-foreground-color-warning-filled: var( + --token-color-palette-amber-400 + ); + --token-badge-foreground-color-warning-inverted: var( + --token-color-foreground-high-contrast + ); + --token-badge-foreground-color-warning-outlined: var( + --token-color-foreground-warning + ); + --token-badge-gap-large: 6px; + --token-badge-gap-medium: 4px; + --token-badge-gap-small: 4px; + --token-badge-height-small: 20px; + --token-badge-padding-horizontal-large: 8px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-small: 6px; + --token-badge-padding-vertical-small: 2px; + --token-badge-surface-color-critical-filled: var( + --token-color-palette-red-100 + ); /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: var( + --token-color-palette-red-200 + ); + --token-badge-surface-color-highlight-filled: var( + --token-color-palette-purple-100 + ); /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: var( + --token-color-palette-purple-200 + ); + --token-badge-surface-color-neutral-dark-mode-filled: var( + --token-color-palette-neutral-500 + ); /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: var( + --token-color-surface-faint + ); + --token-badge-surface-color-neutral-filled: var( + --token-color-palette-neutral-200 + ); + --token-badge-surface-color-neutral-inverted: var( + --token-color-palette-neutral-500 + ); /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-success-filled: var( + --token-color-palette-green-100 + ); /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: var( + --token-color-palette-green-200 + ); + --token-badge-surface-color-warning-filled: var( + --token-color-palette-amber-100 + ); /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: var( + --token-color-palette-amber-200 + ); + --token-badge-typography-font-size-large: 1rem; + --token-badge-typography-font-size-medium: 0.8125rem; + --token-badge-typography-font-size-small: 0.8125rem; + --token-badge-typography-line-height-large: 1.5; /** 24px = 1.5 */ + --token-border-radius-large: 8px; + --token-border-radius-medium: 6px; + --token-border-radius-small: 5px; + --token-border-radius-x-small: 3px; + --token-button-border-color-critical-active: var( + --token-color-palette-red-400 + ); + --token-button-border-color-critical-default: var( + --token-color-foreground-critical-on-surface + ); + --token-button-border-color-critical-focus-external: var( + --token-color-focus-critical-external + ); /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-focus-internal: var( + --token-color-focus-critical-internal + ); /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-hover: var( + --token-color-palette-red-400 + ); + --token-button-border-color-primary-active: var( + --token-color-palette-blue-400 + ); + --token-button-border-color-primary-default: var( + --token-color-palette-blue-300 + ); + --token-button-border-color-primary-focus-external: var( + --token-color-focus-action-external + ); /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-focus-internal: var( + --token-color-focus-action-internal + ); /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-hover: var( + --token-color-palette-blue-300 + ); + --token-button-border-color-secondary-active: var( + --token-color-border-strong + ); + --token-button-border-color-secondary-default: var( + --token-color-border-strong + ); + --token-button-border-color-secondary-focus-external: var( + --token-color-focus-action-external + ); /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-focus-internal: var( + --token-color-focus-action-internal + ); /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-hover: var(--token-color-border-strong); + --token-button-border-radius: var(--token-border-radius-small); + --token-button-foreground-color-critical-active: var( + --token-color-foreground-high-contrast + ); + --token-button-foreground-color-critical-default: var( + --token-color-foreground-critical-on-surface + ); + --token-button-foreground-color-critical-focus: var( + --token-color-foreground-critical-on-surface + ); + --token-button-foreground-color-critical-hover: var( + --token-color-foreground-high-contrast + ); + --token-button-foreground-color-disabled: var( + --token-color-foreground-disabled + ); + --token-button-foreground-color-primary-active: var( + --token-color-foreground-high-contrast + ); + --token-button-foreground-color-primary-default: var( + --token-color-foreground-high-contrast + ); + --token-button-foreground-color-primary-focus: var( + --token-color-foreground-high-contrast + ); + --token-button-foreground-color-primary-hover: var( + --token-color-foreground-high-contrast + ); + --token-button-foreground-color-secondary-active: var( + --token-color-foreground-primary + ); + --token-button-foreground-color-secondary-default: var( + --token-color-foreground-primary + ); + --token-button-foreground-color-secondary-focus: var( + --token-color-foreground-primary + ); + --token-button-foreground-color-secondary-hover: var( + --token-color-foreground-primary + ); + --token-button-foreground-color-tertiary-active: var( + --token-color-foreground-action-active + ); + --token-button-foreground-color-tertiary-default: var( + --token-color-foreground-action + ); + --token-button-foreground-color-tertiary-focus: var( + --token-color-foreground-action + ); + --token-button-foreground-color-tertiary-hover: var( + --token-color-foreground-action-hover + ); + --token-button-gap: 6px; + --token-button-height-large: 48px; + --token-button-height-medium: 36px; + --token-button-height-small: 28px; + --token-button-icon-size-large: 24px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-small: 12px; + --token-button-padding-horizontal-large: 19px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-small: 11px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 11px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 9px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-surface-color-critical-active: var( + --token-color-palette-red-400 + ); + --token-button-surface-color-critical-default: var( + --token-color-surface-critical + ); + --token-button-surface-color-critical-focus: var( + --token-color-surface-critical + ); + --token-button-surface-color-critical-hover: var( + --token-color-palette-red-300 + ); + --token-button-surface-color-disabled: var(--token-color-surface-faint); + --token-button-surface-color-primary-active: var( + --token-color-palette-blue-400 + ); + --token-button-surface-color-primary-default: var( + --token-color-palette-blue-200 + ); + --token-button-surface-color-primary-focus: var( + --token-color-palette-blue-200 + ); + --token-button-surface-color-primary-hover: var( + --token-color-palette-blue-300 + ); + --token-button-surface-color-secondary-active: var( + --token-color-surface-interactive-active + ); + --token-button-surface-color-secondary-default: var( + --token-color-surface-faint + ); + --token-button-surface-color-secondary-focus: var( + --token-color-surface-faint + ); + --token-button-surface-color-secondary-hover: var( + --token-color-surface-primary + ); + --token-button-surface-color-tertiary-active: var( + --token-color-surface-interactive-active + ); + --token-button-surface-color-tertiary-focus: rgba(0, 0, 0, 0); + --token-button-surface-color-tertiary-hover: var( + --token-color-surface-primary + ); + --token-button-typography-font-size-large: 1rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-small: 0.8125rem; + --token-button-typography-line-height-large: 1.5; /** 24px = 1.5 */ + --token-button-typography-line-height-medium: 1.1429; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-small: 0.9286; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-color-border-action: var(--token-color-palette-blue-100); + --token-color-border-critical: var(--token-color-palette-red-100); + --token-color-border-faint: var(--token-color-palette-alpha-100); + --token-color-border-highlight: var(--token-color-palette-purple-100); + --token-color-border-primary: var(--token-color-palette-alpha-200); + --token-color-border-strong: var(--token-color-palette-alpha-300); + --token-color-border-success: var(--token-color-palette-green-100); + --token-color-border-warning: var(--token-color-palette-amber-100); + --token-color-focus-action-external: #5990ff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-action-internal: var(--token-color-palette-blue-300); + --token-color-focus-critical-external: #dd7578; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: var(--token-color-palette-red-300); + --token-color-foreground-action-active: var(--token-color-palette-blue-400); + --token-color-foreground-action-hover: var(--token-color-palette-blue-300); + --token-color-foreground-action: var(--token-color-palette-blue-200); + --token-color-foreground-critical-high-contrast: var( + --token-color-palette-red-500 + ); + --token-color-foreground-critical-on-surface: var( + --token-color-palette-red-300 + ); + --token-color-foreground-critical: var(--token-color-palette-red-200); + --token-color-foreground-disabled: var(--token-color-palette-neutral-400); + --token-color-foreground-faint: var(--token-color-palette-neutral-500); + --token-color-foreground-high-contrast: var(--token-color-palette-neutral-0); + --token-color-foreground-highlight-high-contrast: var( + --token-color-palette-purple-500 + ); + --token-color-foreground-highlight-on-surface: var( + --token-color-palette-purple-300 + ); + --token-color-foreground-highlight: var(--token-color-palette-purple-200); + --token-color-foreground-primary: var(--token-color-palette-neutral-600); + --token-color-foreground-strong: var(--token-color-palette-neutral-700); + --token-color-foreground-success-high-contrast: var( + --token-color-palette-green-500 + ); + --token-color-foreground-success-on-surface: var( + --token-color-palette-green-300 + ); + --token-color-foreground-success: var(--token-color-palette-green-200); + --token-color-foreground-warning-high-contrast: var( + --token-color-palette-amber-500 + ); + --token-color-foreground-warning-on-surface: var( + --token-color-palette-amber-300 + ); + --token-color-foreground-warning: var(--token-color-palette-amber-200); + --token-color-hashicorp-brand: #000000; + --token-color-hcp-brand: #000000; + --token-color-page-faint: var(--token-color-palette-neutral-50); + --token-color-page-primary: var(--token-color-palette-neutral-0); + --token-color-palette-alpha-100: #656a761a; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-400: #006619; + --token-color-palette-green-500: #054220; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-neutral-100: #f1f2f3; + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-300: #c2c5cb; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-400: #940004; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-50: #fff5f5; + --token-color-surface-action: var(--token-color-palette-blue-50); + --token-color-surface-critical: var(--token-color-palette-red-50); + --token-color-surface-faint: var(--token-color-palette-neutral-50); + --token-color-surface-high-contrast: var(--token-color-palette-neutral-700); + --token-color-surface-highlight: var(--token-color-palette-purple-50); + --token-color-surface-interactive-active: var( + --token-color-palette-neutral-200 + ); + --token-color-surface-interactive-disabled: var( + --token-color-palette-neutral-50 + ); + --token-color-surface-interactive-hover: var( + --token-color-palette-neutral-100 + ); + --token-color-surface-interactive: var(--token-color-palette-neutral-0); + --token-color-surface-primary: var(--token-color-palette-neutral-0); + --token-color-surface-strong: var(--token-color-palette-neutral-100); + --token-color-surface-success: var(--token-color-palette-green-50); + --token-color-surface-warning: var(--token-color-palette-amber-50); + --token-color-vault-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-radar-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ + --token-color-vault-secrets-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-dismiss-button-border-color-active: var(--token-color-border-strong); + --token-dismiss-button-foreground-color-active: var( + --token-color-foreground-strong + ); + --token-dismiss-button-foreground-color-default: var( + --token-color-foreground-faint + ); + --token-dismiss-button-icon-size: 16px; + --token-dismiss-button-size: 24px; + --token-dismiss-button-surface-color-active: rgba(222, 223, 227, 0.4); + --token-dismiss-button-surface-color-hover: rgba(222, 223, 227, 0.4); + --token-elevation-high-box-shadow: + 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633; + --token-elevation-higher-box-shadow: + 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640; + --token-elevation-inset-box-shadow: inset 0px 1px 2px 1px #656a761a; + --token-elevation-low-box-shadow: + 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; + --token-elevation-mid-box-shadow: + 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633; + --token-elevation-overlay-box-shadow: + 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; + --token-focus-ring-action-box-shadow: + inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff; + --token-focus-ring-critical-box-shadow: + inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578; + --token-form-radiocard-border-color-default-checked: var( + --token-color-palette-blue-300 + ); + --token-form-radiocard-border-color-default: var( + --token-color-surface-primary + ); + --token-form-radiocard-border-color-focus: var( + --token-color-focus-action-internal + ); + --token-form-radiocard-border-radius: 6px; + --token-icon-tile-border-color-logo: var(--token-color-border-primary); + --token-icon-tile-border-color-overlay: var(--token-color-border-primary); + --token-icon-tile-surface-color-overlay: var(--token-color-surface-primary); + --token-rich-tooltip-bubble-arrow-size: 20px; + --token-rich-tooltip-bubble-border-color: #656a7633; + --token-rich-tooltip-bubble-border-radius: var(--token-border-radius-small); + --token-rich-tooltip-bubble-max-width: 280px; + --token-rich-tooltip-toggle-foreground-color-active: var( + --token-color-foreground-faint + ); + --token-rich-tooltip-toggle-foreground-color-default: var( + --token-color-foreground-strong + ); + --token-rich-tooltip-toggle-foreground-color-hover: var( + --token-color-foreground-primary + ); + --token-rich-tooltip-toggle-gap-horizontal: 4px; + --token-rich-tooltip-toggle-icon-size: 1em; + --token-surface-base-box-shadow: 0 0 0 1px #656a7633; + --token-surface-high-box-shadow: + 0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, + 0px 16px 16px -10px #656a7633; + --token-surface-higher-box-shadow: + 0 0 0 1px #656a7633, 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640; + --token-surface-inset-box-shadow: + inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a; + --token-surface-low-box-shadow: + 0 0 0 1px #656a7626, 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; + --token-surface-mid-box-shadow: + 0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633; + --token-surface-overlay-box-shadow: + 0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; + --token-tooltip-border-radius: var(--token-border-radius-small); + --token-tooltip-caret-clip-path: path( + "M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z" + ); + --token-tooltip-caret-height: 7px; + --token-tooltip-caret-width: 16px; + --token-tooltip-max-width: 280px; + --token-tooltip-padding-horizontal: 12px; + --token-tooltip-padding-vertical: 8px; + --token-typography-body-100-font-family: var( + --token-typography-font-stack-text + ); + --token-typography-body-100-font-size: 0.8125rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.3846; /** 18px */ + --token-typography-body-200-font-family: var( + --token-typography-font-stack-text + ); + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.4286; /** 20px */ + --token-typography-body-300-font-family: var( + --token-typography-font-stack-text + ); + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-code-100-font-family: var( + --token-typography-font-stack-code + ); + --token-typography-code-100-font-size: 0.8125rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.23; /** 16px */ + --token-typography-code-200-font-family: var( + --token-typography-font-stack-code + ); + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.125; /** 18px */ + --token-typography-code-300-font-family: var( + --token-typography-font-stack-code + ); + --token-typography-code-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.25; /** 20px */ + --token-typography-display-100-font-family: var( + --token-typography-font-stack-display + ); + --token-typography-display-100-font-size: 0.8125rem; /** 13px/0.8125rem */ + --token-typography-display-100-letter-spacing: 0px; + --token-typography-display-100-line-height: 1.3846; /** 18px */ + --token-typography-display-200-font-family: var( + --token-typography-font-stack-display + ); + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-letter-spacing: -0.5px; + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-300-font-family: var( + --token-typography-font-stack-text + ); + --token-typography-display-300-font-size: 1.125rem; /** 18px/1.125rem */ + --token-typography-display-300-letter-spacing: -0.5px; + --token-typography-display-300-line-height: 1.3333; /** 24px */ + --token-typography-display-400-font-family: var( + --token-typography-font-stack-display + ); + --token-typography-display-400-font-size: 1.5rem; /** 24px/1.5rem */ + --token-typography-display-400-letter-spacing: 0px; + --token-typography-display-400-line-height: 1.3333; /** 32px */ + --token-typography-display-500-font-family: var( + --token-typography-font-stack-display + ); + --token-typography-display-500-font-size: 1.875rem; /** 30px/1.875rem */ + --token-typography-display-500-letter-spacing: -0.5px; + --token-typography-display-500-line-height: 1.2666; /** 38px */ + --token-typography-font-stack-code: ui-monospace, Menlo, Consolas, monospace; + --token-typography-font-stack-display: + -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, + Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-font-stack-text: + -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, + Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-font-weight-bold: 700; + --token-typography-font-weight-medium: 500; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-semibold: 600; +} + +@media (prefers-color-scheme: light) { + .hds-theme-system { + --token-app-footer-focus-color-action-internal: #0f62fe; + --token-badge-border-radius: var(--token-border-radius-rounded); + --token-badge-count-padding-horizontal-large: 12px; + --token-badge-count-padding-horizontal-medium: 8px; + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-foreground-color-critical-filled: #a2191f; /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: #ffffff; + --token-badge-foreground-color-critical-outlined: #a2191f; + --token-badge-foreground-color-highlight-filled: #6929c4; /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: #ffffff; + --token-badge-foreground-color-highlight-outlined: #6929c4; + --token-badge-foreground-color-neutral-dark-mode-filled: #ffffff; + --token-badge-foreground-color-neutral-dark-mode-inverted: #161616; + --token-badge-foreground-color-neutral-dark-mode-outlined: #ffffff; + --token-badge-foreground-color-neutral-filled: #161616; + --token-badge-foreground-color-neutral-inverted: #e0e0e0; + --token-badge-foreground-color-neutral-outlined: #161616; + --token-badge-foreground-color-success-filled: #0e6027; /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: #ffffff; + --token-badge-foreground-color-success-outlined: #0e6027; + --token-badge-foreground-color-warning-filled: #8a3800; + --token-badge-foreground-color-warning-inverted: #ffffff; + --token-badge-foreground-color-warning-outlined: #8a3800; + --token-badge-gap-large: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-small: 4px; + --token-badge-height-small: 18px; + --token-badge-padding-horizontal-large: 12px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-small: 8px; + --token-badge-padding-vertical-small: 1px; + --token-badge-surface-color-critical-filled: #ffd7d9; /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: #a2191f; + --token-badge-surface-color-highlight-filled: #e8daff; /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: #6929c4; + --token-badge-surface-color-neutral-dark-mode-filled: #393939; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: #e0e0e0; + --token-badge-surface-color-neutral-filled: #e0e0e0; + --token-badge-surface-color-neutral-inverted: #393939; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-success-filled: #a7f0ba; /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: #0e6027; + --token-badge-surface-color-warning-filled: #ffd9be; /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: #8a3800; + --token-badge-typography-font-size-large: 0.75rem; + --token-badge-typography-font-size-medium: 0.75rem; + --token-badge-typography-font-size-small: 0.75rem; + --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */ + --token-border-radius-large: 0px; + --token-border-radius-medium: 0px; + --token-border-radius-small: 0px; + --token-border-radius-x-small: 0px; + --token-button-border-color-critical-active: rgba(0, 0, 0, 0); + --token-button-border-color-critical-default: rgba(0, 0, 0, 0); + --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-hover: rgba(0, 0, 0, 0); + --token-button-border-color-primary-active: rgba(0, 0, 0, 0); + --token-button-border-color-primary-default: rgba(0, 0, 0, 0); + --token-button-border-color-primary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-hover: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-active: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-default: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0); + --token-button-border-radius: 0px; + --token-button-foreground-color-critical-active: #ffffff; + --token-button-foreground-color-critical-default: #ffffff; + --token-button-foreground-color-critical-focus: #ffffff; + --token-button-foreground-color-critical-hover: #ffffff; + --token-button-foreground-color-disabled: #8d8d8d; + --token-button-foreground-color-primary-active: #ffffff; + --token-button-foreground-color-primary-default: #ffffff; + --token-button-foreground-color-primary-focus: #ffffff; + --token-button-foreground-color-primary-hover: #ffffff; + --token-button-foreground-color-secondary-active: #ffffff; + --token-button-foreground-color-secondary-default: #ffffff; + --token-button-foreground-color-secondary-focus: #ffffff; + --token-button-foreground-color-secondary-hover: #ffffff; + --token-button-foreground-color-tertiary-active: #ffffff; + --token-button-foreground-color-tertiary-default: #0f62fe; + --token-button-foreground-color-tertiary-focus: #ffffff; + --token-button-foreground-color-tertiary-hover: #ffffff; + --token-button-gap: 32px; + --token-button-height-large: 48px; + --token-button-height-medium: 40px; + --token-button-height-small: 32px; + --token-button-icon-size-large: 16px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-small: 16px; + --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-surface-color-critical-active: #750e13; + --token-button-surface-color-critical-default: #da1e28; + --token-button-surface-color-critical-focus: #da1e28; + --token-button-surface-color-critical-hover: #b81921; + --token-button-surface-color-disabled: #c6c6c6; + --token-button-surface-color-primary-active: #002d9c; + --token-button-surface-color-primary-default: #0f62fe; + --token-button-surface-color-primary-focus: #0f62fe; + --token-button-surface-color-primary-hover: #0050e6; + --token-button-surface-color-secondary-active: #6f6f6f; + --token-button-surface-color-secondary-default: #393939; + --token-button-surface-color-secondary-focus: #393939; + --token-button-surface-color-secondary-hover: #474747; + --token-button-surface-color-tertiary-active: #002d9c; + --token-button-surface-color-tertiary-focus: #0050e6; + --token-button-surface-color-tertiary-hover: #0050e6; + --token-button-typography-font-size-large: 0.875rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-small: 0.875rem; + --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */ + --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-color-border-action: #0f62fe; + --token-color-border-critical: #ff8389; + --token-color-border-faint: #e0e0e0; + --token-color-border-highlight: #be95ff; + --token-color-border-primary: #c6c6c6; + --token-color-border-strong: #8d8d8d; + --token-color-border-success: #42be65; + --token-color-border-warning: #d2a106; + --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-action-internal: #ffffff; + --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #ffffff; + --token-color-foreground-action-active: #0043ce; + --token-color-foreground-action-hover: #0043ce; + --token-color-foreground-action: #0f62fe; + --token-color-foreground-critical-high-contrast: #750e13; + --token-color-foreground-critical-on-surface: #a2191f; + --token-color-foreground-critical: #da1e28; + --token-color-foreground-disabled: rgba(22, 22, 22, 0.25); + --token-color-foreground-faint: #525252; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-highlight-high-contrast: #491d8b; + --token-color-foreground-highlight-on-surface: #6929c4; + --token-color-foreground-highlight: #8a3ffc; + --token-color-foreground-primary: #161616; + --token-color-foreground-strong: #161616; + --token-color-foreground-success-high-contrast: #044317; + --token-color-foreground-success-on-surface: #0e6027; + --token-color-foreground-success: #198038; + --token-color-foreground-warning-high-contrast: #483700; + --token-color-foreground-warning-on-surface: #684e00; + --token-color-foreground-warning: #8e6a00; + --token-color-hashicorp-brand: #000000; + --token-color-hcp-brand: #000000; + --token-color-page-faint: #ffffff; + --token-color-page-primary: #ffffff; + --token-color-palette-alpha-100: #e0e0e0; + --token-color-palette-alpha-200: #c6c6c6; + --token-color-palette-alpha-300: #8d8d8d; + --token-color-palette-amber-100: #ffd9be; + --token-color-palette-amber-200: #ba4e00; + --token-color-palette-amber-300: #8a3800; + --token-color-palette-amber-400: #5e2900; + --token-color-palette-amber-500: #3e1a00; + --token-color-palette-amber-50: #fff2e8; + --token-color-palette-blue-100: #d0e2ff; + --token-color-palette-blue-200: #0f62fe; + --token-color-palette-blue-300: #0043ce; + --token-color-palette-blue-400: #002d9c; + --token-color-palette-blue-500: #001141; + --token-color-palette-blue-50: #edf5ff; + --token-color-palette-green-100: #a7f0ba; + --token-color-palette-green-200: #24a148; + --token-color-palette-green-300: #198038; + --token-color-palette-green-400: #0e6027; + --token-color-palette-green-500: #044317; + --token-color-palette-green-50: #defbe6; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-neutral-100: #e0e0e0; + --token-color-palette-neutral-200: #c6c6c6; + --token-color-palette-neutral-300: #a8a8a8; + --token-color-palette-neutral-400: #8d8d8d; + --token-color-palette-neutral-500: #525252; + --token-color-palette-neutral-50: #f4f4f4; + --token-color-palette-neutral-600: #393939; + --token-color-palette-neutral-700: #161616; + --token-color-palette-purple-100: #e8daff; + --token-color-palette-purple-200: #a56eff; + --token-color-palette-purple-300: #8a3ffc; + --token-color-palette-purple-400: #6929c4; + --token-color-palette-purple-500: #31135e; + --token-color-palette-purple-50: #f6f2ff; + --token-color-palette-red-100: #ffd7d9; + --token-color-palette-red-200: #da1e28; + --token-color-palette-red-300: #a2191f; + --token-color-palette-red-400: #750e13; + --token-color-palette-red-500: #520408; + --token-color-palette-red-50: #fff1f1; + --token-color-surface-action: #d0e2ff; + --token-color-surface-critical: #ffd7d9; + --token-color-surface-faint: #f4f4f4; + --token-color-surface-high-contrast: #393939; + --token-color-surface-highlight: #e8daff; + --token-color-surface-interactive-active: #c6c6c6; + --token-color-surface-interactive-disabled: #c6c6c6; + --token-color-surface-interactive-hover: #e8e8e8; + --token-color-surface-interactive: #f4f4f4; + --token-color-surface-primary: #f4f4f4; + --token-color-surface-strong: #e0e0e0; + --token-color-surface-success: #a7f0ba; + --token-color-surface-warning: #fcf4d6; + --token-color-vault-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-radar-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ + --token-color-vault-secrets-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-dismiss-button-border-color-active: rgba(0, 0, 0, 0); + --token-dismiss-button-foreground-color-active: #161616; + --token-dismiss-button-foreground-color-default: #161616; + --token-dismiss-button-icon-size: 20px; + --token-dismiss-button-size: 48px; + --token-dismiss-button-surface-color-active: rgba(141, 141, 141, 0.5); + --token-dismiss-button-surface-color-hover: rgba(141, 141, 141, 0.12); + --token-elevation-high-box-shadow: none; + --token-elevation-higher-box-shadow: none; + --token-elevation-inset-box-shadow: none; + --token-elevation-low-box-shadow: none; + --token-elevation-mid-box-shadow: none; + --token-elevation-overlay-box-shadow: none; + --token-focus-ring-action-box-shadow: + inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe; + --token-focus-ring-critical-box-shadow: + inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe; + --token-form-radiocard-border-color-default-checked: #ffc0cb; + --token-form-radiocard-border-color-default: rgba(0, 0, 0, 0); + --token-form-radiocard-border-color-focus: #ffc0cb; + --token-form-radiocard-border-radius: 0px; + --token-icon-tile-border-color-logo: #c6c6c6; + --token-icon-tile-border-color-overlay: #e0e0e0; + --token-icon-tile-surface-color-overlay: #ffffff; + --token-rich-tooltip-bubble-arrow-size: 12px; + --token-rich-tooltip-bubble-border-color: var( + --token-color-palette-alpha-200 + ); + --token-rich-tooltip-bubble-border-radius: 2px; + --token-rich-tooltip-bubble-max-width: 288px; + --token-rich-tooltip-toggle-foreground-color-active: #525252; + --token-rich-tooltip-toggle-foreground-color-default: #525252; + --token-rich-tooltip-toggle-foreground-color-hover: #161616; + --token-rich-tooltip-toggle-gap-horizontal: 8px; + --token-rich-tooltip-toggle-icon-size: 14px; + --token-surface-base-box-shadow: none; + --token-surface-high-box-shadow: none; + --token-surface-higher-box-shadow: none; + --token-surface-inset-box-shadow: none; + --token-surface-low-box-shadow: none; + --token-surface-mid-box-shadow: none; + --token-surface-overlay-box-shadow: none; + --token-tooltip-border-radius: 2px; + --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); + --token-tooltip-caret-height: 6px; + --token-tooltip-caret-width: 12px; + --token-tooltip-max-width: 288px; + --token-tooltip-padding-horizontal: 16px; + --token-tooltip-padding-vertical: 16px; + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-letter-spacing: 0.16px; + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-letter-spacing: 0px; + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-letter-spacing: 0px; + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-letter-spacing: 0px; + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-letter-spacing: 0px; + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-weight-bold: 600; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-semibold: 600; + } +} + +@media (prefers-color-scheme: dark) { + .hds-theme-system { + --token-app-footer-focus-color-action-internal: #ffffff; + --token-badge-border-radius: var(--token-border-radius-rounded); + --token-badge-count-padding-horizontal-large: 12px; + --token-badge-count-padding-horizontal-medium: 8px; + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-foreground-color-critical-filled: #ffd7d9; /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: #161616; + --token-badge-foreground-color-critical-outlined: #ffd7d9; + --token-badge-foreground-color-highlight-filled: #e8daff; /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: #161616; + --token-badge-foreground-color-highlight-outlined: #e8daff; + --token-badge-foreground-color-neutral-dark-mode-filled: #161616; + --token-badge-foreground-color-neutral-dark-mode-inverted: #f4f4f4; + --token-badge-foreground-color-neutral-dark-mode-outlined: #161616; + --token-badge-foreground-color-neutral-filled: #f4f4f4; + --token-badge-foreground-color-neutral-inverted: #161616; + --token-badge-foreground-color-neutral-outlined: #f4f4f4; + --token-badge-foreground-color-success-filled: #a7f0ba; /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: #161616; + --token-badge-foreground-color-success-outlined: #a7f0ba; + --token-badge-foreground-color-warning-filled: #ffd9be; + --token-badge-foreground-color-warning-inverted: #161616; + --token-badge-foreground-color-warning-outlined: #ffd9be; + --token-badge-gap-large: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-small: 4px; + --token-badge-height-small: 18px; + --token-badge-padding-horizontal-large: 12px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-small: 8px; + --token-badge-padding-vertical-small: 1px; + --token-badge-surface-color-critical-filled: #a2191f; /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: #ffd7d9; + --token-badge-surface-color-highlight-filled: #6929c4; /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: #be95ff; + --token-badge-surface-color-neutral-dark-mode-filled: #f4f4f4; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: #525252; + --token-badge-surface-color-neutral-filled: #525252; + --token-badge-surface-color-neutral-inverted: #f4f4f4; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-success-filled: #0e6027; /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: #a7f0ba; + --token-badge-surface-color-warning-filled: #8a3800; /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: #ffd9be; + --token-badge-typography-font-size-large: 0.75rem; + --token-badge-typography-font-size-medium: 0.75rem; + --token-badge-typography-font-size-small: 0.75rem; + --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */ + --token-border-radius-large: 0px; + --token-border-radius-medium: 0px; + --token-border-radius-small: 0px; + --token-border-radius-x-small: 0px; + --token-button-border-color-critical-active: rgba(0, 0, 0, 0); + --token-button-border-color-critical-default: rgba(0, 0, 0, 0); + --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-hover: rgba(0, 0, 0, 0); + --token-button-border-color-primary-active: rgba(0, 0, 0, 0); + --token-button-border-color-primary-default: rgba(0, 0, 0, 0); + --token-button-border-color-primary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-hover: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-active: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-default: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0); + --token-button-border-radius: 0px; + --token-button-foreground-color-critical-active: #ffffff; + --token-button-foreground-color-critical-default: #ffffff; + --token-button-foreground-color-critical-focus: #ffffff; + --token-button-foreground-color-critical-hover: #ffffff; + --token-button-foreground-color-disabled: rgba(255, 255, 255, 0.25); + --token-button-foreground-color-primary-active: #ffffff; + --token-button-foreground-color-primary-default: #ffffff; + --token-button-foreground-color-primary-focus: #ffffff; + --token-button-foreground-color-primary-hover: #ffffff; + --token-button-foreground-color-secondary-active: #ffffff; + --token-button-foreground-color-secondary-default: #ffffff; + --token-button-foreground-color-secondary-focus: #ffffff; + --token-button-foreground-color-secondary-hover: #ffffff; + --token-button-foreground-color-tertiary-active: #161616; + --token-button-foreground-color-tertiary-default: #ffffff; + --token-button-foreground-color-tertiary-focus: #161616; + --token-button-foreground-color-tertiary-hover: #161616; + --token-button-gap: 32px; + --token-button-height-large: 48px; + --token-button-height-medium: 40px; + --token-button-height-small: 32px; + --token-button-icon-size-large: 16px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-small: 16px; + --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-surface-color-critical-active: #750e13; + --token-button-surface-color-critical-default: #da1e28; + --token-button-surface-color-critical-focus: #da1e28; + --token-button-surface-color-critical-hover: #b81921; + --token-button-surface-color-disabled: #8d8d8d; + --token-button-surface-color-primary-active: #002d9c; + --token-button-surface-color-primary-default: #0f62fe; + --token-button-surface-color-primary-focus: #0f62fe; + --token-button-surface-color-primary-hover: #0050e6; + --token-button-surface-color-secondary-active: #393939; + --token-button-surface-color-secondary-default: #6f6f6f; + --token-button-surface-color-secondary-focus: #6f6f6f; + --token-button-surface-color-secondary-hover: #5e5e5e; + --token-button-surface-color-tertiary-active: #c6c6c6; + --token-button-surface-color-tertiary-focus: #f4f4f4; + --token-button-surface-color-tertiary-hover: #f4f4f4; + --token-button-typography-font-size-large: 0.875rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-small: 0.875rem; + --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */ + --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-color-border-action: #4589ff; + --token-color-border-critical: #fa4d56; + --token-color-border-faint: #393939; + --token-color-border-highlight: #a56eff; + --token-color-border-primary: #6f6f6f; + --token-color-border-strong: #6f6f6f; + --token-color-border-success: #24a148; + --token-color-border-warning: #b28600; + --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-action-internal: #161616; + --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #161616; + --token-color-foreground-action-active: #a6c8ff; + --token-color-foreground-action-hover: #a6c8ff; + --token-color-foreground-action: #78a9ff; + --token-color-foreground-critical-high-contrast: #ffd7d9; + --token-color-foreground-critical-on-surface: #ffb3b8; + --token-color-foreground-critical: #ff8389; + --token-color-foreground-disabled: rgba(244, 244, 244, 0.25); + --token-color-foreground-faint: #c6c6c6; + --token-color-foreground-high-contrast: #161616; + --token-color-foreground-highlight-high-contrast: #d4bbff; + --token-color-foreground-highlight-on-surface: #d4bbff; + --token-color-foreground-highlight: #be95ff; + --token-color-foreground-primary: #f4f4f4; + --token-color-foreground-strong: #f4f4f4; + --token-color-foreground-success-high-contrast: #a7f0ba; + --token-color-foreground-success-on-surface: #6fdc8c; + --token-color-foreground-success: #42be65; + --token-color-foreground-warning-high-contrast: #fddc69; + --token-color-foreground-warning-on-surface: #f1c21b; + --token-color-foreground-warning: #d2a106; + --token-color-hashicorp-brand: #ffffff; + --token-color-hcp-brand: #ffffff; + --token-color-page-faint: #161616; + --token-color-page-primary: #161616; + --token-color-palette-alpha-100: #393939; + --token-color-palette-alpha-200: #525252; + --token-color-palette-alpha-300: #6f6f6f; + --token-color-palette-amber-100: #ffd9be; + --token-color-palette-amber-200: #ba4e00; + --token-color-palette-amber-300: #8a3800; + --token-color-palette-amber-400: #5e2900; + --token-color-palette-amber-500: #3e1a00; + --token-color-palette-amber-50: #fff2e8; + --token-color-palette-blue-100: #d0e2ff; + --token-color-palette-blue-200: #0f62fe; + --token-color-palette-blue-300: #0043ce; + --token-color-palette-blue-400: #002d9c; + --token-color-palette-blue-500: #001141; + --token-color-palette-blue-50: #edf5ff; + --token-color-palette-green-100: #a7f0ba; + --token-color-palette-green-200: #24a148; + --token-color-palette-green-300: #198038; + --token-color-palette-green-400: #0e6027; + --token-color-palette-green-500: #044317; + --token-color-palette-green-50: #defbe6; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-neutral-100: #e0e0e0; + --token-color-palette-neutral-200: #c6c6c6; + --token-color-palette-neutral-300: #a8a8a8; + --token-color-palette-neutral-400: #8d8d8d; + --token-color-palette-neutral-500: #525252; + --token-color-palette-neutral-50: #f4f4f4; + --token-color-palette-neutral-600: #393939; + --token-color-palette-neutral-700: #161616; + --token-color-palette-purple-100: #e8daff; + --token-color-palette-purple-200: #a56eff; + --token-color-palette-purple-300: #8a3ffc; + --token-color-palette-purple-400: #6929c4; + --token-color-palette-purple-500: #31135e; + --token-color-palette-purple-50: #f6f2ff; + --token-color-palette-red-100: #ffd7d9; + --token-color-palette-red-200: #da1e28; + --token-color-palette-red-300: #a2191f; + --token-color-palette-red-400: #750e13; + --token-color-palette-red-500: #520408; + --token-color-palette-red-50: #fff1f1; + --token-color-surface-action: #0043ce; + --token-color-surface-critical: #a2191f; + --token-color-surface-faint: #262626; + --token-color-surface-high-contrast: #f4f4f4; + --token-color-surface-highlight: #6929c4; + --token-color-surface-interactive-active: #525252; + --token-color-surface-interactive-disabled: #525252; + --token-color-surface-interactive-hover: #333333; + --token-color-surface-interactive: #262626; + --token-color-surface-primary: #262626; + --token-color-surface-strong: #393939; + --token-color-surface-success: #0e6027; + --token-color-surface-warning: #684e00; + --token-color-vault-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-radar-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ + --token-color-vault-secrets-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-dismiss-button-border-color-active: rgba(0, 0, 0, 0); + --token-dismiss-button-foreground-color-active: #f4f4f4; + --token-dismiss-button-foreground-color-default: #f4f4f4; + --token-dismiss-button-icon-size: 20px; + --token-dismiss-button-size: 48px; + --token-dismiss-button-surface-color-active: rgba(141, 141, 141, 0.4); + --token-dismiss-button-surface-color-hover: rgba(141, 141, 141, 0.16); + --token-elevation-high-box-shadow: none; + --token-elevation-higher-box-shadow: none; + --token-elevation-inset-box-shadow: none; + --token-elevation-low-box-shadow: none; + --token-elevation-mid-box-shadow: none; + --token-elevation-overlay-box-shadow: none; + --token-focus-ring-action-box-shadow: + inset 0 0 0 1px #161616, 0 0 0 3px #ffffff; + --token-focus-ring-critical-box-shadow: + inset 0 0 0 1px #161616, 0 0 0 3px #ffffff; + --token-form-radiocard-border-color-default-checked: #ffc0cb; + --token-form-radiocard-border-color-default: rgba(0, 0, 0, 0); + --token-form-radiocard-border-color-focus: #ffc0cb; + --token-form-radiocard-border-radius: 0px; + --token-icon-tile-border-color-logo: #525252; + --token-icon-tile-border-color-overlay: #6f6f6f; + --token-icon-tile-surface-color-overlay: #393939; + --token-rich-tooltip-bubble-arrow-size: 12px; + --token-rich-tooltip-bubble-border-color: var( + --token-color-palette-alpha-200 + ); + --token-rich-tooltip-bubble-border-radius: 2px; + --token-rich-tooltip-bubble-max-width: 288px; + --token-rich-tooltip-toggle-foreground-color-active: #c6c6c6; + --token-rich-tooltip-toggle-foreground-color-default: #c6c6c6; + --token-rich-tooltip-toggle-foreground-color-hover: #f4f4f4; + --token-rich-tooltip-toggle-gap-horizontal: 8px; + --token-rich-tooltip-toggle-icon-size: 14px; + --token-surface-base-box-shadow: none; + --token-surface-high-box-shadow: none; + --token-surface-higher-box-shadow: none; + --token-surface-inset-box-shadow: none; + --token-surface-low-box-shadow: none; + --token-surface-mid-box-shadow: none; + --token-surface-overlay-box-shadow: none; + --token-tooltip-border-radius: 2px; + --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); + --token-tooltip-caret-height: 6px; + --token-tooltip-caret-width: 12px; + --token-tooltip-max-width: 288px; + --token-tooltip-padding-horizontal: 16px; + --token-tooltip-padding-vertical: 16px; + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-letter-spacing: 0.16px; + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-letter-spacing: 0px; + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-letter-spacing: 0px; + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-letter-spacing: 0px; + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-letter-spacing: 0px; + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-weight-bold: 600; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-semibold: 600; + } +} + +.hds-theme-light, +.hds-mode-cds-g0 { + --token-app-footer-focus-color-action-internal: #0f62fe; + --token-badge-border-radius: var(--token-border-radius-rounded); + --token-badge-count-padding-horizontal-large: 12px; + --token-badge-count-padding-horizontal-medium: 8px; + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-foreground-color-critical-filled: #a2191f; /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: #ffffff; + --token-badge-foreground-color-critical-outlined: #a2191f; + --token-badge-foreground-color-highlight-filled: #6929c4; /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: #ffffff; + --token-badge-foreground-color-highlight-outlined: #6929c4; + --token-badge-foreground-color-neutral-dark-mode-filled: #ffffff; + --token-badge-foreground-color-neutral-dark-mode-inverted: #161616; + --token-badge-foreground-color-neutral-dark-mode-outlined: #ffffff; + --token-badge-foreground-color-neutral-filled: #161616; + --token-badge-foreground-color-neutral-inverted: #e0e0e0; + --token-badge-foreground-color-neutral-outlined: #161616; + --token-badge-foreground-color-success-filled: #0e6027; /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: #ffffff; + --token-badge-foreground-color-success-outlined: #0e6027; + --token-badge-foreground-color-warning-filled: #8a3800; + --token-badge-foreground-color-warning-inverted: #ffffff; + --token-badge-foreground-color-warning-outlined: #8a3800; + --token-badge-gap-large: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-small: 4px; + --token-badge-height-small: 18px; + --token-badge-padding-horizontal-large: 12px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-small: 8px; + --token-badge-padding-vertical-small: 1px; + --token-badge-surface-color-critical-filled: #ffd7d9; /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: #a2191f; + --token-badge-surface-color-highlight-filled: #e8daff; /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: #6929c4; + --token-badge-surface-color-neutral-dark-mode-filled: #393939; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: #e0e0e0; + --token-badge-surface-color-neutral-filled: #e0e0e0; + --token-badge-surface-color-neutral-inverted: #393939; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-success-filled: #a7f0ba; /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: #0e6027; + --token-badge-surface-color-warning-filled: #ffd9be; /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: #8a3800; + --token-badge-typography-font-size-large: 0.75rem; + --token-badge-typography-font-size-medium: 0.75rem; + --token-badge-typography-font-size-small: 0.75rem; + --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */ + --token-border-radius-large: 0px; + --token-border-radius-medium: 0px; + --token-border-radius-small: 0px; + --token-border-radius-x-small: 0px; + --token-button-border-color-critical-active: rgba(0, 0, 0, 0); + --token-button-border-color-critical-default: rgba(0, 0, 0, 0); + --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-hover: rgba(0, 0, 0, 0); + --token-button-border-color-primary-active: rgba(0, 0, 0, 0); + --token-button-border-color-primary-default: rgba(0, 0, 0, 0); + --token-button-border-color-primary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-hover: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-active: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-default: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0); + --token-button-border-radius: 0px; + --token-button-foreground-color-critical-active: #ffffff; + --token-button-foreground-color-critical-default: #ffffff; + --token-button-foreground-color-critical-focus: #ffffff; + --token-button-foreground-color-critical-hover: #ffffff; + --token-button-foreground-color-disabled: #8d8d8d; + --token-button-foreground-color-primary-active: #ffffff; + --token-button-foreground-color-primary-default: #ffffff; + --token-button-foreground-color-primary-focus: #ffffff; + --token-button-foreground-color-primary-hover: #ffffff; + --token-button-foreground-color-secondary-active: #ffffff; + --token-button-foreground-color-secondary-default: #ffffff; + --token-button-foreground-color-secondary-focus: #ffffff; + --token-button-foreground-color-secondary-hover: #ffffff; + --token-button-foreground-color-tertiary-active: #ffffff; + --token-button-foreground-color-tertiary-default: #0f62fe; + --token-button-foreground-color-tertiary-focus: #ffffff; + --token-button-foreground-color-tertiary-hover: #ffffff; + --token-button-gap: 32px; + --token-button-height-large: 48px; + --token-button-height-medium: 40px; + --token-button-height-small: 32px; + --token-button-icon-size-large: 16px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-small: 16px; + --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-surface-color-critical-active: #750e13; + --token-button-surface-color-critical-default: #da1e28; + --token-button-surface-color-critical-focus: #da1e28; + --token-button-surface-color-critical-hover: #b81921; + --token-button-surface-color-disabled: #c6c6c6; + --token-button-surface-color-primary-active: #002d9c; + --token-button-surface-color-primary-default: #0f62fe; + --token-button-surface-color-primary-focus: #0f62fe; + --token-button-surface-color-primary-hover: #0050e6; + --token-button-surface-color-secondary-active: #6f6f6f; + --token-button-surface-color-secondary-default: #393939; + --token-button-surface-color-secondary-focus: #393939; + --token-button-surface-color-secondary-hover: #474747; + --token-button-surface-color-tertiary-active: #002d9c; + --token-button-surface-color-tertiary-focus: #0050e6; + --token-button-surface-color-tertiary-hover: #0050e6; + --token-button-typography-font-size-large: 0.875rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-small: 0.875rem; + --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */ + --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-color-border-action: #0f62fe; + --token-color-border-critical: #ff8389; + --token-color-border-faint: #e0e0e0; + --token-color-border-highlight: #be95ff; + --token-color-border-primary: #c6c6c6; + --token-color-border-strong: #8d8d8d; + --token-color-border-success: #42be65; + --token-color-border-warning: #d2a106; + --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-action-internal: #ffffff; + --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #ffffff; + --token-color-foreground-action-active: #0043ce; + --token-color-foreground-action-hover: #0043ce; + --token-color-foreground-action: #0f62fe; + --token-color-foreground-critical-high-contrast: #750e13; + --token-color-foreground-critical-on-surface: #a2191f; + --token-color-foreground-critical: #da1e28; + --token-color-foreground-disabled: rgba(22, 22, 22, 0.25); + --token-color-foreground-faint: #525252; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-highlight-high-contrast: #491d8b; + --token-color-foreground-highlight-on-surface: #6929c4; + --token-color-foreground-highlight: #8a3ffc; + --token-color-foreground-primary: #161616; + --token-color-foreground-strong: #161616; + --token-color-foreground-success-high-contrast: #044317; + --token-color-foreground-success-on-surface: #0e6027; + --token-color-foreground-success: #198038; + --token-color-foreground-warning-high-contrast: #483700; + --token-color-foreground-warning-on-surface: #684e00; + --token-color-foreground-warning: #8e6a00; + --token-color-hashicorp-brand: #000000; + --token-color-hcp-brand: #000000; + --token-color-page-faint: #ffffff; + --token-color-page-primary: #ffffff; + --token-color-palette-alpha-100: #e0e0e0; + --token-color-palette-alpha-200: #c6c6c6; + --token-color-palette-alpha-300: #8d8d8d; + --token-color-palette-amber-100: #ffd9be; + --token-color-palette-amber-200: #ba4e00; + --token-color-palette-amber-300: #8a3800; + --token-color-palette-amber-400: #5e2900; + --token-color-palette-amber-500: #3e1a00; + --token-color-palette-amber-50: #fff2e8; + --token-color-palette-blue-100: #d0e2ff; + --token-color-palette-blue-200: #0f62fe; + --token-color-palette-blue-300: #0043ce; + --token-color-palette-blue-400: #002d9c; + --token-color-palette-blue-500: #001141; + --token-color-palette-blue-50: #edf5ff; + --token-color-palette-green-100: #a7f0ba; + --token-color-palette-green-200: #24a148; + --token-color-palette-green-300: #198038; + --token-color-palette-green-400: #0e6027; + --token-color-palette-green-500: #044317; + --token-color-palette-green-50: #defbe6; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-neutral-100: #e0e0e0; + --token-color-palette-neutral-200: #c6c6c6; + --token-color-palette-neutral-300: #a8a8a8; + --token-color-palette-neutral-400: #8d8d8d; + --token-color-palette-neutral-500: #525252; + --token-color-palette-neutral-50: #f4f4f4; + --token-color-palette-neutral-600: #393939; + --token-color-palette-neutral-700: #161616; + --token-color-palette-purple-100: #e8daff; + --token-color-palette-purple-200: #a56eff; + --token-color-palette-purple-300: #8a3ffc; + --token-color-palette-purple-400: #6929c4; + --token-color-palette-purple-500: #31135e; + --token-color-palette-purple-50: #f6f2ff; + --token-color-palette-red-100: #ffd7d9; + --token-color-palette-red-200: #da1e28; + --token-color-palette-red-300: #a2191f; + --token-color-palette-red-400: #750e13; + --token-color-palette-red-500: #520408; + --token-color-palette-red-50: #fff1f1; + --token-color-surface-action: #d0e2ff; + --token-color-surface-critical: #ffd7d9; + --token-color-surface-faint: #f4f4f4; + --token-color-surface-high-contrast: #393939; + --token-color-surface-highlight: #e8daff; + --token-color-surface-interactive-active: #c6c6c6; + --token-color-surface-interactive-disabled: #c6c6c6; + --token-color-surface-interactive-hover: #e8e8e8; + --token-color-surface-interactive: #f4f4f4; + --token-color-surface-primary: #f4f4f4; + --token-color-surface-strong: #e0e0e0; + --token-color-surface-success: #a7f0ba; + --token-color-surface-warning: #fcf4d6; + --token-color-vault-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-radar-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ + --token-color-vault-secrets-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-dismiss-button-border-color-active: rgba(0, 0, 0, 0); + --token-dismiss-button-foreground-color-active: #161616; + --token-dismiss-button-foreground-color-default: #161616; + --token-dismiss-button-icon-size: 20px; + --token-dismiss-button-size: 48px; + --token-dismiss-button-surface-color-active: rgba(141, 141, 141, 0.5); + --token-dismiss-button-surface-color-hover: rgba(141, 141, 141, 0.12); + --token-elevation-high-box-shadow: none; + --token-elevation-higher-box-shadow: none; + --token-elevation-inset-box-shadow: none; + --token-elevation-low-box-shadow: none; + --token-elevation-mid-box-shadow: none; + --token-elevation-overlay-box-shadow: none; + --token-focus-ring-action-box-shadow: + inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe; + --token-focus-ring-critical-box-shadow: + inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe; + --token-form-radiocard-border-color-default-checked: #ffc0cb; + --token-form-radiocard-border-color-default: rgba(0, 0, 0, 0); + --token-form-radiocard-border-color-focus: #ffc0cb; + --token-form-radiocard-border-radius: 0px; + --token-icon-tile-border-color-logo: #c6c6c6; + --token-icon-tile-border-color-overlay: #e0e0e0; + --token-icon-tile-surface-color-overlay: #ffffff; + --token-rich-tooltip-bubble-arrow-size: 12px; + --token-rich-tooltip-bubble-border-color: var( + --token-color-palette-alpha-200 + ); + --token-rich-tooltip-bubble-border-radius: 2px; + --token-rich-tooltip-bubble-max-width: 288px; + --token-rich-tooltip-toggle-foreground-color-active: #525252; + --token-rich-tooltip-toggle-foreground-color-default: #525252; + --token-rich-tooltip-toggle-foreground-color-hover: #161616; + --token-rich-tooltip-toggle-gap-horizontal: 8px; + --token-rich-tooltip-toggle-icon-size: 14px; + --token-surface-base-box-shadow: none; + --token-surface-high-box-shadow: none; + --token-surface-higher-box-shadow: none; + --token-surface-inset-box-shadow: none; + --token-surface-low-box-shadow: none; + --token-surface-mid-box-shadow: none; + --token-surface-overlay-box-shadow: none; + --token-tooltip-border-radius: 2px; + --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); + --token-tooltip-caret-height: 6px; + --token-tooltip-caret-width: 12px; + --token-tooltip-max-width: 288px; + --token-tooltip-padding-horizontal: 16px; + --token-tooltip-padding-vertical: 16px; + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-letter-spacing: 0.16px; + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-letter-spacing: 0px; + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-letter-spacing: 0px; + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-letter-spacing: 0px; + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-letter-spacing: 0px; + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-weight-bold: 600; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-semibold: 600; +} + +.hds-theme-dark, +.hds-mode-cds-g100 { + --token-app-footer-focus-color-action-internal: #ffffff; + --token-badge-border-radius: var(--token-border-radius-rounded); + --token-badge-count-padding-horizontal-large: 12px; + --token-badge-count-padding-horizontal-medium: 8px; + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-foreground-color-critical-filled: #ffd7d9; /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: #161616; + --token-badge-foreground-color-critical-outlined: #ffd7d9; + --token-badge-foreground-color-highlight-filled: #e8daff; /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: #161616; + --token-badge-foreground-color-highlight-outlined: #e8daff; + --token-badge-foreground-color-neutral-dark-mode-filled: #161616; + --token-badge-foreground-color-neutral-dark-mode-inverted: #f4f4f4; + --token-badge-foreground-color-neutral-dark-mode-outlined: #161616; + --token-badge-foreground-color-neutral-filled: #f4f4f4; + --token-badge-foreground-color-neutral-inverted: #161616; + --token-badge-foreground-color-neutral-outlined: #f4f4f4; + --token-badge-foreground-color-success-filled: #a7f0ba; /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: #161616; + --token-badge-foreground-color-success-outlined: #a7f0ba; + --token-badge-foreground-color-warning-filled: #ffd9be; + --token-badge-foreground-color-warning-inverted: #161616; + --token-badge-foreground-color-warning-outlined: #ffd9be; + --token-badge-gap-large: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-small: 4px; + --token-badge-height-small: 18px; + --token-badge-padding-horizontal-large: 12px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-small: 8px; + --token-badge-padding-vertical-small: 1px; + --token-badge-surface-color-critical-filled: #a2191f; /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: #ffd7d9; + --token-badge-surface-color-highlight-filled: #6929c4; /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: #be95ff; + --token-badge-surface-color-neutral-dark-mode-filled: #f4f4f4; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: #525252; + --token-badge-surface-color-neutral-filled: #525252; + --token-badge-surface-color-neutral-inverted: #f4f4f4; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-success-filled: #0e6027; /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: #a7f0ba; + --token-badge-surface-color-warning-filled: #8a3800; /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: #ffd9be; + --token-badge-typography-font-size-large: 0.75rem; + --token-badge-typography-font-size-medium: 0.75rem; + --token-badge-typography-font-size-small: 0.75rem; + --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */ + --token-border-radius-large: 0px; + --token-border-radius-medium: 0px; + --token-border-radius-small: 0px; + --token-border-radius-x-small: 0px; + --token-button-border-color-critical-active: rgba(0, 0, 0, 0); + --token-button-border-color-critical-default: rgba(0, 0, 0, 0); + --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-hover: rgba(0, 0, 0, 0); + --token-button-border-color-primary-active: rgba(0, 0, 0, 0); + --token-button-border-color-primary-default: rgba(0, 0, 0, 0); + --token-button-border-color-primary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-hover: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-active: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-default: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0); + --token-button-border-radius: 0px; + --token-button-foreground-color-critical-active: #ffffff; + --token-button-foreground-color-critical-default: #ffffff; + --token-button-foreground-color-critical-focus: #ffffff; + --token-button-foreground-color-critical-hover: #ffffff; + --token-button-foreground-color-disabled: rgba(255, 255, 255, 0.25); + --token-button-foreground-color-primary-active: #ffffff; + --token-button-foreground-color-primary-default: #ffffff; + --token-button-foreground-color-primary-focus: #ffffff; + --token-button-foreground-color-primary-hover: #ffffff; + --token-button-foreground-color-secondary-active: #ffffff; + --token-button-foreground-color-secondary-default: #ffffff; + --token-button-foreground-color-secondary-focus: #ffffff; + --token-button-foreground-color-secondary-hover: #ffffff; + --token-button-foreground-color-tertiary-active: #161616; + --token-button-foreground-color-tertiary-default: #ffffff; + --token-button-foreground-color-tertiary-focus: #161616; + --token-button-foreground-color-tertiary-hover: #161616; + --token-button-gap: 32px; + --token-button-height-large: 48px; + --token-button-height-medium: 40px; + --token-button-height-small: 32px; + --token-button-icon-size-large: 16px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-small: 16px; + --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-surface-color-critical-active: #750e13; + --token-button-surface-color-critical-default: #da1e28; + --token-button-surface-color-critical-focus: #da1e28; + --token-button-surface-color-critical-hover: #b81921; + --token-button-surface-color-disabled: #8d8d8d; + --token-button-surface-color-primary-active: #002d9c; + --token-button-surface-color-primary-default: #0f62fe; + --token-button-surface-color-primary-focus: #0f62fe; + --token-button-surface-color-primary-hover: #0050e6; + --token-button-surface-color-secondary-active: #393939; + --token-button-surface-color-secondary-default: #6f6f6f; + --token-button-surface-color-secondary-focus: #6f6f6f; + --token-button-surface-color-secondary-hover: #5e5e5e; + --token-button-surface-color-tertiary-active: #c6c6c6; + --token-button-surface-color-tertiary-focus: #f4f4f4; + --token-button-surface-color-tertiary-hover: #f4f4f4; + --token-button-typography-font-size-large: 0.875rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-small: 0.875rem; + --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */ + --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-color-border-action: #4589ff; + --token-color-border-critical: #fa4d56; + --token-color-border-faint: #393939; + --token-color-border-highlight: #a56eff; + --token-color-border-primary: #6f6f6f; + --token-color-border-strong: #6f6f6f; + --token-color-border-success: #24a148; + --token-color-border-warning: #b28600; + --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-action-internal: #161616; + --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #161616; + --token-color-foreground-action-active: #a6c8ff; + --token-color-foreground-action-hover: #a6c8ff; + --token-color-foreground-action: #78a9ff; + --token-color-foreground-critical-high-contrast: #ffd7d9; + --token-color-foreground-critical-on-surface: #ffb3b8; + --token-color-foreground-critical: #ff8389; + --token-color-foreground-disabled: rgba(244, 244, 244, 0.25); + --token-color-foreground-faint: #c6c6c6; + --token-color-foreground-high-contrast: #161616; + --token-color-foreground-highlight-high-contrast: #d4bbff; + --token-color-foreground-highlight-on-surface: #d4bbff; + --token-color-foreground-highlight: #be95ff; + --token-color-foreground-primary: #f4f4f4; + --token-color-foreground-strong: #f4f4f4; + --token-color-foreground-success-high-contrast: #a7f0ba; + --token-color-foreground-success-on-surface: #6fdc8c; + --token-color-foreground-success: #42be65; + --token-color-foreground-warning-high-contrast: #fddc69; + --token-color-foreground-warning-on-surface: #f1c21b; + --token-color-foreground-warning: #d2a106; + --token-color-hashicorp-brand: #ffffff; + --token-color-hcp-brand: #ffffff; + --token-color-page-faint: #161616; + --token-color-page-primary: #161616; + --token-color-palette-alpha-100: #393939; + --token-color-palette-alpha-200: #525252; + --token-color-palette-alpha-300: #6f6f6f; + --token-color-palette-amber-100: #ffd9be; + --token-color-palette-amber-200: #ba4e00; + --token-color-palette-amber-300: #8a3800; + --token-color-palette-amber-400: #5e2900; + --token-color-palette-amber-500: #3e1a00; + --token-color-palette-amber-50: #fff2e8; + --token-color-palette-blue-100: #d0e2ff; + --token-color-palette-blue-200: #0f62fe; + --token-color-palette-blue-300: #0043ce; + --token-color-palette-blue-400: #002d9c; + --token-color-palette-blue-500: #001141; + --token-color-palette-blue-50: #edf5ff; + --token-color-palette-green-100: #a7f0ba; + --token-color-palette-green-200: #24a148; + --token-color-palette-green-300: #198038; + --token-color-palette-green-400: #0e6027; + --token-color-palette-green-500: #044317; + --token-color-palette-green-50: #defbe6; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-neutral-100: #e0e0e0; + --token-color-palette-neutral-200: #c6c6c6; + --token-color-palette-neutral-300: #a8a8a8; + --token-color-palette-neutral-400: #8d8d8d; + --token-color-palette-neutral-500: #525252; + --token-color-palette-neutral-50: #f4f4f4; + --token-color-palette-neutral-600: #393939; + --token-color-palette-neutral-700: #161616; + --token-color-palette-purple-100: #e8daff; + --token-color-palette-purple-200: #a56eff; + --token-color-palette-purple-300: #8a3ffc; + --token-color-palette-purple-400: #6929c4; + --token-color-palette-purple-500: #31135e; + --token-color-palette-purple-50: #f6f2ff; + --token-color-palette-red-100: #ffd7d9; + --token-color-palette-red-200: #da1e28; + --token-color-palette-red-300: #a2191f; + --token-color-palette-red-400: #750e13; + --token-color-palette-red-500: #520408; + --token-color-palette-red-50: #fff1f1; + --token-color-surface-action: #0043ce; + --token-color-surface-critical: #a2191f; + --token-color-surface-faint: #262626; + --token-color-surface-high-contrast: #f4f4f4; + --token-color-surface-highlight: #6929c4; + --token-color-surface-interactive-active: #525252; + --token-color-surface-interactive-disabled: #525252; + --token-color-surface-interactive-hover: #333333; + --token-color-surface-interactive: #262626; + --token-color-surface-primary: #262626; + --token-color-surface-strong: #393939; + --token-color-surface-success: #0e6027; + --token-color-surface-warning: #684e00; + --token-color-vault-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-radar-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ + --token-color-vault-secrets-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-dismiss-button-border-color-active: rgba(0, 0, 0, 0); + --token-dismiss-button-foreground-color-active: #f4f4f4; + --token-dismiss-button-foreground-color-default: #f4f4f4; + --token-dismiss-button-icon-size: 20px; + --token-dismiss-button-size: 48px; + --token-dismiss-button-surface-color-active: rgba(141, 141, 141, 0.4); + --token-dismiss-button-surface-color-hover: rgba(141, 141, 141, 0.16); + --token-elevation-high-box-shadow: none; + --token-elevation-higher-box-shadow: none; + --token-elevation-inset-box-shadow: none; + --token-elevation-low-box-shadow: none; + --token-elevation-mid-box-shadow: none; + --token-elevation-overlay-box-shadow: none; + --token-focus-ring-action-box-shadow: + inset 0 0 0 1px #161616, 0 0 0 3px #ffffff; + --token-focus-ring-critical-box-shadow: + inset 0 0 0 1px #161616, 0 0 0 3px #ffffff; + --token-form-radiocard-border-color-default-checked: #ffc0cb; + --token-form-radiocard-border-color-default: rgba(0, 0, 0, 0); + --token-form-radiocard-border-color-focus: #ffc0cb; + --token-form-radiocard-border-radius: 0px; + --token-icon-tile-border-color-logo: #525252; + --token-icon-tile-border-color-overlay: #6f6f6f; + --token-icon-tile-surface-color-overlay: #393939; + --token-rich-tooltip-bubble-arrow-size: 12px; + --token-rich-tooltip-bubble-border-color: var( + --token-color-palette-alpha-200 + ); + --token-rich-tooltip-bubble-border-radius: 2px; + --token-rich-tooltip-bubble-max-width: 288px; + --token-rich-tooltip-toggle-foreground-color-active: #c6c6c6; + --token-rich-tooltip-toggle-foreground-color-default: #c6c6c6; + --token-rich-tooltip-toggle-foreground-color-hover: #f4f4f4; + --token-rich-tooltip-toggle-gap-horizontal: 8px; + --token-rich-tooltip-toggle-icon-size: 14px; + --token-surface-base-box-shadow: none; + --token-surface-high-box-shadow: none; + --token-surface-higher-box-shadow: none; + --token-surface-inset-box-shadow: none; + --token-surface-low-box-shadow: none; + --token-surface-mid-box-shadow: none; + --token-surface-overlay-box-shadow: none; + --token-tooltip-border-radius: 2px; + --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); + --token-tooltip-caret-height: 6px; + --token-tooltip-caret-width: 12px; + --token-tooltip-max-width: 288px; + --token-tooltip-padding-horizontal: 16px; + --token-tooltip-padding-vertical: 16px; + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-letter-spacing: 0.16px; + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-letter-spacing: 0px; + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-letter-spacing: 0px; + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-letter-spacing: 0px; + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-letter-spacing: 0px; + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-weight-bold: 600; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-semibold: 600; +} + +.hds-mode-cds-g10 { + --token-app-footer-focus-color-action-internal: #0f62fe; + --token-badge-border-radius: var(--token-border-radius-rounded); + --token-badge-count-padding-horizontal-large: 12px; + --token-badge-count-padding-horizontal-medium: 8px; + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-foreground-color-critical-filled: #a2191f; /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: #ffffff; + --token-badge-foreground-color-critical-outlined: #a2191f; + --token-badge-foreground-color-highlight-filled: #6929c4; /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: #ffffff; + --token-badge-foreground-color-highlight-outlined: #6929c4; + --token-badge-foreground-color-neutral-dark-mode-filled: #ffffff; + --token-badge-foreground-color-neutral-dark-mode-inverted: #161616; + --token-badge-foreground-color-neutral-dark-mode-outlined: #ffffff; + --token-badge-foreground-color-neutral-filled: #161616; + --token-badge-foreground-color-neutral-inverted: #e0e0e0; + --token-badge-foreground-color-neutral-outlined: #161616; + --token-badge-foreground-color-success-filled: #0e6027; /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: #ffffff; + --token-badge-foreground-color-success-outlined: #0e6027; + --token-badge-foreground-color-warning-filled: #8a3800; + --token-badge-foreground-color-warning-inverted: #ffffff; + --token-badge-foreground-color-warning-outlined: #8a3800; + --token-badge-gap-large: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-small: 4px; + --token-badge-height-small: 18px; + --token-badge-padding-horizontal-large: 12px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-small: 8px; + --token-badge-padding-vertical-small: 1px; + --token-badge-surface-color-critical-filled: #ffd7d9; /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: #a2191f; + --token-badge-surface-color-highlight-filled: #e8daff; /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: #6929c4; + --token-badge-surface-color-neutral-dark-mode-filled: #393939; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: #e0e0e0; + --token-badge-surface-color-neutral-filled: #e0e0e0; + --token-badge-surface-color-neutral-inverted: #393939; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-success-filled: #a7f0ba; /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: #0e6027; + --token-badge-surface-color-warning-filled: #ffd9be; /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: #8a3800; + --token-badge-typography-font-size-large: 0.75rem; + --token-badge-typography-font-size-medium: 0.75rem; + --token-badge-typography-font-size-small: 0.75rem; + --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */ + --token-border-radius-large: 0px; + --token-border-radius-medium: 0px; + --token-border-radius-small: 0px; + --token-border-radius-x-small: 0px; + --token-button-border-color-critical-active: rgba(0, 0, 0, 0); + --token-button-border-color-critical-default: rgba(0, 0, 0, 0); + --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-hover: rgba(0, 0, 0, 0); + --token-button-border-color-primary-active: rgba(0, 0, 0, 0); + --token-button-border-color-primary-default: rgba(0, 0, 0, 0); + --token-button-border-color-primary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-hover: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-active: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-default: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0); + --token-button-border-radius: 0px; + --token-button-foreground-color-critical-active: #ffffff; + --token-button-foreground-color-critical-default: #ffffff; + --token-button-foreground-color-critical-focus: #ffffff; + --token-button-foreground-color-critical-hover: #ffffff; + --token-button-foreground-color-disabled: #8d8d8d; + --token-button-foreground-color-primary-active: #ffffff; + --token-button-foreground-color-primary-default: #ffffff; + --token-button-foreground-color-primary-focus: #ffffff; + --token-button-foreground-color-primary-hover: #ffffff; + --token-button-foreground-color-secondary-active: #ffffff; + --token-button-foreground-color-secondary-default: #ffffff; + --token-button-foreground-color-secondary-focus: #ffffff; + --token-button-foreground-color-secondary-hover: #ffffff; + --token-button-foreground-color-tertiary-active: #ffffff; + --token-button-foreground-color-tertiary-default: #0f62fe; + --token-button-foreground-color-tertiary-focus: #ffffff; + --token-button-foreground-color-tertiary-hover: #ffffff; + --token-button-gap: 32px; + --token-button-height-large: 48px; + --token-button-height-medium: 40px; + --token-button-height-small: 32px; + --token-button-icon-size-large: 16px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-small: 16px; + --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-surface-color-critical-active: #750e13; + --token-button-surface-color-critical-default: #da1e28; + --token-button-surface-color-critical-focus: #da1e28; + --token-button-surface-color-critical-hover: #b81921; + --token-button-surface-color-disabled: #c6c6c6; + --token-button-surface-color-primary-active: #002d9c; + --token-button-surface-color-primary-default: #0f62fe; + --token-button-surface-color-primary-focus: #0f62fe; + --token-button-surface-color-primary-hover: #0050e6; + --token-button-surface-color-secondary-active: #6f6f6f; + --token-button-surface-color-secondary-default: #393939; + --token-button-surface-color-secondary-focus: #393939; + --token-button-surface-color-secondary-hover: #474747; + --token-button-surface-color-tertiary-active: #002d9c; + --token-button-surface-color-tertiary-focus: #0050e6; + --token-button-surface-color-tertiary-hover: #0050e6; + --token-button-typography-font-size-large: 0.875rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-small: 0.875rem; + --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */ + --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-color-border-action: #0f62fe; + --token-color-border-critical: #ff8389; + --token-color-border-faint: #c6c6c6; + --token-color-border-highlight: #be95ff; + --token-color-border-primary: #e0e0e0; + --token-color-border-strong: #8d8d8d; + --token-color-border-success: #42be65; + --token-color-border-warning: #d2a106; + --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-action-internal: #ffffff; + --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #ffffff; + --token-color-foreground-action-active: #0043ce; + --token-color-foreground-action-hover: #0043ce; + --token-color-foreground-action: #0f62fe; + --token-color-foreground-critical-high-contrast: #750e13; + --token-color-foreground-critical-on-surface: #a2191f; + --token-color-foreground-critical: #da1e28; + --token-color-foreground-disabled: rgba(22, 22, 22, 0.25); + --token-color-foreground-faint: #525252; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-highlight-high-contrast: #491d8b; + --token-color-foreground-highlight-on-surface: #6929c4; + --token-color-foreground-highlight: #8a3ffc; + --token-color-foreground-primary: #161616; + --token-color-foreground-strong: #161616; + --token-color-foreground-success-high-contrast: #044317; + --token-color-foreground-success-on-surface: #0e6027; + --token-color-foreground-success: #198038; + --token-color-foreground-warning-high-contrast: #483700; + --token-color-foreground-warning-on-surface: #684e00; + --token-color-foreground-warning: #8e6a00; + --token-color-hashicorp-brand: #000000; + --token-color-hcp-brand: #000000; + --token-color-page-faint: #f4f4f4; + --token-color-page-primary: #f4f4f4; + --token-color-palette-alpha-100: #c6c6c6; + --token-color-palette-alpha-200: #e0e0e0; + --token-color-palette-alpha-300: #8d8d8d; + --token-color-palette-amber-100: #ffd9be; + --token-color-palette-amber-200: #ba4e00; + --token-color-palette-amber-300: #8a3800; + --token-color-palette-amber-400: #5e2900; + --token-color-palette-amber-500: #3e1a00; + --token-color-palette-amber-50: #fff2e8; + --token-color-palette-blue-100: #d0e2ff; + --token-color-palette-blue-200: #0f62fe; + --token-color-palette-blue-300: #0043ce; + --token-color-palette-blue-400: #002d9c; + --token-color-palette-blue-500: #001141; + --token-color-palette-blue-50: #edf5ff; + --token-color-palette-green-100: #a7f0ba; + --token-color-palette-green-200: #24a148; + --token-color-palette-green-300: #198038; + --token-color-palette-green-400: #0e6027; + --token-color-palette-green-500: #044317; + --token-color-palette-green-50: #defbe6; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-neutral-100: #e0e0e0; + --token-color-palette-neutral-200: #c6c6c6; + --token-color-palette-neutral-300: #a8a8a8; + --token-color-palette-neutral-400: #8d8d8d; + --token-color-palette-neutral-500: #525252; + --token-color-palette-neutral-50: #f4f4f4; + --token-color-palette-neutral-600: #393939; + --token-color-palette-neutral-700: #161616; + --token-color-palette-purple-100: #e8daff; + --token-color-palette-purple-200: #a56eff; + --token-color-palette-purple-300: #8a3ffc; + --token-color-palette-purple-400: #6929c4; + --token-color-palette-purple-500: #31135e; + --token-color-palette-purple-50: #f6f2ff; + --token-color-palette-red-100: #ffd7d9; + --token-color-palette-red-200: #da1e28; + --token-color-palette-red-300: #a2191f; + --token-color-palette-red-400: #750e13; + --token-color-palette-red-500: #520408; + --token-color-palette-red-50: #fff1f1; + --token-color-surface-action: #d0e2ff; + --token-color-surface-critical: #ffd7d9; + --token-color-surface-faint: #ffffff; + --token-color-surface-high-contrast: #393939; + --token-color-surface-highlight: #e8daff; + --token-color-surface-interactive-active: #c6c6c6; + --token-color-surface-interactive-disabled: #c6c6c6; + --token-color-surface-interactive-hover: #e8e8e8; + --token-color-surface-interactive: #ffffff; + --token-color-surface-primary: #ffffff; + --token-color-surface-strong: #e0e0e0; + --token-color-surface-success: #a7f0ba; + --token-color-surface-warning: #fcf4d6; + --token-color-vault-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-radar-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ + --token-color-vault-secrets-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-dismiss-button-border-color-active: rgba(0, 0, 0, 0); + --token-dismiss-button-foreground-color-active: #161616; + --token-dismiss-button-foreground-color-default: #161616; + --token-dismiss-button-icon-size: 20px; + --token-dismiss-button-size: 48px; + --token-dismiss-button-surface-color-active: rgba(141, 141, 141, 0.5); + --token-dismiss-button-surface-color-hover: rgba(141, 141, 141, 0.12); + --token-elevation-high-box-shadow: none; + --token-elevation-higher-box-shadow: none; + --token-elevation-inset-box-shadow: none; + --token-elevation-low-box-shadow: none; + --token-elevation-mid-box-shadow: none; + --token-elevation-overlay-box-shadow: none; + --token-focus-ring-action-box-shadow: + inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe; + --token-focus-ring-critical-box-shadow: + inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe; + --token-form-radiocard-border-color-default-checked: #ffc0cb; + --token-form-radiocard-border-color-default: rgba(0, 0, 0, 0); + --token-form-radiocard-border-color-focus: #ffc0cb; + --token-form-radiocard-border-radius: 0px; + --token-icon-tile-border-color-logo: #e0e0e0; + --token-icon-tile-border-color-overlay: #c6c6c6; + --token-icon-tile-surface-color-overlay: #f4f4f4; + --token-rich-tooltip-bubble-arrow-size: 12px; + --token-rich-tooltip-bubble-border-color: var( + --token-color-palette-alpha-200 + ); + --token-rich-tooltip-bubble-border-radius: 2px; + --token-rich-tooltip-bubble-max-width: 288px; + --token-rich-tooltip-toggle-foreground-color-active: #525252; + --token-rich-tooltip-toggle-foreground-color-default: #525252; + --token-rich-tooltip-toggle-foreground-color-hover: #161616; + --token-rich-tooltip-toggle-gap-horizontal: 8px; + --token-rich-tooltip-toggle-icon-size: 14px; + --token-surface-base-box-shadow: none; + --token-surface-high-box-shadow: none; + --token-surface-higher-box-shadow: none; + --token-surface-inset-box-shadow: none; + --token-surface-low-box-shadow: none; + --token-surface-mid-box-shadow: none; + --token-surface-overlay-box-shadow: none; + --token-tooltip-border-radius: 2px; + --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); + --token-tooltip-caret-height: 6px; + --token-tooltip-caret-width: 12px; + --token-tooltip-max-width: 288px; + --token-tooltip-padding-horizontal: 16px; + --token-tooltip-padding-vertical: 16px; + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-letter-spacing: 0.16px; + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-letter-spacing: 0px; + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-letter-spacing: 0px; + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-letter-spacing: 0px; + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-letter-spacing: 0px; + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-weight-bold: 600; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-semibold: 600; +} + +.hds-mode-cds-g90 { + --token-app-footer-focus-color-action-internal: #ffffff; + --token-badge-border-radius: var(--token-border-radius-rounded); + --token-badge-count-padding-horizontal-large: 12px; + --token-badge-count-padding-horizontal-medium: 8px; + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-foreground-color-critical-filled: #ffd7d9; /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: #161616; + --token-badge-foreground-color-critical-outlined: #ffd7d9; + --token-badge-foreground-color-highlight-filled: #e8daff; /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: #161616; + --token-badge-foreground-color-highlight-outlined: #e8daff; + --token-badge-foreground-color-neutral-dark-mode-filled: #161616; + --token-badge-foreground-color-neutral-dark-mode-inverted: #f4f4f4; + --token-badge-foreground-color-neutral-dark-mode-outlined: #161616; + --token-badge-foreground-color-neutral-filled: #f4f4f4; + --token-badge-foreground-color-neutral-inverted: #161616; + --token-badge-foreground-color-neutral-outlined: #f4f4f4; + --token-badge-foreground-color-success-filled: #a7f0ba; /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: #161616; + --token-badge-foreground-color-success-outlined: #a7f0ba; + --token-badge-foreground-color-warning-filled: #ffd9be; + --token-badge-foreground-color-warning-inverted: #161616; + --token-badge-foreground-color-warning-outlined: #ffd9be; + --token-badge-gap-large: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-small: 4px; + --token-badge-height-small: 18px; + --token-badge-padding-horizontal-large: 12px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-small: 8px; + --token-badge-padding-vertical-small: 1px; + --token-badge-surface-color-critical-filled: #a2191f; /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: #ffd7d9; + --token-badge-surface-color-highlight-filled: #6929c4; /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: #be95ff; + --token-badge-surface-color-neutral-dark-mode-filled: #f4f4f4; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: #525252; + --token-badge-surface-color-neutral-filled: #525252; + --token-badge-surface-color-neutral-inverted: #f4f4f4; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-success-filled: #0e6027; /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: #a7f0ba; + --token-badge-surface-color-warning-filled: #8a3800; /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: #ffd9be; + --token-badge-typography-font-size-large: 0.75rem; + --token-badge-typography-font-size-medium: 0.75rem; + --token-badge-typography-font-size-small: 0.75rem; + --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */ + --token-border-radius-large: 0px; + --token-border-radius-medium: 0px; + --token-border-radius-small: 0px; + --token-border-radius-x-small: 0px; + --token-button-border-color-critical-active: rgba(0, 0, 0, 0); + --token-button-border-color-critical-default: rgba(0, 0, 0, 0); + --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-hover: rgba(0, 0, 0, 0); + --token-button-border-color-primary-active: rgba(0, 0, 0, 0); + --token-button-border-color-primary-default: rgba(0, 0, 0, 0); + --token-button-border-color-primary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-hover: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-active: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-default: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0); + --token-button-border-radius: 0px; + --token-button-foreground-color-critical-active: #ffffff; + --token-button-foreground-color-critical-default: #ffffff; + --token-button-foreground-color-critical-focus: #ffffff; + --token-button-foreground-color-critical-hover: #ffffff; + --token-button-foreground-color-disabled: rgba(255, 255, 255, 0.25); + --token-button-foreground-color-primary-active: #ffffff; + --token-button-foreground-color-primary-default: #ffffff; + --token-button-foreground-color-primary-focus: #ffffff; + --token-button-foreground-color-primary-hover: #ffffff; + --token-button-foreground-color-secondary-active: #ffffff; + --token-button-foreground-color-secondary-default: #ffffff; + --token-button-foreground-color-secondary-focus: #ffffff; + --token-button-foreground-color-secondary-hover: #ffffff; + --token-button-foreground-color-tertiary-active: #161616; + --token-button-foreground-color-tertiary-default: #ffffff; + --token-button-foreground-color-tertiary-focus: #161616; + --token-button-foreground-color-tertiary-hover: #161616; + --token-button-gap: 32px; + --token-button-height-large: 48px; + --token-button-height-medium: 40px; + --token-button-height-small: 32px; + --token-button-icon-size-large: 16px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-small: 16px; + --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-surface-color-critical-active: #750e13; + --token-button-surface-color-critical-default: #da1e28; + --token-button-surface-color-critical-focus: #da1e28; + --token-button-surface-color-critical-hover: #b81921; + --token-button-surface-color-disabled: #8d8d8d; + --token-button-surface-color-primary-active: #002d9c; + --token-button-surface-color-primary-default: #0f62fe; + --token-button-surface-color-primary-focus: #0f62fe; + --token-button-surface-color-primary-hover: #0050e6; + --token-button-surface-color-secondary-active: #393939; + --token-button-surface-color-secondary-default: #6f6f6f; + --token-button-surface-color-secondary-focus: #6f6f6f; + --token-button-surface-color-secondary-hover: #5e5e5e; + --token-button-surface-color-tertiary-active: #c6c6c6; + --token-button-surface-color-tertiary-focus: #f4f4f4; + --token-button-surface-color-tertiary-hover: #f4f4f4; + --token-button-typography-font-size-large: 0.875rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-small: 0.875rem; + --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */ + --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-color-border-action: #4589ff; + --token-color-border-critical: #fa4d56; + --token-color-border-faint: #525252; + --token-color-border-highlight: #a56eff; + --token-color-border-primary: #8d8d8d; + --token-color-border-strong: #8d8d8d; + --token-color-border-success: #24a148; + --token-color-border-warning: #b28600; + --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-action-internal: #161616; + --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #161616; + --token-color-foreground-action-active: #a6c8ff; + --token-color-foreground-action-hover: #a6c8ff; + --token-color-foreground-action: #78a9ff; + --token-color-foreground-critical-high-contrast: #ffd7d9; + --token-color-foreground-critical-on-surface: #ffb3b8; + --token-color-foreground-critical: #ff8389; + --token-color-foreground-disabled: rgba(244, 244, 244, 0.25); + --token-color-foreground-faint: #c6c6c6; + --token-color-foreground-high-contrast: #161616; + --token-color-foreground-highlight-high-contrast: #e8daff; + --token-color-foreground-highlight-on-surface: #d4bbff; + --token-color-foreground-highlight: #be95ff; + --token-color-foreground-primary: #f4f4f4; + --token-color-foreground-strong: #f4f4f4; + --token-color-foreground-success-high-contrast: #a7f0ba; + --token-color-foreground-success-on-surface: #6fdc8c; + --token-color-foreground-success: #42be65; + --token-color-foreground-warning-high-contrast: #fddc69; + --token-color-foreground-warning-on-surface: #f1c21b; + --token-color-foreground-warning: #d2a106; + --token-color-hashicorp-brand: #ffffff; + --token-color-hcp-brand: #ffffff; + --token-color-page-faint: #262626; + --token-color-page-primary: #262626; + --token-color-palette-alpha-100: #525252; + --token-color-palette-alpha-200: #6f6f6f; + --token-color-palette-alpha-300: #8d8d8d; + --token-color-palette-amber-100: #ffd9be; + --token-color-palette-amber-200: #ba4e00; + --token-color-palette-amber-300: #8a3800; + --token-color-palette-amber-400: #5e2900; + --token-color-palette-amber-500: #3e1a00; + --token-color-palette-amber-50: #fff2e8; + --token-color-palette-blue-100: #d0e2ff; + --token-color-palette-blue-200: #0f62fe; + --token-color-palette-blue-300: #0043ce; + --token-color-palette-blue-400: #002d9c; + --token-color-palette-blue-500: #001141; + --token-color-palette-blue-50: #edf5ff; + --token-color-palette-green-100: #a7f0ba; + --token-color-palette-green-200: #24a148; + --token-color-palette-green-300: #198038; + --token-color-palette-green-400: #0e6027; + --token-color-palette-green-500: #044317; + --token-color-palette-green-50: #defbe6; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-neutral-100: #e0e0e0; + --token-color-palette-neutral-200: #c6c6c6; + --token-color-palette-neutral-300: #a8a8a8; + --token-color-palette-neutral-400: #8d8d8d; + --token-color-palette-neutral-500: #525252; + --token-color-palette-neutral-50: #f4f4f4; + --token-color-palette-neutral-600: #393939; + --token-color-palette-neutral-700: #161616; + --token-color-palette-purple-100: #e8daff; + --token-color-palette-purple-200: #a56eff; + --token-color-palette-purple-300: #8a3ffc; + --token-color-palette-purple-400: #6929c4; + --token-color-palette-purple-500: #31135e; + --token-color-palette-purple-50: #f6f2ff; + --token-color-palette-red-100: #ffd7d9; + --token-color-palette-red-200: #da1e28; + --token-color-palette-red-300: #a2191f; + --token-color-palette-red-400: #750e13; + --token-color-palette-red-500: #520408; + --token-color-palette-red-50: #fff1f1; + --token-color-surface-action: #0f62fe; + --token-color-surface-critical: #a2191f; + --token-color-surface-faint: #393939; + --token-color-surface-high-contrast: #f4f4f4; + --token-color-surface-highlight: #6929c4; + --token-color-surface-interactive-active: #6f6f6f; + --token-color-surface-interactive-disabled: #6f6f6f; + --token-color-surface-interactive-hover: #474747; + --token-color-surface-interactive: #393939; + --token-color-surface-primary: #393939; + --token-color-surface-strong: #525252; + --token-color-surface-success: #0e6027; + --token-color-surface-warning: #684e00; + --token-color-vault-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-radar-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ + --token-color-vault-secrets-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-dismiss-button-border-color-active: rgba(0, 0, 0, 0); + --token-dismiss-button-foreground-color-active: #f4f4f4; + --token-dismiss-button-foreground-color-default: #f4f4f4; + --token-dismiss-button-icon-size: 20px; + --token-dismiss-button-size: 48px; + --token-dismiss-button-surface-color-active: rgba(141, 141, 141, 0.4); + --token-dismiss-button-surface-color-hover: rgba(141, 141, 141, 0.16); + --token-elevation-high-box-shadow: none; + --token-elevation-higher-box-shadow: none; + --token-elevation-inset-box-shadow: none; + --token-elevation-low-box-shadow: none; + --token-elevation-mid-box-shadow: none; + --token-elevation-overlay-box-shadow: none; + --token-focus-ring-action-box-shadow: + inset 0 0 0 1px #161616, 0 0 0 3px #ffffff; + --token-focus-ring-critical-box-shadow: + inset 0 0 0 1px #161616, 0 0 0 3px #ffffff; + --token-form-radiocard-border-color-default-checked: #ffc0cb; + --token-form-radiocard-border-color-default: rgba(0, 0, 0, 0); + --token-form-radiocard-border-color-focus: #ffc0cb; + --token-form-radiocard-border-radius: 0px; + --token-icon-tile-border-color-logo: #6f6f6f; + --token-icon-tile-border-color-overlay: #8d8d8d; + --token-icon-tile-surface-color-overlay: #525252; + --token-rich-tooltip-bubble-arrow-size: 12px; + --token-rich-tooltip-bubble-border-color: var( + --token-color-palette-alpha-200 + ); + --token-rich-tooltip-bubble-border-radius: 2px; + --token-rich-tooltip-bubble-max-width: 288px; + --token-rich-tooltip-toggle-foreground-color-active: #c6c6c6; + --token-rich-tooltip-toggle-foreground-color-default: #c6c6c6; + --token-rich-tooltip-toggle-foreground-color-hover: #f4f4f4; + --token-rich-tooltip-toggle-gap-horizontal: 8px; + --token-rich-tooltip-toggle-icon-size: 14px; + --token-surface-base-box-shadow: none; + --token-surface-high-box-shadow: none; + --token-surface-higher-box-shadow: none; + --token-surface-inset-box-shadow: none; + --token-surface-low-box-shadow: none; + --token-surface-mid-box-shadow: none; + --token-surface-overlay-box-shadow: none; + --token-tooltip-border-radius: 2px; + --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); + --token-tooltip-caret-height: 6px; + --token-tooltip-caret-width: 12px; + --token-tooltip-max-width: 288px; + --token-tooltip-padding-horizontal: 16px; + --token-tooltip-padding-vertical: 16px; + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-letter-spacing: 0.16px; + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-letter-spacing: 0px; + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-letter-spacing: 0px; + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-letter-spacing: 0px; + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-letter-spacing: 0px; + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-weight-bold: 600; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-semibold: 600; +} + +/* + +WHY ARE ALL "COMPUTED" CSS VARIABLES REDECLARED IN EACH THEME SCOPE? + +CSS custom properties (variables) inherit from parent to child, but when a variable is defined +as a calculation or alias of another variable (e.g., `--alias-value: var(--source-value)`, its value is fixed +at the scope where it is declared—using whatever is visible at that level in the DOM (eg. `:root`). + +This block of "common/shared" CSS variables contains a lot of these aliases, so if we only declare these +"computed" variables at `:root` level, their values do not update in themed blocks that override +the "source" variables (e.g., `--source-value`) at a lower scope. +This results in _stale_ variables, where the computed value is always stuck on the `:root` value, +even inside a themed block where the source variable is assigned. + +To make sure every themed block/scoped context (eg. `.hds-theme-light`) correctly computes the aliased values, +we redeclare each "computed" variable in every theme scope where its "source" variable is overridden. + +*/ + +:root, +.hds-theme-default, +.hds-theme-system, +.hds-theme-light, +.hds-theme-dark, +.hds-mode-cds-g0, +.hds-mode-cds-g10, +.hds-mode-cds-g90, +.hds-mode-cds-g100 { + --token-app-header-height: 60px; + --token-app-header-home-link-size: 36px; + --token-app-header-logo-size: 28px; + --token-app-side-nav-body-list-item-border-radius: 5px; + --token-app-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-app-side-nav-body-list-item-height: 36px; + --token-app-side-nav-body-list-item-padding-horizontal: 8px; + --token-app-side-nav-body-list-item-padding-vertical: 4px; + --token-app-side-nav-body-list-item-spacing-vertical: 2px; + --token-app-side-nav-body-list-margin-vertical: 24px; + --token-app-side-nav-color-foreground-faint: var( + --token-color-foreground-faint + ); + --token-app-side-nav-color-foreground-primary: var( + --token-color-foreground-primary + ); + --token-app-side-nav-color-foreground-strong: var( + --token-color-foreground-primary + ); + --token-app-side-nav-color-surface-interactive-active: var( + --token-color-palette-neutral-300 + ); + --token-app-side-nav-color-surface-interactive-hover: var( + --token-color-surface-interactive-hover + ); + --token-app-side-nav-color-surface-primary: var(--token-color-surface-faint); + --token-app-side-nav-header-actions-spacing: 8px; + --token-app-side-nav-header-home-link-logo-size-minimized: 32px; + --token-app-side-nav-header-home-link-logo-size: 48px; + --token-app-side-nav-header-home-link-padding: 4px; + --token-app-side-nav-toggle-button-border-radius: 5px; + --token-app-side-nav-wrapper-border-color: var( + --token-color-palette-neutral-200 + ); + --token-app-side-nav-wrapper-border-width: 1px; + --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-app-side-nav-wrapper-padding-horizontal: 16px; + --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-app-side-nav-wrapper-padding-vertical: 16px; + --token-badge-height-large: 32px; + --token-badge-height-medium: 24px; + --token-badge-icon-size-large: 16px; + --token-badge-icon-size-medium: 16px; + --token-badge-icon-size-small: 12px; + --token-badge-padding-vertical-large: 4px; + --token-badge-padding-vertical-medium: 4px; + --token-badge-surface-color-neutral-dark-mode-outlined: rgba(0, 0, 0, 0); + --token-badge-surface-color-neutral-outlined: rgba(0, 0, 0, 0); + --token-badge-typography-line-height-medium: 1.2308; /** 16px = 1.2308 */ + --token-badge-typography-line-height-small: 1.2308; /** 16px = 1.2308 */ + --token-border-radius-rounded: 1000000000px; + --token-button-border-color-disabled: var(--token-color-border-primary); + --token-button-border-color-tertiary-active: var(--token-color-border-strong); + --token-button-border-color-tertiary-default: rgba(0, 0, 0, 0); + --token-button-border-color-tertiary-focus-external: var( + --token-color-focus-action-external + ); + --token-button-border-color-tertiary-focus-internal: var( + --token-color-focus-action-internal + ); + --token-button-border-color-tertiary-hover: var(--token-color-border-strong); + --token-button-border-width: 1px; + --token-button-focus-border-width: 3px; + --token-button-surface-color-tertiary-default: rgba(0, 0, 0, 0); + --token-color-boundary-border: #fbd7d8; + --token-color-boundary-brand: #f24c53; + --token-color-boundary-foreground: #cf2d32; + --token-color-boundary-gradient-faint-start: #fffafa; /** this is the 'boundary-50' value at 25% opacity on white */ + --token-color-boundary-gradient-faint-stop: #ffecec; + --token-color-boundary-gradient-primary-start: #f97076; + --token-color-boundary-gradient-primary-stop: #db363b; + --token-color-boundary-surface: #ffecec; + --token-color-consul-border: #ffcede; + --token-color-consul-brand: #e03875; + --token-color-consul-foreground: #d01c5b; + --token-color-consul-gradient-faint-start: #fff9fb; /** this is the 'consul-50' value at 25% opacity on white */ + --token-color-consul-gradient-faint-stop: #ffe9f1; + --token-color-consul-gradient-primary-start: #ff99be; + --token-color-consul-gradient-primary-stop: #da306e; + --token-color-consul-surface: #ffe9f1; + --token-color-nomad-border: #bff3dd; + --token-color-nomad-brand: #06d092; + --token-color-nomad-foreground: #008661; + --token-color-nomad-gradient-faint-start: #f3fff9; /** this is the 'nomad-50' value at 25% opacity on white */ + --token-color-nomad-gradient-faint-stop: #d3fdeb; + --token-color-nomad-gradient-primary-start: #bff3dd; + --token-color-nomad-gradient-primary-stop: #60dea9; + --token-color-nomad-surface: #d3fdeb; + --token-color-packer-border: #b4e4ff; + --token-color-packer-brand: #02a8ef; + --token-color-packer-foreground: #007eb4; + --token-color-packer-gradient-faint-start: #f3fcff; /** this is the 'packer-50' value at 25% opacity on white */ + --token-color-packer-gradient-faint-stop: #d4f2ff; + --token-color-packer-gradient-primary-start: #b4e4ff; + --token-color-packer-gradient-primary-stop: #63d0ff; + --token-color-packer-surface: #d4f2ff; + --token-color-terraform-border: #ebdbfc; + --token-color-terraform-brand-on-dark: #a067da; /** this is an alternative brand color meant to be used on dark backgrounds */ + --token-color-terraform-brand: #7b42bc; + --token-color-terraform-foreground: #773cb4; + --token-color-terraform-gradient-faint-start: #fcfaff; /** this is the 'terraform-50' value at 25% opacity on white */ + --token-color-terraform-gradient-faint-stop: #f4ecff; + --token-color-terraform-gradient-primary-start: #bb8deb; + --token-color-terraform-gradient-primary-stop: #844fba; + --token-color-terraform-surface: #f4ecff; + --token-color-vagrant-border: #c7dbfc; + --token-color-vagrant-brand: #1868f2; + --token-color-vagrant-foreground: #1c61d8; + --token-color-vagrant-gradient-faint-start: #f4faff; /** this is the 'vagrant-50' value at 25% opacity on white */ + --token-color-vagrant-gradient-faint-stop: #d6ebff; + --token-color-vagrant-gradient-primary-start: #639cff; + --token-color-vagrant-gradient-primary-stop: #2e71e5; + --token-color-vagrant-surface: #d6ebff; + --token-color-vault-border: #feec7b; + --token-color-vault-brand: #ffcf25; + --token-color-vault-foreground: #9a6f00; + --token-color-vault-gradient-faint-start: #fffdf2; /** this is the 'vault-50' value at 25% opacity on white */ + --token-color-vault-gradient-faint-stop: #fff9cf; + --token-color-vault-gradient-primary-start: #feec7b; + --token-color-vault-gradient-primary-stop: #ffe543; + --token-color-vault-radar-border: #feec7b; + --token-color-vault-radar-brand: #ffcf25; + --token-color-vault-radar-foreground: #9a6f00; + --token-color-vault-radar-gradient-faint-start: #fffdf2; /** this is the 'vault-radar-50' value at 25% opacity on white */ + --token-color-vault-radar-gradient-faint-stop: #fff9cf; + --token-color-vault-radar-gradient-primary-start: #feec7b; + --token-color-vault-radar-gradient-primary-stop: #ffe543; + --token-color-vault-radar-surface: #fff9cf; + --token-color-vault-secrets-border: #feec7b; + --token-color-vault-secrets-brand: #ffcf25; + --token-color-vault-secrets-foreground: #9a6f00; + --token-color-vault-secrets-gradient-faint-start: #fffdf2; /** this is the 'vault-secrets-50' value at 25% opacity on white */ + --token-color-vault-secrets-gradient-faint-stop: #fff9cf; + --token-color-vault-secrets-gradient-primary-start: #feec7b; + --token-color-vault-secrets-gradient-primary-stop: #ffe543; + --token-color-vault-secrets-surface: #fff9cf; + --token-color-vault-surface: #fff9cf; + --token-color-waypoint-border: #cbf1f3; + --token-color-waypoint-brand: #14c6cb; + --token-color-waypoint-foreground: #008196; + --token-color-waypoint-gradient-faint-start: #f6feff; /** this is the 'waypoint-50' value at 25% opacity on white */ + --token-color-waypoint-gradient-faint-stop: #e0fcff; + --token-color-waypoint-gradient-primary-start: #cbf1f3; + --token-color-waypoint-gradient-primary-stop: #62d4dc; + --token-color-waypoint-surface: #e0fcff; + --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'dash' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'dash' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-size: 12px; + --token-form-checkbox-border-radius: 3px; + --token-form-checkbox-border-width: 1px; + --token-form-checkbox-size: 16px; + --token-form-control-base-border-color-default: var( + --token-color-palette-neutral-400 + ); + --token-form-control-base-border-color-hover: var( + --token-color-palette-neutral-500 + ); + --token-form-control-base-foreground-placeholder-color: var( + --token-color-foreground-faint + ); + --token-form-control-base-foreground-value-color: var( + --token-color-foreground-strong + ); + --token-form-control-base-surface-color-default: var( + --token-color-surface-interactive + ); + --token-form-control-base-surface-color-hover: var( + --token-color-surface-interactive-hover + ); + --token-form-control-border-radius: 5px; + --token-form-control-border-width: 1px; + --token-form-control-checked-border-color-default: var( + --token-color-palette-blue-300 + ); + --token-form-control-checked-border-color-hover: var( + --token-color-palette-blue-400 + ); + --token-form-control-checked-foreground-color: var( + --token-color-foreground-high-contrast + ); + --token-form-control-checked-surface-color-default: var( + --token-color-palette-blue-200 + ); + --token-form-control-checked-surface-color-hover: var( + --token-color-palette-blue-300 + ); + --token-form-control-disabled-border-color: var(--token-color-border-primary); + --token-form-control-disabled-foreground-color: var( + --token-color-foreground-disabled + ); + --token-form-control-disabled-surface-color: var( + --token-color-surface-interactive-disabled + ); + --token-form-control-invalid-border-color-default: var( + --token-color-palette-red-300 + ); + --token-form-control-invalid-border-color-hover: var( + --token-color-palette-red-400 + ); + --token-form-control-padding: 7px; /** Notice: we have to take in account the border, so it's 1px less than in Figma. */ + --token-form-control-readonly-border-color: var(--token-color-border-faint); + --token-form-control-readonly-foreground-color: var( + --token-color-foreground-primary + ); + --token-form-control-readonly-surface-color: var( + --token-color-surface-strong + ); + --token-form-error-color: var(--token-color-palette-red-300); + --token-form-error-icon-size: 14px; + --token-form-helper-text-color: var(--token-color-foreground-faint); + --token-form-indicator-optional-color: var(--token-color-foreground-faint); + --token-form-label-color: var(--token-color-foreground-strong); + --token-form-legend-color: var(--token-form-label-color); + --token-form-radio-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'dot' color is hardcoded here! */ + --token-form-radio-background-image-data-url: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e"); /** notice: the 'dot' color is hardcoded here! */ + --token-form-radio-background-image-size: 12px; + --token-form-radio-border-width: 1px; + --token-form-radio-size: 16px; + --token-form-radiocard-border-width: 1px; + --token-form-radiocard-content-padding: 24px; + --token-form-radiocard-control-padding: 8px; + --token-form-radiocard-group-gap: 16px; + --token-form-radiocard-transition-duration: 0.2s; + --token-form-select-background-image-data-url-disabled: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E"); /** notice: the 'caret' color is hardcoded here! */ + --token-form-select-background-image-data-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E"); /** notice: the 'caret' color is hardcoded here! */ + --token-form-select-background-image-position-right-x: var( + --token-form-control-padding + ); + --token-form-select-background-image-position-top-y: 9px; + --token-form-select-background-image-size: 16px; + --token-form-text-input-background-image-data-url-date: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-cancel: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-loading: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color and animation are hardcoded here! */ + --token-form-text-input-background-image-data-url-search: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-time: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-position-x: var( + --token-form-control-padding + ); + --token-form-text-input-background-image-size: 16px; + --token-form-toggle-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-background-image-position-x: 2px; + --token-form-toggle-background-image-size: 12px; + --token-form-toggle-base-surface-color-default: var( + --token-color-surface-strong + ); /** the toggle has a different base surface color, compared to the other controls */ + --token-form-toggle-border-radius: 3px; + --token-form-toggle-border-width: 1px; + --token-form-toggle-height: 16px; + --token-form-toggle-thumb-size: var(--token-form-toggle-height); + --token-form-toggle-transition-duration: 0.2s; + --token-form-toggle-transition-timing-function: cubic-bezier( + 0.68, + -0.2, + 0.265, + 1.15 + ); + --token-form-toggle-width: 32px; + --token-pagination-child-spacing-horizontal: 20px; + --token-pagination-child-spacing-vertical: 8px; + --token-pagination-nav-control-focus-inset: 4px; + --token-pagination-nav-control-height: 36px; + --token-pagination-nav-control-icon-spacing: 6px; + --token-pagination-nav-control-padding-horizontal: 12px; + --token-pagination-nav-indicator-height: 2px; + --token-pagination-nav-indicator-spacing: 6px; + --token-tabs-divider-height: 1px; + --token-tabs-indicator-height: 3px; + --token-tabs-indicator-transition-duration: 0.6s; + --token-tabs-indicator-transition-function: cubic-bezier(0.5, 1, 0.89, 1); + --token-tabs-tab-border-radius: 5px; + --token-tabs-tab-focus-inset: 6px; + --token-tabs-tab-gutter: 6px; + --token-tabs-tab-height-large: 48px; + --token-tabs-tab-height-medium: 36px; + --token-tabs-tab-padding-horizontal-large: 20px; + --token-tabs-tab-padding-horizontal-medium: 12px; + --token-tabs-tab-padding-vertical: 0px; + --token-tooltip-focus-offset: -2px; + --token-tooltip-transition-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); +} diff --git a/packages/tokens/dist/products/css/themed-tokens/with-css-selectors--migration/tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-css-selectors--migration/tokens.css new file mode 100644 index 00000000000..3c1c306e35d --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-css-selectors--migration/tokens.css @@ -0,0 +1,2206 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root, +.hds-theme-default { + --token-app-footer-focus-color-action-internal: var( + --token-color-focus-action-internal + ); + --token-badge-border-radius: var(--token-border-radius-small); + --token-badge-count-padding-horizontal-large: 14px; + --token-badge-count-padding-horizontal-medium: 12px; + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-foreground-color-critical-filled: var( + --token-color-palette-red-400 + ); /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: var( + --token-color-foreground-high-contrast + ); + --token-badge-foreground-color-critical-outlined: var( + --token-color-foreground-critical + ); + --token-badge-foreground-color-highlight-filled: var( + --token-color-palette-purple-400 + ); /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: var( + --token-color-foreground-high-contrast + ); + --token-badge-foreground-color-highlight-outlined: var( + --token-color-foreground-highlight + ); + --token-badge-foreground-color-neutral-dark-mode-filled: var( + --token-color-foreground-high-contrast + ); + --token-badge-foreground-color-neutral-dark-mode-inverted: var( + --token-color-foreground-primary + ); + --token-badge-foreground-color-neutral-dark-mode-outlined: var( + --token-color-foreground-high-contrast + ); + --token-badge-foreground-color-neutral-filled: var( + --token-color-foreground-primary + ); + --token-badge-foreground-color-neutral-inverted: var( + --token-color-foreground-high-contrast + ); + --token-badge-foreground-color-neutral-outlined: var( + --token-color-foreground-primary + ); + --token-badge-foreground-color-success-filled: var( + --token-color-palette-green-400 + ); /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: var( + --token-color-foreground-high-contrast + ); + --token-badge-foreground-color-success-outlined: var( + --token-color-foreground-success + ); + --token-badge-foreground-color-warning-filled: var( + --token-color-palette-amber-400 + ); + --token-badge-foreground-color-warning-inverted: var( + --token-color-foreground-high-contrast + ); + --token-badge-foreground-color-warning-outlined: var( + --token-color-foreground-warning + ); + --token-badge-gap-large: 6px; + --token-badge-gap-medium: 4px; + --token-badge-gap-small: 4px; + --token-badge-height-small: 20px; + --token-badge-padding-horizontal-large: 8px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-small: 6px; + --token-badge-padding-vertical-small: 2px; + --token-badge-surface-color-critical-filled: var( + --token-color-palette-red-100 + ); /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: var( + --token-color-palette-red-200 + ); + --token-badge-surface-color-highlight-filled: var( + --token-color-palette-purple-100 + ); /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: var( + --token-color-palette-purple-200 + ); + --token-badge-surface-color-neutral-dark-mode-filled: var( + --token-color-palette-neutral-500 + ); /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: var( + --token-color-surface-faint + ); + --token-badge-surface-color-neutral-filled: var( + --token-color-palette-neutral-200 + ); + --token-badge-surface-color-neutral-inverted: var( + --token-color-palette-neutral-500 + ); /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-success-filled: var( + --token-color-palette-green-100 + ); /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: var( + --token-color-palette-green-200 + ); + --token-badge-surface-color-warning-filled: var( + --token-color-palette-amber-100 + ); /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: var( + --token-color-palette-amber-200 + ); + --token-badge-typography-font-size-large: 1rem; + --token-badge-typography-font-size-medium: 0.8125rem; + --token-badge-typography-font-size-small: 0.8125rem; + --token-badge-typography-line-height-large: 1.5; /** 24px = 1.5 */ + --token-border-radius-large: 8px; + --token-border-radius-medium: 6px; + --token-border-radius-small: 5px; + --token-border-radius-x-small: 3px; + --token-button-border-color-critical-active: var( + --token-color-palette-red-400 + ); + --token-button-border-color-critical-default: var( + --token-color-foreground-critical-on-surface + ); + --token-button-border-color-critical-focus-external: var( + --token-color-focus-critical-external + ); /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-focus-internal: var( + --token-color-focus-critical-internal + ); /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-hover: var( + --token-color-palette-red-400 + ); + --token-button-border-color-primary-active: var( + --token-color-palette-blue-400 + ); + --token-button-border-color-primary-default: var( + --token-color-palette-blue-300 + ); + --token-button-border-color-primary-focus-external: var( + --token-color-focus-action-external + ); /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-focus-internal: var( + --token-color-focus-action-internal + ); /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-hover: var( + --token-color-palette-blue-300 + ); + --token-button-border-color-secondary-active: var( + --token-color-border-strong + ); + --token-button-border-color-secondary-default: var( + --token-color-border-strong + ); + --token-button-border-color-secondary-focus-external: var( + --token-color-focus-action-external + ); /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-focus-internal: var( + --token-color-focus-action-internal + ); /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-hover: var(--token-color-border-strong); + --token-button-border-radius: var(--token-border-radius-small); + --token-button-foreground-color-critical-active: var( + --token-color-foreground-high-contrast + ); + --token-button-foreground-color-critical-default: var( + --token-color-foreground-critical-on-surface + ); + --token-button-foreground-color-critical-focus: var( + --token-color-foreground-critical-on-surface + ); + --token-button-foreground-color-critical-hover: var( + --token-color-foreground-high-contrast + ); + --token-button-foreground-color-disabled: var( + --token-color-foreground-disabled + ); + --token-button-foreground-color-primary-active: var( + --token-color-foreground-high-contrast + ); + --token-button-foreground-color-primary-default: var( + --token-color-foreground-high-contrast + ); + --token-button-foreground-color-primary-focus: var( + --token-color-foreground-high-contrast + ); + --token-button-foreground-color-primary-hover: var( + --token-color-foreground-high-contrast + ); + --token-button-foreground-color-secondary-active: var( + --token-color-foreground-primary + ); + --token-button-foreground-color-secondary-default: var( + --token-color-foreground-primary + ); + --token-button-foreground-color-secondary-focus: var( + --token-color-foreground-primary + ); + --token-button-foreground-color-secondary-hover: var( + --token-color-foreground-primary + ); + --token-button-foreground-color-tertiary-active: var( + --token-color-foreground-action-active + ); + --token-button-foreground-color-tertiary-default: var( + --token-color-foreground-action + ); + --token-button-foreground-color-tertiary-focus: var( + --token-color-foreground-action + ); + --token-button-foreground-color-tertiary-hover: var( + --token-color-foreground-action-hover + ); + --token-button-gap: 6px; + --token-button-height-large: 48px; + --token-button-height-medium: 36px; + --token-button-height-small: 28px; + --token-button-icon-size-large: 24px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-small: 12px; + --token-button-padding-horizontal-large: 19px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-small: 11px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 11px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 9px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-surface-color-critical-active: var( + --token-color-palette-red-400 + ); + --token-button-surface-color-critical-default: var( + --token-color-surface-critical + ); + --token-button-surface-color-critical-focus: var( + --token-color-surface-critical + ); + --token-button-surface-color-critical-hover: var( + --token-color-palette-red-300 + ); + --token-button-surface-color-disabled: var(--token-color-surface-faint); + --token-button-surface-color-primary-active: var( + --token-color-palette-blue-400 + ); + --token-button-surface-color-primary-default: var( + --token-color-palette-blue-200 + ); + --token-button-surface-color-primary-focus: var( + --token-color-palette-blue-200 + ); + --token-button-surface-color-primary-hover: var( + --token-color-palette-blue-300 + ); + --token-button-surface-color-secondary-active: var( + --token-color-surface-interactive-active + ); + --token-button-surface-color-secondary-default: var( + --token-color-surface-faint + ); + --token-button-surface-color-secondary-focus: var( + --token-color-surface-faint + ); + --token-button-surface-color-secondary-hover: var( + --token-color-surface-primary + ); + --token-button-surface-color-tertiary-active: var( + --token-color-surface-interactive-active + ); + --token-button-surface-color-tertiary-focus: rgba(0, 0, 0, 0); + --token-button-surface-color-tertiary-hover: var( + --token-color-surface-primary + ); + --token-button-typography-font-size-large: 1rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-small: 0.8125rem; + --token-button-typography-line-height-large: 1.5; /** 24px = 1.5 */ + --token-button-typography-line-height-medium: 1.1429; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-small: 0.9286; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-color-border-action: var(--token-color-palette-blue-100); + --token-color-border-critical: var(--token-color-palette-red-100); + --token-color-border-faint: var(--token-color-palette-alpha-100); + --token-color-border-highlight: var(--token-color-palette-purple-100); + --token-color-border-primary: var(--token-color-palette-alpha-200); + --token-color-border-strong: var(--token-color-palette-alpha-300); + --token-color-border-success: var(--token-color-palette-green-100); + --token-color-border-warning: var(--token-color-palette-amber-100); + --token-color-focus-action-external: #5990ff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-action-internal: var(--token-color-palette-blue-300); + --token-color-focus-critical-external: #dd7578; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: var(--token-color-palette-red-300); + --token-color-foreground-action-active: var(--token-color-palette-blue-400); + --token-color-foreground-action-hover: var(--token-color-palette-blue-300); + --token-color-foreground-action: var(--token-color-palette-blue-200); + --token-color-foreground-critical-high-contrast: var( + --token-color-palette-red-500 + ); + --token-color-foreground-critical-on-surface: var( + --token-color-palette-red-300 + ); + --token-color-foreground-critical: var(--token-color-palette-red-200); + --token-color-foreground-disabled: var(--token-color-palette-neutral-400); + --token-color-foreground-faint: var(--token-color-palette-neutral-500); + --token-color-foreground-high-contrast: var(--token-color-palette-neutral-0); + --token-color-foreground-highlight-high-contrast: var( + --token-color-palette-purple-500 + ); + --token-color-foreground-highlight-on-surface: var( + --token-color-palette-purple-300 + ); + --token-color-foreground-highlight: var(--token-color-palette-purple-200); + --token-color-foreground-primary: var(--token-color-palette-neutral-600); + --token-color-foreground-strong: var(--token-color-palette-neutral-700); + --token-color-foreground-success-high-contrast: var( + --token-color-palette-green-500 + ); + --token-color-foreground-success-on-surface: var( + --token-color-palette-green-300 + ); + --token-color-foreground-success: var(--token-color-palette-green-200); + --token-color-foreground-warning-high-contrast: var( + --token-color-palette-amber-500 + ); + --token-color-foreground-warning-on-surface: var( + --token-color-palette-amber-300 + ); + --token-color-foreground-warning: var(--token-color-palette-amber-200); + --token-color-hashicorp-brand: #000000; + --token-color-hcp-brand: #000000; + --token-color-page-faint: var(--token-color-palette-neutral-50); + --token-color-page-primary: var(--token-color-palette-neutral-0); + --token-color-palette-alpha-100: #656a761a; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-400: #006619; + --token-color-palette-green-500: #054220; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-neutral-100: #f1f2f3; + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-300: #c2c5cb; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-400: #940004; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-50: #fff5f5; + --token-color-surface-action: var(--token-color-palette-blue-50); + --token-color-surface-critical: var(--token-color-palette-red-50); + --token-color-surface-faint: var(--token-color-palette-neutral-50); + --token-color-surface-high-contrast: var(--token-color-palette-neutral-700); + --token-color-surface-highlight: var(--token-color-palette-purple-50); + --token-color-surface-interactive-active: var( + --token-color-palette-neutral-200 + ); + --token-color-surface-interactive-disabled: var( + --token-color-palette-neutral-50 + ); + --token-color-surface-interactive-hover: var( + --token-color-palette-neutral-100 + ); + --token-color-surface-interactive: var(--token-color-palette-neutral-0); + --token-color-surface-primary: var(--token-color-palette-neutral-0); + --token-color-surface-strong: var(--token-color-palette-neutral-100); + --token-color-surface-success: var(--token-color-palette-green-50); + --token-color-surface-warning: var(--token-color-palette-amber-50); + --token-color-vault-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-radar-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ + --token-color-vault-secrets-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-dismiss-button-border-color-active: var(--token-color-border-strong); + --token-dismiss-button-foreground-color-active: var( + --token-color-foreground-strong + ); + --token-dismiss-button-foreground-color-default: var( + --token-color-foreground-faint + ); + --token-dismiss-button-icon-size: 16px; + --token-dismiss-button-size: 24px; + --token-dismiss-button-surface-color-active: rgba(222, 223, 227, 0.4); + --token-dismiss-button-surface-color-hover: rgba(222, 223, 227, 0.4); + --token-elevation-high-box-shadow: + 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633; + --token-elevation-higher-box-shadow: + 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640; + --token-elevation-inset-box-shadow: inset 0px 1px 2px 1px #656a761a; + --token-elevation-low-box-shadow: + 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; + --token-elevation-mid-box-shadow: + 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633; + --token-elevation-overlay-box-shadow: + 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; + --token-focus-ring-action-box-shadow: + inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff; + --token-focus-ring-critical-box-shadow: + inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578; + --token-form-radiocard-border-color-default-checked: var( + --token-color-palette-blue-300 + ); + --token-form-radiocard-border-color-default: var( + --token-color-surface-primary + ); + --token-form-radiocard-border-color-focus: var( + --token-color-focus-action-internal + ); + --token-form-radiocard-border-radius: 6px; + --token-icon-tile-border-color-logo: var(--token-color-border-primary); + --token-icon-tile-border-color-overlay: var(--token-color-border-primary); + --token-icon-tile-surface-color-overlay: var(--token-color-surface-primary); + --token-rich-tooltip-bubble-arrow-size: 20px; + --token-rich-tooltip-bubble-border-color: #656a7633; + --token-rich-tooltip-bubble-border-radius: var(--token-border-radius-small); + --token-rich-tooltip-bubble-max-width: 280px; + --token-rich-tooltip-toggle-foreground-color-active: var( + --token-color-foreground-faint + ); + --token-rich-tooltip-toggle-foreground-color-default: var( + --token-color-foreground-strong + ); + --token-rich-tooltip-toggle-foreground-color-hover: var( + --token-color-foreground-primary + ); + --token-rich-tooltip-toggle-gap-horizontal: 4px; + --token-rich-tooltip-toggle-icon-size: 1em; + --token-surface-base-box-shadow: 0 0 0 1px #656a7633; + --token-surface-high-box-shadow: + 0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, + 0px 16px 16px -10px #656a7633; + --token-surface-higher-box-shadow: + 0 0 0 1px #656a7633, 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640; + --token-surface-inset-box-shadow: + inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a; + --token-surface-low-box-shadow: + 0 0 0 1px #656a7626, 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; + --token-surface-mid-box-shadow: + 0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633; + --token-surface-overlay-box-shadow: + 0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; + --token-tooltip-border-radius: var(--token-border-radius-small); + --token-tooltip-caret-clip-path: path( + "M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z" + ); + --token-tooltip-caret-height: 7px; + --token-tooltip-caret-width: 16px; + --token-tooltip-max-width: 280px; + --token-tooltip-padding-horizontal: 12px; + --token-tooltip-padding-vertical: 8px; + --token-typography-body-100-font-family: var( + --token-typography-font-stack-text + ); + --token-typography-body-100-font-size: 0.8125rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.3846; /** 18px */ + --token-typography-body-200-font-family: var( + --token-typography-font-stack-text + ); + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.4286; /** 20px */ + --token-typography-body-300-font-family: var( + --token-typography-font-stack-text + ); + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-code-100-font-family: var( + --token-typography-font-stack-code + ); + --token-typography-code-100-font-size: 0.8125rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.23; /** 16px */ + --token-typography-code-200-font-family: var( + --token-typography-font-stack-code + ); + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.125; /** 18px */ + --token-typography-code-300-font-family: var( + --token-typography-font-stack-code + ); + --token-typography-code-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.25; /** 20px */ + --token-typography-display-100-font-family: var( + --token-typography-font-stack-display + ); + --token-typography-display-100-font-size: 0.8125rem; /** 13px/0.8125rem */ + --token-typography-display-100-letter-spacing: 0px; + --token-typography-display-100-line-height: 1.3846; /** 18px */ + --token-typography-display-200-font-family: var( + --token-typography-font-stack-display + ); + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-letter-spacing: -0.5px; + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-300-font-family: var( + --token-typography-font-stack-text + ); + --token-typography-display-300-font-size: 1.125rem; /** 18px/1.125rem */ + --token-typography-display-300-letter-spacing: -0.5px; + --token-typography-display-300-line-height: 1.3333; /** 24px */ + --token-typography-display-400-font-family: var( + --token-typography-font-stack-display + ); + --token-typography-display-400-font-size: 1.5rem; /** 24px/1.5rem */ + --token-typography-display-400-letter-spacing: 0px; + --token-typography-display-400-line-height: 1.3333; /** 32px */ + --token-typography-display-500-font-family: var( + --token-typography-font-stack-display + ); + --token-typography-display-500-font-size: 1.875rem; /** 30px/1.875rem */ + --token-typography-display-500-letter-spacing: -0.5px; + --token-typography-display-500-line-height: 1.2666; /** 38px */ + --token-typography-font-stack-code: ui-monospace, Menlo, Consolas, monospace; + --token-typography-font-stack-display: + -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, + Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-font-stack-text: + -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, + Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-font-weight-bold: 700; + --token-typography-font-weight-medium: 500; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-semibold: 600; +} + +@media (prefers-color-scheme: light) { + .hds-theme-system { + --token-app-footer-focus-color-action-internal: #0f62fe; + --token-badge-border-radius: var(--token-border-radius-rounded); + --token-badge-count-padding-horizontal-large: 12px; + --token-badge-count-padding-horizontal-medium: 8px; + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-foreground-color-critical-filled: #a2191f; /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: #ffffff; + --token-badge-foreground-color-critical-outlined: #a2191f; + --token-badge-foreground-color-highlight-filled: #6929c4; /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: #ffffff; + --token-badge-foreground-color-highlight-outlined: #6929c4; + --token-badge-foreground-color-neutral-dark-mode-filled: #ffffff; + --token-badge-foreground-color-neutral-dark-mode-inverted: #161616; + --token-badge-foreground-color-neutral-dark-mode-outlined: #ffffff; + --token-badge-foreground-color-neutral-filled: #161616; + --token-badge-foreground-color-neutral-inverted: #e0e0e0; + --token-badge-foreground-color-neutral-outlined: #161616; + --token-badge-foreground-color-success-filled: #0e6027; /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: #ffffff; + --token-badge-foreground-color-success-outlined: #0e6027; + --token-badge-foreground-color-warning-filled: #8a3800; + --token-badge-foreground-color-warning-inverted: #ffffff; + --token-badge-foreground-color-warning-outlined: #8a3800; + --token-badge-gap-large: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-small: 4px; + --token-badge-height-small: 18px; + --token-badge-padding-horizontal-large: 12px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-small: 8px; + --token-badge-padding-vertical-small: 1px; + --token-badge-surface-color-critical-filled: #ffd7d9; /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: #a2191f; + --token-badge-surface-color-highlight-filled: #e8daff; /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: #6929c4; + --token-badge-surface-color-neutral-dark-mode-filled: #393939; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: #e0e0e0; + --token-badge-surface-color-neutral-filled: #e0e0e0; + --token-badge-surface-color-neutral-inverted: #393939; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-success-filled: #a7f0ba; /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: #0e6027; + --token-badge-surface-color-warning-filled: #ffd9be; /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: #8a3800; + --token-badge-typography-font-size-large: 0.75rem; + --token-badge-typography-font-size-medium: 0.75rem; + --token-badge-typography-font-size-small: 0.75rem; + --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */ + --token-border-radius-large: 0px; + --token-border-radius-medium: 0px; + --token-border-radius-small: 0px; + --token-border-radius-x-small: 0px; + --token-button-border-color-critical-active: rgba(0, 0, 0, 0); + --token-button-border-color-critical-default: rgba(0, 0, 0, 0); + --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-hover: rgba(0, 0, 0, 0); + --token-button-border-color-primary-active: rgba(0, 0, 0, 0); + --token-button-border-color-primary-default: rgba(0, 0, 0, 0); + --token-button-border-color-primary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-hover: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-active: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-default: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0); + --token-button-border-radius: 0px; + --token-button-foreground-color-critical-active: #ffffff; + --token-button-foreground-color-critical-default: #ffffff; + --token-button-foreground-color-critical-focus: #ffffff; + --token-button-foreground-color-critical-hover: #ffffff; + --token-button-foreground-color-disabled: #8d8d8d; + --token-button-foreground-color-primary-active: #ffffff; + --token-button-foreground-color-primary-default: #ffffff; + --token-button-foreground-color-primary-focus: #ffffff; + --token-button-foreground-color-primary-hover: #ffffff; + --token-button-foreground-color-secondary-active: #ffffff; + --token-button-foreground-color-secondary-default: #ffffff; + --token-button-foreground-color-secondary-focus: #ffffff; + --token-button-foreground-color-secondary-hover: #ffffff; + --token-button-foreground-color-tertiary-active: #ffffff; + --token-button-foreground-color-tertiary-default: #0f62fe; + --token-button-foreground-color-tertiary-focus: #ffffff; + --token-button-foreground-color-tertiary-hover: #ffffff; + --token-button-gap: 32px; + --token-button-height-large: 48px; + --token-button-height-medium: 40px; + --token-button-height-small: 32px; + --token-button-icon-size-large: 16px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-small: 16px; + --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-surface-color-critical-active: #750e13; + --token-button-surface-color-critical-default: #da1e28; + --token-button-surface-color-critical-focus: #da1e28; + --token-button-surface-color-critical-hover: #b81921; + --token-button-surface-color-disabled: #c6c6c6; + --token-button-surface-color-primary-active: #002d9c; + --token-button-surface-color-primary-default: #0f62fe; + --token-button-surface-color-primary-focus: #0f62fe; + --token-button-surface-color-primary-hover: #0050e6; + --token-button-surface-color-secondary-active: #6f6f6f; + --token-button-surface-color-secondary-default: #393939; + --token-button-surface-color-secondary-focus: #393939; + --token-button-surface-color-secondary-hover: #474747; + --token-button-surface-color-tertiary-active: #002d9c; + --token-button-surface-color-tertiary-focus: #0050e6; + --token-button-surface-color-tertiary-hover: #0050e6; + --token-button-typography-font-size-large: 0.875rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-small: 0.875rem; + --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */ + --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-color-border-action: #0f62fe; + --token-color-border-critical: #ff8389; + --token-color-border-faint: #e0e0e0; + --token-color-border-highlight: #be95ff; + --token-color-border-primary: #c6c6c6; + --token-color-border-strong: #8d8d8d; + --token-color-border-success: #42be65; + --token-color-border-warning: #d2a106; + --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-action-internal: #ffffff; + --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #ffffff; + --token-color-foreground-action-active: #0043ce; + --token-color-foreground-action-hover: #0043ce; + --token-color-foreground-action: #0f62fe; + --token-color-foreground-critical-high-contrast: #750e13; + --token-color-foreground-critical-on-surface: #a2191f; + --token-color-foreground-critical: #da1e28; + --token-color-foreground-disabled: rgba(22, 22, 22, 0.25); + --token-color-foreground-faint: #525252; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-highlight-high-contrast: #491d8b; + --token-color-foreground-highlight-on-surface: #6929c4; + --token-color-foreground-highlight: #8a3ffc; + --token-color-foreground-primary: #161616; + --token-color-foreground-strong: #161616; + --token-color-foreground-success-high-contrast: #044317; + --token-color-foreground-success-on-surface: #0e6027; + --token-color-foreground-success: #198038; + --token-color-foreground-warning-high-contrast: #483700; + --token-color-foreground-warning-on-surface: #684e00; + --token-color-foreground-warning: #8e6a00; + --token-color-hashicorp-brand: #000000; + --token-color-hcp-brand: #000000; + --token-color-page-faint: #ffffff; + --token-color-page-primary: #ffffff; + --token-color-palette-alpha-100: #e0e0e0; + --token-color-palette-alpha-200: #c6c6c6; + --token-color-palette-alpha-300: #8d8d8d; + --token-color-palette-amber-100: #ffd9be; + --token-color-palette-amber-200: #ba4e00; + --token-color-palette-amber-300: #8a3800; + --token-color-palette-amber-400: #5e2900; + --token-color-palette-amber-500: #3e1a00; + --token-color-palette-amber-50: #fff2e8; + --token-color-palette-blue-100: #d0e2ff; + --token-color-palette-blue-200: #0f62fe; + --token-color-palette-blue-300: #0043ce; + --token-color-palette-blue-400: #002d9c; + --token-color-palette-blue-500: #001141; + --token-color-palette-blue-50: #edf5ff; + --token-color-palette-green-100: #a7f0ba; + --token-color-palette-green-200: #24a148; + --token-color-palette-green-300: #198038; + --token-color-palette-green-400: #0e6027; + --token-color-palette-green-500: #044317; + --token-color-palette-green-50: #defbe6; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-neutral-100: #e0e0e0; + --token-color-palette-neutral-200: #c6c6c6; + --token-color-palette-neutral-300: #a8a8a8; + --token-color-palette-neutral-400: #8d8d8d; + --token-color-palette-neutral-500: #525252; + --token-color-palette-neutral-50: #f4f4f4; + --token-color-palette-neutral-600: #393939; + --token-color-palette-neutral-700: #161616; + --token-color-palette-purple-100: #e8daff; + --token-color-palette-purple-200: #a56eff; + --token-color-palette-purple-300: #8a3ffc; + --token-color-palette-purple-400: #6929c4; + --token-color-palette-purple-500: #31135e; + --token-color-palette-purple-50: #f6f2ff; + --token-color-palette-red-100: #ffd7d9; + --token-color-palette-red-200: #da1e28; + --token-color-palette-red-300: #a2191f; + --token-color-palette-red-400: #750e13; + --token-color-palette-red-500: #520408; + --token-color-palette-red-50: #fff1f1; + --token-color-surface-action: #d0e2ff; + --token-color-surface-critical: #ffd7d9; + --token-color-surface-faint: #f4f4f4; + --token-color-surface-high-contrast: #393939; + --token-color-surface-highlight: #e8daff; + --token-color-surface-interactive-active: #c6c6c6; + --token-color-surface-interactive-disabled: #c6c6c6; + --token-color-surface-interactive-hover: #e8e8e8; + --token-color-surface-interactive: #f4f4f4; + --token-color-surface-primary: #f4f4f4; + --token-color-surface-strong: #e0e0e0; + --token-color-surface-success: #a7f0ba; + --token-color-surface-warning: #fcf4d6; + --token-color-vault-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-radar-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ + --token-color-vault-secrets-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-dismiss-button-border-color-active: rgba(0, 0, 0, 0); + --token-dismiss-button-foreground-color-active: #161616; + --token-dismiss-button-foreground-color-default: #161616; + --token-dismiss-button-icon-size: 20px; + --token-dismiss-button-size: 48px; + --token-dismiss-button-surface-color-active: rgba(141, 141, 141, 0.5); + --token-dismiss-button-surface-color-hover: rgba(141, 141, 141, 0.12); + --token-elevation-high-box-shadow: none; + --token-elevation-higher-box-shadow: none; + --token-elevation-inset-box-shadow: none; + --token-elevation-low-box-shadow: none; + --token-elevation-mid-box-shadow: none; + --token-elevation-overlay-box-shadow: none; + --token-focus-ring-action-box-shadow: + inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe; + --token-focus-ring-critical-box-shadow: + inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe; + --token-form-radiocard-border-color-default-checked: #ffc0cb; + --token-form-radiocard-border-color-default: rgba(0, 0, 0, 0); + --token-form-radiocard-border-color-focus: #ffc0cb; + --token-form-radiocard-border-radius: 0px; + --token-icon-tile-border-color-logo: #c6c6c6; + --token-icon-tile-border-color-overlay: #e0e0e0; + --token-icon-tile-surface-color-overlay: #ffffff; + --token-rich-tooltip-bubble-arrow-size: 12px; + --token-rich-tooltip-bubble-border-color: var( + --token-color-palette-alpha-200 + ); + --token-rich-tooltip-bubble-border-radius: 2px; + --token-rich-tooltip-bubble-max-width: 288px; + --token-rich-tooltip-toggle-foreground-color-active: #525252; + --token-rich-tooltip-toggle-foreground-color-default: #525252; + --token-rich-tooltip-toggle-foreground-color-hover: #161616; + --token-rich-tooltip-toggle-gap-horizontal: 8px; + --token-rich-tooltip-toggle-icon-size: 14px; + --token-surface-base-box-shadow: none; + --token-surface-high-box-shadow: none; + --token-surface-higher-box-shadow: none; + --token-surface-inset-box-shadow: none; + --token-surface-low-box-shadow: none; + --token-surface-mid-box-shadow: none; + --token-surface-overlay-box-shadow: none; + --token-tooltip-border-radius: 2px; + --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); + --token-tooltip-caret-height: 6px; + --token-tooltip-caret-width: 12px; + --token-tooltip-max-width: 288px; + --token-tooltip-padding-horizontal: 16px; + --token-tooltip-padding-vertical: 16px; + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-letter-spacing: 0.16px; + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-letter-spacing: 0px; + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-letter-spacing: 0px; + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-letter-spacing: 0px; + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-letter-spacing: 0px; + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-weight-bold: 600; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-semibold: 600; + } +} + +@media (prefers-color-scheme: dark) { + .hds-theme-system { + --token-app-footer-focus-color-action-internal: #ffffff; + --token-badge-border-radius: var(--token-border-radius-rounded); + --token-badge-count-padding-horizontal-large: 12px; + --token-badge-count-padding-horizontal-medium: 8px; + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-foreground-color-critical-filled: #ffd7d9; /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: #161616; + --token-badge-foreground-color-critical-outlined: #ffd7d9; + --token-badge-foreground-color-highlight-filled: #e8daff; /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: #161616; + --token-badge-foreground-color-highlight-outlined: #e8daff; + --token-badge-foreground-color-neutral-dark-mode-filled: #161616; + --token-badge-foreground-color-neutral-dark-mode-inverted: #f4f4f4; + --token-badge-foreground-color-neutral-dark-mode-outlined: #161616; + --token-badge-foreground-color-neutral-filled: #f4f4f4; + --token-badge-foreground-color-neutral-inverted: #161616; + --token-badge-foreground-color-neutral-outlined: #f4f4f4; + --token-badge-foreground-color-success-filled: #a7f0ba; /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: #161616; + --token-badge-foreground-color-success-outlined: #a7f0ba; + --token-badge-foreground-color-warning-filled: #ffd9be; + --token-badge-foreground-color-warning-inverted: #161616; + --token-badge-foreground-color-warning-outlined: #ffd9be; + --token-badge-gap-large: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-small: 4px; + --token-badge-height-small: 18px; + --token-badge-padding-horizontal-large: 12px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-small: 8px; + --token-badge-padding-vertical-small: 1px; + --token-badge-surface-color-critical-filled: #a2191f; /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: #ffd7d9; + --token-badge-surface-color-highlight-filled: #6929c4; /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: #be95ff; + --token-badge-surface-color-neutral-dark-mode-filled: #f4f4f4; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: #525252; + --token-badge-surface-color-neutral-filled: #525252; + --token-badge-surface-color-neutral-inverted: #f4f4f4; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-success-filled: #0e6027; /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: #a7f0ba; + --token-badge-surface-color-warning-filled: #8a3800; /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: #ffd9be; + --token-badge-typography-font-size-large: 0.75rem; + --token-badge-typography-font-size-medium: 0.75rem; + --token-badge-typography-font-size-small: 0.75rem; + --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */ + --token-border-radius-large: 0px; + --token-border-radius-medium: 0px; + --token-border-radius-small: 0px; + --token-border-radius-x-small: 0px; + --token-button-border-color-critical-active: rgba(0, 0, 0, 0); + --token-button-border-color-critical-default: rgba(0, 0, 0, 0); + --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-hover: rgba(0, 0, 0, 0); + --token-button-border-color-primary-active: rgba(0, 0, 0, 0); + --token-button-border-color-primary-default: rgba(0, 0, 0, 0); + --token-button-border-color-primary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-hover: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-active: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-default: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0); + --token-button-border-radius: 0px; + --token-button-foreground-color-critical-active: #ffffff; + --token-button-foreground-color-critical-default: #ffffff; + --token-button-foreground-color-critical-focus: #ffffff; + --token-button-foreground-color-critical-hover: #ffffff; + --token-button-foreground-color-disabled: rgba(255, 255, 255, 0.25); + --token-button-foreground-color-primary-active: #ffffff; + --token-button-foreground-color-primary-default: #ffffff; + --token-button-foreground-color-primary-focus: #ffffff; + --token-button-foreground-color-primary-hover: #ffffff; + --token-button-foreground-color-secondary-active: #ffffff; + --token-button-foreground-color-secondary-default: #ffffff; + --token-button-foreground-color-secondary-focus: #ffffff; + --token-button-foreground-color-secondary-hover: #ffffff; + --token-button-foreground-color-tertiary-active: #161616; + --token-button-foreground-color-tertiary-default: #ffffff; + --token-button-foreground-color-tertiary-focus: #161616; + --token-button-foreground-color-tertiary-hover: #161616; + --token-button-gap: 32px; + --token-button-height-large: 48px; + --token-button-height-medium: 40px; + --token-button-height-small: 32px; + --token-button-icon-size-large: 16px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-small: 16px; + --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-surface-color-critical-active: #750e13; + --token-button-surface-color-critical-default: #da1e28; + --token-button-surface-color-critical-focus: #da1e28; + --token-button-surface-color-critical-hover: #b81921; + --token-button-surface-color-disabled: #8d8d8d; + --token-button-surface-color-primary-active: #002d9c; + --token-button-surface-color-primary-default: #0f62fe; + --token-button-surface-color-primary-focus: #0f62fe; + --token-button-surface-color-primary-hover: #0050e6; + --token-button-surface-color-secondary-active: #393939; + --token-button-surface-color-secondary-default: #6f6f6f; + --token-button-surface-color-secondary-focus: #6f6f6f; + --token-button-surface-color-secondary-hover: #5e5e5e; + --token-button-surface-color-tertiary-active: #c6c6c6; + --token-button-surface-color-tertiary-focus: #f4f4f4; + --token-button-surface-color-tertiary-hover: #f4f4f4; + --token-button-typography-font-size-large: 0.875rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-small: 0.875rem; + --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */ + --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-color-border-action: #4589ff; + --token-color-border-critical: #fa4d56; + --token-color-border-faint: #393939; + --token-color-border-highlight: #a56eff; + --token-color-border-primary: #6f6f6f; + --token-color-border-strong: #6f6f6f; + --token-color-border-success: #24a148; + --token-color-border-warning: #b28600; + --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-action-internal: #161616; + --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #161616; + --token-color-foreground-action-active: #a6c8ff; + --token-color-foreground-action-hover: #a6c8ff; + --token-color-foreground-action: #78a9ff; + --token-color-foreground-critical-high-contrast: #ffd7d9; + --token-color-foreground-critical-on-surface: #ffb3b8; + --token-color-foreground-critical: #ff8389; + --token-color-foreground-disabled: rgba(244, 244, 244, 0.25); + --token-color-foreground-faint: #c6c6c6; + --token-color-foreground-high-contrast: #161616; + --token-color-foreground-highlight-high-contrast: #d4bbff; + --token-color-foreground-highlight-on-surface: #d4bbff; + --token-color-foreground-highlight: #be95ff; + --token-color-foreground-primary: #f4f4f4; + --token-color-foreground-strong: #f4f4f4; + --token-color-foreground-success-high-contrast: #a7f0ba; + --token-color-foreground-success-on-surface: #6fdc8c; + --token-color-foreground-success: #42be65; + --token-color-foreground-warning-high-contrast: #fddc69; + --token-color-foreground-warning-on-surface: #f1c21b; + --token-color-foreground-warning: #d2a106; + --token-color-hashicorp-brand: #ffffff; + --token-color-hcp-brand: #ffffff; + --token-color-page-faint: #161616; + --token-color-page-primary: #161616; + --token-color-palette-alpha-100: #393939; + --token-color-palette-alpha-200: #525252; + --token-color-palette-alpha-300: #6f6f6f; + --token-color-palette-amber-100: #ffd9be; + --token-color-palette-amber-200: #ba4e00; + --token-color-palette-amber-300: #8a3800; + --token-color-palette-amber-400: #5e2900; + --token-color-palette-amber-500: #3e1a00; + --token-color-palette-amber-50: #fff2e8; + --token-color-palette-blue-100: #d0e2ff; + --token-color-palette-blue-200: #0f62fe; + --token-color-palette-blue-300: #0043ce; + --token-color-palette-blue-400: #002d9c; + --token-color-palette-blue-500: #001141; + --token-color-palette-blue-50: #edf5ff; + --token-color-palette-green-100: #a7f0ba; + --token-color-palette-green-200: #24a148; + --token-color-palette-green-300: #198038; + --token-color-palette-green-400: #0e6027; + --token-color-palette-green-500: #044317; + --token-color-palette-green-50: #defbe6; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-neutral-100: #e0e0e0; + --token-color-palette-neutral-200: #c6c6c6; + --token-color-palette-neutral-300: #a8a8a8; + --token-color-palette-neutral-400: #8d8d8d; + --token-color-palette-neutral-500: #525252; + --token-color-palette-neutral-50: #f4f4f4; + --token-color-palette-neutral-600: #393939; + --token-color-palette-neutral-700: #161616; + --token-color-palette-purple-100: #e8daff; + --token-color-palette-purple-200: #a56eff; + --token-color-palette-purple-300: #8a3ffc; + --token-color-palette-purple-400: #6929c4; + --token-color-palette-purple-500: #31135e; + --token-color-palette-purple-50: #f6f2ff; + --token-color-palette-red-100: #ffd7d9; + --token-color-palette-red-200: #da1e28; + --token-color-palette-red-300: #a2191f; + --token-color-palette-red-400: #750e13; + --token-color-palette-red-500: #520408; + --token-color-palette-red-50: #fff1f1; + --token-color-surface-action: #0043ce; + --token-color-surface-critical: #a2191f; + --token-color-surface-faint: #262626; + --token-color-surface-high-contrast: #f4f4f4; + --token-color-surface-highlight: #6929c4; + --token-color-surface-interactive-active: #525252; + --token-color-surface-interactive-disabled: #525252; + --token-color-surface-interactive-hover: #333333; + --token-color-surface-interactive: #262626; + --token-color-surface-primary: #262626; + --token-color-surface-strong: #393939; + --token-color-surface-success: #0e6027; + --token-color-surface-warning: #684e00; + --token-color-vault-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-radar-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ + --token-color-vault-secrets-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-dismiss-button-border-color-active: rgba(0, 0, 0, 0); + --token-dismiss-button-foreground-color-active: #f4f4f4; + --token-dismiss-button-foreground-color-default: #f4f4f4; + --token-dismiss-button-icon-size: 20px; + --token-dismiss-button-size: 48px; + --token-dismiss-button-surface-color-active: rgba(141, 141, 141, 0.4); + --token-dismiss-button-surface-color-hover: rgba(141, 141, 141, 0.16); + --token-elevation-high-box-shadow: none; + --token-elevation-higher-box-shadow: none; + --token-elevation-inset-box-shadow: none; + --token-elevation-low-box-shadow: none; + --token-elevation-mid-box-shadow: none; + --token-elevation-overlay-box-shadow: none; + --token-focus-ring-action-box-shadow: + inset 0 0 0 1px #161616, 0 0 0 3px #ffffff; + --token-focus-ring-critical-box-shadow: + inset 0 0 0 1px #161616, 0 0 0 3px #ffffff; + --token-form-radiocard-border-color-default-checked: #ffc0cb; + --token-form-radiocard-border-color-default: rgba(0, 0, 0, 0); + --token-form-radiocard-border-color-focus: #ffc0cb; + --token-form-radiocard-border-radius: 0px; + --token-icon-tile-border-color-logo: #525252; + --token-icon-tile-border-color-overlay: #6f6f6f; + --token-icon-tile-surface-color-overlay: #393939; + --token-rich-tooltip-bubble-arrow-size: 12px; + --token-rich-tooltip-bubble-border-color: var( + --token-color-palette-alpha-200 + ); + --token-rich-tooltip-bubble-border-radius: 2px; + --token-rich-tooltip-bubble-max-width: 288px; + --token-rich-tooltip-toggle-foreground-color-active: #c6c6c6; + --token-rich-tooltip-toggle-foreground-color-default: #c6c6c6; + --token-rich-tooltip-toggle-foreground-color-hover: #f4f4f4; + --token-rich-tooltip-toggle-gap-horizontal: 8px; + --token-rich-tooltip-toggle-icon-size: 14px; + --token-surface-base-box-shadow: none; + --token-surface-high-box-shadow: none; + --token-surface-higher-box-shadow: none; + --token-surface-inset-box-shadow: none; + --token-surface-low-box-shadow: none; + --token-surface-mid-box-shadow: none; + --token-surface-overlay-box-shadow: none; + --token-tooltip-border-radius: 2px; + --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); + --token-tooltip-caret-height: 6px; + --token-tooltip-caret-width: 12px; + --token-tooltip-max-width: 288px; + --token-tooltip-padding-horizontal: 16px; + --token-tooltip-padding-vertical: 16px; + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-letter-spacing: 0.16px; + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-letter-spacing: 0px; + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-letter-spacing: 0px; + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-letter-spacing: 0px; + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-letter-spacing: 0px; + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-weight-bold: 600; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-semibold: 600; + } +} + +.hds-theme-light { + --token-app-footer-focus-color-action-internal: #0f62fe; + --token-badge-border-radius: var(--token-border-radius-rounded); + --token-badge-count-padding-horizontal-large: 12px; + --token-badge-count-padding-horizontal-medium: 8px; + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-foreground-color-critical-filled: #a2191f; /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: #ffffff; + --token-badge-foreground-color-critical-outlined: #a2191f; + --token-badge-foreground-color-highlight-filled: #6929c4; /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: #ffffff; + --token-badge-foreground-color-highlight-outlined: #6929c4; + --token-badge-foreground-color-neutral-dark-mode-filled: #ffffff; + --token-badge-foreground-color-neutral-dark-mode-inverted: #161616; + --token-badge-foreground-color-neutral-dark-mode-outlined: #ffffff; + --token-badge-foreground-color-neutral-filled: #161616; + --token-badge-foreground-color-neutral-inverted: #e0e0e0; + --token-badge-foreground-color-neutral-outlined: #161616; + --token-badge-foreground-color-success-filled: #0e6027; /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: #ffffff; + --token-badge-foreground-color-success-outlined: #0e6027; + --token-badge-foreground-color-warning-filled: #8a3800; + --token-badge-foreground-color-warning-inverted: #ffffff; + --token-badge-foreground-color-warning-outlined: #8a3800; + --token-badge-gap-large: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-small: 4px; + --token-badge-height-small: 18px; + --token-badge-padding-horizontal-large: 12px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-small: 8px; + --token-badge-padding-vertical-small: 1px; + --token-badge-surface-color-critical-filled: #ffd7d9; /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: #a2191f; + --token-badge-surface-color-highlight-filled: #e8daff; /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: #6929c4; + --token-badge-surface-color-neutral-dark-mode-filled: #393939; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: #e0e0e0; + --token-badge-surface-color-neutral-filled: #e0e0e0; + --token-badge-surface-color-neutral-inverted: #393939; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-success-filled: #a7f0ba; /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: #0e6027; + --token-badge-surface-color-warning-filled: #ffd9be; /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: #8a3800; + --token-badge-typography-font-size-large: 0.75rem; + --token-badge-typography-font-size-medium: 0.75rem; + --token-badge-typography-font-size-small: 0.75rem; + --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */ + --token-border-radius-large: 0px; + --token-border-radius-medium: 0px; + --token-border-radius-small: 0px; + --token-border-radius-x-small: 0px; + --token-button-border-color-critical-active: rgba(0, 0, 0, 0); + --token-button-border-color-critical-default: rgba(0, 0, 0, 0); + --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-hover: rgba(0, 0, 0, 0); + --token-button-border-color-primary-active: rgba(0, 0, 0, 0); + --token-button-border-color-primary-default: rgba(0, 0, 0, 0); + --token-button-border-color-primary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-hover: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-active: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-default: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0); + --token-button-border-radius: 0px; + --token-button-foreground-color-critical-active: #ffffff; + --token-button-foreground-color-critical-default: #ffffff; + --token-button-foreground-color-critical-focus: #ffffff; + --token-button-foreground-color-critical-hover: #ffffff; + --token-button-foreground-color-disabled: #8d8d8d; + --token-button-foreground-color-primary-active: #ffffff; + --token-button-foreground-color-primary-default: #ffffff; + --token-button-foreground-color-primary-focus: #ffffff; + --token-button-foreground-color-primary-hover: #ffffff; + --token-button-foreground-color-secondary-active: #ffffff; + --token-button-foreground-color-secondary-default: #ffffff; + --token-button-foreground-color-secondary-focus: #ffffff; + --token-button-foreground-color-secondary-hover: #ffffff; + --token-button-foreground-color-tertiary-active: #ffffff; + --token-button-foreground-color-tertiary-default: #0f62fe; + --token-button-foreground-color-tertiary-focus: #ffffff; + --token-button-foreground-color-tertiary-hover: #ffffff; + --token-button-gap: 32px; + --token-button-height-large: 48px; + --token-button-height-medium: 40px; + --token-button-height-small: 32px; + --token-button-icon-size-large: 16px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-small: 16px; + --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-surface-color-critical-active: #750e13; + --token-button-surface-color-critical-default: #da1e28; + --token-button-surface-color-critical-focus: #da1e28; + --token-button-surface-color-critical-hover: #b81921; + --token-button-surface-color-disabled: #c6c6c6; + --token-button-surface-color-primary-active: #002d9c; + --token-button-surface-color-primary-default: #0f62fe; + --token-button-surface-color-primary-focus: #0f62fe; + --token-button-surface-color-primary-hover: #0050e6; + --token-button-surface-color-secondary-active: #6f6f6f; + --token-button-surface-color-secondary-default: #393939; + --token-button-surface-color-secondary-focus: #393939; + --token-button-surface-color-secondary-hover: #474747; + --token-button-surface-color-tertiary-active: #002d9c; + --token-button-surface-color-tertiary-focus: #0050e6; + --token-button-surface-color-tertiary-hover: #0050e6; + --token-button-typography-font-size-large: 0.875rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-small: 0.875rem; + --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */ + --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-color-border-action: #0f62fe; + --token-color-border-critical: #ff8389; + --token-color-border-faint: #e0e0e0; + --token-color-border-highlight: #be95ff; + --token-color-border-primary: #c6c6c6; + --token-color-border-strong: #8d8d8d; + --token-color-border-success: #42be65; + --token-color-border-warning: #d2a106; + --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-action-internal: #ffffff; + --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #ffffff; + --token-color-foreground-action-active: #0043ce; + --token-color-foreground-action-hover: #0043ce; + --token-color-foreground-action: #0f62fe; + --token-color-foreground-critical-high-contrast: #750e13; + --token-color-foreground-critical-on-surface: #a2191f; + --token-color-foreground-critical: #da1e28; + --token-color-foreground-disabled: rgba(22, 22, 22, 0.25); + --token-color-foreground-faint: #525252; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-highlight-high-contrast: #491d8b; + --token-color-foreground-highlight-on-surface: #6929c4; + --token-color-foreground-highlight: #8a3ffc; + --token-color-foreground-primary: #161616; + --token-color-foreground-strong: #161616; + --token-color-foreground-success-high-contrast: #044317; + --token-color-foreground-success-on-surface: #0e6027; + --token-color-foreground-success: #198038; + --token-color-foreground-warning-high-contrast: #483700; + --token-color-foreground-warning-on-surface: #684e00; + --token-color-foreground-warning: #8e6a00; + --token-color-hashicorp-brand: #000000; + --token-color-hcp-brand: #000000; + --token-color-page-faint: #ffffff; + --token-color-page-primary: #ffffff; + --token-color-palette-alpha-100: #e0e0e0; + --token-color-palette-alpha-200: #c6c6c6; + --token-color-palette-alpha-300: #8d8d8d; + --token-color-palette-amber-100: #ffd9be; + --token-color-palette-amber-200: #ba4e00; + --token-color-palette-amber-300: #8a3800; + --token-color-palette-amber-400: #5e2900; + --token-color-palette-amber-500: #3e1a00; + --token-color-palette-amber-50: #fff2e8; + --token-color-palette-blue-100: #d0e2ff; + --token-color-palette-blue-200: #0f62fe; + --token-color-palette-blue-300: #0043ce; + --token-color-palette-blue-400: #002d9c; + --token-color-palette-blue-500: #001141; + --token-color-palette-blue-50: #edf5ff; + --token-color-palette-green-100: #a7f0ba; + --token-color-palette-green-200: #24a148; + --token-color-palette-green-300: #198038; + --token-color-palette-green-400: #0e6027; + --token-color-palette-green-500: #044317; + --token-color-palette-green-50: #defbe6; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-neutral-100: #e0e0e0; + --token-color-palette-neutral-200: #c6c6c6; + --token-color-palette-neutral-300: #a8a8a8; + --token-color-palette-neutral-400: #8d8d8d; + --token-color-palette-neutral-500: #525252; + --token-color-palette-neutral-50: #f4f4f4; + --token-color-palette-neutral-600: #393939; + --token-color-palette-neutral-700: #161616; + --token-color-palette-purple-100: #e8daff; + --token-color-palette-purple-200: #a56eff; + --token-color-palette-purple-300: #8a3ffc; + --token-color-palette-purple-400: #6929c4; + --token-color-palette-purple-500: #31135e; + --token-color-palette-purple-50: #f6f2ff; + --token-color-palette-red-100: #ffd7d9; + --token-color-palette-red-200: #da1e28; + --token-color-palette-red-300: #a2191f; + --token-color-palette-red-400: #750e13; + --token-color-palette-red-500: #520408; + --token-color-palette-red-50: #fff1f1; + --token-color-surface-action: #d0e2ff; + --token-color-surface-critical: #ffd7d9; + --token-color-surface-faint: #f4f4f4; + --token-color-surface-high-contrast: #393939; + --token-color-surface-highlight: #e8daff; + --token-color-surface-interactive-active: #c6c6c6; + --token-color-surface-interactive-disabled: #c6c6c6; + --token-color-surface-interactive-hover: #e8e8e8; + --token-color-surface-interactive: #f4f4f4; + --token-color-surface-primary: #f4f4f4; + --token-color-surface-strong: #e0e0e0; + --token-color-surface-success: #a7f0ba; + --token-color-surface-warning: #fcf4d6; + --token-color-vault-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-radar-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ + --token-color-vault-secrets-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-dismiss-button-border-color-active: rgba(0, 0, 0, 0); + --token-dismiss-button-foreground-color-active: #161616; + --token-dismiss-button-foreground-color-default: #161616; + --token-dismiss-button-icon-size: 20px; + --token-dismiss-button-size: 48px; + --token-dismiss-button-surface-color-active: rgba(141, 141, 141, 0.5); + --token-dismiss-button-surface-color-hover: rgba(141, 141, 141, 0.12); + --token-elevation-high-box-shadow: none; + --token-elevation-higher-box-shadow: none; + --token-elevation-inset-box-shadow: none; + --token-elevation-low-box-shadow: none; + --token-elevation-mid-box-shadow: none; + --token-elevation-overlay-box-shadow: none; + --token-focus-ring-action-box-shadow: + inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe; + --token-focus-ring-critical-box-shadow: + inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe; + --token-form-radiocard-border-color-default-checked: #ffc0cb; + --token-form-radiocard-border-color-default: rgba(0, 0, 0, 0); + --token-form-radiocard-border-color-focus: #ffc0cb; + --token-form-radiocard-border-radius: 0px; + --token-icon-tile-border-color-logo: #c6c6c6; + --token-icon-tile-border-color-overlay: #e0e0e0; + --token-icon-tile-surface-color-overlay: #ffffff; + --token-rich-tooltip-bubble-arrow-size: 12px; + --token-rich-tooltip-bubble-border-color: var( + --token-color-palette-alpha-200 + ); + --token-rich-tooltip-bubble-border-radius: 2px; + --token-rich-tooltip-bubble-max-width: 288px; + --token-rich-tooltip-toggle-foreground-color-active: #525252; + --token-rich-tooltip-toggle-foreground-color-default: #525252; + --token-rich-tooltip-toggle-foreground-color-hover: #161616; + --token-rich-tooltip-toggle-gap-horizontal: 8px; + --token-rich-tooltip-toggle-icon-size: 14px; + --token-surface-base-box-shadow: none; + --token-surface-high-box-shadow: none; + --token-surface-higher-box-shadow: none; + --token-surface-inset-box-shadow: none; + --token-surface-low-box-shadow: none; + --token-surface-mid-box-shadow: none; + --token-surface-overlay-box-shadow: none; + --token-tooltip-border-radius: 2px; + --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); + --token-tooltip-caret-height: 6px; + --token-tooltip-caret-width: 12px; + --token-tooltip-max-width: 288px; + --token-tooltip-padding-horizontal: 16px; + --token-tooltip-padding-vertical: 16px; + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-letter-spacing: 0.16px; + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-letter-spacing: 0px; + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-letter-spacing: 0px; + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-letter-spacing: 0px; + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-letter-spacing: 0px; + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-weight-bold: 600; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-semibold: 600; +} + +.hds-theme-dark { + --token-app-footer-focus-color-action-internal: #ffffff; + --token-badge-border-radius: var(--token-border-radius-rounded); + --token-badge-count-padding-horizontal-large: 12px; + --token-badge-count-padding-horizontal-medium: 8px; + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-foreground-color-critical-filled: #ffd7d9; /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: #161616; + --token-badge-foreground-color-critical-outlined: #ffd7d9; + --token-badge-foreground-color-highlight-filled: #e8daff; /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: #161616; + --token-badge-foreground-color-highlight-outlined: #e8daff; + --token-badge-foreground-color-neutral-dark-mode-filled: #161616; + --token-badge-foreground-color-neutral-dark-mode-inverted: #f4f4f4; + --token-badge-foreground-color-neutral-dark-mode-outlined: #161616; + --token-badge-foreground-color-neutral-filled: #f4f4f4; + --token-badge-foreground-color-neutral-inverted: #161616; + --token-badge-foreground-color-neutral-outlined: #f4f4f4; + --token-badge-foreground-color-success-filled: #a7f0ba; /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: #161616; + --token-badge-foreground-color-success-outlined: #a7f0ba; + --token-badge-foreground-color-warning-filled: #ffd9be; + --token-badge-foreground-color-warning-inverted: #161616; + --token-badge-foreground-color-warning-outlined: #ffd9be; + --token-badge-gap-large: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-small: 4px; + --token-badge-height-small: 18px; + --token-badge-padding-horizontal-large: 12px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-small: 8px; + --token-badge-padding-vertical-small: 1px; + --token-badge-surface-color-critical-filled: #a2191f; /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: #ffd7d9; + --token-badge-surface-color-highlight-filled: #6929c4; /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: #be95ff; + --token-badge-surface-color-neutral-dark-mode-filled: #f4f4f4; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: #525252; + --token-badge-surface-color-neutral-filled: #525252; + --token-badge-surface-color-neutral-inverted: #f4f4f4; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-success-filled: #0e6027; /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: #a7f0ba; + --token-badge-surface-color-warning-filled: #8a3800; /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: #ffd9be; + --token-badge-typography-font-size-large: 0.75rem; + --token-badge-typography-font-size-medium: 0.75rem; + --token-badge-typography-font-size-small: 0.75rem; + --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */ + --token-border-radius-large: 0px; + --token-border-radius-medium: 0px; + --token-border-radius-small: 0px; + --token-border-radius-x-small: 0px; + --token-button-border-color-critical-active: rgba(0, 0, 0, 0); + --token-button-border-color-critical-default: rgba(0, 0, 0, 0); + --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-hover: rgba(0, 0, 0, 0); + --token-button-border-color-primary-active: rgba(0, 0, 0, 0); + --token-button-border-color-primary-default: rgba(0, 0, 0, 0); + --token-button-border-color-primary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-hover: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-active: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-default: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0); + --token-button-border-radius: 0px; + --token-button-foreground-color-critical-active: #ffffff; + --token-button-foreground-color-critical-default: #ffffff; + --token-button-foreground-color-critical-focus: #ffffff; + --token-button-foreground-color-critical-hover: #ffffff; + --token-button-foreground-color-disabled: rgba(255, 255, 255, 0.25); + --token-button-foreground-color-primary-active: #ffffff; + --token-button-foreground-color-primary-default: #ffffff; + --token-button-foreground-color-primary-focus: #ffffff; + --token-button-foreground-color-primary-hover: #ffffff; + --token-button-foreground-color-secondary-active: #ffffff; + --token-button-foreground-color-secondary-default: #ffffff; + --token-button-foreground-color-secondary-focus: #ffffff; + --token-button-foreground-color-secondary-hover: #ffffff; + --token-button-foreground-color-tertiary-active: #161616; + --token-button-foreground-color-tertiary-default: #ffffff; + --token-button-foreground-color-tertiary-focus: #161616; + --token-button-foreground-color-tertiary-hover: #161616; + --token-button-gap: 32px; + --token-button-height-large: 48px; + --token-button-height-medium: 40px; + --token-button-height-small: 32px; + --token-button-icon-size-large: 16px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-small: 16px; + --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-surface-color-critical-active: #750e13; + --token-button-surface-color-critical-default: #da1e28; + --token-button-surface-color-critical-focus: #da1e28; + --token-button-surface-color-critical-hover: #b81921; + --token-button-surface-color-disabled: #8d8d8d; + --token-button-surface-color-primary-active: #002d9c; + --token-button-surface-color-primary-default: #0f62fe; + --token-button-surface-color-primary-focus: #0f62fe; + --token-button-surface-color-primary-hover: #0050e6; + --token-button-surface-color-secondary-active: #393939; + --token-button-surface-color-secondary-default: #6f6f6f; + --token-button-surface-color-secondary-focus: #6f6f6f; + --token-button-surface-color-secondary-hover: #5e5e5e; + --token-button-surface-color-tertiary-active: #c6c6c6; + --token-button-surface-color-tertiary-focus: #f4f4f4; + --token-button-surface-color-tertiary-hover: #f4f4f4; + --token-button-typography-font-size-large: 0.875rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-small: 0.875rem; + --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */ + --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-color-border-action: #4589ff; + --token-color-border-critical: #fa4d56; + --token-color-border-faint: #393939; + --token-color-border-highlight: #a56eff; + --token-color-border-primary: #6f6f6f; + --token-color-border-strong: #6f6f6f; + --token-color-border-success: #24a148; + --token-color-border-warning: #b28600; + --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-action-internal: #161616; + --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #161616; + --token-color-foreground-action-active: #a6c8ff; + --token-color-foreground-action-hover: #a6c8ff; + --token-color-foreground-action: #78a9ff; + --token-color-foreground-critical-high-contrast: #ffd7d9; + --token-color-foreground-critical-on-surface: #ffb3b8; + --token-color-foreground-critical: #ff8389; + --token-color-foreground-disabled: rgba(244, 244, 244, 0.25); + --token-color-foreground-faint: #c6c6c6; + --token-color-foreground-high-contrast: #161616; + --token-color-foreground-highlight-high-contrast: #d4bbff; + --token-color-foreground-highlight-on-surface: #d4bbff; + --token-color-foreground-highlight: #be95ff; + --token-color-foreground-primary: #f4f4f4; + --token-color-foreground-strong: #f4f4f4; + --token-color-foreground-success-high-contrast: #a7f0ba; + --token-color-foreground-success-on-surface: #6fdc8c; + --token-color-foreground-success: #42be65; + --token-color-foreground-warning-high-contrast: #fddc69; + --token-color-foreground-warning-on-surface: #f1c21b; + --token-color-foreground-warning: #d2a106; + --token-color-hashicorp-brand: #ffffff; + --token-color-hcp-brand: #ffffff; + --token-color-page-faint: #161616; + --token-color-page-primary: #161616; + --token-color-palette-alpha-100: #393939; + --token-color-palette-alpha-200: #525252; + --token-color-palette-alpha-300: #6f6f6f; + --token-color-palette-amber-100: #ffd9be; + --token-color-palette-amber-200: #ba4e00; + --token-color-palette-amber-300: #8a3800; + --token-color-palette-amber-400: #5e2900; + --token-color-palette-amber-500: #3e1a00; + --token-color-palette-amber-50: #fff2e8; + --token-color-palette-blue-100: #d0e2ff; + --token-color-palette-blue-200: #0f62fe; + --token-color-palette-blue-300: #0043ce; + --token-color-palette-blue-400: #002d9c; + --token-color-palette-blue-500: #001141; + --token-color-palette-blue-50: #edf5ff; + --token-color-palette-green-100: #a7f0ba; + --token-color-palette-green-200: #24a148; + --token-color-palette-green-300: #198038; + --token-color-palette-green-400: #0e6027; + --token-color-palette-green-500: #044317; + --token-color-palette-green-50: #defbe6; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-neutral-100: #e0e0e0; + --token-color-palette-neutral-200: #c6c6c6; + --token-color-palette-neutral-300: #a8a8a8; + --token-color-palette-neutral-400: #8d8d8d; + --token-color-palette-neutral-500: #525252; + --token-color-palette-neutral-50: #f4f4f4; + --token-color-palette-neutral-600: #393939; + --token-color-palette-neutral-700: #161616; + --token-color-palette-purple-100: #e8daff; + --token-color-palette-purple-200: #a56eff; + --token-color-palette-purple-300: #8a3ffc; + --token-color-palette-purple-400: #6929c4; + --token-color-palette-purple-500: #31135e; + --token-color-palette-purple-50: #f6f2ff; + --token-color-palette-red-100: #ffd7d9; + --token-color-palette-red-200: #da1e28; + --token-color-palette-red-300: #a2191f; + --token-color-palette-red-400: #750e13; + --token-color-palette-red-500: #520408; + --token-color-palette-red-50: #fff1f1; + --token-color-surface-action: #0043ce; + --token-color-surface-critical: #a2191f; + --token-color-surface-faint: #262626; + --token-color-surface-high-contrast: #f4f4f4; + --token-color-surface-highlight: #6929c4; + --token-color-surface-interactive-active: #525252; + --token-color-surface-interactive-disabled: #525252; + --token-color-surface-interactive-hover: #333333; + --token-color-surface-interactive: #262626; + --token-color-surface-primary: #262626; + --token-color-surface-strong: #393939; + --token-color-surface-success: #0e6027; + --token-color-surface-warning: #684e00; + --token-color-vault-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-radar-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ + --token-color-vault-secrets-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-dismiss-button-border-color-active: rgba(0, 0, 0, 0); + --token-dismiss-button-foreground-color-active: #f4f4f4; + --token-dismiss-button-foreground-color-default: #f4f4f4; + --token-dismiss-button-icon-size: 20px; + --token-dismiss-button-size: 48px; + --token-dismiss-button-surface-color-active: rgba(141, 141, 141, 0.4); + --token-dismiss-button-surface-color-hover: rgba(141, 141, 141, 0.16); + --token-elevation-high-box-shadow: none; + --token-elevation-higher-box-shadow: none; + --token-elevation-inset-box-shadow: none; + --token-elevation-low-box-shadow: none; + --token-elevation-mid-box-shadow: none; + --token-elevation-overlay-box-shadow: none; + --token-focus-ring-action-box-shadow: + inset 0 0 0 1px #161616, 0 0 0 3px #ffffff; + --token-focus-ring-critical-box-shadow: + inset 0 0 0 1px #161616, 0 0 0 3px #ffffff; + --token-form-radiocard-border-color-default-checked: #ffc0cb; + --token-form-radiocard-border-color-default: rgba(0, 0, 0, 0); + --token-form-radiocard-border-color-focus: #ffc0cb; + --token-form-radiocard-border-radius: 0px; + --token-icon-tile-border-color-logo: #525252; + --token-icon-tile-border-color-overlay: #6f6f6f; + --token-icon-tile-surface-color-overlay: #393939; + --token-rich-tooltip-bubble-arrow-size: 12px; + --token-rich-tooltip-bubble-border-color: var( + --token-color-palette-alpha-200 + ); + --token-rich-tooltip-bubble-border-radius: 2px; + --token-rich-tooltip-bubble-max-width: 288px; + --token-rich-tooltip-toggle-foreground-color-active: #c6c6c6; + --token-rich-tooltip-toggle-foreground-color-default: #c6c6c6; + --token-rich-tooltip-toggle-foreground-color-hover: #f4f4f4; + --token-rich-tooltip-toggle-gap-horizontal: 8px; + --token-rich-tooltip-toggle-icon-size: 14px; + --token-surface-base-box-shadow: none; + --token-surface-high-box-shadow: none; + --token-surface-higher-box-shadow: none; + --token-surface-inset-box-shadow: none; + --token-surface-low-box-shadow: none; + --token-surface-mid-box-shadow: none; + --token-surface-overlay-box-shadow: none; + --token-tooltip-border-radius: 2px; + --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); + --token-tooltip-caret-height: 6px; + --token-tooltip-caret-width: 12px; + --token-tooltip-max-width: 288px; + --token-tooltip-padding-horizontal: 16px; + --token-tooltip-padding-vertical: 16px; + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-letter-spacing: 0.16px; + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-letter-spacing: 0px; + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-letter-spacing: 0px; + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-letter-spacing: 0px; + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-letter-spacing: 0px; + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-weight-bold: 600; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-semibold: 600; +} + +/* + +WHY ARE ALL "COMPUTED" CSS VARIABLES REDECLARED IN EACH THEME SCOPE? + +CSS custom properties (variables) inherit from parent to child, but when a variable is defined +as a calculation or alias of another variable (e.g., `--alias-value: var(--source-value)`, its value is fixed +at the scope where it is declared—using whatever is visible at that level in the DOM (eg. `:root`). + +This block of "common/shared" CSS variables contains a lot of these aliases, so if we only declare these +"computed" variables at `:root` level, their values do not update in themed blocks that override +the "source" variables (e.g., `--source-value`) at a lower scope. +This results in _stale_ variables, where the computed value is always stuck on the `:root` value, +even inside a themed block where the source variable is assigned. + +To make sure every themed block/scoped context (eg. `.hds-theme-light`) correctly computes the aliased values, +we redeclare each "computed" variable in every theme scope where its "source" variable is overridden. + +*/ + +:root, +.hds-theme-default, +.hds-theme-system, +.hds-theme-light, +.hds-theme-dark { + --token-app-header-height: 60px; + --token-app-header-home-link-size: 36px; + --token-app-header-logo-size: 28px; + --token-app-side-nav-body-list-item-border-radius: 5px; + --token-app-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-app-side-nav-body-list-item-height: 36px; + --token-app-side-nav-body-list-item-padding-horizontal: 8px; + --token-app-side-nav-body-list-item-padding-vertical: 4px; + --token-app-side-nav-body-list-item-spacing-vertical: 2px; + --token-app-side-nav-body-list-margin-vertical: 24px; + --token-app-side-nav-color-foreground-faint: var( + --token-color-foreground-faint + ); + --token-app-side-nav-color-foreground-primary: var( + --token-color-foreground-primary + ); + --token-app-side-nav-color-foreground-strong: var( + --token-color-foreground-primary + ); + --token-app-side-nav-color-surface-interactive-active: var( + --token-color-palette-neutral-300 + ); + --token-app-side-nav-color-surface-interactive-hover: var( + --token-color-surface-interactive-hover + ); + --token-app-side-nav-color-surface-primary: var(--token-color-surface-faint); + --token-app-side-nav-header-actions-spacing: 8px; + --token-app-side-nav-header-home-link-logo-size-minimized: 32px; + --token-app-side-nav-header-home-link-logo-size: 48px; + --token-app-side-nav-header-home-link-padding: 4px; + --token-app-side-nav-toggle-button-border-radius: 5px; + --token-app-side-nav-wrapper-border-color: var( + --token-color-palette-neutral-200 + ); + --token-app-side-nav-wrapper-border-width: 1px; + --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-app-side-nav-wrapper-padding-horizontal: 16px; + --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-app-side-nav-wrapper-padding-vertical: 16px; + --token-badge-height-large: 32px; + --token-badge-height-medium: 24px; + --token-badge-icon-size-large: 16px; + --token-badge-icon-size-medium: 16px; + --token-badge-icon-size-small: 12px; + --token-badge-padding-vertical-large: 4px; + --token-badge-padding-vertical-medium: 4px; + --token-badge-surface-color-neutral-dark-mode-outlined: rgba(0, 0, 0, 0); + --token-badge-surface-color-neutral-outlined: rgba(0, 0, 0, 0); + --token-badge-typography-line-height-medium: 1.2308; /** 16px = 1.2308 */ + --token-badge-typography-line-height-small: 1.2308; /** 16px = 1.2308 */ + --token-border-radius-rounded: 1000000000px; + --token-button-border-color-disabled: var(--token-color-border-primary); + --token-button-border-color-tertiary-active: var(--token-color-border-strong); + --token-button-border-color-tertiary-default: rgba(0, 0, 0, 0); + --token-button-border-color-tertiary-focus-external: var( + --token-color-focus-action-external + ); + --token-button-border-color-tertiary-focus-internal: var( + --token-color-focus-action-internal + ); + --token-button-border-color-tertiary-hover: var(--token-color-border-strong); + --token-button-border-width: 1px; + --token-button-focus-border-width: 3px; + --token-button-surface-color-tertiary-default: rgba(0, 0, 0, 0); + --token-color-boundary-border: #fbd7d8; + --token-color-boundary-brand: #f24c53; + --token-color-boundary-foreground: #cf2d32; + --token-color-boundary-gradient-faint-start: #fffafa; /** this is the 'boundary-50' value at 25% opacity on white */ + --token-color-boundary-gradient-faint-stop: #ffecec; + --token-color-boundary-gradient-primary-start: #f97076; + --token-color-boundary-gradient-primary-stop: #db363b; + --token-color-boundary-surface: #ffecec; + --token-color-consul-border: #ffcede; + --token-color-consul-brand: #e03875; + --token-color-consul-foreground: #d01c5b; + --token-color-consul-gradient-faint-start: #fff9fb; /** this is the 'consul-50' value at 25% opacity on white */ + --token-color-consul-gradient-faint-stop: #ffe9f1; + --token-color-consul-gradient-primary-start: #ff99be; + --token-color-consul-gradient-primary-stop: #da306e; + --token-color-consul-surface: #ffe9f1; + --token-color-nomad-border: #bff3dd; + --token-color-nomad-brand: #06d092; + --token-color-nomad-foreground: #008661; + --token-color-nomad-gradient-faint-start: #f3fff9; /** this is the 'nomad-50' value at 25% opacity on white */ + --token-color-nomad-gradient-faint-stop: #d3fdeb; + --token-color-nomad-gradient-primary-start: #bff3dd; + --token-color-nomad-gradient-primary-stop: #60dea9; + --token-color-nomad-surface: #d3fdeb; + --token-color-packer-border: #b4e4ff; + --token-color-packer-brand: #02a8ef; + --token-color-packer-foreground: #007eb4; + --token-color-packer-gradient-faint-start: #f3fcff; /** this is the 'packer-50' value at 25% opacity on white */ + --token-color-packer-gradient-faint-stop: #d4f2ff; + --token-color-packer-gradient-primary-start: #b4e4ff; + --token-color-packer-gradient-primary-stop: #63d0ff; + --token-color-packer-surface: #d4f2ff; + --token-color-terraform-border: #ebdbfc; + --token-color-terraform-brand-on-dark: #a067da; /** this is an alternative brand color meant to be used on dark backgrounds */ + --token-color-terraform-brand: #7b42bc; + --token-color-terraform-foreground: #773cb4; + --token-color-terraform-gradient-faint-start: #fcfaff; /** this is the 'terraform-50' value at 25% opacity on white */ + --token-color-terraform-gradient-faint-stop: #f4ecff; + --token-color-terraform-gradient-primary-start: #bb8deb; + --token-color-terraform-gradient-primary-stop: #844fba; + --token-color-terraform-surface: #f4ecff; + --token-color-vagrant-border: #c7dbfc; + --token-color-vagrant-brand: #1868f2; + --token-color-vagrant-foreground: #1c61d8; + --token-color-vagrant-gradient-faint-start: #f4faff; /** this is the 'vagrant-50' value at 25% opacity on white */ + --token-color-vagrant-gradient-faint-stop: #d6ebff; + --token-color-vagrant-gradient-primary-start: #639cff; + --token-color-vagrant-gradient-primary-stop: #2e71e5; + --token-color-vagrant-surface: #d6ebff; + --token-color-vault-border: #feec7b; + --token-color-vault-brand: #ffcf25; + --token-color-vault-foreground: #9a6f00; + --token-color-vault-gradient-faint-start: #fffdf2; /** this is the 'vault-50' value at 25% opacity on white */ + --token-color-vault-gradient-faint-stop: #fff9cf; + --token-color-vault-gradient-primary-start: #feec7b; + --token-color-vault-gradient-primary-stop: #ffe543; + --token-color-vault-radar-border: #feec7b; + --token-color-vault-radar-brand: #ffcf25; + --token-color-vault-radar-foreground: #9a6f00; + --token-color-vault-radar-gradient-faint-start: #fffdf2; /** this is the 'vault-radar-50' value at 25% opacity on white */ + --token-color-vault-radar-gradient-faint-stop: #fff9cf; + --token-color-vault-radar-gradient-primary-start: #feec7b; + --token-color-vault-radar-gradient-primary-stop: #ffe543; + --token-color-vault-radar-surface: #fff9cf; + --token-color-vault-secrets-border: #feec7b; + --token-color-vault-secrets-brand: #ffcf25; + --token-color-vault-secrets-foreground: #9a6f00; + --token-color-vault-secrets-gradient-faint-start: #fffdf2; /** this is the 'vault-secrets-50' value at 25% opacity on white */ + --token-color-vault-secrets-gradient-faint-stop: #fff9cf; + --token-color-vault-secrets-gradient-primary-start: #feec7b; + --token-color-vault-secrets-gradient-primary-stop: #ffe543; + --token-color-vault-secrets-surface: #fff9cf; + --token-color-vault-surface: #fff9cf; + --token-color-waypoint-border: #cbf1f3; + --token-color-waypoint-brand: #14c6cb; + --token-color-waypoint-foreground: #008196; + --token-color-waypoint-gradient-faint-start: #f6feff; /** this is the 'waypoint-50' value at 25% opacity on white */ + --token-color-waypoint-gradient-faint-stop: #e0fcff; + --token-color-waypoint-gradient-primary-start: #cbf1f3; + --token-color-waypoint-gradient-primary-stop: #62d4dc; + --token-color-waypoint-surface: #e0fcff; + --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'dash' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'dash' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-size: 12px; + --token-form-checkbox-border-radius: 3px; + --token-form-checkbox-border-width: 1px; + --token-form-checkbox-size: 16px; + --token-form-control-base-border-color-default: var( + --token-color-palette-neutral-400 + ); + --token-form-control-base-border-color-hover: var( + --token-color-palette-neutral-500 + ); + --token-form-control-base-foreground-placeholder-color: var( + --token-color-foreground-faint + ); + --token-form-control-base-foreground-value-color: var( + --token-color-foreground-strong + ); + --token-form-control-base-surface-color-default: var( + --token-color-surface-interactive + ); + --token-form-control-base-surface-color-hover: var( + --token-color-surface-interactive-hover + ); + --token-form-control-border-radius: 5px; + --token-form-control-border-width: 1px; + --token-form-control-checked-border-color-default: var( + --token-color-palette-blue-300 + ); + --token-form-control-checked-border-color-hover: var( + --token-color-palette-blue-400 + ); + --token-form-control-checked-foreground-color: var( + --token-color-foreground-high-contrast + ); + --token-form-control-checked-surface-color-default: var( + --token-color-palette-blue-200 + ); + --token-form-control-checked-surface-color-hover: var( + --token-color-palette-blue-300 + ); + --token-form-control-disabled-border-color: var(--token-color-border-primary); + --token-form-control-disabled-foreground-color: var( + --token-color-foreground-disabled + ); + --token-form-control-disabled-surface-color: var( + --token-color-surface-interactive-disabled + ); + --token-form-control-invalid-border-color-default: var( + --token-color-palette-red-300 + ); + --token-form-control-invalid-border-color-hover: var( + --token-color-palette-red-400 + ); + --token-form-control-padding: 7px; /** Notice: we have to take in account the border, so it's 1px less than in Figma. */ + --token-form-control-readonly-border-color: var(--token-color-border-faint); + --token-form-control-readonly-foreground-color: var( + --token-color-foreground-primary + ); + --token-form-control-readonly-surface-color: var( + --token-color-surface-strong + ); + --token-form-error-color: var(--token-color-palette-red-300); + --token-form-error-icon-size: 14px; + --token-form-helper-text-color: var(--token-color-foreground-faint); + --token-form-indicator-optional-color: var(--token-color-foreground-faint); + --token-form-label-color: var(--token-color-foreground-strong); + --token-form-legend-color: var(--token-form-label-color); + --token-form-radio-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'dot' color is hardcoded here! */ + --token-form-radio-background-image-data-url: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e"); /** notice: the 'dot' color is hardcoded here! */ + --token-form-radio-background-image-size: 12px; + --token-form-radio-border-width: 1px; + --token-form-radio-size: 16px; + --token-form-radiocard-border-width: 1px; + --token-form-radiocard-content-padding: 24px; + --token-form-radiocard-control-padding: 8px; + --token-form-radiocard-group-gap: 16px; + --token-form-radiocard-transition-duration: 0.2s; + --token-form-select-background-image-data-url-disabled: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E"); /** notice: the 'caret' color is hardcoded here! */ + --token-form-select-background-image-data-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E"); /** notice: the 'caret' color is hardcoded here! */ + --token-form-select-background-image-position-right-x: var( + --token-form-control-padding + ); + --token-form-select-background-image-position-top-y: 9px; + --token-form-select-background-image-size: 16px; + --token-form-text-input-background-image-data-url-date: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-cancel: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-loading: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color and animation are hardcoded here! */ + --token-form-text-input-background-image-data-url-search: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-time: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-position-x: var( + --token-form-control-padding + ); + --token-form-text-input-background-image-size: 16px; + --token-form-toggle-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-background-image-position-x: 2px; + --token-form-toggle-background-image-size: 12px; + --token-form-toggle-base-surface-color-default: var( + --token-color-surface-strong + ); /** the toggle has a different base surface color, compared to the other controls */ + --token-form-toggle-border-radius: 3px; + --token-form-toggle-border-width: 1px; + --token-form-toggle-height: 16px; + --token-form-toggle-thumb-size: var(--token-form-toggle-height); + --token-form-toggle-transition-duration: 0.2s; + --token-form-toggle-transition-timing-function: cubic-bezier( + 0.68, + -0.2, + 0.265, + 1.15 + ); + --token-form-toggle-width: 32px; + --token-pagination-child-spacing-horizontal: 20px; + --token-pagination-child-spacing-vertical: 8px; + --token-pagination-nav-control-focus-inset: 4px; + --token-pagination-nav-control-height: 36px; + --token-pagination-nav-control-icon-spacing: 6px; + --token-pagination-nav-control-padding-horizontal: 12px; + --token-pagination-nav-indicator-height: 2px; + --token-pagination-nav-indicator-spacing: 6px; + --token-tabs-divider-height: 1px; + --token-tabs-indicator-height: 3px; + --token-tabs-indicator-transition-duration: 0.6s; + --token-tabs-indicator-transition-function: cubic-bezier(0.5, 1, 0.89, 1); + --token-tabs-tab-border-radius: 5px; + --token-tabs-tab-focus-inset: 6px; + --token-tabs-tab-gutter: 6px; + --token-tabs-tab-height-large: 48px; + --token-tabs-tab-height-medium: 36px; + --token-tabs-tab-padding-horizontal-large: 20px; + --token-tabs-tab-padding-horizontal-medium: 12px; + --token-tabs-tab-padding-vertical: 0px; + --token-tooltip-focus-offset: -2px; + --token-tooltip-transition-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); +} diff --git a/packages/tokens/dist/products/css/themed-tokens/with-css-selectors/tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-css-selectors/tokens.css new file mode 100644 index 00000000000..7617d5d2a96 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-css-selectors/tokens.css @@ -0,0 +1,2004 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-app-footer-focus-color-action-internal: #0f62fe; + --token-badge-border-radius: var(--token-border-radius-rounded); + --token-badge-count-padding-horizontal-large: 12px; + --token-badge-count-padding-horizontal-medium: 8px; + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-foreground-color-critical-filled: #a2191f; /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: #ffffff; + --token-badge-foreground-color-critical-outlined: #a2191f; + --token-badge-foreground-color-highlight-filled: #6929c4; /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: #ffffff; + --token-badge-foreground-color-highlight-outlined: #6929c4; + --token-badge-foreground-color-neutral-dark-mode-filled: #ffffff; + --token-badge-foreground-color-neutral-dark-mode-inverted: #161616; + --token-badge-foreground-color-neutral-dark-mode-outlined: #ffffff; + --token-badge-foreground-color-neutral-filled: #161616; + --token-badge-foreground-color-neutral-inverted: #e0e0e0; + --token-badge-foreground-color-neutral-outlined: #161616; + --token-badge-foreground-color-success-filled: #0e6027; /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: #ffffff; + --token-badge-foreground-color-success-outlined: #0e6027; + --token-badge-foreground-color-warning-filled: #8a3800; + --token-badge-foreground-color-warning-inverted: #ffffff; + --token-badge-foreground-color-warning-outlined: #8a3800; + --token-badge-gap-large: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-small: 4px; + --token-badge-height-small: 18px; + --token-badge-padding-horizontal-large: 12px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-small: 8px; + --token-badge-padding-vertical-small: 1px; + --token-badge-surface-color-critical-filled: #ffd7d9; /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: #a2191f; + --token-badge-surface-color-highlight-filled: #e8daff; /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: #6929c4; + --token-badge-surface-color-neutral-dark-mode-filled: #393939; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: #e0e0e0; + --token-badge-surface-color-neutral-filled: #e0e0e0; + --token-badge-surface-color-neutral-inverted: #393939; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-success-filled: #a7f0ba; /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: #0e6027; + --token-badge-surface-color-warning-filled: #ffd9be; /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: #8a3800; + --token-badge-typography-font-size-large: 0.75rem; + --token-badge-typography-font-size-medium: 0.75rem; + --token-badge-typography-font-size-small: 0.75rem; + --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */ + --token-border-radius-large: 0px; + --token-border-radius-medium: 0px; + --token-border-radius-small: 0px; + --token-border-radius-x-small: 0px; + --token-button-border-color-critical-active: rgba(0, 0, 0, 0); + --token-button-border-color-critical-default: rgba(0, 0, 0, 0); + --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-hover: rgba(0, 0, 0, 0); + --token-button-border-color-primary-active: rgba(0, 0, 0, 0); + --token-button-border-color-primary-default: rgba(0, 0, 0, 0); + --token-button-border-color-primary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-hover: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-active: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-default: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0); + --token-button-border-radius: 0px; + --token-button-foreground-color-critical-active: #ffffff; + --token-button-foreground-color-critical-default: #ffffff; + --token-button-foreground-color-critical-focus: #ffffff; + --token-button-foreground-color-critical-hover: #ffffff; + --token-button-foreground-color-disabled: #8d8d8d; + --token-button-foreground-color-primary-active: #ffffff; + --token-button-foreground-color-primary-default: #ffffff; + --token-button-foreground-color-primary-focus: #ffffff; + --token-button-foreground-color-primary-hover: #ffffff; + --token-button-foreground-color-secondary-active: #ffffff; + --token-button-foreground-color-secondary-default: #ffffff; + --token-button-foreground-color-secondary-focus: #ffffff; + --token-button-foreground-color-secondary-hover: #ffffff; + --token-button-foreground-color-tertiary-active: #ffffff; + --token-button-foreground-color-tertiary-default: #0f62fe; + --token-button-foreground-color-tertiary-focus: #ffffff; + --token-button-foreground-color-tertiary-hover: #ffffff; + --token-button-gap: 32px; + --token-button-height-large: 48px; + --token-button-height-medium: 40px; + --token-button-height-small: 32px; + --token-button-icon-size-large: 16px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-small: 16px; + --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-surface-color-critical-active: #750e13; + --token-button-surface-color-critical-default: #da1e28; + --token-button-surface-color-critical-focus: #da1e28; + --token-button-surface-color-critical-hover: #b81921; + --token-button-surface-color-disabled: #c6c6c6; + --token-button-surface-color-primary-active: #002d9c; + --token-button-surface-color-primary-default: #0f62fe; + --token-button-surface-color-primary-focus: #0f62fe; + --token-button-surface-color-primary-hover: #0050e6; + --token-button-surface-color-secondary-active: #6f6f6f; + --token-button-surface-color-secondary-default: #393939; + --token-button-surface-color-secondary-focus: #393939; + --token-button-surface-color-secondary-hover: #474747; + --token-button-surface-color-tertiary-active: #002d9c; + --token-button-surface-color-tertiary-focus: #0050e6; + --token-button-surface-color-tertiary-hover: #0050e6; + --token-button-typography-font-size-large: 0.875rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-small: 0.875rem; + --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */ + --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-color-border-action: #0f62fe; + --token-color-border-critical: #ff8389; + --token-color-border-faint: #e0e0e0; + --token-color-border-highlight: #be95ff; + --token-color-border-primary: #c6c6c6; + --token-color-border-strong: #8d8d8d; + --token-color-border-success: #42be65; + --token-color-border-warning: #d2a106; + --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-action-internal: #ffffff; + --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #ffffff; + --token-color-foreground-action-active: #0043ce; + --token-color-foreground-action-hover: #0043ce; + --token-color-foreground-action: #0f62fe; + --token-color-foreground-critical-high-contrast: #750e13; + --token-color-foreground-critical-on-surface: #a2191f; + --token-color-foreground-critical: #da1e28; + --token-color-foreground-disabled: rgba(22, 22, 22, 0.25); + --token-color-foreground-faint: #525252; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-highlight-high-contrast: #491d8b; + --token-color-foreground-highlight-on-surface: #6929c4; + --token-color-foreground-highlight: #8a3ffc; + --token-color-foreground-primary: #161616; + --token-color-foreground-strong: #161616; + --token-color-foreground-success-high-contrast: #044317; + --token-color-foreground-success-on-surface: #0e6027; + --token-color-foreground-success: #198038; + --token-color-foreground-warning-high-contrast: #483700; + --token-color-foreground-warning-on-surface: #684e00; + --token-color-foreground-warning: #8e6a00; + --token-color-hashicorp-brand: #000000; + --token-color-hcp-brand: #000000; + --token-color-page-faint: #ffffff; + --token-color-page-primary: #ffffff; + --token-color-palette-alpha-100: #e0e0e0; + --token-color-palette-alpha-200: #c6c6c6; + --token-color-palette-alpha-300: #8d8d8d; + --token-color-palette-amber-100: #ffd9be; + --token-color-palette-amber-200: #ba4e00; + --token-color-palette-amber-300: #8a3800; + --token-color-palette-amber-400: #5e2900; + --token-color-palette-amber-500: #3e1a00; + --token-color-palette-amber-50: #fff2e8; + --token-color-palette-blue-100: #d0e2ff; + --token-color-palette-blue-200: #0f62fe; + --token-color-palette-blue-300: #0043ce; + --token-color-palette-blue-400: #002d9c; + --token-color-palette-blue-500: #001141; + --token-color-palette-blue-50: #edf5ff; + --token-color-palette-green-100: #a7f0ba; + --token-color-palette-green-200: #24a148; + --token-color-palette-green-300: #198038; + --token-color-palette-green-400: #0e6027; + --token-color-palette-green-500: #044317; + --token-color-palette-green-50: #defbe6; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-neutral-100: #e0e0e0; + --token-color-palette-neutral-200: #c6c6c6; + --token-color-palette-neutral-300: #a8a8a8; + --token-color-palette-neutral-400: #8d8d8d; + --token-color-palette-neutral-500: #525252; + --token-color-palette-neutral-50: #f4f4f4; + --token-color-palette-neutral-600: #393939; + --token-color-palette-neutral-700: #161616; + --token-color-palette-purple-100: #e8daff; + --token-color-palette-purple-200: #a56eff; + --token-color-palette-purple-300: #8a3ffc; + --token-color-palette-purple-400: #6929c4; + --token-color-palette-purple-500: #31135e; + --token-color-palette-purple-50: #f6f2ff; + --token-color-palette-red-100: #ffd7d9; + --token-color-palette-red-200: #da1e28; + --token-color-palette-red-300: #a2191f; + --token-color-palette-red-400: #750e13; + --token-color-palette-red-500: #520408; + --token-color-palette-red-50: #fff1f1; + --token-color-surface-action: #d0e2ff; + --token-color-surface-critical: #ffd7d9; + --token-color-surface-faint: #f4f4f4; + --token-color-surface-high-contrast: #393939; + --token-color-surface-highlight: #e8daff; + --token-color-surface-interactive-active: #c6c6c6; + --token-color-surface-interactive-disabled: #c6c6c6; + --token-color-surface-interactive-hover: #e8e8e8; + --token-color-surface-interactive: #f4f4f4; + --token-color-surface-primary: #f4f4f4; + --token-color-surface-strong: #e0e0e0; + --token-color-surface-success: #a7f0ba; + --token-color-surface-warning: #fcf4d6; + --token-color-vault-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-radar-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ + --token-color-vault-secrets-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-dismiss-button-border-color-active: rgba(0, 0, 0, 0); + --token-dismiss-button-foreground-color-active: #161616; + --token-dismiss-button-foreground-color-default: #161616; + --token-dismiss-button-icon-size: 20px; + --token-dismiss-button-size: 48px; + --token-dismiss-button-surface-color-active: rgba(141, 141, 141, 0.5); + --token-dismiss-button-surface-color-hover: rgba(141, 141, 141, 0.12); + --token-elevation-high-box-shadow: none; + --token-elevation-higher-box-shadow: none; + --token-elevation-inset-box-shadow: none; + --token-elevation-low-box-shadow: none; + --token-elevation-mid-box-shadow: none; + --token-elevation-overlay-box-shadow: none; + --token-focus-ring-action-box-shadow: + inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe; + --token-focus-ring-critical-box-shadow: + inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe; + --token-form-radiocard-border-color-default-checked: #ffc0cb; + --token-form-radiocard-border-color-default: rgba(0, 0, 0, 0); + --token-form-radiocard-border-color-focus: #ffc0cb; + --token-form-radiocard-border-radius: 0px; + --token-icon-tile-border-color-logo: #c6c6c6; + --token-icon-tile-border-color-overlay: #e0e0e0; + --token-icon-tile-surface-color-overlay: #ffffff; + --token-rich-tooltip-bubble-arrow-size: 12px; + --token-rich-tooltip-bubble-border-color: var( + --token-color-palette-alpha-200 + ); + --token-rich-tooltip-bubble-border-radius: 2px; + --token-rich-tooltip-bubble-max-width: 288px; + --token-rich-tooltip-toggle-foreground-color-active: #525252; + --token-rich-tooltip-toggle-foreground-color-default: #525252; + --token-rich-tooltip-toggle-foreground-color-hover: #161616; + --token-rich-tooltip-toggle-gap-horizontal: 8px; + --token-rich-tooltip-toggle-icon-size: 14px; + --token-surface-base-box-shadow: none; + --token-surface-high-box-shadow: none; + --token-surface-higher-box-shadow: none; + --token-surface-inset-box-shadow: none; + --token-surface-low-box-shadow: none; + --token-surface-mid-box-shadow: none; + --token-surface-overlay-box-shadow: none; + --token-tooltip-border-radius: 2px; + --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); + --token-tooltip-caret-height: 6px; + --token-tooltip-caret-width: 12px; + --token-tooltip-max-width: 288px; + --token-tooltip-padding-horizontal: 16px; + --token-tooltip-padding-vertical: 16px; + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-letter-spacing: 0.16px; + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-letter-spacing: 0px; + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-letter-spacing: 0px; + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-letter-spacing: 0px; + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-letter-spacing: 0px; + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-weight-bold: 600; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-semibold: 600; +} + +@media (prefers-color-scheme: light) { + .hds-theme-system { + --token-app-footer-focus-color-action-internal: #0f62fe; + --token-badge-border-radius: var(--token-border-radius-rounded); + --token-badge-count-padding-horizontal-large: 12px; + --token-badge-count-padding-horizontal-medium: 8px; + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-foreground-color-critical-filled: #a2191f; /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: #ffffff; + --token-badge-foreground-color-critical-outlined: #a2191f; + --token-badge-foreground-color-highlight-filled: #6929c4; /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: #ffffff; + --token-badge-foreground-color-highlight-outlined: #6929c4; + --token-badge-foreground-color-neutral-dark-mode-filled: #ffffff; + --token-badge-foreground-color-neutral-dark-mode-inverted: #161616; + --token-badge-foreground-color-neutral-dark-mode-outlined: #ffffff; + --token-badge-foreground-color-neutral-filled: #161616; + --token-badge-foreground-color-neutral-inverted: #e0e0e0; + --token-badge-foreground-color-neutral-outlined: #161616; + --token-badge-foreground-color-success-filled: #0e6027; /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: #ffffff; + --token-badge-foreground-color-success-outlined: #0e6027; + --token-badge-foreground-color-warning-filled: #8a3800; + --token-badge-foreground-color-warning-inverted: #ffffff; + --token-badge-foreground-color-warning-outlined: #8a3800; + --token-badge-gap-large: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-small: 4px; + --token-badge-height-small: 18px; + --token-badge-padding-horizontal-large: 12px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-small: 8px; + --token-badge-padding-vertical-small: 1px; + --token-badge-surface-color-critical-filled: #ffd7d9; /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: #a2191f; + --token-badge-surface-color-highlight-filled: #e8daff; /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: #6929c4; + --token-badge-surface-color-neutral-dark-mode-filled: #393939; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: #e0e0e0; + --token-badge-surface-color-neutral-filled: #e0e0e0; + --token-badge-surface-color-neutral-inverted: #393939; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-success-filled: #a7f0ba; /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: #0e6027; + --token-badge-surface-color-warning-filled: #ffd9be; /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: #8a3800; + --token-badge-typography-font-size-large: 0.75rem; + --token-badge-typography-font-size-medium: 0.75rem; + --token-badge-typography-font-size-small: 0.75rem; + --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */ + --token-border-radius-large: 0px; + --token-border-radius-medium: 0px; + --token-border-radius-small: 0px; + --token-border-radius-x-small: 0px; + --token-button-border-color-critical-active: rgba(0, 0, 0, 0); + --token-button-border-color-critical-default: rgba(0, 0, 0, 0); + --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-hover: rgba(0, 0, 0, 0); + --token-button-border-color-primary-active: rgba(0, 0, 0, 0); + --token-button-border-color-primary-default: rgba(0, 0, 0, 0); + --token-button-border-color-primary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-hover: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-active: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-default: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0); + --token-button-border-radius: 0px; + --token-button-foreground-color-critical-active: #ffffff; + --token-button-foreground-color-critical-default: #ffffff; + --token-button-foreground-color-critical-focus: #ffffff; + --token-button-foreground-color-critical-hover: #ffffff; + --token-button-foreground-color-disabled: #8d8d8d; + --token-button-foreground-color-primary-active: #ffffff; + --token-button-foreground-color-primary-default: #ffffff; + --token-button-foreground-color-primary-focus: #ffffff; + --token-button-foreground-color-primary-hover: #ffffff; + --token-button-foreground-color-secondary-active: #ffffff; + --token-button-foreground-color-secondary-default: #ffffff; + --token-button-foreground-color-secondary-focus: #ffffff; + --token-button-foreground-color-secondary-hover: #ffffff; + --token-button-foreground-color-tertiary-active: #ffffff; + --token-button-foreground-color-tertiary-default: #0f62fe; + --token-button-foreground-color-tertiary-focus: #ffffff; + --token-button-foreground-color-tertiary-hover: #ffffff; + --token-button-gap: 32px; + --token-button-height-large: 48px; + --token-button-height-medium: 40px; + --token-button-height-small: 32px; + --token-button-icon-size-large: 16px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-small: 16px; + --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-surface-color-critical-active: #750e13; + --token-button-surface-color-critical-default: #da1e28; + --token-button-surface-color-critical-focus: #da1e28; + --token-button-surface-color-critical-hover: #b81921; + --token-button-surface-color-disabled: #c6c6c6; + --token-button-surface-color-primary-active: #002d9c; + --token-button-surface-color-primary-default: #0f62fe; + --token-button-surface-color-primary-focus: #0f62fe; + --token-button-surface-color-primary-hover: #0050e6; + --token-button-surface-color-secondary-active: #6f6f6f; + --token-button-surface-color-secondary-default: #393939; + --token-button-surface-color-secondary-focus: #393939; + --token-button-surface-color-secondary-hover: #474747; + --token-button-surface-color-tertiary-active: #002d9c; + --token-button-surface-color-tertiary-focus: #0050e6; + --token-button-surface-color-tertiary-hover: #0050e6; + --token-button-typography-font-size-large: 0.875rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-small: 0.875rem; + --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */ + --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-color-border-action: #0f62fe; + --token-color-border-critical: #ff8389; + --token-color-border-faint: #e0e0e0; + --token-color-border-highlight: #be95ff; + --token-color-border-primary: #c6c6c6; + --token-color-border-strong: #8d8d8d; + --token-color-border-success: #42be65; + --token-color-border-warning: #d2a106; + --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-action-internal: #ffffff; + --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #ffffff; + --token-color-foreground-action-active: #0043ce; + --token-color-foreground-action-hover: #0043ce; + --token-color-foreground-action: #0f62fe; + --token-color-foreground-critical-high-contrast: #750e13; + --token-color-foreground-critical-on-surface: #a2191f; + --token-color-foreground-critical: #da1e28; + --token-color-foreground-disabled: rgba(22, 22, 22, 0.25); + --token-color-foreground-faint: #525252; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-highlight-high-contrast: #491d8b; + --token-color-foreground-highlight-on-surface: #6929c4; + --token-color-foreground-highlight: #8a3ffc; + --token-color-foreground-primary: #161616; + --token-color-foreground-strong: #161616; + --token-color-foreground-success-high-contrast: #044317; + --token-color-foreground-success-on-surface: #0e6027; + --token-color-foreground-success: #198038; + --token-color-foreground-warning-high-contrast: #483700; + --token-color-foreground-warning-on-surface: #684e00; + --token-color-foreground-warning: #8e6a00; + --token-color-hashicorp-brand: #000000; + --token-color-hcp-brand: #000000; + --token-color-page-faint: #ffffff; + --token-color-page-primary: #ffffff; + --token-color-palette-alpha-100: #e0e0e0; + --token-color-palette-alpha-200: #c6c6c6; + --token-color-palette-alpha-300: #8d8d8d; + --token-color-palette-amber-100: #ffd9be; + --token-color-palette-amber-200: #ba4e00; + --token-color-palette-amber-300: #8a3800; + --token-color-palette-amber-400: #5e2900; + --token-color-palette-amber-500: #3e1a00; + --token-color-palette-amber-50: #fff2e8; + --token-color-palette-blue-100: #d0e2ff; + --token-color-palette-blue-200: #0f62fe; + --token-color-palette-blue-300: #0043ce; + --token-color-palette-blue-400: #002d9c; + --token-color-palette-blue-500: #001141; + --token-color-palette-blue-50: #edf5ff; + --token-color-palette-green-100: #a7f0ba; + --token-color-palette-green-200: #24a148; + --token-color-palette-green-300: #198038; + --token-color-palette-green-400: #0e6027; + --token-color-palette-green-500: #044317; + --token-color-palette-green-50: #defbe6; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-neutral-100: #e0e0e0; + --token-color-palette-neutral-200: #c6c6c6; + --token-color-palette-neutral-300: #a8a8a8; + --token-color-palette-neutral-400: #8d8d8d; + --token-color-palette-neutral-500: #525252; + --token-color-palette-neutral-50: #f4f4f4; + --token-color-palette-neutral-600: #393939; + --token-color-palette-neutral-700: #161616; + --token-color-palette-purple-100: #e8daff; + --token-color-palette-purple-200: #a56eff; + --token-color-palette-purple-300: #8a3ffc; + --token-color-palette-purple-400: #6929c4; + --token-color-palette-purple-500: #31135e; + --token-color-palette-purple-50: #f6f2ff; + --token-color-palette-red-100: #ffd7d9; + --token-color-palette-red-200: #da1e28; + --token-color-palette-red-300: #a2191f; + --token-color-palette-red-400: #750e13; + --token-color-palette-red-500: #520408; + --token-color-palette-red-50: #fff1f1; + --token-color-surface-action: #d0e2ff; + --token-color-surface-critical: #ffd7d9; + --token-color-surface-faint: #f4f4f4; + --token-color-surface-high-contrast: #393939; + --token-color-surface-highlight: #e8daff; + --token-color-surface-interactive-active: #c6c6c6; + --token-color-surface-interactive-disabled: #c6c6c6; + --token-color-surface-interactive-hover: #e8e8e8; + --token-color-surface-interactive: #f4f4f4; + --token-color-surface-primary: #f4f4f4; + --token-color-surface-strong: #e0e0e0; + --token-color-surface-success: #a7f0ba; + --token-color-surface-warning: #fcf4d6; + --token-color-vault-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-radar-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ + --token-color-vault-secrets-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-dismiss-button-border-color-active: rgba(0, 0, 0, 0); + --token-dismiss-button-foreground-color-active: #161616; + --token-dismiss-button-foreground-color-default: #161616; + --token-dismiss-button-icon-size: 20px; + --token-dismiss-button-size: 48px; + --token-dismiss-button-surface-color-active: rgba(141, 141, 141, 0.5); + --token-dismiss-button-surface-color-hover: rgba(141, 141, 141, 0.12); + --token-elevation-high-box-shadow: none; + --token-elevation-higher-box-shadow: none; + --token-elevation-inset-box-shadow: none; + --token-elevation-low-box-shadow: none; + --token-elevation-mid-box-shadow: none; + --token-elevation-overlay-box-shadow: none; + --token-focus-ring-action-box-shadow: + inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe; + --token-focus-ring-critical-box-shadow: + inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe; + --token-form-radiocard-border-color-default-checked: #ffc0cb; + --token-form-radiocard-border-color-default: rgba(0, 0, 0, 0); + --token-form-radiocard-border-color-focus: #ffc0cb; + --token-form-radiocard-border-radius: 0px; + --token-icon-tile-border-color-logo: #c6c6c6; + --token-icon-tile-border-color-overlay: #e0e0e0; + --token-icon-tile-surface-color-overlay: #ffffff; + --token-rich-tooltip-bubble-arrow-size: 12px; + --token-rich-tooltip-bubble-border-color: var( + --token-color-palette-alpha-200 + ); + --token-rich-tooltip-bubble-border-radius: 2px; + --token-rich-tooltip-bubble-max-width: 288px; + --token-rich-tooltip-toggle-foreground-color-active: #525252; + --token-rich-tooltip-toggle-foreground-color-default: #525252; + --token-rich-tooltip-toggle-foreground-color-hover: #161616; + --token-rich-tooltip-toggle-gap-horizontal: 8px; + --token-rich-tooltip-toggle-icon-size: 14px; + --token-surface-base-box-shadow: none; + --token-surface-high-box-shadow: none; + --token-surface-higher-box-shadow: none; + --token-surface-inset-box-shadow: none; + --token-surface-low-box-shadow: none; + --token-surface-mid-box-shadow: none; + --token-surface-overlay-box-shadow: none; + --token-tooltip-border-radius: 2px; + --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); + --token-tooltip-caret-height: 6px; + --token-tooltip-caret-width: 12px; + --token-tooltip-max-width: 288px; + --token-tooltip-padding-horizontal: 16px; + --token-tooltip-padding-vertical: 16px; + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-letter-spacing: 0.16px; + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-letter-spacing: 0px; + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-letter-spacing: 0px; + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-letter-spacing: 0px; + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-letter-spacing: 0px; + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-weight-bold: 600; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-semibold: 600; + } +} + +@media (prefers-color-scheme: dark) { + .hds-theme-system { + --token-app-footer-focus-color-action-internal: #ffffff; + --token-badge-border-radius: var(--token-border-radius-rounded); + --token-badge-count-padding-horizontal-large: 12px; + --token-badge-count-padding-horizontal-medium: 8px; + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-foreground-color-critical-filled: #ffd7d9; /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: #161616; + --token-badge-foreground-color-critical-outlined: #ffd7d9; + --token-badge-foreground-color-highlight-filled: #e8daff; /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: #161616; + --token-badge-foreground-color-highlight-outlined: #e8daff; + --token-badge-foreground-color-neutral-dark-mode-filled: #161616; + --token-badge-foreground-color-neutral-dark-mode-inverted: #f4f4f4; + --token-badge-foreground-color-neutral-dark-mode-outlined: #161616; + --token-badge-foreground-color-neutral-filled: #f4f4f4; + --token-badge-foreground-color-neutral-inverted: #161616; + --token-badge-foreground-color-neutral-outlined: #f4f4f4; + --token-badge-foreground-color-success-filled: #a7f0ba; /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: #161616; + --token-badge-foreground-color-success-outlined: #a7f0ba; + --token-badge-foreground-color-warning-filled: #ffd9be; + --token-badge-foreground-color-warning-inverted: #161616; + --token-badge-foreground-color-warning-outlined: #ffd9be; + --token-badge-gap-large: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-small: 4px; + --token-badge-height-small: 18px; + --token-badge-padding-horizontal-large: 12px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-small: 8px; + --token-badge-padding-vertical-small: 1px; + --token-badge-surface-color-critical-filled: #a2191f; /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: #ffd7d9; + --token-badge-surface-color-highlight-filled: #6929c4; /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: #be95ff; + --token-badge-surface-color-neutral-dark-mode-filled: #f4f4f4; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: #525252; + --token-badge-surface-color-neutral-filled: #525252; + --token-badge-surface-color-neutral-inverted: #f4f4f4; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-success-filled: #0e6027; /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: #a7f0ba; + --token-badge-surface-color-warning-filled: #8a3800; /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: #ffd9be; + --token-badge-typography-font-size-large: 0.75rem; + --token-badge-typography-font-size-medium: 0.75rem; + --token-badge-typography-font-size-small: 0.75rem; + --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */ + --token-border-radius-large: 0px; + --token-border-radius-medium: 0px; + --token-border-radius-small: 0px; + --token-border-radius-x-small: 0px; + --token-button-border-color-critical-active: rgba(0, 0, 0, 0); + --token-button-border-color-critical-default: rgba(0, 0, 0, 0); + --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-hover: rgba(0, 0, 0, 0); + --token-button-border-color-primary-active: rgba(0, 0, 0, 0); + --token-button-border-color-primary-default: rgba(0, 0, 0, 0); + --token-button-border-color-primary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-hover: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-active: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-default: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0); + --token-button-border-radius: 0px; + --token-button-foreground-color-critical-active: #ffffff; + --token-button-foreground-color-critical-default: #ffffff; + --token-button-foreground-color-critical-focus: #ffffff; + --token-button-foreground-color-critical-hover: #ffffff; + --token-button-foreground-color-disabled: rgba(255, 255, 255, 0.25); + --token-button-foreground-color-primary-active: #ffffff; + --token-button-foreground-color-primary-default: #ffffff; + --token-button-foreground-color-primary-focus: #ffffff; + --token-button-foreground-color-primary-hover: #ffffff; + --token-button-foreground-color-secondary-active: #ffffff; + --token-button-foreground-color-secondary-default: #ffffff; + --token-button-foreground-color-secondary-focus: #ffffff; + --token-button-foreground-color-secondary-hover: #ffffff; + --token-button-foreground-color-tertiary-active: #161616; + --token-button-foreground-color-tertiary-default: #ffffff; + --token-button-foreground-color-tertiary-focus: #161616; + --token-button-foreground-color-tertiary-hover: #161616; + --token-button-gap: 32px; + --token-button-height-large: 48px; + --token-button-height-medium: 40px; + --token-button-height-small: 32px; + --token-button-icon-size-large: 16px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-small: 16px; + --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-surface-color-critical-active: #750e13; + --token-button-surface-color-critical-default: #da1e28; + --token-button-surface-color-critical-focus: #da1e28; + --token-button-surface-color-critical-hover: #b81921; + --token-button-surface-color-disabled: #8d8d8d; + --token-button-surface-color-primary-active: #002d9c; + --token-button-surface-color-primary-default: #0f62fe; + --token-button-surface-color-primary-focus: #0f62fe; + --token-button-surface-color-primary-hover: #0050e6; + --token-button-surface-color-secondary-active: #393939; + --token-button-surface-color-secondary-default: #6f6f6f; + --token-button-surface-color-secondary-focus: #6f6f6f; + --token-button-surface-color-secondary-hover: #5e5e5e; + --token-button-surface-color-tertiary-active: #c6c6c6; + --token-button-surface-color-tertiary-focus: #f4f4f4; + --token-button-surface-color-tertiary-hover: #f4f4f4; + --token-button-typography-font-size-large: 0.875rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-small: 0.875rem; + --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */ + --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-color-border-action: #4589ff; + --token-color-border-critical: #fa4d56; + --token-color-border-faint: #393939; + --token-color-border-highlight: #a56eff; + --token-color-border-primary: #6f6f6f; + --token-color-border-strong: #6f6f6f; + --token-color-border-success: #24a148; + --token-color-border-warning: #b28600; + --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-action-internal: #161616; + --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #161616; + --token-color-foreground-action-active: #a6c8ff; + --token-color-foreground-action-hover: #a6c8ff; + --token-color-foreground-action: #78a9ff; + --token-color-foreground-critical-high-contrast: #ffd7d9; + --token-color-foreground-critical-on-surface: #ffb3b8; + --token-color-foreground-critical: #ff8389; + --token-color-foreground-disabled: rgba(244, 244, 244, 0.25); + --token-color-foreground-faint: #c6c6c6; + --token-color-foreground-high-contrast: #161616; + --token-color-foreground-highlight-high-contrast: #d4bbff; + --token-color-foreground-highlight-on-surface: #d4bbff; + --token-color-foreground-highlight: #be95ff; + --token-color-foreground-primary: #f4f4f4; + --token-color-foreground-strong: #f4f4f4; + --token-color-foreground-success-high-contrast: #a7f0ba; + --token-color-foreground-success-on-surface: #6fdc8c; + --token-color-foreground-success: #42be65; + --token-color-foreground-warning-high-contrast: #fddc69; + --token-color-foreground-warning-on-surface: #f1c21b; + --token-color-foreground-warning: #d2a106; + --token-color-hashicorp-brand: #ffffff; + --token-color-hcp-brand: #ffffff; + --token-color-page-faint: #161616; + --token-color-page-primary: #161616; + --token-color-palette-alpha-100: #393939; + --token-color-palette-alpha-200: #525252; + --token-color-palette-alpha-300: #6f6f6f; + --token-color-palette-amber-100: #ffd9be; + --token-color-palette-amber-200: #ba4e00; + --token-color-palette-amber-300: #8a3800; + --token-color-palette-amber-400: #5e2900; + --token-color-palette-amber-500: #3e1a00; + --token-color-palette-amber-50: #fff2e8; + --token-color-palette-blue-100: #d0e2ff; + --token-color-palette-blue-200: #0f62fe; + --token-color-palette-blue-300: #0043ce; + --token-color-palette-blue-400: #002d9c; + --token-color-palette-blue-500: #001141; + --token-color-palette-blue-50: #edf5ff; + --token-color-palette-green-100: #a7f0ba; + --token-color-palette-green-200: #24a148; + --token-color-palette-green-300: #198038; + --token-color-palette-green-400: #0e6027; + --token-color-palette-green-500: #044317; + --token-color-palette-green-50: #defbe6; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-neutral-100: #e0e0e0; + --token-color-palette-neutral-200: #c6c6c6; + --token-color-palette-neutral-300: #a8a8a8; + --token-color-palette-neutral-400: #8d8d8d; + --token-color-palette-neutral-500: #525252; + --token-color-palette-neutral-50: #f4f4f4; + --token-color-palette-neutral-600: #393939; + --token-color-palette-neutral-700: #161616; + --token-color-palette-purple-100: #e8daff; + --token-color-palette-purple-200: #a56eff; + --token-color-palette-purple-300: #8a3ffc; + --token-color-palette-purple-400: #6929c4; + --token-color-palette-purple-500: #31135e; + --token-color-palette-purple-50: #f6f2ff; + --token-color-palette-red-100: #ffd7d9; + --token-color-palette-red-200: #da1e28; + --token-color-palette-red-300: #a2191f; + --token-color-palette-red-400: #750e13; + --token-color-palette-red-500: #520408; + --token-color-palette-red-50: #fff1f1; + --token-color-surface-action: #0043ce; + --token-color-surface-critical: #a2191f; + --token-color-surface-faint: #262626; + --token-color-surface-high-contrast: #f4f4f4; + --token-color-surface-highlight: #6929c4; + --token-color-surface-interactive-active: #525252; + --token-color-surface-interactive-disabled: #525252; + --token-color-surface-interactive-hover: #333333; + --token-color-surface-interactive: #262626; + --token-color-surface-primary: #262626; + --token-color-surface-strong: #393939; + --token-color-surface-success: #0e6027; + --token-color-surface-warning: #684e00; + --token-color-vault-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-radar-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ + --token-color-vault-secrets-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-dismiss-button-border-color-active: rgba(0, 0, 0, 0); + --token-dismiss-button-foreground-color-active: #f4f4f4; + --token-dismiss-button-foreground-color-default: #f4f4f4; + --token-dismiss-button-icon-size: 20px; + --token-dismiss-button-size: 48px; + --token-dismiss-button-surface-color-active: rgba(141, 141, 141, 0.4); + --token-dismiss-button-surface-color-hover: rgba(141, 141, 141, 0.16); + --token-elevation-high-box-shadow: none; + --token-elevation-higher-box-shadow: none; + --token-elevation-inset-box-shadow: none; + --token-elevation-low-box-shadow: none; + --token-elevation-mid-box-shadow: none; + --token-elevation-overlay-box-shadow: none; + --token-focus-ring-action-box-shadow: + inset 0 0 0 1px #161616, 0 0 0 3px #ffffff; + --token-focus-ring-critical-box-shadow: + inset 0 0 0 1px #161616, 0 0 0 3px #ffffff; + --token-form-radiocard-border-color-default-checked: #ffc0cb; + --token-form-radiocard-border-color-default: rgba(0, 0, 0, 0); + --token-form-radiocard-border-color-focus: #ffc0cb; + --token-form-radiocard-border-radius: 0px; + --token-icon-tile-border-color-logo: #525252; + --token-icon-tile-border-color-overlay: #6f6f6f; + --token-icon-tile-surface-color-overlay: #393939; + --token-rich-tooltip-bubble-arrow-size: 12px; + --token-rich-tooltip-bubble-border-color: var( + --token-color-palette-alpha-200 + ); + --token-rich-tooltip-bubble-border-radius: 2px; + --token-rich-tooltip-bubble-max-width: 288px; + --token-rich-tooltip-toggle-foreground-color-active: #c6c6c6; + --token-rich-tooltip-toggle-foreground-color-default: #c6c6c6; + --token-rich-tooltip-toggle-foreground-color-hover: #f4f4f4; + --token-rich-tooltip-toggle-gap-horizontal: 8px; + --token-rich-tooltip-toggle-icon-size: 14px; + --token-surface-base-box-shadow: none; + --token-surface-high-box-shadow: none; + --token-surface-higher-box-shadow: none; + --token-surface-inset-box-shadow: none; + --token-surface-low-box-shadow: none; + --token-surface-mid-box-shadow: none; + --token-surface-overlay-box-shadow: none; + --token-tooltip-border-radius: 2px; + --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); + --token-tooltip-caret-height: 6px; + --token-tooltip-caret-width: 12px; + --token-tooltip-max-width: 288px; + --token-tooltip-padding-horizontal: 16px; + --token-tooltip-padding-vertical: 16px; + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-letter-spacing: 0.16px; + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-letter-spacing: 0px; + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-letter-spacing: 0px; + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-letter-spacing: 0px; + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-letter-spacing: 0px; + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-weight-bold: 600; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-semibold: 600; + } +} + +.hds-theme-light { + --token-app-footer-focus-color-action-internal: #0f62fe; + --token-badge-border-radius: var(--token-border-radius-rounded); + --token-badge-count-padding-horizontal-large: 12px; + --token-badge-count-padding-horizontal-medium: 8px; + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-foreground-color-critical-filled: #a2191f; /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: #ffffff; + --token-badge-foreground-color-critical-outlined: #a2191f; + --token-badge-foreground-color-highlight-filled: #6929c4; /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: #ffffff; + --token-badge-foreground-color-highlight-outlined: #6929c4; + --token-badge-foreground-color-neutral-dark-mode-filled: #ffffff; + --token-badge-foreground-color-neutral-dark-mode-inverted: #161616; + --token-badge-foreground-color-neutral-dark-mode-outlined: #ffffff; + --token-badge-foreground-color-neutral-filled: #161616; + --token-badge-foreground-color-neutral-inverted: #e0e0e0; + --token-badge-foreground-color-neutral-outlined: #161616; + --token-badge-foreground-color-success-filled: #0e6027; /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: #ffffff; + --token-badge-foreground-color-success-outlined: #0e6027; + --token-badge-foreground-color-warning-filled: #8a3800; + --token-badge-foreground-color-warning-inverted: #ffffff; + --token-badge-foreground-color-warning-outlined: #8a3800; + --token-badge-gap-large: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-small: 4px; + --token-badge-height-small: 18px; + --token-badge-padding-horizontal-large: 12px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-small: 8px; + --token-badge-padding-vertical-small: 1px; + --token-badge-surface-color-critical-filled: #ffd7d9; /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: #a2191f; + --token-badge-surface-color-highlight-filled: #e8daff; /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: #6929c4; + --token-badge-surface-color-neutral-dark-mode-filled: #393939; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: #e0e0e0; + --token-badge-surface-color-neutral-filled: #e0e0e0; + --token-badge-surface-color-neutral-inverted: #393939; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-success-filled: #a7f0ba; /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: #0e6027; + --token-badge-surface-color-warning-filled: #ffd9be; /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: #8a3800; + --token-badge-typography-font-size-large: 0.75rem; + --token-badge-typography-font-size-medium: 0.75rem; + --token-badge-typography-font-size-small: 0.75rem; + --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */ + --token-border-radius-large: 0px; + --token-border-radius-medium: 0px; + --token-border-radius-small: 0px; + --token-border-radius-x-small: 0px; + --token-button-border-color-critical-active: rgba(0, 0, 0, 0); + --token-button-border-color-critical-default: rgba(0, 0, 0, 0); + --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-hover: rgba(0, 0, 0, 0); + --token-button-border-color-primary-active: rgba(0, 0, 0, 0); + --token-button-border-color-primary-default: rgba(0, 0, 0, 0); + --token-button-border-color-primary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-hover: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-active: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-default: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0); + --token-button-border-radius: 0px; + --token-button-foreground-color-critical-active: #ffffff; + --token-button-foreground-color-critical-default: #ffffff; + --token-button-foreground-color-critical-focus: #ffffff; + --token-button-foreground-color-critical-hover: #ffffff; + --token-button-foreground-color-disabled: #8d8d8d; + --token-button-foreground-color-primary-active: #ffffff; + --token-button-foreground-color-primary-default: #ffffff; + --token-button-foreground-color-primary-focus: #ffffff; + --token-button-foreground-color-primary-hover: #ffffff; + --token-button-foreground-color-secondary-active: #ffffff; + --token-button-foreground-color-secondary-default: #ffffff; + --token-button-foreground-color-secondary-focus: #ffffff; + --token-button-foreground-color-secondary-hover: #ffffff; + --token-button-foreground-color-tertiary-active: #ffffff; + --token-button-foreground-color-tertiary-default: #0f62fe; + --token-button-foreground-color-tertiary-focus: #ffffff; + --token-button-foreground-color-tertiary-hover: #ffffff; + --token-button-gap: 32px; + --token-button-height-large: 48px; + --token-button-height-medium: 40px; + --token-button-height-small: 32px; + --token-button-icon-size-large: 16px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-small: 16px; + --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-surface-color-critical-active: #750e13; + --token-button-surface-color-critical-default: #da1e28; + --token-button-surface-color-critical-focus: #da1e28; + --token-button-surface-color-critical-hover: #b81921; + --token-button-surface-color-disabled: #c6c6c6; + --token-button-surface-color-primary-active: #002d9c; + --token-button-surface-color-primary-default: #0f62fe; + --token-button-surface-color-primary-focus: #0f62fe; + --token-button-surface-color-primary-hover: #0050e6; + --token-button-surface-color-secondary-active: #6f6f6f; + --token-button-surface-color-secondary-default: #393939; + --token-button-surface-color-secondary-focus: #393939; + --token-button-surface-color-secondary-hover: #474747; + --token-button-surface-color-tertiary-active: #002d9c; + --token-button-surface-color-tertiary-focus: #0050e6; + --token-button-surface-color-tertiary-hover: #0050e6; + --token-button-typography-font-size-large: 0.875rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-small: 0.875rem; + --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */ + --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-color-border-action: #0f62fe; + --token-color-border-critical: #ff8389; + --token-color-border-faint: #e0e0e0; + --token-color-border-highlight: #be95ff; + --token-color-border-primary: #c6c6c6; + --token-color-border-strong: #8d8d8d; + --token-color-border-success: #42be65; + --token-color-border-warning: #d2a106; + --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-action-internal: #ffffff; + --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #ffffff; + --token-color-foreground-action-active: #0043ce; + --token-color-foreground-action-hover: #0043ce; + --token-color-foreground-action: #0f62fe; + --token-color-foreground-critical-high-contrast: #750e13; + --token-color-foreground-critical-on-surface: #a2191f; + --token-color-foreground-critical: #da1e28; + --token-color-foreground-disabled: rgba(22, 22, 22, 0.25); + --token-color-foreground-faint: #525252; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-highlight-high-contrast: #491d8b; + --token-color-foreground-highlight-on-surface: #6929c4; + --token-color-foreground-highlight: #8a3ffc; + --token-color-foreground-primary: #161616; + --token-color-foreground-strong: #161616; + --token-color-foreground-success-high-contrast: #044317; + --token-color-foreground-success-on-surface: #0e6027; + --token-color-foreground-success: #198038; + --token-color-foreground-warning-high-contrast: #483700; + --token-color-foreground-warning-on-surface: #684e00; + --token-color-foreground-warning: #8e6a00; + --token-color-hashicorp-brand: #000000; + --token-color-hcp-brand: #000000; + --token-color-page-faint: #ffffff; + --token-color-page-primary: #ffffff; + --token-color-palette-alpha-100: #e0e0e0; + --token-color-palette-alpha-200: #c6c6c6; + --token-color-palette-alpha-300: #8d8d8d; + --token-color-palette-amber-100: #ffd9be; + --token-color-palette-amber-200: #ba4e00; + --token-color-palette-amber-300: #8a3800; + --token-color-palette-amber-400: #5e2900; + --token-color-palette-amber-500: #3e1a00; + --token-color-palette-amber-50: #fff2e8; + --token-color-palette-blue-100: #d0e2ff; + --token-color-palette-blue-200: #0f62fe; + --token-color-palette-blue-300: #0043ce; + --token-color-palette-blue-400: #002d9c; + --token-color-palette-blue-500: #001141; + --token-color-palette-blue-50: #edf5ff; + --token-color-palette-green-100: #a7f0ba; + --token-color-palette-green-200: #24a148; + --token-color-palette-green-300: #198038; + --token-color-palette-green-400: #0e6027; + --token-color-palette-green-500: #044317; + --token-color-palette-green-50: #defbe6; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-neutral-100: #e0e0e0; + --token-color-palette-neutral-200: #c6c6c6; + --token-color-palette-neutral-300: #a8a8a8; + --token-color-palette-neutral-400: #8d8d8d; + --token-color-palette-neutral-500: #525252; + --token-color-palette-neutral-50: #f4f4f4; + --token-color-palette-neutral-600: #393939; + --token-color-palette-neutral-700: #161616; + --token-color-palette-purple-100: #e8daff; + --token-color-palette-purple-200: #a56eff; + --token-color-palette-purple-300: #8a3ffc; + --token-color-palette-purple-400: #6929c4; + --token-color-palette-purple-500: #31135e; + --token-color-palette-purple-50: #f6f2ff; + --token-color-palette-red-100: #ffd7d9; + --token-color-palette-red-200: #da1e28; + --token-color-palette-red-300: #a2191f; + --token-color-palette-red-400: #750e13; + --token-color-palette-red-500: #520408; + --token-color-palette-red-50: #fff1f1; + --token-color-surface-action: #d0e2ff; + --token-color-surface-critical: #ffd7d9; + --token-color-surface-faint: #f4f4f4; + --token-color-surface-high-contrast: #393939; + --token-color-surface-highlight: #e8daff; + --token-color-surface-interactive-active: #c6c6c6; + --token-color-surface-interactive-disabled: #c6c6c6; + --token-color-surface-interactive-hover: #e8e8e8; + --token-color-surface-interactive: #f4f4f4; + --token-color-surface-primary: #f4f4f4; + --token-color-surface-strong: #e0e0e0; + --token-color-surface-success: #a7f0ba; + --token-color-surface-warning: #fcf4d6; + --token-color-vault-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-radar-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ + --token-color-vault-secrets-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-dismiss-button-border-color-active: rgba(0, 0, 0, 0); + --token-dismiss-button-foreground-color-active: #161616; + --token-dismiss-button-foreground-color-default: #161616; + --token-dismiss-button-icon-size: 20px; + --token-dismiss-button-size: 48px; + --token-dismiss-button-surface-color-active: rgba(141, 141, 141, 0.5); + --token-dismiss-button-surface-color-hover: rgba(141, 141, 141, 0.12); + --token-elevation-high-box-shadow: none; + --token-elevation-higher-box-shadow: none; + --token-elevation-inset-box-shadow: none; + --token-elevation-low-box-shadow: none; + --token-elevation-mid-box-shadow: none; + --token-elevation-overlay-box-shadow: none; + --token-focus-ring-action-box-shadow: + inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe; + --token-focus-ring-critical-box-shadow: + inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe; + --token-form-radiocard-border-color-default-checked: #ffc0cb; + --token-form-radiocard-border-color-default: rgba(0, 0, 0, 0); + --token-form-radiocard-border-color-focus: #ffc0cb; + --token-form-radiocard-border-radius: 0px; + --token-icon-tile-border-color-logo: #c6c6c6; + --token-icon-tile-border-color-overlay: #e0e0e0; + --token-icon-tile-surface-color-overlay: #ffffff; + --token-rich-tooltip-bubble-arrow-size: 12px; + --token-rich-tooltip-bubble-border-color: var( + --token-color-palette-alpha-200 + ); + --token-rich-tooltip-bubble-border-radius: 2px; + --token-rich-tooltip-bubble-max-width: 288px; + --token-rich-tooltip-toggle-foreground-color-active: #525252; + --token-rich-tooltip-toggle-foreground-color-default: #525252; + --token-rich-tooltip-toggle-foreground-color-hover: #161616; + --token-rich-tooltip-toggle-gap-horizontal: 8px; + --token-rich-tooltip-toggle-icon-size: 14px; + --token-surface-base-box-shadow: none; + --token-surface-high-box-shadow: none; + --token-surface-higher-box-shadow: none; + --token-surface-inset-box-shadow: none; + --token-surface-low-box-shadow: none; + --token-surface-mid-box-shadow: none; + --token-surface-overlay-box-shadow: none; + --token-tooltip-border-radius: 2px; + --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); + --token-tooltip-caret-height: 6px; + --token-tooltip-caret-width: 12px; + --token-tooltip-max-width: 288px; + --token-tooltip-padding-horizontal: 16px; + --token-tooltip-padding-vertical: 16px; + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-letter-spacing: 0.16px; + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-letter-spacing: 0px; + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-letter-spacing: 0px; + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-letter-spacing: 0px; + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-letter-spacing: 0px; + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-weight-bold: 600; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-semibold: 600; +} + +.hds-theme-dark { + --token-app-footer-focus-color-action-internal: #ffffff; + --token-badge-border-radius: var(--token-border-radius-rounded); + --token-badge-count-padding-horizontal-large: 12px; + --token-badge-count-padding-horizontal-medium: 8px; + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-foreground-color-critical-filled: #ffd7d9; /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: #161616; + --token-badge-foreground-color-critical-outlined: #ffd7d9; + --token-badge-foreground-color-highlight-filled: #e8daff; /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: #161616; + --token-badge-foreground-color-highlight-outlined: #e8daff; + --token-badge-foreground-color-neutral-dark-mode-filled: #161616; + --token-badge-foreground-color-neutral-dark-mode-inverted: #f4f4f4; + --token-badge-foreground-color-neutral-dark-mode-outlined: #161616; + --token-badge-foreground-color-neutral-filled: #f4f4f4; + --token-badge-foreground-color-neutral-inverted: #161616; + --token-badge-foreground-color-neutral-outlined: #f4f4f4; + --token-badge-foreground-color-success-filled: #a7f0ba; /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: #161616; + --token-badge-foreground-color-success-outlined: #a7f0ba; + --token-badge-foreground-color-warning-filled: #ffd9be; + --token-badge-foreground-color-warning-inverted: #161616; + --token-badge-foreground-color-warning-outlined: #ffd9be; + --token-badge-gap-large: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-small: 4px; + --token-badge-height-small: 18px; + --token-badge-padding-horizontal-large: 12px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-small: 8px; + --token-badge-padding-vertical-small: 1px; + --token-badge-surface-color-critical-filled: #a2191f; /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: #ffd7d9; + --token-badge-surface-color-highlight-filled: #6929c4; /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: #be95ff; + --token-badge-surface-color-neutral-dark-mode-filled: #f4f4f4; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: #525252; + --token-badge-surface-color-neutral-filled: #525252; + --token-badge-surface-color-neutral-inverted: #f4f4f4; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-success-filled: #0e6027; /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: #a7f0ba; + --token-badge-surface-color-warning-filled: #8a3800; /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: #ffd9be; + --token-badge-typography-font-size-large: 0.75rem; + --token-badge-typography-font-size-medium: 0.75rem; + --token-badge-typography-font-size-small: 0.75rem; + --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */ + --token-border-radius-large: 0px; + --token-border-radius-medium: 0px; + --token-border-radius-small: 0px; + --token-border-radius-x-small: 0px; + --token-button-border-color-critical-active: rgba(0, 0, 0, 0); + --token-button-border-color-critical-default: rgba(0, 0, 0, 0); + --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-hover: rgba(0, 0, 0, 0); + --token-button-border-color-primary-active: rgba(0, 0, 0, 0); + --token-button-border-color-primary-default: rgba(0, 0, 0, 0); + --token-button-border-color-primary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-hover: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-active: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-default: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0); + --token-button-border-radius: 0px; + --token-button-foreground-color-critical-active: #ffffff; + --token-button-foreground-color-critical-default: #ffffff; + --token-button-foreground-color-critical-focus: #ffffff; + --token-button-foreground-color-critical-hover: #ffffff; + --token-button-foreground-color-disabled: rgba(255, 255, 255, 0.25); + --token-button-foreground-color-primary-active: #ffffff; + --token-button-foreground-color-primary-default: #ffffff; + --token-button-foreground-color-primary-focus: #ffffff; + --token-button-foreground-color-primary-hover: #ffffff; + --token-button-foreground-color-secondary-active: #ffffff; + --token-button-foreground-color-secondary-default: #ffffff; + --token-button-foreground-color-secondary-focus: #ffffff; + --token-button-foreground-color-secondary-hover: #ffffff; + --token-button-foreground-color-tertiary-active: #161616; + --token-button-foreground-color-tertiary-default: #ffffff; + --token-button-foreground-color-tertiary-focus: #161616; + --token-button-foreground-color-tertiary-hover: #161616; + --token-button-gap: 32px; + --token-button-height-large: 48px; + --token-button-height-medium: 40px; + --token-button-height-small: 32px; + --token-button-icon-size-large: 16px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-small: 16px; + --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-surface-color-critical-active: #750e13; + --token-button-surface-color-critical-default: #da1e28; + --token-button-surface-color-critical-focus: #da1e28; + --token-button-surface-color-critical-hover: #b81921; + --token-button-surface-color-disabled: #8d8d8d; + --token-button-surface-color-primary-active: #002d9c; + --token-button-surface-color-primary-default: #0f62fe; + --token-button-surface-color-primary-focus: #0f62fe; + --token-button-surface-color-primary-hover: #0050e6; + --token-button-surface-color-secondary-active: #393939; + --token-button-surface-color-secondary-default: #6f6f6f; + --token-button-surface-color-secondary-focus: #6f6f6f; + --token-button-surface-color-secondary-hover: #5e5e5e; + --token-button-surface-color-tertiary-active: #c6c6c6; + --token-button-surface-color-tertiary-focus: #f4f4f4; + --token-button-surface-color-tertiary-hover: #f4f4f4; + --token-button-typography-font-size-large: 0.875rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-small: 0.875rem; + --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */ + --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-color-border-action: #4589ff; + --token-color-border-critical: #fa4d56; + --token-color-border-faint: #393939; + --token-color-border-highlight: #a56eff; + --token-color-border-primary: #6f6f6f; + --token-color-border-strong: #6f6f6f; + --token-color-border-success: #24a148; + --token-color-border-warning: #b28600; + --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-action-internal: #161616; + --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #161616; + --token-color-foreground-action-active: #a6c8ff; + --token-color-foreground-action-hover: #a6c8ff; + --token-color-foreground-action: #78a9ff; + --token-color-foreground-critical-high-contrast: #ffd7d9; + --token-color-foreground-critical-on-surface: #ffb3b8; + --token-color-foreground-critical: #ff8389; + --token-color-foreground-disabled: rgba(244, 244, 244, 0.25); + --token-color-foreground-faint: #c6c6c6; + --token-color-foreground-high-contrast: #161616; + --token-color-foreground-highlight-high-contrast: #d4bbff; + --token-color-foreground-highlight-on-surface: #d4bbff; + --token-color-foreground-highlight: #be95ff; + --token-color-foreground-primary: #f4f4f4; + --token-color-foreground-strong: #f4f4f4; + --token-color-foreground-success-high-contrast: #a7f0ba; + --token-color-foreground-success-on-surface: #6fdc8c; + --token-color-foreground-success: #42be65; + --token-color-foreground-warning-high-contrast: #fddc69; + --token-color-foreground-warning-on-surface: #f1c21b; + --token-color-foreground-warning: #d2a106; + --token-color-hashicorp-brand: #ffffff; + --token-color-hcp-brand: #ffffff; + --token-color-page-faint: #161616; + --token-color-page-primary: #161616; + --token-color-palette-alpha-100: #393939; + --token-color-palette-alpha-200: #525252; + --token-color-palette-alpha-300: #6f6f6f; + --token-color-palette-amber-100: #ffd9be; + --token-color-palette-amber-200: #ba4e00; + --token-color-palette-amber-300: #8a3800; + --token-color-palette-amber-400: #5e2900; + --token-color-palette-amber-500: #3e1a00; + --token-color-palette-amber-50: #fff2e8; + --token-color-palette-blue-100: #d0e2ff; + --token-color-palette-blue-200: #0f62fe; + --token-color-palette-blue-300: #0043ce; + --token-color-palette-blue-400: #002d9c; + --token-color-palette-blue-500: #001141; + --token-color-palette-blue-50: #edf5ff; + --token-color-palette-green-100: #a7f0ba; + --token-color-palette-green-200: #24a148; + --token-color-palette-green-300: #198038; + --token-color-palette-green-400: #0e6027; + --token-color-palette-green-500: #044317; + --token-color-palette-green-50: #defbe6; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-neutral-100: #e0e0e0; + --token-color-palette-neutral-200: #c6c6c6; + --token-color-palette-neutral-300: #a8a8a8; + --token-color-palette-neutral-400: #8d8d8d; + --token-color-palette-neutral-500: #525252; + --token-color-palette-neutral-50: #f4f4f4; + --token-color-palette-neutral-600: #393939; + --token-color-palette-neutral-700: #161616; + --token-color-palette-purple-100: #e8daff; + --token-color-palette-purple-200: #a56eff; + --token-color-palette-purple-300: #8a3ffc; + --token-color-palette-purple-400: #6929c4; + --token-color-palette-purple-500: #31135e; + --token-color-palette-purple-50: #f6f2ff; + --token-color-palette-red-100: #ffd7d9; + --token-color-palette-red-200: #da1e28; + --token-color-palette-red-300: #a2191f; + --token-color-palette-red-400: #750e13; + --token-color-palette-red-500: #520408; + --token-color-palette-red-50: #fff1f1; + --token-color-surface-action: #0043ce; + --token-color-surface-critical: #a2191f; + --token-color-surface-faint: #262626; + --token-color-surface-high-contrast: #f4f4f4; + --token-color-surface-highlight: #6929c4; + --token-color-surface-interactive-active: #525252; + --token-color-surface-interactive-disabled: #525252; + --token-color-surface-interactive-hover: #333333; + --token-color-surface-interactive: #262626; + --token-color-surface-primary: #262626; + --token-color-surface-strong: #393939; + --token-color-surface-success: #0e6027; + --token-color-surface-warning: #684e00; + --token-color-vault-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-radar-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ + --token-color-vault-secrets-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-dismiss-button-border-color-active: rgba(0, 0, 0, 0); + --token-dismiss-button-foreground-color-active: #f4f4f4; + --token-dismiss-button-foreground-color-default: #f4f4f4; + --token-dismiss-button-icon-size: 20px; + --token-dismiss-button-size: 48px; + --token-dismiss-button-surface-color-active: rgba(141, 141, 141, 0.4); + --token-dismiss-button-surface-color-hover: rgba(141, 141, 141, 0.16); + --token-elevation-high-box-shadow: none; + --token-elevation-higher-box-shadow: none; + --token-elevation-inset-box-shadow: none; + --token-elevation-low-box-shadow: none; + --token-elevation-mid-box-shadow: none; + --token-elevation-overlay-box-shadow: none; + --token-focus-ring-action-box-shadow: + inset 0 0 0 1px #161616, 0 0 0 3px #ffffff; + --token-focus-ring-critical-box-shadow: + inset 0 0 0 1px #161616, 0 0 0 3px #ffffff; + --token-form-radiocard-border-color-default-checked: #ffc0cb; + --token-form-radiocard-border-color-default: rgba(0, 0, 0, 0); + --token-form-radiocard-border-color-focus: #ffc0cb; + --token-form-radiocard-border-radius: 0px; + --token-icon-tile-border-color-logo: #525252; + --token-icon-tile-border-color-overlay: #6f6f6f; + --token-icon-tile-surface-color-overlay: #393939; + --token-rich-tooltip-bubble-arrow-size: 12px; + --token-rich-tooltip-bubble-border-color: var( + --token-color-palette-alpha-200 + ); + --token-rich-tooltip-bubble-border-radius: 2px; + --token-rich-tooltip-bubble-max-width: 288px; + --token-rich-tooltip-toggle-foreground-color-active: #c6c6c6; + --token-rich-tooltip-toggle-foreground-color-default: #c6c6c6; + --token-rich-tooltip-toggle-foreground-color-hover: #f4f4f4; + --token-rich-tooltip-toggle-gap-horizontal: 8px; + --token-rich-tooltip-toggle-icon-size: 14px; + --token-surface-base-box-shadow: none; + --token-surface-high-box-shadow: none; + --token-surface-higher-box-shadow: none; + --token-surface-inset-box-shadow: none; + --token-surface-low-box-shadow: none; + --token-surface-mid-box-shadow: none; + --token-surface-overlay-box-shadow: none; + --token-tooltip-border-radius: 2px; + --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); + --token-tooltip-caret-height: 6px; + --token-tooltip-caret-width: 12px; + --token-tooltip-max-width: 288px; + --token-tooltip-padding-horizontal: 16px; + --token-tooltip-padding-vertical: 16px; + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-letter-spacing: 0.16px; + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-letter-spacing: 0px; + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-letter-spacing: 0px; + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-letter-spacing: 0px; + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-letter-spacing: 0px; + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-weight-bold: 600; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-semibold: 600; +} + +/* + +WHY ARE ALL "COMPUTED" CSS VARIABLES REDECLARED IN EACH THEME SCOPE? + +CSS custom properties (variables) inherit from parent to child, but when a variable is defined +as a calculation or alias of another variable (e.g., `--alias-value: var(--source-value)`, its value is fixed +at the scope where it is declared—using whatever is visible at that level in the DOM (eg. `:root`). + +This block of "common/shared" CSS variables contains a lot of these aliases, so if we only declare these +"computed" variables at `:root` level, their values do not update in themed blocks that override +the "source" variables (e.g., `--source-value`) at a lower scope. +This results in _stale_ variables, where the computed value is always stuck on the `:root` value, +even inside a themed block where the source variable is assigned. + +To make sure every themed block/scoped context (eg. `.hds-theme-light`) correctly computes the aliased values, +we redeclare each "computed" variable in every theme scope where its "source" variable is overridden. + +*/ + +:root, +.hds-theme-system, +.hds-theme-light, +.hds-theme-dark { + --token-app-header-height: 60px; + --token-app-header-home-link-size: 36px; + --token-app-header-logo-size: 28px; + --token-app-side-nav-body-list-item-border-radius: 5px; + --token-app-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-app-side-nav-body-list-item-height: 36px; + --token-app-side-nav-body-list-item-padding-horizontal: 8px; + --token-app-side-nav-body-list-item-padding-vertical: 4px; + --token-app-side-nav-body-list-item-spacing-vertical: 2px; + --token-app-side-nav-body-list-margin-vertical: 24px; + --token-app-side-nav-color-foreground-faint: var( + --token-color-foreground-faint + ); + --token-app-side-nav-color-foreground-primary: var( + --token-color-foreground-primary + ); + --token-app-side-nav-color-foreground-strong: var( + --token-color-foreground-primary + ); + --token-app-side-nav-color-surface-interactive-active: var( + --token-color-palette-neutral-300 + ); + --token-app-side-nav-color-surface-interactive-hover: var( + --token-color-surface-interactive-hover + ); + --token-app-side-nav-color-surface-primary: var(--token-color-surface-faint); + --token-app-side-nav-header-actions-spacing: 8px; + --token-app-side-nav-header-home-link-logo-size-minimized: 32px; + --token-app-side-nav-header-home-link-logo-size: 48px; + --token-app-side-nav-header-home-link-padding: 4px; + --token-app-side-nav-toggle-button-border-radius: 5px; + --token-app-side-nav-wrapper-border-color: var( + --token-color-palette-neutral-200 + ); + --token-app-side-nav-wrapper-border-width: 1px; + --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-app-side-nav-wrapper-padding-horizontal: 16px; + --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-app-side-nav-wrapper-padding-vertical: 16px; + --token-badge-height-large: 32px; + --token-badge-height-medium: 24px; + --token-badge-icon-size-large: 16px; + --token-badge-icon-size-medium: 16px; + --token-badge-icon-size-small: 12px; + --token-badge-padding-vertical-large: 4px; + --token-badge-padding-vertical-medium: 4px; + --token-badge-surface-color-neutral-dark-mode-outlined: rgba(0, 0, 0, 0); + --token-badge-surface-color-neutral-outlined: rgba(0, 0, 0, 0); + --token-badge-typography-line-height-medium: 1.2308; /** 16px = 1.2308 */ + --token-badge-typography-line-height-small: 1.2308; /** 16px = 1.2308 */ + --token-border-radius-rounded: 1000000000px; + --token-button-border-color-disabled: var(--token-color-border-primary); + --token-button-border-color-tertiary-active: var(--token-color-border-strong); + --token-button-border-color-tertiary-default: rgba(0, 0, 0, 0); + --token-button-border-color-tertiary-focus-external: var( + --token-color-focus-action-external + ); + --token-button-border-color-tertiary-focus-internal: var( + --token-color-focus-action-internal + ); + --token-button-border-color-tertiary-hover: var(--token-color-border-strong); + --token-button-border-width: 1px; + --token-button-focus-border-width: 3px; + --token-button-surface-color-tertiary-default: rgba(0, 0, 0, 0); + --token-color-boundary-border: #fbd7d8; + --token-color-boundary-brand: #f24c53; + --token-color-boundary-foreground: #cf2d32; + --token-color-boundary-gradient-faint-start: #fffafa; /** this is the 'boundary-50' value at 25% opacity on white */ + --token-color-boundary-gradient-faint-stop: #ffecec; + --token-color-boundary-gradient-primary-start: #f97076; + --token-color-boundary-gradient-primary-stop: #db363b; + --token-color-boundary-surface: #ffecec; + --token-color-consul-border: #ffcede; + --token-color-consul-brand: #e03875; + --token-color-consul-foreground: #d01c5b; + --token-color-consul-gradient-faint-start: #fff9fb; /** this is the 'consul-50' value at 25% opacity on white */ + --token-color-consul-gradient-faint-stop: #ffe9f1; + --token-color-consul-gradient-primary-start: #ff99be; + --token-color-consul-gradient-primary-stop: #da306e; + --token-color-consul-surface: #ffe9f1; + --token-color-nomad-border: #bff3dd; + --token-color-nomad-brand: #06d092; + --token-color-nomad-foreground: #008661; + --token-color-nomad-gradient-faint-start: #f3fff9; /** this is the 'nomad-50' value at 25% opacity on white */ + --token-color-nomad-gradient-faint-stop: #d3fdeb; + --token-color-nomad-gradient-primary-start: #bff3dd; + --token-color-nomad-gradient-primary-stop: #60dea9; + --token-color-nomad-surface: #d3fdeb; + --token-color-packer-border: #b4e4ff; + --token-color-packer-brand: #02a8ef; + --token-color-packer-foreground: #007eb4; + --token-color-packer-gradient-faint-start: #f3fcff; /** this is the 'packer-50' value at 25% opacity on white */ + --token-color-packer-gradient-faint-stop: #d4f2ff; + --token-color-packer-gradient-primary-start: #b4e4ff; + --token-color-packer-gradient-primary-stop: #63d0ff; + --token-color-packer-surface: #d4f2ff; + --token-color-terraform-border: #ebdbfc; + --token-color-terraform-brand-on-dark: #a067da; /** this is an alternative brand color meant to be used on dark backgrounds */ + --token-color-terraform-brand: #7b42bc; + --token-color-terraform-foreground: #773cb4; + --token-color-terraform-gradient-faint-start: #fcfaff; /** this is the 'terraform-50' value at 25% opacity on white */ + --token-color-terraform-gradient-faint-stop: #f4ecff; + --token-color-terraform-gradient-primary-start: #bb8deb; + --token-color-terraform-gradient-primary-stop: #844fba; + --token-color-terraform-surface: #f4ecff; + --token-color-vagrant-border: #c7dbfc; + --token-color-vagrant-brand: #1868f2; + --token-color-vagrant-foreground: #1c61d8; + --token-color-vagrant-gradient-faint-start: #f4faff; /** this is the 'vagrant-50' value at 25% opacity on white */ + --token-color-vagrant-gradient-faint-stop: #d6ebff; + --token-color-vagrant-gradient-primary-start: #639cff; + --token-color-vagrant-gradient-primary-stop: #2e71e5; + --token-color-vagrant-surface: #d6ebff; + --token-color-vault-border: #feec7b; + --token-color-vault-brand: #ffcf25; + --token-color-vault-foreground: #9a6f00; + --token-color-vault-gradient-faint-start: #fffdf2; /** this is the 'vault-50' value at 25% opacity on white */ + --token-color-vault-gradient-faint-stop: #fff9cf; + --token-color-vault-gradient-primary-start: #feec7b; + --token-color-vault-gradient-primary-stop: #ffe543; + --token-color-vault-radar-border: #feec7b; + --token-color-vault-radar-brand: #ffcf25; + --token-color-vault-radar-foreground: #9a6f00; + --token-color-vault-radar-gradient-faint-start: #fffdf2; /** this is the 'vault-radar-50' value at 25% opacity on white */ + --token-color-vault-radar-gradient-faint-stop: #fff9cf; + --token-color-vault-radar-gradient-primary-start: #feec7b; + --token-color-vault-radar-gradient-primary-stop: #ffe543; + --token-color-vault-radar-surface: #fff9cf; + --token-color-vault-secrets-border: #feec7b; + --token-color-vault-secrets-brand: #ffcf25; + --token-color-vault-secrets-foreground: #9a6f00; + --token-color-vault-secrets-gradient-faint-start: #fffdf2; /** this is the 'vault-secrets-50' value at 25% opacity on white */ + --token-color-vault-secrets-gradient-faint-stop: #fff9cf; + --token-color-vault-secrets-gradient-primary-start: #feec7b; + --token-color-vault-secrets-gradient-primary-stop: #ffe543; + --token-color-vault-secrets-surface: #fff9cf; + --token-color-vault-surface: #fff9cf; + --token-color-waypoint-border: #cbf1f3; + --token-color-waypoint-brand: #14c6cb; + --token-color-waypoint-foreground: #008196; + --token-color-waypoint-gradient-faint-start: #f6feff; /** this is the 'waypoint-50' value at 25% opacity on white */ + --token-color-waypoint-gradient-faint-stop: #e0fcff; + --token-color-waypoint-gradient-primary-start: #cbf1f3; + --token-color-waypoint-gradient-primary-stop: #62d4dc; + --token-color-waypoint-surface: #e0fcff; + --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'dash' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'dash' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-size: 12px; + --token-form-checkbox-border-radius: 3px; + --token-form-checkbox-border-width: 1px; + --token-form-checkbox-size: 16px; + --token-form-control-base-border-color-default: var( + --token-color-palette-neutral-400 + ); + --token-form-control-base-border-color-hover: var( + --token-color-palette-neutral-500 + ); + --token-form-control-base-foreground-placeholder-color: var( + --token-color-foreground-faint + ); + --token-form-control-base-foreground-value-color: var( + --token-color-foreground-strong + ); + --token-form-control-base-surface-color-default: var( + --token-color-surface-interactive + ); + --token-form-control-base-surface-color-hover: var( + --token-color-surface-interactive-hover + ); + --token-form-control-border-radius: 5px; + --token-form-control-border-width: 1px; + --token-form-control-checked-border-color-default: var( + --token-color-palette-blue-300 + ); + --token-form-control-checked-border-color-hover: var( + --token-color-palette-blue-400 + ); + --token-form-control-checked-foreground-color: var( + --token-color-foreground-high-contrast + ); + --token-form-control-checked-surface-color-default: var( + --token-color-palette-blue-200 + ); + --token-form-control-checked-surface-color-hover: var( + --token-color-palette-blue-300 + ); + --token-form-control-disabled-border-color: var(--token-color-border-primary); + --token-form-control-disabled-foreground-color: var( + --token-color-foreground-disabled + ); + --token-form-control-disabled-surface-color: var( + --token-color-surface-interactive-disabled + ); + --token-form-control-invalid-border-color-default: var( + --token-color-palette-red-300 + ); + --token-form-control-invalid-border-color-hover: var( + --token-color-palette-red-400 + ); + --token-form-control-padding: 7px; /** Notice: we have to take in account the border, so it's 1px less than in Figma. */ + --token-form-control-readonly-border-color: var(--token-color-border-faint); + --token-form-control-readonly-foreground-color: var( + --token-color-foreground-primary + ); + --token-form-control-readonly-surface-color: var( + --token-color-surface-strong + ); + --token-form-error-color: var(--token-color-palette-red-300); + --token-form-error-icon-size: 14px; + --token-form-helper-text-color: var(--token-color-foreground-faint); + --token-form-indicator-optional-color: var(--token-color-foreground-faint); + --token-form-label-color: var(--token-color-foreground-strong); + --token-form-legend-color: var(--token-form-label-color); + --token-form-radio-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'dot' color is hardcoded here! */ + --token-form-radio-background-image-data-url: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e"); /** notice: the 'dot' color is hardcoded here! */ + --token-form-radio-background-image-size: 12px; + --token-form-radio-border-width: 1px; + --token-form-radio-size: 16px; + --token-form-radiocard-border-width: 1px; + --token-form-radiocard-content-padding: 24px; + --token-form-radiocard-control-padding: 8px; + --token-form-radiocard-group-gap: 16px; + --token-form-radiocard-transition-duration: 0.2s; + --token-form-select-background-image-data-url-disabled: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E"); /** notice: the 'caret' color is hardcoded here! */ + --token-form-select-background-image-data-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E"); /** notice: the 'caret' color is hardcoded here! */ + --token-form-select-background-image-position-right-x: var( + --token-form-control-padding + ); + --token-form-select-background-image-position-top-y: 9px; + --token-form-select-background-image-size: 16px; + --token-form-text-input-background-image-data-url-date: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-cancel: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-loading: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color and animation are hardcoded here! */ + --token-form-text-input-background-image-data-url-search: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-time: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-position-x: var( + --token-form-control-padding + ); + --token-form-text-input-background-image-size: 16px; + --token-form-toggle-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-background-image-position-x: 2px; + --token-form-toggle-background-image-size: 12px; + --token-form-toggle-base-surface-color-default: var( + --token-color-surface-strong + ); /** the toggle has a different base surface color, compared to the other controls */ + --token-form-toggle-border-radius: 3px; + --token-form-toggle-border-width: 1px; + --token-form-toggle-height: 16px; + --token-form-toggle-thumb-size: var(--token-form-toggle-height); + --token-form-toggle-transition-duration: 0.2s; + --token-form-toggle-transition-timing-function: cubic-bezier( + 0.68, + -0.2, + 0.265, + 1.15 + ); + --token-form-toggle-width: 32px; + --token-pagination-child-spacing-horizontal: 20px; + --token-pagination-child-spacing-vertical: 8px; + --token-pagination-nav-control-focus-inset: 4px; + --token-pagination-nav-control-height: 36px; + --token-pagination-nav-control-icon-spacing: 6px; + --token-pagination-nav-control-padding-horizontal: 12px; + --token-pagination-nav-indicator-height: 2px; + --token-pagination-nav-indicator-spacing: 6px; + --token-tabs-divider-height: 1px; + --token-tabs-indicator-height: 3px; + --token-tabs-indicator-transition-duration: 0.6s; + --token-tabs-indicator-transition-function: cubic-bezier(0.5, 1, 0.89, 1); + --token-tabs-tab-border-radius: 5px; + --token-tabs-tab-focus-inset: 6px; + --token-tabs-tab-gutter: 6px; + --token-tabs-tab-height-large: 48px; + --token-tabs-tab-height-medium: 36px; + --token-tabs-tab-padding-horizontal-large: 20px; + --token-tabs-tab-padding-horizontal-medium: 12px; + --token-tabs-tab-padding-vertical: 0px; + --token-tooltip-focus-offset: -2px; + --token-tooltip-transition-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); +} diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g0/common-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g0/common-tokens.css new file mode 100644 index 00000000000..142edfe02e2 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g0/common-tokens.css @@ -0,0 +1,227 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-app-header-height: 60px; + --token-app-header-home-link-size: 36px; + --token-app-header-logo-size: 28px; + --token-app-side-nav-body-list-item-border-radius: 5px; + --token-app-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-app-side-nav-body-list-item-height: 36px; + --token-app-side-nav-body-list-item-padding-horizontal: 8px; + --token-app-side-nav-body-list-item-padding-vertical: 4px; + --token-app-side-nav-body-list-item-spacing-vertical: 2px; + --token-app-side-nav-body-list-margin-vertical: 24px; + --token-app-side-nav-color-foreground-faint: var(--token-color-foreground-faint); + --token-app-side-nav-color-foreground-primary: var(--token-color-foreground-primary); + --token-app-side-nav-color-foreground-strong: var(--token-color-foreground-primary); + --token-app-side-nav-color-surface-interactive-active: var(--token-color-palette-neutral-300); + --token-app-side-nav-color-surface-interactive-hover: var(--token-color-surface-interactive-hover); + --token-app-side-nav-color-surface-primary: var(--token-color-surface-faint); + --token-app-side-nav-header-actions-spacing: 8px; + --token-app-side-nav-header-home-link-logo-size-minimized: 32px; + --token-app-side-nav-header-home-link-logo-size: 48px; + --token-app-side-nav-header-home-link-padding: 4px; + --token-app-side-nav-toggle-button-border-radius: 5px; + --token-app-side-nav-wrapper-border-color: var(--token-color-palette-neutral-200); + --token-app-side-nav-wrapper-border-width: 1px; + --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-app-side-nav-wrapper-padding-horizontal: 16px; + --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-app-side-nav-wrapper-padding-vertical: 16px; + --token-badge-height-large: 32px; + --token-badge-height-medium: 24px; + --token-badge-icon-size-large: 16px; + --token-badge-icon-size-medium: 16px; + --token-badge-icon-size-small: 12px; + --token-badge-padding-vertical-large: 4px; + --token-badge-padding-vertical-medium: 4px; + --token-badge-surface-color-neutral-dark-mode-outlined: rgba(0, 0, 0, 0); + --token-badge-surface-color-neutral-outlined: rgba(0, 0, 0, 0); + --token-badge-typography-line-height-medium: 1.2308; /** 16px = 1.2308 */ + --token-badge-typography-line-height-small: 1.2308; /** 16px = 1.2308 */ + --token-border-radius-rounded: 1000000000px; + --token-button-border-color-disabled: var(--token-color-border-primary); + --token-button-border-color-tertiary-active: var(--token-color-border-strong); + --token-button-border-color-tertiary-default: rgba(0, 0, 0, 0); + --token-button-border-color-tertiary-focus-external: var(--token-color-focus-action-external); + --token-button-border-color-tertiary-focus-internal: var(--token-color-focus-action-internal); + --token-button-border-color-tertiary-hover: var(--token-color-border-strong); + --token-button-border-width: 1px; + --token-button-focus-border-width: 3px; + --token-button-surface-color-tertiary-default: rgba(0, 0, 0, 0); + --token-color-boundary-border: #fbd7d8; + --token-color-boundary-brand: #f24c53; + --token-color-boundary-foreground: #cf2d32; + --token-color-boundary-gradient-faint-start: #fffafa; /** this is the 'boundary-50' value at 25% opacity on white */ + --token-color-boundary-gradient-faint-stop: #ffecec; + --token-color-boundary-gradient-primary-start: #f97076; + --token-color-boundary-gradient-primary-stop: #db363b; + --token-color-boundary-surface: #ffecec; + --token-color-consul-border: #ffcede; + --token-color-consul-brand: #e03875; + --token-color-consul-foreground: #d01c5b; + --token-color-consul-gradient-faint-start: #fff9fb; /** this is the 'consul-50' value at 25% opacity on white */ + --token-color-consul-gradient-faint-stop: #ffe9f1; + --token-color-consul-gradient-primary-start: #ff99be; + --token-color-consul-gradient-primary-stop: #da306e; + --token-color-consul-surface: #ffe9f1; + --token-color-nomad-border: #bff3dd; + --token-color-nomad-brand: #06d092; + --token-color-nomad-foreground: #008661; + --token-color-nomad-gradient-faint-start: #f3fff9; /** this is the 'nomad-50' value at 25% opacity on white */ + --token-color-nomad-gradient-faint-stop: #d3fdeb; + --token-color-nomad-gradient-primary-start: #bff3dd; + --token-color-nomad-gradient-primary-stop: #60dea9; + --token-color-nomad-surface: #d3fdeb; + --token-color-packer-border: #b4e4ff; + --token-color-packer-brand: #02a8ef; + --token-color-packer-foreground: #007eb4; + --token-color-packer-gradient-faint-start: #f3fcff; /** this is the 'packer-50' value at 25% opacity on white */ + --token-color-packer-gradient-faint-stop: #d4f2ff; + --token-color-packer-gradient-primary-start: #b4e4ff; + --token-color-packer-gradient-primary-stop: #63d0ff; + --token-color-packer-surface: #d4f2ff; + --token-color-terraform-border: #ebdbfc; + --token-color-terraform-brand-on-dark: #a067da; /** this is an alternative brand color meant to be used on dark backgrounds */ + --token-color-terraform-brand: #7b42bc; + --token-color-terraform-foreground: #773cb4; + --token-color-terraform-gradient-faint-start: #fcfaff; /** this is the 'terraform-50' value at 25% opacity on white */ + --token-color-terraform-gradient-faint-stop: #f4ecff; + --token-color-terraform-gradient-primary-start: #bb8deb; + --token-color-terraform-gradient-primary-stop: #844fba; + --token-color-terraform-surface: #f4ecff; + --token-color-vagrant-border: #c7dbfc; + --token-color-vagrant-brand: #1868f2; + --token-color-vagrant-foreground: #1c61d8; + --token-color-vagrant-gradient-faint-start: #f4faff; /** this is the 'vagrant-50' value at 25% opacity on white */ + --token-color-vagrant-gradient-faint-stop: #d6ebff; + --token-color-vagrant-gradient-primary-start: #639cff; + --token-color-vagrant-gradient-primary-stop: #2e71e5; + --token-color-vagrant-surface: #d6ebff; + --token-color-vault-border: #feec7b; + --token-color-vault-brand: #ffcf25; + --token-color-vault-foreground: #9a6f00; + --token-color-vault-gradient-faint-start: #fffdf2; /** this is the 'vault-50' value at 25% opacity on white */ + --token-color-vault-gradient-faint-stop: #fff9cf; + --token-color-vault-gradient-primary-start: #feec7b; + --token-color-vault-gradient-primary-stop: #ffe543; + --token-color-vault-radar-border: #feec7b; + --token-color-vault-radar-brand: #ffcf25; + --token-color-vault-radar-foreground: #9a6f00; + --token-color-vault-radar-gradient-faint-start: #fffdf2; /** this is the 'vault-radar-50' value at 25% opacity on white */ + --token-color-vault-radar-gradient-faint-stop: #fff9cf; + --token-color-vault-radar-gradient-primary-start: #feec7b; + --token-color-vault-radar-gradient-primary-stop: #ffe543; + --token-color-vault-radar-surface: #fff9cf; + --token-color-vault-secrets-border: #feec7b; + --token-color-vault-secrets-brand: #ffcf25; + --token-color-vault-secrets-foreground: #9a6f00; + --token-color-vault-secrets-gradient-faint-start: #fffdf2; /** this is the 'vault-secrets-50' value at 25% opacity on white */ + --token-color-vault-secrets-gradient-faint-stop: #fff9cf; + --token-color-vault-secrets-gradient-primary-start: #feec7b; + --token-color-vault-secrets-gradient-primary-stop: #ffe543; + --token-color-vault-secrets-surface: #fff9cf; + --token-color-vault-surface: #fff9cf; + --token-color-waypoint-border: #cbf1f3; + --token-color-waypoint-brand: #14c6cb; + --token-color-waypoint-foreground: #008196; + --token-color-waypoint-gradient-faint-start: #f6feff; /** this is the 'waypoint-50' value at 25% opacity on white */ + --token-color-waypoint-gradient-faint-stop: #e0fcff; + --token-color-waypoint-gradient-primary-start: #cbf1f3; + --token-color-waypoint-gradient-primary-stop: #62d4dc; + --token-color-waypoint-surface: #e0fcff; + --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'dash' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'dash' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-size: 12px; + --token-form-checkbox-border-radius: 3px; + --token-form-checkbox-border-width: 1px; + --token-form-checkbox-size: 16px; + --token-form-control-base-border-color-default: var(--token-color-palette-neutral-400); + --token-form-control-base-border-color-hover: var(--token-color-palette-neutral-500); + --token-form-control-base-foreground-placeholder-color: var(--token-color-foreground-faint); + --token-form-control-base-foreground-value-color: var(--token-color-foreground-strong); + --token-form-control-base-surface-color-default: var(--token-color-surface-interactive); + --token-form-control-base-surface-color-hover: var(--token-color-surface-interactive-hover); + --token-form-control-border-radius: 5px; + --token-form-control-border-width: 1px; + --token-form-control-checked-border-color-default: var(--token-color-palette-blue-300); + --token-form-control-checked-border-color-hover: var(--token-color-palette-blue-400); + --token-form-control-checked-foreground-color: var(--token-color-foreground-high-contrast); + --token-form-control-checked-surface-color-default: var(--token-color-palette-blue-200); + --token-form-control-checked-surface-color-hover: var(--token-color-palette-blue-300); + --token-form-control-disabled-border-color: var(--token-color-border-primary); + --token-form-control-disabled-foreground-color: var(--token-color-foreground-disabled); + --token-form-control-disabled-surface-color: var(--token-color-surface-interactive-disabled); + --token-form-control-invalid-border-color-default: var(--token-color-palette-red-300); + --token-form-control-invalid-border-color-hover: var(--token-color-palette-red-400); + --token-form-control-padding: 7px; /** Notice: we have to take in account the border, so it's 1px less than in Figma. */ + --token-form-control-readonly-border-color: var(--token-color-border-faint); + --token-form-control-readonly-foreground-color: var(--token-color-foreground-primary); + --token-form-control-readonly-surface-color: var(--token-color-surface-strong); + --token-form-error-color: var(--token-color-palette-red-300); + --token-form-error-icon-size: 14px; + --token-form-helper-text-color: var(--token-color-foreground-faint); + --token-form-indicator-optional-color: var(--token-color-foreground-faint); + --token-form-label-color: var(--token-color-foreground-strong); + --token-form-legend-color: var(--token-form-label-color); + --token-form-radio-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'dot' color is hardcoded here! */ + --token-form-radio-background-image-data-url: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e"); /** notice: the 'dot' color is hardcoded here! */ + --token-form-radio-background-image-size: 12px; + --token-form-radio-border-width: 1px; + --token-form-radio-size: 16px; + --token-form-radiocard-border-width: 1px; + --token-form-radiocard-content-padding: 24px; + --token-form-radiocard-control-padding: 8px; + --token-form-radiocard-group-gap: 16px; + --token-form-radiocard-transition-duration: 0.2s; + --token-form-select-background-image-data-url-disabled: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E"); /** notice: the 'caret' color is hardcoded here! */ + --token-form-select-background-image-data-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E"); /** notice: the 'caret' color is hardcoded here! */ + --token-form-select-background-image-position-right-x: var(--token-form-control-padding); + --token-form-select-background-image-position-top-y: 9px; + --token-form-select-background-image-size: 16px; + --token-form-text-input-background-image-data-url-date: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-cancel: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-loading: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color and animation are hardcoded here! */ + --token-form-text-input-background-image-data-url-search: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-time: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-position-x: var(--token-form-control-padding); + --token-form-text-input-background-image-size: 16px; + --token-form-toggle-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-background-image-position-x: 2px; + --token-form-toggle-background-image-size: 12px; + --token-form-toggle-base-surface-color-default: var(--token-color-surface-strong); /** the toggle has a different base surface color, compared to the other controls */ + --token-form-toggle-border-radius: 3px; + --token-form-toggle-border-width: 1px; + --token-form-toggle-height: 16px; + --token-form-toggle-thumb-size: var(--token-form-toggle-height); + --token-form-toggle-transition-duration: 0.2s; + --token-form-toggle-transition-timing-function: cubic-bezier(0.68, -0.2, 0.265, 1.15); + --token-form-toggle-width: 32px; + --token-pagination-child-spacing-horizontal: 20px; + --token-pagination-child-spacing-vertical: 8px; + --token-pagination-nav-control-focus-inset: 4px; + --token-pagination-nav-control-height: 36px; + --token-pagination-nav-control-icon-spacing: 6px; + --token-pagination-nav-control-padding-horizontal: 12px; + --token-pagination-nav-indicator-height: 2px; + --token-pagination-nav-indicator-spacing: 6px; + --token-tabs-divider-height: 1px; + --token-tabs-indicator-height: 3px; + --token-tabs-indicator-transition-duration: 0.6s; + --token-tabs-indicator-transition-function: cubic-bezier(0.5, 1, 0.89, 1); + --token-tabs-tab-border-radius: 5px; + --token-tabs-tab-focus-inset: 6px; + --token-tabs-tab-gutter: 6px; + --token-tabs-tab-height-large: 48px; + --token-tabs-tab-height-medium: 36px; + --token-tabs-tab-padding-horizontal-large: 20px; + --token-tabs-tab-padding-horizontal-medium: 12px; + --token-tabs-tab-padding-vertical: 0px; + --token-tooltip-focus-offset: -2px; + --token-tooltip-transition-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); +} \ No newline at end of file diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g0/themed-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g0/themed-tokens.css new file mode 100644 index 00000000000..887cefa83d9 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g0/themed-tokens.css @@ -0,0 +1,309 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-app-footer-focus-color-action-internal: #0f62fe; + --token-badge-border-radius: var(--token-border-radius-rounded); + --token-badge-count-padding-horizontal-large: 12px; + --token-badge-count-padding-horizontal-medium: 8px; + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-foreground-color-critical-filled: #a2191f; /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: #ffffff; + --token-badge-foreground-color-critical-outlined: #a2191f; + --token-badge-foreground-color-highlight-filled: #6929c4; /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: #ffffff; + --token-badge-foreground-color-highlight-outlined: #6929c4; + --token-badge-foreground-color-neutral-dark-mode-filled: #ffffff; + --token-badge-foreground-color-neutral-dark-mode-inverted: #161616; + --token-badge-foreground-color-neutral-dark-mode-outlined: #ffffff; + --token-badge-foreground-color-neutral-filled: #161616; + --token-badge-foreground-color-neutral-inverted: #e0e0e0; + --token-badge-foreground-color-neutral-outlined: #161616; + --token-badge-foreground-color-success-filled: #0e6027; /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: #ffffff; + --token-badge-foreground-color-success-outlined: #0e6027; + --token-badge-foreground-color-warning-filled: #8a3800; + --token-badge-foreground-color-warning-inverted: #ffffff; + --token-badge-foreground-color-warning-outlined: #8a3800; + --token-badge-gap-large: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-small: 4px; + --token-badge-height-small: 18px; + --token-badge-padding-horizontal-large: 12px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-small: 8px; + --token-badge-padding-vertical-small: 1px; + --token-badge-surface-color-critical-filled: #ffd7d9; /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: #a2191f; + --token-badge-surface-color-highlight-filled: #e8daff; /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: #6929c4; + --token-badge-surface-color-neutral-dark-mode-filled: #393939; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: #e0e0e0; + --token-badge-surface-color-neutral-filled: #e0e0e0; + --token-badge-surface-color-neutral-inverted: #393939; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-success-filled: #a7f0ba; /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: #0e6027; + --token-badge-surface-color-warning-filled: #ffd9be; /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: #8a3800; + --token-badge-typography-font-size-large: 0.75rem; + --token-badge-typography-font-size-medium: 0.75rem; + --token-badge-typography-font-size-small: 0.75rem; + --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */ + --token-border-radius-large: 0px; + --token-border-radius-medium: 0px; + --token-border-radius-small: 0px; + --token-border-radius-x-small: 0px; + --token-button-border-color-critical-active: rgba(0, 0, 0, 0); + --token-button-border-color-critical-default: rgba(0, 0, 0, 0); + --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-hover: rgba(0, 0, 0, 0); + --token-button-border-color-primary-active: rgba(0, 0, 0, 0); + --token-button-border-color-primary-default: rgba(0, 0, 0, 0); + --token-button-border-color-primary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-hover: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-active: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-default: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0); + --token-button-border-radius: 0px; + --token-button-foreground-color-critical-active: #ffffff; + --token-button-foreground-color-critical-default: #ffffff; + --token-button-foreground-color-critical-focus: #ffffff; + --token-button-foreground-color-critical-hover: #ffffff; + --token-button-foreground-color-disabled: #8d8d8d; + --token-button-foreground-color-primary-active: #ffffff; + --token-button-foreground-color-primary-default: #ffffff; + --token-button-foreground-color-primary-focus: #ffffff; + --token-button-foreground-color-primary-hover: #ffffff; + --token-button-foreground-color-secondary-active: #ffffff; + --token-button-foreground-color-secondary-default: #ffffff; + --token-button-foreground-color-secondary-focus: #ffffff; + --token-button-foreground-color-secondary-hover: #ffffff; + --token-button-foreground-color-tertiary-active: #ffffff; + --token-button-foreground-color-tertiary-default: #0f62fe; + --token-button-foreground-color-tertiary-focus: #ffffff; + --token-button-foreground-color-tertiary-hover: #ffffff; + --token-button-gap: 32px; + --token-button-height-large: 48px; + --token-button-height-medium: 40px; + --token-button-height-small: 32px; + --token-button-icon-size-large: 16px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-small: 16px; + --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-surface-color-critical-active: #750e13; + --token-button-surface-color-critical-default: #da1e28; + --token-button-surface-color-critical-focus: #da1e28; + --token-button-surface-color-critical-hover: #b81921; + --token-button-surface-color-disabled: #c6c6c6; + --token-button-surface-color-primary-active: #002d9c; + --token-button-surface-color-primary-default: #0f62fe; + --token-button-surface-color-primary-focus: #0f62fe; + --token-button-surface-color-primary-hover: #0050e6; + --token-button-surface-color-secondary-active: #6f6f6f; + --token-button-surface-color-secondary-default: #393939; + --token-button-surface-color-secondary-focus: #393939; + --token-button-surface-color-secondary-hover: #474747; + --token-button-surface-color-tertiary-active: #002d9c; + --token-button-surface-color-tertiary-focus: #0050e6; + --token-button-surface-color-tertiary-hover: #0050e6; + --token-button-typography-font-size-large: 0.875rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-small: 0.875rem; + --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */ + --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-color-border-action: #0f62fe; + --token-color-border-critical: #ff8389; + --token-color-border-faint: #e0e0e0; + --token-color-border-highlight: #be95ff; + --token-color-border-primary: #c6c6c6; + --token-color-border-strong: #8d8d8d; + --token-color-border-success: #42be65; + --token-color-border-warning: #d2a106; + --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-action-internal: #ffffff; + --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #ffffff; + --token-color-foreground-action-active: #0043ce; + --token-color-foreground-action-hover: #0043ce; + --token-color-foreground-action: #0f62fe; + --token-color-foreground-critical-high-contrast: #750e13; + --token-color-foreground-critical-on-surface: #a2191f; + --token-color-foreground-critical: #da1e28; + --token-color-foreground-disabled: rgba(22, 22, 22, 0.25); + --token-color-foreground-faint: #525252; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-highlight-high-contrast: #491d8b; + --token-color-foreground-highlight-on-surface: #6929c4; + --token-color-foreground-highlight: #8a3ffc; + --token-color-foreground-primary: #161616; + --token-color-foreground-strong: #161616; + --token-color-foreground-success-high-contrast: #044317; + --token-color-foreground-success-on-surface: #0e6027; + --token-color-foreground-success: #198038; + --token-color-foreground-warning-high-contrast: #483700; + --token-color-foreground-warning-on-surface: #684e00; + --token-color-foreground-warning: #8e6a00; + --token-color-hashicorp-brand: #000000; + --token-color-hcp-brand: #000000; + --token-color-page-faint: #ffffff; + --token-color-page-primary: #ffffff; + --token-color-palette-alpha-100: #e0e0e0; + --token-color-palette-alpha-200: #c6c6c6; + --token-color-palette-alpha-300: #8d8d8d; + --token-color-palette-amber-100: #ffd9be; + --token-color-palette-amber-200: #ba4e00; + --token-color-palette-amber-300: #8a3800; + --token-color-palette-amber-400: #5e2900; + --token-color-palette-amber-500: #3e1a00; + --token-color-palette-amber-50: #fff2e8; + --token-color-palette-blue-100: #d0e2ff; + --token-color-palette-blue-200: #0f62fe; + --token-color-palette-blue-300: #0043ce; + --token-color-palette-blue-400: #002d9c; + --token-color-palette-blue-500: #001141; + --token-color-palette-blue-50: #edf5ff; + --token-color-palette-green-100: #a7f0ba; + --token-color-palette-green-200: #24a148; + --token-color-palette-green-300: #198038; + --token-color-palette-green-400: #0e6027; + --token-color-palette-green-500: #044317; + --token-color-palette-green-50: #defbe6; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-neutral-100: #e0e0e0; + --token-color-palette-neutral-200: #c6c6c6; + --token-color-palette-neutral-300: #a8a8a8; + --token-color-palette-neutral-400: #8d8d8d; + --token-color-palette-neutral-500: #525252; + --token-color-palette-neutral-50: #f4f4f4; + --token-color-palette-neutral-600: #393939; + --token-color-palette-neutral-700: #161616; + --token-color-palette-purple-100: #e8daff; + --token-color-palette-purple-200: #a56eff; + --token-color-palette-purple-300: #8a3ffc; + --token-color-palette-purple-400: #6929c4; + --token-color-palette-purple-500: #31135e; + --token-color-palette-purple-50: #f6f2ff; + --token-color-palette-red-100: #ffd7d9; + --token-color-palette-red-200: #da1e28; + --token-color-palette-red-300: #a2191f; + --token-color-palette-red-400: #750e13; + --token-color-palette-red-500: #520408; + --token-color-palette-red-50: #fff1f1; + --token-color-surface-action: #d0e2ff; + --token-color-surface-critical: #ffd7d9; + --token-color-surface-faint: #f4f4f4; + --token-color-surface-high-contrast: #393939; + --token-color-surface-highlight: #e8daff; + --token-color-surface-interactive-active: #c6c6c6; + --token-color-surface-interactive-disabled: #c6c6c6; + --token-color-surface-interactive-hover: #e8e8e8; + --token-color-surface-interactive: #f4f4f4; + --token-color-surface-primary: #f4f4f4; + --token-color-surface-strong: #e0e0e0; + --token-color-surface-success: #a7f0ba; + --token-color-surface-warning: #fcf4d6; + --token-color-vault-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-radar-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ + --token-color-vault-secrets-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-dismiss-button-border-color-active: rgba(0, 0, 0, 0); + --token-dismiss-button-foreground-color-active: #161616; + --token-dismiss-button-foreground-color-default: #161616; + --token-dismiss-button-icon-size: 20px; + --token-dismiss-button-size: 48px; + --token-dismiss-button-surface-color-active: rgba(141, 141, 141, 0.5); + --token-dismiss-button-surface-color-hover: rgba(141, 141, 141, 0.12); + --token-elevation-high-box-shadow: none; + --token-elevation-higher-box-shadow: none; + --token-elevation-inset-box-shadow: none; + --token-elevation-low-box-shadow: none; + --token-elevation-mid-box-shadow: none; + --token-elevation-overlay-box-shadow: none; + --token-focus-ring-action-box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe; + --token-focus-ring-critical-box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe; + --token-form-radiocard-border-color-default-checked: #ffc0cb; + --token-form-radiocard-border-color-default: rgba(0, 0, 0, 0); + --token-form-radiocard-border-color-focus: #ffc0cb; + --token-form-radiocard-border-radius: 0px; + --token-icon-tile-border-color-logo: #c6c6c6; + --token-icon-tile-border-color-overlay: #e0e0e0; + --token-icon-tile-surface-color-overlay: #ffffff; + --token-rich-tooltip-bubble-arrow-size: 12px; + --token-rich-tooltip-bubble-border-color: var(--token-color-palette-alpha-200); + --token-rich-tooltip-bubble-border-radius: 2px; + --token-rich-tooltip-bubble-max-width: 288px; + --token-rich-tooltip-toggle-foreground-color-active: #525252; + --token-rich-tooltip-toggle-foreground-color-default: #525252; + --token-rich-tooltip-toggle-foreground-color-hover: #161616; + --token-rich-tooltip-toggle-gap-horizontal: 8px; + --token-rich-tooltip-toggle-icon-size: 14px; + --token-surface-base-box-shadow: none; + --token-surface-high-box-shadow: none; + --token-surface-higher-box-shadow: none; + --token-surface-inset-box-shadow: none; + --token-surface-low-box-shadow: none; + --token-surface-mid-box-shadow: none; + --token-surface-overlay-box-shadow: none; + --token-tooltip-border-radius: 2px; + --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); + --token-tooltip-caret-height: 6px; + --token-tooltip-caret-width: 12px; + --token-tooltip-max-width: 288px; + --token-tooltip-padding-horizontal: 16px; + --token-tooltip-padding-vertical: 16px; + --token-typography-body-100-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-body-200-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-300-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-code-100-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ + --token-typography-code-200-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-300-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-display-100-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-letter-spacing: 0.16px; + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-200-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-letter-spacing: 0px; + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-300-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-letter-spacing: 0px; + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-400-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-letter-spacing: 0px; + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-500-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-letter-spacing: 0px; + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-font-stack-code: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + --token-typography-font-stack-display: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-font-stack-text: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-font-weight-bold: 600; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-semibold: 600; +} \ No newline at end of file diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g10/common-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g10/common-tokens.css new file mode 100644 index 00000000000..142edfe02e2 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g10/common-tokens.css @@ -0,0 +1,227 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-app-header-height: 60px; + --token-app-header-home-link-size: 36px; + --token-app-header-logo-size: 28px; + --token-app-side-nav-body-list-item-border-radius: 5px; + --token-app-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-app-side-nav-body-list-item-height: 36px; + --token-app-side-nav-body-list-item-padding-horizontal: 8px; + --token-app-side-nav-body-list-item-padding-vertical: 4px; + --token-app-side-nav-body-list-item-spacing-vertical: 2px; + --token-app-side-nav-body-list-margin-vertical: 24px; + --token-app-side-nav-color-foreground-faint: var(--token-color-foreground-faint); + --token-app-side-nav-color-foreground-primary: var(--token-color-foreground-primary); + --token-app-side-nav-color-foreground-strong: var(--token-color-foreground-primary); + --token-app-side-nav-color-surface-interactive-active: var(--token-color-palette-neutral-300); + --token-app-side-nav-color-surface-interactive-hover: var(--token-color-surface-interactive-hover); + --token-app-side-nav-color-surface-primary: var(--token-color-surface-faint); + --token-app-side-nav-header-actions-spacing: 8px; + --token-app-side-nav-header-home-link-logo-size-minimized: 32px; + --token-app-side-nav-header-home-link-logo-size: 48px; + --token-app-side-nav-header-home-link-padding: 4px; + --token-app-side-nav-toggle-button-border-radius: 5px; + --token-app-side-nav-wrapper-border-color: var(--token-color-palette-neutral-200); + --token-app-side-nav-wrapper-border-width: 1px; + --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-app-side-nav-wrapper-padding-horizontal: 16px; + --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-app-side-nav-wrapper-padding-vertical: 16px; + --token-badge-height-large: 32px; + --token-badge-height-medium: 24px; + --token-badge-icon-size-large: 16px; + --token-badge-icon-size-medium: 16px; + --token-badge-icon-size-small: 12px; + --token-badge-padding-vertical-large: 4px; + --token-badge-padding-vertical-medium: 4px; + --token-badge-surface-color-neutral-dark-mode-outlined: rgba(0, 0, 0, 0); + --token-badge-surface-color-neutral-outlined: rgba(0, 0, 0, 0); + --token-badge-typography-line-height-medium: 1.2308; /** 16px = 1.2308 */ + --token-badge-typography-line-height-small: 1.2308; /** 16px = 1.2308 */ + --token-border-radius-rounded: 1000000000px; + --token-button-border-color-disabled: var(--token-color-border-primary); + --token-button-border-color-tertiary-active: var(--token-color-border-strong); + --token-button-border-color-tertiary-default: rgba(0, 0, 0, 0); + --token-button-border-color-tertiary-focus-external: var(--token-color-focus-action-external); + --token-button-border-color-tertiary-focus-internal: var(--token-color-focus-action-internal); + --token-button-border-color-tertiary-hover: var(--token-color-border-strong); + --token-button-border-width: 1px; + --token-button-focus-border-width: 3px; + --token-button-surface-color-tertiary-default: rgba(0, 0, 0, 0); + --token-color-boundary-border: #fbd7d8; + --token-color-boundary-brand: #f24c53; + --token-color-boundary-foreground: #cf2d32; + --token-color-boundary-gradient-faint-start: #fffafa; /** this is the 'boundary-50' value at 25% opacity on white */ + --token-color-boundary-gradient-faint-stop: #ffecec; + --token-color-boundary-gradient-primary-start: #f97076; + --token-color-boundary-gradient-primary-stop: #db363b; + --token-color-boundary-surface: #ffecec; + --token-color-consul-border: #ffcede; + --token-color-consul-brand: #e03875; + --token-color-consul-foreground: #d01c5b; + --token-color-consul-gradient-faint-start: #fff9fb; /** this is the 'consul-50' value at 25% opacity on white */ + --token-color-consul-gradient-faint-stop: #ffe9f1; + --token-color-consul-gradient-primary-start: #ff99be; + --token-color-consul-gradient-primary-stop: #da306e; + --token-color-consul-surface: #ffe9f1; + --token-color-nomad-border: #bff3dd; + --token-color-nomad-brand: #06d092; + --token-color-nomad-foreground: #008661; + --token-color-nomad-gradient-faint-start: #f3fff9; /** this is the 'nomad-50' value at 25% opacity on white */ + --token-color-nomad-gradient-faint-stop: #d3fdeb; + --token-color-nomad-gradient-primary-start: #bff3dd; + --token-color-nomad-gradient-primary-stop: #60dea9; + --token-color-nomad-surface: #d3fdeb; + --token-color-packer-border: #b4e4ff; + --token-color-packer-brand: #02a8ef; + --token-color-packer-foreground: #007eb4; + --token-color-packer-gradient-faint-start: #f3fcff; /** this is the 'packer-50' value at 25% opacity on white */ + --token-color-packer-gradient-faint-stop: #d4f2ff; + --token-color-packer-gradient-primary-start: #b4e4ff; + --token-color-packer-gradient-primary-stop: #63d0ff; + --token-color-packer-surface: #d4f2ff; + --token-color-terraform-border: #ebdbfc; + --token-color-terraform-brand-on-dark: #a067da; /** this is an alternative brand color meant to be used on dark backgrounds */ + --token-color-terraform-brand: #7b42bc; + --token-color-terraform-foreground: #773cb4; + --token-color-terraform-gradient-faint-start: #fcfaff; /** this is the 'terraform-50' value at 25% opacity on white */ + --token-color-terraform-gradient-faint-stop: #f4ecff; + --token-color-terraform-gradient-primary-start: #bb8deb; + --token-color-terraform-gradient-primary-stop: #844fba; + --token-color-terraform-surface: #f4ecff; + --token-color-vagrant-border: #c7dbfc; + --token-color-vagrant-brand: #1868f2; + --token-color-vagrant-foreground: #1c61d8; + --token-color-vagrant-gradient-faint-start: #f4faff; /** this is the 'vagrant-50' value at 25% opacity on white */ + --token-color-vagrant-gradient-faint-stop: #d6ebff; + --token-color-vagrant-gradient-primary-start: #639cff; + --token-color-vagrant-gradient-primary-stop: #2e71e5; + --token-color-vagrant-surface: #d6ebff; + --token-color-vault-border: #feec7b; + --token-color-vault-brand: #ffcf25; + --token-color-vault-foreground: #9a6f00; + --token-color-vault-gradient-faint-start: #fffdf2; /** this is the 'vault-50' value at 25% opacity on white */ + --token-color-vault-gradient-faint-stop: #fff9cf; + --token-color-vault-gradient-primary-start: #feec7b; + --token-color-vault-gradient-primary-stop: #ffe543; + --token-color-vault-radar-border: #feec7b; + --token-color-vault-radar-brand: #ffcf25; + --token-color-vault-radar-foreground: #9a6f00; + --token-color-vault-radar-gradient-faint-start: #fffdf2; /** this is the 'vault-radar-50' value at 25% opacity on white */ + --token-color-vault-radar-gradient-faint-stop: #fff9cf; + --token-color-vault-radar-gradient-primary-start: #feec7b; + --token-color-vault-radar-gradient-primary-stop: #ffe543; + --token-color-vault-radar-surface: #fff9cf; + --token-color-vault-secrets-border: #feec7b; + --token-color-vault-secrets-brand: #ffcf25; + --token-color-vault-secrets-foreground: #9a6f00; + --token-color-vault-secrets-gradient-faint-start: #fffdf2; /** this is the 'vault-secrets-50' value at 25% opacity on white */ + --token-color-vault-secrets-gradient-faint-stop: #fff9cf; + --token-color-vault-secrets-gradient-primary-start: #feec7b; + --token-color-vault-secrets-gradient-primary-stop: #ffe543; + --token-color-vault-secrets-surface: #fff9cf; + --token-color-vault-surface: #fff9cf; + --token-color-waypoint-border: #cbf1f3; + --token-color-waypoint-brand: #14c6cb; + --token-color-waypoint-foreground: #008196; + --token-color-waypoint-gradient-faint-start: #f6feff; /** this is the 'waypoint-50' value at 25% opacity on white */ + --token-color-waypoint-gradient-faint-stop: #e0fcff; + --token-color-waypoint-gradient-primary-start: #cbf1f3; + --token-color-waypoint-gradient-primary-stop: #62d4dc; + --token-color-waypoint-surface: #e0fcff; + --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'dash' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'dash' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-size: 12px; + --token-form-checkbox-border-radius: 3px; + --token-form-checkbox-border-width: 1px; + --token-form-checkbox-size: 16px; + --token-form-control-base-border-color-default: var(--token-color-palette-neutral-400); + --token-form-control-base-border-color-hover: var(--token-color-palette-neutral-500); + --token-form-control-base-foreground-placeholder-color: var(--token-color-foreground-faint); + --token-form-control-base-foreground-value-color: var(--token-color-foreground-strong); + --token-form-control-base-surface-color-default: var(--token-color-surface-interactive); + --token-form-control-base-surface-color-hover: var(--token-color-surface-interactive-hover); + --token-form-control-border-radius: 5px; + --token-form-control-border-width: 1px; + --token-form-control-checked-border-color-default: var(--token-color-palette-blue-300); + --token-form-control-checked-border-color-hover: var(--token-color-palette-blue-400); + --token-form-control-checked-foreground-color: var(--token-color-foreground-high-contrast); + --token-form-control-checked-surface-color-default: var(--token-color-palette-blue-200); + --token-form-control-checked-surface-color-hover: var(--token-color-palette-blue-300); + --token-form-control-disabled-border-color: var(--token-color-border-primary); + --token-form-control-disabled-foreground-color: var(--token-color-foreground-disabled); + --token-form-control-disabled-surface-color: var(--token-color-surface-interactive-disabled); + --token-form-control-invalid-border-color-default: var(--token-color-palette-red-300); + --token-form-control-invalid-border-color-hover: var(--token-color-palette-red-400); + --token-form-control-padding: 7px; /** Notice: we have to take in account the border, so it's 1px less than in Figma. */ + --token-form-control-readonly-border-color: var(--token-color-border-faint); + --token-form-control-readonly-foreground-color: var(--token-color-foreground-primary); + --token-form-control-readonly-surface-color: var(--token-color-surface-strong); + --token-form-error-color: var(--token-color-palette-red-300); + --token-form-error-icon-size: 14px; + --token-form-helper-text-color: var(--token-color-foreground-faint); + --token-form-indicator-optional-color: var(--token-color-foreground-faint); + --token-form-label-color: var(--token-color-foreground-strong); + --token-form-legend-color: var(--token-form-label-color); + --token-form-radio-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'dot' color is hardcoded here! */ + --token-form-radio-background-image-data-url: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e"); /** notice: the 'dot' color is hardcoded here! */ + --token-form-radio-background-image-size: 12px; + --token-form-radio-border-width: 1px; + --token-form-radio-size: 16px; + --token-form-radiocard-border-width: 1px; + --token-form-radiocard-content-padding: 24px; + --token-form-radiocard-control-padding: 8px; + --token-form-radiocard-group-gap: 16px; + --token-form-radiocard-transition-duration: 0.2s; + --token-form-select-background-image-data-url-disabled: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E"); /** notice: the 'caret' color is hardcoded here! */ + --token-form-select-background-image-data-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E"); /** notice: the 'caret' color is hardcoded here! */ + --token-form-select-background-image-position-right-x: var(--token-form-control-padding); + --token-form-select-background-image-position-top-y: 9px; + --token-form-select-background-image-size: 16px; + --token-form-text-input-background-image-data-url-date: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-cancel: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-loading: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color and animation are hardcoded here! */ + --token-form-text-input-background-image-data-url-search: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-time: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-position-x: var(--token-form-control-padding); + --token-form-text-input-background-image-size: 16px; + --token-form-toggle-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-background-image-position-x: 2px; + --token-form-toggle-background-image-size: 12px; + --token-form-toggle-base-surface-color-default: var(--token-color-surface-strong); /** the toggle has a different base surface color, compared to the other controls */ + --token-form-toggle-border-radius: 3px; + --token-form-toggle-border-width: 1px; + --token-form-toggle-height: 16px; + --token-form-toggle-thumb-size: var(--token-form-toggle-height); + --token-form-toggle-transition-duration: 0.2s; + --token-form-toggle-transition-timing-function: cubic-bezier(0.68, -0.2, 0.265, 1.15); + --token-form-toggle-width: 32px; + --token-pagination-child-spacing-horizontal: 20px; + --token-pagination-child-spacing-vertical: 8px; + --token-pagination-nav-control-focus-inset: 4px; + --token-pagination-nav-control-height: 36px; + --token-pagination-nav-control-icon-spacing: 6px; + --token-pagination-nav-control-padding-horizontal: 12px; + --token-pagination-nav-indicator-height: 2px; + --token-pagination-nav-indicator-spacing: 6px; + --token-tabs-divider-height: 1px; + --token-tabs-indicator-height: 3px; + --token-tabs-indicator-transition-duration: 0.6s; + --token-tabs-indicator-transition-function: cubic-bezier(0.5, 1, 0.89, 1); + --token-tabs-tab-border-radius: 5px; + --token-tabs-tab-focus-inset: 6px; + --token-tabs-tab-gutter: 6px; + --token-tabs-tab-height-large: 48px; + --token-tabs-tab-height-medium: 36px; + --token-tabs-tab-padding-horizontal-large: 20px; + --token-tabs-tab-padding-horizontal-medium: 12px; + --token-tabs-tab-padding-vertical: 0px; + --token-tooltip-focus-offset: -2px; + --token-tooltip-transition-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); +} \ No newline at end of file diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g10/themed-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g10/themed-tokens.css new file mode 100644 index 00000000000..d9c528520f5 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g10/themed-tokens.css @@ -0,0 +1,309 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-app-footer-focus-color-action-internal: #0f62fe; + --token-badge-border-radius: var(--token-border-radius-rounded); + --token-badge-count-padding-horizontal-large: 12px; + --token-badge-count-padding-horizontal-medium: 8px; + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-foreground-color-critical-filled: #a2191f; /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: #ffffff; + --token-badge-foreground-color-critical-outlined: #a2191f; + --token-badge-foreground-color-highlight-filled: #6929c4; /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: #ffffff; + --token-badge-foreground-color-highlight-outlined: #6929c4; + --token-badge-foreground-color-neutral-dark-mode-filled: #ffffff; + --token-badge-foreground-color-neutral-dark-mode-inverted: #161616; + --token-badge-foreground-color-neutral-dark-mode-outlined: #ffffff; + --token-badge-foreground-color-neutral-filled: #161616; + --token-badge-foreground-color-neutral-inverted: #e0e0e0; + --token-badge-foreground-color-neutral-outlined: #161616; + --token-badge-foreground-color-success-filled: #0e6027; /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: #ffffff; + --token-badge-foreground-color-success-outlined: #0e6027; + --token-badge-foreground-color-warning-filled: #8a3800; + --token-badge-foreground-color-warning-inverted: #ffffff; + --token-badge-foreground-color-warning-outlined: #8a3800; + --token-badge-gap-large: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-small: 4px; + --token-badge-height-small: 18px; + --token-badge-padding-horizontal-large: 12px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-small: 8px; + --token-badge-padding-vertical-small: 1px; + --token-badge-surface-color-critical-filled: #ffd7d9; /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: #a2191f; + --token-badge-surface-color-highlight-filled: #e8daff; /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: #6929c4; + --token-badge-surface-color-neutral-dark-mode-filled: #393939; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: #e0e0e0; + --token-badge-surface-color-neutral-filled: #e0e0e0; + --token-badge-surface-color-neutral-inverted: #393939; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-success-filled: #a7f0ba; /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: #0e6027; + --token-badge-surface-color-warning-filled: #ffd9be; /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: #8a3800; + --token-badge-typography-font-size-large: 0.75rem; + --token-badge-typography-font-size-medium: 0.75rem; + --token-badge-typography-font-size-small: 0.75rem; + --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */ + --token-border-radius-large: 0px; + --token-border-radius-medium: 0px; + --token-border-radius-small: 0px; + --token-border-radius-x-small: 0px; + --token-button-border-color-critical-active: rgba(0, 0, 0, 0); + --token-button-border-color-critical-default: rgba(0, 0, 0, 0); + --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-hover: rgba(0, 0, 0, 0); + --token-button-border-color-primary-active: rgba(0, 0, 0, 0); + --token-button-border-color-primary-default: rgba(0, 0, 0, 0); + --token-button-border-color-primary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-hover: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-active: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-default: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0); + --token-button-border-radius: 0px; + --token-button-foreground-color-critical-active: #ffffff; + --token-button-foreground-color-critical-default: #ffffff; + --token-button-foreground-color-critical-focus: #ffffff; + --token-button-foreground-color-critical-hover: #ffffff; + --token-button-foreground-color-disabled: #8d8d8d; + --token-button-foreground-color-primary-active: #ffffff; + --token-button-foreground-color-primary-default: #ffffff; + --token-button-foreground-color-primary-focus: #ffffff; + --token-button-foreground-color-primary-hover: #ffffff; + --token-button-foreground-color-secondary-active: #ffffff; + --token-button-foreground-color-secondary-default: #ffffff; + --token-button-foreground-color-secondary-focus: #ffffff; + --token-button-foreground-color-secondary-hover: #ffffff; + --token-button-foreground-color-tertiary-active: #ffffff; + --token-button-foreground-color-tertiary-default: #0f62fe; + --token-button-foreground-color-tertiary-focus: #ffffff; + --token-button-foreground-color-tertiary-hover: #ffffff; + --token-button-gap: 32px; + --token-button-height-large: 48px; + --token-button-height-medium: 40px; + --token-button-height-small: 32px; + --token-button-icon-size-large: 16px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-small: 16px; + --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-surface-color-critical-active: #750e13; + --token-button-surface-color-critical-default: #da1e28; + --token-button-surface-color-critical-focus: #da1e28; + --token-button-surface-color-critical-hover: #b81921; + --token-button-surface-color-disabled: #c6c6c6; + --token-button-surface-color-primary-active: #002d9c; + --token-button-surface-color-primary-default: #0f62fe; + --token-button-surface-color-primary-focus: #0f62fe; + --token-button-surface-color-primary-hover: #0050e6; + --token-button-surface-color-secondary-active: #6f6f6f; + --token-button-surface-color-secondary-default: #393939; + --token-button-surface-color-secondary-focus: #393939; + --token-button-surface-color-secondary-hover: #474747; + --token-button-surface-color-tertiary-active: #002d9c; + --token-button-surface-color-tertiary-focus: #0050e6; + --token-button-surface-color-tertiary-hover: #0050e6; + --token-button-typography-font-size-large: 0.875rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-small: 0.875rem; + --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */ + --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-color-border-action: #0f62fe; + --token-color-border-critical: #ff8389; + --token-color-border-faint: #c6c6c6; + --token-color-border-highlight: #be95ff; + --token-color-border-primary: #e0e0e0; + --token-color-border-strong: #8d8d8d; + --token-color-border-success: #42be65; + --token-color-border-warning: #d2a106; + --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-action-internal: #ffffff; + --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #ffffff; + --token-color-foreground-action-active: #0043ce; + --token-color-foreground-action-hover: #0043ce; + --token-color-foreground-action: #0f62fe; + --token-color-foreground-critical-high-contrast: #750e13; + --token-color-foreground-critical-on-surface: #a2191f; + --token-color-foreground-critical: #da1e28; + --token-color-foreground-disabled: rgba(22, 22, 22, 0.25); + --token-color-foreground-faint: #525252; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-highlight-high-contrast: #491d8b; + --token-color-foreground-highlight-on-surface: #6929c4; + --token-color-foreground-highlight: #8a3ffc; + --token-color-foreground-primary: #161616; + --token-color-foreground-strong: #161616; + --token-color-foreground-success-high-contrast: #044317; + --token-color-foreground-success-on-surface: #0e6027; + --token-color-foreground-success: #198038; + --token-color-foreground-warning-high-contrast: #483700; + --token-color-foreground-warning-on-surface: #684e00; + --token-color-foreground-warning: #8e6a00; + --token-color-hashicorp-brand: #000000; + --token-color-hcp-brand: #000000; + --token-color-page-faint: #f4f4f4; + --token-color-page-primary: #f4f4f4; + --token-color-palette-alpha-100: #c6c6c6; + --token-color-palette-alpha-200: #e0e0e0; + --token-color-palette-alpha-300: #8d8d8d; + --token-color-palette-amber-100: #ffd9be; + --token-color-palette-amber-200: #ba4e00; + --token-color-palette-amber-300: #8a3800; + --token-color-palette-amber-400: #5e2900; + --token-color-palette-amber-500: #3e1a00; + --token-color-palette-amber-50: #fff2e8; + --token-color-palette-blue-100: #d0e2ff; + --token-color-palette-blue-200: #0f62fe; + --token-color-palette-blue-300: #0043ce; + --token-color-palette-blue-400: #002d9c; + --token-color-palette-blue-500: #001141; + --token-color-palette-blue-50: #edf5ff; + --token-color-palette-green-100: #a7f0ba; + --token-color-palette-green-200: #24a148; + --token-color-palette-green-300: #198038; + --token-color-palette-green-400: #0e6027; + --token-color-palette-green-500: #044317; + --token-color-palette-green-50: #defbe6; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-neutral-100: #e0e0e0; + --token-color-palette-neutral-200: #c6c6c6; + --token-color-palette-neutral-300: #a8a8a8; + --token-color-palette-neutral-400: #8d8d8d; + --token-color-palette-neutral-500: #525252; + --token-color-palette-neutral-50: #f4f4f4; + --token-color-palette-neutral-600: #393939; + --token-color-palette-neutral-700: #161616; + --token-color-palette-purple-100: #e8daff; + --token-color-palette-purple-200: #a56eff; + --token-color-palette-purple-300: #8a3ffc; + --token-color-palette-purple-400: #6929c4; + --token-color-palette-purple-500: #31135e; + --token-color-palette-purple-50: #f6f2ff; + --token-color-palette-red-100: #ffd7d9; + --token-color-palette-red-200: #da1e28; + --token-color-palette-red-300: #a2191f; + --token-color-palette-red-400: #750e13; + --token-color-palette-red-500: #520408; + --token-color-palette-red-50: #fff1f1; + --token-color-surface-action: #d0e2ff; + --token-color-surface-critical: #ffd7d9; + --token-color-surface-faint: #ffffff; + --token-color-surface-high-contrast: #393939; + --token-color-surface-highlight: #e8daff; + --token-color-surface-interactive-active: #c6c6c6; + --token-color-surface-interactive-disabled: #c6c6c6; + --token-color-surface-interactive-hover: #e8e8e8; + --token-color-surface-interactive: #ffffff; + --token-color-surface-primary: #ffffff; + --token-color-surface-strong: #e0e0e0; + --token-color-surface-success: #a7f0ba; + --token-color-surface-warning: #fcf4d6; + --token-color-vault-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-radar-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ + --token-color-vault-secrets-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-dismiss-button-border-color-active: rgba(0, 0, 0, 0); + --token-dismiss-button-foreground-color-active: #161616; + --token-dismiss-button-foreground-color-default: #161616; + --token-dismiss-button-icon-size: 20px; + --token-dismiss-button-size: 48px; + --token-dismiss-button-surface-color-active: rgba(141, 141, 141, 0.5); + --token-dismiss-button-surface-color-hover: rgba(141, 141, 141, 0.12); + --token-elevation-high-box-shadow: none; + --token-elevation-higher-box-shadow: none; + --token-elevation-inset-box-shadow: none; + --token-elevation-low-box-shadow: none; + --token-elevation-mid-box-shadow: none; + --token-elevation-overlay-box-shadow: none; + --token-focus-ring-action-box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe; + --token-focus-ring-critical-box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe; + --token-form-radiocard-border-color-default-checked: #ffc0cb; + --token-form-radiocard-border-color-default: rgba(0, 0, 0, 0); + --token-form-radiocard-border-color-focus: #ffc0cb; + --token-form-radiocard-border-radius: 0px; + --token-icon-tile-border-color-logo: #e0e0e0; + --token-icon-tile-border-color-overlay: #c6c6c6; + --token-icon-tile-surface-color-overlay: #f4f4f4; + --token-rich-tooltip-bubble-arrow-size: 12px; + --token-rich-tooltip-bubble-border-color: var(--token-color-palette-alpha-200); + --token-rich-tooltip-bubble-border-radius: 2px; + --token-rich-tooltip-bubble-max-width: 288px; + --token-rich-tooltip-toggle-foreground-color-active: #525252; + --token-rich-tooltip-toggle-foreground-color-default: #525252; + --token-rich-tooltip-toggle-foreground-color-hover: #161616; + --token-rich-tooltip-toggle-gap-horizontal: 8px; + --token-rich-tooltip-toggle-icon-size: 14px; + --token-surface-base-box-shadow: none; + --token-surface-high-box-shadow: none; + --token-surface-higher-box-shadow: none; + --token-surface-inset-box-shadow: none; + --token-surface-low-box-shadow: none; + --token-surface-mid-box-shadow: none; + --token-surface-overlay-box-shadow: none; + --token-tooltip-border-radius: 2px; + --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); + --token-tooltip-caret-height: 6px; + --token-tooltip-caret-width: 12px; + --token-tooltip-max-width: 288px; + --token-tooltip-padding-horizontal: 16px; + --token-tooltip-padding-vertical: 16px; + --token-typography-body-100-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-body-200-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-300-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-code-100-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ + --token-typography-code-200-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-300-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-display-100-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-letter-spacing: 0.16px; + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-200-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-letter-spacing: 0px; + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-300-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-letter-spacing: 0px; + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-400-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-letter-spacing: 0px; + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-500-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-letter-spacing: 0px; + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-font-stack-code: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + --token-typography-font-stack-display: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-font-stack-text: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-font-weight-bold: 600; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-semibold: 600; +} \ No newline at end of file diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g100/common-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g100/common-tokens.css new file mode 100644 index 00000000000..142edfe02e2 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g100/common-tokens.css @@ -0,0 +1,227 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-app-header-height: 60px; + --token-app-header-home-link-size: 36px; + --token-app-header-logo-size: 28px; + --token-app-side-nav-body-list-item-border-radius: 5px; + --token-app-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-app-side-nav-body-list-item-height: 36px; + --token-app-side-nav-body-list-item-padding-horizontal: 8px; + --token-app-side-nav-body-list-item-padding-vertical: 4px; + --token-app-side-nav-body-list-item-spacing-vertical: 2px; + --token-app-side-nav-body-list-margin-vertical: 24px; + --token-app-side-nav-color-foreground-faint: var(--token-color-foreground-faint); + --token-app-side-nav-color-foreground-primary: var(--token-color-foreground-primary); + --token-app-side-nav-color-foreground-strong: var(--token-color-foreground-primary); + --token-app-side-nav-color-surface-interactive-active: var(--token-color-palette-neutral-300); + --token-app-side-nav-color-surface-interactive-hover: var(--token-color-surface-interactive-hover); + --token-app-side-nav-color-surface-primary: var(--token-color-surface-faint); + --token-app-side-nav-header-actions-spacing: 8px; + --token-app-side-nav-header-home-link-logo-size-minimized: 32px; + --token-app-side-nav-header-home-link-logo-size: 48px; + --token-app-side-nav-header-home-link-padding: 4px; + --token-app-side-nav-toggle-button-border-radius: 5px; + --token-app-side-nav-wrapper-border-color: var(--token-color-palette-neutral-200); + --token-app-side-nav-wrapper-border-width: 1px; + --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-app-side-nav-wrapper-padding-horizontal: 16px; + --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-app-side-nav-wrapper-padding-vertical: 16px; + --token-badge-height-large: 32px; + --token-badge-height-medium: 24px; + --token-badge-icon-size-large: 16px; + --token-badge-icon-size-medium: 16px; + --token-badge-icon-size-small: 12px; + --token-badge-padding-vertical-large: 4px; + --token-badge-padding-vertical-medium: 4px; + --token-badge-surface-color-neutral-dark-mode-outlined: rgba(0, 0, 0, 0); + --token-badge-surface-color-neutral-outlined: rgba(0, 0, 0, 0); + --token-badge-typography-line-height-medium: 1.2308; /** 16px = 1.2308 */ + --token-badge-typography-line-height-small: 1.2308; /** 16px = 1.2308 */ + --token-border-radius-rounded: 1000000000px; + --token-button-border-color-disabled: var(--token-color-border-primary); + --token-button-border-color-tertiary-active: var(--token-color-border-strong); + --token-button-border-color-tertiary-default: rgba(0, 0, 0, 0); + --token-button-border-color-tertiary-focus-external: var(--token-color-focus-action-external); + --token-button-border-color-tertiary-focus-internal: var(--token-color-focus-action-internal); + --token-button-border-color-tertiary-hover: var(--token-color-border-strong); + --token-button-border-width: 1px; + --token-button-focus-border-width: 3px; + --token-button-surface-color-tertiary-default: rgba(0, 0, 0, 0); + --token-color-boundary-border: #fbd7d8; + --token-color-boundary-brand: #f24c53; + --token-color-boundary-foreground: #cf2d32; + --token-color-boundary-gradient-faint-start: #fffafa; /** this is the 'boundary-50' value at 25% opacity on white */ + --token-color-boundary-gradient-faint-stop: #ffecec; + --token-color-boundary-gradient-primary-start: #f97076; + --token-color-boundary-gradient-primary-stop: #db363b; + --token-color-boundary-surface: #ffecec; + --token-color-consul-border: #ffcede; + --token-color-consul-brand: #e03875; + --token-color-consul-foreground: #d01c5b; + --token-color-consul-gradient-faint-start: #fff9fb; /** this is the 'consul-50' value at 25% opacity on white */ + --token-color-consul-gradient-faint-stop: #ffe9f1; + --token-color-consul-gradient-primary-start: #ff99be; + --token-color-consul-gradient-primary-stop: #da306e; + --token-color-consul-surface: #ffe9f1; + --token-color-nomad-border: #bff3dd; + --token-color-nomad-brand: #06d092; + --token-color-nomad-foreground: #008661; + --token-color-nomad-gradient-faint-start: #f3fff9; /** this is the 'nomad-50' value at 25% opacity on white */ + --token-color-nomad-gradient-faint-stop: #d3fdeb; + --token-color-nomad-gradient-primary-start: #bff3dd; + --token-color-nomad-gradient-primary-stop: #60dea9; + --token-color-nomad-surface: #d3fdeb; + --token-color-packer-border: #b4e4ff; + --token-color-packer-brand: #02a8ef; + --token-color-packer-foreground: #007eb4; + --token-color-packer-gradient-faint-start: #f3fcff; /** this is the 'packer-50' value at 25% opacity on white */ + --token-color-packer-gradient-faint-stop: #d4f2ff; + --token-color-packer-gradient-primary-start: #b4e4ff; + --token-color-packer-gradient-primary-stop: #63d0ff; + --token-color-packer-surface: #d4f2ff; + --token-color-terraform-border: #ebdbfc; + --token-color-terraform-brand-on-dark: #a067da; /** this is an alternative brand color meant to be used on dark backgrounds */ + --token-color-terraform-brand: #7b42bc; + --token-color-terraform-foreground: #773cb4; + --token-color-terraform-gradient-faint-start: #fcfaff; /** this is the 'terraform-50' value at 25% opacity on white */ + --token-color-terraform-gradient-faint-stop: #f4ecff; + --token-color-terraform-gradient-primary-start: #bb8deb; + --token-color-terraform-gradient-primary-stop: #844fba; + --token-color-terraform-surface: #f4ecff; + --token-color-vagrant-border: #c7dbfc; + --token-color-vagrant-brand: #1868f2; + --token-color-vagrant-foreground: #1c61d8; + --token-color-vagrant-gradient-faint-start: #f4faff; /** this is the 'vagrant-50' value at 25% opacity on white */ + --token-color-vagrant-gradient-faint-stop: #d6ebff; + --token-color-vagrant-gradient-primary-start: #639cff; + --token-color-vagrant-gradient-primary-stop: #2e71e5; + --token-color-vagrant-surface: #d6ebff; + --token-color-vault-border: #feec7b; + --token-color-vault-brand: #ffcf25; + --token-color-vault-foreground: #9a6f00; + --token-color-vault-gradient-faint-start: #fffdf2; /** this is the 'vault-50' value at 25% opacity on white */ + --token-color-vault-gradient-faint-stop: #fff9cf; + --token-color-vault-gradient-primary-start: #feec7b; + --token-color-vault-gradient-primary-stop: #ffe543; + --token-color-vault-radar-border: #feec7b; + --token-color-vault-radar-brand: #ffcf25; + --token-color-vault-radar-foreground: #9a6f00; + --token-color-vault-radar-gradient-faint-start: #fffdf2; /** this is the 'vault-radar-50' value at 25% opacity on white */ + --token-color-vault-radar-gradient-faint-stop: #fff9cf; + --token-color-vault-radar-gradient-primary-start: #feec7b; + --token-color-vault-radar-gradient-primary-stop: #ffe543; + --token-color-vault-radar-surface: #fff9cf; + --token-color-vault-secrets-border: #feec7b; + --token-color-vault-secrets-brand: #ffcf25; + --token-color-vault-secrets-foreground: #9a6f00; + --token-color-vault-secrets-gradient-faint-start: #fffdf2; /** this is the 'vault-secrets-50' value at 25% opacity on white */ + --token-color-vault-secrets-gradient-faint-stop: #fff9cf; + --token-color-vault-secrets-gradient-primary-start: #feec7b; + --token-color-vault-secrets-gradient-primary-stop: #ffe543; + --token-color-vault-secrets-surface: #fff9cf; + --token-color-vault-surface: #fff9cf; + --token-color-waypoint-border: #cbf1f3; + --token-color-waypoint-brand: #14c6cb; + --token-color-waypoint-foreground: #008196; + --token-color-waypoint-gradient-faint-start: #f6feff; /** this is the 'waypoint-50' value at 25% opacity on white */ + --token-color-waypoint-gradient-faint-stop: #e0fcff; + --token-color-waypoint-gradient-primary-start: #cbf1f3; + --token-color-waypoint-gradient-primary-stop: #62d4dc; + --token-color-waypoint-surface: #e0fcff; + --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'dash' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'dash' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-size: 12px; + --token-form-checkbox-border-radius: 3px; + --token-form-checkbox-border-width: 1px; + --token-form-checkbox-size: 16px; + --token-form-control-base-border-color-default: var(--token-color-palette-neutral-400); + --token-form-control-base-border-color-hover: var(--token-color-palette-neutral-500); + --token-form-control-base-foreground-placeholder-color: var(--token-color-foreground-faint); + --token-form-control-base-foreground-value-color: var(--token-color-foreground-strong); + --token-form-control-base-surface-color-default: var(--token-color-surface-interactive); + --token-form-control-base-surface-color-hover: var(--token-color-surface-interactive-hover); + --token-form-control-border-radius: 5px; + --token-form-control-border-width: 1px; + --token-form-control-checked-border-color-default: var(--token-color-palette-blue-300); + --token-form-control-checked-border-color-hover: var(--token-color-palette-blue-400); + --token-form-control-checked-foreground-color: var(--token-color-foreground-high-contrast); + --token-form-control-checked-surface-color-default: var(--token-color-palette-blue-200); + --token-form-control-checked-surface-color-hover: var(--token-color-palette-blue-300); + --token-form-control-disabled-border-color: var(--token-color-border-primary); + --token-form-control-disabled-foreground-color: var(--token-color-foreground-disabled); + --token-form-control-disabled-surface-color: var(--token-color-surface-interactive-disabled); + --token-form-control-invalid-border-color-default: var(--token-color-palette-red-300); + --token-form-control-invalid-border-color-hover: var(--token-color-palette-red-400); + --token-form-control-padding: 7px; /** Notice: we have to take in account the border, so it's 1px less than in Figma. */ + --token-form-control-readonly-border-color: var(--token-color-border-faint); + --token-form-control-readonly-foreground-color: var(--token-color-foreground-primary); + --token-form-control-readonly-surface-color: var(--token-color-surface-strong); + --token-form-error-color: var(--token-color-palette-red-300); + --token-form-error-icon-size: 14px; + --token-form-helper-text-color: var(--token-color-foreground-faint); + --token-form-indicator-optional-color: var(--token-color-foreground-faint); + --token-form-label-color: var(--token-color-foreground-strong); + --token-form-legend-color: var(--token-form-label-color); + --token-form-radio-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'dot' color is hardcoded here! */ + --token-form-radio-background-image-data-url: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e"); /** notice: the 'dot' color is hardcoded here! */ + --token-form-radio-background-image-size: 12px; + --token-form-radio-border-width: 1px; + --token-form-radio-size: 16px; + --token-form-radiocard-border-width: 1px; + --token-form-radiocard-content-padding: 24px; + --token-form-radiocard-control-padding: 8px; + --token-form-radiocard-group-gap: 16px; + --token-form-radiocard-transition-duration: 0.2s; + --token-form-select-background-image-data-url-disabled: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E"); /** notice: the 'caret' color is hardcoded here! */ + --token-form-select-background-image-data-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E"); /** notice: the 'caret' color is hardcoded here! */ + --token-form-select-background-image-position-right-x: var(--token-form-control-padding); + --token-form-select-background-image-position-top-y: 9px; + --token-form-select-background-image-size: 16px; + --token-form-text-input-background-image-data-url-date: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-cancel: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-loading: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color and animation are hardcoded here! */ + --token-form-text-input-background-image-data-url-search: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-time: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-position-x: var(--token-form-control-padding); + --token-form-text-input-background-image-size: 16px; + --token-form-toggle-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-background-image-position-x: 2px; + --token-form-toggle-background-image-size: 12px; + --token-form-toggle-base-surface-color-default: var(--token-color-surface-strong); /** the toggle has a different base surface color, compared to the other controls */ + --token-form-toggle-border-radius: 3px; + --token-form-toggle-border-width: 1px; + --token-form-toggle-height: 16px; + --token-form-toggle-thumb-size: var(--token-form-toggle-height); + --token-form-toggle-transition-duration: 0.2s; + --token-form-toggle-transition-timing-function: cubic-bezier(0.68, -0.2, 0.265, 1.15); + --token-form-toggle-width: 32px; + --token-pagination-child-spacing-horizontal: 20px; + --token-pagination-child-spacing-vertical: 8px; + --token-pagination-nav-control-focus-inset: 4px; + --token-pagination-nav-control-height: 36px; + --token-pagination-nav-control-icon-spacing: 6px; + --token-pagination-nav-control-padding-horizontal: 12px; + --token-pagination-nav-indicator-height: 2px; + --token-pagination-nav-indicator-spacing: 6px; + --token-tabs-divider-height: 1px; + --token-tabs-indicator-height: 3px; + --token-tabs-indicator-transition-duration: 0.6s; + --token-tabs-indicator-transition-function: cubic-bezier(0.5, 1, 0.89, 1); + --token-tabs-tab-border-radius: 5px; + --token-tabs-tab-focus-inset: 6px; + --token-tabs-tab-gutter: 6px; + --token-tabs-tab-height-large: 48px; + --token-tabs-tab-height-medium: 36px; + --token-tabs-tab-padding-horizontal-large: 20px; + --token-tabs-tab-padding-horizontal-medium: 12px; + --token-tabs-tab-padding-vertical: 0px; + --token-tooltip-focus-offset: -2px; + --token-tooltip-transition-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); +} \ No newline at end of file diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g100/themed-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g100/themed-tokens.css new file mode 100644 index 00000000000..b299b8e00f2 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g100/themed-tokens.css @@ -0,0 +1,309 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-app-footer-focus-color-action-internal: #ffffff; + --token-badge-border-radius: var(--token-border-radius-rounded); + --token-badge-count-padding-horizontal-large: 12px; + --token-badge-count-padding-horizontal-medium: 8px; + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-foreground-color-critical-filled: #ffd7d9; /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: #161616; + --token-badge-foreground-color-critical-outlined: #ffd7d9; + --token-badge-foreground-color-highlight-filled: #e8daff; /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: #161616; + --token-badge-foreground-color-highlight-outlined: #e8daff; + --token-badge-foreground-color-neutral-dark-mode-filled: #161616; + --token-badge-foreground-color-neutral-dark-mode-inverted: #f4f4f4; + --token-badge-foreground-color-neutral-dark-mode-outlined: #161616; + --token-badge-foreground-color-neutral-filled: #f4f4f4; + --token-badge-foreground-color-neutral-inverted: #161616; + --token-badge-foreground-color-neutral-outlined: #f4f4f4; + --token-badge-foreground-color-success-filled: #a7f0ba; /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: #161616; + --token-badge-foreground-color-success-outlined: #a7f0ba; + --token-badge-foreground-color-warning-filled: #ffd9be; + --token-badge-foreground-color-warning-inverted: #161616; + --token-badge-foreground-color-warning-outlined: #ffd9be; + --token-badge-gap-large: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-small: 4px; + --token-badge-height-small: 18px; + --token-badge-padding-horizontal-large: 12px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-small: 8px; + --token-badge-padding-vertical-small: 1px; + --token-badge-surface-color-critical-filled: #a2191f; /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: #ffd7d9; + --token-badge-surface-color-highlight-filled: #6929c4; /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: #be95ff; + --token-badge-surface-color-neutral-dark-mode-filled: #f4f4f4; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: #525252; + --token-badge-surface-color-neutral-filled: #525252; + --token-badge-surface-color-neutral-inverted: #f4f4f4; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-success-filled: #0e6027; /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: #a7f0ba; + --token-badge-surface-color-warning-filled: #8a3800; /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: #ffd9be; + --token-badge-typography-font-size-large: 0.75rem; + --token-badge-typography-font-size-medium: 0.75rem; + --token-badge-typography-font-size-small: 0.75rem; + --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */ + --token-border-radius-large: 0px; + --token-border-radius-medium: 0px; + --token-border-radius-small: 0px; + --token-border-radius-x-small: 0px; + --token-button-border-color-critical-active: rgba(0, 0, 0, 0); + --token-button-border-color-critical-default: rgba(0, 0, 0, 0); + --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-hover: rgba(0, 0, 0, 0); + --token-button-border-color-primary-active: rgba(0, 0, 0, 0); + --token-button-border-color-primary-default: rgba(0, 0, 0, 0); + --token-button-border-color-primary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-hover: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-active: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-default: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0); + --token-button-border-radius: 0px; + --token-button-foreground-color-critical-active: #ffffff; + --token-button-foreground-color-critical-default: #ffffff; + --token-button-foreground-color-critical-focus: #ffffff; + --token-button-foreground-color-critical-hover: #ffffff; + --token-button-foreground-color-disabled: rgba(255, 255, 255, 0.25); + --token-button-foreground-color-primary-active: #ffffff; + --token-button-foreground-color-primary-default: #ffffff; + --token-button-foreground-color-primary-focus: #ffffff; + --token-button-foreground-color-primary-hover: #ffffff; + --token-button-foreground-color-secondary-active: #ffffff; + --token-button-foreground-color-secondary-default: #ffffff; + --token-button-foreground-color-secondary-focus: #ffffff; + --token-button-foreground-color-secondary-hover: #ffffff; + --token-button-foreground-color-tertiary-active: #161616; + --token-button-foreground-color-tertiary-default: #ffffff; + --token-button-foreground-color-tertiary-focus: #161616; + --token-button-foreground-color-tertiary-hover: #161616; + --token-button-gap: 32px; + --token-button-height-large: 48px; + --token-button-height-medium: 40px; + --token-button-height-small: 32px; + --token-button-icon-size-large: 16px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-small: 16px; + --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-surface-color-critical-active: #750e13; + --token-button-surface-color-critical-default: #da1e28; + --token-button-surface-color-critical-focus: #da1e28; + --token-button-surface-color-critical-hover: #b81921; + --token-button-surface-color-disabled: #8d8d8d; + --token-button-surface-color-primary-active: #002d9c; + --token-button-surface-color-primary-default: #0f62fe; + --token-button-surface-color-primary-focus: #0f62fe; + --token-button-surface-color-primary-hover: #0050e6; + --token-button-surface-color-secondary-active: #393939; + --token-button-surface-color-secondary-default: #6f6f6f; + --token-button-surface-color-secondary-focus: #6f6f6f; + --token-button-surface-color-secondary-hover: #5e5e5e; + --token-button-surface-color-tertiary-active: #c6c6c6; + --token-button-surface-color-tertiary-focus: #f4f4f4; + --token-button-surface-color-tertiary-hover: #f4f4f4; + --token-button-typography-font-size-large: 0.875rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-small: 0.875rem; + --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */ + --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-color-border-action: #4589ff; + --token-color-border-critical: #fa4d56; + --token-color-border-faint: #393939; + --token-color-border-highlight: #a56eff; + --token-color-border-primary: #6f6f6f; + --token-color-border-strong: #6f6f6f; + --token-color-border-success: #24a148; + --token-color-border-warning: #b28600; + --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-action-internal: #161616; + --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #161616; + --token-color-foreground-action-active: #a6c8ff; + --token-color-foreground-action-hover: #a6c8ff; + --token-color-foreground-action: #78a9ff; + --token-color-foreground-critical-high-contrast: #ffd7d9; + --token-color-foreground-critical-on-surface: #ffb3b8; + --token-color-foreground-critical: #ff8389; + --token-color-foreground-disabled: rgba(244, 244, 244, 0.25); + --token-color-foreground-faint: #c6c6c6; + --token-color-foreground-high-contrast: #161616; + --token-color-foreground-highlight-high-contrast: #d4bbff; + --token-color-foreground-highlight-on-surface: #d4bbff; + --token-color-foreground-highlight: #be95ff; + --token-color-foreground-primary: #f4f4f4; + --token-color-foreground-strong: #f4f4f4; + --token-color-foreground-success-high-contrast: #a7f0ba; + --token-color-foreground-success-on-surface: #6fdc8c; + --token-color-foreground-success: #42be65; + --token-color-foreground-warning-high-contrast: #fddc69; + --token-color-foreground-warning-on-surface: #f1c21b; + --token-color-foreground-warning: #d2a106; + --token-color-hashicorp-brand: #ffffff; + --token-color-hcp-brand: #ffffff; + --token-color-page-faint: #161616; + --token-color-page-primary: #161616; + --token-color-palette-alpha-100: #393939; + --token-color-palette-alpha-200: #525252; + --token-color-palette-alpha-300: #6f6f6f; + --token-color-palette-amber-100: #ffd9be; + --token-color-palette-amber-200: #ba4e00; + --token-color-palette-amber-300: #8a3800; + --token-color-palette-amber-400: #5e2900; + --token-color-palette-amber-500: #3e1a00; + --token-color-palette-amber-50: #fff2e8; + --token-color-palette-blue-100: #d0e2ff; + --token-color-palette-blue-200: #0f62fe; + --token-color-palette-blue-300: #0043ce; + --token-color-palette-blue-400: #002d9c; + --token-color-palette-blue-500: #001141; + --token-color-palette-blue-50: #edf5ff; + --token-color-palette-green-100: #a7f0ba; + --token-color-palette-green-200: #24a148; + --token-color-palette-green-300: #198038; + --token-color-palette-green-400: #0e6027; + --token-color-palette-green-500: #044317; + --token-color-palette-green-50: #defbe6; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-neutral-100: #e0e0e0; + --token-color-palette-neutral-200: #c6c6c6; + --token-color-palette-neutral-300: #a8a8a8; + --token-color-palette-neutral-400: #8d8d8d; + --token-color-palette-neutral-500: #525252; + --token-color-palette-neutral-50: #f4f4f4; + --token-color-palette-neutral-600: #393939; + --token-color-palette-neutral-700: #161616; + --token-color-palette-purple-100: #e8daff; + --token-color-palette-purple-200: #a56eff; + --token-color-palette-purple-300: #8a3ffc; + --token-color-palette-purple-400: #6929c4; + --token-color-palette-purple-500: #31135e; + --token-color-palette-purple-50: #f6f2ff; + --token-color-palette-red-100: #ffd7d9; + --token-color-palette-red-200: #da1e28; + --token-color-palette-red-300: #a2191f; + --token-color-palette-red-400: #750e13; + --token-color-palette-red-500: #520408; + --token-color-palette-red-50: #fff1f1; + --token-color-surface-action: #0043ce; + --token-color-surface-critical: #a2191f; + --token-color-surface-faint: #262626; + --token-color-surface-high-contrast: #f4f4f4; + --token-color-surface-highlight: #6929c4; + --token-color-surface-interactive-active: #525252; + --token-color-surface-interactive-disabled: #525252; + --token-color-surface-interactive-hover: #333333; + --token-color-surface-interactive: #262626; + --token-color-surface-primary: #262626; + --token-color-surface-strong: #393939; + --token-color-surface-success: #0e6027; + --token-color-surface-warning: #684e00; + --token-color-vault-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-radar-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ + --token-color-vault-secrets-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-dismiss-button-border-color-active: rgba(0, 0, 0, 0); + --token-dismiss-button-foreground-color-active: #f4f4f4; + --token-dismiss-button-foreground-color-default: #f4f4f4; + --token-dismiss-button-icon-size: 20px; + --token-dismiss-button-size: 48px; + --token-dismiss-button-surface-color-active: rgba(141, 141, 141, 0.4); + --token-dismiss-button-surface-color-hover: rgba(141, 141, 141, 0.16); + --token-elevation-high-box-shadow: none; + --token-elevation-higher-box-shadow: none; + --token-elevation-inset-box-shadow: none; + --token-elevation-low-box-shadow: none; + --token-elevation-mid-box-shadow: none; + --token-elevation-overlay-box-shadow: none; + --token-focus-ring-action-box-shadow: inset 0 0 0 1px #161616, 0 0 0 3px #ffffff; + --token-focus-ring-critical-box-shadow: inset 0 0 0 1px #161616, 0 0 0 3px #ffffff; + --token-form-radiocard-border-color-default-checked: #ffc0cb; + --token-form-radiocard-border-color-default: rgba(0, 0, 0, 0); + --token-form-radiocard-border-color-focus: #ffc0cb; + --token-form-radiocard-border-radius: 0px; + --token-icon-tile-border-color-logo: #525252; + --token-icon-tile-border-color-overlay: #6f6f6f; + --token-icon-tile-surface-color-overlay: #393939; + --token-rich-tooltip-bubble-arrow-size: 12px; + --token-rich-tooltip-bubble-border-color: var(--token-color-palette-alpha-200); + --token-rich-tooltip-bubble-border-radius: 2px; + --token-rich-tooltip-bubble-max-width: 288px; + --token-rich-tooltip-toggle-foreground-color-active: #c6c6c6; + --token-rich-tooltip-toggle-foreground-color-default: #c6c6c6; + --token-rich-tooltip-toggle-foreground-color-hover: #f4f4f4; + --token-rich-tooltip-toggle-gap-horizontal: 8px; + --token-rich-tooltip-toggle-icon-size: 14px; + --token-surface-base-box-shadow: none; + --token-surface-high-box-shadow: none; + --token-surface-higher-box-shadow: none; + --token-surface-inset-box-shadow: none; + --token-surface-low-box-shadow: none; + --token-surface-mid-box-shadow: none; + --token-surface-overlay-box-shadow: none; + --token-tooltip-border-radius: 2px; + --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); + --token-tooltip-caret-height: 6px; + --token-tooltip-caret-width: 12px; + --token-tooltip-max-width: 288px; + --token-tooltip-padding-horizontal: 16px; + --token-tooltip-padding-vertical: 16px; + --token-typography-body-100-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-body-200-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-300-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-code-100-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ + --token-typography-code-200-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-300-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-display-100-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-letter-spacing: 0.16px; + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-200-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-letter-spacing: 0px; + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-300-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-letter-spacing: 0px; + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-400-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-letter-spacing: 0px; + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-500-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-letter-spacing: 0px; + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-font-stack-code: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + --token-typography-font-stack-display: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-font-stack-text: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-font-weight-bold: 600; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-semibold: 600; +} \ No newline at end of file diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g90/common-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g90/common-tokens.css new file mode 100644 index 00000000000..142edfe02e2 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g90/common-tokens.css @@ -0,0 +1,227 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-app-header-height: 60px; + --token-app-header-home-link-size: 36px; + --token-app-header-logo-size: 28px; + --token-app-side-nav-body-list-item-border-radius: 5px; + --token-app-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-app-side-nav-body-list-item-height: 36px; + --token-app-side-nav-body-list-item-padding-horizontal: 8px; + --token-app-side-nav-body-list-item-padding-vertical: 4px; + --token-app-side-nav-body-list-item-spacing-vertical: 2px; + --token-app-side-nav-body-list-margin-vertical: 24px; + --token-app-side-nav-color-foreground-faint: var(--token-color-foreground-faint); + --token-app-side-nav-color-foreground-primary: var(--token-color-foreground-primary); + --token-app-side-nav-color-foreground-strong: var(--token-color-foreground-primary); + --token-app-side-nav-color-surface-interactive-active: var(--token-color-palette-neutral-300); + --token-app-side-nav-color-surface-interactive-hover: var(--token-color-surface-interactive-hover); + --token-app-side-nav-color-surface-primary: var(--token-color-surface-faint); + --token-app-side-nav-header-actions-spacing: 8px; + --token-app-side-nav-header-home-link-logo-size-minimized: 32px; + --token-app-side-nav-header-home-link-logo-size: 48px; + --token-app-side-nav-header-home-link-padding: 4px; + --token-app-side-nav-toggle-button-border-radius: 5px; + --token-app-side-nav-wrapper-border-color: var(--token-color-palette-neutral-200); + --token-app-side-nav-wrapper-border-width: 1px; + --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-app-side-nav-wrapper-padding-horizontal: 16px; + --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-app-side-nav-wrapper-padding-vertical: 16px; + --token-badge-height-large: 32px; + --token-badge-height-medium: 24px; + --token-badge-icon-size-large: 16px; + --token-badge-icon-size-medium: 16px; + --token-badge-icon-size-small: 12px; + --token-badge-padding-vertical-large: 4px; + --token-badge-padding-vertical-medium: 4px; + --token-badge-surface-color-neutral-dark-mode-outlined: rgba(0, 0, 0, 0); + --token-badge-surface-color-neutral-outlined: rgba(0, 0, 0, 0); + --token-badge-typography-line-height-medium: 1.2308; /** 16px = 1.2308 */ + --token-badge-typography-line-height-small: 1.2308; /** 16px = 1.2308 */ + --token-border-radius-rounded: 1000000000px; + --token-button-border-color-disabled: var(--token-color-border-primary); + --token-button-border-color-tertiary-active: var(--token-color-border-strong); + --token-button-border-color-tertiary-default: rgba(0, 0, 0, 0); + --token-button-border-color-tertiary-focus-external: var(--token-color-focus-action-external); + --token-button-border-color-tertiary-focus-internal: var(--token-color-focus-action-internal); + --token-button-border-color-tertiary-hover: var(--token-color-border-strong); + --token-button-border-width: 1px; + --token-button-focus-border-width: 3px; + --token-button-surface-color-tertiary-default: rgba(0, 0, 0, 0); + --token-color-boundary-border: #fbd7d8; + --token-color-boundary-brand: #f24c53; + --token-color-boundary-foreground: #cf2d32; + --token-color-boundary-gradient-faint-start: #fffafa; /** this is the 'boundary-50' value at 25% opacity on white */ + --token-color-boundary-gradient-faint-stop: #ffecec; + --token-color-boundary-gradient-primary-start: #f97076; + --token-color-boundary-gradient-primary-stop: #db363b; + --token-color-boundary-surface: #ffecec; + --token-color-consul-border: #ffcede; + --token-color-consul-brand: #e03875; + --token-color-consul-foreground: #d01c5b; + --token-color-consul-gradient-faint-start: #fff9fb; /** this is the 'consul-50' value at 25% opacity on white */ + --token-color-consul-gradient-faint-stop: #ffe9f1; + --token-color-consul-gradient-primary-start: #ff99be; + --token-color-consul-gradient-primary-stop: #da306e; + --token-color-consul-surface: #ffe9f1; + --token-color-nomad-border: #bff3dd; + --token-color-nomad-brand: #06d092; + --token-color-nomad-foreground: #008661; + --token-color-nomad-gradient-faint-start: #f3fff9; /** this is the 'nomad-50' value at 25% opacity on white */ + --token-color-nomad-gradient-faint-stop: #d3fdeb; + --token-color-nomad-gradient-primary-start: #bff3dd; + --token-color-nomad-gradient-primary-stop: #60dea9; + --token-color-nomad-surface: #d3fdeb; + --token-color-packer-border: #b4e4ff; + --token-color-packer-brand: #02a8ef; + --token-color-packer-foreground: #007eb4; + --token-color-packer-gradient-faint-start: #f3fcff; /** this is the 'packer-50' value at 25% opacity on white */ + --token-color-packer-gradient-faint-stop: #d4f2ff; + --token-color-packer-gradient-primary-start: #b4e4ff; + --token-color-packer-gradient-primary-stop: #63d0ff; + --token-color-packer-surface: #d4f2ff; + --token-color-terraform-border: #ebdbfc; + --token-color-terraform-brand-on-dark: #a067da; /** this is an alternative brand color meant to be used on dark backgrounds */ + --token-color-terraform-brand: #7b42bc; + --token-color-terraform-foreground: #773cb4; + --token-color-terraform-gradient-faint-start: #fcfaff; /** this is the 'terraform-50' value at 25% opacity on white */ + --token-color-terraform-gradient-faint-stop: #f4ecff; + --token-color-terraform-gradient-primary-start: #bb8deb; + --token-color-terraform-gradient-primary-stop: #844fba; + --token-color-terraform-surface: #f4ecff; + --token-color-vagrant-border: #c7dbfc; + --token-color-vagrant-brand: #1868f2; + --token-color-vagrant-foreground: #1c61d8; + --token-color-vagrant-gradient-faint-start: #f4faff; /** this is the 'vagrant-50' value at 25% opacity on white */ + --token-color-vagrant-gradient-faint-stop: #d6ebff; + --token-color-vagrant-gradient-primary-start: #639cff; + --token-color-vagrant-gradient-primary-stop: #2e71e5; + --token-color-vagrant-surface: #d6ebff; + --token-color-vault-border: #feec7b; + --token-color-vault-brand: #ffcf25; + --token-color-vault-foreground: #9a6f00; + --token-color-vault-gradient-faint-start: #fffdf2; /** this is the 'vault-50' value at 25% opacity on white */ + --token-color-vault-gradient-faint-stop: #fff9cf; + --token-color-vault-gradient-primary-start: #feec7b; + --token-color-vault-gradient-primary-stop: #ffe543; + --token-color-vault-radar-border: #feec7b; + --token-color-vault-radar-brand: #ffcf25; + --token-color-vault-radar-foreground: #9a6f00; + --token-color-vault-radar-gradient-faint-start: #fffdf2; /** this is the 'vault-radar-50' value at 25% opacity on white */ + --token-color-vault-radar-gradient-faint-stop: #fff9cf; + --token-color-vault-radar-gradient-primary-start: #feec7b; + --token-color-vault-radar-gradient-primary-stop: #ffe543; + --token-color-vault-radar-surface: #fff9cf; + --token-color-vault-secrets-border: #feec7b; + --token-color-vault-secrets-brand: #ffcf25; + --token-color-vault-secrets-foreground: #9a6f00; + --token-color-vault-secrets-gradient-faint-start: #fffdf2; /** this is the 'vault-secrets-50' value at 25% opacity on white */ + --token-color-vault-secrets-gradient-faint-stop: #fff9cf; + --token-color-vault-secrets-gradient-primary-start: #feec7b; + --token-color-vault-secrets-gradient-primary-stop: #ffe543; + --token-color-vault-secrets-surface: #fff9cf; + --token-color-vault-surface: #fff9cf; + --token-color-waypoint-border: #cbf1f3; + --token-color-waypoint-brand: #14c6cb; + --token-color-waypoint-foreground: #008196; + --token-color-waypoint-gradient-faint-start: #f6feff; /** this is the 'waypoint-50' value at 25% opacity on white */ + --token-color-waypoint-gradient-faint-stop: #e0fcff; + --token-color-waypoint-gradient-primary-start: #cbf1f3; + --token-color-waypoint-gradient-primary-stop: #62d4dc; + --token-color-waypoint-surface: #e0fcff; + --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'dash' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'dash' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-size: 12px; + --token-form-checkbox-border-radius: 3px; + --token-form-checkbox-border-width: 1px; + --token-form-checkbox-size: 16px; + --token-form-control-base-border-color-default: var(--token-color-palette-neutral-400); + --token-form-control-base-border-color-hover: var(--token-color-palette-neutral-500); + --token-form-control-base-foreground-placeholder-color: var(--token-color-foreground-faint); + --token-form-control-base-foreground-value-color: var(--token-color-foreground-strong); + --token-form-control-base-surface-color-default: var(--token-color-surface-interactive); + --token-form-control-base-surface-color-hover: var(--token-color-surface-interactive-hover); + --token-form-control-border-radius: 5px; + --token-form-control-border-width: 1px; + --token-form-control-checked-border-color-default: var(--token-color-palette-blue-300); + --token-form-control-checked-border-color-hover: var(--token-color-palette-blue-400); + --token-form-control-checked-foreground-color: var(--token-color-foreground-high-contrast); + --token-form-control-checked-surface-color-default: var(--token-color-palette-blue-200); + --token-form-control-checked-surface-color-hover: var(--token-color-palette-blue-300); + --token-form-control-disabled-border-color: var(--token-color-border-primary); + --token-form-control-disabled-foreground-color: var(--token-color-foreground-disabled); + --token-form-control-disabled-surface-color: var(--token-color-surface-interactive-disabled); + --token-form-control-invalid-border-color-default: var(--token-color-palette-red-300); + --token-form-control-invalid-border-color-hover: var(--token-color-palette-red-400); + --token-form-control-padding: 7px; /** Notice: we have to take in account the border, so it's 1px less than in Figma. */ + --token-form-control-readonly-border-color: var(--token-color-border-faint); + --token-form-control-readonly-foreground-color: var(--token-color-foreground-primary); + --token-form-control-readonly-surface-color: var(--token-color-surface-strong); + --token-form-error-color: var(--token-color-palette-red-300); + --token-form-error-icon-size: 14px; + --token-form-helper-text-color: var(--token-color-foreground-faint); + --token-form-indicator-optional-color: var(--token-color-foreground-faint); + --token-form-label-color: var(--token-color-foreground-strong); + --token-form-legend-color: var(--token-form-label-color); + --token-form-radio-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'dot' color is hardcoded here! */ + --token-form-radio-background-image-data-url: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e"); /** notice: the 'dot' color is hardcoded here! */ + --token-form-radio-background-image-size: 12px; + --token-form-radio-border-width: 1px; + --token-form-radio-size: 16px; + --token-form-radiocard-border-width: 1px; + --token-form-radiocard-content-padding: 24px; + --token-form-radiocard-control-padding: 8px; + --token-form-radiocard-group-gap: 16px; + --token-form-radiocard-transition-duration: 0.2s; + --token-form-select-background-image-data-url-disabled: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E"); /** notice: the 'caret' color is hardcoded here! */ + --token-form-select-background-image-data-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E"); /** notice: the 'caret' color is hardcoded here! */ + --token-form-select-background-image-position-right-x: var(--token-form-control-padding); + --token-form-select-background-image-position-top-y: 9px; + --token-form-select-background-image-size: 16px; + --token-form-text-input-background-image-data-url-date: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-cancel: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-loading: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color and animation are hardcoded here! */ + --token-form-text-input-background-image-data-url-search: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-time: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-position-x: var(--token-form-control-padding); + --token-form-text-input-background-image-size: 16px; + --token-form-toggle-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-background-image-position-x: 2px; + --token-form-toggle-background-image-size: 12px; + --token-form-toggle-base-surface-color-default: var(--token-color-surface-strong); /** the toggle has a different base surface color, compared to the other controls */ + --token-form-toggle-border-radius: 3px; + --token-form-toggle-border-width: 1px; + --token-form-toggle-height: 16px; + --token-form-toggle-thumb-size: var(--token-form-toggle-height); + --token-form-toggle-transition-duration: 0.2s; + --token-form-toggle-transition-timing-function: cubic-bezier(0.68, -0.2, 0.265, 1.15); + --token-form-toggle-width: 32px; + --token-pagination-child-spacing-horizontal: 20px; + --token-pagination-child-spacing-vertical: 8px; + --token-pagination-nav-control-focus-inset: 4px; + --token-pagination-nav-control-height: 36px; + --token-pagination-nav-control-icon-spacing: 6px; + --token-pagination-nav-control-padding-horizontal: 12px; + --token-pagination-nav-indicator-height: 2px; + --token-pagination-nav-indicator-spacing: 6px; + --token-tabs-divider-height: 1px; + --token-tabs-indicator-height: 3px; + --token-tabs-indicator-transition-duration: 0.6s; + --token-tabs-indicator-transition-function: cubic-bezier(0.5, 1, 0.89, 1); + --token-tabs-tab-border-radius: 5px; + --token-tabs-tab-focus-inset: 6px; + --token-tabs-tab-gutter: 6px; + --token-tabs-tab-height-large: 48px; + --token-tabs-tab-height-medium: 36px; + --token-tabs-tab-padding-horizontal-large: 20px; + --token-tabs-tab-padding-horizontal-medium: 12px; + --token-tabs-tab-padding-vertical: 0px; + --token-tooltip-focus-offset: -2px; + --token-tooltip-transition-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); +} \ No newline at end of file diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g90/themed-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g90/themed-tokens.css new file mode 100644 index 00000000000..64d8f52c13f --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g90/themed-tokens.css @@ -0,0 +1,309 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-app-footer-focus-color-action-internal: #ffffff; + --token-badge-border-radius: var(--token-border-radius-rounded); + --token-badge-count-padding-horizontal-large: 12px; + --token-badge-count-padding-horizontal-medium: 8px; + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-foreground-color-critical-filled: #ffd7d9; /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: #161616; + --token-badge-foreground-color-critical-outlined: #ffd7d9; + --token-badge-foreground-color-highlight-filled: #e8daff; /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: #161616; + --token-badge-foreground-color-highlight-outlined: #e8daff; + --token-badge-foreground-color-neutral-dark-mode-filled: #161616; + --token-badge-foreground-color-neutral-dark-mode-inverted: #f4f4f4; + --token-badge-foreground-color-neutral-dark-mode-outlined: #161616; + --token-badge-foreground-color-neutral-filled: #f4f4f4; + --token-badge-foreground-color-neutral-inverted: #161616; + --token-badge-foreground-color-neutral-outlined: #f4f4f4; + --token-badge-foreground-color-success-filled: #a7f0ba; /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: #161616; + --token-badge-foreground-color-success-outlined: #a7f0ba; + --token-badge-foreground-color-warning-filled: #ffd9be; + --token-badge-foreground-color-warning-inverted: #161616; + --token-badge-foreground-color-warning-outlined: #ffd9be; + --token-badge-gap-large: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-small: 4px; + --token-badge-height-small: 18px; + --token-badge-padding-horizontal-large: 12px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-small: 8px; + --token-badge-padding-vertical-small: 1px; + --token-badge-surface-color-critical-filled: #a2191f; /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: #ffd7d9; + --token-badge-surface-color-highlight-filled: #6929c4; /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: #be95ff; + --token-badge-surface-color-neutral-dark-mode-filled: #f4f4f4; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: #525252; + --token-badge-surface-color-neutral-filled: #525252; + --token-badge-surface-color-neutral-inverted: #f4f4f4; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-success-filled: #0e6027; /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: #a7f0ba; + --token-badge-surface-color-warning-filled: #8a3800; /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: #ffd9be; + --token-badge-typography-font-size-large: 0.75rem; + --token-badge-typography-font-size-medium: 0.75rem; + --token-badge-typography-font-size-small: 0.75rem; + --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */ + --token-border-radius-large: 0px; + --token-border-radius-medium: 0px; + --token-border-radius-small: 0px; + --token-border-radius-x-small: 0px; + --token-button-border-color-critical-active: rgba(0, 0, 0, 0); + --token-button-border-color-critical-default: rgba(0, 0, 0, 0); + --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-hover: rgba(0, 0, 0, 0); + --token-button-border-color-primary-active: rgba(0, 0, 0, 0); + --token-button-border-color-primary-default: rgba(0, 0, 0, 0); + --token-button-border-color-primary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-hover: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-active: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-default: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0); + --token-button-border-radius: 0px; + --token-button-foreground-color-critical-active: #ffffff; + --token-button-foreground-color-critical-default: #ffffff; + --token-button-foreground-color-critical-focus: #ffffff; + --token-button-foreground-color-critical-hover: #ffffff; + --token-button-foreground-color-disabled: rgba(255, 255, 255, 0.25); + --token-button-foreground-color-primary-active: #ffffff; + --token-button-foreground-color-primary-default: #ffffff; + --token-button-foreground-color-primary-focus: #ffffff; + --token-button-foreground-color-primary-hover: #ffffff; + --token-button-foreground-color-secondary-active: #ffffff; + --token-button-foreground-color-secondary-default: #ffffff; + --token-button-foreground-color-secondary-focus: #ffffff; + --token-button-foreground-color-secondary-hover: #ffffff; + --token-button-foreground-color-tertiary-active: #161616; + --token-button-foreground-color-tertiary-default: #ffffff; + --token-button-foreground-color-tertiary-focus: #161616; + --token-button-foreground-color-tertiary-hover: #161616; + --token-button-gap: 32px; + --token-button-height-large: 48px; + --token-button-height-medium: 40px; + --token-button-height-small: 32px; + --token-button-icon-size-large: 16px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-small: 16px; + --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-surface-color-critical-active: #750e13; + --token-button-surface-color-critical-default: #da1e28; + --token-button-surface-color-critical-focus: #da1e28; + --token-button-surface-color-critical-hover: #b81921; + --token-button-surface-color-disabled: #8d8d8d; + --token-button-surface-color-primary-active: #002d9c; + --token-button-surface-color-primary-default: #0f62fe; + --token-button-surface-color-primary-focus: #0f62fe; + --token-button-surface-color-primary-hover: #0050e6; + --token-button-surface-color-secondary-active: #393939; + --token-button-surface-color-secondary-default: #6f6f6f; + --token-button-surface-color-secondary-focus: #6f6f6f; + --token-button-surface-color-secondary-hover: #5e5e5e; + --token-button-surface-color-tertiary-active: #c6c6c6; + --token-button-surface-color-tertiary-focus: #f4f4f4; + --token-button-surface-color-tertiary-hover: #f4f4f4; + --token-button-typography-font-size-large: 0.875rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-small: 0.875rem; + --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */ + --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-color-border-action: #4589ff; + --token-color-border-critical: #fa4d56; + --token-color-border-faint: #525252; + --token-color-border-highlight: #a56eff; + --token-color-border-primary: #8d8d8d; + --token-color-border-strong: #8d8d8d; + --token-color-border-success: #24a148; + --token-color-border-warning: #b28600; + --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-action-internal: #161616; + --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #161616; + --token-color-foreground-action-active: #a6c8ff; + --token-color-foreground-action-hover: #a6c8ff; + --token-color-foreground-action: #78a9ff; + --token-color-foreground-critical-high-contrast: #ffd7d9; + --token-color-foreground-critical-on-surface: #ffb3b8; + --token-color-foreground-critical: #ff8389; + --token-color-foreground-disabled: rgba(244, 244, 244, 0.25); + --token-color-foreground-faint: #c6c6c6; + --token-color-foreground-high-contrast: #161616; + --token-color-foreground-highlight-high-contrast: #e8daff; + --token-color-foreground-highlight-on-surface: #d4bbff; + --token-color-foreground-highlight: #be95ff; + --token-color-foreground-primary: #f4f4f4; + --token-color-foreground-strong: #f4f4f4; + --token-color-foreground-success-high-contrast: #a7f0ba; + --token-color-foreground-success-on-surface: #6fdc8c; + --token-color-foreground-success: #42be65; + --token-color-foreground-warning-high-contrast: #fddc69; + --token-color-foreground-warning-on-surface: #f1c21b; + --token-color-foreground-warning: #d2a106; + --token-color-hashicorp-brand: #ffffff; + --token-color-hcp-brand: #ffffff; + --token-color-page-faint: #262626; + --token-color-page-primary: #262626; + --token-color-palette-alpha-100: #525252; + --token-color-palette-alpha-200: #6f6f6f; + --token-color-palette-alpha-300: #8d8d8d; + --token-color-palette-amber-100: #ffd9be; + --token-color-palette-amber-200: #ba4e00; + --token-color-palette-amber-300: #8a3800; + --token-color-palette-amber-400: #5e2900; + --token-color-palette-amber-500: #3e1a00; + --token-color-palette-amber-50: #fff2e8; + --token-color-palette-blue-100: #d0e2ff; + --token-color-palette-blue-200: #0f62fe; + --token-color-palette-blue-300: #0043ce; + --token-color-palette-blue-400: #002d9c; + --token-color-palette-blue-500: #001141; + --token-color-palette-blue-50: #edf5ff; + --token-color-palette-green-100: #a7f0ba; + --token-color-palette-green-200: #24a148; + --token-color-palette-green-300: #198038; + --token-color-palette-green-400: #0e6027; + --token-color-palette-green-500: #044317; + --token-color-palette-green-50: #defbe6; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-neutral-100: #e0e0e0; + --token-color-palette-neutral-200: #c6c6c6; + --token-color-palette-neutral-300: #a8a8a8; + --token-color-palette-neutral-400: #8d8d8d; + --token-color-palette-neutral-500: #525252; + --token-color-palette-neutral-50: #f4f4f4; + --token-color-palette-neutral-600: #393939; + --token-color-palette-neutral-700: #161616; + --token-color-palette-purple-100: #e8daff; + --token-color-palette-purple-200: #a56eff; + --token-color-palette-purple-300: #8a3ffc; + --token-color-palette-purple-400: #6929c4; + --token-color-palette-purple-500: #31135e; + --token-color-palette-purple-50: #f6f2ff; + --token-color-palette-red-100: #ffd7d9; + --token-color-palette-red-200: #da1e28; + --token-color-palette-red-300: #a2191f; + --token-color-palette-red-400: #750e13; + --token-color-palette-red-500: #520408; + --token-color-palette-red-50: #fff1f1; + --token-color-surface-action: #0f62fe; + --token-color-surface-critical: #a2191f; + --token-color-surface-faint: #393939; + --token-color-surface-high-contrast: #f4f4f4; + --token-color-surface-highlight: #6929c4; + --token-color-surface-interactive-active: #6f6f6f; + --token-color-surface-interactive-disabled: #6f6f6f; + --token-color-surface-interactive-hover: #474747; + --token-color-surface-interactive: #393939; + --token-color-surface-primary: #393939; + --token-color-surface-strong: #525252; + --token-color-surface-success: #0e6027; + --token-color-surface-warning: #684e00; + --token-color-vault-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-radar-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ + --token-color-vault-secrets-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-dismiss-button-border-color-active: rgba(0, 0, 0, 0); + --token-dismiss-button-foreground-color-active: #f4f4f4; + --token-dismiss-button-foreground-color-default: #f4f4f4; + --token-dismiss-button-icon-size: 20px; + --token-dismiss-button-size: 48px; + --token-dismiss-button-surface-color-active: rgba(141, 141, 141, 0.4); + --token-dismiss-button-surface-color-hover: rgba(141, 141, 141, 0.16); + --token-elevation-high-box-shadow: none; + --token-elevation-higher-box-shadow: none; + --token-elevation-inset-box-shadow: none; + --token-elevation-low-box-shadow: none; + --token-elevation-mid-box-shadow: none; + --token-elevation-overlay-box-shadow: none; + --token-focus-ring-action-box-shadow: inset 0 0 0 1px #161616, 0 0 0 3px #ffffff; + --token-focus-ring-critical-box-shadow: inset 0 0 0 1px #161616, 0 0 0 3px #ffffff; + --token-form-radiocard-border-color-default-checked: #ffc0cb; + --token-form-radiocard-border-color-default: rgba(0, 0, 0, 0); + --token-form-radiocard-border-color-focus: #ffc0cb; + --token-form-radiocard-border-radius: 0px; + --token-icon-tile-border-color-logo: #6f6f6f; + --token-icon-tile-border-color-overlay: #8d8d8d; + --token-icon-tile-surface-color-overlay: #525252; + --token-rich-tooltip-bubble-arrow-size: 12px; + --token-rich-tooltip-bubble-border-color: var(--token-color-palette-alpha-200); + --token-rich-tooltip-bubble-border-radius: 2px; + --token-rich-tooltip-bubble-max-width: 288px; + --token-rich-tooltip-toggle-foreground-color-active: #c6c6c6; + --token-rich-tooltip-toggle-foreground-color-default: #c6c6c6; + --token-rich-tooltip-toggle-foreground-color-hover: #f4f4f4; + --token-rich-tooltip-toggle-gap-horizontal: 8px; + --token-rich-tooltip-toggle-icon-size: 14px; + --token-surface-base-box-shadow: none; + --token-surface-high-box-shadow: none; + --token-surface-higher-box-shadow: none; + --token-surface-inset-box-shadow: none; + --token-surface-low-box-shadow: none; + --token-surface-mid-box-shadow: none; + --token-surface-overlay-box-shadow: none; + --token-tooltip-border-radius: 2px; + --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); + --token-tooltip-caret-height: 6px; + --token-tooltip-caret-width: 12px; + --token-tooltip-max-width: 288px; + --token-tooltip-padding-horizontal: 16px; + --token-tooltip-padding-vertical: 16px; + --token-typography-body-100-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-body-200-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-300-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-code-100-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ + --token-typography-code-200-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-300-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-display-100-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-letter-spacing: 0.16px; + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-200-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-letter-spacing: 0px; + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-300-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-letter-spacing: 0px; + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-400-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-letter-spacing: 0px; + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-500-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-letter-spacing: 0px; + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-font-stack-code: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + --token-typography-font-stack-display: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-font-stack-text: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-font-weight-bold: 600; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-semibold: 600; +} \ No newline at end of file diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/default/common-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/default/common-tokens.css new file mode 100644 index 00000000000..142edfe02e2 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/default/common-tokens.css @@ -0,0 +1,227 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-app-header-height: 60px; + --token-app-header-home-link-size: 36px; + --token-app-header-logo-size: 28px; + --token-app-side-nav-body-list-item-border-radius: 5px; + --token-app-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-app-side-nav-body-list-item-height: 36px; + --token-app-side-nav-body-list-item-padding-horizontal: 8px; + --token-app-side-nav-body-list-item-padding-vertical: 4px; + --token-app-side-nav-body-list-item-spacing-vertical: 2px; + --token-app-side-nav-body-list-margin-vertical: 24px; + --token-app-side-nav-color-foreground-faint: var(--token-color-foreground-faint); + --token-app-side-nav-color-foreground-primary: var(--token-color-foreground-primary); + --token-app-side-nav-color-foreground-strong: var(--token-color-foreground-primary); + --token-app-side-nav-color-surface-interactive-active: var(--token-color-palette-neutral-300); + --token-app-side-nav-color-surface-interactive-hover: var(--token-color-surface-interactive-hover); + --token-app-side-nav-color-surface-primary: var(--token-color-surface-faint); + --token-app-side-nav-header-actions-spacing: 8px; + --token-app-side-nav-header-home-link-logo-size-minimized: 32px; + --token-app-side-nav-header-home-link-logo-size: 48px; + --token-app-side-nav-header-home-link-padding: 4px; + --token-app-side-nav-toggle-button-border-radius: 5px; + --token-app-side-nav-wrapper-border-color: var(--token-color-palette-neutral-200); + --token-app-side-nav-wrapper-border-width: 1px; + --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-app-side-nav-wrapper-padding-horizontal: 16px; + --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-app-side-nav-wrapper-padding-vertical: 16px; + --token-badge-height-large: 32px; + --token-badge-height-medium: 24px; + --token-badge-icon-size-large: 16px; + --token-badge-icon-size-medium: 16px; + --token-badge-icon-size-small: 12px; + --token-badge-padding-vertical-large: 4px; + --token-badge-padding-vertical-medium: 4px; + --token-badge-surface-color-neutral-dark-mode-outlined: rgba(0, 0, 0, 0); + --token-badge-surface-color-neutral-outlined: rgba(0, 0, 0, 0); + --token-badge-typography-line-height-medium: 1.2308; /** 16px = 1.2308 */ + --token-badge-typography-line-height-small: 1.2308; /** 16px = 1.2308 */ + --token-border-radius-rounded: 1000000000px; + --token-button-border-color-disabled: var(--token-color-border-primary); + --token-button-border-color-tertiary-active: var(--token-color-border-strong); + --token-button-border-color-tertiary-default: rgba(0, 0, 0, 0); + --token-button-border-color-tertiary-focus-external: var(--token-color-focus-action-external); + --token-button-border-color-tertiary-focus-internal: var(--token-color-focus-action-internal); + --token-button-border-color-tertiary-hover: var(--token-color-border-strong); + --token-button-border-width: 1px; + --token-button-focus-border-width: 3px; + --token-button-surface-color-tertiary-default: rgba(0, 0, 0, 0); + --token-color-boundary-border: #fbd7d8; + --token-color-boundary-brand: #f24c53; + --token-color-boundary-foreground: #cf2d32; + --token-color-boundary-gradient-faint-start: #fffafa; /** this is the 'boundary-50' value at 25% opacity on white */ + --token-color-boundary-gradient-faint-stop: #ffecec; + --token-color-boundary-gradient-primary-start: #f97076; + --token-color-boundary-gradient-primary-stop: #db363b; + --token-color-boundary-surface: #ffecec; + --token-color-consul-border: #ffcede; + --token-color-consul-brand: #e03875; + --token-color-consul-foreground: #d01c5b; + --token-color-consul-gradient-faint-start: #fff9fb; /** this is the 'consul-50' value at 25% opacity on white */ + --token-color-consul-gradient-faint-stop: #ffe9f1; + --token-color-consul-gradient-primary-start: #ff99be; + --token-color-consul-gradient-primary-stop: #da306e; + --token-color-consul-surface: #ffe9f1; + --token-color-nomad-border: #bff3dd; + --token-color-nomad-brand: #06d092; + --token-color-nomad-foreground: #008661; + --token-color-nomad-gradient-faint-start: #f3fff9; /** this is the 'nomad-50' value at 25% opacity on white */ + --token-color-nomad-gradient-faint-stop: #d3fdeb; + --token-color-nomad-gradient-primary-start: #bff3dd; + --token-color-nomad-gradient-primary-stop: #60dea9; + --token-color-nomad-surface: #d3fdeb; + --token-color-packer-border: #b4e4ff; + --token-color-packer-brand: #02a8ef; + --token-color-packer-foreground: #007eb4; + --token-color-packer-gradient-faint-start: #f3fcff; /** this is the 'packer-50' value at 25% opacity on white */ + --token-color-packer-gradient-faint-stop: #d4f2ff; + --token-color-packer-gradient-primary-start: #b4e4ff; + --token-color-packer-gradient-primary-stop: #63d0ff; + --token-color-packer-surface: #d4f2ff; + --token-color-terraform-border: #ebdbfc; + --token-color-terraform-brand-on-dark: #a067da; /** this is an alternative brand color meant to be used on dark backgrounds */ + --token-color-terraform-brand: #7b42bc; + --token-color-terraform-foreground: #773cb4; + --token-color-terraform-gradient-faint-start: #fcfaff; /** this is the 'terraform-50' value at 25% opacity on white */ + --token-color-terraform-gradient-faint-stop: #f4ecff; + --token-color-terraform-gradient-primary-start: #bb8deb; + --token-color-terraform-gradient-primary-stop: #844fba; + --token-color-terraform-surface: #f4ecff; + --token-color-vagrant-border: #c7dbfc; + --token-color-vagrant-brand: #1868f2; + --token-color-vagrant-foreground: #1c61d8; + --token-color-vagrant-gradient-faint-start: #f4faff; /** this is the 'vagrant-50' value at 25% opacity on white */ + --token-color-vagrant-gradient-faint-stop: #d6ebff; + --token-color-vagrant-gradient-primary-start: #639cff; + --token-color-vagrant-gradient-primary-stop: #2e71e5; + --token-color-vagrant-surface: #d6ebff; + --token-color-vault-border: #feec7b; + --token-color-vault-brand: #ffcf25; + --token-color-vault-foreground: #9a6f00; + --token-color-vault-gradient-faint-start: #fffdf2; /** this is the 'vault-50' value at 25% opacity on white */ + --token-color-vault-gradient-faint-stop: #fff9cf; + --token-color-vault-gradient-primary-start: #feec7b; + --token-color-vault-gradient-primary-stop: #ffe543; + --token-color-vault-radar-border: #feec7b; + --token-color-vault-radar-brand: #ffcf25; + --token-color-vault-radar-foreground: #9a6f00; + --token-color-vault-radar-gradient-faint-start: #fffdf2; /** this is the 'vault-radar-50' value at 25% opacity on white */ + --token-color-vault-radar-gradient-faint-stop: #fff9cf; + --token-color-vault-radar-gradient-primary-start: #feec7b; + --token-color-vault-radar-gradient-primary-stop: #ffe543; + --token-color-vault-radar-surface: #fff9cf; + --token-color-vault-secrets-border: #feec7b; + --token-color-vault-secrets-brand: #ffcf25; + --token-color-vault-secrets-foreground: #9a6f00; + --token-color-vault-secrets-gradient-faint-start: #fffdf2; /** this is the 'vault-secrets-50' value at 25% opacity on white */ + --token-color-vault-secrets-gradient-faint-stop: #fff9cf; + --token-color-vault-secrets-gradient-primary-start: #feec7b; + --token-color-vault-secrets-gradient-primary-stop: #ffe543; + --token-color-vault-secrets-surface: #fff9cf; + --token-color-vault-surface: #fff9cf; + --token-color-waypoint-border: #cbf1f3; + --token-color-waypoint-brand: #14c6cb; + --token-color-waypoint-foreground: #008196; + --token-color-waypoint-gradient-faint-start: #f6feff; /** this is the 'waypoint-50' value at 25% opacity on white */ + --token-color-waypoint-gradient-faint-stop: #e0fcff; + --token-color-waypoint-gradient-primary-start: #cbf1f3; + --token-color-waypoint-gradient-primary-stop: #62d4dc; + --token-color-waypoint-surface: #e0fcff; + --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'dash' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'dash' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-size: 12px; + --token-form-checkbox-border-radius: 3px; + --token-form-checkbox-border-width: 1px; + --token-form-checkbox-size: 16px; + --token-form-control-base-border-color-default: var(--token-color-palette-neutral-400); + --token-form-control-base-border-color-hover: var(--token-color-palette-neutral-500); + --token-form-control-base-foreground-placeholder-color: var(--token-color-foreground-faint); + --token-form-control-base-foreground-value-color: var(--token-color-foreground-strong); + --token-form-control-base-surface-color-default: var(--token-color-surface-interactive); + --token-form-control-base-surface-color-hover: var(--token-color-surface-interactive-hover); + --token-form-control-border-radius: 5px; + --token-form-control-border-width: 1px; + --token-form-control-checked-border-color-default: var(--token-color-palette-blue-300); + --token-form-control-checked-border-color-hover: var(--token-color-palette-blue-400); + --token-form-control-checked-foreground-color: var(--token-color-foreground-high-contrast); + --token-form-control-checked-surface-color-default: var(--token-color-palette-blue-200); + --token-form-control-checked-surface-color-hover: var(--token-color-palette-blue-300); + --token-form-control-disabled-border-color: var(--token-color-border-primary); + --token-form-control-disabled-foreground-color: var(--token-color-foreground-disabled); + --token-form-control-disabled-surface-color: var(--token-color-surface-interactive-disabled); + --token-form-control-invalid-border-color-default: var(--token-color-palette-red-300); + --token-form-control-invalid-border-color-hover: var(--token-color-palette-red-400); + --token-form-control-padding: 7px; /** Notice: we have to take in account the border, so it's 1px less than in Figma. */ + --token-form-control-readonly-border-color: var(--token-color-border-faint); + --token-form-control-readonly-foreground-color: var(--token-color-foreground-primary); + --token-form-control-readonly-surface-color: var(--token-color-surface-strong); + --token-form-error-color: var(--token-color-palette-red-300); + --token-form-error-icon-size: 14px; + --token-form-helper-text-color: var(--token-color-foreground-faint); + --token-form-indicator-optional-color: var(--token-color-foreground-faint); + --token-form-label-color: var(--token-color-foreground-strong); + --token-form-legend-color: var(--token-form-label-color); + --token-form-radio-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'dot' color is hardcoded here! */ + --token-form-radio-background-image-data-url: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e"); /** notice: the 'dot' color is hardcoded here! */ + --token-form-radio-background-image-size: 12px; + --token-form-radio-border-width: 1px; + --token-form-radio-size: 16px; + --token-form-radiocard-border-width: 1px; + --token-form-radiocard-content-padding: 24px; + --token-form-radiocard-control-padding: 8px; + --token-form-radiocard-group-gap: 16px; + --token-form-radiocard-transition-duration: 0.2s; + --token-form-select-background-image-data-url-disabled: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E"); /** notice: the 'caret' color is hardcoded here! */ + --token-form-select-background-image-data-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E"); /** notice: the 'caret' color is hardcoded here! */ + --token-form-select-background-image-position-right-x: var(--token-form-control-padding); + --token-form-select-background-image-position-top-y: 9px; + --token-form-select-background-image-size: 16px; + --token-form-text-input-background-image-data-url-date: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-cancel: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-loading: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color and animation are hardcoded here! */ + --token-form-text-input-background-image-data-url-search: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-time: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-position-x: var(--token-form-control-padding); + --token-form-text-input-background-image-size: 16px; + --token-form-toggle-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-background-image-position-x: 2px; + --token-form-toggle-background-image-size: 12px; + --token-form-toggle-base-surface-color-default: var(--token-color-surface-strong); /** the toggle has a different base surface color, compared to the other controls */ + --token-form-toggle-border-radius: 3px; + --token-form-toggle-border-width: 1px; + --token-form-toggle-height: 16px; + --token-form-toggle-thumb-size: var(--token-form-toggle-height); + --token-form-toggle-transition-duration: 0.2s; + --token-form-toggle-transition-timing-function: cubic-bezier(0.68, -0.2, 0.265, 1.15); + --token-form-toggle-width: 32px; + --token-pagination-child-spacing-horizontal: 20px; + --token-pagination-child-spacing-vertical: 8px; + --token-pagination-nav-control-focus-inset: 4px; + --token-pagination-nav-control-height: 36px; + --token-pagination-nav-control-icon-spacing: 6px; + --token-pagination-nav-control-padding-horizontal: 12px; + --token-pagination-nav-indicator-height: 2px; + --token-pagination-nav-indicator-spacing: 6px; + --token-tabs-divider-height: 1px; + --token-tabs-indicator-height: 3px; + --token-tabs-indicator-transition-duration: 0.6s; + --token-tabs-indicator-transition-function: cubic-bezier(0.5, 1, 0.89, 1); + --token-tabs-tab-border-radius: 5px; + --token-tabs-tab-focus-inset: 6px; + --token-tabs-tab-gutter: 6px; + --token-tabs-tab-height-large: 48px; + --token-tabs-tab-height-medium: 36px; + --token-tabs-tab-padding-horizontal-large: 20px; + --token-tabs-tab-padding-horizontal-medium: 12px; + --token-tabs-tab-padding-vertical: 0px; + --token-tooltip-focus-offset: -2px; + --token-tooltip-transition-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); +} \ No newline at end of file diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/default/themed-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/default/themed-tokens.css new file mode 100644 index 00000000000..d10144e9799 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/default/themed-tokens.css @@ -0,0 +1,309 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-app-footer-focus-color-action-internal: var(--token-color-focus-action-internal); + --token-badge-border-radius: var(--token-border-radius-small); + --token-badge-count-padding-horizontal-large: 14px; + --token-badge-count-padding-horizontal-medium: 12px; + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-foreground-color-critical-filled: var(--token-color-palette-red-400); /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: var(--token-color-foreground-high-contrast); + --token-badge-foreground-color-critical-outlined: var(--token-color-foreground-critical); + --token-badge-foreground-color-highlight-filled: var(--token-color-palette-purple-400); /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: var(--token-color-foreground-high-contrast); + --token-badge-foreground-color-highlight-outlined: var(--token-color-foreground-highlight); + --token-badge-foreground-color-neutral-dark-mode-filled: var(--token-color-foreground-high-contrast); + --token-badge-foreground-color-neutral-dark-mode-inverted: var(--token-color-foreground-primary); + --token-badge-foreground-color-neutral-dark-mode-outlined: var(--token-color-foreground-high-contrast); + --token-badge-foreground-color-neutral-filled: var(--token-color-foreground-primary); + --token-badge-foreground-color-neutral-inverted: var(--token-color-foreground-high-contrast); + --token-badge-foreground-color-neutral-outlined: var(--token-color-foreground-primary); + --token-badge-foreground-color-success-filled: var(--token-color-palette-green-400); /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: var(--token-color-foreground-high-contrast); + --token-badge-foreground-color-success-outlined: var(--token-color-foreground-success); + --token-badge-foreground-color-warning-filled: var(--token-color-palette-amber-400); + --token-badge-foreground-color-warning-inverted: var(--token-color-foreground-high-contrast); + --token-badge-foreground-color-warning-outlined: var(--token-color-foreground-warning); + --token-badge-gap-large: 6px; + --token-badge-gap-medium: 4px; + --token-badge-gap-small: 4px; + --token-badge-height-small: 20px; + --token-badge-padding-horizontal-large: 8px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-small: 6px; + --token-badge-padding-vertical-small: 2px; + --token-badge-surface-color-critical-filled: var(--token-color-palette-red-100); /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: var(--token-color-palette-red-200); + --token-badge-surface-color-highlight-filled: var(--token-color-palette-purple-100); /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: var(--token-color-palette-purple-200); + --token-badge-surface-color-neutral-dark-mode-filled: var(--token-color-palette-neutral-500); /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: var(--token-color-surface-faint); + --token-badge-surface-color-neutral-filled: var(--token-color-palette-neutral-200); + --token-badge-surface-color-neutral-inverted: var(--token-color-palette-neutral-500); /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-success-filled: var(--token-color-palette-green-100); /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: var(--token-color-palette-green-200); + --token-badge-surface-color-warning-filled: var(--token-color-palette-amber-100); /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: var(--token-color-palette-amber-200); + --token-badge-typography-font-size-large: 1rem; + --token-badge-typography-font-size-medium: 0.8125rem; + --token-badge-typography-font-size-small: 0.8125rem; + --token-badge-typography-line-height-large: 1.5; /** 24px = 1.5 */ + --token-border-radius-large: 8px; + --token-border-radius-medium: 6px; + --token-border-radius-small: 5px; + --token-border-radius-x-small: 3px; + --token-button-border-color-critical-active: var(--token-color-palette-red-400); + --token-button-border-color-critical-default: var(--token-color-foreground-critical-on-surface); + --token-button-border-color-critical-focus-external: var(--token-color-focus-critical-external); /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-focus-internal: var(--token-color-focus-critical-internal); /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-hover: var(--token-color-palette-red-400); + --token-button-border-color-primary-active: var(--token-color-palette-blue-400); + --token-button-border-color-primary-default: var(--token-color-palette-blue-300); + --token-button-border-color-primary-focus-external: var(--token-color-focus-action-external); /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-focus-internal: var(--token-color-focus-action-internal); /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-hover: var(--token-color-palette-blue-300); + --token-button-border-color-secondary-active: var(--token-color-border-strong); + --token-button-border-color-secondary-default: var(--token-color-border-strong); + --token-button-border-color-secondary-focus-external: var(--token-color-focus-action-external); /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-focus-internal: var(--token-color-focus-action-internal); /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-hover: var(--token-color-border-strong); + --token-button-border-radius: var(--token-border-radius-small); + --token-button-foreground-color-critical-active: var(--token-color-foreground-high-contrast); + --token-button-foreground-color-critical-default: var(--token-color-foreground-critical-on-surface); + --token-button-foreground-color-critical-focus: var(--token-color-foreground-critical-on-surface); + --token-button-foreground-color-critical-hover: var(--token-color-foreground-high-contrast); + --token-button-foreground-color-disabled: var(--token-color-foreground-disabled); + --token-button-foreground-color-primary-active: var(--token-color-foreground-high-contrast); + --token-button-foreground-color-primary-default: var(--token-color-foreground-high-contrast); + --token-button-foreground-color-primary-focus: var(--token-color-foreground-high-contrast); + --token-button-foreground-color-primary-hover: var(--token-color-foreground-high-contrast); + --token-button-foreground-color-secondary-active: var(--token-color-foreground-primary); + --token-button-foreground-color-secondary-default: var(--token-color-foreground-primary); + --token-button-foreground-color-secondary-focus: var(--token-color-foreground-primary); + --token-button-foreground-color-secondary-hover: var(--token-color-foreground-primary); + --token-button-foreground-color-tertiary-active: var(--token-color-foreground-action-active); + --token-button-foreground-color-tertiary-default: var(--token-color-foreground-action); + --token-button-foreground-color-tertiary-focus: var(--token-color-foreground-action); + --token-button-foreground-color-tertiary-hover: var(--token-color-foreground-action-hover); + --token-button-gap: 6px; + --token-button-height-large: 48px; + --token-button-height-medium: 36px; + --token-button-height-small: 28px; + --token-button-icon-size-large: 24px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-small: 12px; + --token-button-padding-horizontal-large: 19px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-small: 11px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 11px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 9px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-surface-color-critical-active: var(--token-color-palette-red-400); + --token-button-surface-color-critical-default: var(--token-color-surface-critical); + --token-button-surface-color-critical-focus: var(--token-color-surface-critical); + --token-button-surface-color-critical-hover: var(--token-color-palette-red-300); + --token-button-surface-color-disabled: var(--token-color-surface-faint); + --token-button-surface-color-primary-active: var(--token-color-palette-blue-400); + --token-button-surface-color-primary-default: var(--token-color-palette-blue-200); + --token-button-surface-color-primary-focus: var(--token-color-palette-blue-200); + --token-button-surface-color-primary-hover: var(--token-color-palette-blue-300); + --token-button-surface-color-secondary-active: var(--token-color-surface-interactive-active); + --token-button-surface-color-secondary-default: var(--token-color-surface-faint); + --token-button-surface-color-secondary-focus: var(--token-color-surface-faint); + --token-button-surface-color-secondary-hover: var(--token-color-surface-primary); + --token-button-surface-color-tertiary-active: var(--token-color-surface-interactive-active); + --token-button-surface-color-tertiary-focus: rgba(0, 0, 0, 0); + --token-button-surface-color-tertiary-hover: var(--token-color-surface-primary); + --token-button-typography-font-size-large: 1rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-small: 0.8125rem; + --token-button-typography-line-height-large: 1.5; /** 24px = 1.5 */ + --token-button-typography-line-height-medium: 1.1429; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-small: 0.9286; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-color-border-action: var(--token-color-palette-blue-100); + --token-color-border-critical: var(--token-color-palette-red-100); + --token-color-border-faint: var(--token-color-palette-alpha-100); + --token-color-border-highlight: var(--token-color-palette-purple-100); + --token-color-border-primary: var(--token-color-palette-alpha-200); + --token-color-border-strong: var(--token-color-palette-alpha-300); + --token-color-border-success: var(--token-color-palette-green-100); + --token-color-border-warning: var(--token-color-palette-amber-100); + --token-color-focus-action-external: #5990ff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-action-internal: var(--token-color-palette-blue-300); + --token-color-focus-critical-external: #dd7578; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: var(--token-color-palette-red-300); + --token-color-foreground-action-active: var(--token-color-palette-blue-400); + --token-color-foreground-action-hover: var(--token-color-palette-blue-300); + --token-color-foreground-action: var(--token-color-palette-blue-200); + --token-color-foreground-critical-high-contrast: var(--token-color-palette-red-500); + --token-color-foreground-critical-on-surface: var(--token-color-palette-red-300); + --token-color-foreground-critical: var(--token-color-palette-red-200); + --token-color-foreground-disabled: var(--token-color-palette-neutral-400); + --token-color-foreground-faint: var(--token-color-palette-neutral-500); + --token-color-foreground-high-contrast: var(--token-color-palette-neutral-0); + --token-color-foreground-highlight-high-contrast: var(--token-color-palette-purple-500); + --token-color-foreground-highlight-on-surface: var(--token-color-palette-purple-300); + --token-color-foreground-highlight: var(--token-color-palette-purple-200); + --token-color-foreground-primary: var(--token-color-palette-neutral-600); + --token-color-foreground-strong: var(--token-color-palette-neutral-700); + --token-color-foreground-success-high-contrast: var(--token-color-palette-green-500); + --token-color-foreground-success-on-surface: var(--token-color-palette-green-300); + --token-color-foreground-success: var(--token-color-palette-green-200); + --token-color-foreground-warning-high-contrast: var(--token-color-palette-amber-500); + --token-color-foreground-warning-on-surface: var(--token-color-palette-amber-300); + --token-color-foreground-warning: var(--token-color-palette-amber-200); + --token-color-hashicorp-brand: #000000; + --token-color-hcp-brand: #000000; + --token-color-page-faint: var(--token-color-palette-neutral-50); + --token-color-page-primary: var(--token-color-palette-neutral-0); + --token-color-palette-alpha-100: #656a761a; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-400: #006619; + --token-color-palette-green-500: #054220; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-neutral-100: #f1f2f3; + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-300: #c2c5cb; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-400: #940004; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-50: #fff5f5; + --token-color-surface-action: var(--token-color-palette-blue-50); + --token-color-surface-critical: var(--token-color-palette-red-50); + --token-color-surface-faint: var(--token-color-palette-neutral-50); + --token-color-surface-high-contrast: var(--token-color-palette-neutral-700); + --token-color-surface-highlight: var(--token-color-palette-purple-50); + --token-color-surface-interactive-active: var(--token-color-palette-neutral-200); + --token-color-surface-interactive-disabled: var(--token-color-palette-neutral-50); + --token-color-surface-interactive-hover: var(--token-color-palette-neutral-100); + --token-color-surface-interactive: var(--token-color-palette-neutral-0); + --token-color-surface-primary: var(--token-color-palette-neutral-0); + --token-color-surface-strong: var(--token-color-palette-neutral-100); + --token-color-surface-success: var(--token-color-palette-green-50); + --token-color-surface-warning: var(--token-color-palette-amber-50); + --token-color-vault-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-radar-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ + --token-color-vault-secrets-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-dismiss-button-border-color-active: var(--token-color-border-strong); + --token-dismiss-button-foreground-color-active: var(--token-color-foreground-strong); + --token-dismiss-button-foreground-color-default: var(--token-color-foreground-faint); + --token-dismiss-button-icon-size: 16px; + --token-dismiss-button-size: 24px; + --token-dismiss-button-surface-color-active: rgba(222, 223, 227, 0.4); + --token-dismiss-button-surface-color-hover: rgba(222, 223, 227, 0.4); + --token-elevation-high-box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633; + --token-elevation-higher-box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640; + --token-elevation-inset-box-shadow: inset 0px 1px 2px 1px #656a761a; + --token-elevation-low-box-shadow: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; + --token-elevation-mid-box-shadow: 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633; + --token-elevation-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; + --token-focus-ring-action-box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff; + --token-focus-ring-critical-box-shadow: inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578; + --token-form-radiocard-border-color-default-checked: var(--token-color-palette-blue-300); + --token-form-radiocard-border-color-default: var(--token-color-surface-primary); + --token-form-radiocard-border-color-focus: var(--token-color-focus-action-internal); + --token-form-radiocard-border-radius: 6px; + --token-icon-tile-border-color-logo: var(--token-color-border-primary); + --token-icon-tile-border-color-overlay: var(--token-color-border-primary); + --token-icon-tile-surface-color-overlay: var(--token-color-surface-primary); + --token-rich-tooltip-bubble-arrow-size: 20px; + --token-rich-tooltip-bubble-border-color: #656a7633; + --token-rich-tooltip-bubble-border-radius: var(--token-border-radius-small); + --token-rich-tooltip-bubble-max-width: 280px; + --token-rich-tooltip-toggle-foreground-color-active: var(--token-color-foreground-faint); + --token-rich-tooltip-toggle-foreground-color-default: var(--token-color-foreground-strong); + --token-rich-tooltip-toggle-foreground-color-hover: var(--token-color-foreground-primary); + --token-rich-tooltip-toggle-gap-horizontal: 4px; + --token-rich-tooltip-toggle-icon-size: 1em; + --token-surface-base-box-shadow: 0 0 0 1px #656a7633; + --token-surface-high-box-shadow: 0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633; + --token-surface-higher-box-shadow: 0 0 0 1px #656a7633, 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640; + --token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a; + --token-surface-low-box-shadow: 0 0 0 1px #656a7626, 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; + --token-surface-mid-box-shadow: 0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633; + --token-surface-overlay-box-shadow: 0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; + --token-tooltip-border-radius: var(--token-border-radius-small); + --token-tooltip-caret-clip-path: path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z'); + --token-tooltip-caret-height: 7px; + --token-tooltip-caret-width: 16px; + --token-tooltip-max-width: 280px; + --token-tooltip-padding-horizontal: 12px; + --token-tooltip-padding-vertical: 8px; + --token-typography-body-100-font-family: var(--token-typography-font-stack-text); + --token-typography-body-100-font-size: 0.8125rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.3846; /** 18px */ + --token-typography-body-200-font-family: var(--token-typography-font-stack-text); + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.4286; /** 20px */ + --token-typography-body-300-font-family: var(--token-typography-font-stack-text); + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-code-100-font-family: var(--token-typography-font-stack-code); + --token-typography-code-100-font-size: 0.8125rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.23; /** 16px */ + --token-typography-code-200-font-family: var(--token-typography-font-stack-code); + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.125; /** 18px */ + --token-typography-code-300-font-family: var(--token-typography-font-stack-code); + --token-typography-code-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.25; /** 20px */ + --token-typography-display-100-font-family: var(--token-typography-font-stack-display); + --token-typography-display-100-font-size: 0.8125rem; /** 13px/0.8125rem */ + --token-typography-display-100-letter-spacing: 0px; + --token-typography-display-100-line-height: 1.3846; /** 18px */ + --token-typography-display-200-font-family: var(--token-typography-font-stack-display); + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-letter-spacing: -0.5px; + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-300-font-family: var(--token-typography-font-stack-text); + --token-typography-display-300-font-size: 1.125rem; /** 18px/1.125rem */ + --token-typography-display-300-letter-spacing: -0.5px; + --token-typography-display-300-line-height: 1.3333; /** 24px */ + --token-typography-display-400-font-family: var(--token-typography-font-stack-display); + --token-typography-display-400-font-size: 1.5rem; /** 24px/1.5rem */ + --token-typography-display-400-letter-spacing: 0px; + --token-typography-display-400-line-height: 1.3333; /** 32px */ + --token-typography-display-500-font-family: var(--token-typography-font-stack-display); + --token-typography-display-500-font-size: 1.875rem; /** 30px/1.875rem */ + --token-typography-display-500-letter-spacing: -0.5px; + --token-typography-display-500-line-height: 1.2666; /** 38px */ + --token-typography-font-stack-code: ui-monospace, Menlo, Consolas, monospace; + --token-typography-font-stack-display: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-font-stack-text: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-font-weight-bold: 700; + --token-typography-font-weight-medium: 500; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-semibold: 600; +} \ No newline at end of file diff --git a/packages/tokens/dist/products/css/themed-tokens/with-scss-mixins/tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-scss-mixins/tokens.css new file mode 100644 index 00000000000..da1a6918a05 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-scss-mixins/tokens.css @@ -0,0 +1,2888 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +@mixin hds-theme-default() { + :root { + --token-app-footer-focus-color-action-internal: var( + --token-color-focus-action-internal + ); + --token-badge-border-radius: var(--token-border-radius-small); + --token-badge-count-padding-horizontal-large: 14px; + --token-badge-count-padding-horizontal-medium: 12px; + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-foreground-color-critical-filled: var( + --token-color-palette-red-400 + ); /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: var( + --token-color-foreground-high-contrast + ); + --token-badge-foreground-color-critical-outlined: var( + --token-color-foreground-critical + ); + --token-badge-foreground-color-highlight-filled: var( + --token-color-palette-purple-400 + ); /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: var( + --token-color-foreground-high-contrast + ); + --token-badge-foreground-color-highlight-outlined: var( + --token-color-foreground-highlight + ); + --token-badge-foreground-color-neutral-dark-mode-filled: var( + --token-color-foreground-high-contrast + ); + --token-badge-foreground-color-neutral-dark-mode-inverted: var( + --token-color-foreground-primary + ); + --token-badge-foreground-color-neutral-dark-mode-outlined: var( + --token-color-foreground-high-contrast + ); + --token-badge-foreground-color-neutral-filled: var( + --token-color-foreground-primary + ); + --token-badge-foreground-color-neutral-inverted: var( + --token-color-foreground-high-contrast + ); + --token-badge-foreground-color-neutral-outlined: var( + --token-color-foreground-primary + ); + --token-badge-foreground-color-success-filled: var( + --token-color-palette-green-400 + ); /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: var( + --token-color-foreground-high-contrast + ); + --token-badge-foreground-color-success-outlined: var( + --token-color-foreground-success + ); + --token-badge-foreground-color-warning-filled: var( + --token-color-palette-amber-400 + ); + --token-badge-foreground-color-warning-inverted: var( + --token-color-foreground-high-contrast + ); + --token-badge-foreground-color-warning-outlined: var( + --token-color-foreground-warning + ); + --token-badge-gap-large: 6px; + --token-badge-gap-medium: 4px; + --token-badge-gap-small: 4px; + --token-badge-height-small: 20px; + --token-badge-padding-horizontal-large: 8px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-small: 6px; + --token-badge-padding-vertical-small: 2px; + --token-badge-surface-color-critical-filled: var( + --token-color-palette-red-100 + ); /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: var( + --token-color-palette-red-200 + ); + --token-badge-surface-color-highlight-filled: var( + --token-color-palette-purple-100 + ); /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: var( + --token-color-palette-purple-200 + ); + --token-badge-surface-color-neutral-dark-mode-filled: var( + --token-color-palette-neutral-500 + ); /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: var( + --token-color-surface-faint + ); + --token-badge-surface-color-neutral-filled: var( + --token-color-palette-neutral-200 + ); + --token-badge-surface-color-neutral-inverted: var( + --token-color-palette-neutral-500 + ); /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-success-filled: var( + --token-color-palette-green-100 + ); /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: var( + --token-color-palette-green-200 + ); + --token-badge-surface-color-warning-filled: var( + --token-color-palette-amber-100 + ); /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: var( + --token-color-palette-amber-200 + ); + --token-badge-typography-font-size-large: 1rem; + --token-badge-typography-font-size-medium: 0.8125rem; + --token-badge-typography-font-size-small: 0.8125rem; + --token-badge-typography-line-height-large: 1.5; /** 24px = 1.5 */ + --token-border-radius-large: 8px; + --token-border-radius-medium: 6px; + --token-border-radius-small: 5px; + --token-border-radius-x-small: 3px; + --token-button-border-color-critical-active: var( + --token-color-palette-red-400 + ); + --token-button-border-color-critical-default: var( + --token-color-foreground-critical-on-surface + ); + --token-button-border-color-critical-focus-external: var( + --token-color-focus-critical-external + ); /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-focus-internal: var( + --token-color-focus-critical-internal + ); /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-hover: var( + --token-color-palette-red-400 + ); + --token-button-border-color-primary-active: var( + --token-color-palette-blue-400 + ); + --token-button-border-color-primary-default: var( + --token-color-palette-blue-300 + ); + --token-button-border-color-primary-focus-external: var( + --token-color-focus-action-external + ); /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-focus-internal: var( + --token-color-focus-action-internal + ); /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-hover: var( + --token-color-palette-blue-300 + ); + --token-button-border-color-secondary-active: var( + --token-color-border-strong + ); + --token-button-border-color-secondary-default: var( + --token-color-border-strong + ); + --token-button-border-color-secondary-focus-external: var( + --token-color-focus-action-external + ); /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-focus-internal: var( + --token-color-focus-action-internal + ); /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-hover: var( + --token-color-border-strong + ); + --token-button-border-radius: var(--token-border-radius-small); + --token-button-foreground-color-critical-active: var( + --token-color-foreground-high-contrast + ); + --token-button-foreground-color-critical-default: var( + --token-color-foreground-critical-on-surface + ); + --token-button-foreground-color-critical-focus: var( + --token-color-foreground-critical-on-surface + ); + --token-button-foreground-color-critical-hover: var( + --token-color-foreground-high-contrast + ); + --token-button-foreground-color-disabled: var( + --token-color-foreground-disabled + ); + --token-button-foreground-color-primary-active: var( + --token-color-foreground-high-contrast + ); + --token-button-foreground-color-primary-default: var( + --token-color-foreground-high-contrast + ); + --token-button-foreground-color-primary-focus: var( + --token-color-foreground-high-contrast + ); + --token-button-foreground-color-primary-hover: var( + --token-color-foreground-high-contrast + ); + --token-button-foreground-color-secondary-active: var( + --token-color-foreground-primary + ); + --token-button-foreground-color-secondary-default: var( + --token-color-foreground-primary + ); + --token-button-foreground-color-secondary-focus: var( + --token-color-foreground-primary + ); + --token-button-foreground-color-secondary-hover: var( + --token-color-foreground-primary + ); + --token-button-foreground-color-tertiary-active: var( + --token-color-foreground-action-active + ); + --token-button-foreground-color-tertiary-default: var( + --token-color-foreground-action + ); + --token-button-foreground-color-tertiary-focus: var( + --token-color-foreground-action + ); + --token-button-foreground-color-tertiary-hover: var( + --token-color-foreground-action-hover + ); + --token-button-gap: 6px; + --token-button-height-large: 48px; + --token-button-height-medium: 36px; + --token-button-height-small: 28px; + --token-button-icon-size-large: 24px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-small: 12px; + --token-button-padding-horizontal-large: 19px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-small: 11px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 11px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 9px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-surface-color-critical-active: var( + --token-color-palette-red-400 + ); + --token-button-surface-color-critical-default: var( + --token-color-surface-critical + ); + --token-button-surface-color-critical-focus: var( + --token-color-surface-critical + ); + --token-button-surface-color-critical-hover: var( + --token-color-palette-red-300 + ); + --token-button-surface-color-disabled: var(--token-color-surface-faint); + --token-button-surface-color-primary-active: var( + --token-color-palette-blue-400 + ); + --token-button-surface-color-primary-default: var( + --token-color-palette-blue-200 + ); + --token-button-surface-color-primary-focus: var( + --token-color-palette-blue-200 + ); + --token-button-surface-color-primary-hover: var( + --token-color-palette-blue-300 + ); + --token-button-surface-color-secondary-active: var( + --token-color-surface-interactive-active + ); + --token-button-surface-color-secondary-default: var( + --token-color-surface-faint + ); + --token-button-surface-color-secondary-focus: var( + --token-color-surface-faint + ); + --token-button-surface-color-secondary-hover: var( + --token-color-surface-primary + ); + --token-button-surface-color-tertiary-active: var( + --token-color-surface-interactive-active + ); + --token-button-surface-color-tertiary-focus: rgba(0, 0, 0, 0); + --token-button-surface-color-tertiary-hover: var( + --token-color-surface-primary + ); + --token-button-typography-font-size-large: 1rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-small: 0.8125rem; + --token-button-typography-line-height-large: 1.5; /** 24px = 1.5 */ + --token-button-typography-line-height-medium: 1.1429; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-small: 0.9286; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-color-border-action: var(--token-color-palette-blue-100); + --token-color-border-critical: var(--token-color-palette-red-100); + --token-color-border-faint: var(--token-color-palette-alpha-100); + --token-color-border-highlight: var(--token-color-palette-purple-100); + --token-color-border-primary: var(--token-color-palette-alpha-200); + --token-color-border-strong: var(--token-color-palette-alpha-300); + --token-color-border-success: var(--token-color-palette-green-100); + --token-color-border-warning: var(--token-color-palette-amber-100); + --token-color-focus-action-external: #5990ff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-action-internal: var(--token-color-palette-blue-300); + --token-color-focus-critical-external: #dd7578; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: var(--token-color-palette-red-300); + --token-color-foreground-action-active: var(--token-color-palette-blue-400); + --token-color-foreground-action-hover: var(--token-color-palette-blue-300); + --token-color-foreground-action: var(--token-color-palette-blue-200); + --token-color-foreground-critical-high-contrast: var( + --token-color-palette-red-500 + ); + --token-color-foreground-critical-on-surface: var( + --token-color-palette-red-300 + ); + --token-color-foreground-critical: var(--token-color-palette-red-200); + --token-color-foreground-disabled: var(--token-color-palette-neutral-400); + --token-color-foreground-faint: var(--token-color-palette-neutral-500); + --token-color-foreground-high-contrast: var( + --token-color-palette-neutral-0 + ); + --token-color-foreground-highlight-high-contrast: var( + --token-color-palette-purple-500 + ); + --token-color-foreground-highlight-on-surface: var( + --token-color-palette-purple-300 + ); + --token-color-foreground-highlight: var(--token-color-palette-purple-200); + --token-color-foreground-primary: var(--token-color-palette-neutral-600); + --token-color-foreground-strong: var(--token-color-palette-neutral-700); + --token-color-foreground-success-high-contrast: var( + --token-color-palette-green-500 + ); + --token-color-foreground-success-on-surface: var( + --token-color-palette-green-300 + ); + --token-color-foreground-success: var(--token-color-palette-green-200); + --token-color-foreground-warning-high-contrast: var( + --token-color-palette-amber-500 + ); + --token-color-foreground-warning-on-surface: var( + --token-color-palette-amber-300 + ); + --token-color-foreground-warning: var(--token-color-palette-amber-200); + --token-color-hashicorp-brand: #000000; + --token-color-hcp-brand: #000000; + --token-color-page-faint: var(--token-color-palette-neutral-50); + --token-color-page-primary: var(--token-color-palette-neutral-0); + --token-color-palette-alpha-100: #656a761a; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-400: #006619; + --token-color-palette-green-500: #054220; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-neutral-100: #f1f2f3; + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-300: #c2c5cb; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-400: #940004; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-50: #fff5f5; + --token-color-surface-action: var(--token-color-palette-blue-50); + --token-color-surface-critical: var(--token-color-palette-red-50); + --token-color-surface-faint: var(--token-color-palette-neutral-50); + --token-color-surface-high-contrast: var(--token-color-palette-neutral-700); + --token-color-surface-highlight: var(--token-color-palette-purple-50); + --token-color-surface-interactive-active: var( + --token-color-palette-neutral-200 + ); + --token-color-surface-interactive-disabled: var( + --token-color-palette-neutral-50 + ); + --token-color-surface-interactive-hover: var( + --token-color-palette-neutral-100 + ); + --token-color-surface-interactive: var(--token-color-palette-neutral-0); + --token-color-surface-primary: var(--token-color-palette-neutral-0); + --token-color-surface-strong: var(--token-color-palette-neutral-100); + --token-color-surface-success: var(--token-color-palette-green-50); + --token-color-surface-warning: var(--token-color-palette-amber-50); + --token-color-vault-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-radar-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ + --token-color-vault-secrets-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-dismiss-button-border-color-active: var( + --token-color-border-strong + ); + --token-dismiss-button-foreground-color-active: var( + --token-color-foreground-strong + ); + --token-dismiss-button-foreground-color-default: var( + --token-color-foreground-faint + ); + --token-dismiss-button-icon-size: 16px; + --token-dismiss-button-size: 24px; + --token-dismiss-button-surface-color-active: rgba(222, 223, 227, 0.4); + --token-dismiss-button-surface-color-hover: rgba(222, 223, 227, 0.4); + --token-elevation-high-box-shadow: + 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633; + --token-elevation-higher-box-shadow: + 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640; + --token-elevation-inset-box-shadow: inset 0px 1px 2px 1px #656a761a; + --token-elevation-low-box-shadow: + 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; + --token-elevation-mid-box-shadow: + 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633; + --token-elevation-overlay-box-shadow: + 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; + --token-focus-ring-action-box-shadow: + inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff; + --token-focus-ring-critical-box-shadow: + inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578; + --token-form-radiocard-border-color-default-checked: var( + --token-color-palette-blue-300 + ); + --token-form-radiocard-border-color-default: var( + --token-color-surface-primary + ); + --token-form-radiocard-border-color-focus: var( + --token-color-focus-action-internal + ); + --token-form-radiocard-border-radius: 6px; + --token-icon-tile-border-color-logo: var(--token-color-border-primary); + --token-icon-tile-border-color-overlay: var(--token-color-border-primary); + --token-icon-tile-surface-color-overlay: var(--token-color-surface-primary); + --token-rich-tooltip-bubble-arrow-size: 20px; + --token-rich-tooltip-bubble-border-color: #656a7633; + --token-rich-tooltip-bubble-border-radius: var(--token-border-radius-small); + --token-rich-tooltip-bubble-max-width: 280px; + --token-rich-tooltip-toggle-foreground-color-active: var( + --token-color-foreground-faint + ); + --token-rich-tooltip-toggle-foreground-color-default: var( + --token-color-foreground-strong + ); + --token-rich-tooltip-toggle-foreground-color-hover: var( + --token-color-foreground-primary + ); + --token-rich-tooltip-toggle-gap-horizontal: 4px; + --token-rich-tooltip-toggle-icon-size: 1em; + --token-surface-base-box-shadow: 0 0 0 1px #656a7633; + --token-surface-high-box-shadow: + 0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, + 0px 16px 16px -10px #656a7633; + --token-surface-higher-box-shadow: + 0 0 0 1px #656a7633, 0px 2px 3px 0px #656a761a, + 0px 12px 28px 0px #656a7640; + --token-surface-inset-box-shadow: + inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a; + --token-surface-low-box-shadow: + 0 0 0 1px #656a7626, 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; + --token-surface-mid-box-shadow: + 0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, + 0px 8px 16px -10px #656a7633; + --token-surface-overlay-box-shadow: + 0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, + 0px 12px 24px 0px #3b3d4559; + --token-tooltip-border-radius: var(--token-border-radius-small); + --token-tooltip-caret-clip-path: path( + "M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z" + ); + --token-tooltip-caret-height: 7px; + --token-tooltip-caret-width: 16px; + --token-tooltip-max-width: 280px; + --token-tooltip-padding-horizontal: 12px; + --token-tooltip-padding-vertical: 8px; + --token-typography-body-100-font-family: var( + --token-typography-font-stack-text + ); + --token-typography-body-100-font-size: 0.8125rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.3846; /** 18px */ + --token-typography-body-200-font-family: var( + --token-typography-font-stack-text + ); + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.4286; /** 20px */ + --token-typography-body-300-font-family: var( + --token-typography-font-stack-text + ); + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-code-100-font-family: var( + --token-typography-font-stack-code + ); + --token-typography-code-100-font-size: 0.8125rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.23; /** 16px */ + --token-typography-code-200-font-family: var( + --token-typography-font-stack-code + ); + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.125; /** 18px */ + --token-typography-code-300-font-family: var( + --token-typography-font-stack-code + ); + --token-typography-code-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.25; /** 20px */ + --token-typography-display-100-font-family: var( + --token-typography-font-stack-display + ); + --token-typography-display-100-font-size: 0.8125rem; /** 13px/0.8125rem */ + --token-typography-display-100-letter-spacing: 0px; + --token-typography-display-100-line-height: 1.3846; /** 18px */ + --token-typography-display-200-font-family: var( + --token-typography-font-stack-display + ); + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-letter-spacing: -0.5px; + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-300-font-family: var( + --token-typography-font-stack-text + ); + --token-typography-display-300-font-size: 1.125rem; /** 18px/1.125rem */ + --token-typography-display-300-letter-spacing: -0.5px; + --token-typography-display-300-line-height: 1.3333; /** 24px */ + --token-typography-display-400-font-family: var( + --token-typography-font-stack-display + ); + --token-typography-display-400-font-size: 1.5rem; /** 24px/1.5rem */ + --token-typography-display-400-letter-spacing: 0px; + --token-typography-display-400-line-height: 1.3333; /** 32px */ + --token-typography-display-500-font-family: var( + --token-typography-font-stack-display + ); + --token-typography-display-500-font-size: 1.875rem; /** 30px/1.875rem */ + --token-typography-display-500-letter-spacing: -0.5px; + --token-typography-display-500-line-height: 1.2666; /** 38px */ + --token-typography-font-stack-code: + ui-monospace, Menlo, Consolas, monospace; + --token-typography-font-stack-display: + -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, + Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-font-stack-text: + -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, + Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-font-weight-bold: 700; + --token-typography-font-weight-medium: 500; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-semibold: 600; + } +} + +@mixin hds-theme-light() { + :root { + --token-app-footer-focus-color-action-internal: #0f62fe; + --token-badge-border-radius: var(--token-border-radius-rounded); + --token-badge-count-padding-horizontal-large: 12px; + --token-badge-count-padding-horizontal-medium: 8px; + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-foreground-color-critical-filled: #a2191f; /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: #ffffff; + --token-badge-foreground-color-critical-outlined: #a2191f; + --token-badge-foreground-color-highlight-filled: #6929c4; /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: #ffffff; + --token-badge-foreground-color-highlight-outlined: #6929c4; + --token-badge-foreground-color-neutral-dark-mode-filled: #ffffff; + --token-badge-foreground-color-neutral-dark-mode-inverted: #161616; + --token-badge-foreground-color-neutral-dark-mode-outlined: #ffffff; + --token-badge-foreground-color-neutral-filled: #161616; + --token-badge-foreground-color-neutral-inverted: #e0e0e0; + --token-badge-foreground-color-neutral-outlined: #161616; + --token-badge-foreground-color-success-filled: #0e6027; /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: #ffffff; + --token-badge-foreground-color-success-outlined: #0e6027; + --token-badge-foreground-color-warning-filled: #8a3800; + --token-badge-foreground-color-warning-inverted: #ffffff; + --token-badge-foreground-color-warning-outlined: #8a3800; + --token-badge-gap-large: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-small: 4px; + --token-badge-height-small: 18px; + --token-badge-padding-horizontal-large: 12px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-small: 8px; + --token-badge-padding-vertical-small: 1px; + --token-badge-surface-color-critical-filled: #ffd7d9; /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: #a2191f; + --token-badge-surface-color-highlight-filled: #e8daff; /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: #6929c4; + --token-badge-surface-color-neutral-dark-mode-filled: #393939; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: #e0e0e0; + --token-badge-surface-color-neutral-filled: #e0e0e0; + --token-badge-surface-color-neutral-inverted: #393939; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-success-filled: #a7f0ba; /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: #0e6027; + --token-badge-surface-color-warning-filled: #ffd9be; /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: #8a3800; + --token-badge-typography-font-size-large: 0.75rem; + --token-badge-typography-font-size-medium: 0.75rem; + --token-badge-typography-font-size-small: 0.75rem; + --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */ + --token-border-radius-large: 0px; + --token-border-radius-medium: 0px; + --token-border-radius-small: 0px; + --token-border-radius-x-small: 0px; + --token-button-border-color-critical-active: rgba(0, 0, 0, 0); + --token-button-border-color-critical-default: rgba(0, 0, 0, 0); + --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-hover: rgba(0, 0, 0, 0); + --token-button-border-color-primary-active: rgba(0, 0, 0, 0); + --token-button-border-color-primary-default: rgba(0, 0, 0, 0); + --token-button-border-color-primary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-hover: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-active: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-default: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0); + --token-button-border-radius: 0px; + --token-button-foreground-color-critical-active: #ffffff; + --token-button-foreground-color-critical-default: #ffffff; + --token-button-foreground-color-critical-focus: #ffffff; + --token-button-foreground-color-critical-hover: #ffffff; + --token-button-foreground-color-disabled: #8d8d8d; + --token-button-foreground-color-primary-active: #ffffff; + --token-button-foreground-color-primary-default: #ffffff; + --token-button-foreground-color-primary-focus: #ffffff; + --token-button-foreground-color-primary-hover: #ffffff; + --token-button-foreground-color-secondary-active: #ffffff; + --token-button-foreground-color-secondary-default: #ffffff; + --token-button-foreground-color-secondary-focus: #ffffff; + --token-button-foreground-color-secondary-hover: #ffffff; + --token-button-foreground-color-tertiary-active: #ffffff; + --token-button-foreground-color-tertiary-default: #0f62fe; + --token-button-foreground-color-tertiary-focus: #ffffff; + --token-button-foreground-color-tertiary-hover: #ffffff; + --token-button-gap: 32px; + --token-button-height-large: 48px; + --token-button-height-medium: 40px; + --token-button-height-small: 32px; + --token-button-icon-size-large: 16px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-small: 16px; + --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-surface-color-critical-active: #750e13; + --token-button-surface-color-critical-default: #da1e28; + --token-button-surface-color-critical-focus: #da1e28; + --token-button-surface-color-critical-hover: #b81921; + --token-button-surface-color-disabled: #c6c6c6; + --token-button-surface-color-primary-active: #002d9c; + --token-button-surface-color-primary-default: #0f62fe; + --token-button-surface-color-primary-focus: #0f62fe; + --token-button-surface-color-primary-hover: #0050e6; + --token-button-surface-color-secondary-active: #6f6f6f; + --token-button-surface-color-secondary-default: #393939; + --token-button-surface-color-secondary-focus: #393939; + --token-button-surface-color-secondary-hover: #474747; + --token-button-surface-color-tertiary-active: #002d9c; + --token-button-surface-color-tertiary-focus: #0050e6; + --token-button-surface-color-tertiary-hover: #0050e6; + --token-button-typography-font-size-large: 0.875rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-small: 0.875rem; + --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */ + --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-color-border-action: #0f62fe; + --token-color-border-critical: #ff8389; + --token-color-border-faint: #e0e0e0; + --token-color-border-highlight: #be95ff; + --token-color-border-primary: #c6c6c6; + --token-color-border-strong: #8d8d8d; + --token-color-border-success: #42be65; + --token-color-border-warning: #d2a106; + --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-action-internal: #ffffff; + --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #ffffff; + --token-color-foreground-action-active: #0043ce; + --token-color-foreground-action-hover: #0043ce; + --token-color-foreground-action: #0f62fe; + --token-color-foreground-critical-high-contrast: #750e13; + --token-color-foreground-critical-on-surface: #a2191f; + --token-color-foreground-critical: #da1e28; + --token-color-foreground-disabled: rgba(22, 22, 22, 0.25); + --token-color-foreground-faint: #525252; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-highlight-high-contrast: #491d8b; + --token-color-foreground-highlight-on-surface: #6929c4; + --token-color-foreground-highlight: #8a3ffc; + --token-color-foreground-primary: #161616; + --token-color-foreground-strong: #161616; + --token-color-foreground-success-high-contrast: #044317; + --token-color-foreground-success-on-surface: #0e6027; + --token-color-foreground-success: #198038; + --token-color-foreground-warning-high-contrast: #483700; + --token-color-foreground-warning-on-surface: #684e00; + --token-color-foreground-warning: #8e6a00; + --token-color-hashicorp-brand: #000000; + --token-color-hcp-brand: #000000; + --token-color-page-faint: #ffffff; + --token-color-page-primary: #ffffff; + --token-color-palette-alpha-100: #e0e0e0; + --token-color-palette-alpha-200: #c6c6c6; + --token-color-palette-alpha-300: #8d8d8d; + --token-color-palette-amber-100: #ffd9be; + --token-color-palette-amber-200: #ba4e00; + --token-color-palette-amber-300: #8a3800; + --token-color-palette-amber-400: #5e2900; + --token-color-palette-amber-500: #3e1a00; + --token-color-palette-amber-50: #fff2e8; + --token-color-palette-blue-100: #d0e2ff; + --token-color-palette-blue-200: #0f62fe; + --token-color-palette-blue-300: #0043ce; + --token-color-palette-blue-400: #002d9c; + --token-color-palette-blue-500: #001141; + --token-color-palette-blue-50: #edf5ff; + --token-color-palette-green-100: #a7f0ba; + --token-color-palette-green-200: #24a148; + --token-color-palette-green-300: #198038; + --token-color-palette-green-400: #0e6027; + --token-color-palette-green-500: #044317; + --token-color-palette-green-50: #defbe6; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-neutral-100: #e0e0e0; + --token-color-palette-neutral-200: #c6c6c6; + --token-color-palette-neutral-300: #a8a8a8; + --token-color-palette-neutral-400: #8d8d8d; + --token-color-palette-neutral-500: #525252; + --token-color-palette-neutral-50: #f4f4f4; + --token-color-palette-neutral-600: #393939; + --token-color-palette-neutral-700: #161616; + --token-color-palette-purple-100: #e8daff; + --token-color-palette-purple-200: #a56eff; + --token-color-palette-purple-300: #8a3ffc; + --token-color-palette-purple-400: #6929c4; + --token-color-palette-purple-500: #31135e; + --token-color-palette-purple-50: #f6f2ff; + --token-color-palette-red-100: #ffd7d9; + --token-color-palette-red-200: #da1e28; + --token-color-palette-red-300: #a2191f; + --token-color-palette-red-400: #750e13; + --token-color-palette-red-500: #520408; + --token-color-palette-red-50: #fff1f1; + --token-color-surface-action: #d0e2ff; + --token-color-surface-critical: #ffd7d9; + --token-color-surface-faint: #f4f4f4; + --token-color-surface-high-contrast: #393939; + --token-color-surface-highlight: #e8daff; + --token-color-surface-interactive-active: #c6c6c6; + --token-color-surface-interactive-disabled: #c6c6c6; + --token-color-surface-interactive-hover: #e8e8e8; + --token-color-surface-interactive: #f4f4f4; + --token-color-surface-primary: #f4f4f4; + --token-color-surface-strong: #e0e0e0; + --token-color-surface-success: #a7f0ba; + --token-color-surface-warning: #fcf4d6; + --token-color-vault-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-radar-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ + --token-color-vault-secrets-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-dismiss-button-border-color-active: rgba(0, 0, 0, 0); + --token-dismiss-button-foreground-color-active: #161616; + --token-dismiss-button-foreground-color-default: #161616; + --token-dismiss-button-icon-size: 20px; + --token-dismiss-button-size: 48px; + --token-dismiss-button-surface-color-active: rgba(141, 141, 141, 0.5); + --token-dismiss-button-surface-color-hover: rgba(141, 141, 141, 0.12); + --token-elevation-high-box-shadow: none; + --token-elevation-higher-box-shadow: none; + --token-elevation-inset-box-shadow: none; + --token-elevation-low-box-shadow: none; + --token-elevation-mid-box-shadow: none; + --token-elevation-overlay-box-shadow: none; + --token-focus-ring-action-box-shadow: + inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe; + --token-focus-ring-critical-box-shadow: + inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe; + --token-form-radiocard-border-color-default-checked: #ffc0cb; + --token-form-radiocard-border-color-default: rgba(0, 0, 0, 0); + --token-form-radiocard-border-color-focus: #ffc0cb; + --token-form-radiocard-border-radius: 0px; + --token-icon-tile-border-color-logo: #c6c6c6; + --token-icon-tile-border-color-overlay: #e0e0e0; + --token-icon-tile-surface-color-overlay: #ffffff; + --token-rich-tooltip-bubble-arrow-size: 12px; + --token-rich-tooltip-bubble-border-color: var( + --token-color-palette-alpha-200 + ); + --token-rich-tooltip-bubble-border-radius: 2px; + --token-rich-tooltip-bubble-max-width: 288px; + --token-rich-tooltip-toggle-foreground-color-active: #525252; + --token-rich-tooltip-toggle-foreground-color-default: #525252; + --token-rich-tooltip-toggle-foreground-color-hover: #161616; + --token-rich-tooltip-toggle-gap-horizontal: 8px; + --token-rich-tooltip-toggle-icon-size: 14px; + --token-surface-base-box-shadow: none; + --token-surface-high-box-shadow: none; + --token-surface-higher-box-shadow: none; + --token-surface-inset-box-shadow: none; + --token-surface-low-box-shadow: none; + --token-surface-mid-box-shadow: none; + --token-surface-overlay-box-shadow: none; + --token-tooltip-border-radius: 2px; + --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); + --token-tooltip-caret-height: 6px; + --token-tooltip-caret-width: 12px; + --token-tooltip-max-width: 288px; + --token-tooltip-padding-horizontal: 16px; + --token-tooltip-padding-vertical: 16px; + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-letter-spacing: 0.16px; + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-letter-spacing: 0px; + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-letter-spacing: 0px; + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-letter-spacing: 0px; + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-letter-spacing: 0px; + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-weight-bold: 600; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-semibold: 600; + } +} + +@mixin hds-theme-dark() { + :root { + --token-app-footer-focus-color-action-internal: #ffffff; + --token-badge-border-radius: var(--token-border-radius-rounded); + --token-badge-count-padding-horizontal-large: 12px; + --token-badge-count-padding-horizontal-medium: 8px; + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-foreground-color-critical-filled: #ffd7d9; /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: #161616; + --token-badge-foreground-color-critical-outlined: #ffd7d9; + --token-badge-foreground-color-highlight-filled: #e8daff; /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: #161616; + --token-badge-foreground-color-highlight-outlined: #e8daff; + --token-badge-foreground-color-neutral-dark-mode-filled: #161616; + --token-badge-foreground-color-neutral-dark-mode-inverted: #f4f4f4; + --token-badge-foreground-color-neutral-dark-mode-outlined: #161616; + --token-badge-foreground-color-neutral-filled: #f4f4f4; + --token-badge-foreground-color-neutral-inverted: #161616; + --token-badge-foreground-color-neutral-outlined: #f4f4f4; + --token-badge-foreground-color-success-filled: #a7f0ba; /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: #161616; + --token-badge-foreground-color-success-outlined: #a7f0ba; + --token-badge-foreground-color-warning-filled: #ffd9be; + --token-badge-foreground-color-warning-inverted: #161616; + --token-badge-foreground-color-warning-outlined: #ffd9be; + --token-badge-gap-large: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-small: 4px; + --token-badge-height-small: 18px; + --token-badge-padding-horizontal-large: 12px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-small: 8px; + --token-badge-padding-vertical-small: 1px; + --token-badge-surface-color-critical-filled: #a2191f; /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: #ffd7d9; + --token-badge-surface-color-highlight-filled: #6929c4; /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: #be95ff; + --token-badge-surface-color-neutral-dark-mode-filled: #f4f4f4; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: #525252; + --token-badge-surface-color-neutral-filled: #525252; + --token-badge-surface-color-neutral-inverted: #f4f4f4; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-success-filled: #0e6027; /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: #a7f0ba; + --token-badge-surface-color-warning-filled: #8a3800; /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: #ffd9be; + --token-badge-typography-font-size-large: 0.75rem; + --token-badge-typography-font-size-medium: 0.75rem; + --token-badge-typography-font-size-small: 0.75rem; + --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */ + --token-border-radius-large: 0px; + --token-border-radius-medium: 0px; + --token-border-radius-small: 0px; + --token-border-radius-x-small: 0px; + --token-button-border-color-critical-active: rgba(0, 0, 0, 0); + --token-button-border-color-critical-default: rgba(0, 0, 0, 0); + --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-hover: rgba(0, 0, 0, 0); + --token-button-border-color-primary-active: rgba(0, 0, 0, 0); + --token-button-border-color-primary-default: rgba(0, 0, 0, 0); + --token-button-border-color-primary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-hover: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-active: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-default: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0); + --token-button-border-radius: 0px; + --token-button-foreground-color-critical-active: #ffffff; + --token-button-foreground-color-critical-default: #ffffff; + --token-button-foreground-color-critical-focus: #ffffff; + --token-button-foreground-color-critical-hover: #ffffff; + --token-button-foreground-color-disabled: rgba(255, 255, 255, 0.25); + --token-button-foreground-color-primary-active: #ffffff; + --token-button-foreground-color-primary-default: #ffffff; + --token-button-foreground-color-primary-focus: #ffffff; + --token-button-foreground-color-primary-hover: #ffffff; + --token-button-foreground-color-secondary-active: #ffffff; + --token-button-foreground-color-secondary-default: #ffffff; + --token-button-foreground-color-secondary-focus: #ffffff; + --token-button-foreground-color-secondary-hover: #ffffff; + --token-button-foreground-color-tertiary-active: #161616; + --token-button-foreground-color-tertiary-default: #ffffff; + --token-button-foreground-color-tertiary-focus: #161616; + --token-button-foreground-color-tertiary-hover: #161616; + --token-button-gap: 32px; + --token-button-height-large: 48px; + --token-button-height-medium: 40px; + --token-button-height-small: 32px; + --token-button-icon-size-large: 16px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-small: 16px; + --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-surface-color-critical-active: #750e13; + --token-button-surface-color-critical-default: #da1e28; + --token-button-surface-color-critical-focus: #da1e28; + --token-button-surface-color-critical-hover: #b81921; + --token-button-surface-color-disabled: #8d8d8d; + --token-button-surface-color-primary-active: #002d9c; + --token-button-surface-color-primary-default: #0f62fe; + --token-button-surface-color-primary-focus: #0f62fe; + --token-button-surface-color-primary-hover: #0050e6; + --token-button-surface-color-secondary-active: #393939; + --token-button-surface-color-secondary-default: #6f6f6f; + --token-button-surface-color-secondary-focus: #6f6f6f; + --token-button-surface-color-secondary-hover: #5e5e5e; + --token-button-surface-color-tertiary-active: #c6c6c6; + --token-button-surface-color-tertiary-focus: #f4f4f4; + --token-button-surface-color-tertiary-hover: #f4f4f4; + --token-button-typography-font-size-large: 0.875rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-small: 0.875rem; + --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */ + --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-color-border-action: #4589ff; + --token-color-border-critical: #fa4d56; + --token-color-border-faint: #393939; + --token-color-border-highlight: #a56eff; + --token-color-border-primary: #6f6f6f; + --token-color-border-strong: #6f6f6f; + --token-color-border-success: #24a148; + --token-color-border-warning: #b28600; + --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-action-internal: #161616; + --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #161616; + --token-color-foreground-action-active: #a6c8ff; + --token-color-foreground-action-hover: #a6c8ff; + --token-color-foreground-action: #78a9ff; + --token-color-foreground-critical-high-contrast: #ffd7d9; + --token-color-foreground-critical-on-surface: #ffb3b8; + --token-color-foreground-critical: #ff8389; + --token-color-foreground-disabled: rgba(244, 244, 244, 0.25); + --token-color-foreground-faint: #c6c6c6; + --token-color-foreground-high-contrast: #161616; + --token-color-foreground-highlight-high-contrast: #d4bbff; + --token-color-foreground-highlight-on-surface: #d4bbff; + --token-color-foreground-highlight: #be95ff; + --token-color-foreground-primary: #f4f4f4; + --token-color-foreground-strong: #f4f4f4; + --token-color-foreground-success-high-contrast: #a7f0ba; + --token-color-foreground-success-on-surface: #6fdc8c; + --token-color-foreground-success: #42be65; + --token-color-foreground-warning-high-contrast: #fddc69; + --token-color-foreground-warning-on-surface: #f1c21b; + --token-color-foreground-warning: #d2a106; + --token-color-hashicorp-brand: #ffffff; + --token-color-hcp-brand: #ffffff; + --token-color-page-faint: #161616; + --token-color-page-primary: #161616; + --token-color-palette-alpha-100: #393939; + --token-color-palette-alpha-200: #525252; + --token-color-palette-alpha-300: #6f6f6f; + --token-color-palette-amber-100: #ffd9be; + --token-color-palette-amber-200: #ba4e00; + --token-color-palette-amber-300: #8a3800; + --token-color-palette-amber-400: #5e2900; + --token-color-palette-amber-500: #3e1a00; + --token-color-palette-amber-50: #fff2e8; + --token-color-palette-blue-100: #d0e2ff; + --token-color-palette-blue-200: #0f62fe; + --token-color-palette-blue-300: #0043ce; + --token-color-palette-blue-400: #002d9c; + --token-color-palette-blue-500: #001141; + --token-color-palette-blue-50: #edf5ff; + --token-color-palette-green-100: #a7f0ba; + --token-color-palette-green-200: #24a148; + --token-color-palette-green-300: #198038; + --token-color-palette-green-400: #0e6027; + --token-color-palette-green-500: #044317; + --token-color-palette-green-50: #defbe6; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-neutral-100: #e0e0e0; + --token-color-palette-neutral-200: #c6c6c6; + --token-color-palette-neutral-300: #a8a8a8; + --token-color-palette-neutral-400: #8d8d8d; + --token-color-palette-neutral-500: #525252; + --token-color-palette-neutral-50: #f4f4f4; + --token-color-palette-neutral-600: #393939; + --token-color-palette-neutral-700: #161616; + --token-color-palette-purple-100: #e8daff; + --token-color-palette-purple-200: #a56eff; + --token-color-palette-purple-300: #8a3ffc; + --token-color-palette-purple-400: #6929c4; + --token-color-palette-purple-500: #31135e; + --token-color-palette-purple-50: #f6f2ff; + --token-color-palette-red-100: #ffd7d9; + --token-color-palette-red-200: #da1e28; + --token-color-palette-red-300: #a2191f; + --token-color-palette-red-400: #750e13; + --token-color-palette-red-500: #520408; + --token-color-palette-red-50: #fff1f1; + --token-color-surface-action: #0043ce; + --token-color-surface-critical: #a2191f; + --token-color-surface-faint: #262626; + --token-color-surface-high-contrast: #f4f4f4; + --token-color-surface-highlight: #6929c4; + --token-color-surface-interactive-active: #525252; + --token-color-surface-interactive-disabled: #525252; + --token-color-surface-interactive-hover: #333333; + --token-color-surface-interactive: #262626; + --token-color-surface-primary: #262626; + --token-color-surface-strong: #393939; + --token-color-surface-success: #0e6027; + --token-color-surface-warning: #684e00; + --token-color-vault-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-radar-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ + --token-color-vault-secrets-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-dismiss-button-border-color-active: rgba(0, 0, 0, 0); + --token-dismiss-button-foreground-color-active: #f4f4f4; + --token-dismiss-button-foreground-color-default: #f4f4f4; + --token-dismiss-button-icon-size: 20px; + --token-dismiss-button-size: 48px; + --token-dismiss-button-surface-color-active: rgba(141, 141, 141, 0.4); + --token-dismiss-button-surface-color-hover: rgba(141, 141, 141, 0.16); + --token-elevation-high-box-shadow: none; + --token-elevation-higher-box-shadow: none; + --token-elevation-inset-box-shadow: none; + --token-elevation-low-box-shadow: none; + --token-elevation-mid-box-shadow: none; + --token-elevation-overlay-box-shadow: none; + --token-focus-ring-action-box-shadow: + inset 0 0 0 1px #161616, 0 0 0 3px #ffffff; + --token-focus-ring-critical-box-shadow: + inset 0 0 0 1px #161616, 0 0 0 3px #ffffff; + --token-form-radiocard-border-color-default-checked: #ffc0cb; + --token-form-radiocard-border-color-default: rgba(0, 0, 0, 0); + --token-form-radiocard-border-color-focus: #ffc0cb; + --token-form-radiocard-border-radius: 0px; + --token-icon-tile-border-color-logo: #525252; + --token-icon-tile-border-color-overlay: #6f6f6f; + --token-icon-tile-surface-color-overlay: #393939; + --token-rich-tooltip-bubble-arrow-size: 12px; + --token-rich-tooltip-bubble-border-color: var( + --token-color-palette-alpha-200 + ); + --token-rich-tooltip-bubble-border-radius: 2px; + --token-rich-tooltip-bubble-max-width: 288px; + --token-rich-tooltip-toggle-foreground-color-active: #c6c6c6; + --token-rich-tooltip-toggle-foreground-color-default: #c6c6c6; + --token-rich-tooltip-toggle-foreground-color-hover: #f4f4f4; + --token-rich-tooltip-toggle-gap-horizontal: 8px; + --token-rich-tooltip-toggle-icon-size: 14px; + --token-surface-base-box-shadow: none; + --token-surface-high-box-shadow: none; + --token-surface-higher-box-shadow: none; + --token-surface-inset-box-shadow: none; + --token-surface-low-box-shadow: none; + --token-surface-mid-box-shadow: none; + --token-surface-overlay-box-shadow: none; + --token-tooltip-border-radius: 2px; + --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); + --token-tooltip-caret-height: 6px; + --token-tooltip-caret-width: 12px; + --token-tooltip-max-width: 288px; + --token-tooltip-padding-horizontal: 16px; + --token-tooltip-padding-vertical: 16px; + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-letter-spacing: 0.16px; + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-letter-spacing: 0px; + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-letter-spacing: 0px; + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-letter-spacing: 0px; + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-letter-spacing: 0px; + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-weight-bold: 600; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-semibold: 600; + } +} + +@mixin hds-mode-cds0() { + :root { + --token-app-footer-focus-color-action-internal: #0f62fe; + --token-badge-border-radius: var(--token-border-radius-rounded); + --token-badge-count-padding-horizontal-large: 12px; + --token-badge-count-padding-horizontal-medium: 8px; + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-foreground-color-critical-filled: #a2191f; /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: #ffffff; + --token-badge-foreground-color-critical-outlined: #a2191f; + --token-badge-foreground-color-highlight-filled: #6929c4; /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: #ffffff; + --token-badge-foreground-color-highlight-outlined: #6929c4; + --token-badge-foreground-color-neutral-dark-mode-filled: #ffffff; + --token-badge-foreground-color-neutral-dark-mode-inverted: #161616; + --token-badge-foreground-color-neutral-dark-mode-outlined: #ffffff; + --token-badge-foreground-color-neutral-filled: #161616; + --token-badge-foreground-color-neutral-inverted: #e0e0e0; + --token-badge-foreground-color-neutral-outlined: #161616; + --token-badge-foreground-color-success-filled: #0e6027; /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: #ffffff; + --token-badge-foreground-color-success-outlined: #0e6027; + --token-badge-foreground-color-warning-filled: #8a3800; + --token-badge-foreground-color-warning-inverted: #ffffff; + --token-badge-foreground-color-warning-outlined: #8a3800; + --token-badge-gap-large: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-small: 4px; + --token-badge-height-small: 18px; + --token-badge-padding-horizontal-large: 12px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-small: 8px; + --token-badge-padding-vertical-small: 1px; + --token-badge-surface-color-critical-filled: #ffd7d9; /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: #a2191f; + --token-badge-surface-color-highlight-filled: #e8daff; /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: #6929c4; + --token-badge-surface-color-neutral-dark-mode-filled: #393939; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: #e0e0e0; + --token-badge-surface-color-neutral-filled: #e0e0e0; + --token-badge-surface-color-neutral-inverted: #393939; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-success-filled: #a7f0ba; /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: #0e6027; + --token-badge-surface-color-warning-filled: #ffd9be; /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: #8a3800; + --token-badge-typography-font-size-large: 0.75rem; + --token-badge-typography-font-size-medium: 0.75rem; + --token-badge-typography-font-size-small: 0.75rem; + --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */ + --token-border-radius-large: 0px; + --token-border-radius-medium: 0px; + --token-border-radius-small: 0px; + --token-border-radius-x-small: 0px; + --token-button-border-color-critical-active: rgba(0, 0, 0, 0); + --token-button-border-color-critical-default: rgba(0, 0, 0, 0); + --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-hover: rgba(0, 0, 0, 0); + --token-button-border-color-primary-active: rgba(0, 0, 0, 0); + --token-button-border-color-primary-default: rgba(0, 0, 0, 0); + --token-button-border-color-primary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-hover: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-active: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-default: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0); + --token-button-border-radius: 0px; + --token-button-foreground-color-critical-active: #ffffff; + --token-button-foreground-color-critical-default: #ffffff; + --token-button-foreground-color-critical-focus: #ffffff; + --token-button-foreground-color-critical-hover: #ffffff; + --token-button-foreground-color-disabled: #8d8d8d; + --token-button-foreground-color-primary-active: #ffffff; + --token-button-foreground-color-primary-default: #ffffff; + --token-button-foreground-color-primary-focus: #ffffff; + --token-button-foreground-color-primary-hover: #ffffff; + --token-button-foreground-color-secondary-active: #ffffff; + --token-button-foreground-color-secondary-default: #ffffff; + --token-button-foreground-color-secondary-focus: #ffffff; + --token-button-foreground-color-secondary-hover: #ffffff; + --token-button-foreground-color-tertiary-active: #ffffff; + --token-button-foreground-color-tertiary-default: #0f62fe; + --token-button-foreground-color-tertiary-focus: #ffffff; + --token-button-foreground-color-tertiary-hover: #ffffff; + --token-button-gap: 32px; + --token-button-height-large: 48px; + --token-button-height-medium: 40px; + --token-button-height-small: 32px; + --token-button-icon-size-large: 16px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-small: 16px; + --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-surface-color-critical-active: #750e13; + --token-button-surface-color-critical-default: #da1e28; + --token-button-surface-color-critical-focus: #da1e28; + --token-button-surface-color-critical-hover: #b81921; + --token-button-surface-color-disabled: #c6c6c6; + --token-button-surface-color-primary-active: #002d9c; + --token-button-surface-color-primary-default: #0f62fe; + --token-button-surface-color-primary-focus: #0f62fe; + --token-button-surface-color-primary-hover: #0050e6; + --token-button-surface-color-secondary-active: #6f6f6f; + --token-button-surface-color-secondary-default: #393939; + --token-button-surface-color-secondary-focus: #393939; + --token-button-surface-color-secondary-hover: #474747; + --token-button-surface-color-tertiary-active: #002d9c; + --token-button-surface-color-tertiary-focus: #0050e6; + --token-button-surface-color-tertiary-hover: #0050e6; + --token-button-typography-font-size-large: 0.875rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-small: 0.875rem; + --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */ + --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-color-border-action: #0f62fe; + --token-color-border-critical: #ff8389; + --token-color-border-faint: #e0e0e0; + --token-color-border-highlight: #be95ff; + --token-color-border-primary: #c6c6c6; + --token-color-border-strong: #8d8d8d; + --token-color-border-success: #42be65; + --token-color-border-warning: #d2a106; + --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-action-internal: #ffffff; + --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #ffffff; + --token-color-foreground-action-active: #0043ce; + --token-color-foreground-action-hover: #0043ce; + --token-color-foreground-action: #0f62fe; + --token-color-foreground-critical-high-contrast: #750e13; + --token-color-foreground-critical-on-surface: #a2191f; + --token-color-foreground-critical: #da1e28; + --token-color-foreground-disabled: rgba(22, 22, 22, 0.25); + --token-color-foreground-faint: #525252; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-highlight-high-contrast: #491d8b; + --token-color-foreground-highlight-on-surface: #6929c4; + --token-color-foreground-highlight: #8a3ffc; + --token-color-foreground-primary: #161616; + --token-color-foreground-strong: #161616; + --token-color-foreground-success-high-contrast: #044317; + --token-color-foreground-success-on-surface: #0e6027; + --token-color-foreground-success: #198038; + --token-color-foreground-warning-high-contrast: #483700; + --token-color-foreground-warning-on-surface: #684e00; + --token-color-foreground-warning: #8e6a00; + --token-color-hashicorp-brand: #000000; + --token-color-hcp-brand: #000000; + --token-color-page-faint: #ffffff; + --token-color-page-primary: #ffffff; + --token-color-palette-alpha-100: #e0e0e0; + --token-color-palette-alpha-200: #c6c6c6; + --token-color-palette-alpha-300: #8d8d8d; + --token-color-palette-amber-100: #ffd9be; + --token-color-palette-amber-200: #ba4e00; + --token-color-palette-amber-300: #8a3800; + --token-color-palette-amber-400: #5e2900; + --token-color-palette-amber-500: #3e1a00; + --token-color-palette-amber-50: #fff2e8; + --token-color-palette-blue-100: #d0e2ff; + --token-color-palette-blue-200: #0f62fe; + --token-color-palette-blue-300: #0043ce; + --token-color-palette-blue-400: #002d9c; + --token-color-palette-blue-500: #001141; + --token-color-palette-blue-50: #edf5ff; + --token-color-palette-green-100: #a7f0ba; + --token-color-palette-green-200: #24a148; + --token-color-palette-green-300: #198038; + --token-color-palette-green-400: #0e6027; + --token-color-palette-green-500: #044317; + --token-color-palette-green-50: #defbe6; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-neutral-100: #e0e0e0; + --token-color-palette-neutral-200: #c6c6c6; + --token-color-palette-neutral-300: #a8a8a8; + --token-color-palette-neutral-400: #8d8d8d; + --token-color-palette-neutral-500: #525252; + --token-color-palette-neutral-50: #f4f4f4; + --token-color-palette-neutral-600: #393939; + --token-color-palette-neutral-700: #161616; + --token-color-palette-purple-100: #e8daff; + --token-color-palette-purple-200: #a56eff; + --token-color-palette-purple-300: #8a3ffc; + --token-color-palette-purple-400: #6929c4; + --token-color-palette-purple-500: #31135e; + --token-color-palette-purple-50: #f6f2ff; + --token-color-palette-red-100: #ffd7d9; + --token-color-palette-red-200: #da1e28; + --token-color-palette-red-300: #a2191f; + --token-color-palette-red-400: #750e13; + --token-color-palette-red-500: #520408; + --token-color-palette-red-50: #fff1f1; + --token-color-surface-action: #d0e2ff; + --token-color-surface-critical: #ffd7d9; + --token-color-surface-faint: #f4f4f4; + --token-color-surface-high-contrast: #393939; + --token-color-surface-highlight: #e8daff; + --token-color-surface-interactive-active: #c6c6c6; + --token-color-surface-interactive-disabled: #c6c6c6; + --token-color-surface-interactive-hover: #e8e8e8; + --token-color-surface-interactive: #f4f4f4; + --token-color-surface-primary: #f4f4f4; + --token-color-surface-strong: #e0e0e0; + --token-color-surface-success: #a7f0ba; + --token-color-surface-warning: #fcf4d6; + --token-color-vault-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-radar-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ + --token-color-vault-secrets-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-dismiss-button-border-color-active: rgba(0, 0, 0, 0); + --token-dismiss-button-foreground-color-active: #161616; + --token-dismiss-button-foreground-color-default: #161616; + --token-dismiss-button-icon-size: 20px; + --token-dismiss-button-size: 48px; + --token-dismiss-button-surface-color-active: rgba(141, 141, 141, 0.5); + --token-dismiss-button-surface-color-hover: rgba(141, 141, 141, 0.12); + --token-elevation-high-box-shadow: none; + --token-elevation-higher-box-shadow: none; + --token-elevation-inset-box-shadow: none; + --token-elevation-low-box-shadow: none; + --token-elevation-mid-box-shadow: none; + --token-elevation-overlay-box-shadow: none; + --token-focus-ring-action-box-shadow: + inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe; + --token-focus-ring-critical-box-shadow: + inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe; + --token-form-radiocard-border-color-default-checked: #ffc0cb; + --token-form-radiocard-border-color-default: rgba(0, 0, 0, 0); + --token-form-radiocard-border-color-focus: #ffc0cb; + --token-form-radiocard-border-radius: 0px; + --token-icon-tile-border-color-logo: #c6c6c6; + --token-icon-tile-border-color-overlay: #e0e0e0; + --token-icon-tile-surface-color-overlay: #ffffff; + --token-rich-tooltip-bubble-arrow-size: 12px; + --token-rich-tooltip-bubble-border-color: var( + --token-color-palette-alpha-200 + ); + --token-rich-tooltip-bubble-border-radius: 2px; + --token-rich-tooltip-bubble-max-width: 288px; + --token-rich-tooltip-toggle-foreground-color-active: #525252; + --token-rich-tooltip-toggle-foreground-color-default: #525252; + --token-rich-tooltip-toggle-foreground-color-hover: #161616; + --token-rich-tooltip-toggle-gap-horizontal: 8px; + --token-rich-tooltip-toggle-icon-size: 14px; + --token-surface-base-box-shadow: none; + --token-surface-high-box-shadow: none; + --token-surface-higher-box-shadow: none; + --token-surface-inset-box-shadow: none; + --token-surface-low-box-shadow: none; + --token-surface-mid-box-shadow: none; + --token-surface-overlay-box-shadow: none; + --token-tooltip-border-radius: 2px; + --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); + --token-tooltip-caret-height: 6px; + --token-tooltip-caret-width: 12px; + --token-tooltip-max-width: 288px; + --token-tooltip-padding-horizontal: 16px; + --token-tooltip-padding-vertical: 16px; + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-letter-spacing: 0.16px; + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-letter-spacing: 0px; + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-letter-spacing: 0px; + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-letter-spacing: 0px; + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-letter-spacing: 0px; + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-weight-bold: 600; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-semibold: 600; + } +} + +@mixin hds-mode-cds10() { + :root { + --token-app-footer-focus-color-action-internal: #0f62fe; + --token-badge-border-radius: var(--token-border-radius-rounded); + --token-badge-count-padding-horizontal-large: 12px; + --token-badge-count-padding-horizontal-medium: 8px; + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-foreground-color-critical-filled: #a2191f; /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: #ffffff; + --token-badge-foreground-color-critical-outlined: #a2191f; + --token-badge-foreground-color-highlight-filled: #6929c4; /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: #ffffff; + --token-badge-foreground-color-highlight-outlined: #6929c4; + --token-badge-foreground-color-neutral-dark-mode-filled: #ffffff; + --token-badge-foreground-color-neutral-dark-mode-inverted: #161616; + --token-badge-foreground-color-neutral-dark-mode-outlined: #ffffff; + --token-badge-foreground-color-neutral-filled: #161616; + --token-badge-foreground-color-neutral-inverted: #e0e0e0; + --token-badge-foreground-color-neutral-outlined: #161616; + --token-badge-foreground-color-success-filled: #0e6027; /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: #ffffff; + --token-badge-foreground-color-success-outlined: #0e6027; + --token-badge-foreground-color-warning-filled: #8a3800; + --token-badge-foreground-color-warning-inverted: #ffffff; + --token-badge-foreground-color-warning-outlined: #8a3800; + --token-badge-gap-large: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-small: 4px; + --token-badge-height-small: 18px; + --token-badge-padding-horizontal-large: 12px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-small: 8px; + --token-badge-padding-vertical-small: 1px; + --token-badge-surface-color-critical-filled: #ffd7d9; /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: #a2191f; + --token-badge-surface-color-highlight-filled: #e8daff; /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: #6929c4; + --token-badge-surface-color-neutral-dark-mode-filled: #393939; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: #e0e0e0; + --token-badge-surface-color-neutral-filled: #e0e0e0; + --token-badge-surface-color-neutral-inverted: #393939; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-success-filled: #a7f0ba; /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: #0e6027; + --token-badge-surface-color-warning-filled: #ffd9be; /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: #8a3800; + --token-badge-typography-font-size-large: 0.75rem; + --token-badge-typography-font-size-medium: 0.75rem; + --token-badge-typography-font-size-small: 0.75rem; + --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */ + --token-border-radius-large: 0px; + --token-border-radius-medium: 0px; + --token-border-radius-small: 0px; + --token-border-radius-x-small: 0px; + --token-button-border-color-critical-active: rgba(0, 0, 0, 0); + --token-button-border-color-critical-default: rgba(0, 0, 0, 0); + --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-hover: rgba(0, 0, 0, 0); + --token-button-border-color-primary-active: rgba(0, 0, 0, 0); + --token-button-border-color-primary-default: rgba(0, 0, 0, 0); + --token-button-border-color-primary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-hover: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-active: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-default: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0); + --token-button-border-radius: 0px; + --token-button-foreground-color-critical-active: #ffffff; + --token-button-foreground-color-critical-default: #ffffff; + --token-button-foreground-color-critical-focus: #ffffff; + --token-button-foreground-color-critical-hover: #ffffff; + --token-button-foreground-color-disabled: #8d8d8d; + --token-button-foreground-color-primary-active: #ffffff; + --token-button-foreground-color-primary-default: #ffffff; + --token-button-foreground-color-primary-focus: #ffffff; + --token-button-foreground-color-primary-hover: #ffffff; + --token-button-foreground-color-secondary-active: #ffffff; + --token-button-foreground-color-secondary-default: #ffffff; + --token-button-foreground-color-secondary-focus: #ffffff; + --token-button-foreground-color-secondary-hover: #ffffff; + --token-button-foreground-color-tertiary-active: #ffffff; + --token-button-foreground-color-tertiary-default: #0f62fe; + --token-button-foreground-color-tertiary-focus: #ffffff; + --token-button-foreground-color-tertiary-hover: #ffffff; + --token-button-gap: 32px; + --token-button-height-large: 48px; + --token-button-height-medium: 40px; + --token-button-height-small: 32px; + --token-button-icon-size-large: 16px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-small: 16px; + --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-surface-color-critical-active: #750e13; + --token-button-surface-color-critical-default: #da1e28; + --token-button-surface-color-critical-focus: #da1e28; + --token-button-surface-color-critical-hover: #b81921; + --token-button-surface-color-disabled: #c6c6c6; + --token-button-surface-color-primary-active: #002d9c; + --token-button-surface-color-primary-default: #0f62fe; + --token-button-surface-color-primary-focus: #0f62fe; + --token-button-surface-color-primary-hover: #0050e6; + --token-button-surface-color-secondary-active: #6f6f6f; + --token-button-surface-color-secondary-default: #393939; + --token-button-surface-color-secondary-focus: #393939; + --token-button-surface-color-secondary-hover: #474747; + --token-button-surface-color-tertiary-active: #002d9c; + --token-button-surface-color-tertiary-focus: #0050e6; + --token-button-surface-color-tertiary-hover: #0050e6; + --token-button-typography-font-size-large: 0.875rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-small: 0.875rem; + --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */ + --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-color-border-action: #0f62fe; + --token-color-border-critical: #ff8389; + --token-color-border-faint: #c6c6c6; + --token-color-border-highlight: #be95ff; + --token-color-border-primary: #e0e0e0; + --token-color-border-strong: #8d8d8d; + --token-color-border-success: #42be65; + --token-color-border-warning: #d2a106; + --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-action-internal: #ffffff; + --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #ffffff; + --token-color-foreground-action-active: #0043ce; + --token-color-foreground-action-hover: #0043ce; + --token-color-foreground-action: #0f62fe; + --token-color-foreground-critical-high-contrast: #750e13; + --token-color-foreground-critical-on-surface: #a2191f; + --token-color-foreground-critical: #da1e28; + --token-color-foreground-disabled: rgba(22, 22, 22, 0.25); + --token-color-foreground-faint: #525252; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-highlight-high-contrast: #491d8b; + --token-color-foreground-highlight-on-surface: #6929c4; + --token-color-foreground-highlight: #8a3ffc; + --token-color-foreground-primary: #161616; + --token-color-foreground-strong: #161616; + --token-color-foreground-success-high-contrast: #044317; + --token-color-foreground-success-on-surface: #0e6027; + --token-color-foreground-success: #198038; + --token-color-foreground-warning-high-contrast: #483700; + --token-color-foreground-warning-on-surface: #684e00; + --token-color-foreground-warning: #8e6a00; + --token-color-hashicorp-brand: #000000; + --token-color-hcp-brand: #000000; + --token-color-page-faint: #f4f4f4; + --token-color-page-primary: #f4f4f4; + --token-color-palette-alpha-100: #c6c6c6; + --token-color-palette-alpha-200: #e0e0e0; + --token-color-palette-alpha-300: #8d8d8d; + --token-color-palette-amber-100: #ffd9be; + --token-color-palette-amber-200: #ba4e00; + --token-color-palette-amber-300: #8a3800; + --token-color-palette-amber-400: #5e2900; + --token-color-palette-amber-500: #3e1a00; + --token-color-palette-amber-50: #fff2e8; + --token-color-palette-blue-100: #d0e2ff; + --token-color-palette-blue-200: #0f62fe; + --token-color-palette-blue-300: #0043ce; + --token-color-palette-blue-400: #002d9c; + --token-color-palette-blue-500: #001141; + --token-color-palette-blue-50: #edf5ff; + --token-color-palette-green-100: #a7f0ba; + --token-color-palette-green-200: #24a148; + --token-color-palette-green-300: #198038; + --token-color-palette-green-400: #0e6027; + --token-color-palette-green-500: #044317; + --token-color-palette-green-50: #defbe6; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-neutral-100: #e0e0e0; + --token-color-palette-neutral-200: #c6c6c6; + --token-color-palette-neutral-300: #a8a8a8; + --token-color-palette-neutral-400: #8d8d8d; + --token-color-palette-neutral-500: #525252; + --token-color-palette-neutral-50: #f4f4f4; + --token-color-palette-neutral-600: #393939; + --token-color-palette-neutral-700: #161616; + --token-color-palette-purple-100: #e8daff; + --token-color-palette-purple-200: #a56eff; + --token-color-palette-purple-300: #8a3ffc; + --token-color-palette-purple-400: #6929c4; + --token-color-palette-purple-500: #31135e; + --token-color-palette-purple-50: #f6f2ff; + --token-color-palette-red-100: #ffd7d9; + --token-color-palette-red-200: #da1e28; + --token-color-palette-red-300: #a2191f; + --token-color-palette-red-400: #750e13; + --token-color-palette-red-500: #520408; + --token-color-palette-red-50: #fff1f1; + --token-color-surface-action: #d0e2ff; + --token-color-surface-critical: #ffd7d9; + --token-color-surface-faint: #ffffff; + --token-color-surface-high-contrast: #393939; + --token-color-surface-highlight: #e8daff; + --token-color-surface-interactive-active: #c6c6c6; + --token-color-surface-interactive-disabled: #c6c6c6; + --token-color-surface-interactive-hover: #e8e8e8; + --token-color-surface-interactive: #ffffff; + --token-color-surface-primary: #ffffff; + --token-color-surface-strong: #e0e0e0; + --token-color-surface-success: #a7f0ba; + --token-color-surface-warning: #fcf4d6; + --token-color-vault-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-radar-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ + --token-color-vault-secrets-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-dismiss-button-border-color-active: rgba(0, 0, 0, 0); + --token-dismiss-button-foreground-color-active: #161616; + --token-dismiss-button-foreground-color-default: #161616; + --token-dismiss-button-icon-size: 20px; + --token-dismiss-button-size: 48px; + --token-dismiss-button-surface-color-active: rgba(141, 141, 141, 0.5); + --token-dismiss-button-surface-color-hover: rgba(141, 141, 141, 0.12); + --token-elevation-high-box-shadow: none; + --token-elevation-higher-box-shadow: none; + --token-elevation-inset-box-shadow: none; + --token-elevation-low-box-shadow: none; + --token-elevation-mid-box-shadow: none; + --token-elevation-overlay-box-shadow: none; + --token-focus-ring-action-box-shadow: + inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe; + --token-focus-ring-critical-box-shadow: + inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe; + --token-form-radiocard-border-color-default-checked: #ffc0cb; + --token-form-radiocard-border-color-default: rgba(0, 0, 0, 0); + --token-form-radiocard-border-color-focus: #ffc0cb; + --token-form-radiocard-border-radius: 0px; + --token-icon-tile-border-color-logo: #e0e0e0; + --token-icon-tile-border-color-overlay: #c6c6c6; + --token-icon-tile-surface-color-overlay: #f4f4f4; + --token-rich-tooltip-bubble-arrow-size: 12px; + --token-rich-tooltip-bubble-border-color: var( + --token-color-palette-alpha-200 + ); + --token-rich-tooltip-bubble-border-radius: 2px; + --token-rich-tooltip-bubble-max-width: 288px; + --token-rich-tooltip-toggle-foreground-color-active: #525252; + --token-rich-tooltip-toggle-foreground-color-default: #525252; + --token-rich-tooltip-toggle-foreground-color-hover: #161616; + --token-rich-tooltip-toggle-gap-horizontal: 8px; + --token-rich-tooltip-toggle-icon-size: 14px; + --token-surface-base-box-shadow: none; + --token-surface-high-box-shadow: none; + --token-surface-higher-box-shadow: none; + --token-surface-inset-box-shadow: none; + --token-surface-low-box-shadow: none; + --token-surface-mid-box-shadow: none; + --token-surface-overlay-box-shadow: none; + --token-tooltip-border-radius: 2px; + --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); + --token-tooltip-caret-height: 6px; + --token-tooltip-caret-width: 12px; + --token-tooltip-max-width: 288px; + --token-tooltip-padding-horizontal: 16px; + --token-tooltip-padding-vertical: 16px; + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-letter-spacing: 0.16px; + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-letter-spacing: 0px; + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-letter-spacing: 0px; + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-letter-spacing: 0px; + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-letter-spacing: 0px; + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-weight-bold: 600; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-semibold: 600; + } +} + +@mixin hds-mode-cds90() { + :root { + --token-app-footer-focus-color-action-internal: #ffffff; + --token-badge-border-radius: var(--token-border-radius-rounded); + --token-badge-count-padding-horizontal-large: 12px; + --token-badge-count-padding-horizontal-medium: 8px; + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-foreground-color-critical-filled: #ffd7d9; /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: #161616; + --token-badge-foreground-color-critical-outlined: #ffd7d9; + --token-badge-foreground-color-highlight-filled: #e8daff; /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: #161616; + --token-badge-foreground-color-highlight-outlined: #e8daff; + --token-badge-foreground-color-neutral-dark-mode-filled: #161616; + --token-badge-foreground-color-neutral-dark-mode-inverted: #f4f4f4; + --token-badge-foreground-color-neutral-dark-mode-outlined: #161616; + --token-badge-foreground-color-neutral-filled: #f4f4f4; + --token-badge-foreground-color-neutral-inverted: #161616; + --token-badge-foreground-color-neutral-outlined: #f4f4f4; + --token-badge-foreground-color-success-filled: #a7f0ba; /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: #161616; + --token-badge-foreground-color-success-outlined: #a7f0ba; + --token-badge-foreground-color-warning-filled: #ffd9be; + --token-badge-foreground-color-warning-inverted: #161616; + --token-badge-foreground-color-warning-outlined: #ffd9be; + --token-badge-gap-large: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-small: 4px; + --token-badge-height-small: 18px; + --token-badge-padding-horizontal-large: 12px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-small: 8px; + --token-badge-padding-vertical-small: 1px; + --token-badge-surface-color-critical-filled: #a2191f; /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: #ffd7d9; + --token-badge-surface-color-highlight-filled: #6929c4; /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: #be95ff; + --token-badge-surface-color-neutral-dark-mode-filled: #f4f4f4; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: #525252; + --token-badge-surface-color-neutral-filled: #525252; + --token-badge-surface-color-neutral-inverted: #f4f4f4; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-success-filled: #0e6027; /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: #a7f0ba; + --token-badge-surface-color-warning-filled: #8a3800; /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: #ffd9be; + --token-badge-typography-font-size-large: 0.75rem; + --token-badge-typography-font-size-medium: 0.75rem; + --token-badge-typography-font-size-small: 0.75rem; + --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */ + --token-border-radius-large: 0px; + --token-border-radius-medium: 0px; + --token-border-radius-small: 0px; + --token-border-radius-x-small: 0px; + --token-button-border-color-critical-active: rgba(0, 0, 0, 0); + --token-button-border-color-critical-default: rgba(0, 0, 0, 0); + --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-hover: rgba(0, 0, 0, 0); + --token-button-border-color-primary-active: rgba(0, 0, 0, 0); + --token-button-border-color-primary-default: rgba(0, 0, 0, 0); + --token-button-border-color-primary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-hover: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-active: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-default: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0); + --token-button-border-radius: 0px; + --token-button-foreground-color-critical-active: #ffffff; + --token-button-foreground-color-critical-default: #ffffff; + --token-button-foreground-color-critical-focus: #ffffff; + --token-button-foreground-color-critical-hover: #ffffff; + --token-button-foreground-color-disabled: rgba(255, 255, 255, 0.25); + --token-button-foreground-color-primary-active: #ffffff; + --token-button-foreground-color-primary-default: #ffffff; + --token-button-foreground-color-primary-focus: #ffffff; + --token-button-foreground-color-primary-hover: #ffffff; + --token-button-foreground-color-secondary-active: #ffffff; + --token-button-foreground-color-secondary-default: #ffffff; + --token-button-foreground-color-secondary-focus: #ffffff; + --token-button-foreground-color-secondary-hover: #ffffff; + --token-button-foreground-color-tertiary-active: #161616; + --token-button-foreground-color-tertiary-default: #ffffff; + --token-button-foreground-color-tertiary-focus: #161616; + --token-button-foreground-color-tertiary-hover: #161616; + --token-button-gap: 32px; + --token-button-height-large: 48px; + --token-button-height-medium: 40px; + --token-button-height-small: 32px; + --token-button-icon-size-large: 16px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-small: 16px; + --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-surface-color-critical-active: #750e13; + --token-button-surface-color-critical-default: #da1e28; + --token-button-surface-color-critical-focus: #da1e28; + --token-button-surface-color-critical-hover: #b81921; + --token-button-surface-color-disabled: #8d8d8d; + --token-button-surface-color-primary-active: #002d9c; + --token-button-surface-color-primary-default: #0f62fe; + --token-button-surface-color-primary-focus: #0f62fe; + --token-button-surface-color-primary-hover: #0050e6; + --token-button-surface-color-secondary-active: #393939; + --token-button-surface-color-secondary-default: #6f6f6f; + --token-button-surface-color-secondary-focus: #6f6f6f; + --token-button-surface-color-secondary-hover: #5e5e5e; + --token-button-surface-color-tertiary-active: #c6c6c6; + --token-button-surface-color-tertiary-focus: #f4f4f4; + --token-button-surface-color-tertiary-hover: #f4f4f4; + --token-button-typography-font-size-large: 0.875rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-small: 0.875rem; + --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */ + --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-color-border-action: #4589ff; + --token-color-border-critical: #fa4d56; + --token-color-border-faint: #525252; + --token-color-border-highlight: #a56eff; + --token-color-border-primary: #8d8d8d; + --token-color-border-strong: #8d8d8d; + --token-color-border-success: #24a148; + --token-color-border-warning: #b28600; + --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-action-internal: #161616; + --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #161616; + --token-color-foreground-action-active: #a6c8ff; + --token-color-foreground-action-hover: #a6c8ff; + --token-color-foreground-action: #78a9ff; + --token-color-foreground-critical-high-contrast: #ffd7d9; + --token-color-foreground-critical-on-surface: #ffb3b8; + --token-color-foreground-critical: #ff8389; + --token-color-foreground-disabled: rgba(244, 244, 244, 0.25); + --token-color-foreground-faint: #c6c6c6; + --token-color-foreground-high-contrast: #161616; + --token-color-foreground-highlight-high-contrast: #e8daff; + --token-color-foreground-highlight-on-surface: #d4bbff; + --token-color-foreground-highlight: #be95ff; + --token-color-foreground-primary: #f4f4f4; + --token-color-foreground-strong: #f4f4f4; + --token-color-foreground-success-high-contrast: #a7f0ba; + --token-color-foreground-success-on-surface: #6fdc8c; + --token-color-foreground-success: #42be65; + --token-color-foreground-warning-high-contrast: #fddc69; + --token-color-foreground-warning-on-surface: #f1c21b; + --token-color-foreground-warning: #d2a106; + --token-color-hashicorp-brand: #ffffff; + --token-color-hcp-brand: #ffffff; + --token-color-page-faint: #262626; + --token-color-page-primary: #262626; + --token-color-palette-alpha-100: #525252; + --token-color-palette-alpha-200: #6f6f6f; + --token-color-palette-alpha-300: #8d8d8d; + --token-color-palette-amber-100: #ffd9be; + --token-color-palette-amber-200: #ba4e00; + --token-color-palette-amber-300: #8a3800; + --token-color-palette-amber-400: #5e2900; + --token-color-palette-amber-500: #3e1a00; + --token-color-palette-amber-50: #fff2e8; + --token-color-palette-blue-100: #d0e2ff; + --token-color-palette-blue-200: #0f62fe; + --token-color-palette-blue-300: #0043ce; + --token-color-palette-blue-400: #002d9c; + --token-color-palette-blue-500: #001141; + --token-color-palette-blue-50: #edf5ff; + --token-color-palette-green-100: #a7f0ba; + --token-color-palette-green-200: #24a148; + --token-color-palette-green-300: #198038; + --token-color-palette-green-400: #0e6027; + --token-color-palette-green-500: #044317; + --token-color-palette-green-50: #defbe6; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-neutral-100: #e0e0e0; + --token-color-palette-neutral-200: #c6c6c6; + --token-color-palette-neutral-300: #a8a8a8; + --token-color-palette-neutral-400: #8d8d8d; + --token-color-palette-neutral-500: #525252; + --token-color-palette-neutral-50: #f4f4f4; + --token-color-palette-neutral-600: #393939; + --token-color-palette-neutral-700: #161616; + --token-color-palette-purple-100: #e8daff; + --token-color-palette-purple-200: #a56eff; + --token-color-palette-purple-300: #8a3ffc; + --token-color-palette-purple-400: #6929c4; + --token-color-palette-purple-500: #31135e; + --token-color-palette-purple-50: #f6f2ff; + --token-color-palette-red-100: #ffd7d9; + --token-color-palette-red-200: #da1e28; + --token-color-palette-red-300: #a2191f; + --token-color-palette-red-400: #750e13; + --token-color-palette-red-500: #520408; + --token-color-palette-red-50: #fff1f1; + --token-color-surface-action: #0f62fe; + --token-color-surface-critical: #a2191f; + --token-color-surface-faint: #393939; + --token-color-surface-high-contrast: #f4f4f4; + --token-color-surface-highlight: #6929c4; + --token-color-surface-interactive-active: #6f6f6f; + --token-color-surface-interactive-disabled: #6f6f6f; + --token-color-surface-interactive-hover: #474747; + --token-color-surface-interactive: #393939; + --token-color-surface-primary: #393939; + --token-color-surface-strong: #525252; + --token-color-surface-success: #0e6027; + --token-color-surface-warning: #684e00; + --token-color-vault-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-radar-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ + --token-color-vault-secrets-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-dismiss-button-border-color-active: rgba(0, 0, 0, 0); + --token-dismiss-button-foreground-color-active: #f4f4f4; + --token-dismiss-button-foreground-color-default: #f4f4f4; + --token-dismiss-button-icon-size: 20px; + --token-dismiss-button-size: 48px; + --token-dismiss-button-surface-color-active: rgba(141, 141, 141, 0.4); + --token-dismiss-button-surface-color-hover: rgba(141, 141, 141, 0.16); + --token-elevation-high-box-shadow: none; + --token-elevation-higher-box-shadow: none; + --token-elevation-inset-box-shadow: none; + --token-elevation-low-box-shadow: none; + --token-elevation-mid-box-shadow: none; + --token-elevation-overlay-box-shadow: none; + --token-focus-ring-action-box-shadow: + inset 0 0 0 1px #161616, 0 0 0 3px #ffffff; + --token-focus-ring-critical-box-shadow: + inset 0 0 0 1px #161616, 0 0 0 3px #ffffff; + --token-form-radiocard-border-color-default-checked: #ffc0cb; + --token-form-radiocard-border-color-default: rgba(0, 0, 0, 0); + --token-form-radiocard-border-color-focus: #ffc0cb; + --token-form-radiocard-border-radius: 0px; + --token-icon-tile-border-color-logo: #6f6f6f; + --token-icon-tile-border-color-overlay: #8d8d8d; + --token-icon-tile-surface-color-overlay: #525252; + --token-rich-tooltip-bubble-arrow-size: 12px; + --token-rich-tooltip-bubble-border-color: var( + --token-color-palette-alpha-200 + ); + --token-rich-tooltip-bubble-border-radius: 2px; + --token-rich-tooltip-bubble-max-width: 288px; + --token-rich-tooltip-toggle-foreground-color-active: #c6c6c6; + --token-rich-tooltip-toggle-foreground-color-default: #c6c6c6; + --token-rich-tooltip-toggle-foreground-color-hover: #f4f4f4; + --token-rich-tooltip-toggle-gap-horizontal: 8px; + --token-rich-tooltip-toggle-icon-size: 14px; + --token-surface-base-box-shadow: none; + --token-surface-high-box-shadow: none; + --token-surface-higher-box-shadow: none; + --token-surface-inset-box-shadow: none; + --token-surface-low-box-shadow: none; + --token-surface-mid-box-shadow: none; + --token-surface-overlay-box-shadow: none; + --token-tooltip-border-radius: 2px; + --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); + --token-tooltip-caret-height: 6px; + --token-tooltip-caret-width: 12px; + --token-tooltip-max-width: 288px; + --token-tooltip-padding-horizontal: 16px; + --token-tooltip-padding-vertical: 16px; + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-letter-spacing: 0.16px; + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-letter-spacing: 0px; + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-letter-spacing: 0px; + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-letter-spacing: 0px; + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-letter-spacing: 0px; + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-weight-bold: 600; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-semibold: 600; + } +} + +@mixin hds-mode-cds100() { + :root { + --token-app-footer-focus-color-action-internal: #ffffff; + --token-badge-border-radius: var(--token-border-radius-rounded); + --token-badge-count-padding-horizontal-large: 12px; + --token-badge-count-padding-horizontal-medium: 8px; + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-foreground-color-critical-filled: #ffd7d9; /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: #161616; + --token-badge-foreground-color-critical-outlined: #ffd7d9; + --token-badge-foreground-color-highlight-filled: #e8daff; /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: #161616; + --token-badge-foreground-color-highlight-outlined: #e8daff; + --token-badge-foreground-color-neutral-dark-mode-filled: #161616; + --token-badge-foreground-color-neutral-dark-mode-inverted: #f4f4f4; + --token-badge-foreground-color-neutral-dark-mode-outlined: #161616; + --token-badge-foreground-color-neutral-filled: #f4f4f4; + --token-badge-foreground-color-neutral-inverted: #161616; + --token-badge-foreground-color-neutral-outlined: #f4f4f4; + --token-badge-foreground-color-success-filled: #a7f0ba; /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: #161616; + --token-badge-foreground-color-success-outlined: #a7f0ba; + --token-badge-foreground-color-warning-filled: #ffd9be; + --token-badge-foreground-color-warning-inverted: #161616; + --token-badge-foreground-color-warning-outlined: #ffd9be; + --token-badge-gap-large: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-small: 4px; + --token-badge-height-small: 18px; + --token-badge-padding-horizontal-large: 12px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-small: 8px; + --token-badge-padding-vertical-small: 1px; + --token-badge-surface-color-critical-filled: #a2191f; /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: #ffd7d9; + --token-badge-surface-color-highlight-filled: #6929c4; /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: #be95ff; + --token-badge-surface-color-neutral-dark-mode-filled: #f4f4f4; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: #525252; + --token-badge-surface-color-neutral-filled: #525252; + --token-badge-surface-color-neutral-inverted: #f4f4f4; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-success-filled: #0e6027; /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: #a7f0ba; + --token-badge-surface-color-warning-filled: #8a3800; /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: #ffd9be; + --token-badge-typography-font-size-large: 0.75rem; + --token-badge-typography-font-size-medium: 0.75rem; + --token-badge-typography-font-size-small: 0.75rem; + --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */ + --token-border-radius-large: 0px; + --token-border-radius-medium: 0px; + --token-border-radius-small: 0px; + --token-border-radius-x-small: 0px; + --token-button-border-color-critical-active: rgba(0, 0, 0, 0); + --token-button-border-color-critical-default: rgba(0, 0, 0, 0); + --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-hover: rgba(0, 0, 0, 0); + --token-button-border-color-primary-active: rgba(0, 0, 0, 0); + --token-button-border-color-primary-default: rgba(0, 0, 0, 0); + --token-button-border-color-primary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-hover: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-active: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-default: rgba(0, 0, 0, 0); + --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0); + --token-button-border-radius: 0px; + --token-button-foreground-color-critical-active: #ffffff; + --token-button-foreground-color-critical-default: #ffffff; + --token-button-foreground-color-critical-focus: #ffffff; + --token-button-foreground-color-critical-hover: #ffffff; + --token-button-foreground-color-disabled: rgba(255, 255, 255, 0.25); + --token-button-foreground-color-primary-active: #ffffff; + --token-button-foreground-color-primary-default: #ffffff; + --token-button-foreground-color-primary-focus: #ffffff; + --token-button-foreground-color-primary-hover: #ffffff; + --token-button-foreground-color-secondary-active: #ffffff; + --token-button-foreground-color-secondary-default: #ffffff; + --token-button-foreground-color-secondary-focus: #ffffff; + --token-button-foreground-color-secondary-hover: #ffffff; + --token-button-foreground-color-tertiary-active: #161616; + --token-button-foreground-color-tertiary-default: #ffffff; + --token-button-foreground-color-tertiary-focus: #161616; + --token-button-foreground-color-tertiary-hover: #161616; + --token-button-gap: 32px; + --token-button-height-large: 48px; + --token-button-height-medium: 40px; + --token-button-height-small: 32px; + --token-button-icon-size-large: 16px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-small: 16px; + --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-surface-color-critical-active: #750e13; + --token-button-surface-color-critical-default: #da1e28; + --token-button-surface-color-critical-focus: #da1e28; + --token-button-surface-color-critical-hover: #b81921; + --token-button-surface-color-disabled: #8d8d8d; + --token-button-surface-color-primary-active: #002d9c; + --token-button-surface-color-primary-default: #0f62fe; + --token-button-surface-color-primary-focus: #0f62fe; + --token-button-surface-color-primary-hover: #0050e6; + --token-button-surface-color-secondary-active: #393939; + --token-button-surface-color-secondary-default: #6f6f6f; + --token-button-surface-color-secondary-focus: #6f6f6f; + --token-button-surface-color-secondary-hover: #5e5e5e; + --token-button-surface-color-tertiary-active: #c6c6c6; + --token-button-surface-color-tertiary-focus: #f4f4f4; + --token-button-surface-color-tertiary-hover: #f4f4f4; + --token-button-typography-font-size-large: 0.875rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-small: 0.875rem; + --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */ + --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-color-border-action: #4589ff; + --token-color-border-critical: #fa4d56; + --token-color-border-faint: #393939; + --token-color-border-highlight: #a56eff; + --token-color-border-primary: #6f6f6f; + --token-color-border-strong: #6f6f6f; + --token-color-border-success: #24a148; + --token-color-border-warning: #b28600; + --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-action-internal: #161616; + --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #161616; + --token-color-foreground-action-active: #a6c8ff; + --token-color-foreground-action-hover: #a6c8ff; + --token-color-foreground-action: #78a9ff; + --token-color-foreground-critical-high-contrast: #ffd7d9; + --token-color-foreground-critical-on-surface: #ffb3b8; + --token-color-foreground-critical: #ff8389; + --token-color-foreground-disabled: rgba(244, 244, 244, 0.25); + --token-color-foreground-faint: #c6c6c6; + --token-color-foreground-high-contrast: #161616; + --token-color-foreground-highlight-high-contrast: #d4bbff; + --token-color-foreground-highlight-on-surface: #d4bbff; + --token-color-foreground-highlight: #be95ff; + --token-color-foreground-primary: #f4f4f4; + --token-color-foreground-strong: #f4f4f4; + --token-color-foreground-success-high-contrast: #a7f0ba; + --token-color-foreground-success-on-surface: #6fdc8c; + --token-color-foreground-success: #42be65; + --token-color-foreground-warning-high-contrast: #fddc69; + --token-color-foreground-warning-on-surface: #f1c21b; + --token-color-foreground-warning: #d2a106; + --token-color-hashicorp-brand: #ffffff; + --token-color-hcp-brand: #ffffff; + --token-color-page-faint: #161616; + --token-color-page-primary: #161616; + --token-color-palette-alpha-100: #393939; + --token-color-palette-alpha-200: #525252; + --token-color-palette-alpha-300: #6f6f6f; + --token-color-palette-amber-100: #ffd9be; + --token-color-palette-amber-200: #ba4e00; + --token-color-palette-amber-300: #8a3800; + --token-color-palette-amber-400: #5e2900; + --token-color-palette-amber-500: #3e1a00; + --token-color-palette-amber-50: #fff2e8; + --token-color-palette-blue-100: #d0e2ff; + --token-color-palette-blue-200: #0f62fe; + --token-color-palette-blue-300: #0043ce; + --token-color-palette-blue-400: #002d9c; + --token-color-palette-blue-500: #001141; + --token-color-palette-blue-50: #edf5ff; + --token-color-palette-green-100: #a7f0ba; + --token-color-palette-green-200: #24a148; + --token-color-palette-green-300: #198038; + --token-color-palette-green-400: #0e6027; + --token-color-palette-green-500: #044317; + --token-color-palette-green-50: #defbe6; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-neutral-100: #e0e0e0; + --token-color-palette-neutral-200: #c6c6c6; + --token-color-palette-neutral-300: #a8a8a8; + --token-color-palette-neutral-400: #8d8d8d; + --token-color-palette-neutral-500: #525252; + --token-color-palette-neutral-50: #f4f4f4; + --token-color-palette-neutral-600: #393939; + --token-color-palette-neutral-700: #161616; + --token-color-palette-purple-100: #e8daff; + --token-color-palette-purple-200: #a56eff; + --token-color-palette-purple-300: #8a3ffc; + --token-color-palette-purple-400: #6929c4; + --token-color-palette-purple-500: #31135e; + --token-color-palette-purple-50: #f6f2ff; + --token-color-palette-red-100: #ffd7d9; + --token-color-palette-red-200: #da1e28; + --token-color-palette-red-300: #a2191f; + --token-color-palette-red-400: #750e13; + --token-color-palette-red-500: #520408; + --token-color-palette-red-50: #fff1f1; + --token-color-surface-action: #0043ce; + --token-color-surface-critical: #a2191f; + --token-color-surface-faint: #262626; + --token-color-surface-high-contrast: #f4f4f4; + --token-color-surface-highlight: #6929c4; + --token-color-surface-interactive-active: #525252; + --token-color-surface-interactive-disabled: #525252; + --token-color-surface-interactive-hover: #333333; + --token-color-surface-interactive: #262626; + --token-color-surface-primary: #262626; + --token-color-surface-strong: #393939; + --token-color-surface-success: #0e6027; + --token-color-surface-warning: #684e00; + --token-color-vault-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-radar-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ + --token-color-vault-secrets-brand-alt: #ffffff; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-dismiss-button-border-color-active: rgba(0, 0, 0, 0); + --token-dismiss-button-foreground-color-active: #f4f4f4; + --token-dismiss-button-foreground-color-default: #f4f4f4; + --token-dismiss-button-icon-size: 20px; + --token-dismiss-button-size: 48px; + --token-dismiss-button-surface-color-active: rgba(141, 141, 141, 0.4); + --token-dismiss-button-surface-color-hover: rgba(141, 141, 141, 0.16); + --token-elevation-high-box-shadow: none; + --token-elevation-higher-box-shadow: none; + --token-elevation-inset-box-shadow: none; + --token-elevation-low-box-shadow: none; + --token-elevation-mid-box-shadow: none; + --token-elevation-overlay-box-shadow: none; + --token-focus-ring-action-box-shadow: + inset 0 0 0 1px #161616, 0 0 0 3px #ffffff; + --token-focus-ring-critical-box-shadow: + inset 0 0 0 1px #161616, 0 0 0 3px #ffffff; + --token-form-radiocard-border-color-default-checked: #ffc0cb; + --token-form-radiocard-border-color-default: rgba(0, 0, 0, 0); + --token-form-radiocard-border-color-focus: #ffc0cb; + --token-form-radiocard-border-radius: 0px; + --token-icon-tile-border-color-logo: #525252; + --token-icon-tile-border-color-overlay: #6f6f6f; + --token-icon-tile-surface-color-overlay: #393939; + --token-rich-tooltip-bubble-arrow-size: 12px; + --token-rich-tooltip-bubble-border-color: var( + --token-color-palette-alpha-200 + ); + --token-rich-tooltip-bubble-border-radius: 2px; + --token-rich-tooltip-bubble-max-width: 288px; + --token-rich-tooltip-toggle-foreground-color-active: #c6c6c6; + --token-rich-tooltip-toggle-foreground-color-default: #c6c6c6; + --token-rich-tooltip-toggle-foreground-color-hover: #f4f4f4; + --token-rich-tooltip-toggle-gap-horizontal: 8px; + --token-rich-tooltip-toggle-icon-size: 14px; + --token-surface-base-box-shadow: none; + --token-surface-high-box-shadow: none; + --token-surface-higher-box-shadow: none; + --token-surface-inset-box-shadow: none; + --token-surface-low-box-shadow: none; + --token-surface-mid-box-shadow: none; + --token-surface-overlay-box-shadow: none; + --token-tooltip-border-radius: 2px; + --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); + --token-tooltip-caret-height: 6px; + --token-tooltip-caret-width: 12px; + --token-tooltip-max-width: 288px; + --token-tooltip-padding-horizontal: 16px; + --token-tooltip-padding-vertical: 16px; + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-letter-spacing: 0.16px; + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-letter-spacing: 0px; + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-letter-spacing: 0px; + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-letter-spacing: 0px; + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-letter-spacing: 0px; + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-weight-bold: 600; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-semibold: 600; + } +} + +@mixin hds-theme-common() { + :root { + --token-app-header-height: 60px; + --token-app-header-home-link-size: 36px; + --token-app-header-logo-size: 28px; + --token-app-side-nav-body-list-item-border-radius: 5px; + --token-app-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-app-side-nav-body-list-item-height: 36px; + --token-app-side-nav-body-list-item-padding-horizontal: 8px; + --token-app-side-nav-body-list-item-padding-vertical: 4px; + --token-app-side-nav-body-list-item-spacing-vertical: 2px; + --token-app-side-nav-body-list-margin-vertical: 24px; + --token-app-side-nav-color-foreground-faint: var( + --token-color-foreground-faint + ); + --token-app-side-nav-color-foreground-primary: var( + --token-color-foreground-primary + ); + --token-app-side-nav-color-foreground-strong: var( + --token-color-foreground-primary + ); + --token-app-side-nav-color-surface-interactive-active: var( + --token-color-palette-neutral-300 + ); + --token-app-side-nav-color-surface-interactive-hover: var( + --token-color-surface-interactive-hover + ); + --token-app-side-nav-color-surface-primary: var( + --token-color-surface-faint + ); + --token-app-side-nav-header-actions-spacing: 8px; + --token-app-side-nav-header-home-link-logo-size-minimized: 32px; + --token-app-side-nav-header-home-link-logo-size: 48px; + --token-app-side-nav-header-home-link-padding: 4px; + --token-app-side-nav-toggle-button-border-radius: 5px; + --token-app-side-nav-wrapper-border-color: var( + --token-color-palette-neutral-200 + ); + --token-app-side-nav-wrapper-border-width: 1px; + --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-app-side-nav-wrapper-padding-horizontal: 16px; + --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-app-side-nav-wrapper-padding-vertical: 16px; + --token-badge-height-large: 32px; + --token-badge-height-medium: 24px; + --token-badge-icon-size-large: 16px; + --token-badge-icon-size-medium: 16px; + --token-badge-icon-size-small: 12px; + --token-badge-padding-vertical-large: 4px; + --token-badge-padding-vertical-medium: 4px; + --token-badge-surface-color-neutral-dark-mode-outlined: rgba(0, 0, 0, 0); + --token-badge-surface-color-neutral-outlined: rgba(0, 0, 0, 0); + --token-badge-typography-line-height-medium: 1.2308; /** 16px = 1.2308 */ + --token-badge-typography-line-height-small: 1.2308; /** 16px = 1.2308 */ + --token-border-radius-rounded: 1000000000px; + --token-button-border-color-disabled: var(--token-color-border-primary); + --token-button-border-color-tertiary-active: var( + --token-color-border-strong + ); + --token-button-border-color-tertiary-default: rgba(0, 0, 0, 0); + --token-button-border-color-tertiary-focus-external: var( + --token-color-focus-action-external + ); + --token-button-border-color-tertiary-focus-internal: var( + --token-color-focus-action-internal + ); + --token-button-border-color-tertiary-hover: var( + --token-color-border-strong + ); + --token-button-border-width: 1px; + --token-button-focus-border-width: 3px; + --token-button-surface-color-tertiary-default: rgba(0, 0, 0, 0); + --token-color-boundary-border: #fbd7d8; + --token-color-boundary-brand: #f24c53; + --token-color-boundary-foreground: #cf2d32; + --token-color-boundary-gradient-faint-start: #fffafa; /** this is the 'boundary-50' value at 25% opacity on white */ + --token-color-boundary-gradient-faint-stop: #ffecec; + --token-color-boundary-gradient-primary-start: #f97076; + --token-color-boundary-gradient-primary-stop: #db363b; + --token-color-boundary-surface: #ffecec; + --token-color-consul-border: #ffcede; + --token-color-consul-brand: #e03875; + --token-color-consul-foreground: #d01c5b; + --token-color-consul-gradient-faint-start: #fff9fb; /** this is the 'consul-50' value at 25% opacity on white */ + --token-color-consul-gradient-faint-stop: #ffe9f1; + --token-color-consul-gradient-primary-start: #ff99be; + --token-color-consul-gradient-primary-stop: #da306e; + --token-color-consul-surface: #ffe9f1; + --token-color-nomad-border: #bff3dd; + --token-color-nomad-brand: #06d092; + --token-color-nomad-foreground: #008661; + --token-color-nomad-gradient-faint-start: #f3fff9; /** this is the 'nomad-50' value at 25% opacity on white */ + --token-color-nomad-gradient-faint-stop: #d3fdeb; + --token-color-nomad-gradient-primary-start: #bff3dd; + --token-color-nomad-gradient-primary-stop: #60dea9; + --token-color-nomad-surface: #d3fdeb; + --token-color-packer-border: #b4e4ff; + --token-color-packer-brand: #02a8ef; + --token-color-packer-foreground: #007eb4; + --token-color-packer-gradient-faint-start: #f3fcff; /** this is the 'packer-50' value at 25% opacity on white */ + --token-color-packer-gradient-faint-stop: #d4f2ff; + --token-color-packer-gradient-primary-start: #b4e4ff; + --token-color-packer-gradient-primary-stop: #63d0ff; + --token-color-packer-surface: #d4f2ff; + --token-color-terraform-border: #ebdbfc; + --token-color-terraform-brand-on-dark: #a067da; /** this is an alternative brand color meant to be used on dark backgrounds */ + --token-color-terraform-brand: #7b42bc; + --token-color-terraform-foreground: #773cb4; + --token-color-terraform-gradient-faint-start: #fcfaff; /** this is the 'terraform-50' value at 25% opacity on white */ + --token-color-terraform-gradient-faint-stop: #f4ecff; + --token-color-terraform-gradient-primary-start: #bb8deb; + --token-color-terraform-gradient-primary-stop: #844fba; + --token-color-terraform-surface: #f4ecff; + --token-color-vagrant-border: #c7dbfc; + --token-color-vagrant-brand: #1868f2; + --token-color-vagrant-foreground: #1c61d8; + --token-color-vagrant-gradient-faint-start: #f4faff; /** this is the 'vagrant-50' value at 25% opacity on white */ + --token-color-vagrant-gradient-faint-stop: #d6ebff; + --token-color-vagrant-gradient-primary-start: #639cff; + --token-color-vagrant-gradient-primary-stop: #2e71e5; + --token-color-vagrant-surface: #d6ebff; + --token-color-vault-border: #feec7b; + --token-color-vault-brand: #ffcf25; + --token-color-vault-foreground: #9a6f00; + --token-color-vault-gradient-faint-start: #fffdf2; /** this is the 'vault-50' value at 25% opacity on white */ + --token-color-vault-gradient-faint-stop: #fff9cf; + --token-color-vault-gradient-primary-start: #feec7b; + --token-color-vault-gradient-primary-stop: #ffe543; + --token-color-vault-radar-border: #feec7b; + --token-color-vault-radar-brand: #ffcf25; + --token-color-vault-radar-foreground: #9a6f00; + --token-color-vault-radar-gradient-faint-start: #fffdf2; /** this is the 'vault-radar-50' value at 25% opacity on white */ + --token-color-vault-radar-gradient-faint-stop: #fff9cf; + --token-color-vault-radar-gradient-primary-start: #feec7b; + --token-color-vault-radar-gradient-primary-stop: #ffe543; + --token-color-vault-radar-surface: #fff9cf; + --token-color-vault-secrets-border: #feec7b; + --token-color-vault-secrets-brand: #ffcf25; + --token-color-vault-secrets-foreground: #9a6f00; + --token-color-vault-secrets-gradient-faint-start: #fffdf2; /** this is the 'vault-secrets-50' value at 25% opacity on white */ + --token-color-vault-secrets-gradient-faint-stop: #fff9cf; + --token-color-vault-secrets-gradient-primary-start: #feec7b; + --token-color-vault-secrets-gradient-primary-stop: #ffe543; + --token-color-vault-secrets-surface: #fff9cf; + --token-color-vault-surface: #fff9cf; + --token-color-waypoint-border: #cbf1f3; + --token-color-waypoint-brand: #14c6cb; + --token-color-waypoint-foreground: #008196; + --token-color-waypoint-gradient-faint-start: #f6feff; /** this is the 'waypoint-50' value at 25% opacity on white */ + --token-color-waypoint-gradient-faint-stop: #e0fcff; + --token-color-waypoint-gradient-primary-start: #cbf1f3; + --token-color-waypoint-gradient-primary-stop: #62d4dc; + --token-color-waypoint-surface: #e0fcff; + --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'dash' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'dash' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-size: 12px; + --token-form-checkbox-border-radius: 3px; + --token-form-checkbox-border-width: 1px; + --token-form-checkbox-size: 16px; + --token-form-control-base-border-color-default: var( + --token-color-palette-neutral-400 + ); + --token-form-control-base-border-color-hover: var( + --token-color-palette-neutral-500 + ); + --token-form-control-base-foreground-placeholder-color: var( + --token-color-foreground-faint + ); + --token-form-control-base-foreground-value-color: var( + --token-color-foreground-strong + ); + --token-form-control-base-surface-color-default: var( + --token-color-surface-interactive + ); + --token-form-control-base-surface-color-hover: var( + --token-color-surface-interactive-hover + ); + --token-form-control-border-radius: 5px; + --token-form-control-border-width: 1px; + --token-form-control-checked-border-color-default: var( + --token-color-palette-blue-300 + ); + --token-form-control-checked-border-color-hover: var( + --token-color-palette-blue-400 + ); + --token-form-control-checked-foreground-color: var( + --token-color-foreground-high-contrast + ); + --token-form-control-checked-surface-color-default: var( + --token-color-palette-blue-200 + ); + --token-form-control-checked-surface-color-hover: var( + --token-color-palette-blue-300 + ); + --token-form-control-disabled-border-color: var( + --token-color-border-primary + ); + --token-form-control-disabled-foreground-color: var( + --token-color-foreground-disabled + ); + --token-form-control-disabled-surface-color: var( + --token-color-surface-interactive-disabled + ); + --token-form-control-invalid-border-color-default: var( + --token-color-palette-red-300 + ); + --token-form-control-invalid-border-color-hover: var( + --token-color-palette-red-400 + ); + --token-form-control-padding: 7px; /** Notice: we have to take in account the border, so it's 1px less than in Figma. */ + --token-form-control-readonly-border-color: var(--token-color-border-faint); + --token-form-control-readonly-foreground-color: var( + --token-color-foreground-primary + ); + --token-form-control-readonly-surface-color: var( + --token-color-surface-strong + ); + --token-form-error-color: var(--token-color-palette-red-300); + --token-form-error-icon-size: 14px; + --token-form-helper-text-color: var(--token-color-foreground-faint); + --token-form-indicator-optional-color: var(--token-color-foreground-faint); + --token-form-label-color: var(--token-color-foreground-strong); + --token-form-legend-color: var(--token-form-label-color); + --token-form-radio-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'dot' color is hardcoded here! */ + --token-form-radio-background-image-data-url: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e"); /** notice: the 'dot' color is hardcoded here! */ + --token-form-radio-background-image-size: 12px; + --token-form-radio-border-width: 1px; + --token-form-radio-size: 16px; + --token-form-radiocard-border-width: 1px; + --token-form-radiocard-content-padding: 24px; + --token-form-radiocard-control-padding: 8px; + --token-form-radiocard-group-gap: 16px; + --token-form-radiocard-transition-duration: 0.2s; + --token-form-select-background-image-data-url-disabled: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E"); /** notice: the 'caret' color is hardcoded here! */ + --token-form-select-background-image-data-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E"); /** notice: the 'caret' color is hardcoded here! */ + --token-form-select-background-image-position-right-x: var( + --token-form-control-padding + ); + --token-form-select-background-image-position-top-y: 9px; + --token-form-select-background-image-size: 16px; + --token-form-text-input-background-image-data-url-date: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-cancel: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-loading: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color and animation are hardcoded here! */ + --token-form-text-input-background-image-data-url-search: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-time: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-position-x: var( + --token-form-control-padding + ); + --token-form-text-input-background-image-size: 16px; + --token-form-toggle-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-background-image-position-x: 2px; + --token-form-toggle-background-image-size: 12px; + --token-form-toggle-base-surface-color-default: var( + --token-color-surface-strong + ); /** the toggle has a different base surface color, compared to the other controls */ + --token-form-toggle-border-radius: 3px; + --token-form-toggle-border-width: 1px; + --token-form-toggle-height: 16px; + --token-form-toggle-thumb-size: var(--token-form-toggle-height); + --token-form-toggle-transition-duration: 0.2s; + --token-form-toggle-transition-timing-function: cubic-bezier( + 0.68, + -0.2, + 0.265, + 1.15 + ); + --token-form-toggle-width: 32px; + --token-pagination-child-spacing-horizontal: 20px; + --token-pagination-child-spacing-vertical: 8px; + --token-pagination-nav-control-focus-inset: 4px; + --token-pagination-nav-control-height: 36px; + --token-pagination-nav-control-icon-spacing: 6px; + --token-pagination-nav-control-padding-horizontal: 12px; + --token-pagination-nav-indicator-height: 2px; + --token-pagination-nav-indicator-spacing: 6px; + --token-tabs-divider-height: 1px; + --token-tabs-indicator-height: 3px; + --token-tabs-indicator-transition-duration: 0.6s; + --token-tabs-indicator-transition-function: cubic-bezier(0.5, 1, 0.89, 1); + --token-tabs-tab-border-radius: 5px; + --token-tabs-tab-focus-inset: 6px; + --token-tabs-tab-gutter: 6px; + --token-tabs-tab-height-large: 48px; + --token-tabs-tab-height-medium: 36px; + --token-tabs-tab-padding-horizontal-large: 20px; + --token-tabs-tab-padding-horizontal-medium: 12px; + --token-tabs-tab-padding-vertical: 0px; + --token-tooltip-focus-offset: -2px; + --token-tooltip-transition-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); + } +} diff --git a/packages/tokens/dist/products/css/tokens.css b/packages/tokens/dist/products/css/tokens.css index d848059dd4f..73161d316a1 100644 --- a/packages/tokens/dist/products/css/tokens.css +++ b/packages/tokens/dist/products/css/tokens.css @@ -7,6 +7,7 @@ --token-border-radius-small: 5px; --token-border-radius-medium: 6px; --token-border-radius-large: 8px; + --token-border-radius-rounded: 1000000000px; --token-color-palette-blue-500: #1c345f; --token-color-palette-blue-400: #0046d1; --token-color-palette-blue-300: #0c56e9; @@ -86,6 +87,7 @@ --token-color-surface-primary: #ffffff; --token-color-surface-faint: #fafafa; --token-color-surface-strong: #f1f2f3; + --token-color-surface-high-contrast: #0c0c0e; --token-color-surface-interactive: #ffffff; --token-color-surface-interactive-hover: #f1f2f3; --token-color-surface-interactive-active: #dedfe3; @@ -147,7 +149,7 @@ --token-color-vagrant-gradient-faint-start: #f4faff; /** this is the 'vagrant-50' value at 25% opacity on white */ --token-color-vagrant-gradient-faint-stop: #d6ebff; --token-color-vault-radar-brand: #ffcf25; - --token-color-vault-radar-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault radar would not work */ + --token-color-vault-radar-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work */ --token-color-vault-radar-foreground: #9a6f00; --token-color-vault-radar-surface: #fff9cf; --token-color-vault-radar-border: #feec7b; @@ -196,6 +198,7 @@ --token-surface-overlay-box-shadow: 0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; --token-focus-ring-action-box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff; --token-focus-ring-critical-box-shadow: inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578; + --token-app-footer-focus-color-action-internal: var(--token-color-focus-action-internal); --token-app-header-height: 60px; --token-app-header-home-link-size: 36px; --token-app-header-logo-size: 28px; @@ -223,6 +226,147 @@ --token-app-side-nav-color-surface-primary: var(--token-color-surface-faint); --token-app-side-nav-color-surface-interactive-hover: var(--token-color-surface-interactive-hover); --token-app-side-nav-color-surface-interactive-active: var(--token-color-palette-neutral-300); + --token-badge-count-padding-horizontal-small: 8px; + --token-badge-count-padding-horizontal-medium: 12px; + --token-badge-count-padding-horizontal-large: 14px; + --token-badge-height-small: 20px; + --token-badge-height-medium: 24px; + --token-badge-height-large: 32px; + --token-badge-padding-horizontal-small: 6px; + --token-badge-padding-horizontal-medium: 8px; + --token-badge-padding-horizontal-large: 8px; + --token-badge-padding-vertical-small: 2px; + --token-badge-padding-vertical-medium: 4px; + --token-badge-padding-vertical-large: 4px; + --token-badge-gap-small: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-large: 6px; + --token-badge-typography-font-size-small: 0.8125rem; + --token-badge-typography-font-size-medium: 0.8125rem; + --token-badge-typography-font-size-large: 1rem; + --token-badge-typography-line-height-small: 1.2308; /** 16px = 1.2308 */ + --token-badge-typography-line-height-medium: 1.2308; /** 16px = 1.2308 */ + --token-badge-typography-line-height-large: 1.5; /** 24px = 1.5 */ + --token-badge-foreground-color-neutral-filled: #3b3d45; + --token-badge-foreground-color-neutral-inverted: #ffffff; + --token-badge-foreground-color-neutral-outlined: #3b3d45; + --token-badge-foreground-color-neutral-dark-mode-filled: #ffffff; + --token-badge-foreground-color-neutral-dark-mode-inverted: #3b3d45; + --token-badge-foreground-color-neutral-dark-mode-outlined: #ffffff; + --token-badge-foreground-color-highlight-filled: #7b00db; /** we don't use `highlight-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-highlight-inverted: #ffffff; + --token-badge-foreground-color-highlight-outlined: #a737ff; + --token-badge-foreground-color-success-filled: #006619; /** we don't use `success-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-success-inverted: #ffffff; + --token-badge-foreground-color-success-outlined: #008a22; + --token-badge-foreground-color-warning-filled: #803d00; + --token-badge-foreground-color-warning-inverted: #ffffff; + --token-badge-foreground-color-warning-outlined: #bb5a00; + --token-badge-foreground-color-critical-filled: #940004; /** we don't use `critical-on-surface` for accessibility (better contrast) */ + --token-badge-foreground-color-critical-inverted: #ffffff; + --token-badge-foreground-color-critical-outlined: #e52228; + --token-badge-surface-color-neutral-filled: #dedfe3; + --token-badge-surface-color-neutral-inverted: #656a76; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead */ + --token-badge-surface-color-neutral-outlined: rgba(0, 0, 0, 0); + --token-badge-surface-color-neutral-dark-mode-filled: #656a76; /** In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component */ + --token-badge-surface-color-neutral-dark-mode-inverted: #fafafa; + --token-badge-surface-color-neutral-dark-mode-outlined: rgba(0, 0, 0, 0); + --token-badge-surface-color-highlight-filled: #ead2fe; /** we don't use `surface-highlight` for accessibility (better contrast) */ + --token-badge-surface-color-highlight-inverted: #a737ff; + --token-badge-surface-color-success-filled: #cceeda; /** we don't use `surface-success` for accessibility (better contrast) */ + --token-badge-surface-color-success-inverted: #008a22; + --token-badge-surface-color-warning-filled: #fbeabf; /** we don't use `surface-warning` for accessibility (better contrast) */ + --token-badge-surface-color-warning-inverted: #bb5a00; + --token-badge-surface-color-critical-filled: #fbd4d4; /** we don't use `surface-critical` for accessibility (better contrast) */ + --token-badge-surface-color-critical-inverted: #e52228; + --token-badge-border-radius: 5px; + --token-badge-icon-size-small: 12px; + --token-badge-icon-size-medium: 16px; + --token-badge-icon-size-large: 16px; + --token-button-height-small: 28px; + --token-button-height-medium: 36px; + --token-button-height-large: 48px; + --token-button-padding-horizontal-small: 11px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */ + --token-button-padding-horizontal-large: 19px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 9px; /** here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 11px; /** here we're taking into account the 1px border */ + --token-button-gap: 6px; + --token-button-typography-font-size-small: 0.8125rem; + --token-button-typography-font-size-medium: 0.875rem; + --token-button-typography-font-size-large: 1rem; + --token-button-typography-line-height-small: 0.9286; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-button-typography-line-height-medium: 1.1429; /** 14px ~ 1.1429 */ + --token-button-typography-line-height-large: 1.5; /** 24px = 1.5 */ + --token-button-foreground-color-primary-default: #ffffff; + --token-button-foreground-color-primary-hover: #ffffff; + --token-button-foreground-color-primary-focus: #ffffff; + --token-button-foreground-color-primary-active: #ffffff; + --token-button-foreground-color-secondary-default: #3b3d45; + --token-button-foreground-color-secondary-hover: #3b3d45; + --token-button-foreground-color-secondary-focus: #3b3d45; + --token-button-foreground-color-secondary-active: #3b3d45; + --token-button-foreground-color-tertiary-default: #1060ff; + --token-button-foreground-color-tertiary-hover: #0c56e9; + --token-button-foreground-color-tertiary-focus: #1060ff; + --token-button-foreground-color-tertiary-active: #0046d1; + --token-button-foreground-color-critical-default: #c00005; + --token-button-foreground-color-critical-hover: #ffffff; + --token-button-foreground-color-critical-focus: #c00005; + --token-button-foreground-color-critical-active: #ffffff; + --token-button-foreground-color-disabled: #8c909c; + --token-button-surface-color-primary-default: #1060ff; + --token-button-surface-color-primary-hover: #0c56e9; + --token-button-surface-color-primary-focus: #1060ff; + --token-button-surface-color-primary-active: #0046d1; + --token-button-surface-color-secondary-default: #fafafa; + --token-button-surface-color-secondary-hover: #ffffff; + --token-button-surface-color-secondary-focus: #fafafa; + --token-button-surface-color-secondary-active: #dedfe3; + --token-button-surface-color-tertiary-default: rgba(0, 0, 0, 0); + --token-button-surface-color-tertiary-hover: #ffffff; + --token-button-surface-color-tertiary-focus: rgba(0, 0, 0, 0); + --token-button-surface-color-tertiary-active: #dedfe3; + --token-button-surface-color-critical-default: #fff5f5; + --token-button-surface-color-critical-hover: #c00005; + --token-button-surface-color-critical-focus: #fff5f5; + --token-button-surface-color-critical-active: #940004; + --token-button-surface-color-disabled: #fafafa; + --token-button-border-width: 1px; + --token-button-border-radius: 5px; + --token-button-border-color-primary-default: #0c56e9; + --token-button-border-color-primary-hover: #0c56e9; + --token-button-border-color-primary-focus-internal: #0c56e9; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-primary-focus-external: #5990ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-primary-active: #0046d1; + --token-button-border-color-secondary-default: #3b3d4566; + --token-button-border-color-secondary-hover: #3b3d4566; + --token-button-border-color-secondary-focus-internal: #0c56e9; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-secondary-focus-external: #5990ff; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-secondary-active: #3b3d4566; + --token-button-border-color-tertiary-default: rgba(0, 0, 0, 0); + --token-button-border-color-tertiary-hover: #3b3d4566; + --token-button-border-color-tertiary-focus-internal: #0c56e9; + --token-button-border-color-tertiary-focus-external: #5990ff; + --token-button-border-color-tertiary-active: #3b3d4566; + --token-button-border-color-critical-default: #c00005; + --token-button-border-color-critical-hover: #940004; + --token-button-border-color-critical-focus-internal: #c00005; /** TODO - replace the `pink` values with the correct ones */ + --token-button-border-color-critical-focus-external: #dd7578; /** TODO - replace the `magenta` values with the correct ones */ + --token-button-border-color-critical-active: #940004; + --token-button-border-color-disabled: #656a7633; + --token-button-focus-border-width: 3px; + --token-button-icon-size-small: 12px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-large: 24px; + --token-dismiss-button-size: 24px; + --token-dismiss-button-foreground-color-default: #656a76; + --token-dismiss-button-foreground-color-active: #0c0c0e; + --token-dismiss-button-surface-color-hover: rgba(222, 223, 227, 0.4); + --token-dismiss-button-surface-color-active: rgba(222, 223, 227, 0.4); + --token-dismiss-button-border-color-active: #3b3d4566; + --token-dismiss-button-icon-size: 16px; --token-form-label-color: #0c0c0e; --token-form-legend-color: #0c0c0e; --token-form-helper-text-color: #656a76; @@ -267,6 +411,9 @@ --token-form-radiocard-group-gap: 16px; --token-form-radiocard-border-width: 1px; --token-form-radiocard-border-radius: 6px; + --token-form-radiocard-border-color-default: #ffffff; + --token-form-radiocard-border-color-focus: #0c56e9; + --token-form-radiocard-border-color-default-checked: #0c56e9; --token-form-radiocard-content-padding: 24px; --token-form-radiocard-control-padding: 8px; --token-form-radiocard-transition-duration: 0.2s; @@ -294,6 +441,9 @@ --token-form-toggle-transition-duration: 0.2s; --token-form-toggle-transition-timing-function: cubic-bezier(0.68, -0.2, 0.265, 1.15); --token-form-toggle-thumb-size: 16px; + --token-icon-tile-border-color-overlay: #656a7633; + --token-icon-tile-border-color-logo: #656a7633; + --token-icon-tile-surface-color-overlay: #ffffff; --token-pagination-nav-control-height: 36px; --token-pagination-nav-control-padding-horizontal: 12px; --token-pagination-nav-control-focus-inset: 4px; @@ -302,6 +452,15 @@ --token-pagination-nav-indicator-spacing: 6px; --token-pagination-child-spacing-vertical: 8px; --token-pagination-child-spacing-horizontal: 20px; + --token-rich-tooltip-bubble-max-width: 280px; + --token-rich-tooltip-bubble-border-color: #656a7633; + --token-rich-tooltip-bubble-border-radius: 5px; + --token-rich-tooltip-bubble-arrow-size: 20px; + --token-rich-tooltip-toggle-gap-horizontal: 4px; + --token-rich-tooltip-toggle-foreground-color-default: #0c0c0e; + --token-rich-tooltip-toggle-foreground-color-hover: #3b3d45; + --token-rich-tooltip-toggle-foreground-color-active: #656a76; + --token-rich-tooltip-toggle-icon-size: 1em; --token-tabs-tab-height-medium: 36px; --token-tabs-tab-height-large: 48px; --token-tabs-tab-padding-horizontal-medium: 12px; @@ -314,13 +473,14 @@ --token-tabs-indicator-transition-function: cubic-bezier(0.5, 1, 0.89, 1); --token-tabs-indicator-transition-duration: 0.6s; --token-tabs-divider-height: 1px; - --token-tooltip-border-radius: 5px; - --token-tooltip-color-foreground-primary: var(--token-color-foreground-high-contrast); - --token-tooltip-color-surface-primary: var(--token-color-palette-neutral-700); - --token-tooltip-focus-offset: -2px; --token-tooltip-max-width: 280px; --token-tooltip-padding-horizontal: 12px; --token-tooltip-padding-vertical: 8px; + --token-tooltip-border-radius: 5px; + --token-tooltip-caret-clip-path: path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z'); + --token-tooltip-caret-height: 7px; + --token-tooltip-caret-width: 16px; + --token-tooltip-focus-offset: -2px; --token-tooltip-transition-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); --token-typography-font-stack-display: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-font-stack-text: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; @@ -332,20 +492,23 @@ --token-typography-display-500-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-display-500-font-size: 1.875rem; /** 30px/1.875rem */ --token-typography-display-500-line-height: 1.2666; /** 38px */ + --token-typography-display-500-letter-spacing: -0.5px; --token-typography-display-400-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-display-400-font-size: 1.5rem; /** 24px/1.5rem */ --token-typography-display-400-line-height: 1.3333; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; --token-typography-display-300-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-display-300-font-size: 1.125rem; /** 18px/1.125rem */ --token-typography-display-300-line-height: 1.3333; /** 24px */ - --token-typography-display-300-letter-spacing: -0.5px; /** this is `tracking` */ + --token-typography-display-300-letter-spacing: -0.5px; --token-typography-display-200-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ --token-typography-display-200-line-height: 1.5; /** 24px */ - --token-typography-display-200-letter-spacing: -0.5px; /** this is `tracking` */ + --token-typography-display-200-letter-spacing: -0.5px; --token-typography-display-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-display-100-font-size: 0.8125rem; /** 13px/0.8125rem */ --token-typography-display-100-line-height: 1.3846; /** 18px */ + --token-typography-display-100-letter-spacing: 0px; --token-typography-body-300-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ --token-typography-body-300-line-height: 1.5; /** 24px */ @@ -355,13 +518,13 @@ --token-typography-body-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-body-100-font-size: 0.8125rem; /** 13px/0.8125rem */ --token-typography-body-100-line-height: 1.3846; /** 18px */ - --token-typography-code-100-font-family: ui-monospace, Menlo, Consolas, monospace; - --token-typography-code-100-font-size: 0.8125rem; /** 13px/0.8125rem */ - --token-typography-code-100-line-height: 1.23; /** 16px */ - --token-typography-code-200-font-family: ui-monospace, Menlo, Consolas, monospace; - --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ - --token-typography-code-200-line-height: 1.125; /** 18px */ --token-typography-code-300-font-family: ui-monospace, Menlo, Consolas, monospace; --token-typography-code-300-font-size: 1rem; /** 16px/1rem */ --token-typography-code-300-line-height: 1.25; /** 20px */ + --token-typography-code-200-font-family: ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.125; /** 18px */ + --token-typography-code-100-font-family: ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-100-font-size: 0.8125rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.23; /** 16px */ } diff --git a/packages/tokens/package.json b/packages/tokens/package.json index 2070fe8a177..6dd56b40492 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -21,7 +21,8 @@ "typecheck": "pnpm tsc --noEmit", "lint": "pnpm eslint --quiet --ext .js,.ts", "extract-carbon-tokens": "tsx ./scripts/extract-carbon-tokens", - "build": "tsx ./scripts/build" + "build": "tsx ./scripts/build", + "postbuild": "cp -R dist/products/css/themed-tokens/with-css-selectors/*.css ../../showcase/public/assets/styles/@hashicorp/themed-tokens/with-css-selectors && cp -R dist/products/css/themed-tokens/with-css-selectors--migration/*.css ../../showcase/public/assets/styles/@hashicorp/themed-tokens/with-css-selectors--migration && cp -R dist/products/css/themed-tokens/with-css-selectors--advanced/*.css ../../showcase/public/assets/styles/@hashicorp/themed-tokens/with-css-selectors--advanced" }, "devDependencies": { "@carbon/colors": "^11.39.0", @@ -36,6 +37,7 @@ "@types/tinycolor2": "^1.4.6", "@typescript-eslint/eslint-plugin": "^8.18.1", "@typescript-eslint/parser": "^8.18.1", + "chalk": "^5.4.1", "eslint": "^8.57.1", "fs-extra": "^11.2.0", "lodash-es": "^4.17.23", diff --git a/packages/tokens/scripts/build-parts/customFormatCssThemedTokens.ts b/packages/tokens/scripts/build-parts/customFormatCssThemedTokens.ts new file mode 100644 index 00000000000..c8cd624adaf --- /dev/null +++ b/packages/tokens/scripts/build-parts/customFormatCssThemedTokens.ts @@ -0,0 +1,189 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import { fileHeader, formattedVariables, getReferences, resolveReferences } from 'style-dictionary/utils'; +import type { DesignToken, TransformedToken, Dictionary, Config, LocalOptions, FormatFn } from 'style-dictionary/types'; + +// since we need to differentiate the internal logic depending on the `target`, we need to use +// a high-order/curried function that takes `target` as argument and return a function of type `FormatFn` +export async function customFormatCssThemedTokensFunctionForTarget(target: string): Promise { + + // get the "do not edit directly" header (to use it later inside the curried function) + const header = await fileHeader({}); + + // this is where we return the "format" function, that depending on the `target` filters the tokens to be written in the "common" file or in the "themed" file + return function ({ dictionary, options }: { dictionary: Dictionary, options: Config & LocalOptions }): string { + + // filter out tokens based on kind of `target` and `$modes` existence + const filteredTokens = dictionary.allTokens.filter(token => { + // if it's private we don't want to output the token at all, not in "common" nor in "themed" + if (token.private) { + return false; + } else { + // we have to consider different conditions to decide if this should be output in "common" or in "themed" + const isThemed = ('$modes' in token); + const hasReferencesAndHasBeenTransformed = checkIfHasReferencesAndHasBeenTransformed(token, dictionary, options.usesDtcg); + const hasPrivateThemedReferences = checkIfHasPrivateThemedReferences(token, dictionary, options.usesDtcg); + const hasPrivateReferencesWithThemedDescendants = checkIfHasPrivateReferencesWithThemedDescendants(token, dictionary, options.usesDtcg); + if (target === 'common') { + return !isThemed && !hasReferencesAndHasBeenTransformed && !hasPrivateThemedReferences && !hasPrivateReferencesWithThemedDescendants; + } else { + return isThemed || (!isThemed && (hasReferencesAndHasBeenTransformed || hasPrivateThemedReferences || hasPrivateReferencesWithThemedDescendants)); + } + } + }); + + // create a shallow copy of the dictionary with the filtered allTokens + const filteredDictionary = { + ...dictionary, + allTokens: filteredTokens + }; + + // use a custom formatter for the CSS variables + // note: initially we tried to piggyback `StyleDictionary.hooks.formats['css/variables']` but then realized that `formattedVariables` is the one that does all the heavy lifting, + // so we went with a custom implementation to avoid hacks trying to use the hooks + const variables = formattedVariables({ + format: 'css', + dictionary: filteredDictionary, + outputReferences: shouldOutputReferences, + formatting: { indentation: ' ' }, + usesDtcg: options.usesDtcg, + }); + + // sort the CSS variables (easier to read and compare) + const sortedVariables = variables.split('\n').sort().join('\n'); + + // return the content (with the header) + return `${header}:root {\n${sortedVariables}\n}`; + } +} + +const shouldOutputReferences = (token: TransformedToken, options: { dictionary: Dictionary, usesDtcg?: boolean }) => { + const { dictionary, usesDtcg } = options; + + const originalValue = usesDtcg ? token.original.$value : token.original.value; + + // get all the token refs (aliases) that are referenced in its `$value` + // e.g. `"$value": "{foo.bar} {baz}"` has two references (`foo.bar` and `baz`) + const refs = getReferences(originalValue, dictionary.tokens, { + // note: we pass `unfilteredTokens` to ensure we find the refs even if they are filtered out + unfilteredTokens: dictionary.unfilteredTokens, + usesDtcg, + warnImmediately: false, + }); + + // check whether any of the refs is private + const hasPrivateReferences = refs.some((ref: DesignToken) => ref.private); + + // check if the token has references and at the same time its value has been transformed along the way + const hasReferencesAndHasBeenTransformed = checkIfHasReferencesAndHasBeenTransformed(token, dictionary, usesDtcg); + + // we output the reference only if none of the conditions above are true + return !hasPrivateReferences && !hasReferencesAndHasBeenTransformed; +} + +// inspired by `outputReferencesTransformed` - https://github.com/style-dictionary/style-dictionary/blob/main/lib/utils/references/outputReferencesTransformed.js +const checkIfHasReferencesAndHasBeenTransformed = (token: TransformedToken, dictionary: Dictionary, usesDtcg?: boolean) => { + + const value = usesDtcg ? token.$value : token.value; + const originalValue = usesDtcg ? token.original.$value : token.original.value; + + const refs = getReferences(originalValue, dictionary.tokens, { + // note: we pass `unfilteredTokens` to ensure we find the refs even if they are filtered out + unfilteredTokens: dictionary.unfilteredTokens, + usesDtcg, + warnImmediately: false, + }); + const hasReferences = refs && refs.length > 0; + + let isTransformed; + + // references can live only in strings (we ignore arrays and objects, for now) + if (typeof originalValue === 'string') { + // Check if the token's value is the same as if we were resolving references on the original value + const transformedValue = resolveReferences(originalValue, dictionary.unfilteredTokens ?? dictionary.tokens, { + usesDtcg, + warnImmediately: false, + }) + // This checks whether the token's value has been transformed e.g. transitive transforms. + // see: https://styledictionary.com/reference/utils/references/#resolvereferences + isTransformed = ( + // this `value` could be the original one (eg. `#FF0000`, no transformations) + // or the transformed one (eg. `#FF0000`→`#FF0000CC` if an `alpha` attribute was applied at token level, + // which triggered the `color/with-alpha` transformation) + value !== transformedValue + ); + } + return hasReferences && isTransformed; +} + +// checks if a token has any private references that are themed (they have `$modes`) +const checkIfHasPrivateThemedReferences = ( + token: DesignToken, + dictionary: Dictionary, + usesDtcg?: boolean +): boolean => { + + const originalValue = usesDtcg ? token.original.$value : token.original.value; + + // get all the token refs (aliases) that are referenced in its `$value` + // e.g. `"$value": "{foo.bar} {baz}"` has two references (`foo.bar` and `baz`) + const refs = getReferences(originalValue, dictionary.tokens, { + // note: we pass `unfilteredTokens` to ensure we find the refs even if they are filtered out + unfilteredTokens: dictionary.unfilteredTokens, + usesDtcg, + warnImmediately: false, + }); + + // check whether any of the refs is private and themed at the same time + const hasPrivateThemedReferences = refs.some((ref: DesignToken) => ref.private && '$modes' in ref); + + return hasPrivateThemedReferences; + +}; + +// checks if a token has any private references that themselves reference themed tokens (they have `$modes`) +const checkIfHasPrivateReferencesWithThemedDescendants = ( + token: DesignToken, + dictionary: Dictionary, + usesDtcg?: boolean +): boolean => { + const visited = new Set(); + + const checkReferences = (currentToken: DesignToken, hasPrivateAncestor = false): boolean => { + const originalValue = usesDtcg ? currentToken.original?.$value : currentToken.original?.value; + + const refs = getReferences(originalValue, dictionary.tokens, { + // note: we pass `unfilteredTokens` to ensure we find the refs even if they are filtered out + unfilteredTokens: dictionary.unfilteredTokens, + usesDtcg, + warnImmediately: false, + }); + + return refs.some((ref: DesignToken) => { + const refKey = ref.path?.join('.') || ref.name; + + // skip if already visited (avoid circular references), otherwise store it + if (visited.has(refKey)) { + return false; + } else { + visited.add(refKey); + } + + // if we're already in a private chain this token is themed... + if (hasPrivateAncestor && '$modes' in ref) { + return true; + } + + // add the current ref to the private reference logical `OR` chain + const isInPrivateChain = ref.private || hasPrivateAncestor; + + // Recursively check descendants, passing along the private chain status + return checkReferences(ref, isInPrivateChain); + }); + }; + + return checkReferences(token); +}; diff --git a/packages/tokens/scripts/build-parts/generateThemingCssFiles.ts b/packages/tokens/scripts/build-parts/generateThemingCssFiles.ts new file mode 100644 index 00000000000..e60d88ceb04 --- /dev/null +++ b/packages/tokens/scripts/build-parts/generateThemingCssFiles.ts @@ -0,0 +1,116 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import fs from 'fs-extra'; +import prettier from 'prettier'; + +import type { Dictionary, PlatformConfig } from 'style-dictionary'; +import { fileHeader } from 'style-dictionary/utils'; + +import { getSourceFromFileWithRootSelector } from './getSourceFromFileWithRootSelector.ts'; + +export async function generateThemingCssFiles(_dictionary: Dictionary, config: PlatformConfig): Promise { + + const commonSource = await getSourceFromFileWithRootSelector(config, 'default', 'common-tokens.css'); + const defaultThemedSource = await getSourceFromFileWithRootSelector(config, 'default', 'themed-tokens.css'); + const cds0ThemedSource = await getSourceFromFileWithRootSelector(config, 'cds-g0', 'themed-tokens.css'); + const cds10ThemedSource = await getSourceFromFileWithRootSelector(config, 'cds-g10', 'themed-tokens.css'); + const cds90ThemedSource = await getSourceFromFileWithRootSelector(config, 'cds-g90', 'themed-tokens.css'); + const cds100ThemedSource = await getSourceFromFileWithRootSelector(config, 'cds-g100', 'themed-tokens.css'); + + const header = await fileHeader({}); + + // for the moment we're covering only the use cases we know of, later we may add more formats if needed + const methods = ['css-selectors', 'css-selectors--migration', 'css-selectors--advanced', 'scss-mixins']; + + for (const method of methods) { + + let outputContent = `${header}\n\n`; + + // CSS file for combined `system/light/dark` themes in the same file (using `.class` selectors) + if (method.startsWith('css-selectors')) { + + // this is the `:root`-only fallback if no theme is applied at all (we use the light/`cds-g0` mode) + if (method === 'css-selectors') { + outputContent += `${cds0ThemedSource}\n\n`; + } + // this is the `default` mode (standard HDS) - used for development (while migrating or in the showcase) but also as `:root`-only fallback fallback if no theme is applied at all + if (method === 'css-selectors--migration' || method === 'css-selectors--advanced') { + outputContent += `${defaultThemedSource.replace(/^:root/, ':root, .hds-theme-default')}\n\n`; + } + + // these are the themed `carbonized` tokens + outputContent += `@media (prefers-color-scheme: light) { ${cds0ThemedSource.replace(/^:root/, '.hds-theme-system')} }\n\n`; + outputContent += `@media (prefers-color-scheme: dark) { ${cds100ThemedSource.replace(/^:root/, '.hds-theme-system')} }\n\n`; + if (method === 'css-selectors' || method === 'css-selectors--migration') { + // note: we use `cds-g0` for `light` and `cds-g100` for `dark` + outputContent += `${cds0ThemedSource.replace(/^:root/, '.hds-theme-light')}\n\n`; + outputContent += `${cds100ThemedSource.replace(/^:root/, '.hds-theme-dark')}\n\n`; + } + if (method === 'css-selectors--advanced') { + // note: we use `cds-g0` for `light` and `cds-g100` for `dark` + outputContent += `${cds0ThemedSource.replace(/^:root/, '.hds-theme-light, .hds-mode-cds-g0')}\n\n`; + outputContent += `${cds100ThemedSource.replace(/^:root/, '.hds-theme-dark, .hds-mode-cds-g100')}\n\n`; + // we write these _after_ the light/dark selectors so they can overwrite the previous declarations (they all have the same specificity) + outputContent += `${cds10ThemedSource.replace(/^:root/, '.hds-mode-cds-g10')}\n\n`; + outputContent += `${cds90ThemedSource.replace(/^:root/, '.hds-mode-cds-g90')}\n\n`; + } + + // this is the common part + outputContent += getCssVariablesStalenessComment(); + if (method === 'css-selectors') { + outputContent += `${commonSource.replace(/^:root/, ':root, .hds-theme-system, .hds-theme-light, .hds-theme-dark')}\n\n`; + } + if (method === 'css-selectors--migration') { + outputContent += `${commonSource.replace(/^:root/, ':root, .hds-theme-default, .hds-theme-system, .hds-theme-light, .hds-theme-dark')}\n\n`; + } + if (method === 'css-selectors--advanced') { + outputContent += `${commonSource.replace(/^:root/, ':root, .hds-theme-default, .hds-theme-system, .hds-theme-light, .hds-theme-dark, .hds-mode-cds-g0, .hds-mode-cds-g10, .hds-mode-cds-g90, .hds-mode-cds-g100')}\n\n`; + } + } + + // SCSS file for mixins + if (method === 'scss-mixins') { + // these are the mixins that can be used to include the "themed" tokens + outputContent += `@mixin hds-theme-default() { ${defaultThemedSource} }\n\n`; + outputContent += `@mixin hds-theme-light() { ${cds0ThemedSource} }\n\n`; + outputContent += `@mixin hds-theme-dark() { ${cds100ThemedSource} }\n\n`; + outputContent += `@mixin hds-mode-cds0() { ${cds0ThemedSource} }\n\n`; + outputContent += `@mixin hds-mode-cds10() { ${cds10ThemedSource} }\n\n`; + outputContent += `@mixin hds-mode-cds90() { ${cds90ThemedSource} }\n\n`; + outputContent += `@mixin hds-mode-cds100() { ${cds100ThemedSource} }\n\n`; + + // this is the mixin that needs to be used to include the common tokens, shared across themes + outputContent += `@mixin hds-theme-common() { ${commonSource} }\n\n`; + } + + const outputTokensCss = await prettier.format(outputContent, { parser: 'scss', tabWidth: 2, }); + + const outputFolder = `${config.buildPath}themed-tokens/with-${method}/`; + await fs.ensureDir(outputFolder); + await fs.writeFile(`${outputFolder}tokens.css`, outputTokensCss); + } +} + +function getCssVariablesStalenessComment(): string { + let comment = ''; + comment += '\n/*\n\n'; + comment += 'WHY ARE ALL "COMPUTED" CSS VARIABLES REDECLARED IN EACH THEME SCOPE?\n'; + comment += '\n'; + comment += 'CSS custom properties (variables) inherit from parent to child, but when a variable is defined\n'; + comment += 'as a calculation or alias of another variable (e.g., `--alias-value: var(--source-value)`, its value is fixed\n'; + comment += 'at the scope where it is declared—using whatever is visible at that level in the DOM (eg. `:root`).\n'; + comment += '\n'; + comment += 'This block of "common/shared" CSS variables contains a lot of these aliases, so if we only declare these\n'; + comment += '"computed" variables at `:root` level, their values do not update in themed blocks that override\n'; + comment += 'the "source" variables (e.g., `--source-value`) at a lower scope.\n'; + comment += 'This results in _stale_ variables, where the computed value is always stuck on the `:root` value,\n'; + comment += 'even inside a themed block where the source variable is assigned.\n'; + comment += '\n'; + comment += 'To make sure every themed block/scoped context (eg. `.hds-theme-light`) correctly computes the aliased values,\n'; + comment += 'we redeclare each "computed" variable in every theme scope where its "source" variable is overridden.\n'; + comment += '\n*/\n\n'; + return comment; +} diff --git a/packages/tokens/scripts/build-parts/generateThemingDocsFiles.ts b/packages/tokens/scripts/build-parts/generateThemingDocsFiles.ts new file mode 100644 index 00000000000..aa21f8f8664 --- /dev/null +++ b/packages/tokens/scripts/build-parts/generateThemingDocsFiles.ts @@ -0,0 +1,40 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import fs from 'fs-extra'; + +import type { Dictionary, PlatformConfig } from 'style-dictionary'; +import type { DesignToken } from 'style-dictionary/types'; + +export async function generateThemingDocsFiles(_dictionary: Dictionary, config: PlatformConfig): Promise { + + const defaultThemedTokens = await getJsonThemedObjectFromFile(config, 'default'); + const cds0ThemedTokens = await getJsonThemedObjectFromFile(config, 'cds-g0'); + const cds10ThemedTokens = await getJsonThemedObjectFromFile(config, 'cds-g10'); + const cds90ThemedTokens = await getJsonThemedObjectFromFile(config, 'cds-g90'); + const cds100ThemedTokens = await getJsonThemedObjectFromFile(config, 'cds-g100'); + + const allThemedTokens = { + 'default': defaultThemedTokens, + 'cds-g0': cds0ThemedTokens, + 'cds-g10': cds10ThemedTokens, + 'cds-g90': cds90ThemedTokens, + 'cds-g100': cds100ThemedTokens, + }; + + const outputFolder = `${config.buildPath}`; + await fs.ensureDir(outputFolder); + await fs.writeFile(`${outputFolder}themed-tokens.json`, JSON.stringify(allThemedTokens, null, 2)); +} + +async function getJsonThemedObjectFromFile(config: PlatformConfig, theme: string): Promise> { + const jsonSource = await fs.readFile(`${config.buildPath}themed-tokens/${theme}.json`, 'utf8'); + const jsonTokensArray = JSON.parse(jsonSource); + const jsonTokensObject = jsonTokensArray.reduce((acc: Record, token: any) => { + acc[token.name] = token; + return acc; + }, {}); + return jsonTokensObject; +} \ No newline at end of file diff --git a/packages/tokens/scripts/build-parts/getSourceFromFileWithRootSelector.ts b/packages/tokens/scripts/build-parts/getSourceFromFileWithRootSelector.ts new file mode 100644 index 00000000000..bb27862666a --- /dev/null +++ b/packages/tokens/scripts/build-parts/getSourceFromFileWithRootSelector.ts @@ -0,0 +1,15 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import fs from 'fs-extra'; + +import type { PlatformConfig } from 'style-dictionary'; +import { fileHeader } from 'style-dictionary/utils'; + +export async function getSourceFromFileWithRootSelector(config: PlatformConfig, theme: string, path: string): Promise { + const rawSource = await fs.readFile(`${config.buildPath}themed-tokens/with-root-selector/${theme}/${path}`, 'utf8'); + const header = await fileHeader({}); + return rawSource.replace(header, ''); +} \ No newline at end of file diff --git a/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts index 93f1befca1d..22ba365ed2c 100644 --- a/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts +++ b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts @@ -6,67 +6,131 @@ import type { Config, DesignToken } from 'style-dictionary/types'; export const targets = ['products', 'devdot', 'marketing', 'cloud-email'] as const; +export const modes = ['default', 'cds-g0', 'cds-g10', 'cds-g90', 'cds-g100'] as const; export type Target = typeof targets[number]; +export type Mode = typeof modes[number]; // comment/uncomment this to disable/enable debugging const baseConfig: Config = { - // log: { - // warnings: 'warn', // options: warn | error | disabled - // verbosity: 'verbose', // options: default | silent | verbose - // errors: { - // brokenReferences: 'console', // options: throw | console - // }, - // } + log: { + warnings: 'warn', // options: warn | error | disabled + verbosity: 'verbose', // options: default | silent | verbose + errors: { + brokenReferences: 'console', // options: throw | console + }, + } }; const excludePrivateTokens = (token: DesignToken) => { return !token.private; } -export function getStyleDictionaryConfig({ target }: { target: Target }): Config { +export function getStyleDictionaryConfig({ target, mode }: { target: Target, mode?: Mode }): Config { // ----------------------- // PRODUCTS // ----------------------- if (target === 'products') { - return { - ...baseConfig, - source: [ - `src/global/**/*.json`, - `src/products/shared/**/*.json` - ], - platforms: { - 'web/css-variables': { - buildPath: 'dist/products/css/', - transformGroup: 'products/web', - prefix: 'token', - basePxFontSize: 16, - files: [ - { - destination: 'tokens.css', - format: 'css/variables', - filter: excludePrivateTokens, - } - ], - actions: ['generate-css-helpers'], - }, - 'docs/json': { - buildPath: 'dist/docs/products/', - transformGroup: 'products/web', - prefix: 'token', - basePxFontSize: 16, - files: [ - { - destination: 'tokens.json', - format: 'docs/json', - filter: excludePrivateTokens, - } - ] + + if (mode) { + + // ⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃ + // THEMED TOKENS + // ⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃ + + return { + ...baseConfig, + source: [ + `src/carbon-extracted/**/*.json`, + `src/global/**/*.json`, + `src/products/shared/**/*.json` + ], + platforms: { + [`web/themed-css-variables--mode-${mode}`]: { + buildPath: 'dist/products/css/', + transformGroup: 'products/web/themed', + prefix: 'token', + basePxFontSize: 16, + files: [ + { + destination: `themed-tokens/with-root-selector/${mode}/common-tokens.css`, + // IMPORTANT: filtering, formatting, outputReferences, etc. are done directly in the custom format function + format: 'css/themed-tokens/with-root-selector/common', + }, + { + destination: `themed-tokens/with-root-selector/${mode}/themed-tokens.css`, + // IMPORTANT: filtering, formatting, outputReferences, etc. are done directly in the custom format function + format: 'css/themed-tokens/with-root-selector/themed', + } + ], + // this has been registered in the `build` file + preprocessors: [`replace-value-for-mode-${mode}`], + }, + [`docs/themed-json--mode-${mode}`]: { + buildPath: 'dist/docs/products/', + transformGroup: 'products/web', + prefix: 'token', + basePxFontSize: 16, + files: [ + { + destination: `themed-tokens/${mode}.json`, + format: 'docs/json', + filter: excludePrivateTokens, + } + ], + // this has been registered in the `build` file + preprocessors: [`replace-value-for-mode-${mode}`], + } } - } - }; + }; + + } else { + + // ⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃ + // STANDARD TOKENS + // ⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃ + + return { + ...baseConfig, + source: [ + `src/carbon-extracted/**/*.json`, + `src/global/**/*.json`, + `src/products/shared/**/*.json` + ], + platforms: { + 'web/css-variables': { + buildPath: 'dist/products/css/', + transformGroup: 'products/web', + prefix: 'token', + basePxFontSize: 16, + files: [ + { + destination: 'tokens.css', + format: 'css/variables', + filter: excludePrivateTokens, + } + ], + actions: ['generate-css-helpers', 'validate-theming-css-files', 'generate-theming-css-files'], + }, + 'docs/json': { + buildPath: 'dist/docs/products/', + transformGroup: 'products/web', + prefix: 'token', + basePxFontSize: 16, + files: [ + { + destination: 'tokens.json', + format: 'docs/json', + filter: excludePrivateTokens, + } + ], + actions: ['generate-theming-docs-files'], + } + } + }; + } } // ----------------------- @@ -77,6 +141,7 @@ export function getStyleDictionaryConfig({ target }: { target: Target }): Config return { ...baseConfig, 'source': [ + `src/carbon-extracted/**/*.json`, `src/global/**/*.json`, `src/products/shared/**/*.json`, // custom overrides for 'devdot' tokens @@ -109,6 +174,7 @@ export function getStyleDictionaryConfig({ target }: { target: Target }): Config return { ...baseConfig, 'source': [ + `src/carbon-extracted/**/*.json`, `src/global/**/*.json`, `src/products/shared/**/*.json`, ], @@ -154,6 +220,7 @@ export function getStyleDictionaryConfig({ target }: { target: Target }): Config ...baseConfig, // we need only foundational tokens (colors, typography, etc) 'source': [ + `src/carbon-extracted/**/*.json`, `src/global/**/*.json`, `src/products/shared/color/**/*.json`, `src/products/shared/typography.json`, diff --git a/packages/tokens/scripts/build-parts/validateThemingCssFiles.ts b/packages/tokens/scripts/build-parts/validateThemingCssFiles.ts new file mode 100644 index 00000000000..17c93a3362b --- /dev/null +++ b/packages/tokens/scripts/build-parts/validateThemingCssFiles.ts @@ -0,0 +1,70 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import chalk from 'chalk'; + +import type { Dictionary, PlatformConfig } from 'style-dictionary'; + +import { getSourceFromFileWithRootSelector } from './getSourceFromFileWithRootSelector.ts'; +import type { Mode } from './getStyleDictionaryConfig.ts'; +import { modes } from './getStyleDictionaryConfig.ts'; + +export async function validateThemingCssFiles(_dictionary: Dictionary, config: PlatformConfig): Promise { + + // store all the sources in memory + const allSources = {} as Record>; + for (const mode of modes) { + const commonSource = await getSourceFromFileWithRootSelector(config, mode, 'common-tokens.css'); + const themedSource = await getSourceFromFileWithRootSelector(config, mode, 'themed-tokens.css'); + allSources[mode] = { commonSource, themedSource } + } + + // first validation: make sure that all the common files have actually the same content + const comparisonModes = modes.filter(mode => mode !== 'default'); + comparisonModes.forEach((comparisonMode: Mode) => { + if (allSources[comparisonMode].commonSource !== allSources.default.commonSource) { + // we want to interrupt the execution of the script if one of the generated "common" files is different from the others + // note: comment this out if you need to debug why they differ, so the files are saved with the different content + throw new Error(`❌ ${chalk.red.bold('ERROR')} - Generated "common" tokens for mode '${comparisonMode}' differ from the ones generated for the 'default' mode (expected to be identical)`); + } + }); + + // second validation: make sure there are no orphan CSS variables when "common" and "themed" files are used together + for (const mode of modes) { + const { partialDefinitions: commonDefinitions, partialUsages: commonUsages } = extractAllCssVariables(allSources[mode].commonSource); + const { partialDefinitions: themedDefinitions, partialUsages: themedUsages } = extractAllCssVariables(allSources[mode].themedSource); + const allDefinitions = new Set([...commonDefinitions, ...themedDefinitions]); + const allUsages = new Set([...commonUsages, ...themedUsages]); + const undefinedVariables = [...allUsages].filter(usage => !allDefinitions.has(usage)); + if (undefinedVariables.length > 0) { + throw new Error(`❌ ${chalk.red.bold('ERROR')} - Generated "common/themed" token files for mode '${mode}' contain CSS variables that are not defined in any of the generated files: ${undefinedVariables.map((variable: string) => `\`--token-${variable}\``).join(', ')}`); + } + } +} + +// regex for variable definition (`--token-***: ***`) and usage: (`var(--token-***)`) +const varDefRegex = /--token-([a-zA-Z0-9-_]+)\s*:/g; +const varUsageRegex = /var\(\s*--token-([a-zA-Z0-9-_]+)\s*\)/g; + +function extractAllCssVariables(source: string) { + const cleanSource = stripCssComments(source); + const partialDefinitions = []; + const partialUsages = []; + + // find all definitions and usages in this file + let match; + while ((match = varDefRegex.exec(cleanSource))) { + partialDefinitions.push(match[1]); + } + while ((match = varUsageRegex.exec(cleanSource))) { + partialUsages.push(match[1]); + } + + return { partialDefinitions, partialUsages }; +} + +function stripCssComments(source: string) { + return source.replace(/\/\*[\s\S]*?\*\//g, ''); +} diff --git a/packages/tokens/scripts/build.ts b/packages/tokens/scripts/build.ts index 5dddefe5665..288f855a987 100644 --- a/packages/tokens/scripts/build.ts +++ b/packages/tokens/scripts/build.ts @@ -7,15 +7,20 @@ import StyleDictionary from 'style-dictionary'; import type { DesignToken, PlatformConfig } from 'style-dictionary/types'; import tinycolor from 'tinycolor2'; +import chalk from 'chalk'; import fs from 'fs-extra'; import path from 'path'; import { fileURLToPath } from 'url'; import { dirname } from 'path'; -import { targets, getStyleDictionaryConfig } from './build-parts/getStyleDictionaryConfig.ts'; +import { targets, modes, getStyleDictionaryConfig } from './build-parts/getStyleDictionaryConfig.ts'; +import { customFormatCssThemedTokensFunctionForTarget } from './build-parts/customFormatCssThemedTokens.ts'; import { customFormatDocsJsonFunction } from './build-parts/customFormatDocsJson.ts'; import { generateCssHelpers } from './build-parts/generateCssHelpers.ts'; +import { validateThemingCssFiles } from './build-parts/validateThemingCssFiles.ts'; +import { generateThemingCssFiles } from './build-parts/generateThemingCssFiles.ts'; +import { generateThemingDocsFiles } from './build-parts/generateThemingDocsFiles.ts'; // SCRIPT CONFIG @@ -23,6 +28,61 @@ const __filename = fileURLToPath(import.meta.url); // Get the file path of the c const __dirname = dirname(__filename); // Get the directory name of the current module const distFolder = path.resolve(__dirname, '../dist'); + +// ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• +// ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• + + +// CUSTOM PREPROCESSORS + +for (const mode of modes) { + StyleDictionary.registerPreprocessor({ + name: `replace-value-for-mode-${mode}`, + preprocessor: (dictionary, options) => { + // we get the `buildPath` from the `PlatformConfig` option + const buildPath = (options as any).buildPath; + // recursively traverse token objects and replace the `$value` with the corresponding colocated `$modes` theme value + // note: the `slice` is always an object (a token or a parent group) + function replaceModes(slice: DesignToken, tokenPath: string[]) { + if (slice.$modes) { + if (mode in slice.$modes) { + // extra validation to catch instances where the `default` mode value is different from the `$value` + if (mode === 'default' && slice.$modes[mode] !== slice.$value) { + console.warn(`⚠️ ${chalk.yellow.bold('WARNING')} - Found themed 'default' token '{${tokenPath.join('.')}}' with value different than '$value' (\`${slice.$modes[mode]}\` instead of the expected \`${slice.$value}\`) - BuildPath: ${buildPath} - File: ${slice.filePath}`); + } + // if the $mode entry value is an object, loop over its entries and override their counterparts in the the main token object + if (typeof slice.$modes[mode] === 'object') { + Object.keys(slice.$modes[mode]).forEach((key: string) => { + // we use a `null` value when need to "remove" entries from the main token object instead of just overriding them (eg. for comments) + if (slice.$modes[mode][key] === null) { + delete slice[key]; + } else { + slice[key] = slice.$modes[mode][key]; + } + }); + } else { + // otherwise, just replace the `$value` with the `$modes` value + slice.$value = slice.$modes[mode]; + } + } else { + // we want to interrupt the execution of the script if one of the expected modes is missing + throw new Error(`❌ ${chalk.red.bold('ERROR')} - Found themed token '{${tokenPath.join('.')}}' without '${mode}' value - BuildPath: ${buildPath} - File: ${slice.filePath} - Path: ${tokenPath.join('.')} - ${JSON.stringify(slice, null, 2)}`); + } + } else { + Object.entries(slice).forEach(([key, value]) => { + if (typeof value === 'object') { + replaceModes(value, [...tokenPath, key]); + } + }); + } + return slice; + } + return replaceModes(dictionary, []); + }, + }); +} + + // CUSTOM TRANSFORMS StyleDictionary.registerTransform({ @@ -187,6 +247,11 @@ StyleDictionary.registerTransformGroup({ transforms: ['attributes/category', 'name/kebab', 'typography/font-family', 'typography/font-size/to-rem', 'typography/letter-spacing', 'dimension/unit', 'color/css', 'color/with-alpha', 'time/duration', 'cubicBezier/css'] }); +StyleDictionary.registerTransformGroup({ + name: 'products/web/themed', + transforms: ['attributes/category', 'name/kebab', 'typography/font-family', 'typography/font-size/to-rem', 'typography/letter-spacing', 'dimension/unit', 'color/css', 'color/with-alpha', 'time/duration', 'cubicBezier/css'] +}); + StyleDictionary.registerTransformGroup({ name: 'products/email', // notice: for emails we need the font-size in `px` (not `rem`) @@ -198,6 +263,18 @@ StyleDictionary.registerTransformGroup({ transforms: ['attributes/category', 'name/kebab', 'typography/font-family', 'typography/font-size/to-rem', 'typography/letter-spacing', 'dimension/unit', 'color/css', 'color/with-alpha', 'time/duration', 'cubicBezier/css'] }); + +// CUSTOM FORMATS + +for (const target of ['common', 'themed']) { + // note: customFormatCssThemedTokensFunction is a higher-order function, that takes `target` as argument and returns a "format" function + const customFormatCssThemedTokensFunction = await customFormatCssThemedTokensFunctionForTarget(target); + StyleDictionary.registerFormat({ + name: `css/themed-tokens/with-root-selector/${target}`, + format: customFormatCssThemedTokensFunction, + }); +} + StyleDictionary.registerFormat({ name: 'docs/json', format: customFormatDocsJsonFunction, @@ -212,6 +289,28 @@ StyleDictionary.registerAction({ undo: () => {} }); +StyleDictionary.registerAction({ + name: 'generate-theming-css-files', + do: generateThemingCssFiles, + undo: () => {} +}); + +StyleDictionary.registerAction({ + name: 'validate-theming-css-files', + do: validateThemingCssFiles, + undo: () => {} +}); + +StyleDictionary.registerAction({ + name: 'generate-theming-docs-files', + do: generateThemingDocsFiles, + undo: () => {} +}); + + +// ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• +// ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• + // PROCESS THE DESIGN TOKENS @@ -222,6 +321,16 @@ console.log('\n=============================================='); console.log(`\nCleaning up dist folder`); fs.emptyDirSync(distFolder); +// generate themed tokens +for (const mode of modes) { + const StyleDictionaryInstance = new StyleDictionary(getStyleDictionaryConfig({ target: 'products', mode })); + console.log(`\n---\n\nProcessing mode "${mode}"...`); + await StyleDictionaryInstance.hasInitialized; + await StyleDictionaryInstance.buildAllPlatforms() + console.log('\nEnd processing'); +} + +// generate standard tokens for (const target of targets) { const StyleDictionaryInstance = new StyleDictionary(getStyleDictionaryConfig({ target })); console.log(`\n---\n\nProcessing target "${target}"...`); diff --git a/packages/tokens/src/global/border/radius.json b/packages/tokens/src/global/border/radius.json index 791602ff2c7..3ae7cc79c40 100644 --- a/packages/tokens/src/global/border/radius.json +++ b/packages/tokens/src/global/border/radius.json @@ -4,21 +4,54 @@ "x-small": { "$type": "dimension", "$value": "3", - "unit": "px" + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + } }, "small": { "$type": "dimension", "$value": "5", - "unit": "px" + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + } }, "medium": { "$type": "dimension", "$value": "6", - "unit": "px" + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + } }, "large": { "$type": "dimension", "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + } + }, + "rounded": { + "$type": "dimension", + "$value": "1000000000", "unit": "px" } } diff --git a/packages/tokens/src/global/color/palette-accents.json b/packages/tokens/src/global/color/palette-accents.json index 8b27714723a..7a30d35d61d 100644 --- a/packages/tokens/src/global/color/palette-accents.json +++ b/packages/tokens/src/global/color/palette-accents.json @@ -4,152 +4,362 @@ "blue-500": { "$type": "color", "$value": "#1c345f", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#1c345f", + "cds-g0": "{carbon.color.blue.100}", + "cds-g10": "{carbon.color.blue.100}", + "cds-g90": "{carbon.color.blue.100}", + "cds-g100": "{carbon.color.blue.100}" + } }, "blue-400": { "$type": "color", "$value": "#0046d1", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#0046d1", + "cds-g0": "{carbon.color.blue.80}", + "cds-g10": "{carbon.color.blue.80}", + "cds-g90": "{carbon.color.blue.80}", + "cds-g100": "{carbon.color.blue.80}" + } }, "blue-300": { "$type": "color", "$value": "#0c56e9", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#0c56e9", + "cds-g0": "{carbon.color.blue.70}", + "cds-g10": "{carbon.color.blue.70}", + "cds-g90": "{carbon.color.blue.70}", + "cds-g100": "{carbon.color.blue.70}" + } }, "blue-200": { "$type": "color", "$value": "#1060ff", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#1060ff", + "cds-g0": "{carbon.color.blue.60}", + "cds-g10": "{carbon.color.blue.60}", + "cds-g90": "{carbon.color.blue.60}", + "cds-g100": "{carbon.color.blue.60}" + } }, "blue-100": { "$type": "color", "$value": "#cce3fe", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#cce3fe", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.20}", + "cds-g100": "{carbon.color.blue.20}" + } }, "blue-50": { "$type": "color", "$value": "#f2f8ff", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#f2f8ff", + "cds-g0": "{carbon.color.blue.10}", + "cds-g10": "{carbon.color.blue.10}", + "cds-g90": "{carbon.color.blue.10}", + "cds-g100": "{carbon.color.blue.10}" + } }, "purple-500": { "$type": "color", "$value": "#42215b", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#42215b", + "cds-g0": "{carbon.color.purple.90}", + "cds-g10": "{carbon.color.purple.90}", + "cds-g90": "{carbon.color.purple.90}", + "cds-g100": "{carbon.color.purple.90}" + } }, "purple-400": { "$type": "color", "$value": "#7b00db", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#7b00db", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + } }, "purple-300": { "$type": "color", "$value": "#911ced", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#911ced", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.60}", + "cds-g100": "{carbon.color.purple.60}" + } }, "purple-200": { "$type": "color", "$value": "#a737ff", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#a737ff", + "cds-g0": "{carbon.color.purple.50}", + "cds-g10": "{carbon.color.purple.50}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + } }, "purple-100": { "$type": "color", "$value": "#ead2fe", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#ead2fe", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.20}" + } }, "purple-50": { "$type": "color", "$value": "#f9f2ff", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#f9f2ff", + "cds-g0": "{carbon.color.purple.10}", + "cds-g10": "{carbon.color.purple.10}", + "cds-g90": "{carbon.color.purple.10}", + "cds-g100": "{carbon.color.purple.10}" + } }, "green-500": { "$type": "color", "$value": "#054220", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#054220", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.80}", + "cds-g100": "{carbon.color.green.80}" + } }, "green-400": { "$type": "color", "$value": "#006619", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#006619", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + } }, "green-300": { "$type": "color", "$value": "#00781e", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#00781e", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.60}", + "cds-g100": "{carbon.color.green.60}" + } }, "green-200": { "$type": "color", "$value": "#008a22", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#008a22", + "cds-g0": "{carbon.color.green.50}", + "cds-g10": "{carbon.color.green.50}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + } }, "green-100": { "$type": "color", "$value": "#cceeda", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#cceeda", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + } }, "green-50": { "$type": "color", "$value": "#f2fbf6", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#f2fbf6", + "cds-g0": "{carbon.color.green.10}", + "cds-g10": "{carbon.color.green.10}", + "cds-g90": "{carbon.color.green.10}", + "cds-g100": "{carbon.color.green.10}" + } }, "amber-500": { "$type": "color", "$value": "#542800", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#542800", + "cds-g0": "{carbon.color.orange.90}", + "cds-g10": "{carbon.color.orange.90}", + "cds-g90": "{carbon.color.orange.90}", + "cds-g100": "{carbon.color.orange.90}" + } }, "amber-400": { "$type": "color", "$value": "#803d00", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#803d00", + "cds-g0": "{carbon.color.orange.80}", + "cds-g10": "{carbon.color.orange.80}", + "cds-g90": "{carbon.color.orange.80}", + "cds-g100": "{carbon.color.orange.80}" + } }, "amber-300": { "$type": "color", "$value": "#9e4b00", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#9e4b00", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + } }, "amber-200": { "$type": "color", "$value": "#bb5a00", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#bb5a00", + "cds-g0": "{carbon.color.orange.60}", + "cds-g10": "{carbon.color.orange.60}", + "cds-g90": "{carbon.color.orange.60}", + "cds-g100": "{carbon.color.orange.60}" + } }, "amber-100": { "$type": "color", "$value": "#fbeabf", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#fbeabf", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + } }, "amber-50": { "$type": "color", "$value": "#fff9e8", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#fff9e8", + "cds-g0": "{carbon.color.orange.10}", + "cds-g10": "{carbon.color.orange.10}", + "cds-g90": "{carbon.color.orange.10}", + "cds-g100": "{carbon.color.orange.10}" + } }, "red-500": { "$type": "color", "$value": "#51130a", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#51130a", + "cds-g0": "{carbon.color.red.90}", + "cds-g10": "{carbon.color.red.90}", + "cds-g90": "{carbon.color.red.90}", + "cds-g100": "{carbon.color.red.90}" + } }, "red-400": { "$type": "color", "$value": "#940004", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#940004", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.80}", + "cds-g100": "{carbon.color.red.80}" + } }, "red-300": { "$type": "color", "$value": "#c00005", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#c00005", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + } }, "red-200": { "$type": "color", "$value": "#e52228", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#e52228", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.60}", + "cds-g100": "{carbon.color.red.60}" + } }, "red-100": { "$type": "color", "$value": "#fbd4d4", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#fbd4d4", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + } }, "red-50": { "$type": "color", "$value": "#fff5f5", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#fff5f5", + "cds-g0": "{carbon.color.red.10}", + "cds-g10": "{carbon.color.red.10}", + "cds-g90": "{carbon.color.red.10}", + "cds-g100": "{carbon.color.red.10}" + } } } } diff --git a/packages/tokens/src/global/color/palette-neutrals.json b/packages/tokens/src/global/color/palette-neutrals.json index e064e7503d2..4680bcc9282 100644 --- a/packages/tokens/src/global/color/palette-neutrals.json +++ b/packages/tokens/src/global/color/palette-neutrals.json @@ -4,65 +4,185 @@ "neutral-700": { "$type": "color", "$value": "#0c0c0e", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "{carbon.color.gray.100}", + "cds-g10": "{carbon.color.gray.100}", + "cds-g90": "{carbon.color.gray.100}", + "cds-g100": "{carbon.color.gray.100}" + } }, "neutral-600": { "$type": "color", "$value": "#3b3d45", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#3b3d45", + "cds-g0": "{carbon.color.gray.80}", + "cds-g10": "{carbon.color.gray.80}", + "cds-g90": "{carbon.color.gray.80}", + "cds-g100": "{carbon.color.gray.80}" + } }, "neutral-500": { "$type": "color", "$value": "#656a76", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#656a76", + "cds-g0": "{carbon.color.gray.70}", + "cds-g10": "{carbon.color.gray.70}", + "cds-g90": "{carbon.color.gray.70}", + "cds-g100": "{carbon.color.gray.70}" + } }, "neutral-400": { "$type": "color", "$value": "#8c909c", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#8c909c", + "cds-g0": "{carbon.color.gray.50}", + "cds-g10": "{carbon.color.gray.50}", + "cds-g90": "{carbon.color.gray.50}", + "cds-g100": "{carbon.color.gray.50}" + } }, "neutral-300": { "$type": "color", "$value": "#c2c5cb", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#c2c5cb", + "cds-g0": "{carbon.color.gray.40}", + "cds-g10": "{carbon.color.gray.40}", + "cds-g90": "{carbon.color.gray.40}", + "cds-g100": "{carbon.color.gray.40}" + } }, "neutral-200": { "$type": "color", "$value": "#dedfe3", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#dedfe3", + "cds-g0": "{carbon.color.gray.30}", + "cds-g10": "{carbon.color.gray.30}", + "cds-g90": "{carbon.color.gray.30}", + "cds-g100": "{carbon.color.gray.30}" + } }, "neutral-100": { "$type": "color", "$value": "#f1f2f3", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "{carbon.color.gray.20}", + "cds-g10": "{carbon.color.gray.20}", + "cds-g90": "{carbon.color.gray.20}", + "cds-g100": "{carbon.color.gray.20}" + } }, "neutral-50": { "$type": "color", "$value": "#fafafa", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#fafafa", + "cds-g0": "{carbon.color.gray.10}", + "cds-g10": "{carbon.color.gray.10}", + "cds-g90": "{carbon.color.gray.10}", + "cds-g100": "{carbon.color.gray.10}" + } }, "neutral-0": { "$type": "color", "$value": "#ffffff", - "group": "palette" + "group": "palette", + "$modes": { + "default": "#ffffff", + "cds-g0": "{carbon.color.white.0}", + "cds-g10": "{carbon.color.white.0}", + "cds-g90": "{carbon.color.white.0}", + "cds-g100": "{carbon.color.white.0}" + } }, "alpha-300": { "$type": "color", "$value": "{color.palette.neutral-600}", "alpha": "0.4", - "group": "palette" + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-600}", + "cds-g0": { + "$value": "{carbon.color.gray.50}", + "alpha": null + }, + "cds-g10": { + "$value": "{carbon.color.gray.50}", + "alpha": null + }, + "cds-g90": { + "$value": "{carbon.color.gray.50}", + "alpha": null + }, + "cds-g100": { + "$value": "{carbon.color.gray.60}", + "alpha": null + } + } }, "alpha-200": { "$type": "color", "$value": "{color.palette.neutral-500}", "alpha": "0.2", - "group": "palette" + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": { + "$value": "{carbon.color.gray.30}", + "alpha": null + }, + "cds-g10": { + "$value": "{carbon.color.gray.20}", + "alpha": null + }, + "cds-g90": { + "$value": "{carbon.color.gray.60}", + "alpha": null + }, + "cds-g100": { + "$value": "{carbon.color.gray.70}", + "alpha": null + } + } }, "alpha-100": { "$type": "color", "$value": "{color.palette.neutral-500}", "alpha": "0.1", - "group": "palette" + "group": "palette", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": { + "$value": "{carbon.color.gray.20}", + "alpha": null + }, + "cds-g10": { + "$value": "{carbon.color.gray.30}", + "alpha": null + }, + "cds-g90": { + "$value": "{carbon.color.gray.70}", + "alpha": null + }, + "cds-g100": { + "$value": "{carbon.color.gray.80}", + "alpha": null + } + } } } } diff --git a/packages/tokens/src/global/color/palette-products.json b/packages/tokens/src/global/color/palette-products.json index c86e292d040..baf980055e4 100644 --- a/packages/tokens/src/global/color/palette-products.json +++ b/packages/tokens/src/global/color/palette-products.json @@ -5,7 +5,14 @@ "$type": "color", "$value": "#000000", "group": "palette", - "private": "true" + "private": "true", + "$modes": { + "default": "#000000", + "cds-g0": "#000000", + "cds-g10": "#000000", + "cds-g90": "#FFFFFF", + "cds-g100": "#FFFFFF" + } }, "boundary-brand": { "$type": "color", @@ -107,7 +114,14 @@ "$type": "color", "$value": "#000000", "group": "palette", - "private": "true" + "private": "true", + "$modes": { + "default": "#000000", + "cds-g0": "#000000", + "cds-g10": "#000000", + "cds-g90": "#FFFFFF", + "cds-g100": "#FFFFFF" + } }, "nomad-brand": { "$type": "color", diff --git a/packages/tokens/src/global/color/semantic-border.json b/packages/tokens/src/global/color/semantic-border.json index a5f10222f1c..7f68593ce56 100644 --- a/packages/tokens/src/global/color/semantic-border.json +++ b/packages/tokens/src/global/color/semantic-border.json @@ -4,42 +4,98 @@ "primary": { "$type": "color", "$value": "{color.palette.alpha-200}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-200}", + "cds-g0": "{carbon.themes.white.borderSubtle03}", + "cds-g10": "{carbon.themes.g10.borderSubtle03}", + "cds-g90": "{carbon.themes.g90.borderSubtle03}", + "cds-g100": "{carbon.themes.g100.borderSubtle03}" + } }, "faint": { "$type": "color", "$value": "{color.palette.alpha-100}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-100}", + "cds-g0": "{carbon.themes.white.borderSubtle00}", + "cds-g10": "{carbon.themes.g10.borderSubtle00}", + "cds-g90": "{carbon.themes.g90.borderSubtle00}", + "cds-g100": "{carbon.themes.g100.borderSubtle00}" + } }, "strong": { "$type": "color", "$value": "{color.palette.alpha-300}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.alpha-300}", + "cds-g0": "{carbon.themes.white.borderStrong01}", + "cds-g10": "{carbon.themes.g10.borderStrong01}", + "cds-g90": "{carbon.themes.g90.borderStrong01}", + "cds-g100": "{carbon.themes.g100.borderStrong01}" + } }, "action": { "$type": "color", "$value": "{color.palette.blue-100}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-100}", + "cds-g0": "{carbon.themes.white.borderInteractive}", + "cds-g10": "{carbon.themes.g10.borderInteractive}", + "cds-g90": "{carbon.themes.g90.borderInteractive}", + "cds-g100": "{carbon.themes.g100.borderInteractive}" + } }, "highlight": { "$type": "color", "$value": "{color.palette.purple-100}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-100}", + "cds-g0": "{carbon.color.purple.40}", + "cds-g10": "{carbon.color.purple.40}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + } }, "success": { "$type": "color", "$value": "{color.palette.green-100}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.green-100}", + "cds-g0": "{carbon.color.green.40}", + "cds-g10": "{carbon.color.green.40}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + } }, "warning": { "$type": "color", "$value": "{color.palette.amber-100}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.yellow.40}", + "cds-g10": "{carbon.color.yellow.40}", + "cds-g90": "{carbon.color.yellow.50}", + "cds-g100": "{carbon.color.yellow.50}" + } }, "critical": { "$type": "color", "$value": "{color.palette.red-100}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.red-100}", + "cds-g0": "{carbon.color.red.40}", + "cds-g10": "{carbon.color.red.40}", + "cds-g90": "{carbon.color.red.50}", + "cds-g100": "{carbon.color.red.50}" + } } } } diff --git a/packages/tokens/src/global/color/semantic-focus.json b/packages/tokens/src/global/color/semantic-focus.json index 8e6da27e069..31d54afc43f 100644 --- a/packages/tokens/src/global/color/semantic-focus.json +++ b/packages/tokens/src/global/color/semantic-focus.json @@ -5,26 +5,54 @@ "internal": { "$type": "color", "$value": "{color.palette.blue-300}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + } }, "external": { "$type": "color", "$value": "#5990ff", "group": "semantic", - "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose" + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + } } }, "critical": { "internal": { "$type": "color", "$value": "{color.palette.red-300}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + } }, "external": { "$type": "color", "$value": "#dd7578", "group": "semantic", - "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose" + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "default": "#dd7578", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + } } } } diff --git a/packages/tokens/src/global/color/semantic-foreground.json b/packages/tokens/src/global/color/semantic-foreground.json index 43de0eb66fe..7930b9ee231 100644 --- a/packages/tokens/src/global/color/semantic-foreground.json +++ b/packages/tokens/src/global/color/semantic-foreground.json @@ -4,102 +4,242 @@ "strong": { "$type": "color", "$value": "{color.palette.neutral-700}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + } }, "primary": { "$type": "color", "$value": "{color.palette.neutral-600}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-600}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + } }, "faint": { "$type": "color", "$value": "{color.palette.neutral-500}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + } }, "high-contrast": { "$type": "color", "$value": "{color.palette.neutral-0}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + } }, "disabled": { "$type": "color", "$value": "{color.palette.neutral-400}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textDisabled}", + "cds-g10": "{carbon.themes.g10.textDisabled}", + "cds-g90": "{carbon.themes.g90.textDisabled}", + "cds-g100": "{carbon.themes.g100.textDisabled}" + } }, "action": { "$type": "color", "$value": "{color.palette.blue-200}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.white.linkPrimary}", + "cds-g10": "{carbon.themes.g10.linkPrimary}", + "cds-g90": "{carbon.themes.g90.linkPrimary}", + "cds-g100": "{carbon.themes.g100.linkPrimary}" + } }, "action-hover": { "$type": "color", "$value": "{color.palette.blue-300}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + } }, "action-active": { "$type": "color", "$value": "{color.palette.blue-400}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + } }, "highlight": { "$type": "color", "$value": "{color.palette.purple-200}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + } }, "highlight-on-surface": { "$type": "color", "$value": "{color.palette.purple-300}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-300}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.30}", + "cds-g100": "{carbon.color.purple.30}" + } }, "highlight-high-contrast": { "$type": "color", "$value": "{color.palette.purple-500}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-500}", + "cds-g0": "{carbon.color.purple.80}", + "cds-g10": "{carbon.color.purple.80}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.30}" + } }, "success": { "$type": "color", "$value": "{color.palette.green-200}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.green-200}", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.40}", + "cds-g100": "{carbon.color.green.40}" + } }, "success-on-surface": { "$type": "color", "$value": "{color.palette.green-300}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.green-300}", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.30}", + "cds-g100": "{carbon.color.green.30}" + } }, "success-high-contrast": { "$type": "color", "$value": "{color.palette.green-500}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.green-500}", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + } }, "warning": { "$type": "color", "$value": "{color.palette.amber-200}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.yellow.60}", + "cds-g10": "{carbon.color.yellow.60}", + "cds-g90": "{carbon.color.yellow.40}", + "cds-g100": "{carbon.color.yellow.40}" + } }, "warning-on-surface": { "$type": "color", "$value": "{color.palette.amber-300}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-300}", + "cds-g0": "{carbon.color.yellow.70}", + "cds-g10": "{carbon.color.yellow.70}", + "cds-g90": "{carbon.color.yellow.30}", + "cds-g100": "{carbon.color.yellow.30}" + } }, "warning-high-contrast": { "$type": "color", "$value": "{color.palette.amber-500}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-500}", + "cds-g0": "{carbon.color.yellow.80}", + "cds-g10": "{carbon.color.yellow.80}", + "cds-g90": "{carbon.color.yellow.20}", + "cds-g100": "{carbon.color.yellow.20}" + } }, "critical": { "$type": "color", "$value": "{color.palette.red-200}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.red-200}", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.40}", + "cds-g100": "{carbon.color.red.40}" + } }, "critical-on-surface": { "$type": "color", "$value": "{color.palette.red-300}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.30}", + "cds-g100": "{carbon.color.red.30}" + } }, "critical-high-contrast": { "$type": "color", "$value": "{color.palette.red-500}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.red-500}", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + } } } } diff --git a/packages/tokens/src/global/color/semantic-page.json b/packages/tokens/src/global/color/semantic-page.json index 5e356eacec2..6a119a37b83 100644 --- a/packages/tokens/src/global/color/semantic-page.json +++ b/packages/tokens/src/global/color/semantic-page.json @@ -4,12 +4,26 @@ "primary": { "$type": "color", "$value": "{color.palette.neutral-0}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + } }, "faint": { "$type": "color", "$value": "{color.palette.neutral-50}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + } } } } diff --git a/packages/tokens/src/global/color/semantic-surface.json b/packages/tokens/src/global/color/semantic-surface.json index 725b0c7ff76..1ab6d1a5b6d 100644 --- a/packages/tokens/src/global/color/semantic-surface.json +++ b/packages/tokens/src/global/color/semantic-surface.json @@ -4,62 +4,158 @@ "primary": { "$type": "color", "$value": "{color.palette.neutral-0}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + } }, "faint": { "$type": "color", "$value": "{color.palette.neutral-50}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + } }, "strong": { "$type": "color", "$value": "{color.palette.neutral-100}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerAccent01}", + "cds-g10": "{carbon.themes.g10.layerAccent01}", + "cds-g90": "{carbon.themes.g90.layerAccent01}", + "cds-g100": "{carbon.themes.g100.layerAccent01}" + } + }, + "high-contrast": { + "$type": "color", + "$value": "{color.palette.neutral-700}", + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + } }, "interactive": { "$type": "color", "$value": "{color.palette.neutral-0}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + } }, "interactive-hover": { "$type": "color", "$value": "{color.palette.neutral-100}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerHover01}", + "cds-g10": "{carbon.themes.g10.layerHover01}", + "cds-g90": "{carbon.themes.g90.layerHover01}", + "cds-g100": "{carbon.themes.g100.layerHover01}" + } }, "interactive-active": { "$type": "color", "$value": "{color.palette.neutral-200}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.white.layerActive01}", + "cds-g10": "{carbon.themes.g10.layerActive01}", + "cds-g90": "{carbon.themes.g90.layerActive01}", + "cds-g100": "{carbon.themes.g100.layerActive01}" + } }, "interactive-disabled": { "$type": "color", "$value": "{color.palette.neutral-50}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.neutral-50}", + "cds-g0": "{carbon.color.gray.30}", + "cds-g10": "{carbon.color.gray.30}", + "cds-g90": "{carbon.color.gray.60}", + "cds-g100": "{carbon.color.gray.70}" + } }, "action": { "$type": "color", "$value": "{color.palette.blue-50}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.blue-50}", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.60}", + "cds-g100": "{carbon.color.blue.70}" + } }, "highlight": { "$type": "color", "$value": "{color.palette.purple-50}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.purple-50}", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + } }, "success": { "$type": "color", "$value": "{color.palette.green-50}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.green-50}", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + } }, "warning": { "$type": "color", "$value": "{color.palette.amber-50}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.amber-50}", + "cds-g0": "{carbon.color.yellow.10}", + "cds-g10": "{carbon.color.yellow.10}", + "cds-g90": "{carbon.color.yellow.70}", + "cds-g100": "{carbon.color.yellow.70}" + } }, "critical": { "$type": "color", "$value": "{color.palette.red-50}", - "group": "semantic" + "group": "semantic", + "$modes": { + "default": "{color.palette.red-50}", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + } } } } diff --git a/packages/tokens/src/global/elevation/elevation.json b/packages/tokens/src/global/elevation/elevation.json index 2ab4b403319..a11c4ddf2d8 100644 --- a/packages/tokens/src/global/elevation/elevation.json +++ b/packages/tokens/src/global/elevation/elevation.json @@ -2,32 +2,74 @@ "elevation": { "inset": { "box-shadow": { - "$value": "{elevation.inset.box-shadow-01}" + "$value": "{elevation.inset.box-shadow-01}", + "$modes": { + "default": "{elevation.inset.box-shadow-01}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + } } }, "low": { "box-shadow": { - "$value": "{elevation.low.box-shadow-01}, {elevation.low.box-shadow-02}" + "$value": "{elevation.low.box-shadow-01}, {elevation.low.box-shadow-02}", + "$modes": { + "default": "{elevation.low.box-shadow-01}, {elevation.low.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + } } }, "mid": { "box-shadow": { - "$value": "{elevation.mid.box-shadow-01}, {elevation.mid.box-shadow-02}" + "$value": "{elevation.mid.box-shadow-01}, {elevation.mid.box-shadow-02}", + "$modes": { + "default": "{elevation.mid.box-shadow-01}, {elevation.mid.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + } } }, "high": { "box-shadow": { - "$value": "{elevation.high.box-shadow-01}, {elevation.high.box-shadow-02}" + "$value": "{elevation.high.box-shadow-01}, {elevation.high.box-shadow-02}", + "$modes": { + "default": "{elevation.high.box-shadow-01}, {elevation.high.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + } } }, "higher": { "box-shadow": { - "$value": "{elevation.higher.box-shadow-01}, {elevation.higher.box-shadow-02}" + "$value": "{elevation.higher.box-shadow-01}, {elevation.higher.box-shadow-02}", + "$modes": { + "default": "{elevation.higher.box-shadow-01}, {elevation.higher.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + } } }, "overlay": { "box-shadow": { - "$value": "{elevation.overlay.box-shadow-01}, {elevation.overlay.box-shadow-02}" + "$value": "{elevation.overlay.box-shadow-01}, {elevation.overlay.box-shadow-02}", + "$modes": { + "default": "{elevation.overlay.box-shadow-01}, {elevation.overlay.box-shadow-02}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + } } } } diff --git a/packages/tokens/src/global/elevation/surface.json b/packages/tokens/src/global/elevation/surface.json index 46201d877a3..19d326c56a8 100644 --- a/packages/tokens/src/global/elevation/surface.json +++ b/packages/tokens/src/global/elevation/surface.json @@ -2,37 +2,86 @@ "surface": { "inset": { "box-shadow": { - "$value": "{elevation.inset.box-shadow-border}, {elevation.inset.box-shadow}" + "$value": "{elevation.inset.box-shadow-border}, {elevation.inset.box-shadow}", + "$modes": { + "default": "{elevation.inset.box-shadow-border}, {elevation.inset.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + } } }, "base": { "box-shadow": { - "$value": "{elevation.base.box-shadow-border}" + "$value": "{elevation.base.box-shadow-border}", + "$modes": { + "default": "{elevation.base.box-shadow-border}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + } } }, "low": { "box-shadow": { - "$value": "{elevation.low.box-shadow-border}, {elevation.low.box-shadow}" + "$value": "{elevation.low.box-shadow-border}, {elevation.low.box-shadow}", + "$modes": { + "default": "{elevation.low.box-shadow-border}, {elevation.low.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + } } }, "mid": { "box-shadow": { - "$value": "{elevation.mid.box-shadow-border}, {elevation.mid.box-shadow}" + "$value": "{elevation.mid.box-shadow-border}, {elevation.mid.box-shadow}", + "$modes": { + "default": "{elevation.mid.box-shadow-border}, {elevation.mid.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + } } }, "high": { "box-shadow": { - "$value": "{elevation.high.box-shadow-border}, {elevation.high.box-shadow}" + "$value": "{elevation.high.box-shadow-border}, {elevation.high.box-shadow}", + "$modes": { + "default": "{elevation.high.box-shadow-border}, {elevation.high.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + } } }, "higher": { "box-shadow": { - "$value": "{elevation.higher.box-shadow-border}, {elevation.higher.box-shadow}" + "$value": "{elevation.higher.box-shadow-border}, {elevation.higher.box-shadow}", + "$modes": { + "default": "{elevation.higher.box-shadow-border}, {elevation.higher.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + } } }, "overlay": { "box-shadow": { - "$value": "{elevation.overlay.box-shadow-border}, {elevation.overlay.box-shadow}" + "$value": "{elevation.overlay.box-shadow-border}, {elevation.overlay.box-shadow}", + "$modes": { + "default": "{elevation.overlay.box-shadow-border}, {elevation.overlay.box-shadow}", + "cds-g0": "none", + "cds-g10": "none", + "cds-g90": "none", + "cds-g100": "none" + } } } } diff --git a/packages/tokens/src/products/shared/app-footer.json b/packages/tokens/src/products/shared/app-footer.json new file mode 100644 index 00000000000..3e48e887fab --- /dev/null +++ b/packages/tokens/src/products/shared/app-footer.json @@ -0,0 +1,21 @@ +{ + "app-footer": { + "focus": { + "color": { + "action": { + "internal": { + "$type": "color", + "$value": "var(--token-color-focus-action-internal)", + "$modes": { + "default": "var(--token-color-focus-action-internal)", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + } + } + } + } + } + } +} diff --git a/packages/tokens/src/products/shared/badge-count.json b/packages/tokens/src/products/shared/badge-count.json new file mode 100644 index 00000000000..38877f427fa --- /dev/null +++ b/packages/tokens/src/products/shared/badge-count.json @@ -0,0 +1,44 @@ +{ + "badge-count": { + "padding": { + "horizontal": { + "small": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + } + }, + "medium": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + } + }, + "large": { + "$type": "dimension", + "$value": "14", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + } + } + } + } + } +} \ No newline at end of file diff --git a/packages/tokens/src/products/shared/badge.json b/packages/tokens/src/products/shared/badge.json new file mode 100644 index 00000000000..68da7eddca0 --- /dev/null +++ b/packages/tokens/src/products/shared/badge.json @@ -0,0 +1,622 @@ +{ + "badge": { + "height": { + "small": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "18", + "cds-g10": "18", + "cds-g90": "18", + "cds-g100": "18" + } + }, + "medium": { + "$type": "dimension", + "$value": "24", + "unit": "px" + }, + "large": { + "$type": "dimension", + "$value": "32", + "unit": "px" + } + }, + "padding": { + "horizontal": { + "small": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + } + }, + "medium": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + } + }, + "large": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + } + } + }, + "vertical": { + "small": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "$modes": { + "default": "2", + "cds-g0": "1", + "cds-g10": "1", + "cds-g90": "1", + "cds-g100": "1" + } + }, + "medium": { + "$type": "dimension", + "$value": "4", + "unit": "px" + }, + "large": { + "$type": "dimension", + "$value": "4", + "unit": "px" + } + } + }, + "gap": { + "small": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + } + }, + "medium": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + } + }, + "large": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + } + } + }, + "typography": { + "font-size": { + "small": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + } + }, + "medium": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + } + }, + "large": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + } + } + }, + "line-height": { + "small": { + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308" + }, + "medium": { + "$type": "number", + "$value": 1.2308, + "comment": "16px = 1.2308" + }, + "large": { + "$type": "number", + "$value": 1.5, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1, + "cds-g10": 1, + "cds-g90": 1, + "cds-g100": 1 + } + } + } + }, + "foreground": { + "color": { + "neutral": { + "filled": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + } + }, + "inverted": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.color.gray.20}", + "cds-g10": "{carbon.color.gray.20}", + "cds-g90": "{carbon.color.gray.100}", + "cds-g100": "{carbon.color.gray.100}" + } + }, + "outlined": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + } + } + }, + "neutral-dark-mode": { + "filled": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + } + }, + "inverted": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + } + }, + "outlined": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, + "comments": { + "cds": "In Figma the `cds` value uses a token `Tag/HighContrast/TagColor` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead" + } + } + }, + "highlight": { + "filled": { + "$type": "color", + "$value": "{color.palette.purple-400}", + "comment": "we don't use `highlight-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.purple-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorPurple.g100}" + } + }, + "inverted": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + } + }, + "outlined": { + "$type": "color", + "$value": "{color.foreground.highlight}", + "$modes": { + "default": "{color.foreground.highlight}", + "cds-g0": "{carbon.themes.tagTokens.tagColorPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorPurple.g100}" + } + } + }, + "success": { + "filled": { + "$type": "color", + "$value": "{color.palette.green-400}", + "comment": "we don't use `success-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.green-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + } + }, + "inverted": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + } + }, + "outlined": { + "$type": "color", + "$value": "{color.foreground.success}", + "$modes": { + "default": "{color.foreground.success}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + } + } + }, + "warning": { + "filled": { + "$type": "color", + "$value": "{color.palette.amber-400}", + "$modes": { + "default": "{color.palette.amber-400}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "hds": "we don't use `warning-on-surface` for accessibility (better contrast)", + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + } + }, + "inverted": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + } + }, + "outlined": { + "$type": "color", + "$value": "{color.foreground.warning}", + "$modes": { + "default": "{color.foreground.warning}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + } + } + }, + "critical": { + "filled": { + "$type": "color", + "$value": "{color.palette.red-400}", + "comment": "we don't use `critical-on-surface` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + } + }, + "inverted": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + } + }, + "outlined": { + "$type": "color", + "$value": "{color.foreground.critical}", + "$modes": { + "default": "{color.foreground.critical}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + } + } + } + } + }, + "surface": { + "color": { + "neutral": { + "filled": { + "$type": "color", + "$value": "{color.palette.neutral-200}", + "$modes": { + "default": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + } + }, + "inverted": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we need to use the corresponding values in Figma (aliases) instead" + }, + "outlined": { + "$type": "color", + "$value": "transparent" + } + }, + "neutral-dark-mode": { + "filled": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "$modes": { + "default": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.backgroundInverse}", + "cds-g10": "{carbon.themes.g10.backgroundInverse}", + "cds-g90": "{carbon.themes.g90.backgroundInverse}", + "cds-g100": "{carbon.themes.g100.backgroundInverse}" + }, + "comment": "In Figma the `cds` value uses a token `Tag/HighContrast/TagBackground` that doesn't exist in code, so we use the same token use in the Carbon Web Component" + }, + "inverted": { + "$type": "color", + "$value": "{color.surface.faint}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + } + }, + "outlined": { + "$type": "color", + "$value": "transparent" + } + }, + "highlight": { + "filled": { + "$type": "color", + "$value": "{color.palette.purple-100}", + "comment": "we don't use `surface-highlight` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.purple-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundPurple.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundPurple.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundPurple.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundPurple.g100}" + } + }, + "inverted": { + "$type": "color", + "$value": "{color.palette.purple-200}", + "$modes": { + "default": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + } + } + }, + "success": { + "filled": { + "$type": "color", + "$value": "{color.palette.green-100}", + "comment": "we don't use `surface-success` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.green-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGreen.g100}" + } + }, + "inverted": { + "$type": "color", + "$value": "{color.palette.green-200}", + "$modes": { + "default": "{color.palette.green-200}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGreen.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGreen.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGreen.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGreen.g100}" + } + } + }, + "warning": { + "filled": { + "$type": "color", + "$value": "{color.palette.amber-100}", + "comment": "we don't use `surface-warning` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + } + }, + "inverted": { + "$type": "color", + "$value": "{color.palette.amber-200}", + "$modes": { + "default": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, + "comments": { + "cds": "in code there are no tokens for the `Tag/Orange` variant, so we need to use the corresponding values in Figma (aliases) instead" + } + } + }, + "critical": { + "filled": { + "$type": "color", + "$value": "{color.palette.red-100}", + "comment": "we don't use `surface-critical` for accessibility (better contrast)", + "$modes": { + "default": "{color.palette.red-100}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundRed.g100}" + } + }, + "inverted": { + "$type": "color", + "$value": "{color.palette.red-200}", + "$modes": { + "default": "{color.palette.red-200}", + "cds-g0": "{carbon.themes.tagTokens.tagColorRed.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorRed.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorRed.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorRed.g100}" + } + } + } + } + }, + "border": { + "radius": { + "$type": "dimension", + "$value": "{border.radius.small}", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "{border.radius.rounded}", + "cds-g10": "{border.radius.rounded}", + "cds-g90": "{border.radius.rounded}", + "cds-g100": "{border.radius.rounded}" + } + } + }, + "icon": { + "size": { + "small": { + "$type": "dimension", + "$value": "12", + "unit": "px" + }, + "medium": { + "$type": "dimension", + "$value": "16", + "unit": "px" + }, + "large": { + "$type": "dimension", + "$value": "16", + "unit": "px" + } + } + } + } +} \ No newline at end of file diff --git a/packages/tokens/src/products/shared/button.json b/packages/tokens/src/products/shared/button.json new file mode 100644 index 00000000000..7b1a847f16a --- /dev/null +++ b/packages/tokens/src/products/shared/button.json @@ -0,0 +1,888 @@ +{ + "button": { + "height": { + "small": { + "$type": "dimension", + "$value": "28", + "unit": "px", + "$modes": { + "default": "28", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + } + }, + "medium": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "$modes": { + "default": "36", + "cds-g0": "40", + "cds-g10": "40", + "cds-g90": "40", + "cds-g100": "40" + } + }, + "large": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "$modes": { + "default": "48", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + } + } + }, + "padding": { + "horizontal": { + "small": { + "$type": "dimension", + "$value": "11", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border" + }, + "medium": { + "$type": "dimension", + "$value": "15", + "unit": "px", + "$modes": { + "default": "15", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border" + }, + "large": { + "$type": "dimension", + "$value": "19", + "unit": "px", + "$modes": { + "default": "19", + "cds-g0": "15", + "cds-g10": "15", + "cds-g90": "15", + "cds-g100": "15" + }, + "comment": "here we're taking into account the 1px border" + } + }, + "vertical": { + "small": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + }, + "comment": "here we're taking into account the 1px border" + }, + "medium": { + "$type": "dimension", + "$value": "9", + "unit": "px", + "$modes": { + "default": "9", + "cds-g0": "10", + "cds-g10": "10", + "cds-g90": "10", + "cds-g100": "10" + }, + "comment": "here we're taking into account the 1px border" + }, + "large": { + "$type": "dimension", + "$value": "11", + "unit": "px", + "$modes": { + "default": "11", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + }, + "comment": "here we're taking into account the 1px border" + } + } + }, + "gap": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "32", + "cds-g10": "32", + "cds-g90": "32", + "cds-g100": "32" + } + }, + "typography": { + "font-size": { + "small": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + } + }, + "medium": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "$modes": { + "default": "14", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + } + }, + "large": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "14", + "cds-g10": "14", + "cds-g90": "14", + "cds-g100": "14" + } + } + }, + "line-height": { + "small": { + "$type": "number", + "$value": 0.9286, + "comment": "14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)", + "$modes": { + "default": 0.9286, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + } + }, + "medium": { + "$type": "number", + "$value": 1.1429, + "comment": "14px ~ 1.1429", + "$modes": { + "default": 1.1429, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + } + }, + "large": { + "$type": "number", + "$value": 1.5, + "comment": "24px = 1.5", + "$modes": { + "default": 1.5, + "cds-g0": 1.2858, + "cds-g10": 1.2858, + "cds-g90": 1.2858, + "cds-g100": 1.2858 + } + } + } + }, + "foreground": { + "color": { + "primary": { + "default": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + } + }, + "hover": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + } + }, + "focus": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + } + }, + "active": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + } + } + }, + "secondary": { + "default": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + } + }, + "hover": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + } + }, + "focus": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + } + }, + "active": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + } + } + }, + "tertiary": { + "default": { + "$type": "color", + "$value": "{color.foreground.action}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiary.g100}" + } + }, + "hover": { + "$type": "color", + "$value": "{color.foreground.action-hover}", + "$modes": { + "default": "{color.foreground.action-hover}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + } + }, + "focus": { + "$type": "color", + "$value": "{color.foreground.action}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + } + }, + "active": { + "$type": "color", + "$value": "{color.foreground.action-active}", + "$modes": { + "default": "{color.foreground.action-active}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + } + } + }, + "critical": { + "default": { + "$type": "color", + "$value": "{color.foreground.critical-on-surface}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + } + }, + "hover": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + } + }, + "focus": { + "$type": "color", + "$value": "{color.foreground.critical-on-surface}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + } + }, + "active": { + "$type": "color", + "$value": "{color.foreground.high-contrast}", + "$modes": { + "default": "{color.foreground.high-contrast}", + "cds-g0": "{carbon.themes.white.textOnColor}", + "cds-g10": "{carbon.themes.g10.textOnColor}", + "cds-g90": "{carbon.themes.g90.textOnColor}", + "cds-g100": "{carbon.themes.g100.textOnColor}" + } + } + }, + "disabled": { + "$type": "color", + "$value": "{color.foreground.disabled}", + "$modes": { + "default": "{color.foreground.disabled}", + "cds-g0": "{carbon.themes.white.textOnColorDisabled}", + "cds-g10": "{carbon.themes.g10.textOnColorDisabled}", + "cds-g90": "{carbon.themes.g90.textOnColorDisabled}", + "cds-g100": "{carbon.themes.g100.textOnColorDisabled}" + } + } + } + }, + "surface": { + "color": { + "primary": { + "default": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimary.g100}" + } + }, + "hover": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimaryHover.g100}" + } + }, + "focus": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "$modes": { + "default": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimary.g100}" + } + }, + "active": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.buttonTokens.buttonPrimaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonPrimaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonPrimaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonPrimaryActive.g100}" + } + } + }, + "secondary": { + "default": { + "$type": "color", + "$value": "{color.surface.faint}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondary.g100}" + } + }, + "hover": { + "$type": "color", + "$value": "{color.surface.primary}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondaryHover.g100}" + } + }, + "focus": { + "$type": "color", + "$value": "{color.surface.faint}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondary.g100}" + } + }, + "active": { + "$type": "color", + "$value": "{color.surface.interactive-active}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.buttonTokens.buttonSecondaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonSecondaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonSecondaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonSecondaryActive.g100}" + } + } + }, + "tertiary": { + "default": { + "$type": "color", + "$value": "transparent" + }, + "hover": { + "$type": "color", + "$value": "{color.surface.primary}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryHover.g100}" + } + }, + "focus": { + "$type": "color", + "$value": "transparent", + "$modes": { + "default": "transparent", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryHover.g100}" + } + }, + "active": { + "$type": "color", + "$value": "{color.surface.interactive-active}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.buttonTokens.buttonTertiaryActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonTertiaryActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonTertiaryActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonTertiaryActive.g100}" + } + } + }, + "critical": { + "default": { + "$type": "color", + "$value": "{color.surface.critical}", + "$modes": { + "default": "{color.surface.critical}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerPrimary.g100}" + } + }, + "hover": { + "$type": "color", + "$value": "{color.palette.red-300}", + "$modes": { + "default": "{color.palette.red-300}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerHover.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerHover.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerHover.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerHover.g100}" + } + }, + "focus": { + "$type": "color", + "$value": "{color.surface.critical}", + "$modes": { + "default": "{color.surface.critical}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerPrimary.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerPrimary.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerPrimary.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerPrimary.g100}" + } + }, + "active": { + "$type": "color", + "$value": "{color.palette.red-400}", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDangerActive.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDangerActive.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDangerActive.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDangerActive.g100}" + } + } + }, + "disabled": { + "$type": "color", + "$value": "{color.surface.faint}", + "$modes": { + "default": "{color.surface.faint}", + "cds-g0": "{carbon.themes.buttonTokens.buttonDisabled.white}", + "cds-g10": "{carbon.themes.buttonTokens.buttonDisabled.g10}", + "cds-g90": "{carbon.themes.buttonTokens.buttonDisabled.g90}", + "cds-g100": "{carbon.themes.buttonTokens.buttonDisabled.g100}" + } + } + } + }, + "border": { + "width": { + "$type": "dimension", + "$value": "1", + "unit": "px" + }, + "radius": { + "$type": "dimension", + "$value": "{border.radius.small}", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + } + }, + "color": { + "primary": { + "default": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + } + }, + "hover": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + } + }, + "focus": { + "internal": { + "$type": "color", + "$value": "{color.focus.action.internal}", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones" + }, + "external": { + "$type": "color", + "$value": "{color.focus.action.external}", + "$modes": { + "default": "{color.focus.action.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones" + } + }, + "active": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "$modes": { + "default": "{color.palette.blue-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + } + } + }, + "secondary": { + "default": { + "$type": "color", + "$value": "{color.border.strong}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + } + }, + "hover": { + "$type": "color", + "$value": "{color.border.strong}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + } + }, + "focus": { + "internal": { + "$type": "color", + "$value": "{color.focus.action.internal}", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones" + }, + "external": { + "$type": "color", + "$value": "{color.focus.action.external}", + "$modes": { + "default": "{color.focus.action.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones" + } + }, + "active": { + "$type": "color", + "$value": "{color.border.strong}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + } + } + }, + "tertiary": { + "default": { + "$type": "color", + "$value": "transparent" + }, + "hover": { + "$type": "color", + "$value": "{color.border.strong}" + }, + "focus": { + "internal": { + "$type": "color", + "$value": "{color.focus.action.internal}" + }, + "external": { + "$type": "color", + "$value": "{color.focus.action.external}" + } + }, + "active": { + "$type": "color", + "$value": "{color.border.strong}" + } + }, + "critical": { + "default": { + "$type": "color", + "$value": "{color.foreground.critical-on-surface}", + "$modes": { + "default": "{color.foreground.critical-on-surface}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + } + }, + "hover": { + "$type": "color", + "$value": "{color.palette.red-400}", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + } + }, + "focus": { + "internal": { + "$type": "color", + "$value": "{color.focus.critical.internal}", + "$modes": { + "default": "{color.focus.critical.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + }, + "comment": "TODO - replace the `pink` values with the correct ones" + }, + "external": { + "$type": "color", + "$value": "{color.focus.critical.external}", + "$modes": { + "default": "{color.focus.critical.external}", + "cds-g0": "magenta", + "cds-g10": "magenta", + "cds-g90": "magenta", + "cds-g100": "magenta" + }, + "comment": "TODO - replace the `magenta` values with the correct ones" + } + }, + "active": { + "$type": "color", + "$value": "{color.palette.red-400}", + "$modes": { + "default": "{color.palette.red-400}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + } + } + }, + "disabled": { + "$type": "color", + "$value": "{color.border.primary}" + } + } + }, + "focus": { + "border": { + "width": { + "$type": "dimension", + "$value": "3", + "unit": "px" + } + } + }, + "icon": { + "size": { + "small": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + } + }, + "medium": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + } + }, + "large": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + } + } + } + } + } +} \ No newline at end of file diff --git a/packages/tokens/src/products/shared/color/semantic-product-vault-radar.json b/packages/tokens/src/products/shared/color/semantic-product-vault-radar.json index 39dfe00e66c..5d120c4a125 100644 --- a/packages/tokens/src/products/shared/color/semantic-product-vault-radar.json +++ b/packages/tokens/src/products/shared/color/semantic-product-vault-radar.json @@ -10,7 +10,14 @@ "$type": "color", "$value": "#000", "group": "branding", - "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault radar would not work" + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, + "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Radar would not work" }, "foreground": { "$type": "color", diff --git a/packages/tokens/src/products/shared/color/semantic-product-vault-secrets.json b/packages/tokens/src/products/shared/color/semantic-product-vault-secrets.json index b97863dec6c..3ac05fa60d5 100644 --- a/packages/tokens/src/products/shared/color/semantic-product-vault-secrets.json +++ b/packages/tokens/src/products/shared/color/semantic-product-vault-secrets.json @@ -10,6 +10,13 @@ "group": "branding", "$type": "color", "$value": "#000", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work" }, "foreground": { diff --git a/packages/tokens/src/products/shared/color/semantic-product-vault.json b/packages/tokens/src/products/shared/color/semantic-product-vault.json index 52ab17bbf2b..5f528c4f10c 100644 --- a/packages/tokens/src/products/shared/color/semantic-product-vault.json +++ b/packages/tokens/src/products/shared/color/semantic-product-vault.json @@ -10,6 +10,13 @@ "$type": "color", "$value": "#000", "group": "branding", + "$modes": { + "default": "#000", + "cds-g0": "#000", + "cds-g10": "#000", + "cds-g90": "#FFF", + "cds-g100": "#FFF" + }, "comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work" }, "foreground": { diff --git a/packages/tokens/src/products/shared/dismiss-button.json b/packages/tokens/src/products/shared/dismiss-button.json new file mode 100644 index 00000000000..54fe89a2ee5 --- /dev/null +++ b/packages/tokens/src/products/shared/dismiss-button.json @@ -0,0 +1,97 @@ +{ + "dismiss-button": { + "size": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "$modes": { + "default": "24", + "cds-g0": "48", + "cds-g10": "48", + "cds-g90": "48", + "cds-g100": "48" + } + }, + "foreground": { + "color": { + "default": { + "$type": "color", + "$value": "{color.foreground.faint}", + "$modes": { + "default": "{color.foreground.faint}", + "cds-g0": "{carbon.themes.white.iconPrimary}", + "cds-g10": "{carbon.themes.g10.iconPrimary}", + "cds-g90": "{carbon.themes.g90.iconPrimary}", + "cds-g100": "{carbon.themes.g100.iconPrimary}" + } + }, + "active": { + "$type": "color", + "$value": "{color.foreground.strong}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.white.iconPrimary}", + "cds-g10": "{carbon.themes.g10.iconPrimary}", + "cds-g90": "{carbon.themes.g90.iconPrimary}", + "cds-g100": "{carbon.themes.g100.iconPrimary}" + } + } + } + }, + "surface": { + "color": { + "hover": { + "$type": "color", + "$value": "rgba(222, 223, 227, 0.4)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "{carbon.themes.white.backgroundHover}", + "cds-g10": "{carbon.themes.g10.backgroundHover}", + "cds-g90": "{carbon.themes.g90.backgroundHover}", + "cds-g100": "{carbon.themes.g100.backgroundHover}" + } + }, + "active": { + "$type": "color", + "$value": "rgba(222, 223, 227, 0.4)", + "$modes": { + "default": "rgba(222, 223, 227, 0.4)", + "cds-g0": "{carbon.themes.white.backgroundActive}", + "cds-g10": "{carbon.themes.g10.backgroundActive}", + "cds-g90": "{carbon.themes.g90.backgroundActive}", + "cds-g100": "{carbon.themes.g100.backgroundActive}" + } + } + } + }, + "border": { + "color": { + "active": { + "$type": "color", + "$value": "{color.border.strong}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + } + } + } + }, + "icon": { + "size": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "20", + "cds-g10": "20", + "cds-g90": "20", + "cds-g100": "20" + } + } + } + } +} \ No newline at end of file diff --git a/packages/tokens/src/products/shared/form/radiocard.json b/packages/tokens/src/products/shared/form/radiocard.json index 3e60f855f32..c5f5d0741c7 100644 --- a/packages/tokens/src/products/shared/form/radiocard.json +++ b/packages/tokens/src/products/shared/form/radiocard.json @@ -17,7 +17,49 @@ "radius": { "$type": "dimension", "$value": "6", - "unit": "px" + "unit": "px", + "$modes": { + "default": "6", + "cds-g0": "0", + "cds-g10": "0", + "cds-g90": "0", + "cds-g100": "0" + } + }, + "color": { + "default": { + "$type": "color", + "$value": "{color.surface.primary}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "transparent", + "cds-g10": "transparent", + "cds-g90": "transparent", + "cds-g100": "transparent" + } + }, + "focus": { + "$type": "color", + "$value": "{color.focus.action.internal}", + "$modes": { + "default": "{color.focus.action.internal}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + } + }, + "default-checked": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "$modes": { + "default": "{color.palette.blue-300}", + "cds-g0": "pink", + "cds-g10": "pink", + "cds-g90": "pink", + "cds-g100": "pink" + } + } } }, "content-padding": { @@ -39,4 +81,4 @@ } } } -} +} \ No newline at end of file diff --git a/packages/tokens/src/products/shared/icon-tile.json b/packages/tokens/src/products/shared/icon-tile.json new file mode 100644 index 00000000000..31784e22747 --- /dev/null +++ b/packages/tokens/src/products/shared/icon-tile.json @@ -0,0 +1,45 @@ +{ + "icon-tile": { + "border": { + "color": { + "overlay": { + "$type": "color", + "$value": "{color.border.primary}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle02}", + "cds-g10": "{carbon.themes.g10.borderSubtle02}", + "cds-g90": "{carbon.themes.g90.borderSubtle02}", + "cds-g100": "{carbon.themes.g100.borderSubtle02}" + } + }, + "logo": { + "$type": "color", + "$value": "{color.border.primary}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle01}", + "cds-g10": "{carbon.themes.g10.borderSubtle01}", + "cds-g90": "{carbon.themes.g90.borderSubtle01}", + "cds-g100": "{carbon.themes.g100.borderSubtle01}" + } + } + } + }, + "surface": { + "color": { + "overlay": { + "$type": "color", + "$value": "{color.surface.primary}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.white.layer02}", + "cds-g10": "{carbon.themes.g10.layer02}", + "cds-g90": "{carbon.themes.g90.layer02}", + "cds-g100": "{carbon.themes.g100.layer02}" + } + } + } + } + } +} diff --git a/packages/tokens/src/products/shared/rich-tooltip.json b/packages/tokens/src/products/shared/rich-tooltip.json new file mode 100644 index 00000000000..042dc457c64 --- /dev/null +++ b/packages/tokens/src/products/shared/rich-tooltip.json @@ -0,0 +1,132 @@ +{ + "rich-tooltip": { + "bubble": { + "max-width": { + "$type": "dimension", + "$value": "280", + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + } + }, + "border": { + "color": { + "$value": "{elevation.higher.border.color}", + "$modes": { + "default": "{elevation.higher.border.color}", + "cds-g0": "{color.palette.alpha-200}", + "cds-g10": "{color.palette.alpha-200}", + "cds-g90": "{color.palette.alpha-200}", + "cds-g100": "{color.palette.alpha-200}" + } + }, + "radius": { + "$type": "dimension", + "$value": "{border.radius.small}", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + } + } + }, + "arrow": { + "size": { + "$type": "dimension", + "$value": "20", + "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + } + } + } + }, + "toggle": { + "gap": { + "horizontal": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + } + } + }, + "foreground": { + "color": { + "default": { + "$value": "{color.foreground.strong}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + } + }, + "hover": { + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + } + }, + "active": { + "$value": "{color.foreground.faint}", + "$modes": { + "default": "{color.foreground.faint}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + } + } + } + }, + "icon": { + "size": { + "$type": "dimension", + "$value": "1", + "unit": "em", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px" + }, + "cds-g10": { + "$value": "14", + "unit": "px" + }, + "cds-g90": { + "$value": "14", + "unit": "px" + }, + "cds-g100": { + "$value": "14", + "unit": "px" + } + } + } + } + } + } +} \ No newline at end of file diff --git a/packages/tokens/src/products/shared/tooltip.json b/packages/tokens/src/products/shared/tooltip.json index 15d20e5634e..3a47ce28663 100644 --- a/packages/tokens/src/products/shared/tooltip.json +++ b/packages/tokens/src/products/shared/tooltip.json @@ -1,53 +1,108 @@ { "tooltip": { - "border-radius": { - "$type": "dimension", - "$value": "5", - "unit": "px" - }, - "color": { - "foreground": { - "primary": { - "$type": "color", - "$value": "var(--token-color-foreground-high-contrast)", - "group": "components" - } - }, - "surface": { - "primary": { - "$type": "color", - "$value": "var(--token-color-palette-neutral-700)", - "group": "components" - } - } - }, - "focus-offset": { - "$type": "dimension", - "$value": "-2", - "unit": "px" - }, "max-width": { "$type": "dimension", "$value": "280", - "unit": "px" + "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + } }, "padding": { "horizontal": { "$type": "dimension", "$value": "12", - "unit": "px" + "unit": "px", + "$modes": { + "default": "12", + "cds-g0": "{carbon.themes.white.spacing05}", + "cds-g10": "{carbon.themes.g10.spacing05}", + "cds-g90": "{carbon.themes.g90.spacing05}", + "cds-g100": "{carbon.themes.g100.spacing05}" + } }, "vertical": { "$type": "dimension", "$value": "8", - "unit": "px" + "unit": "px", + "$modes": { + "default": "8", + "cds-g0": "{carbon.themes.white.spacing05}", + "cds-g10": "{carbon.themes.g10.spacing05}", + "cds-g90": "{carbon.themes.g90.spacing05}", + "cds-g100": "{carbon.themes.g100.spacing05}" + } } }, + "border": { + "radius": { + "$type": "dimension", + "$value": "{border.radius.small}", + "unit": "px", + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + } + } + }, + "caret": { + "clip-path": { + "$value": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "$modes": { + "default": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "cds-g0": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g10": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g90": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g100": "polygon(0 100%, 50% 0, 100% 100%)" + } + }, + "height": { + "$type": "dimension", + "$value": "7", + "unit": "px", + "$modes": { + "default": "7", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" + } + }, + "width": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + } + } + }, + "focus-offset": { + "$type": "dimension", + "$value": "-2", + "unit": "px" + }, "transition": { "function": { "$type": "cubicBezier", - "$value": [0.54, 1.5, 0.38, 1.11] + "$value": [ + 0.54, + 1.5, + 0.38, + 1.11 + ] } } } -} +} \ No newline at end of file diff --git a/packages/tokens/src/products/shared/typography.json b/packages/tokens/src/products/shared/typography.json index f850e45959d..055288897e9 100644 --- a/packages/tokens/src/products/shared/typography.json +++ b/packages/tokens/src/products/shared/typography.json @@ -35,6 +35,16 @@ "Segoe UI Symbol" ], "private": "true" + }, + "combined": { + "$type": "font-family", + "$value": [ + "{typography.font-stack.sans.display.macOS}", + "{typography.font-stack.sans.display.windows}", + "{typography.font-stack.sans.display.sans}", + "{typography.font-stack.sans.display.emoji}" + ], + "private": "true" } }, "text": { @@ -53,6 +63,15 @@ ], "private": "true" }, + "sans": { + "$type": "font-family", + "$value": [ + "Helvetica", + "Arial", + "sans-serif" + ], + "private": "true" + }, "emoji": { "$type": "font-family", "$value": [ @@ -61,6 +80,16 @@ "Segoe UI Symbol" ], "private": "true" + }, + "combined": { + "$type": "font-family", + "$value": [ + "{typography.font-stack.sans.text.macOS}", + "{typography.font-stack.sans.text.windows}", + "{typography.font-stack.sans.text.sans}", + "{typography.font-stack.sans.text.emoji}" + ], + "private": "true" } } }, @@ -80,251 +109,574 @@ "Consolas" ], "private": "true" + }, + "combined": { + "$type": "font-family", + "$value": [ + "{typography.font-stack.monospace.code.macOS}", + "{typography.font-stack.monospace.code.windows}", + "monospace" + ], + "private": "true" } } }, "display": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.display.macOS}", - "{typography.font-stack.sans.display.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.display.emoji}" - ] + "$value": "{typography.font-stack.sans.display.combined}", + "$modes": { + "default": "{typography.font-stack.sans.display.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + } }, "text": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.text.macOS}", - "{typography.font-stack.sans.text.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.text.emoji}" - ] + "$value": "{typography.font-stack.sans.text.combined}", + "$modes": { + "default": "{typography.font-stack.sans.text.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + } }, "code": { "$type": "font-family", - "$value": [ - "{typography.font-stack.monospace.code.macOS}", - "{typography.font-stack.monospace.code.windows}", - "monospace" - ] + "$value": "{typography.font-stack.monospace.code.combined}", + "$modes": { + "default": "{typography.font-stack.monospace.code.combined}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + } } }, "font-weight": { "regular": { "$type": "font-weight", - "$value": 400 + "$value": "400", + "$modes": { + "default": "400", + "cds-g0": "{carbon.typography.font-weight.regular}", + "cds-g10": "{carbon.typography.font-weight.regular}", + "cds-g90": "{carbon.typography.font-weight.regular}", + "cds-g100": "{carbon.typography.font-weight.regular}" + } }, "medium": { "$type": "font-weight", - "$value": 500 + "$value": "500", + "$modes": { + "default": "500", + "cds-g0": "{carbon.typography.font-weight.regular}", + "cds-g10": "{carbon.typography.font-weight.regular}", + "cds-g90": "{carbon.typography.font-weight.regular}", + "cds-g100": "{carbon.typography.font-weight.regular}" + } }, "semibold": { "$type": "font-weight", - "$value": 600 + "$value": "600", + "$modes": { + "default": "600", + "cds-g0": "{carbon.typography.font-weight.semibold}", + "cds-g10": "{carbon.typography.font-weight.semibold}", + "cds-g90": "{carbon.typography.font-weight.semibold}", + "cds-g100": "{carbon.typography.font-weight.semibold}" + } }, "bold": { "$type": "font-weight", - "$value": 700 + "$value": "700", + "$modes": { + "default": "700", + "cds-g0": "{carbon.typography.font-weight.semibold}", + "cds-g10": "{carbon.typography.font-weight.semibold}", + "cds-g90": "{carbon.typography.font-weight.semibold}", + "cds-g100": "{carbon.typography.font-weight.semibold}" + } } }, "display-500": { "font-family": { "$type": "font-family", - "$value": "{typography.font-stack.display}" + "$value": "{typography.font-stack.display}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + } }, "font-size": { "$type": "font-size", "$value": "30", "unit": "px", - "comment": "30px/1.875rem" + "comment": "30px/1.875rem", + "$modes": { + "default": "30", + "cds-g0": "{carbon.typography.heading05.font-size}", + "cds-g10": "{carbon.typography.heading05.font-size}", + "cds-g90": "{carbon.typography.heading05.font-size}", + "cds-g100": "{carbon.typography.heading05.font-size}" + } }, "line-height": { "$type": "number", "$value": 1.2666, - "comment": "38px" + "comment": "38px", + "$modes": { + "default": 1.2666, + "cds-g0": "{carbon.typography.heading05.line-height}", + "cds-g10": "{carbon.typography.heading05.line-height}", + "cds-g90": "{carbon.typography.heading05.line-height}", + "cds-g100": "{carbon.typography.heading05.line-height}" + } + }, + "letter-spacing": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading05.letter-spacing}", + "cds-g10": "{carbon.typography.heading05.letter-spacing}", + "cds-g90": "{carbon.typography.heading05.letter-spacing}", + "cds-g100": "{carbon.typography.heading05.letter-spacing}" + } } }, "display-400": { "font-family": { "$type": "font-family", - "$value": "{typography.font-stack.display}" + "$value": "{typography.font-stack.display}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + } }, "font-size": { "$type": "font-size", "$value": "24", "unit": "px", - "comment": "24px/1.5rem" + "comment": "24px/1.5rem", + "$modes": { + "default": "24", + "cds-g0": "{carbon.typography.heading04.font-size}", + "cds-g10": "{carbon.typography.heading04.font-size}", + "cds-g90": "{carbon.typography.heading04.font-size}", + "cds-g100": "{carbon.typography.heading04.font-size}" + } }, "line-height": { "$type": "number", "$value": 1.3333, - "comment": "32px" + "comment": "32px", + "$modes": { + "default": 1.3333, + "cds-g0": "{carbon.typography.heading04.line-height}", + "cds-g10": "{carbon.typography.heading04.line-height}", + "cds-g90": "{carbon.typography.heading04.line-height}", + "cds-g100": "{carbon.typography.heading04.line-height}" + } + }, + "letter-spacing": { + "$type": "letter-spacing", + "$value": 0, + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.heading04.letter-spacing}", + "cds-g10": "{carbon.typography.heading04.letter-spacing}", + "cds-g90": "{carbon.typography.heading04.letter-spacing}", + "cds-g100": "{carbon.typography.heading04.letter-spacing}" + } } }, "display-300": { "font-family": { "$type": "font-family", - "$value": "{typography.font-stack.text}" + "$value": "{typography.font-stack.text}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + } }, "font-size": { "$type": "font-size", "$value": "18", "unit": "px", - "comment": "18px/1.125rem" + "comment": "18px/1.125rem", + "$modes": { + "default": "18", + "cds-g0": "{carbon.typography.heading03.font-size}", + "cds-g10": "{carbon.typography.heading03.font-size}", + "cds-g90": "{carbon.typography.heading03.font-size}", + "cds-g100": "{carbon.typography.heading03.font-size}" + } }, "line-height": { "$type": "number", "$value": 1.3333, - "comment": "24px" + "comment": "24px", + "$modes": { + "default": 1.3333, + "cds-g0": "{carbon.typography.heading03.line-height}", + "cds-g10": "{carbon.typography.heading03.line-height}", + "cds-g90": "{carbon.typography.heading03.line-height}", + "cds-g100": "{carbon.typography.heading03.line-height}" + } }, "letter-spacing": { "$type": "letter-spacing", "$value": -0.5, "unit": "px", - "comment": "this is `tracking`" + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading03.letter-spacing}", + "cds-g10": "{carbon.typography.heading03.letter-spacing}", + "cds-g90": "{carbon.typography.heading03.letter-spacing}", + "cds-g100": "{carbon.typography.heading03.letter-spacing}" + } } }, "display-200": { "font-family": { "$type": "font-family", - "$value": "{typography.font-stack.display}" + "$value": "{typography.font-stack.display}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + } }, "font-size": { "$type": "font-size", "$value": "16", "unit": "px", - "comment": "16px/1rem" + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.heading02.font-size}", + "cds-g10": "{carbon.typography.heading02.font-size}", + "cds-g90": "{carbon.typography.heading02.font-size}", + "cds-g100": "{carbon.typography.heading02.font-size}" + } }, "line-height": { "$type": "number", "$value": 1.5, - "comment": "24px" + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": "{carbon.typography.heading02.line-height}", + "cds-g10": "{carbon.typography.heading02.line-height}", + "cds-g90": "{carbon.typography.heading02.line-height}", + "cds-g100": "{carbon.typography.heading02.line-height}" + } }, "letter-spacing": { "$type": "letter-spacing", "$value": -0.5, "unit": "px", - "comment": "this is `tracking`" + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading02.letter-spacing}", + "cds-g10": "{carbon.typography.heading02.letter-spacing}", + "cds-g90": "{carbon.typography.heading02.letter-spacing}", + "cds-g100": "{carbon.typography.heading02.letter-spacing}" + } } }, "display-100": { "font-family": { "$type": "font-family", - "$value": "{typography.font-stack.text}" + "$value": "{typography.font-stack.display}", + "$modes": { + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + } }, "font-size": { "$type": "font-size", "$value": "13", "unit": "px", - "comment": "13px/0.8125rem" + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.heading01.font-size}", + "cds-g10": "{carbon.typography.heading01.font-size}", + "cds-g90": "{carbon.typography.heading01.font-size}", + "cds-g100": "{carbon.typography.heading01.font-size}" + } }, "line-height": { "$type": "number", "$value": 1.3846, - "comment": "18px" + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": "{carbon.typography.heading01.line-height}", + "cds-g10": "{carbon.typography.heading01.line-height}", + "cds-g90": "{carbon.typography.heading01.line-height}", + "cds-g100": "{carbon.typography.heading01.line-height}" + } + }, + "letter-spacing": { + "$type": "letter-spacing", + "$value": 0, + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.heading01.letter-spacing}", + "cds-g10": "{carbon.typography.heading01.letter-spacing}", + "cds-g90": "{carbon.typography.heading01.letter-spacing}", + "cds-g100": "{carbon.typography.heading01.letter-spacing}" + } } }, "body-300": { "font-family": { "$type": "font-family", - "$value": "{typography.font-stack.text}" + "$value": "{typography.font-stack.text}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + } }, "font-size": { "$type": "font-size", "$value": "16", "unit": "px", - "comment": "16px/1rem" + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.body02.font-size}", + "cds-g10": "{carbon.typography.body02.font-size}", + "cds-g90": "{carbon.typography.body02.font-size}", + "cds-g100": "{carbon.typography.body02.font-size}" + } }, "line-height": { "$type": "number", "$value": 1.5, - "comment": "24px" + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": "{carbon.typography.body02.line-height}", + "cds-g10": "{carbon.typography.body02.line-height}", + "cds-g90": "{carbon.typography.body02.line-height}", + "cds-g100": "{carbon.typography.body02.line-height}" + } } }, "body-200": { "font-family": { "$type": "font-family", - "$value": "{typography.font-stack.text}" + "$value": "{typography.font-stack.text}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + } }, "font-size": { "$type": "font-size", "$value": "14", "unit": "px", - "comment": "14px/0.875rem" + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "{carbon.typography.body01.font-size}", + "cds-g10": "{carbon.typography.body01.font-size}", + "cds-g90": "{carbon.typography.body01.font-size}", + "cds-g100": "{carbon.typography.body01.font-size}" + } }, "line-height": { "$type": "number", "$value": 1.4286, - "comment": "20px" + "comment": "20px", + "$modes": { + "default": 1.4286, + "cds-g0": "{carbon.typography.body01.line-height}", + "cds-g10": "{carbon.typography.body01.line-height}", + "cds-g90": "{carbon.typography.body01.line-height}", + "cds-g100": "{carbon.typography.body01.line-height}" + } } }, "body-100": { "font-family": { "$type": "font-family", - "$value": "{typography.font-stack.text}" + "$value": "{typography.font-stack.text}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + } }, "font-size": { "$type": "font-size", "$value": "13", "unit": "px", - "comment": "13px/0.8125rem" + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.bodyCompact01.font-size}", + "cds-g10": "{carbon.typography.bodyCompact01.font-size}", + "cds-g90": "{carbon.typography.bodyCompact01.font-size}", + "cds-g100": "{carbon.typography.bodyCompact01.font-size}" + } }, "line-height": { "$type": "number", "$value": 1.3846, - "comment": "18px" + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": "{carbon.typography.bodyCompact01.line-height}", + "cds-g10": "{carbon.typography.bodyCompact01.line-height}", + "cds-g90": "{carbon.typography.bodyCompact01.line-height}", + "cds-g100": "{carbon.typography.bodyCompact01.line-height}" + } } }, - "code-100": { + "code-300": { "font-family": { "$type": "font-family", - "$value": "{typography.font-stack.code}" + "$value": "{typography.font-stack.code}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + } }, "font-size": { "$type": "font-size", - "$value": "13", + "$value": "16", "unit": "px", - "comment": "13px/0.8125rem" + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + } }, "line-height": { "$type": "number", - "$value": 1.23, - "comment": "16px" + "$value": 1.25, + "comment": "20px", + "$modes": { + "default": 1.25, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + } } }, "code-200": { "font-family": { "$type": "font-family", - "$value": "{typography.font-stack.code}" + "$value": "{typography.font-stack.code}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + } }, "font-size": { "$type": "font-size", "$value": "14", "unit": "px", - "comment": "14px/0.875rem" + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + } }, "line-height": { "$type": "number", "$value": 1.125, - "comment": "18px" + "comment": "18px", + "$modes": { + "default": 1.125, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + } } }, - "code-300": { + "code-100": { "font-family": { "$type": "font-family", - "$value": "{typography.font-stack.code}" + "$value": "{typography.font-stack.code}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + } }, "font-size": { "$type": "font-size", - "$value": "16", + "$value": "13", "unit": "px", - "comment": "16px/1rem" + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + } }, "line-height": { "$type": "number", - "$value": 1.25, - "comment": "20px" + "$value": 1.23, + "comment": "16px", + "$modes": { + "default": 1.23, + "cds-g0": "{carbon.typography.code01.line-height}", + "cds-g10": "{carbon.typography.code01.line-height}", + "cds-g90": "{carbon.typography.code01.line-height}", + "cds-g100": "{carbon.typography.code01.line-height}" + } } } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4cb6cb52f11..c8916de3fb7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -140,6 +140,12 @@ importers: '@hashicorp/flight-icons': specifier: workspace:^4.2.1 version: link:../flight-icons + '@ibm/plex-mono': + specifier: ^1.1.0 + version: 1.1.0 + '@ibm/plex-sans': + specifier: ^1.1.0 + version: 1.1.0 '@lezer/highlight': specifier: ^1.2.1 version: 1.2.1 @@ -462,6 +468,9 @@ importers: '@typescript-eslint/parser': specifier: ^8.18.1 version: 8.38.0(eslint@8.57.1)(typescript@5.9.2) + chalk: + specifier: ^5.4.1 + version: 5.4.1 eslint: specifier: ^8.57.1 version: 8.57.1 @@ -504,6 +513,21 @@ importers: '@babel/plugin-proposal-decorators': specifier: ^7.27.1 version: 7.28.0(@babel/core@7.28.0) + '@carbon/grid': + specifier: ^11.43.0 + version: 11.45.0 + '@carbon/layout': + specifier: ^11.41.0 + version: 11.43.0 + '@carbon/styles': + specifier: ^1.93.0 + version: 1.93.0(sass@1.89.2) + '@carbon/themes': + specifier: ^11.60.0 + version: 11.62.0 + '@carbon/type': + specifier: ^11.47.0 + version: 11.49.0 '@codemirror/lint': specifier: ^6.8.4 version: 6.8.5 @@ -567,6 +591,9 @@ importers: '@hashicorp/flight-icons': specifier: workspace:* version: link:../packages/flight-icons + '@ibm/plex': + specifier: ^6.4.1 + version: 6.4.1 '@nullvoxpopuli/ember-composable-helpers': specifier: ^5.2.11 version: 5.2.11(@babel/core@7.28.0)(ember-source@6.5.0(@glimmer/component@2.0.0)(rsvp@4.8.5)) @@ -1939,6 +1966,9 @@ packages: '@carbon/colors@11.42.0': resolution: {integrity: sha512-kfEGVk2vzokkRrVwqUGYK8YLQ1Cn7cDhJ/lEz31kdBrUbR8vlgKSFq9GTqAgZiqxbTC0surR3nBF2kU3NTNPOg==} + '@carbon/feature-flags@0.32.0': + resolution: {integrity: sha512-a1rFplSEFPwJ4ZsuwvOaKHgoLqPNhjCJdWY6VTgCoytRZqtgYWqwYFEqQkm9/f1mX1lHr6oK/eBpAcmi0Izuvg==} + '@carbon/grid@11.45.0': resolution: {integrity: sha512-J8hh5li0Q0RRS6IGg+MVPQVfjp1ePxzQsyMyjQOHLux8i8HwiWJmKLQ+4lKMzRXorLG2RtEoPVl00EaKlQEgKQ==} @@ -1951,6 +1981,14 @@ packages: '@carbon/motion@11.37.0': resolution: {integrity: sha512-bjFzY8Wy5Umj+g41ZGj3L3b/z2gDBDKfzfc9M3ZAHaj73PZ7Z/Z5jT0IFlihEv8wUwZfbhbtnb4jeNhckfLINA==} + '@carbon/styles@1.93.0': + resolution: {integrity: sha512-Nt8W4gwnSBRkDsnmJ3yqXYyR0elZPElmHt2aEBkKPpSRskRddF+2cDTlOH+iq+D9KHWWO+n6WLEnZ0fvftvDPA==} + peerDependencies: + sass: ^1.33.0 + peerDependenciesMeta: + sass: + optional: true + '@carbon/themes@11.62.0': resolution: {integrity: sha512-/sPOiGaC4YtXBiA4uNx2PuBxPOAjVMOThrsHfdDbroUvm2yigvRZUJcJTivunOFKtfIC5EOoKxxAP3XzxWjf0Q==} @@ -2958,6 +2996,37 @@ packages: resolution: {integrity: sha512-xeO57FpIu4p1Ri3Jq/EXq4ClRm86dVF2z/+kvFnyqVYRavTZmaFaUBbWCOuuTh0o/g7DSsk6kc2vrS4Vl5oPOQ==} engines: {node: '>=18.18'} + '@ibm/plex-mono@1.1.0': + resolution: {integrity: sha512-hpsdRxR3BRJkC6wGM4MZcUFD6C8M+mmK76RtAy/hlsfPro9FzpXVdIWC+G3jeQOXof109dxlUvmeKxpeKUG68A==} + + '@ibm/plex-sans-arabic@1.1.0': + resolution: {integrity: sha512-u8wIS6szLAOFvlBjCFZmtpKIqbhuIuniG2N0J+sio8vV6INH58hP0t0QNYrSl9SZtCv2Fwb4oQGuZJY3kJ4+QA==} + + '@ibm/plex-sans-devanagari@1.1.0': + resolution: {integrity: sha512-IVNV9NxXZDzcGZRao/xj+kiFwkdLkcw5vNiKwY8wEzzkpjApXJnPhJ0a7mIKNAh8oIadTIF68+iGtzRKK3nXAQ==} + + '@ibm/plex-sans-hebrew@1.1.0': + resolution: {integrity: sha512-iix0rLpUD0E8dE8q+/t3B7u1or7h6gEzoy6TK9NwP41AN31WE55f2cFwQAXomBDwr0Ozc9sHYy97NutEukZXzQ==} + + '@ibm/plex-sans-thai-looped@1.1.0': + resolution: {integrity: sha512-9zbDGzmtscHgBRTF88y3/92zQx6lmKjz5ZxhgcljilwOpj08BAytDc3mzUl9XGUh+DmOMl0Ql1lk6ecsEYYg2w==} + + '@ibm/plex-sans-thai@1.1.0': + resolution: {integrity: sha512-vk7IrjdO69eEElJpFBppCha/wvU48DFyVuDewcfIf5L6Z11s0vbROANCvKipVPRUz1LE4ron8KoitWGcl3AlfA==} + + '@ibm/plex-sans@1.1.0': + resolution: {integrity: sha512-WPgvO6Yfj2w5YbhyAr1tv95RUz4LRJlqN+CmYvBglabXteufP1D1E9BABMde+ZIKdRbFJDoKF5eQzfhpnbgZcQ==} + + '@ibm/plex-serif@1.1.0': + resolution: {integrity: sha512-ORIyWlK8t8mvpFI7AAfhVFH+sacink2l9AjLiKZscmAzLVSa2dqFckrPOXqx4dK/cax567gWwCpJNEYk7xWxBQ==} + + '@ibm/plex@6.0.0-next.6': + resolution: {integrity: sha512-B3uGruTn2rS5gweynLmfSe7yCawSRsJguJJQHVQiqf4rh2RNgJFu8YLE2Zd/JHV0ZXoVMOslcXP2k3hMkxKEyA==} + engines: {node: '>=14'} + + '@ibm/plex@6.4.1': + resolution: {integrity: sha512-fnsipQywHt3zWvsnlyYKMikcVI7E2fEwpiPnIHFqlbByXVfQfANAAeJk1IV4mNnxhppUIDlhU0TzwYwL++Rn2g==} + '@ibm/telemetry-js@1.10.1': resolution: {integrity: sha512-aQcDq03BKbgNnkHujHbA950wJVHtJnY0PsMHKyxgRvr3XPgInWjDfgxJQmKIp9I8Vy2wpfe0cGmduJfIX0HewQ==} hasBin: true @@ -12874,6 +12943,10 @@ snapshots: dependencies: '@ibm/telemetry-js': 1.10.1 + '@carbon/feature-flags@0.32.0': + dependencies: + '@ibm/telemetry-js': 1.10.1 + '@carbon/grid@11.45.0': dependencies: '@carbon/layout': 11.43.0 @@ -12891,6 +12964,28 @@ snapshots: dependencies: '@ibm/telemetry-js': 1.10.1 + '@carbon/styles@1.93.0(sass@1.89.2)': + dependencies: + '@carbon/colors': 11.42.0 + '@carbon/feature-flags': 0.32.0 + '@carbon/grid': 11.45.0 + '@carbon/layout': 11.43.0 + '@carbon/motion': 11.37.0 + '@carbon/themes': 11.62.0 + '@carbon/type': 11.49.0 + '@ibm/plex': 6.0.0-next.6 + '@ibm/plex-mono': 1.1.0 + '@ibm/plex-sans': 1.1.0 + '@ibm/plex-sans-arabic': 1.1.0 + '@ibm/plex-sans-devanagari': 1.1.0 + '@ibm/plex-sans-hebrew': 1.1.0 + '@ibm/plex-sans-thai': 1.1.0 + '@ibm/plex-sans-thai-looped': 1.1.0 + '@ibm/plex-serif': 1.1.0 + '@ibm/telemetry-js': 1.10.1 + optionalDependencies: + sass: 1.89.2 + '@carbon/themes@11.62.0': dependencies: '@carbon/colors': 11.42.0 @@ -14195,6 +14290,8 @@ snapshots: '@floating-ui/dom': 1.7.3 '@hashicorp/design-system-tokens': file:packages/tokens '@hashicorp/flight-icons': file:packages/flight-icons + '@ibm/plex-mono': 1.1.0 + '@ibm/plex-sans': 1.1.0 '@lezer/highlight': 1.2.1 '@nullvoxpopuli/ember-composable-helpers': 5.2.11(@babel/core@7.28.0)(ember-source@6.4.0(@glimmer/component@2.0.0)(rsvp@4.8.5)) clipboard-polyfill: 4.1.1 @@ -14250,6 +14347,8 @@ snapshots: '@floating-ui/dom': 1.7.3 '@hashicorp/design-system-tokens': file:packages/tokens '@hashicorp/flight-icons': file:packages/flight-icons + '@ibm/plex-mono': 1.1.0 + '@ibm/plex-sans': 1.1.0 '@lezer/highlight': 1.2.1 '@nullvoxpopuli/ember-composable-helpers': 5.2.11(@babel/core@7.28.0)(ember-source@6.5.0(@glimmer/component@2.0.0)(rsvp@4.8.5)) clipboard-polyfill: 4.1.1 @@ -14308,6 +14407,44 @@ snapshots: '@humanwhocodes/retry@0.4.2': {} + '@ibm/plex-mono@1.1.0': + dependencies: + '@ibm/telemetry-js': 1.10.1 + + '@ibm/plex-sans-arabic@1.1.0': + dependencies: + '@ibm/telemetry-js': 1.10.1 + + '@ibm/plex-sans-devanagari@1.1.0': + dependencies: + '@ibm/telemetry-js': 1.10.1 + + '@ibm/plex-sans-hebrew@1.1.0': + dependencies: + '@ibm/telemetry-js': 1.10.1 + + '@ibm/plex-sans-thai-looped@1.1.0': + dependencies: + '@ibm/telemetry-js': 1.10.1 + + '@ibm/plex-sans-thai@1.1.0': + dependencies: + '@ibm/telemetry-js': 1.10.1 + + '@ibm/plex-sans@1.1.0': + dependencies: + '@ibm/telemetry-js': 1.10.1 + + '@ibm/plex-serif@1.1.0': + dependencies: + '@ibm/telemetry-js': 1.10.1 + + '@ibm/plex@6.0.0-next.6': {} + + '@ibm/plex@6.4.1': + dependencies: + '@ibm/telemetry-js': 1.10.1 + '@ibm/telemetry-js@1.10.1': {} '@inquirer/figures@1.0.9': {} diff --git a/showcase/.prettierignore b/showcase/.prettierignore index 6b95cb7bf32..63e7e2dc3d7 100644 --- a/showcase/.prettierignore +++ b/showcase/.prettierignore @@ -12,3 +12,6 @@ ember-cli-update.json *.html *.scss + +# temporary CSS files for theming +/public/assets/styles/@hashicorp/ diff --git a/showcase/.stylelintignore b/showcase/.stylelintignore index fc178a0b910..6c722d9246d 100644 --- a/showcase/.stylelintignore +++ b/showcase/.stylelintignore @@ -3,3 +3,6 @@ # compiled output /dist/ + +# temporary CSS files for theming +/public/assets/styles/@hashicorp/ diff --git a/showcase/app/components/page-carbonization/components/app-footer/index.gts b/showcase/app/components/page-carbonization/components/app-footer/index.gts new file mode 100644 index 00000000000..63d5312264b --- /dev/null +++ b/showcase/app/components/page-carbonization/components/app-footer/index.gts @@ -0,0 +1,131 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TemplateOnlyComponent } from '@ember/component/template-only'; +import { pageTitle } from 'ember-page-title'; + +import ShwTextH1 from 'showcase/components/shw/text/h1'; +import ShwTextH2 from 'showcase/components/shw/text/h2'; +import ShwTextH3 from 'showcase/components/shw/text/h3'; +import ShwTextBody from 'showcase/components/shw/text/body'; +import ShwDivider from 'showcase/components/shw/divider'; +import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid'; + +import { + HdsAppFooter, + HdsAppFooterStatusLink, + HdsThemeContext, + HdsPageHeader, + HdsBreadcrumb, + HdsBreadcrumbItem, + HdsButton, + HdsTextBody, + HdsLinkInline, +} from '@hashicorp/design-system-components/components'; + +import { STATUSES as STATUS_LINK_STATUSES } from '@hashicorp/design-system-components/components/hds/app-footer/status-link'; + +const AppFooterCarbonizationIndex: TemplateOnlyComponent = ; + +export default AppFooterCarbonizationIndex; diff --git a/showcase/app/components/page-carbonization/components/application-state/index.gts b/showcase/app/components/page-carbonization/components/application-state/index.gts new file mode 100644 index 00000000000..69dc3753bbe --- /dev/null +++ b/showcase/app/components/page-carbonization/components/application-state/index.gts @@ -0,0 +1,40 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TemplateOnlyComponent } from '@ember/component/template-only'; +import { pageTitle } from 'ember-page-title'; + +import ShwTextH1 from 'showcase/components/shw/text/h1'; +import ShwTextH2 from 'showcase/components/shw/text/h2'; +import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid'; + +import CodeFragmentWithActionVariants from '../../../page-components/application-state/code-fragments/with-action-variants'; + +const ApplicationStateCarbonizationIndex: TemplateOnlyComponent = ; + +export default ApplicationStateCarbonizationIndex; diff --git a/showcase/app/components/page-carbonization/components/badge-count/index.gts b/showcase/app/components/page-carbonization/components/badge-count/index.gts new file mode 100644 index 00000000000..4710dedc0f4 --- /dev/null +++ b/showcase/app/components/page-carbonization/components/badge-count/index.gts @@ -0,0 +1,144 @@ +import type { TemplateOnlyComponent } from '@ember/component/template-only'; +import { pageTitle } from 'ember-page-title'; +import { array } from '@ember/helper'; + +import ShwTextH1 from 'showcase/components/shw/text/h1'; +import ShwTextH2 from 'showcase/components/shw/text/h2'; +import ShwFlex from 'showcase/components/shw/flex'; +import ShwDivider from 'showcase/components/shw/divider'; +import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid'; + +import { HdsBadgeCount } from '@hashicorp/design-system-components/components'; +import { + SIZES, + TYPES, +} from '@hashicorp/design-system-components/components/hds/badge-count/index'; + +const BadgeCountCarbonizationIndex: TemplateOnlyComponent = ; + +export default BadgeCountCarbonizationIndex; diff --git a/showcase/app/components/page-carbonization/components/badge/index.gts b/showcase/app/components/page-carbonization/components/badge/index.gts new file mode 100644 index 00000000000..3f41d1919dc --- /dev/null +++ b/showcase/app/components/page-carbonization/components/badge/index.gts @@ -0,0 +1,356 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TemplateOnlyComponent } from '@ember/component/template-only'; +import { pageTitle } from 'ember-page-title'; +import { array } from '@ember/helper'; + +import ShwTextH1 from 'showcase/components/shw/text/h1'; +import ShwTextH2 from 'showcase/components/shw/text/h2'; +import ShwFlex from 'showcase/components/shw/flex'; +import ShwDivider from 'showcase/components/shw/divider'; +import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid'; + +import { + HdsBadge, + HdsIcon, +} from '@hashicorp/design-system-components/components'; +import { + SIZES, + TYPES, +} from '@hashicorp/design-system-components/components/hds/badge/index'; + +const BadgeCarbonizationIndex: TemplateOnlyComponent = ; + +export default BadgeCarbonizationIndex; diff --git a/showcase/app/components/page-carbonization/components/button/index.gts b/showcase/app/components/page-carbonization/components/button/index.gts new file mode 100644 index 00000000000..528f4cc5c11 --- /dev/null +++ b/showcase/app/components/page-carbonization/components/button/index.gts @@ -0,0 +1,258 @@ +import type { TemplateOnlyComponent } from '@ember/component/template-only'; +import { helper } from '@ember/component/helper'; +import { pageTitle } from 'ember-page-title'; +import { capitalize } from '@ember/string'; +import { array } from '@ember/helper'; +import style from 'ember-style-modifier'; +import { eq } from 'ember-truth-helpers'; + +import ShwTextH1 from 'showcase/components/shw/text/h1'; +import ShwTextH2 from 'showcase/components/shw/text/h2'; +import ShwTextH3 from 'showcase/components/shw/text/h3'; +import ShwTextBody from 'showcase/components/shw/text/body'; +import ShwFlex from 'showcase/components/shw/flex'; +import ShwDivider from 'showcase/components/shw/divider'; +import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid'; + +import { + HdsButton, + HdsIcon, +} from '@hashicorp/design-system-components/components'; +import { + COLORS, + SIZES, +} from '@hashicorp/design-system-components/components/hds/button/index'; + +// these are used only for presentation purpose in the showcase +const STATES = ['default', 'hover', 'active', 'focus', 'disabled']; + +const MAPPING_HDS_COLOR_TO_CDS_KIND = { + primary: 'primary', + secondary: 'secondary', + tertiary: 'tertiary', + critical: 'danger', +} as const; + +// tried to use `HdsButtonColors` from the HdsButton types but doesn't make TS happy +type HdsButtonColors = [keyof typeof MAPPING_HDS_COLOR_TO_CDS_KIND]; + +const mapHdsColorToCdsKind = helper(function ([color]: HdsButtonColors) { + return MAPPING_HDS_COLOR_TO_CDS_KIND[color]; +}); + +const ButtonCarbonizationIndex: TemplateOnlyComponent = ; + +export default ButtonCarbonizationIndex; diff --git a/showcase/app/components/page-carbonization/components/form/radio-card/index.gts b/showcase/app/components/page-carbonization/components/form/radio-card/index.gts new file mode 100644 index 00000000000..f3c3b4f0229 --- /dev/null +++ b/showcase/app/components/page-carbonization/components/form/radio-card/index.gts @@ -0,0 +1,440 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import Component from '@glimmer/component'; +import type { TemplateOnlyComponent } from '@ember/component/template-only'; +import { pageTitle } from 'ember-page-title'; +import { capitalize } from '@ember/string'; +import { eq } from 'ember-truth-helpers'; +import { on } from '@ember/modifier'; + +import ShwTextH1 from 'showcase/components/shw/text/h1'; +import ShwTextH2 from 'showcase/components/shw/text/h2'; +import ShwTextH3 from 'showcase/components/shw/text/h3'; +import ShwTextBody from 'showcase/components/shw/text/body'; +import ShwDivider from 'showcase/components/shw/divider'; +import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid'; + +import { + HdsBadge, + HdsFormRadioCard, + HdsFormRadioCardGroup, + HdsIcon, + HdsTextBody, + HdsTextDisplay, +} from '@hashicorp/design-system-components/components'; + +import { + CONTROL_POSITIONS, + ALIGNMENTS, +} from '@hashicorp/design-system-components/components/hds/form/radio-card/index'; + +import { LAYOUT_TYPES } from '@hashicorp/design-system-components/components/hds/form/fieldset/index'; + +const STATES = ['default', 'hover', 'focus', 'disabled']; + +export interface CdsRadioTileContentSignature { + Args: { + alignment?: string; + showIcon?: boolean; + showBadge?: boolean; + label?: string; + description?: string; + badgeText?: string; + }; +} + +const CdsRadioTileContent: TemplateOnlyComponent = + ; + +export default class FormRadioCardCarbonizationIndex extends Component { + onChange = (event: Event) => { + const control = event.target as HTMLInputElement; + const group = control.closest('.hds-form-group__control-fields-wrapper'); + group?.querySelectorAll('.hds-form-radio-card').forEach((radioCard) => { + radioCard.classList.remove('hds-form-radio-card--checked'); + }); + control + ?.closest('.hds-form-radio-card') + ?.classList.add('hds-form-radio-card--checked'); + }; + + +} diff --git a/showcase/app/components/page-carbonization/components/form/text-input/index.gts b/showcase/app/components/page-carbonization/components/form/text-input/index.gts new file mode 100644 index 00000000000..5440eaadbbe --- /dev/null +++ b/showcase/app/components/page-carbonization/components/form/text-input/index.gts @@ -0,0 +1,573 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TemplateOnlyComponent } from '@ember/component/template-only'; +import { pageTitle } from 'ember-page-title'; +import { array } from '@ember/helper'; +import { capitalize } from '@ember/string'; +import { eq, notEq, and } from 'ember-truth-helpers'; + +import ShwTextH1 from 'showcase/components/shw/text/h1'; +import ShwTextH2 from 'showcase/components/shw/text/h2'; +import ShwTextH3 from 'showcase/components/shw/text/h3'; +import ShwFlex from 'showcase/components/shw/flex'; +import ShwDivider from 'showcase/components/shw/divider'; +import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid'; + +import CodeFragmentWithCharacterCount from 'showcase/components/page-components/form/text-input/code-fragments/with-character-count'; + +import { + HdsFormTextInputBase, + HdsFormTextInputField, + HdsLinkInline, +} from '@hashicorp/design-system-components/components'; +import { TYPES } from '@hashicorp/design-system-components/components/hds/form/text-input/base'; + +const STATES = ['default', 'hover', 'focus']; + +const FormTextInputCarbonizationIndex: TemplateOnlyComponent = ; + +export default FormTextInputCarbonizationIndex; diff --git a/showcase/app/components/page-carbonization/components/icon-tile/index.gts b/showcase/app/components/page-carbonization/components/icon-tile/index.gts new file mode 100644 index 00000000000..f21fcc82ab9 --- /dev/null +++ b/showcase/app/components/page-carbonization/components/icon-tile/index.gts @@ -0,0 +1,133 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TemplateOnlyComponent } from '@ember/component/template-only'; +import { pageTitle } from 'ember-page-title'; +import { notEq } from 'ember-truth-helpers'; + +import ShwTextH1 from 'showcase/components/shw/text/h1'; +import ShwTextH2 from 'showcase/components/shw/text/h2'; +import ShwFlex from 'showcase/components/shw/flex'; +import ShwDivider from 'showcase/components/shw/divider'; +import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid'; + +import { HdsIconTile } from '@hashicorp/design-system-components/components'; + +import { + SIZES, + COLORS, + PRODUCTS, +} from '@hashicorp/design-system-components/components/hds/icon-tile/index'; + +const IconTileCarbonizationIndex: TemplateOnlyComponent = ; + +export default IconTileCarbonizationIndex; diff --git a/showcase/app/components/page-carbonization/components/modal/index.gts b/showcase/app/components/page-carbonization/components/modal/index.gts new file mode 100644 index 00000000000..06d5a5a5f08 --- /dev/null +++ b/showcase/app/components/page-carbonization/components/modal/index.gts @@ -0,0 +1,436 @@ +import type { TemplateOnlyComponent } from '@ember/component/template-only'; +import { pageTitle } from 'ember-page-title'; +import { capitalize } from '@ember/string'; +import { get } from '@ember/object'; +import { eq } from 'ember-truth-helpers'; + +import ShwTextH1 from 'showcase/components/shw/text/h1'; +import ShwTextH2 from 'showcase/components/shw/text/h2'; +import ShwTextH3 from 'showcase/components/shw/text/h3'; +import ShwDivider from 'showcase/components/shw/divider'; +import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid'; + +import { + HdsModal, + HdsButton, + HdsButtonSet, +} from '@hashicorp/design-system-components/components'; + +import { COLORS } from '@hashicorp/design-system-components/components/hds/modal/index'; +import { NAMES as ICON_NAMES } from '@hashicorp/design-system-components/components/hds/icon/index'; + +// Static color to icon mapping +const colorToIconMap: Record< + (typeof COLORS)[number], + (typeof ICON_NAMES)[number] | undefined +> = { + neutral: undefined, + warning: 'alert-triangle', + critical: 'alert-diamond', +}; + +const ModalCarbonizationIndex: TemplateOnlyComponent = ; + +export default ModalCarbonizationIndex; diff --git a/showcase/app/components/page-carbonization/components/rich-tooltip/index.gts b/showcase/app/components/page-carbonization/components/rich-tooltip/index.gts new file mode 100644 index 00000000000..b11a8410ae5 --- /dev/null +++ b/showcase/app/components/page-carbonization/components/rich-tooltip/index.gts @@ -0,0 +1,242 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TemplateOnlyComponent } from '@ember/component/template-only'; +import { pageTitle } from 'ember-page-title'; +import { eq } from 'ember-truth-helpers'; + +import ShwTextH1 from 'showcase/components/shw/text/h1'; +import ShwTextH2 from 'showcase/components/shw/text/h2'; +import ShwTextH3 from 'showcase/components/shw/text/h3'; +import ShwTextBody from 'showcase/components/shw/text/body'; +import ShwDivider from 'showcase/components/shw/divider'; +import ShwFlex from 'showcase/components/shw/flex'; +import ShwGrid from 'showcase/components/shw/grid'; +import ShwPlaceholder from 'showcase/components/shw/placeholder'; +import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid'; + +import { HdsRichTooltip } from '@hashicorp/design-system-components/components'; +import { SIZES as TOGGLE_SIZES } from '@hashicorp/design-system-components/components/hds/rich-tooltip/toggle'; +import { PLACEMENTS } from '@hashicorp/design-system-components/modifiers/hds-anchored-position'; + +const STATES = ['default', 'hover', 'active', 'focus']; + +const RichTooltipCarbonizationIndex: TemplateOnlyComponent = ; + +export default RichTooltipCarbonizationIndex; diff --git a/showcase/app/components/page-carbonization/components/segmented-group/index.gts b/showcase/app/components/page-carbonization/components/segmented-group/index.gts new file mode 100644 index 00000000000..5859a66b8e3 --- /dev/null +++ b/showcase/app/components/page-carbonization/components/segmented-group/index.gts @@ -0,0 +1,548 @@ +import type { TemplateOnlyComponent } from '@ember/component/template-only'; +import { pageTitle } from 'ember-page-title'; +import { capitalize } from '@ember/string'; +import { concat } from '@ember/helper'; + +import ShwTextH1 from 'showcase/components/shw/text/h1'; +import ShwTextH2 from 'showcase/components/shw/text/h2'; +import ShwTextH3 from 'showcase/components/shw/text/h3'; +import ShwDivider from 'showcase/components/shw/divider'; +import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid'; + +import { + HdsSegmentedGroup, + HdsFormField, +} from '@hashicorp/design-system-components/components'; +import type { HdsFormTextInputTypes } from '@hashicorp/design-system-components/components/hds/form/text-input/types'; + +const TEXT_INPUT_TYPES: HdsFormTextInputTypes[] = [ + 'text', + 'search', + 'date', + 'time', + 'password', +]; + +const SegmentedGroupCarbonizationIndex: TemplateOnlyComponent = ; + +export default SegmentedGroupCarbonizationIndex; diff --git a/showcase/app/components/page-carbonization/components/separator/index.gts b/showcase/app/components/page-carbonization/components/separator/index.gts new file mode 100644 index 00000000000..2baafdbf9c2 --- /dev/null +++ b/showcase/app/components/page-carbonization/components/separator/index.gts @@ -0,0 +1,34 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TemplateOnlyComponent } from '@ember/component/template-only'; +import { pageTitle } from 'ember-page-title'; + +import ShwTextH1 from 'showcase/components/shw/text/h1'; +import ShwTextH2 from 'showcase/components/shw/text/h2'; +import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid'; + +import { HdsSeparator } from '@hashicorp/design-system-components/components'; + +const SeparatorCarbonizationIndex: TemplateOnlyComponent = ; + +export default SeparatorCarbonizationIndex; diff --git a/showcase/app/components/page-carbonization/components/tooltip/index.gts b/showcase/app/components/page-carbonization/components/tooltip/index.gts new file mode 100644 index 00000000000..339986dd560 --- /dev/null +++ b/showcase/app/components/page-carbonization/components/tooltip/index.gts @@ -0,0 +1,294 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TemplateOnlyComponent } from '@ember/component/template-only'; +import { pageTitle } from 'ember-page-title'; +import { hash } from '@ember/helper'; +import { eq, or } from 'ember-truth-helpers'; + +import ShwTextH1 from 'showcase/components/shw/text/h1'; +import ShwTextH2 from 'showcase/components/shw/text/h2'; +import ShwTextH3 from 'showcase/components/shw/text/h3'; +import ShwFlex from 'showcase/components/shw/flex'; +import ShwGrid from 'showcase/components/shw/grid'; +import ShwDivider from 'showcase/components/shw/divider'; +import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid'; + +import hdsTooltip from '@hashicorp/design-system-components/modifiers/hds-tooltip'; +import { + HdsBadge, + HdsIcon, + HdsTooltipButton, +} from '@hashicorp/design-system-components/components'; +import { PLACEMENTS } from '@hashicorp/design-system-components/components/hds/tooltip-button/index'; + +const STATES = ['default', 'hover', 'focus']; + +const TooltipCarbonizationIndex: TemplateOnlyComponent = ; + +export default TooltipCarbonizationIndex; diff --git a/showcase/app/components/page-carbonization/foundations/color/index.gts b/showcase/app/components/page-carbonization/foundations/color/index.gts new file mode 100644 index 00000000000..6fef4e151b8 --- /dev/null +++ b/showcase/app/components/page-carbonization/foundations/color/index.gts @@ -0,0 +1,38 @@ +import type { TemplateOnlyComponent } from '@ember/component/template-only'; +import { pageTitle } from 'ember-page-title'; +import { helper } from '@ember/component/helper'; +import { eq, notEq, and } from 'ember-truth-helpers'; + +import ShwTextH1 from 'showcase/components/shw/text/h1'; +import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid'; +import ShwCarbonizationTokenPreviewColor from 'showcase/components/shw/carbonization/token-preview/color'; + +import type { DesignToken } from '../../../../../types/design-token'; + +import TOKENS_RAW from '@hashicorp/design-system-tokens/dist/docs/products/tokens.json'; + +const tokenShortName = helper(function ([token]: [DesignToken]) { + return token.name?.replace(/^token-/, ''); +}); + +const ColorCarbonizationIndex: TemplateOnlyComponent = ; +export default ColorCarbonizationIndex; diff --git a/showcase/app/components/page-carbonization/foundations/focus-ring/index.gts b/showcase/app/components/page-carbonization/foundations/focus-ring/index.gts new file mode 100644 index 00000000000..32ceb2054d1 --- /dev/null +++ b/showcase/app/components/page-carbonization/foundations/focus-ring/index.gts @@ -0,0 +1,1343 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +import type { TemplateOnlyComponent } from '@ember/component/template-only'; +import { pageTitle } from 'ember-page-title'; +import style from 'ember-style-modifier'; +import { capitalize } from '@ember/string'; +import { eq } from 'ember-truth-helpers'; +import { array, concat, hash } from '@ember/helper'; + +import ShwTextH1 from 'showcase/components/shw/text/h1'; +import ShwTextH2 from 'showcase/components/shw/text/h2'; +import ShwTextH4 from 'showcase/components/shw/text/h4'; +import ShwDivider from 'showcase/components/shw/divider'; +import ShwFlex from 'showcase/components/shw/flex'; +import ShwGrid from 'showcase/components/shw/grid'; +import ShwPlaceholder from 'showcase/components/shw/placeholder'; +import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid'; +import FormSuperSelectCodeFragmentWithSingleBaseElement from 'showcase/components/page-components/form/super-select/code-fragments/with-single-base-element'; +import FormSuperSelectCodeFragmentWithMultipleBaseElement from 'showcase/components/page-components/form/super-select/code-fragments/with-multiple-base-element'; +import NOOP from 'showcase/utils/noop'; + +import { + HdsAccordionItem, + HdsAppFooter, + HdsAppHeader, + HdsAppHeaderHomeLink, + HdsAppSideNavListBackLink, + HdsAppSideNavListLink, + HdsAppSideNavToggleButton, + HdsBadge, + HdsBreadcrumb, + HdsBreadcrumbItem, + HdsBreadcrumbTruncation, + HdsButton, + HdsCodeEditor, + HdsCopyButton, + HdsCopySnippet, + HdsDismissButton, + HdsDropdown, + HdsDropdownToggleButton, + HdsDropdownToggleIcon, + HdsDropdownListItemInteractive, + HdsDropdownListItemCheckmark, + HdsDropdownListItemCheckbox, + HdsDropdownListItemRadio, + HdsFormCheckboxBase, + HdsFormFileInputBase, + HdsFormMaskedInputBase, + HdsFormRadioBase, + HdsFormRadioCard, + HdsFormSelectBase, + HdsFormTextareaBase, + HdsFormTextInputBase, + HdsFormToggleBase, + HdsIcon, + HdsLinkInline, + HdsLinkStandalone, + HdsPaginationNavArrow, + HdsPaginationNavNumber, + HdsRevealToggleButton, + HdsRichTooltip, + HdsStepperNav, + HdsTabsTab, + HdsTable, + HdsTableTh, + HdsTableThSelectable, + HdsTableThSort, + HdsAdvancedTableTh, + HdsAdvancedTableThSelectable, + HdsAdvancedTableThSort, + HdsAdvancedTableTd, + HdsTableTr, + HdsTag, + HdsTextBody, + HdsTooltipButton, +} from '@hashicorp/design-system-components/components'; +import HdsAdvancedTableThResizeHandle from '@hashicorp/design-system-components/components/hds/advanced-table/th-resize-handle'; +import HdsAdvancedTableThReorderHandle from '@hashicorp/design-system-components/components/hds/advanced-table/th-reorder-handle'; + +import { + COLORS as BUTTON_COLORS, + SIZES as BUTTON_SIZES, +} from '@hashicorp/design-system-components/components/hds/button/index'; +import { COLORS as DROPDOWN_TOGGLE_COLORS } from '@hashicorp/design-system-components/components/hds/dropdown/toggle/button'; +import { COLORS as DROPDOWN_ITEM_INTERACTIVE_COLORS } from '@hashicorp/design-system-components/components/hds/dropdown/list-item/interactive'; +import { SIZES as TABS_SIZES } from '@hashicorp/design-system-components/components/hds/tabs/index'; +import { COLORS as TAG_COLORS } from '@hashicorp/design-system-components/components/hds/tag/index'; + +const CODE_EDITOR_SNIPPET = `package main +import "fmt" +func main() { + fmt.Println("Hello, world!") +}`; + +const FocusRingCarbonizationIndex: TemplateOnlyComponent = ; + +export default FocusRingCarbonizationIndex; diff --git a/showcase/app/components/page-carbonization/foundations/typography/index.gts b/showcase/app/components/page-carbonization/foundations/typography/index.gts new file mode 100644 index 00000000000..78b03fd539e --- /dev/null +++ b/showcase/app/components/page-carbonization/foundations/typography/index.gts @@ -0,0 +1,103 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +import type { TemplateOnlyComponent } from '@ember/component/template-only'; +import { pageTitle } from 'ember-page-title'; +import { get } from '@ember/helper'; + +import ShwTextH1 from 'showcase/components/shw/text/h1'; + +import ShwFlex from 'showcase/components/shw/flex'; +import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid'; +import ShwCarbonizationStylePreviewTypography from 'showcase/components/shw/carbonization/style-preview/typography'; + +import { STYLES_COMBINATIONS } from 'showcase/components/page-foundations/typography/sub-sections/styles'; + +type StyleMapping = { + mapsTo: string; + weights: Record; +}; + +const HDS_CARBON_STYLES_MAPPING: Record = { + 'display-500': { mapsTo: 'heading-05', weights: { bold: 'semibold' } }, + 'display-400': { + mapsTo: 'heading-04', + weights: { medium: 'regular', semibold: 'semibold', bold: 'semibold' }, + }, + 'display-300': { + mapsTo: 'heading-03', + weights: { medium: 'regular', semibold: 'semibold', bold: 'semibold' }, + }, + 'display-200': { mapsTo: 'heading-02', weights: { semibold: 'semibold' } }, + 'display-100': { mapsTo: 'heading-01', weights: { medium: 'regular' } }, + 'body-300': { + mapsTo: 'body-02', + weights: { regular: 'regular', medium: 'regular', semibold: 'semibold' }, + }, + 'body-200': { + mapsTo: 'body-01', + weights: { regular: 'regular', medium: 'regular', semibold: 'semibold' }, + }, + 'body-100': { + mapsTo: 'body-compact-01', + weights: { regular: 'regular', medium: 'regular', semibold: 'semibold' }, + }, + 'code-300': { + mapsTo: 'code-02', + weights: { regular: 'regular', bold: 'semibold' }, + }, + 'code-200': { + mapsTo: 'code-02', + weights: { regular: 'regular', bold: 'semibold' }, + }, + 'code-100': { + mapsTo: 'code-01', + weights: { regular: 'regular', bold: 'semibold' }, + }, +}; + +const TypographyCarbonizationIndex: TemplateOnlyComponent = ; + +export default TypographyCarbonizationIndex; diff --git a/showcase/app/components/page-carbonization/utilities/dismiss-button/index.gts b/showcase/app/components/page-carbonization/utilities/dismiss-button/index.gts new file mode 100644 index 00000000000..9f9d312f517 --- /dev/null +++ b/showcase/app/components/page-carbonization/utilities/dismiss-button/index.gts @@ -0,0 +1,85 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TemplateOnlyComponent } from '@ember/component/template-only'; +import { pageTitle } from 'ember-page-title'; + +import ShwTextH1 from 'showcase/components/shw/text/h1'; +import ShwTextH2 from 'showcase/components/shw/text/h2'; +import ShwDivider from 'showcase/components/shw/divider'; +import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid'; + +import { HdsDismissButton } from '@hashicorp/design-system-components/components'; + +const DismissButtonCarbonizationIndex: TemplateOnlyComponent = ; + +export default DismissButtonCarbonizationIndex; diff --git a/showcase/app/components/page-components/application-state/code-fragments/with-action-variants.gts b/showcase/app/components/page-components/application-state/code-fragments/with-action-variants.gts index a455323c868..36e1bf11d3b 100644 --- a/showcase/app/components/page-components/application-state/code-fragments/with-action-variants.gts +++ b/showcase/app/components/page-components/application-state/code-fragments/with-action-variants.gts @@ -5,21 +5,41 @@ import { HdsApplicationState } from '@hashicorp/design-system-components/components'; -import type { TemplateOnlyComponent } from '@ember/component/template-only'; +import Component from '@glimmer/component'; import type { HdsApplicationStateSignature } from '@hashicorp/design-system-components/components/hds/application-state/index'; export interface CodeFragmentWithActionVariantsSignature { Args: { - align: HdsApplicationStateSignature['Args']['align']; + align?: HdsApplicationStateSignature['Args']['align']; hasDropdown?: boolean; hasPrimaryAction?: boolean; hasSecondaryAction?: boolean; hasStandaloneLink?: boolean; + dropdownText?: string; + primaryActionText?: string; + secondaryActionText?: string; + standaloneLinkText?: string; }; Element: HdsApplicationStateSignature['Element']; } -const CodeFragmentWithActionVariants: TemplateOnlyComponent = +export default class CodeFragmentWithActionVariants extends Component { + get primaryActionText(): string { + return this.args.primaryActionText ?? 'Primary action'; + } + + get secondaryActionText(): string { + return this.args.secondaryActionText ?? 'Secondary action'; + } + + get standaloneLinkText(): string { + return this.args.standaloneLinkText ?? 'Learn more'; + } + + get dropdownText(): string { + return this.args.dropdownText ?? 'Choose an option'; + } + ; - -export default CodeFragmentWithActionVariants; + +} diff --git a/showcase/app/components/page-components/badge-count/index.gts b/showcase/app/components/page-components/badge-count/index.gts index cd0994b2abe..c8db86639d7 100644 --- a/showcase/app/components/page-components/badge-count/index.gts +++ b/showcase/app/components/page-components/badge-count/index.gts @@ -4,7 +4,6 @@ */ import type { TemplateOnlyComponent } from '@ember/component/template-only'; - import { pageTitle } from 'ember-page-title'; import ShwTextH1 from 'showcase/components/shw/text/h1'; diff --git a/showcase/app/components/page-components/badge/sub-sections/content.gts b/showcase/app/components/page-components/badge/sub-sections/content.gts index fcd98d480db..4bfbaef90a1 100644 --- a/showcase/app/components/page-components/badge/sub-sections/content.gts +++ b/showcase/app/components/page-components/badge/sub-sections/content.gts @@ -6,8 +6,8 @@ import type { TemplateOnlyComponent } from '@ember/component/template-only'; import style from 'ember-style-modifier'; -import ShwFlex from 'showcase/components/shw/flex'; import ShwTextH2 from 'showcase/components/shw/text/h2'; +import ShwFlex from 'showcase/components/shw/flex'; import { HdsBadge } from '@hashicorp/design-system-components/components'; diff --git a/showcase/app/components/page-components/code-block/sub-sections/base-elements.gts b/showcase/app/components/page-components/code-block/sub-sections/base-elements.gts index 5504654b4a3..bdb5774773e 100644 --- a/showcase/app/components/page-components/code-block/sub-sections/base-elements.gts +++ b/showcase/app/components/page-components/code-block/sub-sections/base-elements.gts @@ -6,12 +6,16 @@ import Component from '@glimmer/component'; import { capitalize } from '@ember/string'; import { array } from '@ember/helper'; import { modifier } from 'ember-modifier'; +import style from 'ember-style-modifier'; import ShwGrid from 'showcase/components/shw/grid'; import ShwTextH2 from 'showcase/components/shw/text/h2'; import ShwTextH3 from 'showcase/components/shw/text/h3'; -import { HdsCodeBlockCopyButton } from '@hashicorp/design-system-components/components'; +import { + HdsCodeBlockCopyButton, + HdsIcon, +} from '@hashicorp/design-system-components/components'; import { SUCCESS_ICON, ERROR_ICON, @@ -30,10 +34,14 @@ export default class SubSectionBaseElements extends Component { if (icon) { if (status === 'success') { - // eg. href="#flight-clipboard-checked-16" - icon.setAttribute('href', `#flight-${SUCCESS_ICON}-16`); + // Note: Timeout is needed to allow the copy button component to load the default icon before it's replaced with the status icon + window.setTimeout(() => { + icon.setAttribute('href', `#hds-icon-flight-${SUCCESS_ICON}-16`); + }, 200); } else if (status === 'error') { - icon.setAttribute('href', `#flight-${ERROR_ICON}-16`); + window.setTimeout(() => { + icon.setAttribute('href', `#hds-icon-flight-${ERROR_ICON}-16`); + }, 200); } } }); @@ -46,6 +54,9 @@ export default class SubSectionBaseElements extends Component { Copy me + {{! Note: HdsIcons are needed to preload the SVGs for the copy button statuses }} + + {{#each STATES as |state|}} { + icon.setAttribute('href', `#hds-icon-flight-${SUCCESS_ICON}-16`); + }, 200); } else if (status === 'error') { - icon.setAttribute('href', `#flight-${ERROR_ICON}-16`); + window.setTimeout(() => { + icon.setAttribute('href', `#hds-icon-flight-${ERROR_ICON}-16`); + }, 200); } } }); @@ -92,6 +99,9 @@ export default class SubSectionBaseElements extends Component { States
+ {{! Note: HdsIcons are needed to preload the SVGs for the copy button statuses }} + + {{#each SIZES as |size|}} {{#each STATES as |state|}} diff --git a/showcase/app/components/page-components/copy/snippet/sub-sections/states.gts b/showcase/app/components/page-components/copy/snippet/sub-sections/states.gts index 46af2922e45..6dbb0094369 100644 --- a/showcase/app/components/page-components/copy/snippet/sub-sections/states.gts +++ b/showcase/app/components/page-components/copy/snippet/sub-sections/states.gts @@ -8,12 +8,16 @@ import { capitalize } from '@ember/string'; import { array } from '@ember/helper'; import { eq, or } from 'ember-truth-helpers'; import { modifier } from 'ember-modifier'; +import style from 'ember-style-modifier'; import ShwDivider from 'showcase/components/shw/divider'; import ShwGrid from 'showcase/components/shw/grid'; import ShwTextH2 from 'showcase/components/shw/text/h2'; -import { HdsCopySnippet } from '@hashicorp/design-system-components/components'; +import { + HdsCopySnippet, + HdsIcon, +} from '@hashicorp/design-system-components/components'; import { COLORS, SUCCESS_ICON, @@ -33,10 +37,14 @@ export default class SubSectionBaseElements extends Component { if (icon) { if (status === 'success') { - // eg. href="#flight-clipboard-checked-16" - icon.setAttribute('href', `#flight-${SUCCESS_ICON}-16`); + // Note: Timeout is needed to allow the copy button component to load the default icon before it's replaced with the status icon + window.setTimeout(() => { + icon.setAttribute('href', `#hds-icon-flight-${SUCCESS_ICON}-16`); + }, 200); } else if (status === 'error') { - icon.setAttribute('href', `#flight-${ERROR_ICON}-16`); + window.setTimeout(() => { + icon.setAttribute('href', `#hds-icon-flight-${ERROR_ICON}-16`); + }, 200); } } }); @@ -45,6 +53,9 @@ export default class SubSectionBaseElements extends Component {