From 20d483862012110a46ace1fbbc39c19367153cd7 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 25 Sep 2025 21:28:20 +0100 Subject: [PATCH 001/224] TODO - added temporary file to main feature branch for phase 1 --- DELETE-ME.txt | 1 + 1 file changed, 1 insertion(+) create mode 100644 DELETE-ME.txt diff --git a/DELETE-ME.txt b/DELETE-ME.txt new file mode 100644 index 00000000000..36111d41a15 --- /dev/null +++ b/DELETE-ME.txt @@ -0,0 +1 @@ +DELETE ME! \ No newline at end of file From c7bad469c3e2d77a9ee8f4c326d069cd8d711dfc Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 25 Sep 2025 21:28:20 +0100 Subject: [PATCH 002/224] TODO - added temporary file to main feature branch for phase 1 --- DELETE-ME.txt | 1 + 1 file changed, 1 insertion(+) create mode 100644 DELETE-ME.txt diff --git a/DELETE-ME.txt b/DELETE-ME.txt new file mode 100644 index 00000000000..36111d41a15 --- /dev/null +++ b/DELETE-ME.txt @@ -0,0 +1 @@ +DELETE ME! \ No newline at end of file From 71fd7ef8ac07c8fede04e9448bc14f565f4801d3 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Mon, 15 Sep 2025 11:14:38 +0100 Subject: [PATCH 003/224] added temporary changeset to feature branch for `$modes` support --- .changeset/tough-cows-rule.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 .changeset/tough-cows-rule.md diff --git a/.changeset/tough-cows-rule.md b/.changeset/tough-cows-rule.md new file mode 100644 index 00000000000..1f2029bc9b8 --- /dev/null +++ b/.changeset/tough-cows-rule.md @@ -0,0 +1,8 @@ +--- +"@hashicorp/design-system-tokens": major +--- + +MODES - TODOs + +- Decide if this is a `major` or a `minor` +- Add a proper changeset entry here \ No newline at end of file From 69d5a5c7a9d085196f6f7b6e855a0de8b41406cc Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Mon, 15 Sep 2025 11:17:25 +0100 Subject: [PATCH 004/224] TEMP - added `$modes` entry to `color.palette.neutral-0` --- packages/tokens/src/global/color/palette-neutrals.json | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/tokens/src/global/color/palette-neutrals.json b/packages/tokens/src/global/color/palette-neutrals.json index e064e7503d2..e7f4ddb8156 100644 --- a/packages/tokens/src/global/color/palette-neutrals.json +++ b/packages/tokens/src/global/color/palette-neutrals.json @@ -44,7 +44,14 @@ "neutral-0": { "$type": "color", "$value": "#ffffff", - "group": "palette" + "group": "palette", + "$modes": { + "hds": "#ffffff", + "cds-0": "#ffffff", + "cds-10": "#cccccc", + "cds-90": "#333333", + "cds-100": "#000000" + } }, "alpha-300": { "$type": "color", From ae999552c0b8b2f1d770bd33b18bf24abd62b833 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Mon, 15 Sep 2025 16:43:20 +0100 Subject: [PATCH 005/224] refactored logic used to provide SD configuration per target --- .../scripts/build-parts/@types/Config.d.ts | 16 -- .../build-parts/getStyleDictionaryConfig.ts | 162 ++++++++++++++++++ packages/tokens/scripts/build.ts | 155 +---------------- 3 files changed, 170 insertions(+), 163 deletions(-) delete mode 100644 packages/tokens/scripts/build-parts/@types/Config.d.ts create mode 100644 packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts diff --git a/packages/tokens/scripts/build-parts/@types/Config.d.ts b/packages/tokens/scripts/build-parts/@types/Config.d.ts deleted file mode 100644 index 3d633c7b38c..00000000000 --- a/packages/tokens/scripts/build-parts/@types/Config.d.ts +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import { Config } from 'style-dictionary'; - -export type ConfigTarget = { - source: Config['source'], - transformGroup: Config['transformGroup'], - platforms: string[], -}; - -export type ConfigTargets = { - [key: string]: ConfigTarget -}; diff --git a/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts new file mode 100644 index 00000000000..00e530a9c77 --- /dev/null +++ b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts @@ -0,0 +1,162 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { Config, DesignToken } from 'style-dictionary/types'; + +export const targets = ['products', 'devdot', 'marketing', 'cloud-email']; + +export type Target = typeof targets[number]; + +// uncomment this to enable debugging +const baseConfig: Config = { + // 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 { + + 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 (target === 'devdot') { + return { + ...baseConfig, + 'source': [ + `src/global/**/*.json`, + `src/products/shared/**/*.json`, + // just uncomment the line below to include overrides for 'devdot' tokens + `src/devdot/**/*.json` + ], + 'platforms': { + 'web/css-variables': { + buildPath: 'dist/devdot/css/', + 'transformGroup': 'products/web', + prefix: 'token', + basePxFontSize: 16, + files: [ + { + destination: 'tokens.css', + format: 'css/variables', + filter: excludePrivateTokens, + } + ], + actions: ['generate-css-helpers'], + } + } + }; + } + + if (target === 'marketing') { + return { + ...baseConfig, + 'source': [ + `src/global/**/*.json`, + `src/products/shared/**/*.json`, + ], + 'platforms': { + 'web/css-variables': { + buildPath: 'dist/marketing/css/', + 'transformGroup': 'marketing/web', + prefix: 'token', + basePxFontSize: 16, + files: [ + { + destination: 'tokens.css', + format: 'css/variables', + filter: excludePrivateTokens, + } + ], + actions: ['generate-css-helpers'], + }, + 'json': { + buildPath: 'dist/marketing/', + 'transformGroup': 'marketing/web', + prefix: 'token', + basePxFontSize: 16, + files: [ + { + destination: 'tokens.json', + format: 'json', + filter: excludePrivateTokens, + } + ] + } + } + }; + } + + if (target === 'cloud-email') { + // these tokens will be consumed by the email templating system in https://github.com/hashicorp/cloud-email + return { + ...baseConfig, + // we need only foundational tokens (colors, typography, etc) + 'source': [ + `src/global/**/*.json`, + `src/products/shared/color/**/*.json`, + `src/products/shared/typography.json`, + ], + 'platforms': { + 'email/sass-variables': { + buildPath: `dist/cloud-email/`, + 'transformGroup': 'products/email', + prefix: 'token', + files: [ + { + destination: 'tokens.scss', + format: 'scss/variables', + filter: excludePrivateTokens, + } + ], + actions: ['generate-css-helpers'], + } + } + } + }; +}; diff --git a/packages/tokens/scripts/build.ts b/packages/tokens/scripts/build.ts index b79eef05589..e4667d959a2 100644 --- a/packages/tokens/scripts/build.ts +++ b/packages/tokens/scripts/build.ts @@ -4,7 +4,7 @@ */ import StyleDictionary from 'style-dictionary'; -import type { Config, DesignToken, Platform } from 'style-dictionary/types'; +import type { DesignToken, PlatformConfig } from 'style-dictionary/types'; import tinycolor from 'tinycolor2'; @@ -14,9 +14,8 @@ import { fileURLToPath } from 'url'; import { dirname } from 'path'; import { cloneDeep } from 'lodash-es'; -import type { ConfigTargets } from './build-parts/@types/Config.d.ts'; - import { generateCssHelpers } from './build-parts/generateCssHelpers.ts'; +import { targets, getStyleDictionaryConfig } from './build-parts/getStyleDictionaryConfig.ts'; // SCRIPT CONFIG @@ -71,9 +70,9 @@ StyleDictionary.registerTransform({ // (see `isFontSize()` and the `transforms.sizePx` transformation, for example) return token.$type === 'font-size'; }, - transform: (token: DesignToken, platform: Platform) => { + transform: (token: DesignToken, platformConfig: PlatformConfig) => { const val = parseFloat(token.$value); - const baseFont = platform?.basePxFontSize || 16; + const baseFont = platformConfig?.basePxFontSize || 16; const unit = token.unit; if (isNaN(val)) { console.error(`🚨 Invalid Number: '${token.name}: ${token.$value}' is not a valid number, cannot transform to 'rem'.\n`); @@ -95,10 +94,10 @@ StyleDictionary.registerTransform({ // (see `isFontSize()` and the `transforms.sizePx` transformation, for example) return token.$type === 'font-size'; }, - transform: (token: DesignToken, platform: Platform) => { + transform: (token: DesignToken, platformConfig: PlatformConfig) => { const val = parseFloat(token.$value); const unit = token.unit; - const baseFont = platform?.basePxFontSize || 16; + const baseFont = platformConfig?.basePxFontSize || 16; if (isNaN(val)) { console.error(`🚨 Invalid Number: '${token.name}: ${token.$value}' is not a valid number, cannot transform to 'px'.\n`); } @@ -224,144 +223,6 @@ StyleDictionary.registerAction({ undo: () => {} }); -// DYNAMIC CONFIG - -const targets: ConfigTargets = { - 'products': { - 'source': [ - `src/global/**/*.json`, - `src/products/shared/**/*.json` - ], - 'transformGroup': 'products/web', - 'platforms': ['web/css-variables', 'docs/json'] - }, - 'devdot': { - 'source': [ - `src/global/**/*.json`, - `src/products/shared/**/*.json`, - // just uncomment the line below to include overrides for "devdot" tokens - `src/devdot/**/*.json` - ], - 'transformGroup': 'products/web', - 'platforms': ['web/css-variables'] - }, - 'marketing': { - 'source': [ - `src/global/**/*.json`, - `src/products/shared/**/*.json`, - ], - 'transformGroup': 'marketing/web', - 'platforms': ['web/css-variables', 'json'] - }, - // these tokens will be consumed by the email templating system in https://github.com/hashicorp/cloud-email - 'cloud-email': { - // we need only foundational tokens (colors, typography, etc) - 'source': [ - `src/global/**/*.json`, - `src/products/shared/color/**/*.json`, - `src/products/shared/typography.json`, - ], - 'transformGroup': 'products/email', - 'platforms': ['email/sass-variables'] - } -}; - -function getStyleDictionaryConfig({ target }: { target: string }): Config { - // @ts-ignore safe to ignore, since we control the `targets` object, and the `getStyleDictionaryConfig` invocations - const { source, transformGroup, platforms } = targets[target]; - - // we need to explicitly initialize the `config` object this way to make TS happy - const config: Config = { - // log: { - // // options: warn | error | disabled - // warnings: 'warn', - // // options: default | silent | verbose - // verbosity: 'verbose', - // errors: { - // // options: throw | console - // brokenReferences: 'console', - // }, - // } - }; - config.source = source; - config.platforms = {}; - - if (platforms.includes('web/css-variables')) { - config.platforms['web/css-variables'] = { - transformGroup, - "buildPath": `dist/${target}/css/`, - "prefix": "token", - "basePxFontSize": 16, - "files": [ - { - "destination": "tokens.css", - "format": "css/variables", - "filter": function(token: DesignToken) { - return !token.private; - }, - } - ], - 'actions': ['generate-css-helpers'], - } - } - - if (platforms.includes("docs/json")) { - config.platforms["docs/json"] = { - transformGroup, - "buildPath": `dist/docs/${target}/`, - "prefix": "token", - "basePxFontSize": 16, - "files": [ - { - "destination": "tokens.json", - "format": "docs/json", - "filter": function(token: DesignToken) { - return !token.private; - }, - } - ] - } - } - - if (platforms.includes("json")) { - config.platforms["json"] = { - transformGroup, - "buildPath": `dist/${target}/`, - "prefix": "token", - "basePxFontSize": 16, - "files": [ - { - "destination": "tokens.json", - "format": "json", - "filter": function(token: DesignToken) { - return !token.private; - }, - } - ] - } - } - - if (platforms.includes("email/sass-variables")) { - config.platforms["email/sass-variables"] = { - transformGroup, - "buildPath": `dist/${target}/`, - "prefix": "token", - "files": [ - { - "destination": "tokens.scss", - "format": "scss/variables", - "filter": function(token: DesignToken) { - return !token.private; - }, - } - ], - 'actions': ['generate-css-helpers'], - } - } - - return config; -} - // PROCESS THE DESIGN TOKENS console.log('Build started...'); @@ -371,10 +232,10 @@ console.log('\n=============================================='); console.log(`\nCleaning up dist folder`); fs.emptyDirSync(distFolder); -for (const target of Object.keys(targets)) { +for (const target of targets) { const StyleDictionaryInstance = new StyleDictionary(getStyleDictionaryConfig({ target })); - console.log(`\nProcessing target "${target}"...`); + console.log(`\n---\n\nProcessing target "${target}"...`); await StyleDictionaryInstance.hasInitialized; await StyleDictionaryInstance.buildAllPlatforms() console.log('\nEnd processing'); From af2f34ecbac17058f1f1b70484982eeddfb06cf0 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 16 Sep 2025 15:00:33 +0100 Subject: [PATCH 006/224] progress on logic for handling `$modes` - 1 --- .../build-parts/getStyleDictionaryConfig.ts | 125 +++++++++++++----- packages/tokens/scripts/build.ts | 43 +++++- 2 files changed, 131 insertions(+), 37 deletions(-) diff --git a/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts index 00e530a9c77..7dc16c7ac90 100644 --- a/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts +++ b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts @@ -6,8 +6,10 @@ import type { Config, DesignToken } from 'style-dictionary/types'; export const targets = ['products', 'devdot', 'marketing', 'cloud-email']; +export const modes = ['hds', 'cds-0', 'cds-10', 'cds-90', 'cds-100']; export type Target = typeof targets[number]; +export type Mode = typeof modes[number]; // uncomment this to enable debugging const baseConfig: Config = { @@ -24,45 +26,96 @@ const excludePrivateTokens = (token: DesignToken) => { return !token.private; } -export function getStyleDictionaryConfig({ target }: { target: Target}): Config { +// const getFilterForMode = (mode: Mode) => { +// // this function returns a function to filter based on +// return function (token: DesignToken) { +// // TODO! +// console.log('xxx filter for mode', mode); +// return !token.private; +// }; +// } + +export function getStyleDictionaryConfig({ target, mode }: { target: Target, mode: Mode }): Config { 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/global/**/*.json`, + `src/products/shared/**/*.json` + ], + platforms: { + [`web/css-variables-mode-${mode}`]: { + buildPath: 'dist/products/css/', + transformGroup: 'products/web', + prefix: 'token', + basePxFontSize: 16, + files: [ + { + destination: `themed-tokens/with-root-selector/${mode}-tokens.css`, + format: 'css/variables', + // TODO! + // filter: getFilterForMode(mode), + filter: excludePrivateTokens, + options: { + outputReferences: true, + // outputReferences: (token, { dictionary, usesDtcg }) => { + // // `dictionary` contains `allTokens`, `tokens`, `tokenMap`, `unfilteredTokens`, `unfilteredAllTokens` and `unfilteredTokenMap` props + // // `usesDtcg` tells you whether the Design Token Community Group spec is used with $ prefixes ($value, $type etc.) + // // return true or false + // }, + }, + } + ], + // this has been registered in the `build` file + preprocessors: [`replace-value-for-mode-${mode}`], + // TODO! do we need this? how do we manage CSS helpers for themed tokens? + actions: ['generate-css-helpers'], + } } - } - }; + }; + } else { + // standard tokens + 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 (target === 'devdot') { diff --git a/packages/tokens/scripts/build.ts b/packages/tokens/scripts/build.ts index e4667d959a2..90de7c1715a 100644 --- a/packages/tokens/scripts/build.ts +++ b/packages/tokens/scripts/build.ts @@ -15,7 +15,7 @@ import { dirname } from 'path'; import { cloneDeep } from 'lodash-es'; import { generateCssHelpers } from './build-parts/generateCssHelpers.ts'; -import { targets, getStyleDictionaryConfig } from './build-parts/getStyleDictionaryConfig.ts'; +import { targets, modes, getStyleDictionaryConfig } from './build-parts/getStyleDictionaryConfig.ts'; // SCRIPT CONFIG @@ -23,6 +23,34 @@ 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) => { + // recursively traverse token objects and replace the `$value` with the corresponding colocated `$modes` theme value + function replaceModes(slice: DesignToken) { + if (slice.$modes) { + if (slice.$modes[mode]) { + slice.$value = slice.$modes[mode]; + } else { + console.error(`❌ ERROR - Found themed token without '${mode}' value:`, JSON.stringify(slice, null, 2)); + } + } else { + Object.values(slice).forEach((value) => { + if (typeof value === 'object') { + replaceModes(value); + } + }); + } + return slice; + } + return replaceModes(dictionary); + }, + }); +} + // CUSTOM TRANSFORMS StyleDictionary.registerTransform({ @@ -223,6 +251,7 @@ StyleDictionary.registerAction({ undo: () => {} }); + // PROCESS THE DESIGN TOKENS console.log('Build started...'); @@ -232,6 +261,8 @@ console.log('\n=============================================='); console.log(`\nCleaning up dist folder`); fs.emptyDirSync(distFolder); +// STANDARD TOKENS + for (const target of targets) { const StyleDictionaryInstance = new StyleDictionary(getStyleDictionaryConfig({ target })); @@ -241,6 +272,16 @@ for (const target of targets) { console.log('\nEnd processing'); } +// THEMED TOKENS + +for (const mode of modes) { + + const StyleDictionaryInstance = new StyleDictionary(getStyleDictionaryConfig({ target: 'product', mode })); + console.log(`\n---\n\nProcessing mode "${mode}"...`); + await StyleDictionaryInstance.hasInitialized; + await StyleDictionaryInstance.buildAllPlatforms() + console.log('\nEnd processing'); +} console.log('\n=============================================='); console.log('\nBuild completed!'); From c0a1e3c6aaffc19fdce34d9ece161ae72ecc66cd Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 16 Sep 2025 20:09:47 +0100 Subject: [PATCH 007/224] TEMP - added `modes-testing` tokens --- .../tokens/src/modes-testing/01-colors.json | 40 +++++++++++++++++++ .../tokens/src/modes-testing/02-semantic.json | 33 +++++++++++++++ .../src/modes-testing/03-component.json | 38 ++++++++++++++++++ 3 files changed, 111 insertions(+) create mode 100644 packages/tokens/src/modes-testing/01-colors.json create mode 100644 packages/tokens/src/modes-testing/02-semantic.json create mode 100644 packages/tokens/src/modes-testing/03-component.json diff --git a/packages/tokens/src/modes-testing/01-colors.json b/packages/tokens/src/modes-testing/01-colors.json new file mode 100644 index 00000000000..158c4860435 --- /dev/null +++ b/packages/tokens/src/modes-testing/01-colors.json @@ -0,0 +1,40 @@ +{ + "color": { + "palette": { + "neutral-300": { + "$type": "color", + "$value": "#000000", + "group": "palette", + "$modes": { + "hds": "#000000", + "cds-0": "#c00000", + "cds-10": "#c33333", + "cds-90": "#cccccc", + "cds-100": "#cfffff" + } + }, + "neutral-200": { + "$type": "color", + "$value": "#dedfe3", + "group": "palette" + }, + "neutral-100": { + "$type": "color", + "$value": "#f1f2f3", + "group": "palette" + }, + "neutral-0": { + "$type": "color", + "$value": "#ffffff", + "group": "palette", + "$modes": { + "hds": "#ffffff", + "cds-0": "#cfffff", + "cds-10": "#cccccc", + "cds-90": "#c33333", + "cds-100": "#c00000" + } + } + } + } +} \ No newline at end of file diff --git a/packages/tokens/src/modes-testing/02-semantic.json b/packages/tokens/src/modes-testing/02-semantic.json new file mode 100644 index 00000000000..b9b1329566a --- /dev/null +++ b/packages/tokens/src/modes-testing/02-semantic.json @@ -0,0 +1,33 @@ +{ + "color": { + "foreground": { + "strong": { + "$type": "color", + "$value": "{color.palette.neutral-300}", + "group": "semantic" + }, + "primary": { + "$type": "color", + "$value": "{color.palette.neutral-200}", + "group": "semantic" + }, + "high-contrast": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic" + }, + "semantic-outlier": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-0": "{color.palette.neutral-100}", + "cds-10": "{color.palette.neutral-200}", + "cds-90": "{color.palette.neutral-300}", + "cds-100": "#abcdef" + } + } + } + } +} \ No newline at end of file diff --git a/packages/tokens/src/modes-testing/03-component.json b/packages/tokens/src/modes-testing/03-component.json new file mode 100644 index 00000000000..a19ce4aef34 --- /dev/null +++ b/packages/tokens/src/modes-testing/03-component.json @@ -0,0 +1,38 @@ +{ + "componentA": { + "color": { + "$type": "color", + "$value": "{color.palette.neutral-300}", + "group": "components" + }, + "size": { + "$type": "dimension", + "$value": "123", + "unit": "px", + "group": "components" + } + }, + "componentB": { + "color": { + "$type": "color", + "$value": "{color.palette.neutral-200}", + "group": "components" + }, + "size": { + "$value": "{componentA.size}", + "group": "components" + } + }, + "componentC": { + "color": { + "$value": "{color.foreground.high-contrast}", + "group": "components" + } + }, + "componentD": { + "color": { + "$value": "{color.foreground.semantic-outlier}", + "group": "components" + } + } +} \ No newline at end of file From 9a55689940f4a18bbc9ff2c04424d6ab776de968 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 16 Sep 2025 20:10:05 +0100 Subject: [PATCH 008/224] TEMP - added `expected-CSS-output` files --- .../tokens.css | 43 +++++++++++++++++++ .../tokens.css | 41 ++++++++++++++++++ .../common-tokens.css | 9 ++++ .../dark-tokens.css | 8 ++++ .../light-tokens.css | 8 ++++ .../products/css/tokens.css | 15 +++++++ 6 files changed, 124 insertions(+) create mode 100644 packages/tokens/expected-CSS-output/products/css/themed-tokens-with-css-selectors/tokens.css create mode 100644 packages/tokens/expected-CSS-output/products/css/themed-tokens-with-prefers-color-scheme/tokens.css create mode 100644 packages/tokens/expected-CSS-output/products/css/themed-tokens-with-root-selector/common-tokens.css create mode 100644 packages/tokens/expected-CSS-output/products/css/themed-tokens-with-root-selector/dark-tokens.css create mode 100644 packages/tokens/expected-CSS-output/products/css/themed-tokens-with-root-selector/light-tokens.css create mode 100644 packages/tokens/expected-CSS-output/products/css/tokens.css diff --git a/packages/tokens/expected-CSS-output/products/css/themed-tokens-with-css-selectors/tokens.css b/packages/tokens/expected-CSS-output/products/css/themed-tokens-with-css-selectors/tokens.css new file mode 100644 index 00000000000..f6e323d708c --- /dev/null +++ b/packages/tokens/expected-CSS-output/products/css/themed-tokens-with-css-selectors/tokens.css @@ -0,0 +1,43 @@ +/* These are the light-theme tokens */ + +.shw-theme-light, +[data-shw-theme="light"] { + :root { + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + } +} + +/* --------------------------------------- */ + +/* These are the dark-theme tokens */ + +.shw-theme-dark, +[data-shw-theme="dark"] { + :root { + --token-color-palette-blue-500: #f2f8ff; + --token-color-palette-blue-400: #cce3fe; + --token-color-palette-blue-300: #1060ff; + --token-color-palette-blue-200: #0c56e9; + --token-color-palette-blue-100: #0046d1; + --token-color-palette-blue-50: #1c345f; + } +} + +/* --------------------------------------- */ + +/* These are the common tokens */ + +:root { + --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-stack-code: ui-monospace, Menlo, Consolas, monospace; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 500; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 700; +} diff --git a/packages/tokens/expected-CSS-output/products/css/themed-tokens-with-prefers-color-scheme/tokens.css b/packages/tokens/expected-CSS-output/products/css/themed-tokens-with-prefers-color-scheme/tokens.css new file mode 100644 index 00000000000..7b03dfdb78e --- /dev/null +++ b/packages/tokens/expected-CSS-output/products/css/themed-tokens-with-prefers-color-scheme/tokens.css @@ -0,0 +1,41 @@ +/* These are the light-theme tokens */ + +@media (prefers-color-scheme: light) { + :root { + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + } +} + +/* --------------------------------------- */ + +/* These are the dark-theme tokens */ + +@media (prefers-color-scheme: dark) { + :root { + --token-color-palette-blue-500: #f2f8ff; + --token-color-palette-blue-400: #cce3fe; + --token-color-palette-blue-300: #1060ff; + --token-color-palette-blue-200: #0c56e9; + --token-color-palette-blue-100: #0046d1; + --token-color-palette-blue-50: #1c345f; + } +} + +/* --------------------------------------- */ + +/* These are the common tokens */ + +:root { + --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-stack-code: ui-monospace, Menlo, Consolas, monospace; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 500; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 700; +} diff --git a/packages/tokens/expected-CSS-output/products/css/themed-tokens-with-root-selector/common-tokens.css b/packages/tokens/expected-CSS-output/products/css/themed-tokens-with-root-selector/common-tokens.css new file mode 100644 index 00000000000..9db62f20b57 --- /dev/null +++ b/packages/tokens/expected-CSS-output/products/css/themed-tokens-with-root-selector/common-tokens.css @@ -0,0 +1,9 @@ +:root { + --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-stack-code: ui-monospace, Menlo, Consolas, monospace; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 500; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 700; +} diff --git a/packages/tokens/expected-CSS-output/products/css/themed-tokens-with-root-selector/dark-tokens.css b/packages/tokens/expected-CSS-output/products/css/themed-tokens-with-root-selector/dark-tokens.css new file mode 100644 index 00000000000..f2db36bc937 --- /dev/null +++ b/packages/tokens/expected-CSS-output/products/css/themed-tokens-with-root-selector/dark-tokens.css @@ -0,0 +1,8 @@ +:root { + --token-color-palette-blue-500: #f2f8ff; + --token-color-palette-blue-400: #cce3fe; + --token-color-palette-blue-300: #1060ff; + --token-color-palette-blue-200: #0c56e9; + --token-color-palette-blue-100: #0046d1; + --token-color-palette-blue-50: #1c345f; +} diff --git a/packages/tokens/expected-CSS-output/products/css/themed-tokens-with-root-selector/light-tokens.css b/packages/tokens/expected-CSS-output/products/css/themed-tokens-with-root-selector/light-tokens.css new file mode 100644 index 00000000000..ecea6620252 --- /dev/null +++ b/packages/tokens/expected-CSS-output/products/css/themed-tokens-with-root-selector/light-tokens.css @@ -0,0 +1,8 @@ +:root { + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; +} diff --git a/packages/tokens/expected-CSS-output/products/css/tokens.css b/packages/tokens/expected-CSS-output/products/css/tokens.css new file mode 100644 index 00000000000..17c16789329 --- /dev/null +++ b/packages/tokens/expected-CSS-output/products/css/tokens.css @@ -0,0 +1,15 @@ +:root { + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + --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-stack-code: ui-monospace, Menlo, Consolas, monospace; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 500; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 700; +} From f0c5e942cb355e2862cc9f054f9c170e92b0e890 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 16 Sep 2025 20:11:02 +0100 Subject: [PATCH 009/224] progress on logic for handling `$modes` - 2 --- .../build-parts/getStyleDictionaryConfig.ts | 38 +++++++++++++++---- packages/tokens/scripts/build.ts | 23 ++++++++--- 2 files changed, 48 insertions(+), 13 deletions(-) diff --git a/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts index 7dc16c7ac90..6f739bc9384 100644 --- a/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts +++ b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts @@ -35,20 +35,27 @@ const excludePrivateTokens = (token: DesignToken) => { // }; // } -export function getStyleDictionaryConfig({ target, mode }: { target: Target, mode: Mode }): Config { +export function getStyleDictionaryConfig({ target, mode }: { target: Target, mode?: Mode }): Config { + + // ----------------------- + // PRODUCTS + // ----------------------- if (target === 'products') { if (mode) { - // themed tokens + + // ⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃ + // THEMED TOKENS + // ⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃ + return { ...baseConfig, source: [ - `src/global/**/*.json`, - `src/products/shared/**/*.json` + `src/modes-testing/**/*.json`, ], platforms: { - [`web/css-variables-mode-${mode}`]: { + [`web/themed-css-variables--mode-${mode}`]: { buildPath: 'dist/products/css/', transformGroup: 'products/web', prefix: 'token', @@ -73,12 +80,17 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod // this has been registered in the `build` file preprocessors: [`replace-value-for-mode-${mode}`], // TODO! do we need this? how do we manage CSS helpers for themed tokens? - actions: ['generate-css-helpers'], + // actions: ['generate-css-helpers'], } } }; + } else { - // standard tokens + + // ⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃ + // STANDARD TOKENS + // ⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃ + return { ...baseConfig, source: [ @@ -118,6 +130,10 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod } } + // ----------------------- + // DEVDOT + // ----------------------- + if (target === 'devdot') { return { ...baseConfig, @@ -146,6 +162,10 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod }; } + // ----------------------- + // MARKETING + // ----------------------- + if (target === 'marketing') { return { ...baseConfig, @@ -185,6 +205,10 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod }; } + // ----------------------- + // CLOUD-EMAIL + // ----------------------- + if (target === 'cloud-email') { // these tokens will be consumed by the email templating system in https://github.com/hashicorp/cloud-email return { diff --git a/packages/tokens/scripts/build.ts b/packages/tokens/scripts/build.ts index 90de7c1715a..1bfd506b313 100644 --- a/packages/tokens/scripts/build.ts +++ b/packages/tokens/scripts/build.ts @@ -23,12 +23,18 @@ 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) => { + // console.log("\n\n\n **** _options ****\n\n", JSON.stringify(_options, null, 2)); // recursively traverse token objects and replace the `$value` with the corresponding colocated `$modes` theme value function replaceModes(slice: DesignToken) { if (slice.$modes) { @@ -46,7 +52,10 @@ for (const mode of modes) { } return slice; } - return replaceModes(dictionary); + const xxx = replaceModes(dictionary); + // console.log("\n\n\n **** replaceModes(dictionary) ****\n\n", JSON.stringify(_options, null, 2)); + // return replaceModes(dictionary); + return xxx; }, }); } @@ -252,6 +261,10 @@ StyleDictionary.registerAction({ }); +// ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• +// ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• + + // PROCESS THE DESIGN TOKENS console.log('Build started...'); @@ -261,8 +274,7 @@ console.log('\n=============================================='); console.log(`\nCleaning up dist folder`); fs.emptyDirSync(distFolder); -// STANDARD TOKENS - +// generate standard tokens for (const target of targets) { const StyleDictionaryInstance = new StyleDictionary(getStyleDictionaryConfig({ target })); @@ -272,11 +284,10 @@ for (const target of targets) { console.log('\nEnd processing'); } -// THEMED TOKENS - +// generate themed tokens for (const mode of modes) { - const StyleDictionaryInstance = new StyleDictionary(getStyleDictionaryConfig({ target: 'product', mode })); + const StyleDictionaryInstance = new StyleDictionary(getStyleDictionaryConfig({ target: 'products', mode })); console.log(`\n---\n\nProcessing mode "${mode}"...`); await StyleDictionaryInstance.hasInitialized; await StyleDictionaryInstance.buildAllPlatforms() From 6cfee07a69f8baec2c67d6432ebae1be60480f1d Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 16 Sep 2025 20:21:04 +0100 Subject: [PATCH 010/224] added `attributes/themeable` transformation --- packages/tokens/scripts/build.ts | 26 +++++++++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/packages/tokens/scripts/build.ts b/packages/tokens/scripts/build.ts index 1bfd506b313..3a71971449e 100644 --- a/packages/tokens/scripts/build.ts +++ b/packages/tokens/scripts/build.ts @@ -4,6 +4,7 @@ */ import StyleDictionary from 'style-dictionary'; +import { getReferences, usesReferences } from "style-dictionary/utils"; import type { DesignToken, PlatformConfig } from 'style-dictionary/types'; import tinycolor from 'tinycolor2'; @@ -62,6 +63,25 @@ for (const mode of modes) { // CUSTOM TRANSFORMS +StyleDictionary.registerTransform({ + name: 'attributes/themeable', + type: 'attribute', + transform: (token: DesignToken) => { + let isThemeable = false; + + if ('$modes' in token) { + isThemeable = true; + } + + if (usesReferences(token.original.value)) { + // TODO understand here what I should pass for `StyleDictionary.tokenMap` (even if it apparently works) + const refs = getReferences(token.original.value, StyleDictionary.tokenMap); + isThemeable = refs.some((ref) => '$modes' in ref); + } + return isThemeable ? { themeable: true } : {}; + }, +}); + StyleDictionary.registerTransform({ // the CTI convention is not outdated, but we still need to use the top-level path as `category` for the token name: 'attributes/category', @@ -221,18 +241,18 @@ StyleDictionary.registerTransform({ StyleDictionary.registerTransformGroup({ name: 'products/web', - transforms: ['name/kebab', 'typography/font-family', 'typography/font-size/to-rem', 'typography/letter-spacing', 'dimension/unit', 'color/css', 'color/with-alpha', 'time/duration', 'cubicBezier/css', 'attributes/category'] + transforms: ['attributes/category', 'attributes/themeable', '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`) - transforms: ['name/kebab', 'typography/font-family', 'typography/font-size/to-px', 'typography/letter-spacing', 'dimension/unit', 'color/css', 'color/with-alpha', 'time/duration', 'cubicBezier/css', 'attributes/category'] + transforms: ['attributes/category', 'attributes/themeable', 'name/kebab', 'typography/font-family', 'typography/font-size/to-px', 'typography/letter-spacing', 'dimension/unit', 'color/css', 'color/with-alpha', 'time/duration', 'cubicBezier/css'] }); StyleDictionary.registerTransformGroup({ name: 'marketing/web', - transforms: ['name/kebab', 'typography/font-family', 'typography/font-size/to-rem', 'typography/letter-spacing', 'dimension/unit', 'color/css', 'color/with-alpha', 'time/duration', 'cubicBezier/css', 'attributes/category'] + transforms: ['attributes/category', 'attributes/themeable', '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.registerFormat({ From 7cc7853aa83358d287b239be82e436d4b65b9360 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 16 Sep 2025 21:44:46 +0100 Subject: [PATCH 011/224] progress on logic for handling `$modes` - 3 --- .../build-parts/getStyleDictionaryConfig.ts | 27 +++++++++++++++---- packages/tokens/scripts/build.ts | 8 +++--- 2 files changed, 26 insertions(+), 9 deletions(-) diff --git a/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts index 6f739bc9384..8dd6b3ebabe 100644 --- a/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts +++ b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts @@ -62,19 +62,36 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod basePxFontSize: 16, files: [ { - destination: `themed-tokens/with-root-selector/${mode}-tokens.css`, + destination: `themed-tokens/with-root-selector/${mode}/common-tokens.css`, + format: 'css/variables', + options: { + // TODO understand if is better to output references or not (probably not) + // outputReferences: true, + // outputReferences: (token, { dictionary, usesDtcg }) => { + // // `dictionary` contains `allTokens`, `tokens`, `tokenMap`, `unfilteredTokens`, `unfilteredAllTokens` and `unfilteredTokenMap` props + // // `usesDtcg` tells you whether the Design Token Community Group spec is used with $ prefixes ($value, $type etc.) + // // return true or false + // }, + }, + filter: (token: DesignToken) => { + return !token.private && !(token.attributes && token.attributes.themeable); + }, + }, + { + destination: `themed-tokens/with-root-selector/${mode}/themed-tokens.css`, format: 'css/variables', - // TODO! - // filter: getFilterForMode(mode), - filter: excludePrivateTokens, options: { - outputReferences: true, + // TODO understand if is better to output references or not (probably not) + // outputReferences: true, // outputReferences: (token, { dictionary, usesDtcg }) => { // // `dictionary` contains `allTokens`, `tokens`, `tokenMap`, `unfilteredTokens`, `unfilteredAllTokens` and `unfilteredTokenMap` props // // `usesDtcg` tells you whether the Design Token Community Group spec is used with $ prefixes ($value, $type etc.) // // return true or false // }, }, + filter: (token: DesignToken) => { + return !token.private && (token.attributes && token.attributes.themeable); + }, } ], // this has been registered in the `build` file diff --git a/packages/tokens/scripts/build.ts b/packages/tokens/scripts/build.ts index 3a71971449e..4436a5c011f 100644 --- a/packages/tokens/scripts/build.ts +++ b/packages/tokens/scripts/build.ts @@ -78,7 +78,7 @@ StyleDictionary.registerTransform({ const refs = getReferences(token.original.value, StyleDictionary.tokenMap); isThemeable = refs.some((ref) => '$modes' in ref); } - return isThemeable ? { themeable: true } : {}; + return isThemeable ? { themeable: true } : { }; }, }); @@ -241,18 +241,18 @@ StyleDictionary.registerTransform({ StyleDictionary.registerTransformGroup({ name: 'products/web', - transforms: ['attributes/category', 'attributes/themeable', 'name/kebab', 'typography/font-family', 'typography/font-size/to-rem', 'typography/letter-spacing', 'dimension/unit', 'color/css', 'color/with-alpha', 'time/duration', 'cubicBezier/css'] + transforms: ['attributes/themeable', '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`) - transforms: ['attributes/category', 'attributes/themeable', 'name/kebab', 'typography/font-family', 'typography/font-size/to-px', 'typography/letter-spacing', 'dimension/unit', 'color/css', 'color/with-alpha', 'time/duration', 'cubicBezier/css'] + transforms: ['attributes/themeable', 'attributes/category', 'name/kebab', 'typography/font-family', 'typography/font-size/to-px', 'typography/letter-spacing', 'dimension/unit', 'color/css', 'color/with-alpha', 'time/duration', 'cubicBezier/css'] }); StyleDictionary.registerTransformGroup({ name: 'marketing/web', - transforms: ['attributes/category', 'attributes/themeable', 'name/kebab', 'typography/font-family', 'typography/font-size/to-rem', 'typography/letter-spacing', 'dimension/unit', 'color/css', 'color/with-alpha', 'time/duration', 'cubicBezier/css'] + transforms: ['attributes/themeable', '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.registerFormat({ From e8dc4eeba9fd2dc38522f8b0e3f980fb4f856873 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Wed, 17 Sep 2025 19:27:28 +0100 Subject: [PATCH 012/224] TEMP - used local version of Style Dictionary for debugging --- package.json | 3 +- pnpm-lock.yaml | 118 +++++++++++++++++++++++++++++++++++-------------- 2 files changed, 86 insertions(+), 35 deletions(-) diff --git a/package.json b/package.json index a074882119b..e6a9704a33f 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,8 @@ }, "pnpm": { "overrides": { - "ember-composable-helpers": "npm:@nullvoxpopuli/ember-composable-helpers@^5.2.11" + "ember-composable-helpers": "npm:@nullvoxpopuli/ember-composable-helpers@^5.2.11", + "style-dictionary": "file:/Users/cristianorastelli/src/github/style-dictionary-didoo" }, "patchedDependencies": { "broccoli-asset-rewrite": "patches/broccoli-asset-rewrite.patch" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5fdc76dbdb8..cf66ead99bd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,6 +7,7 @@ settings: overrides: ember-composable-helpers: npm:@nullvoxpopuli/ember-composable-helpers@^5.2.11 + style-dictionary: file:/Users/cristianorastelli/src/github/style-dictionary-didoo patchedDependencies: broccoli-asset-rewrite: @@ -467,8 +468,8 @@ importers: specifier: ^3.4.2 version: 3.6.2 style-dictionary: - specifier: ^5.0.4 - version: 5.0.4 + specifier: file:/Users/cristianorastelli/src/github/style-dictionary-didoo + version: file:../../github/style-dictionary-didoo tinycolor2: specifier: ^1.6.0 version: 1.6.0 @@ -1879,8 +1880,8 @@ packages: '@bundled-es-modules/glob@11.0.3': resolution: {integrity: sha512-rt+1650YhlwRkkj67YMZQj5LXWZiavpHQg8K6jDcZBPbrBIooHbKOQvvxKJsKM80H1oHengEbIymfw3mn4FkUw==} - '@bundled-es-modules/memfs@4.9.4': - resolution: {integrity: sha512-1XyYPUaIHwEOdF19wYVLBtHJRr42Do+3ctht17cZOHwHf67vkmRNPlYDGY2kJps4RgE5+c7nEZmEzxxvb1NZWA==} + '@bundled-es-modules/memfs@4.17.0': + resolution: {integrity: sha512-ykdrkEmQr9BV804yd37ikXfNnvxrwYfY9Z2/EtMHFEFadEjsQXJ1zL9bVZrKNLDtm91UdUOEHso6Aweg93K6xQ==} '@carbon/colors@11.39.0': resolution: {integrity: sha512-H1hL9NW1I1vks469KuIV/YY4zHUiDQJ/MOlJgv8iCLi0SQS4DWkDslccXAhce8U8qRtx1JPfePhiYkRBbjgKgw==} @@ -2997,14 +2998,32 @@ packages: peerDependencies: tslib: '2' - '@jsonjoy.com/json-pack@1.1.1': - resolution: {integrity: sha512-osjeBqMJ2lb/j/M8NCPjs1ylqWIcTRTycIhVB5pt6LgzgeRSb0YRZ7j9RfA8wIUrsr/medIuhVyonXRZWLyfdw==} + '@jsonjoy.com/buffers@1.0.0': + resolution: {integrity: sha512-NDigYR3PHqCnQLXYyoLbnEdzMMvzeiCWo1KOut7Q0CoIqg9tUAPKJ1iq/2nFhc5kZtexzutNY0LFjdwWL3Dw3Q==} engines: {node: '>=10.0'} peerDependencies: tslib: '2' - '@jsonjoy.com/util@1.5.0': - resolution: {integrity: sha512-ojoNsrIuPI9g6o8UxhraZQSyF2ByJanAY4cTFbc8Mf2AXEF4aQRGY1dJxyJpuyav8r9FGflEt/Ff3u5Nt6YMPA==} + '@jsonjoy.com/codegen@1.0.0': + resolution: {integrity: sha512-E8Oy+08cmCf0EK/NMxpaJZmOxPqM+6iSe2S4nlSBrPZOORoDJILxtbSUEDKQyTamm/BVAhIGllOBNU79/dwf0g==} + engines: {node: '>=10.0'} + peerDependencies: + tslib: '2' + + '@jsonjoy.com/json-pack@1.14.0': + resolution: {integrity: sha512-LpWbYgVnKzphN5S6uss4M25jJ/9+m6q6UJoeN6zTkK4xAGhKsiBRPVeF7OYMWonn5repMQbE5vieRXcMUrKDKw==} + engines: {node: '>=10.0'} + peerDependencies: + tslib: '2' + + '@jsonjoy.com/json-pointer@1.0.2': + resolution: {integrity: sha512-Fsn6wM2zlDzY1U+v4Nc8bo3bVqgfNTGcn6dMgs6FjrEnt4ZCe60o6ByKRjOGlI2gow0aE/Q41QOigdTqkyK5fg==} + engines: {node: '>=10.0'} + peerDependencies: + tslib: '2' + + '@jsonjoy.com/util@1.9.0': + resolution: {integrity: sha512-pLuQo+VPRnN8hfPqUTLTHk126wuYdXVxE6aDmjSeV4NCAgyxWbiOIeNJVtID3h1Vzpoi9m4jXezf73I6LgabgQ==} engines: {node: '>=10.0'} peerDependencies: tslib: '2' @@ -3913,8 +3932,8 @@ packages: '@xtuc/long@4.2.2': resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==} - '@zip.js/zip.js@2.7.54': - resolution: {integrity: sha512-qMrJVg2hoEsZJjMJez9yI2+nZlBUxgYzGV3mqcb2B/6T1ihXp0fWBDYlVHlHquuorgNUQP5a8qSmX6HF5rFJNg==} + '@zip.js/zip.js@2.8.2': + resolution: {integrity: sha512-PI6UdgpSeVoGvzguKHmy2bwOqI3UYkntLZOCpyJSKIi7234c5aJmQYkJB/P4P2YUJkqhbqvu7iM2/0eJZ178nA==} engines: {bun: '>=0.7.0', deno: '>=1.0.0', node: '>=16.5.0'} abab@2.0.6: @@ -7320,6 +7339,12 @@ packages: resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==} engines: {node: '>=10.13.0'} + glob-to-regex.js@1.0.1: + resolution: {integrity: sha512-CG/iEvgQqfzoVsMUbxSJcwbG2JwyZ3naEqPkeltwl0BSS8Bp83k3xlGms+0QdWFUAwV+uvo80wNswKF6FWEkKg==} + engines: {node: '>=10.0'} + peerDependencies: + tslib: '2' + glob-to-regexp@0.3.0: resolution: {integrity: sha512-Iozmtbqv0noj0uDDqoL0zNq0VBEfK2YFoMAZoxJe4cwphvLR+JskfF30QhXHOR4m3KrE6NLRYw+U9MRXvifyig==} @@ -8805,8 +8830,8 @@ packages: resolution: {integrity: sha512-qvwipnozMohxLXG1pOqoLiZKNkC4r4qqRucSoDwXowsNGDSULiqFTRUF05vcZWnwJSG22qTsynQhxbaMtnX9gw==} engines: {node: '>=8'} - memfs@4.17.0: - resolution: {integrity: sha512-4eirfZ7thblFmqFjywlTmuWVSvccHAJbn1r8qQLzmTO11qcqpohOjmY2mFce6x7x7WtskzRqApPD0hv+Oa74jg==} + memfs@4.42.0: + resolution: {integrity: sha512-RG+4HMGyIVp6UWDWbFmZ38yKrSzblPnfJu0PyPt0hw52KW4PPlPp+HdV4qZBG0hLDuYVnf8wfQT4NymKXnlQjA==} engines: {node: '>= 4.0.0'} memory-streams@0.1.3: @@ -10812,8 +10837,8 @@ packages: strip-test-selectors@0.1.0: resolution: {integrity: sha512-wkVYph30L7wYkMf5EypfTqhY4qZwmQ0hpFOTksaXne49YbUr2jenJl5w5yj9IWx3ojtoH9BGAQ7cShnYEzbs5g==} - style-dictionary@5.0.4: - resolution: {integrity: sha512-+k82riDTHnCpOYzKz1Xa4W219dEOI8pc2a2jnWZuAFY11PHvRL1Ao55Lle3t/kQbiRU5QACdC3xeUNuByaKE3w==} + style-dictionary@file:../../github/style-dictionary-didoo: + resolution: {directory: ../../github/style-dictionary-didoo, type: directory} engines: {node: '>=22.0.0'} hasBin: true @@ -11044,8 +11069,8 @@ packages: resolution: {integrity: sha512-49WtAWS+tcsy93dRt6P0P3AMD2m5PvXRhuEA0kaXos5ZLlujtYmpmFsB+QvWUSxE1ZsstmYXfQ7L40+EcQgpAQ==} engines: {node: '>=0.8'} - thingies@1.21.0: - resolution: {integrity: sha512-hsqsJsFMsV+aD4s3CWKk85ep/3I9XzYV/IXaSouJMYIoDlgyi11cBhsqYe9/geRfB0YIikBQg6raRaM+nIMP9g==} + thingies@2.5.0: + resolution: {integrity: sha512-s+2Bwztg6PhWUD7XMfeYm5qliDdSiZm7M7n8KjTkIsm3l/2lgVRc2/Gx/v+ZX8lT4FMA+i8aQvhcWylldc+ZNw==} engines: {node: '>=10.18'} peerDependencies: tslib: ^2 @@ -11159,8 +11184,8 @@ packages: resolution: {integrity: sha512-UIRcWsX1kDOcC/Q2R58weYWlw01EnmWWBwUv3okWS+zMBvsgIfYoO6veHhuNE3hgzWCEImNp46QS5CyKnw5QUA==} engines: {node: 12.* || >= 14} - tree-dump@1.0.2: - resolution: {integrity: sha512-dpev9ABuLWdEubk+cIaI9cHwRNNDjkBBLXTwI4UCUFdQ5xXKqNXoK4FEciw/vxf+NQ7Cb7sGUyeUtORvHIdRXQ==} + tree-dump@1.1.0: + resolution: {integrity: sha512-rMuvhU4MCDbcbnleZTFezWsaZXRFemSqAM+7jPnzUl1fo9w3YEKOxAeui0fz3OI4EU4hf23iyA7uQRVko+UaBA==} engines: {node: '>=10.0'} peerDependencies: tslib: '2' @@ -12886,12 +12911,12 @@ snapshots: string_decoder: 1.3.0 url: 0.11.4 - '@bundled-es-modules/memfs@4.9.4': + '@bundled-es-modules/memfs@4.17.0': dependencies: assert: 2.1.0 buffer: 6.0.3 events: 3.3.0 - memfs: 4.17.0 + memfs: 4.42.0 path: 0.12.7 stream: 0.0.3 util: 0.12.5 @@ -14542,16 +14567,35 @@ snapshots: dependencies: tslib: 2.8.1 - '@jsonjoy.com/json-pack@1.1.1(tslib@2.8.1)': + '@jsonjoy.com/buffers@1.0.0(tslib@2.8.1)': + dependencies: + tslib: 2.8.1 + + '@jsonjoy.com/codegen@1.0.0(tslib@2.8.1)': + dependencies: + tslib: 2.8.1 + + '@jsonjoy.com/json-pack@1.14.0(tslib@2.8.1)': dependencies: '@jsonjoy.com/base64': 1.1.2(tslib@2.8.1) - '@jsonjoy.com/util': 1.5.0(tslib@2.8.1) + '@jsonjoy.com/buffers': 1.0.0(tslib@2.8.1) + '@jsonjoy.com/codegen': 1.0.0(tslib@2.8.1) + '@jsonjoy.com/json-pointer': 1.0.2(tslib@2.8.1) + '@jsonjoy.com/util': 1.9.0(tslib@2.8.1) hyperdyperid: 1.2.0 - thingies: 1.21.0(tslib@2.8.1) + thingies: 2.5.0(tslib@2.8.1) + tslib: 2.8.1 + + '@jsonjoy.com/json-pointer@1.0.2(tslib@2.8.1)': + dependencies: + '@jsonjoy.com/codegen': 1.0.0(tslib@2.8.1) + '@jsonjoy.com/util': 1.9.0(tslib@2.8.1) tslib: 2.8.1 - '@jsonjoy.com/util@1.5.0(tslib@2.8.1)': + '@jsonjoy.com/util@1.9.0(tslib@2.8.1)': dependencies: + '@jsonjoy.com/buffers': 1.0.0(tslib@2.8.1) + '@jsonjoy.com/codegen': 1.0.0(tslib@2.8.1) tslib: 2.8.1 '@keyv/serialize@1.1.0': {} @@ -15704,7 +15748,7 @@ snapshots: '@xtuc/long@4.2.2': {} - '@zip.js/zip.js@2.7.54': {} + '@zip.js/zip.js@2.8.2': {} abab@2.0.6: {} @@ -21177,6 +21221,10 @@ snapshots: dependencies: is-glob: 4.0.3 + glob-to-regex.js@1.0.1(tslib@2.8.1): + dependencies: + tslib: 2.8.1 + glob-to-regexp@0.3.0: {} glob-to-regexp@0.4.1: {} @@ -23061,11 +23109,13 @@ snapshots: mimic-fn: 2.1.0 p-is-promise: 2.1.0 - memfs@4.17.0: + memfs@4.42.0: dependencies: - '@jsonjoy.com/json-pack': 1.1.1(tslib@2.8.1) - '@jsonjoy.com/util': 1.5.0(tslib@2.8.1) - tree-dump: 1.0.2(tslib@2.8.1) + '@jsonjoy.com/json-pack': 1.14.0(tslib@2.8.1) + '@jsonjoy.com/util': 1.9.0(tslib@2.8.1) + glob-to-regex.js: 1.0.1(tslib@2.8.1) + thingies: 2.5.0(tslib@2.8.1) + tree-dump: 1.1.0(tslib@2.8.1) tslib: 2.8.1 memory-streams@0.1.3: @@ -25416,12 +25466,12 @@ snapshots: strip-test-selectors@0.1.0: {} - style-dictionary@5.0.4: + style-dictionary@file:../../github/style-dictionary-didoo: dependencies: '@bundled-es-modules/deepmerge': 4.3.1 '@bundled-es-modules/glob': 11.0.3 - '@bundled-es-modules/memfs': 4.9.4 - '@zip.js/zip.js': 2.7.54 + '@bundled-es-modules/memfs': 4.17.0 + '@zip.js/zip.js': 2.8.2 chalk: 5.4.1 change-case: 5.4.4 commander: 12.1.0 @@ -25844,7 +25894,7 @@ snapshots: textextensions@2.6.0: {} - thingies@1.21.0(tslib@2.8.1): + thingies@2.5.0(tslib@2.8.1): dependencies: tslib: 2.8.1 @@ -25973,7 +26023,7 @@ snapshots: transitivePeerDependencies: - supports-color - tree-dump@1.0.2(tslib@2.8.1): + tree-dump@1.1.0(tslib@2.8.1): dependencies: tslib: 2.8.1 From b5c4125bae94ad7494d9eb76c63e2c7319a7aa3d Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Wed, 17 Sep 2025 18:53:10 +0100 Subject: [PATCH 013/224] progress on logic for handling `$modes` - 4 --- .../scripts/build-parts/generateCssHelpers.ts | 2 +- .../build-parts/getStyleDictionaryConfig.ts | 10 ++++-- packages/tokens/scripts/build.ts | 33 +++++++++---------- 3 files changed, 24 insertions(+), 21 deletions(-) diff --git a/packages/tokens/scripts/build-parts/generateCssHelpers.ts b/packages/tokens/scripts/build-parts/generateCssHelpers.ts index 3c45a42e337..2c48d0dc1b9 100644 --- a/packages/tokens/scripts/build-parts/generateCssHelpers.ts +++ b/packages/tokens/scripts/build-parts/generateCssHelpers.ts @@ -17,7 +17,7 @@ export const PREFIX = 'hds'; export async function generateCssHelpers(dictionary: Dictionary, config: PlatformConfig ): Promise { - fs.ensureDir(`${config.buildPath}helpers/`); + await fs.ensureDir(`${config.buildPath}helpers/`); const header = await fileHeader({}); diff --git a/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts index 8dd6b3ebabe..041c381619f 100644 --- a/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts +++ b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts @@ -57,7 +57,7 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod platforms: { [`web/themed-css-variables--mode-${mode}`]: { buildPath: 'dist/products/css/', - transformGroup: 'products/web', + transformGroup: 'products/web/themed', prefix: 'token', basePxFontSize: 16, files: [ @@ -66,12 +66,14 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod format: 'css/variables', options: { // TODO understand if is better to output references or not (probably not) - // outputReferences: true, + outputReferences: true, // outputReferences: (token, { dictionary, usesDtcg }) => { // // `dictionary` contains `allTokens`, `tokens`, `tokenMap`, `unfilteredTokens`, `unfilteredAllTokens` and `unfilteredTokenMap` props // // `usesDtcg` tells you whether the Design Token Community Group spec is used with $ prefixes ($value, $type etc.) // // return true or false // }, + // see: https://styledictionary.com/reference/utils/references/#combining-multiple-outputreference-utility-functions + // outputReferences: (token, options) => outputReferencesFilter(token, options) && outputReferencesTransformed(token, options), }, filter: (token: DesignToken) => { return !token.private && !(token.attributes && token.attributes.themeable); @@ -82,12 +84,14 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod format: 'css/variables', options: { // TODO understand if is better to output references or not (probably not) - // outputReferences: true, + outputReferences: true, // outputReferences: (token, { dictionary, usesDtcg }) => { // // `dictionary` contains `allTokens`, `tokens`, `tokenMap`, `unfilteredTokens`, `unfilteredAllTokens` and `unfilteredTokenMap` props // // `usesDtcg` tells you whether the Design Token Community Group spec is used with $ prefixes ($value, $type etc.) // // return true or false // }, + // see: https://styledictionary.com/reference/utils/references/#combining-multiple-outputreference-utility-functions + // outputReferences: (token, options) => outputReferencesFilter(token, options) && outputReferencesTransformed(token, options), }, filter: (token: DesignToken) => { return !token.private && (token.attributes && token.attributes.themeable); diff --git a/packages/tokens/scripts/build.ts b/packages/tokens/scripts/build.ts index 4436a5c011f..5069468a29e 100644 --- a/packages/tokens/scripts/build.ts +++ b/packages/tokens/scripts/build.ts @@ -35,13 +35,14 @@ for (const mode of modes) { StyleDictionary.registerPreprocessor({ name: `replace-value-for-mode-${mode}`, preprocessor: (dictionary, _options) => { - // console.log("\n\n\n **** _options ****\n\n", JSON.stringify(_options, null, 2)); // 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) { if (slice.$modes) { if (slice.$modes[mode]) { slice.$value = slice.$modes[mode]; } else { + // TODO! decide if we want to throw here (and test if it works, by removing a value from one of the test files) console.error(`❌ ERROR - Found themed token without '${mode}' value:`, JSON.stringify(slice, null, 2)); } } else { @@ -53,10 +54,7 @@ for (const mode of modes) { } return slice; } - const xxx = replaceModes(dictionary); - // console.log("\n\n\n **** replaceModes(dictionary) ****\n\n", JSON.stringify(_options, null, 2)); - // return replaceModes(dictionary); - return xxx; + return replaceModes(dictionary); }, }); } @@ -73,11 +71,12 @@ StyleDictionary.registerTransform({ isThemeable = true; } - if (usesReferences(token.original.value)) { - // TODO understand here what I should pass for `StyleDictionary.tokenMap` (even if it apparently works) - const refs = getReferences(token.original.value, StyleDictionary.tokenMap); - isThemeable = refs.some((ref) => '$modes' in ref); - } + // TODO understand if we really need this to split themeable vs non-themeable tokens + // if (usesReferences(token.original.$value)) { + // const refs = getReferences(token.original.$value, StyleDictionaryInstance.tokenMap); + // isThemeable = refs.some((ref) => '$modes' in ref); + // } + return isThemeable ? { themeable: true } : { }; }, }); @@ -241,18 +240,23 @@ StyleDictionary.registerTransform({ StyleDictionary.registerTransformGroup({ name: 'products/web', + 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/themeable', '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`) - transforms: ['attributes/themeable', 'attributes/category', 'name/kebab', 'typography/font-family', 'typography/font-size/to-px', 'typography/letter-spacing', 'dimension/unit', 'color/css', 'color/with-alpha', 'time/duration', 'cubicBezier/css'] + transforms: ['attributes/category', 'name/kebab', 'typography/font-family', 'typography/font-size/to-px', 'typography/letter-spacing', 'dimension/unit', 'color/css', 'color/with-alpha', 'time/duration', 'cubicBezier/css'] }); StyleDictionary.registerTransformGroup({ name: 'marketing/web', - transforms: ['attributes/themeable', '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'] + 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.registerFormat({ @@ -297,7 +301,6 @@ fs.emptyDirSync(distFolder); // generate standard tokens for (const target of targets) { const StyleDictionaryInstance = new StyleDictionary(getStyleDictionaryConfig({ target })); - console.log(`\n---\n\nProcessing target "${target}"...`); await StyleDictionaryInstance.hasInitialized; await StyleDictionaryInstance.buildAllPlatforms() @@ -306,13 +309,9 @@ for (const target of targets) { // 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'); } - -console.log('\n=============================================='); -console.log('\nBuild completed!'); From 4cf8fd13a6690dcda0d607d9bdbfd49a0fcb3c7b Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 16 Sep 2025 20:11:51 +0100 Subject: [PATCH 014/224] TEMP generated temporary dist files for testing sq --- packages/tokens/dist/docs/products/tokens.json | 14 ++++++++++++++ packages/tokens/dist/marketing/tokens.json | 14 ++++++++++++++ .../with-root-selector/cds-0/common-tokens.css | 17 +++++++++++++++++ .../with-root-selector/cds-0/themed-tokens.css | 9 +++++++++ .../with-root-selector/cds-10/common-tokens.css | 17 +++++++++++++++++ .../with-root-selector/cds-10/themed-tokens.css | 9 +++++++++ .../cds-100/common-tokens.css | 17 +++++++++++++++++ .../cds-100/themed-tokens.css | 9 +++++++++ .../with-root-selector/cds-90/common-tokens.css | 17 +++++++++++++++++ .../with-root-selector/cds-90/themed-tokens.css | 9 +++++++++ .../with-root-selector/hds/common-tokens.css | 17 +++++++++++++++++ .../with-root-selector/hds/themed-tokens.css | 9 +++++++++ 12 files changed, 158 insertions(+) create mode 100644 packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-0/common-tokens.css create mode 100644 packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-0/themed-tokens.css create mode 100644 packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-10/common-tokens.css create mode 100644 packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-10/themed-tokens.css create mode 100644 packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-100/common-tokens.css create mode 100644 packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-100/themed-tokens.css create mode 100644 packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-90/common-tokens.css create mode 100644 packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-90/themed-tokens.css create mode 100644 packages/tokens/dist/products/css/themed-tokens/with-root-selector/hds/common-tokens.css create mode 100644 packages/tokens/dist/products/css/themed-tokens/with-root-selector/hds/themed-tokens.css diff --git a/packages/tokens/dist/docs/products/tokens.json b/packages/tokens/dist/docs/products/tokens.json index 42700c3efb9..1d369a4497e 100644 --- a/packages/tokens/dist/docs/products/tokens.json +++ b/packages/tokens/dist/docs/products/tokens.json @@ -886,10 +886,24 @@ "$type": "color", "$value": "#ffffff", "group": "palette", + "$modes": { + "hds": "#ffffff", + "cds-0": "#ffffff", + "cds-10": "#cccccc", + "cds-90": "#333333", + "cds-100": "#000000" + }, "original": { "$type": "color", "$value": "#ffffff", "group": "palette", + "$modes": { + "hds": "#ffffff", + "cds-0": "#ffffff", + "cds-10": "#cccccc", + "cds-90": "#333333", + "cds-100": "#000000" + }, "key": "{color.palette.neutral-0}" }, "name": "token-color-palette-neutral-0", diff --git a/packages/tokens/dist/marketing/tokens.json b/packages/tokens/dist/marketing/tokens.json index 705017893fe..a68951d122c 100644 --- a/packages/tokens/dist/marketing/tokens.json +++ b/packages/tokens/dist/marketing/tokens.json @@ -976,12 +976,26 @@ "$type": "color", "$value": "#ffffff", "group": "palette", + "$modes": { + "hds": "#ffffff", + "cds-0": "#ffffff", + "cds-10": "#cccccc", + "cds-90": "#333333", + "cds-100": "#000000" + }, "filePath": "src/global/color/palette-neutrals.json", "isSource": true, "original": { "$type": "color", "$value": "#ffffff", "group": "palette", + "$modes": { + "hds": "#ffffff", + "cds-0": "#ffffff", + "cds-10": "#cccccc", + "cds-90": "#333333", + "cds-100": "#000000" + }, "key": "{color.palette.neutral-0}" }, "name": "token-color-palette-neutral-0", diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-0/common-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-0/common-tokens.css new file mode 100644 index 00000000000..cf8f8008c44 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-0/common-tokens.css @@ -0,0 +1,17 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-component-a-size: 123px; + --token-color-foreground-strong: var(--token-color-palette-neutral-300); + --token-color-foreground-primary: var(--token-color-palette-neutral-200); + --token-color-foreground-high-contrast: var(--token-color-palette-neutral-0); + --token-component-a-color: var(--token-color-palette-neutral-300); + --token-component-b-color: var(--token-color-palette-neutral-200); + --token-component-b-size: var(--token-component-a-size); + --token-component-c-color: var(--token-color-foreground-high-contrast); + --token-component-d-color: var(--token-color-foreground-semantic-outlier); +} diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-0/themed-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-0/themed-tokens.css new file mode 100644 index 00000000000..d9e0a1f523f --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-0/themed-tokens.css @@ -0,0 +1,9 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-color-palette-neutral-300: #c00000; + --token-color-palette-neutral-0: #cfffff; + --token-color-foreground-semantic-outlier: var(--token-color-palette-neutral-100); +} diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-10/common-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-10/common-tokens.css new file mode 100644 index 00000000000..cf8f8008c44 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-10/common-tokens.css @@ -0,0 +1,17 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-component-a-size: 123px; + --token-color-foreground-strong: var(--token-color-palette-neutral-300); + --token-color-foreground-primary: var(--token-color-palette-neutral-200); + --token-color-foreground-high-contrast: var(--token-color-palette-neutral-0); + --token-component-a-color: var(--token-color-palette-neutral-300); + --token-component-b-color: var(--token-color-palette-neutral-200); + --token-component-b-size: var(--token-component-a-size); + --token-component-c-color: var(--token-color-foreground-high-contrast); + --token-component-d-color: var(--token-color-foreground-semantic-outlier); +} diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-10/themed-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-10/themed-tokens.css new file mode 100644 index 00000000000..eec4c0f0852 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-10/themed-tokens.css @@ -0,0 +1,9 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-color-palette-neutral-300: #c33333; + --token-color-palette-neutral-0: #cccccc; + --token-color-foreground-semantic-outlier: var(--token-color-palette-neutral-200); +} diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-100/common-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-100/common-tokens.css new file mode 100644 index 00000000000..0d9c3807e08 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-100/common-tokens.css @@ -0,0 +1,17 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-component-a-size: 123px; + --token-color-foreground-strong: var(--token-color-palette-neutral-300); + --token-color-foreground-primary: var(--token-color-palette-neutral-200); + --token-color-foreground-high-contrast: var(--token-color-palette-neutral-0); + --token-component-a-color: var(--token-color-palette-neutral-300); + --token-component-b-color: var(--token-color-palette-neutral-200); + --token-component-b-size: var(--token-component-a-size); + --token-component-d-color: var(--token-color-foreground-semantic-outlier); + --token-component-c-color: var(--token-color-foreground-high-contrast); +} diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-100/themed-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-100/themed-tokens.css new file mode 100644 index 00000000000..73f0b68d0ac --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-100/themed-tokens.css @@ -0,0 +1,9 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-color-palette-neutral-300: #cfffff; + --token-color-palette-neutral-0: #c00000; + --token-color-foreground-semantic-outlier: #abcdef; +} diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-90/common-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-90/common-tokens.css new file mode 100644 index 00000000000..cf8f8008c44 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-90/common-tokens.css @@ -0,0 +1,17 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-component-a-size: 123px; + --token-color-foreground-strong: var(--token-color-palette-neutral-300); + --token-color-foreground-primary: var(--token-color-palette-neutral-200); + --token-color-foreground-high-contrast: var(--token-color-palette-neutral-0); + --token-component-a-color: var(--token-color-palette-neutral-300); + --token-component-b-color: var(--token-color-palette-neutral-200); + --token-component-b-size: var(--token-component-a-size); + --token-component-c-color: var(--token-color-foreground-high-contrast); + --token-component-d-color: var(--token-color-foreground-semantic-outlier); +} diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-90/themed-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-90/themed-tokens.css new file mode 100644 index 00000000000..9a36f03ad66 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-90/themed-tokens.css @@ -0,0 +1,9 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-color-palette-neutral-300: #cccccc; + --token-color-palette-neutral-0: #c33333; + --token-color-foreground-semantic-outlier: var(--token-color-palette-neutral-300); +} diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/hds/common-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/hds/common-tokens.css new file mode 100644 index 00000000000..cf8f8008c44 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/hds/common-tokens.css @@ -0,0 +1,17 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-component-a-size: 123px; + --token-color-foreground-strong: var(--token-color-palette-neutral-300); + --token-color-foreground-primary: var(--token-color-palette-neutral-200); + --token-color-foreground-high-contrast: var(--token-color-palette-neutral-0); + --token-component-a-color: var(--token-color-palette-neutral-300); + --token-component-b-color: var(--token-color-palette-neutral-200); + --token-component-b-size: var(--token-component-a-size); + --token-component-c-color: var(--token-color-foreground-high-contrast); + --token-component-d-color: var(--token-color-foreground-semantic-outlier); +} diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/hds/themed-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/hds/themed-tokens.css new file mode 100644 index 00000000000..74011dfe14a --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/hds/themed-tokens.css @@ -0,0 +1,9 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-color-palette-neutral-300: #000000; + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-semantic-outlier: var(--token-color-palette-neutral-0); +} From 2a9547f733a84f538940daeeea391f8cecf6d36e Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Fri, 19 Sep 2025 12:26:24 +0100 Subject: [PATCH 015/224] TEMP - added examples of generated themed tokens --- .../tokens.css | 688 +++++++++++++++++ .../tokens.css | 690 ++++++++++++++++++ .../common-tokens.css | 528 ++++++++++++++ .../dark-tokens.css | 44 ++ .../light-tokens.css | 44 ++ 5 files changed, 1994 insertions(+) create mode 100644 packages/tokens/expected-CSS-output/generated/themed-tokens-with-css-selectors/tokens.css create mode 100644 packages/tokens/expected-CSS-output/generated/themed-tokens-with-prefers-color-scheme/tokens.css create mode 100644 packages/tokens/expected-CSS-output/generated/themed-tokens-with-root-selector/common-tokens.css create mode 100644 packages/tokens/expected-CSS-output/generated/themed-tokens-with-root-selector/dark-tokens.css create mode 100644 packages/tokens/expected-CSS-output/generated/themed-tokens-with-root-selector/light-tokens.css diff --git a/packages/tokens/expected-CSS-output/generated/themed-tokens-with-css-selectors/tokens.css b/packages/tokens/expected-CSS-output/generated/themed-tokens-with-css-selectors/tokens.css new file mode 100644 index 00000000000..3d4fc067a5e --- /dev/null +++ b/packages/tokens/expected-CSS-output/generated/themed-tokens-with-css-selectors/tokens.css @@ -0,0 +1,688 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +.hds-theme-dark, +[data-hds-theme="dark"] { + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-green-500: #054220; + --token-color-palette-green-400: #006619; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-400: #940004; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-50: #fff5f5; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-300: #c2c5cb; + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-100: #656a761a; +} + +.hds-theme-light, +[data-hds-theme="light"] { + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-green-500: #054220; + --token-color-palette-green-400: #006619; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-400: #940004; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-50: #fff5f5; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-300: #c2c5cb; + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-100: #656a761a; +} + +:root { + --token-color-border-primary: #656a7633; + --token-color-border-faint: #656a761a; + --token-color-border-strong: #3b3d4566; + --token-color-border-action: #cce3fe; + --token-color-border-highlight: #ead2fe; + --token-color-border-success: #cceeda; + --token-color-border-warning: #fbeabf; + --token-color-border-critical: #fbd4d4; + --token-color-focus-action-internal: #0c56e9; + --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-critical-internal: #c00005; + --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-foreground-strong: #0c0c0e; + --token-color-foreground-primary: #3b3d45; + --token-color-foreground-faint: #656a76; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: #8c909c; + --token-color-foreground-action: #1060ff; + --token-color-foreground-action-hover: #0c56e9; + --token-color-foreground-action-active: #0046d1; + --token-color-foreground-highlight: #a737ff; + --token-color-foreground-highlight-on-surface: #911ced; + --token-color-foreground-highlight-high-contrast: #42215b; + --token-color-foreground-success: #008a22; + --token-color-foreground-success-on-surface: #00781e; + --token-color-foreground-success-high-contrast: #054220; + --token-color-foreground-warning: #bb5a00; + --token-color-foreground-warning-on-surface: #9e4b00; + --token-color-foreground-warning-high-contrast: #542800; + --token-color-foreground-critical: #e52228; + --token-color-foreground-critical-on-surface: #c00005; + --token-color-foreground-critical-high-contrast: #51130a; + --token-color-page-primary: #ffffff; + --token-color-page-faint: #fafafa; + --token-color-surface-primary: #ffffff; + --token-color-surface-faint: #fafafa; + --token-color-surface-strong: #f1f2f3; + --token-color-surface-interactive: #ffffff; + --token-color-surface-interactive-hover: #f1f2f3; + --token-color-surface-interactive-active: #dedfe3; + --token-color-surface-interactive-disabled: #fafafa; + --token-color-surface-action: #f2f8ff; + --token-color-surface-highlight: #f9f2ff; + --token-color-surface-success: #f2fbf6; + --token-color-surface-warning: #fff9e8; + --token-color-surface-critical: #fff5f5; + --token-color-hashicorp-brand: #000000; + --token-color-boundary-brand: #f24c53; + --token-color-boundary-foreground: #cf2d32; + --token-color-boundary-surface: #ffecec; + --token-color-boundary-border: #fbd7d8; + --token-color-boundary-gradient-primary-start: #f97076; + --token-color-boundary-gradient-primary-stop: #db363b; + --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-consul-brand: #e03875; + --token-color-consul-foreground: #d01c5b; + --token-color-consul-surface: #ffe9f1; + --token-color-consul-border: #ffcede; + --token-color-consul-gradient-primary-start: #ff99be; + --token-color-consul-gradient-primary-stop: #da306e; + --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-hcp-brand: #000000; + --token-color-nomad-brand: #06d092; + --token-color-nomad-foreground: #008661; + --token-color-nomad-surface: #d3fdeb; + --token-color-nomad-border: #bff3dd; + --token-color-nomad-gradient-primary-start: #bff3dd; + --token-color-nomad-gradient-primary-stop: #60dea9; + --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-packer-brand: #02a8ef; + --token-color-packer-foreground: #007eb4; + --token-color-packer-surface: #d4f2ff; + --token-color-packer-border: #b4e4ff; + --token-color-packer-gradient-primary-start: #b4e4ff; + --token-color-packer-gradient-primary-stop: #63d0ff; + --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-terraform-brand: #7b42bc; + --token-color-terraform-brand-on-dark: #a067da; /* this is an alternative brand color meant to be used on dark backgrounds */ + --token-color-terraform-foreground: #773cb4; + --token-color-terraform-surface: #f4ecff; + --token-color-terraform-border: #ebdbfc; + --token-color-terraform-gradient-primary-start: #bb8deb; + --token-color-terraform-gradient-primary-stop: #844fba; + --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-vagrant-brand: #1868f2; + --token-color-vagrant-foreground: #1c61d8; + --token-color-vagrant-surface: #d6ebff; + --token-color-vagrant-border: #c7dbfc; + --token-color-vagrant-gradient-primary-start: #639cff; + --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-foreground: #9a6f00; + --token-color-vault-radar-surface: #fff9cf; + --token-color-vault-radar-border: #feec7b; + --token-color-vault-radar-gradient-primary-start: #feec7b; + --token-color-vault-radar-gradient-primary-stop: #ffe543; + --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-secrets-brand: #ffcf25; + --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-color-vault-secrets-foreground: #9a6f00; + --token-color-vault-secrets-surface: #fff9cf; + --token-color-vault-secrets-border: #feec7b; + --token-color-vault-secrets-gradient-primary-start: #feec7b; + --token-color-vault-secrets-gradient-primary-stop: #ffe543; + --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-brand: #ffcf25; + --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-foreground: #9a6f00; + --token-color-vault-surface: #fff9cf; + --token-color-vault-border: #feec7b; + --token-color-vault-gradient-primary-start: #feec7b; + --token-color-vault-gradient-primary-stop: #ffe543; + --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-waypoint-brand: #14c6cb; + --token-color-waypoint-foreground: #008196; + --token-color-waypoint-surface: #e0fcff; + --token-color-waypoint-border: #cbf1f3; + --token-color-waypoint-gradient-primary-start: #cbf1f3; + --token-color-waypoint-gradient-primary-stop: #62d4dc; + --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-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-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-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, + 0px 12px 24px 0px #3b3d4559; + --token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, + inset 0px 1px 2px 1px #656a761a; + --token-surface-base-box-shadow: 0 0 0 1px #656a7633; + --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-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-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-header-height: 60px; + --token-app-header-home-link-size: 36px; + --token-app-header-logo-size: 28px; + --token-app-side-nav-wrapper-border-width: 1px; + --token-app-side-nav-wrapper-border-color: var( + --token-color-palette-neutral-200 + ); + --token-app-side-nav-wrapper-padding-horizontal: 16px; + --token-app-side-nav-wrapper-padding-vertical: 16px; + --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-app-side-nav-toggle-button-border-radius: 5px; + --token-app-side-nav-header-home-link-padding: 4px; + --token-app-side-nav-header-home-link-logo-size: 48px; + --token-app-side-nav-header-home-link-logo-size-minimized: 32px; + --token-app-side-nav-header-actions-spacing: 8px; + --token-app-side-nav-body-list-margin-vertical: 24px; + --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-item-content-spacing-horizontal: 8px; + --token-app-side-nav-body-list-item-border-radius: 5px; + --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-foreground-faint: var( + --token-color-foreground-faint + ); + --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: 7px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ + --token-badge-count-padding-horizontal-medium: 11px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ + --token-badge-count-padding-horizontal-large: 13px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ + --token-badge-height-small: 20px; + --token-badge-height-medium: 24px; + --token-badge-height-large: 32px; + --token-badge-padding-horizontal-small: 5px; /* here we're taking into account the 1px border */ + --token-badge-padding-horizontal-medium: 7px; /* here we're taking into account the 1px border */ + --token-badge-padding-horizontal-large: 7px; /* here we're taking into account the 1px border */ + --token-badge-padding-vertical-small: 1px; /* here we're taking into account the 1px border */ + --token-badge-padding-vertical-medium: 3px; /* here we're taking into account the 1px border */ + --token-badge-padding-vertical-large: 3px; /* here we're taking into account the 1px border */ + --token-badge-icon-size-small: 12px; + --token-badge-icon-size-medium: 16px; + --token-badge-icon-size-large: 16px; + --token-badge-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, + Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, + Segoe UI Symbol; + --token-badge-font-size-small: 0.8125rem; /* 13px/0.8125rem */ + --token-badge-font-size-medium: 0.8125rem; /* 13px/0.8125rem */ + --token-badge-font-size-large: 1rem; /* 16px/1rem */ + --token-badge-line-height-small: 1.2308; /* 16px */ + --token-badge-line-height-medium: 1.2308; /* 16px */ + --token-badge-line-height-large: 1.5; /* 24px */ + --token-badge-font-weight: 500; + --token-badge-gap-small: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-large: 6px; + --token-badge-border-width: 1px; + --token-badge-border-radius: 5px; + --token-badge-filled-neutral-foreground-color: #3b3d45; + --token-badge-filled-neutral-background-color: #f1f2f3; + --token-badge-filled-neutral-dark-mode-foreground-color: #ffffff; + --token-badge-filled-neutral-dark-mode-background-color: #656a76; + --token-badge-filled-highlight-foreground-color: #911ced; + --token-badge-filled-highlight-background-color: #f9f2ff; + --token-badge-filled-success-foreground-color: #00781e; + --token-badge-filled-success-background-color: #f2fbf6; + --token-badge-filled-warning-foreground-color: #9e4b00; + --token-badge-filled-warning-background-color: #fff9e8; + --token-badge-filled-critical-foreground-color: #c00005; + --token-badge-filled-critical-background-color: #fff5f5; + --token-badge-inverted-neutral-foreground-color: #ffffff; + --token-badge-inverted-neutral-background-color: #656a76; + --token-badge-inverted-neutral-dark-mode-foreground-color: #3b3d45; + --token-badge-inverted-neutral-dark-mode-background-color: #fafafa; + --token-badge-inverted-highlight-foreground-color: #ffffff; + --token-badge-inverted-highlight-background-color: #a737ff; + --token-badge-inverted-success-foreground-color: #ffffff; + --token-badge-inverted-success-background-color: #008a22; + --token-badge-inverted-warning-foreground-color: #ffffff; + --token-badge-inverted-warning-background-color: #bb5a00; + --token-badge-inverted-critical-foreground-color: #ffffff; + --token-badge-inverted-critical-background-color: #e52228; + --token-badge-outlined-neutral-foreground-color: #3b3d45; + --token-badge-outlined-neutral-border-color: #656a76; + --token-badge-outlined-neutral-dark-mode-foreground-color: #ffffff; + --token-badge-outlined-neutral-dark-mode-border-color: #fafafa; + --token-badge-outlined-highlight-foreground-color: #a737ff; + --token-badge-outlined-highlight-border-color: #a737ff; + --token-badge-outlined-success-foreground-color: #008a22; + --token-badge-outlined-success-border-color: #008a22; + --token-badge-outlined-warning-foreground-color: #bb5a00; + --token-badge-outlined-warning-border-color: #bb5a00; + --token-badge-outlined-critical-foreground-color: #e52228; + --token-badge-outlined-critical-border-color: #e52228; + --token-button-critical-foreground-default: #c00005; + --token-button-critical-foreground-hover: #ffffff; + --token-button-critical-foreground-focus: #c00005; + --token-button-critical-foreground-active: #ffffff; + --token-button-critical-surface-default: #fff5f5; + --token-button-critical-surface-hover: #c00005; + --token-button-critical-surface-focus: #fff5f5; + --token-button-critical-surface-active: #940004; + --token-button-critical-border-color-default: #c00005; + --token-button-critical-border-color-hover: #940004; + --token-button-critical-border-color-focus: #c00005; + --token-button-critical-border-color-active: #940004; + --token-button-critical-box-shadow-default: 0px 1px 1px 0px #656a760d, + 0px 2px 2px 0px #656a760d; + --token-button-critical-box-shadow-focus: none; + --token-button-critical-box-shadow-active: none; + --token-button-disabled-foreground: #8c909c; + --token-button-disabled-surface: #fafafa; + --token-button-disabled-border-color: #656a7633; + --token-button-disabled-box-shadow: none; + --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-icon-size-small: 12px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-large: 24px; + --token-button-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, + Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, + Segoe UI Symbol; + --token-button-font-size-small: 0.8125rem; /* 13px/0.8125rem */ + --token-button-font-size-medium: 0.875rem; /* 14px/0.875rem */ + --token-button-font-size-large: 1rem; /* 16px/1rem */ + --token-button-line-height-small: 1.0769; /* 14px - 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-line-height-medium: 1.1428; /* 16px */ + --token-button-line-height-large: 1.5; /* 24px */ + --token-button-font-weight: 400; /* notice: we set the font-weight of the button text to 'regular' (on purpose) because of the antialising of the browser that renders the text quite different from what it looks like in Figma, so we prefer to have them visually similar even if they differ in their internal implementation (in Figma the font-weight is medium/500) - for more context about this decision: https://hashicorp.atlassian.net/browse/HDS-2099 */ + --token-button-gap: 6px; + --token-button-border-width: 1px; + --token-button-border-radius: 5px; + --token-button-box-shadow-focus: none; + --token-button-focus-border-width: 3px; + --token-button-focus-border-radius: 0px; + --token-button-primary-foreground-default: #ffffff; + --token-button-primary-foreground-hover: #ffffff; + --token-button-primary-foreground-focus: #ffffff; + --token-button-primary-foreground-active: #ffffff; + --token-button-primary-surface-default: #1060ff; + --token-button-primary-surface-hover: #0046d1; + --token-button-primary-surface-focus: #1060ff; + --token-button-primary-surface-active: #0046d1; + --token-button-primary-border-color-default: #0c56e9; + --token-button-primary-border-color-hover: #0046d1; + --token-button-primary-border-color-focus: #0c56e9; + --token-button-primary-border-color-active: #0046d1; + --token-button-primary-box-shadow-default: 0px 1px 1px 0px #656a760d, + 0px 2px 2px 0px #656a760d; + --token-button-primary-box-shadow-focus: none; + --token-button-primary-box-shadow-active: none; + --token-button-secondary-foreground-default: #3b3d45; + --token-button-secondary-foreground-hover: #3b3d45; + --token-button-secondary-foreground-focus: #3b3d45; + --token-button-secondary-foreground-active: #3b3d45; + --token-button-secondary-surface-default: #fafafa; + --token-button-secondary-surface-hover: #ffffff; + --token-button-secondary-surface-focus: #fafafa; + --token-button-secondary-surface-active: #dedfe3; + --token-button-secondary-border-color-default: #3b3d4566; + --token-button-secondary-border-color-hover: #3b3d4566; + --token-button-secondary-border-color-focus: #0c56e9; + --token-button-secondary-border-color-active: #3b3d4566; + --token-button-secondary-box-shadow-default: 0px 1px 1px 0px #656a760d, + 0px 2px 2px 0px #656a760d; + --token-button-secondary-box-shadow-focus: none; + --token-button-secondary-box-shadow-active: none; + --token-button-tertiary-foreground-default: #1060ff; + --token-button-tertiary-foreground-hover: #0c56e9; + --token-button-tertiary-foreground-focus: #1060ff; + --token-button-tertiary-foreground-active: #0046d1; + --token-button-tertiary-surface-default: rgba(0, 0, 0, 0); + --token-button-tertiary-surface-hover: #ffffff; + --token-button-tertiary-surface-focus: #ffffff; + --token-button-tertiary-surface-active: #dedfe3; + --token-button-tertiary-border-color-default: rgba(0, 0, 0, 0); + --token-button-tertiary-border-color-hover: #3b3d4566; + --token-button-tertiary-border-color-focus: #0c56e9; + --token-button-tertiary-border-color-active: #3b3d4566; + --token-button-tertiary-box-shadow-default: none; + --token-button-tertiary-box-shadow-focus: none; + --token-button-tertiary-box-shadow-active: none; + --token-form-label-color: #0c0c0e; + --token-form-legend-color: #0c0c0e; + --token-form-helper-text-color: #656a76; + --token-form-indicator-optional-color: #656a76; + --token-form-visibility-toggle-size: 24px; + --token-form-visibility-toggle-padding: 3px; /* here we're taking into account the 1px border */ + --token-form-visibility-toggle-color: #3b3d45; + --token-form-visibility-toggle-background-color: rgba(0, 0, 0, 0); + --token-form-visibility-toggle-border-width: 1px; + --token-form-visibility-toggle-border-color: rgba(0, 0, 0, 0); + --token-form-error-color: #c00005; + --token-form-error-icon-size: 14px; + --token-form-error-icon-margin-horizontal: 0px; + --token-form-error-icon-margin-vertical: 2px; /* This extra margin is used for vertical optical alignment. */ + --token-form-error-gap: 8px; + --token-form-checkbox-size: 16px; + --token-form-checkbox-border-radius: 3px; + --token-form-checkbox-border-width: 1px; + --token-form-checkbox-background-image-size: 12px; + --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-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-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-file-input-min-height: 32px; + --token-form-file-input-margin-right: 16px; + --token-form-control-base-foreground-value-color: #0c0c0e; + --token-form-control-base-foreground-placeholder-color: #656a76; + --token-form-control-base-surface-color-default: #ffffff; + --token-form-control-base-surface-color-hover: #f1f2f3; + --token-form-control-base-border-color-default: #8c909c; + --token-form-control-base-border-color-hover: #656a76; + --token-form-control-base-box-shadow-default: inset 0px 1px 2px 1px #656a761a; + --token-form-control-checked-foreground-color: #ffffff; + --token-form-control-checked-surface-color-default: #1060ff; + --token-form-control-checked-surface-color-hover: #0c56e9; + --token-form-control-checked-border-color-default: #0c56e9; + --token-form-control-checked-border-color-hover: #0046d1; + --token-form-control-invalid-border-color-default: #c00005; + --token-form-control-invalid-border-color-hover: #940004; + --token-form-control-invalid-outline-color: #dd7578; + --token-form-control-readonly-foreground-color: #3b3d45; + --token-form-control-readonly-surface-color: #f1f2f3; + --token-form-control-readonly-border-color: #656a761a; + --token-form-control-focus-outline-color: #5990ff; + --token-form-control-focus-outline-width: 3px; + --token-form-control-focus-outline-offset: 0px; + --token-form-control-disabled-foreground-color: #8c909c; + --token-form-control-disabled-surface-color: #fafafa; + --token-form-control-disabled-border-color: #656a7633; + --token-form-control-standard-height: 32px; /* Notice: we use this special token for elements that need to match the 'standard' height of an input element (because that height is actually the result of: text line height + vertical padding + border size). */ + --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-padding-with-icon: 31px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. We also consider extra 24px for the icon. */ + --token-form-control-border-radius: 5px; + --token-form-control-border-width: 1px; + --token-form-masked-input-toggle-button-size: 24px; + --token-form-masked-input-copy-button-margin-right: 8px; + --token-form-radio-size: 16px; + --token-form-radio-border-width: 1px; + --token-form-radio-background-image-size: 12px; + --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-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-outline-offset: 1px; + --token-form-radiocard-group-gap: 16px; + --token-form-radiocard-group-legend-margin-bottom: 12px; + --token-form-radiocard-border-width: 1px; + --token-form-radiocard-border-radius: 6px; + --token-form-radiocard-content-padding: 24px; + --token-form-radiocard-control-padding: 8px; + --token-form-radiocard-box-shadow-default: 0px 2px 3px 0px #656a761a, + 0px 8px 16px -10px #656a7633; + --token-form-radiocard-box-shadow-hover: 0px 2px 3px 0px #656a7626, + 0px 16px 16px -10px #656a7633; + --token-form-radiocard-box-shadow-focus: 0 0 0 3px #5990ff; /* This is a custom shadow used to add a focus ring around the card */ + --token-form-radiocard-box-shadow-disabled: none; + --token-form-radiocard-transition-duration: 0.2s; + --token-form-select-background-image-size: 16px; + --token-form-select-background-image-position-right-x: 7px; + --token-form-select-background-image-position-top-y: 9px; + --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-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-outline-offset: 0px; + --token-form-text-area-min-height: 32px; + --token-form-text-area-outline-offset: 0px; + --token-form-text-input-background-image-size: 16px; + --token-form-text-input-background-image-position-x: 7px; + --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-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-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-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-toggle-width: 32px; + --token-form-toggle-height: 16px; + --token-form-toggle-base-surface-color-default: #f1f2f3; /* 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-background-image-size: 12px; + --token-form-toggle-background-image-position-x: 2px; + --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-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-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-form-toggle-thumb-border-radius: 50%px; + --token-form-toggle-outline-width: 3px; + --token-form-toggle-outline-offset: 1px; + --token-outline-offset: 0px; + --token-pagination-nav-control-height: 36px; + --token-pagination-nav-control-padding-horizontal: 12px; + --token-pagination-nav-control-focus-inset: 4px; + --token-pagination-nav-control-icon-spacing: 6px; + --token-pagination-nav-indicator-height: 2px; + --token-pagination-nav-indicator-spacing: 6px; + --token-pagination-child-spacing-vertical: 8px; + --token-pagination-child-spacing-horizontal: 20px; + --token-side-nav-wrapper-border-width: 1px; + --token-side-nav-wrapper-border-color: #656a76; + --token-side-nav-wrapper-padding-horizontal: 16px; + --token-side-nav-wrapper-padding-vertical: 16px; + --token-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-side-nav-toggle-button-border-radius: 5px; + --token-side-nav-header-home-link-padding: 4px; + --token-side-nav-header-home-link-logo-size: 48px; + --token-side-nav-header-home-link-logo-size-minimized: 32px; + --token-side-nav-header-actions-spacing: 8px; + --token-side-nav-body-list-margin-vertical: 24px; + --token-side-nav-body-list-item-height: 36px; + --token-side-nav-body-list-item-padding-horizontal: 8px; + --token-side-nav-body-list-item-padding-vertical: 4px; + --token-side-nav-body-list-item-spacing-vertical: 2px; + --token-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-side-nav-body-list-item-border-radius: 5px; + --token-side-nav-color-foreground-primary: #dedfe3; + --token-side-nav-color-foreground-strong: #ffffff; + --token-side-nav-color-foreground-faint: #8c909c; + --token-side-nav-color-surface-primary: #0c0c0e; + --token-side-nav-color-surface-interactive-hover: #3b3d45; + --token-side-nav-color-surface-interactive-active: #656a76; + --token-tabs-tab-height-medium: 36px; + --token-tabs-tab-height-large: 48px; + --token-tabs-tab-padding-horizontal-medium: 12px; + --token-tabs-tab-padding-horizontal-large: 20px; + --token-tabs-tab-padding-vertical: 0px; + --token-tabs-tab-border-radius: 5px; + --token-tabs-tab-focus-inset: 6px; + --token-tabs-tab-gutter: 6px; + --token-tabs-indicator-height: 3px; + --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-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; + --token-typography-font-stack-code: ui-monospace, Menlo, Consolas, monospace; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 500; + --token-typography-font-weight-semibold: 600; + --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: 1.875rem; /* 30px/1.875rem */ + --token-typography-display-500-line-height: 1.2666; /* 38px */ + --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-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-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-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-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 */ + --token-typography-body-200-font-family: -apple-system, BlinkMacSystemFont, + Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, + Segoe UI Symbol; + --token-typography-body-200-font-size: 0.875rem; /* 14px/0.875rem */ + --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: 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 */ +} diff --git a/packages/tokens/expected-CSS-output/generated/themed-tokens-with-prefers-color-scheme/tokens.css b/packages/tokens/expected-CSS-output/generated/themed-tokens-with-prefers-color-scheme/tokens.css new file mode 100644 index 00000000000..2aaed52b2e0 --- /dev/null +++ b/packages/tokens/expected-CSS-output/generated/themed-tokens-with-prefers-color-scheme/tokens.css @@ -0,0 +1,690 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +@media (prefers-color-scheme: dark) { + :root { + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-green-500: #054220; + --token-color-palette-green-400: #006619; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-400: #940004; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-50: #fff5f5; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-300: #c2c5cb; + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-100: #656a761a; + } +} + +@media (prefers-color-scheme: light) { + :root { + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-green-500: #054220; + --token-color-palette-green-400: #006619; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-400: #940004; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-50: #fff5f5; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-300: #c2c5cb; + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-100: #656a761a; + } +} + +:root { + --token-color-border-primary: #656a7633; + --token-color-border-faint: #656a761a; + --token-color-border-strong: #3b3d4566; + --token-color-border-action: #cce3fe; + --token-color-border-highlight: #ead2fe; + --token-color-border-success: #cceeda; + --token-color-border-warning: #fbeabf; + --token-color-border-critical: #fbd4d4; + --token-color-focus-action-internal: #0c56e9; + --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-critical-internal: #c00005; + --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-foreground-strong: #0c0c0e; + --token-color-foreground-primary: #3b3d45; + --token-color-foreground-faint: #656a76; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: #8c909c; + --token-color-foreground-action: #1060ff; + --token-color-foreground-action-hover: #0c56e9; + --token-color-foreground-action-active: #0046d1; + --token-color-foreground-highlight: #a737ff; + --token-color-foreground-highlight-on-surface: #911ced; + --token-color-foreground-highlight-high-contrast: #42215b; + --token-color-foreground-success: #008a22; + --token-color-foreground-success-on-surface: #00781e; + --token-color-foreground-success-high-contrast: #054220; + --token-color-foreground-warning: #bb5a00; + --token-color-foreground-warning-on-surface: #9e4b00; + --token-color-foreground-warning-high-contrast: #542800; + --token-color-foreground-critical: #e52228; + --token-color-foreground-critical-on-surface: #c00005; + --token-color-foreground-critical-high-contrast: #51130a; + --token-color-page-primary: #ffffff; + --token-color-page-faint: #fafafa; + --token-color-surface-primary: #ffffff; + --token-color-surface-faint: #fafafa; + --token-color-surface-strong: #f1f2f3; + --token-color-surface-interactive: #ffffff; + --token-color-surface-interactive-hover: #f1f2f3; + --token-color-surface-interactive-active: #dedfe3; + --token-color-surface-interactive-disabled: #fafafa; + --token-color-surface-action: #f2f8ff; + --token-color-surface-highlight: #f9f2ff; + --token-color-surface-success: #f2fbf6; + --token-color-surface-warning: #fff9e8; + --token-color-surface-critical: #fff5f5; + --token-color-hashicorp-brand: #000000; + --token-color-boundary-brand: #f24c53; + --token-color-boundary-foreground: #cf2d32; + --token-color-boundary-surface: #ffecec; + --token-color-boundary-border: #fbd7d8; + --token-color-boundary-gradient-primary-start: #f97076; + --token-color-boundary-gradient-primary-stop: #db363b; + --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-consul-brand: #e03875; + --token-color-consul-foreground: #d01c5b; + --token-color-consul-surface: #ffe9f1; + --token-color-consul-border: #ffcede; + --token-color-consul-gradient-primary-start: #ff99be; + --token-color-consul-gradient-primary-stop: #da306e; + --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-hcp-brand: #000000; + --token-color-nomad-brand: #06d092; + --token-color-nomad-foreground: #008661; + --token-color-nomad-surface: #d3fdeb; + --token-color-nomad-border: #bff3dd; + --token-color-nomad-gradient-primary-start: #bff3dd; + --token-color-nomad-gradient-primary-stop: #60dea9; + --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-packer-brand: #02a8ef; + --token-color-packer-foreground: #007eb4; + --token-color-packer-surface: #d4f2ff; + --token-color-packer-border: #b4e4ff; + --token-color-packer-gradient-primary-start: #b4e4ff; + --token-color-packer-gradient-primary-stop: #63d0ff; + --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-terraform-brand: #7b42bc; + --token-color-terraform-brand-on-dark: #a067da; /* this is an alternative brand color meant to be used on dark backgrounds */ + --token-color-terraform-foreground: #773cb4; + --token-color-terraform-surface: #f4ecff; + --token-color-terraform-border: #ebdbfc; + --token-color-terraform-gradient-primary-start: #bb8deb; + --token-color-terraform-gradient-primary-stop: #844fba; + --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-vagrant-brand: #1868f2; + --token-color-vagrant-foreground: #1c61d8; + --token-color-vagrant-surface: #d6ebff; + --token-color-vagrant-border: #c7dbfc; + --token-color-vagrant-gradient-primary-start: #639cff; + --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-foreground: #9a6f00; + --token-color-vault-radar-surface: #fff9cf; + --token-color-vault-radar-border: #feec7b; + --token-color-vault-radar-gradient-primary-start: #feec7b; + --token-color-vault-radar-gradient-primary-stop: #ffe543; + --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-secrets-brand: #ffcf25; + --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-color-vault-secrets-foreground: #9a6f00; + --token-color-vault-secrets-surface: #fff9cf; + --token-color-vault-secrets-border: #feec7b; + --token-color-vault-secrets-gradient-primary-start: #feec7b; + --token-color-vault-secrets-gradient-primary-stop: #ffe543; + --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-brand: #ffcf25; + --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-foreground: #9a6f00; + --token-color-vault-surface: #fff9cf; + --token-color-vault-border: #feec7b; + --token-color-vault-gradient-primary-start: #feec7b; + --token-color-vault-gradient-primary-stop: #ffe543; + --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-waypoint-brand: #14c6cb; + --token-color-waypoint-foreground: #008196; + --token-color-waypoint-surface: #e0fcff; + --token-color-waypoint-border: #cbf1f3; + --token-color-waypoint-gradient-primary-start: #cbf1f3; + --token-color-waypoint-gradient-primary-stop: #62d4dc; + --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-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-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-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, + 0px 12px 24px 0px #3b3d4559; + --token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, + inset 0px 1px 2px 1px #656a761a; + --token-surface-base-box-shadow: 0 0 0 1px #656a7633; + --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-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-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-header-height: 60px; + --token-app-header-home-link-size: 36px; + --token-app-header-logo-size: 28px; + --token-app-side-nav-wrapper-border-width: 1px; + --token-app-side-nav-wrapper-border-color: var( + --token-color-palette-neutral-200 + ); + --token-app-side-nav-wrapper-padding-horizontal: 16px; + --token-app-side-nav-wrapper-padding-vertical: 16px; + --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-app-side-nav-toggle-button-border-radius: 5px; + --token-app-side-nav-header-home-link-padding: 4px; + --token-app-side-nav-header-home-link-logo-size: 48px; + --token-app-side-nav-header-home-link-logo-size-minimized: 32px; + --token-app-side-nav-header-actions-spacing: 8px; + --token-app-side-nav-body-list-margin-vertical: 24px; + --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-item-content-spacing-horizontal: 8px; + --token-app-side-nav-body-list-item-border-radius: 5px; + --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-foreground-faint: var( + --token-color-foreground-faint + ); + --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: 7px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ + --token-badge-count-padding-horizontal-medium: 11px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ + --token-badge-count-padding-horizontal-large: 13px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ + --token-badge-height-small: 20px; + --token-badge-height-medium: 24px; + --token-badge-height-large: 32px; + --token-badge-padding-horizontal-small: 5px; /* here we're taking into account the 1px border */ + --token-badge-padding-horizontal-medium: 7px; /* here we're taking into account the 1px border */ + --token-badge-padding-horizontal-large: 7px; /* here we're taking into account the 1px border */ + --token-badge-padding-vertical-small: 1px; /* here we're taking into account the 1px border */ + --token-badge-padding-vertical-medium: 3px; /* here we're taking into account the 1px border */ + --token-badge-padding-vertical-large: 3px; /* here we're taking into account the 1px border */ + --token-badge-icon-size-small: 12px; + --token-badge-icon-size-medium: 16px; + --token-badge-icon-size-large: 16px; + --token-badge-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, + Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, + Segoe UI Symbol; + --token-badge-font-size-small: 0.8125rem; /* 13px/0.8125rem */ + --token-badge-font-size-medium: 0.8125rem; /* 13px/0.8125rem */ + --token-badge-font-size-large: 1rem; /* 16px/1rem */ + --token-badge-line-height-small: 1.2308; /* 16px */ + --token-badge-line-height-medium: 1.2308; /* 16px */ + --token-badge-line-height-large: 1.5; /* 24px */ + --token-badge-font-weight: 500; + --token-badge-gap-small: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-large: 6px; + --token-badge-border-width: 1px; + --token-badge-border-radius: 5px; + --token-badge-filled-neutral-foreground-color: #3b3d45; + --token-badge-filled-neutral-background-color: #f1f2f3; + --token-badge-filled-neutral-dark-mode-foreground-color: #ffffff; + --token-badge-filled-neutral-dark-mode-background-color: #656a76; + --token-badge-filled-highlight-foreground-color: #911ced; + --token-badge-filled-highlight-background-color: #f9f2ff; + --token-badge-filled-success-foreground-color: #00781e; + --token-badge-filled-success-background-color: #f2fbf6; + --token-badge-filled-warning-foreground-color: #9e4b00; + --token-badge-filled-warning-background-color: #fff9e8; + --token-badge-filled-critical-foreground-color: #c00005; + --token-badge-filled-critical-background-color: #fff5f5; + --token-badge-inverted-neutral-foreground-color: #ffffff; + --token-badge-inverted-neutral-background-color: #656a76; + --token-badge-inverted-neutral-dark-mode-foreground-color: #3b3d45; + --token-badge-inverted-neutral-dark-mode-background-color: #fafafa; + --token-badge-inverted-highlight-foreground-color: #ffffff; + --token-badge-inverted-highlight-background-color: #a737ff; + --token-badge-inverted-success-foreground-color: #ffffff; + --token-badge-inverted-success-background-color: #008a22; + --token-badge-inverted-warning-foreground-color: #ffffff; + --token-badge-inverted-warning-background-color: #bb5a00; + --token-badge-inverted-critical-foreground-color: #ffffff; + --token-badge-inverted-critical-background-color: #e52228; + --token-badge-outlined-neutral-foreground-color: #3b3d45; + --token-badge-outlined-neutral-border-color: #656a76; + --token-badge-outlined-neutral-dark-mode-foreground-color: #ffffff; + --token-badge-outlined-neutral-dark-mode-border-color: #fafafa; + --token-badge-outlined-highlight-foreground-color: #a737ff; + --token-badge-outlined-highlight-border-color: #a737ff; + --token-badge-outlined-success-foreground-color: #008a22; + --token-badge-outlined-success-border-color: #008a22; + --token-badge-outlined-warning-foreground-color: #bb5a00; + --token-badge-outlined-warning-border-color: #bb5a00; + --token-badge-outlined-critical-foreground-color: #e52228; + --token-badge-outlined-critical-border-color: #e52228; + --token-button-critical-foreground-default: #c00005; + --token-button-critical-foreground-hover: #ffffff; + --token-button-critical-foreground-focus: #c00005; + --token-button-critical-foreground-active: #ffffff; + --token-button-critical-surface-default: #fff5f5; + --token-button-critical-surface-hover: #c00005; + --token-button-critical-surface-focus: #fff5f5; + --token-button-critical-surface-active: #940004; + --token-button-critical-border-color-default: #c00005; + --token-button-critical-border-color-hover: #940004; + --token-button-critical-border-color-focus: #c00005; + --token-button-critical-border-color-active: #940004; + --token-button-critical-box-shadow-default: 0px 1px 1px 0px #656a760d, + 0px 2px 2px 0px #656a760d; + --token-button-critical-box-shadow-focus: none; + --token-button-critical-box-shadow-active: none; + --token-button-disabled-foreground: #8c909c; + --token-button-disabled-surface: #fafafa; + --token-button-disabled-border-color: #656a7633; + --token-button-disabled-box-shadow: none; + --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-icon-size-small: 12px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-large: 24px; + --token-button-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, + Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, + Segoe UI Symbol; + --token-button-font-size-small: 0.8125rem; /* 13px/0.8125rem */ + --token-button-font-size-medium: 0.875rem; /* 14px/0.875rem */ + --token-button-font-size-large: 1rem; /* 16px/1rem */ + --token-button-line-height-small: 1.0769; /* 14px - 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-line-height-medium: 1.1428; /* 16px */ + --token-button-line-height-large: 1.5; /* 24px */ + --token-button-font-weight: 400; /* notice: we set the font-weight of the button text to 'regular' (on purpose) because of the antialising of the browser that renders the text quite different from what it looks like in Figma, so we prefer to have them visually similar even if they differ in their internal implementation (in Figma the font-weight is medium/500) - for more context about this decision: https://hashicorp.atlassian.net/browse/HDS-2099 */ + --token-button-gap: 6px; + --token-button-border-width: 1px; + --token-button-border-radius: 5px; + --token-button-box-shadow-focus: none; + --token-button-focus-border-width: 3px; + --token-button-focus-border-radius: 0px; + --token-button-primary-foreground-default: #ffffff; + --token-button-primary-foreground-hover: #ffffff; + --token-button-primary-foreground-focus: #ffffff; + --token-button-primary-foreground-active: #ffffff; + --token-button-primary-surface-default: #1060ff; + --token-button-primary-surface-hover: #0046d1; + --token-button-primary-surface-focus: #1060ff; + --token-button-primary-surface-active: #0046d1; + --token-button-primary-border-color-default: #0c56e9; + --token-button-primary-border-color-hover: #0046d1; + --token-button-primary-border-color-focus: #0c56e9; + --token-button-primary-border-color-active: #0046d1; + --token-button-primary-box-shadow-default: 0px 1px 1px 0px #656a760d, + 0px 2px 2px 0px #656a760d; + --token-button-primary-box-shadow-focus: none; + --token-button-primary-box-shadow-active: none; + --token-button-secondary-foreground-default: #3b3d45; + --token-button-secondary-foreground-hover: #3b3d45; + --token-button-secondary-foreground-focus: #3b3d45; + --token-button-secondary-foreground-active: #3b3d45; + --token-button-secondary-surface-default: #fafafa; + --token-button-secondary-surface-hover: #ffffff; + --token-button-secondary-surface-focus: #fafafa; + --token-button-secondary-surface-active: #dedfe3; + --token-button-secondary-border-color-default: #3b3d4566; + --token-button-secondary-border-color-hover: #3b3d4566; + --token-button-secondary-border-color-focus: #0c56e9; + --token-button-secondary-border-color-active: #3b3d4566; + --token-button-secondary-box-shadow-default: 0px 1px 1px 0px #656a760d, + 0px 2px 2px 0px #656a760d; + --token-button-secondary-box-shadow-focus: none; + --token-button-secondary-box-shadow-active: none; + --token-button-tertiary-foreground-default: #1060ff; + --token-button-tertiary-foreground-hover: #0c56e9; + --token-button-tertiary-foreground-focus: #1060ff; + --token-button-tertiary-foreground-active: #0046d1; + --token-button-tertiary-surface-default: rgba(0, 0, 0, 0); + --token-button-tertiary-surface-hover: #ffffff; + --token-button-tertiary-surface-focus: #ffffff; + --token-button-tertiary-surface-active: #dedfe3; + --token-button-tertiary-border-color-default: rgba(0, 0, 0, 0); + --token-button-tertiary-border-color-hover: #3b3d4566; + --token-button-tertiary-border-color-focus: #0c56e9; + --token-button-tertiary-border-color-active: #3b3d4566; + --token-button-tertiary-box-shadow-default: none; + --token-button-tertiary-box-shadow-focus: none; + --token-button-tertiary-box-shadow-active: none; + --token-form-label-color: #0c0c0e; + --token-form-legend-color: #0c0c0e; + --token-form-helper-text-color: #656a76; + --token-form-indicator-optional-color: #656a76; + --token-form-visibility-toggle-size: 24px; + --token-form-visibility-toggle-padding: 3px; /* here we're taking into account the 1px border */ + --token-form-visibility-toggle-color: #3b3d45; + --token-form-visibility-toggle-background-color: rgba(0, 0, 0, 0); + --token-form-visibility-toggle-border-width: 1px; + --token-form-visibility-toggle-border-color: rgba(0, 0, 0, 0); + --token-form-error-color: #c00005; + --token-form-error-icon-size: 14px; + --token-form-error-icon-margin-horizontal: 0px; + --token-form-error-icon-margin-vertical: 2px; /* This extra margin is used for vertical optical alignment. */ + --token-form-error-gap: 8px; + --token-form-checkbox-size: 16px; + --token-form-checkbox-border-radius: 3px; + --token-form-checkbox-border-width: 1px; + --token-form-checkbox-background-image-size: 12px; + --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-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-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-file-input-min-height: 32px; + --token-form-file-input-margin-right: 16px; + --token-form-control-base-foreground-value-color: #0c0c0e; + --token-form-control-base-foreground-placeholder-color: #656a76; + --token-form-control-base-surface-color-default: #ffffff; + --token-form-control-base-surface-color-hover: #f1f2f3; + --token-form-control-base-border-color-default: #8c909c; + --token-form-control-base-border-color-hover: #656a76; + --token-form-control-base-box-shadow-default: inset 0px 1px 2px 1px #656a761a; + --token-form-control-checked-foreground-color: #ffffff; + --token-form-control-checked-surface-color-default: #1060ff; + --token-form-control-checked-surface-color-hover: #0c56e9; + --token-form-control-checked-border-color-default: #0c56e9; + --token-form-control-checked-border-color-hover: #0046d1; + --token-form-control-invalid-border-color-default: #c00005; + --token-form-control-invalid-border-color-hover: #940004; + --token-form-control-invalid-outline-color: #dd7578; + --token-form-control-readonly-foreground-color: #3b3d45; + --token-form-control-readonly-surface-color: #f1f2f3; + --token-form-control-readonly-border-color: #656a761a; + --token-form-control-focus-outline-color: #5990ff; + --token-form-control-focus-outline-width: 3px; + --token-form-control-focus-outline-offset: 0px; + --token-form-control-disabled-foreground-color: #8c909c; + --token-form-control-disabled-surface-color: #fafafa; + --token-form-control-disabled-border-color: #656a7633; + --token-form-control-standard-height: 32px; /* Notice: we use this special token for elements that need to match the 'standard' height of an input element (because that height is actually the result of: text line height + vertical padding + border size). */ + --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-padding-with-icon: 31px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. We also consider extra 24px for the icon. */ + --token-form-control-border-radius: 5px; + --token-form-control-border-width: 1px; + --token-form-masked-input-toggle-button-size: 24px; + --token-form-masked-input-copy-button-margin-right: 8px; + --token-form-radio-size: 16px; + --token-form-radio-border-width: 1px; + --token-form-radio-background-image-size: 12px; + --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-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-outline-offset: 1px; + --token-form-radiocard-group-gap: 16px; + --token-form-radiocard-group-legend-margin-bottom: 12px; + --token-form-radiocard-border-width: 1px; + --token-form-radiocard-border-radius: 6px; + --token-form-radiocard-content-padding: 24px; + --token-form-radiocard-control-padding: 8px; + --token-form-radiocard-box-shadow-default: 0px 2px 3px 0px #656a761a, + 0px 8px 16px -10px #656a7633; + --token-form-radiocard-box-shadow-hover: 0px 2px 3px 0px #656a7626, + 0px 16px 16px -10px #656a7633; + --token-form-radiocard-box-shadow-focus: 0 0 0 3px #5990ff; /* This is a custom shadow used to add a focus ring around the card */ + --token-form-radiocard-box-shadow-disabled: none; + --token-form-radiocard-transition-duration: 0.2s; + --token-form-select-background-image-size: 16px; + --token-form-select-background-image-position-right-x: 7px; + --token-form-select-background-image-position-top-y: 9px; + --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-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-outline-offset: 0px; + --token-form-text-area-min-height: 32px; + --token-form-text-area-outline-offset: 0px; + --token-form-text-input-background-image-size: 16px; + --token-form-text-input-background-image-position-x: 7px; + --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-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-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-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-toggle-width: 32px; + --token-form-toggle-height: 16px; + --token-form-toggle-base-surface-color-default: #f1f2f3; /* 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-background-image-size: 12px; + --token-form-toggle-background-image-position-x: 2px; + --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-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-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-form-toggle-thumb-border-radius: 50%px; + --token-form-toggle-outline-width: 3px; + --token-form-toggle-outline-offset: 1px; + --token-outline-offset: 0px; + --token-pagination-nav-control-height: 36px; + --token-pagination-nav-control-padding-horizontal: 12px; + --token-pagination-nav-control-focus-inset: 4px; + --token-pagination-nav-control-icon-spacing: 6px; + --token-pagination-nav-indicator-height: 2px; + --token-pagination-nav-indicator-spacing: 6px; + --token-pagination-child-spacing-vertical: 8px; + --token-pagination-child-spacing-horizontal: 20px; + --token-side-nav-wrapper-border-width: 1px; + --token-side-nav-wrapper-border-color: #656a76; + --token-side-nav-wrapper-padding-horizontal: 16px; + --token-side-nav-wrapper-padding-vertical: 16px; + --token-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-side-nav-toggle-button-border-radius: 5px; + --token-side-nav-header-home-link-padding: 4px; + --token-side-nav-header-home-link-logo-size: 48px; + --token-side-nav-header-home-link-logo-size-minimized: 32px; + --token-side-nav-header-actions-spacing: 8px; + --token-side-nav-body-list-margin-vertical: 24px; + --token-side-nav-body-list-item-height: 36px; + --token-side-nav-body-list-item-padding-horizontal: 8px; + --token-side-nav-body-list-item-padding-vertical: 4px; + --token-side-nav-body-list-item-spacing-vertical: 2px; + --token-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-side-nav-body-list-item-border-radius: 5px; + --token-side-nav-color-foreground-primary: #dedfe3; + --token-side-nav-color-foreground-strong: #ffffff; + --token-side-nav-color-foreground-faint: #8c909c; + --token-side-nav-color-surface-primary: #0c0c0e; + --token-side-nav-color-surface-interactive-hover: #3b3d45; + --token-side-nav-color-surface-interactive-active: #656a76; + --token-tabs-tab-height-medium: 36px; + --token-tabs-tab-height-large: 48px; + --token-tabs-tab-padding-horizontal-medium: 12px; + --token-tabs-tab-padding-horizontal-large: 20px; + --token-tabs-tab-padding-vertical: 0px; + --token-tabs-tab-border-radius: 5px; + --token-tabs-tab-focus-inset: 6px; + --token-tabs-tab-gutter: 6px; + --token-tabs-indicator-height: 3px; + --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-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; + --token-typography-font-stack-code: ui-monospace, Menlo, Consolas, monospace; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 500; + --token-typography-font-weight-semibold: 600; + --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: 1.875rem; /* 30px/1.875rem */ + --token-typography-display-500-line-height: 1.2666; /* 38px */ + --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-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-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-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-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 */ + --token-typography-body-200-font-family: -apple-system, BlinkMacSystemFont, + Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, + Segoe UI Symbol; + --token-typography-body-200-font-size: 0.875rem; /* 14px/0.875rem */ + --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: 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 */ +} diff --git a/packages/tokens/expected-CSS-output/generated/themed-tokens-with-root-selector/common-tokens.css b/packages/tokens/expected-CSS-output/generated/themed-tokens-with-root-selector/common-tokens.css new file mode 100644 index 00000000000..8d45c44eceb --- /dev/null +++ b/packages/tokens/expected-CSS-output/generated/themed-tokens-with-root-selector/common-tokens.css @@ -0,0 +1,528 @@ +:root { + --token-color-border-primary: #656a7633; + --token-color-border-faint: #656a761a; + --token-color-border-strong: #3b3d4566; + --token-color-border-action: #cce3fe; + --token-color-border-highlight: #ead2fe; + --token-color-border-success: #cceeda; + --token-color-border-warning: #fbeabf; + --token-color-border-critical: #fbd4d4; + --token-color-focus-action-internal: #0c56e9; + --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-critical-internal: #c00005; + --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-foreground-strong: #0c0c0e; + --token-color-foreground-primary: #3b3d45; + --token-color-foreground-faint: #656a76; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: #8c909c; + --token-color-foreground-action: #1060ff; + --token-color-foreground-action-hover: #0c56e9; + --token-color-foreground-action-active: #0046d1; + --token-color-foreground-highlight: #a737ff; + --token-color-foreground-highlight-on-surface: #911ced; + --token-color-foreground-highlight-high-contrast: #42215b; + --token-color-foreground-success: #008a22; + --token-color-foreground-success-on-surface: #00781e; + --token-color-foreground-success-high-contrast: #054220; + --token-color-foreground-warning: #bb5a00; + --token-color-foreground-warning-on-surface: #9e4b00; + --token-color-foreground-warning-high-contrast: #542800; + --token-color-foreground-critical: #e52228; + --token-color-foreground-critical-on-surface: #c00005; + --token-color-foreground-critical-high-contrast: #51130a; + --token-color-page-primary: #ffffff; + --token-color-page-faint: #fafafa; + --token-color-surface-primary: #ffffff; + --token-color-surface-faint: #fafafa; + --token-color-surface-strong: #f1f2f3; + --token-color-surface-interactive: #ffffff; + --token-color-surface-interactive-hover: #f1f2f3; + --token-color-surface-interactive-active: #dedfe3; + --token-color-surface-interactive-disabled: #fafafa; + --token-color-surface-action: #f2f8ff; + --token-color-surface-highlight: #f9f2ff; + --token-color-surface-success: #f2fbf6; + --token-color-surface-warning: #fff9e8; + --token-color-surface-critical: #fff5f5; + --token-color-hashicorp-brand: #000000; + --token-color-boundary-brand: #f24c53; + --token-color-boundary-foreground: #cf2d32; + --token-color-boundary-surface: #ffecec; + --token-color-boundary-border: #fbd7d8; + --token-color-boundary-gradient-primary-start: #f97076; + --token-color-boundary-gradient-primary-stop: #db363b; + --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-consul-brand: #e03875; + --token-color-consul-foreground: #d01c5b; + --token-color-consul-surface: #ffe9f1; + --token-color-consul-border: #ffcede; + --token-color-consul-gradient-primary-start: #ff99be; + --token-color-consul-gradient-primary-stop: #da306e; + --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-hcp-brand: #000000; + --token-color-nomad-brand: #06d092; + --token-color-nomad-foreground: #008661; + --token-color-nomad-surface: #d3fdeb; + --token-color-nomad-border: #bff3dd; + --token-color-nomad-gradient-primary-start: #bff3dd; + --token-color-nomad-gradient-primary-stop: #60dea9; + --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-packer-brand: #02a8ef; + --token-color-packer-foreground: #007eb4; + --token-color-packer-surface: #d4f2ff; + --token-color-packer-border: #b4e4ff; + --token-color-packer-gradient-primary-start: #b4e4ff; + --token-color-packer-gradient-primary-stop: #63d0ff; + --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-terraform-brand: #7b42bc; + --token-color-terraform-brand-on-dark: #a067da; /* this is an alternative brand color meant to be used on dark backgrounds */ + --token-color-terraform-foreground: #773cb4; + --token-color-terraform-surface: #f4ecff; + --token-color-terraform-border: #ebdbfc; + --token-color-terraform-gradient-primary-start: #bb8deb; + --token-color-terraform-gradient-primary-stop: #844fba; + --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-vagrant-brand: #1868f2; + --token-color-vagrant-foreground: #1c61d8; + --token-color-vagrant-surface: #d6ebff; + --token-color-vagrant-border: #c7dbfc; + --token-color-vagrant-gradient-primary-start: #639cff; + --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-foreground: #9a6f00; + --token-color-vault-radar-surface: #fff9cf; + --token-color-vault-radar-border: #feec7b; + --token-color-vault-radar-gradient-primary-start: #feec7b; + --token-color-vault-radar-gradient-primary-stop: #ffe543; + --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-secrets-brand: #ffcf25; + --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-color-vault-secrets-foreground: #9a6f00; + --token-color-vault-secrets-surface: #fff9cf; + --token-color-vault-secrets-border: #feec7b; + --token-color-vault-secrets-gradient-primary-start: #feec7b; + --token-color-vault-secrets-gradient-primary-stop: #ffe543; + --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-brand: #ffcf25; + --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-foreground: #9a6f00; + --token-color-vault-surface: #fff9cf; + --token-color-vault-border: #feec7b; + --token-color-vault-gradient-primary-start: #feec7b; + --token-color-vault-gradient-primary-stop: #ffe543; + --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-waypoint-brand: #14c6cb; + --token-color-waypoint-foreground: #008196; + --token-color-waypoint-surface: #e0fcff; + --token-color-waypoint-border: #cbf1f3; + --token-color-waypoint-gradient-primary-start: #cbf1f3; + --token-color-waypoint-gradient-primary-stop: #62d4dc; + --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-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-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-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; + --token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a; + --token-surface-base-box-shadow: 0 0 0 1px #656a7633; + --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-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-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-header-height: 60px; + --token-app-header-home-link-size: 36px; + --token-app-header-logo-size: 28px; + --token-app-side-nav-wrapper-border-width: 1px; + --token-app-side-nav-wrapper-border-color: var(--token-color-palette-neutral-200); + --token-app-side-nav-wrapper-padding-horizontal: 16px; + --token-app-side-nav-wrapper-padding-vertical: 16px; + --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-app-side-nav-toggle-button-border-radius: 5px; + --token-app-side-nav-header-home-link-padding: 4px; + --token-app-side-nav-header-home-link-logo-size: 48px; + --token-app-side-nav-header-home-link-logo-size-minimized: 32px; + --token-app-side-nav-header-actions-spacing: 8px; + --token-app-side-nav-body-list-margin-vertical: 24px; + --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-item-content-spacing-horizontal: 8px; + --token-app-side-nav-body-list-item-border-radius: 5px; + --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-foreground-faint: var(--token-color-foreground-faint); + --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: 7px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ + --token-badge-count-padding-horizontal-medium: 11px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ + --token-badge-count-padding-horizontal-large: 13px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ + --token-badge-height-small: 20px; + --token-badge-height-medium: 24px; + --token-badge-height-large: 32px; + --token-badge-padding-horizontal-small: 5px; /* here we're taking into account the 1px border */ + --token-badge-padding-horizontal-medium: 7px; /* here we're taking into account the 1px border */ + --token-badge-padding-horizontal-large: 7px; /* here we're taking into account the 1px border */ + --token-badge-padding-vertical-small: 1px; /* here we're taking into account the 1px border */ + --token-badge-padding-vertical-medium: 3px; /* here we're taking into account the 1px border */ + --token-badge-padding-vertical-large: 3px; /* here we're taking into account the 1px border */ + --token-badge-icon-size-small: 12px; + --token-badge-icon-size-medium: 16px; + --token-badge-icon-size-large: 16px; + --token-badge-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-badge-font-size-small: 0.8125rem; /* 13px/0.8125rem */ + --token-badge-font-size-medium: 0.8125rem; /* 13px/0.8125rem */ + --token-badge-font-size-large: 1rem; /* 16px/1rem */ + --token-badge-line-height-small: 1.2308; /* 16px */ + --token-badge-line-height-medium: 1.2308; /* 16px */ + --token-badge-line-height-large: 1.5; /* 24px */ + --token-badge-font-weight: 500; + --token-badge-gap-small: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-large: 6px; + --token-badge-border-width: 1px; + --token-badge-border-radius: 5px; + --token-badge-filled-neutral-foreground-color: #3b3d45; + --token-badge-filled-neutral-background-color: #f1f2f3; + --token-badge-filled-neutral-dark-mode-foreground-color: #ffffff; + --token-badge-filled-neutral-dark-mode-background-color: #656a76; + --token-badge-filled-highlight-foreground-color: #911ced; + --token-badge-filled-highlight-background-color: #f9f2ff; + --token-badge-filled-success-foreground-color: #00781e; + --token-badge-filled-success-background-color: #f2fbf6; + --token-badge-filled-warning-foreground-color: #9e4b00; + --token-badge-filled-warning-background-color: #fff9e8; + --token-badge-filled-critical-foreground-color: #c00005; + --token-badge-filled-critical-background-color: #fff5f5; + --token-badge-inverted-neutral-foreground-color: #ffffff; + --token-badge-inverted-neutral-background-color: #656a76; + --token-badge-inverted-neutral-dark-mode-foreground-color: #3b3d45; + --token-badge-inverted-neutral-dark-mode-background-color: #fafafa; + --token-badge-inverted-highlight-foreground-color: #ffffff; + --token-badge-inverted-highlight-background-color: #a737ff; + --token-badge-inverted-success-foreground-color: #ffffff; + --token-badge-inverted-success-background-color: #008a22; + --token-badge-inverted-warning-foreground-color: #ffffff; + --token-badge-inverted-warning-background-color: #bb5a00; + --token-badge-inverted-critical-foreground-color: #ffffff; + --token-badge-inverted-critical-background-color: #e52228; + --token-badge-outlined-neutral-foreground-color: #3b3d45; + --token-badge-outlined-neutral-border-color: #656a76; + --token-badge-outlined-neutral-dark-mode-foreground-color: #ffffff; + --token-badge-outlined-neutral-dark-mode-border-color: #fafafa; + --token-badge-outlined-highlight-foreground-color: #a737ff; + --token-badge-outlined-highlight-border-color: #a737ff; + --token-badge-outlined-success-foreground-color: #008a22; + --token-badge-outlined-success-border-color: #008a22; + --token-badge-outlined-warning-foreground-color: #bb5a00; + --token-badge-outlined-warning-border-color: #bb5a00; + --token-badge-outlined-critical-foreground-color: #e52228; + --token-badge-outlined-critical-border-color: #e52228; + --token-button-critical-foreground-default: #c00005; + --token-button-critical-foreground-hover: #ffffff; + --token-button-critical-foreground-focus: #c00005; + --token-button-critical-foreground-active: #ffffff; + --token-button-critical-surface-default: #fff5f5; + --token-button-critical-surface-hover: #c00005; + --token-button-critical-surface-focus: #fff5f5; + --token-button-critical-surface-active: #940004; + --token-button-critical-border-color-default: #c00005; + --token-button-critical-border-color-hover: #940004; + --token-button-critical-border-color-focus: #c00005; + --token-button-critical-border-color-active: #940004; + --token-button-critical-box-shadow-default: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; + --token-button-critical-box-shadow-focus: none; + --token-button-critical-box-shadow-active: none; + --token-button-disabled-foreground: #8c909c; + --token-button-disabled-surface: #fafafa; + --token-button-disabled-border-color: #656a7633; + --token-button-disabled-box-shadow: none; + --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-icon-size-small: 12px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-large: 24px; + --token-button-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-button-font-size-small: 0.8125rem; /* 13px/0.8125rem */ + --token-button-font-size-medium: 0.875rem; /* 14px/0.875rem */ + --token-button-font-size-large: 1rem; /* 16px/1rem */ + --token-button-line-height-small: 1.0769; /* 14px - 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-line-height-medium: 1.1428; /* 16px */ + --token-button-line-height-large: 1.5; /* 24px */ + --token-button-font-weight: 400; /* notice: we set the font-weight of the button text to 'regular' (on purpose) because of the antialising of the browser that renders the text quite different from what it looks like in Figma, so we prefer to have them visually similar even if they differ in their internal implementation (in Figma the font-weight is medium/500) - for more context about this decision: https://hashicorp.atlassian.net/browse/HDS-2099 */ + --token-button-gap: 6px; + --token-button-border-width: 1px; + --token-button-border-radius: 5px; + --token-button-box-shadow-focus: none; + --token-button-focus-border-width: 3px; + --token-button-focus-border-radius: 0px; + --token-button-primary-foreground-default: #ffffff; + --token-button-primary-foreground-hover: #ffffff; + --token-button-primary-foreground-focus: #ffffff; + --token-button-primary-foreground-active: #ffffff; + --token-button-primary-surface-default: #1060ff; + --token-button-primary-surface-hover: #0046d1; + --token-button-primary-surface-focus: #1060ff; + --token-button-primary-surface-active: #0046d1; + --token-button-primary-border-color-default: #0c56e9; + --token-button-primary-border-color-hover: #0046d1; + --token-button-primary-border-color-focus: #0c56e9; + --token-button-primary-border-color-active: #0046d1; + --token-button-primary-box-shadow-default: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; + --token-button-primary-box-shadow-focus: none; + --token-button-primary-box-shadow-active: none; + --token-button-secondary-foreground-default: #3b3d45; + --token-button-secondary-foreground-hover: #3b3d45; + --token-button-secondary-foreground-focus: #3b3d45; + --token-button-secondary-foreground-active: #3b3d45; + --token-button-secondary-surface-default: #fafafa; + --token-button-secondary-surface-hover: #ffffff; + --token-button-secondary-surface-focus: #fafafa; + --token-button-secondary-surface-active: #dedfe3; + --token-button-secondary-border-color-default: #3b3d4566; + --token-button-secondary-border-color-hover: #3b3d4566; + --token-button-secondary-border-color-focus: #0c56e9; + --token-button-secondary-border-color-active: #3b3d4566; + --token-button-secondary-box-shadow-default: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; + --token-button-secondary-box-shadow-focus: none; + --token-button-secondary-box-shadow-active: none; + --token-button-tertiary-foreground-default: #1060ff; + --token-button-tertiary-foreground-hover: #0c56e9; + --token-button-tertiary-foreground-focus: #1060ff; + --token-button-tertiary-foreground-active: #0046d1; + --token-button-tertiary-surface-default: rgba(0, 0, 0, 0); + --token-button-tertiary-surface-hover: #ffffff; + --token-button-tertiary-surface-focus: #ffffff; + --token-button-tertiary-surface-active: #dedfe3; + --token-button-tertiary-border-color-default: rgba(0, 0, 0, 0); + --token-button-tertiary-border-color-hover: #3b3d4566; + --token-button-tertiary-border-color-focus: #0c56e9; + --token-button-tertiary-border-color-active: #3b3d4566; + --token-button-tertiary-box-shadow-default: none; + --token-button-tertiary-box-shadow-focus: none; + --token-button-tertiary-box-shadow-active: none; + --token-form-label-color: #0c0c0e; + --token-form-legend-color: #0c0c0e; + --token-form-helper-text-color: #656a76; + --token-form-indicator-optional-color: #656a76; + --token-form-visibility-toggle-size: 24px; + --token-form-visibility-toggle-padding: 3px; /* here we're taking into account the 1px border */ + --token-form-visibility-toggle-color: #3b3d45; + --token-form-visibility-toggle-background-color: rgba(0, 0, 0, 0); + --token-form-visibility-toggle-border-width: 1px; + --token-form-visibility-toggle-border-color: rgba(0, 0, 0, 0); + --token-form-error-color: #c00005; + --token-form-error-icon-size: 14px; + --token-form-error-icon-margin-horizontal: 0px; + --token-form-error-icon-margin-vertical: 2px; /* This extra margin is used for vertical optical alignment. */ + --token-form-error-gap: 8px; + --token-form-checkbox-size: 16px; + --token-form-checkbox-border-radius: 3px; + --token-form-checkbox-border-width: 1px; + --token-form-checkbox-background-image-size: 12px; + --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-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-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-file-input-min-height: 32px; + --token-form-file-input-margin-right: 16px; + --token-form-control-base-foreground-value-color: #0c0c0e; + --token-form-control-base-foreground-placeholder-color: #656a76; + --token-form-control-base-surface-color-default: #ffffff; + --token-form-control-base-surface-color-hover: #f1f2f3; + --token-form-control-base-border-color-default: #8c909c; + --token-form-control-base-border-color-hover: #656a76; + --token-form-control-base-box-shadow-default: inset 0px 1px 2px 1px #656a761a; + --token-form-control-checked-foreground-color: #ffffff; + --token-form-control-checked-surface-color-default: #1060ff; + --token-form-control-checked-surface-color-hover: #0c56e9; + --token-form-control-checked-border-color-default: #0c56e9; + --token-form-control-checked-border-color-hover: #0046d1; + --token-form-control-invalid-border-color-default: #c00005; + --token-form-control-invalid-border-color-hover: #940004; + --token-form-control-invalid-outline-color: #dd7578; + --token-form-control-readonly-foreground-color: #3b3d45; + --token-form-control-readonly-surface-color: #f1f2f3; + --token-form-control-readonly-border-color: #656a761a; + --token-form-control-focus-outline-color: #5990ff; + --token-form-control-focus-outline-width: 3px; + --token-form-control-focus-outline-offset: 0px; + --token-form-control-disabled-foreground-color: #8c909c; + --token-form-control-disabled-surface-color: #fafafa; + --token-form-control-disabled-border-color: #656a7633; + --token-form-control-standard-height: 32px; /* Notice: we use this special token for elements that need to match the 'standard' height of an input element (because that height is actually the result of: text line height + vertical padding + border size). */ + --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-padding-with-icon: 31px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. We also consider extra 24px for the icon. */ + --token-form-control-border-radius: 5px; + --token-form-control-border-width: 1px; + --token-form-masked-input-toggle-button-size: 24px; + --token-form-masked-input-copy-button-margin-right: 8px; + --token-form-radio-size: 16px; + --token-form-radio-border-width: 1px; + --token-form-radio-background-image-size: 12px; + --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-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-outline-offset: 1px; + --token-form-radiocard-group-gap: 16px; + --token-form-radiocard-group-legend-margin-bottom: 12px; + --token-form-radiocard-border-width: 1px; + --token-form-radiocard-border-radius: 6px; + --token-form-radiocard-content-padding: 24px; + --token-form-radiocard-control-padding: 8px; + --token-form-radiocard-box-shadow-default: 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633; + --token-form-radiocard-box-shadow-hover: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633; + --token-form-radiocard-box-shadow-focus: 0 0 0 3px #5990ff; /* This is a custom shadow used to add a focus ring around the card */ + --token-form-radiocard-box-shadow-disabled: none; + --token-form-radiocard-transition-duration: 0.2s; + --token-form-select-background-image-size: 16px; + --token-form-select-background-image-position-right-x: 7px; + --token-form-select-background-image-position-top-y: 9px; + --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-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-outline-offset: 0px; + --token-form-text-area-min-height: 32px; + --token-form-text-area-outline-offset: 0px; + --token-form-text-input-background-image-size: 16px; + --token-form-text-input-background-image-position-x: 7px; + --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-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-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-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-toggle-width: 32px; + --token-form-toggle-height: 16px; + --token-form-toggle-base-surface-color-default: #f1f2f3; /* 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-background-image-size: 12px; + --token-form-toggle-background-image-position-x: 2px; + --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-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-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-form-toggle-thumb-border-radius: 50%px; + --token-form-toggle-outline-width: 3px; + --token-form-toggle-outline-offset: 1px; + --token-outline-offset: 0px; + --token-pagination-nav-control-height: 36px; + --token-pagination-nav-control-padding-horizontal: 12px; + --token-pagination-nav-control-focus-inset: 4px; + --token-pagination-nav-control-icon-spacing: 6px; + --token-pagination-nav-indicator-height: 2px; + --token-pagination-nav-indicator-spacing: 6px; + --token-pagination-child-spacing-vertical: 8px; + --token-pagination-child-spacing-horizontal: 20px; + --token-side-nav-wrapper-border-width: 1px; + --token-side-nav-wrapper-border-color: #656a76; + --token-side-nav-wrapper-padding-horizontal: 16px; + --token-side-nav-wrapper-padding-vertical: 16px; + --token-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-side-nav-toggle-button-border-radius: 5px; + --token-side-nav-header-home-link-padding: 4px; + --token-side-nav-header-home-link-logo-size: 48px; + --token-side-nav-header-home-link-logo-size-minimized: 32px; + --token-side-nav-header-actions-spacing: 8px; + --token-side-nav-body-list-margin-vertical: 24px; + --token-side-nav-body-list-item-height: 36px; + --token-side-nav-body-list-item-padding-horizontal: 8px; + --token-side-nav-body-list-item-padding-vertical: 4px; + --token-side-nav-body-list-item-spacing-vertical: 2px; + --token-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-side-nav-body-list-item-border-radius: 5px; + --token-side-nav-color-foreground-primary: #dedfe3; + --token-side-nav-color-foreground-strong: #ffffff; + --token-side-nav-color-foreground-faint: #8c909c; + --token-side-nav-color-surface-primary: #0c0c0e; + --token-side-nav-color-surface-interactive-hover: #3b3d45; + --token-side-nav-color-surface-interactive-active: #656a76; + --token-tabs-tab-height-medium: 36px; + --token-tabs-tab-height-large: 48px; + --token-tabs-tab-padding-horizontal-medium: 12px; + --token-tabs-tab-padding-horizontal-large: 20px; + --token-tabs-tab-padding-vertical: 0px; + --token-tabs-tab-border-radius: 5px; + --token-tabs-tab-focus-inset: 6px; + --token-tabs-tab-gutter: 6px; + --token-tabs-indicator-height: 3px; + --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-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; + --token-typography-font-stack-code: ui-monospace, Menlo, Consolas, monospace; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 500; + --token-typography-font-weight-semibold: 600; + --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: 1.875rem; /* 30px/1.875rem */ + --token-typography-display-500-line-height: 1.2666; /* 38px */ + --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-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-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-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-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 */ + --token-typography-body-200-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-body-200-font-size: 0.875rem; /* 14px/0.875rem */ + --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: 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 */ +} diff --git a/packages/tokens/expected-CSS-output/generated/themed-tokens-with-root-selector/dark-tokens.css b/packages/tokens/expected-CSS-output/generated/themed-tokens-with-root-selector/dark-tokens.css new file mode 100644 index 00000000000..f742f113858 --- /dev/null +++ b/packages/tokens/expected-CSS-output/generated/themed-tokens-with-root-selector/dark-tokens.css @@ -0,0 +1,44 @@ +:root { + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-green-500: #054220; + --token-color-palette-green-400: #006619; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-400: #940004; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-50: #fff5f5; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-300: #c2c5cb; + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-100: #656a761a; +} diff --git a/packages/tokens/expected-CSS-output/generated/themed-tokens-with-root-selector/light-tokens.css b/packages/tokens/expected-CSS-output/generated/themed-tokens-with-root-selector/light-tokens.css new file mode 100644 index 00000000000..f742f113858 --- /dev/null +++ b/packages/tokens/expected-CSS-output/generated/themed-tokens-with-root-selector/light-tokens.css @@ -0,0 +1,44 @@ +:root { + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-green-500: #054220; + --token-color-palette-green-400: #006619; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-400: #940004; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-50: #fff5f5; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-300: #c2c5cb; + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-100: #656a761a; +} From 76e03583e55c138804cbd4af9c6f9db4380d99cb Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Fri, 19 Sep 2025 15:56:28 +0100 Subject: [PATCH 016/224] added logic to generate theming CSS files --- .../with-css-selectors/tokens.css | 68 ++++++++++++++++++ .../with-prefers-color-scheme/tokens.css | 35 +++++++++ .../build-parts/generateExtraThemingFiles.ts | 72 +++++++++++++++++++ .../build-parts/getStyleDictionaryConfig.ts | 10 +-- packages/tokens/scripts/build.ts | 27 ++++--- 5 files changed, 197 insertions(+), 15 deletions(-) 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-prefers-color-scheme/tokens.css create mode 100644 packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts 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..592d7afc00b --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-css-selectors/tokens.css @@ -0,0 +1,68 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +.hds-theme-default, +[data-hds-theme="default"] { + --token-color-palette-neutral-300: #000000; + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-semantic-outlier: var( + --token-color-palette-neutral-0 + ); +} + +.hds-theme-cds-0, +[data-hds-theme="cds-0"] { + --token-color-palette-neutral-300: #c00000; + --token-color-palette-neutral-0: #cfffff; + --token-color-foreground-semantic-outlier: var( + --token-color-palette-neutral-100 + ); +} + +.hds-theme-cds-10, +[data-hds-theme="cds-10"] { + --token-color-palette-neutral-300: #c33333; + --token-color-palette-neutral-0: #cccccc; + --token-color-foreground-semantic-outlier: var( + --token-color-palette-neutral-200 + ); +} + +.hds-theme-cds-90, +[data-hds-theme="cds-90"] { + --token-color-palette-neutral-300: #cccccc; + --token-color-palette-neutral-0: #c33333; + --token-color-foreground-semantic-outlier: var( + --token-color-palette-neutral-300 + ); +} + +.hds-theme-cds-100, +[data-hds-theme="cds-100"] { + --token-color-palette-neutral-300: #cfffff; + --token-color-palette-neutral-0: #c00000; + --token-color-foreground-semantic-outlier: #abcdef; +} + +:root { + --token-color-palette-neutral-300: #000000; + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-semantic-outlier: var( + --token-color-palette-neutral-0 + ); +} + +:root { + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-component-a-size: 123px; + --token-color-foreground-strong: var(--token-color-palette-neutral-300); + --token-color-foreground-primary: var(--token-color-palette-neutral-200); + --token-color-foreground-high-contrast: var(--token-color-palette-neutral-0); + --token-component-a-color: var(--token-color-palette-neutral-300); + --token-component-b-color: var(--token-color-palette-neutral-200); + --token-component-b-size: var(--token-component-a-size); + --token-component-c-color: var(--token-color-foreground-high-contrast); + --token-component-d-color: var(--token-color-foreground-semantic-outlier); +} diff --git a/packages/tokens/dist/products/css/themed-tokens/with-prefers-color-scheme/tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-prefers-color-scheme/tokens.css new file mode 100644 index 00000000000..90db7cd8b13 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-prefers-color-scheme/tokens.css @@ -0,0 +1,35 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +@media (prefers-color-scheme: dark) { + :root { + --token-color-palette-neutral-300: #c00000; + --token-color-palette-neutral-0: #cfffff; + --token-color-foreground-semantic-outlier: var( + --token-color-palette-neutral-100 + ); + } +} + +@media (prefers-color-scheme: light) { + :root { + --token-color-palette-neutral-300: #cfffff; + --token-color-palette-neutral-0: #c00000; + --token-color-foreground-semantic-outlier: #abcdef; + } +} + +:root { + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-component-a-size: 123px; + --token-color-foreground-strong: var(--token-color-palette-neutral-300); + --token-color-foreground-primary: var(--token-color-palette-neutral-200); + --token-color-foreground-high-contrast: var(--token-color-palette-neutral-0); + --token-component-a-color: var(--token-color-palette-neutral-300); + --token-component-b-color: var(--token-color-palette-neutral-200); + --token-component-b-size: var(--token-component-a-size); + --token-component-c-color: var(--token-color-foreground-high-contrast); + --token-component-d-color: var(--token-color-foreground-semantic-outlier); +} diff --git a/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts b/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts new file mode 100644 index 00000000000..fac09e3d4c7 --- /dev/null +++ b/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts @@ -0,0 +1,72 @@ +/** + * 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'; + +const prettierConfig = { + parser: 'css', + tabWidth: 2, +} as const; + +export async function generateExtraThemingFiles(_dictionary: Dictionary, config: PlatformConfig ): Promise { + + const commonSource = await getSourceFromFileWithRootSelector(config, 'hds', 'common-tokens.css'); + const hdsThemedSource = await getSourceFromFileWithRootSelector(config, 'hds', 'themed-tokens.css'); + const cds0ThemedSource = await getSourceFromFileWithRootSelector(config, 'cds-0', 'themed-tokens.css'); + const cds10ThemedSource = await getSourceFromFileWithRootSelector(config, 'cds-10', 'themed-tokens.css'); + const cds90ThemedSource = await getSourceFromFileWithRootSelector(config, 'cds-90', 'themed-tokens.css'); + const cds100ThemedSource = await getSourceFromFileWithRootSelector(config, 'cds-100', 'themed-tokens.css'); + + const header = await fileHeader({}); + + const methods = ['prefers-color-scheme', 'css-selectors']; + + for (const method of methods) { + + let outputContent = `${header}\n\n`; + + // CSS files for `prefers-color-scheme` (note: we use `cds-0` for `light` and ` + if (method === 'prefers-color-scheme') { + outputContent += `@media (prefers-color-scheme: dark) { ${cds0ThemedSource} }\n\n`; + outputContent += `@media (prefers-color-scheme: light) { ${cds100ThemedSource} }\n\n`; + // this is the fallback to `light` mode + // commented for now: consumers can always import the `themed-tokens/with-root-selector/cds-0/themed-tokens.css` as extra file if they want to + // outputContent += '\n\n'; + // outputContent += `${cds0ThemedSource}\n\n`; + } + + // CSS files for `.class/[data]` selectors + if (method === 'css-selectors') { + outputContent = `${header}\n\n`; + outputContent += `${hdsThemedSource.replace(/^:root/, '.hds-theme-default, [data-hds-theme="default"]')}\n\n`; + outputContent += `${cds0ThemedSource.replace(/^:root/, '.hds-theme-cds-0, [data-hds-theme="cds-0"]')}\n\n`; + outputContent += `${cds10ThemedSource.replace(/^:root/, '.hds-theme-cds-10, [data-hds-theme="cds-10"]')}\n\n`; + outputContent += `${cds90ThemedSource.replace(/^:root/, '.hds-theme-cds-90, [data-hds-theme="cds-90"]')}\n\n`; + outputContent += `${cds100ThemedSource.replace(/^:root/, '.hds-theme-cds-100, [data-hds-theme="cds-100"]')}\n\n`; + // this is the fallback to the default `hds` mode + outputContent += '\n\n'; + outputContent += `${hdsThemedSource}\n\n`; + } + + outputContent += `${commonSource}\n\n`; + + const outputTokensCss = await prettier.format(outputContent, prettierConfig); + + const outputFolder = `${config.buildPath}themed-tokens/with-${method}/`; + await fs.ensureDir(outputFolder); + await fs.writeFile(`${outputFolder}tokens.css`, outputTokensCss); + } +} + +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 041c381619f..e8bb22a58aa 100644 --- a/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts +++ b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts @@ -65,7 +65,7 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod destination: `themed-tokens/with-root-selector/${mode}/common-tokens.css`, format: 'css/variables', options: { - // TODO understand if is better to output references or not (probably not) + // TODO understand if is better to output references or not for the "common" definitions (probably yes) outputReferences: true, // outputReferences: (token, { dictionary, usesDtcg }) => { // // `dictionary` contains `allTokens`, `tokens`, `tokenMap`, `unfilteredTokens`, `unfilteredAllTokens` and `unfilteredTokenMap` props @@ -83,7 +83,7 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod destination: `themed-tokens/with-root-selector/${mode}/themed-tokens.css`, format: 'css/variables', options: { - // TODO understand if is better to output references or not (probably not) + // TODO understand if is better to output references or not for the "themed" definitions (almost certainly yes) outputReferences: true, // outputReferences: (token, { dictionary, usesDtcg }) => { // // `dictionary` contains `allTokens`, `tokens`, `tokenMap`, `unfilteredTokens`, `unfilteredAllTokens` and `unfilteredTokenMap` props @@ -100,8 +100,6 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod ], // this has been registered in the `build` file preprocessors: [`replace-value-for-mode-${mode}`], - // TODO! do we need this? how do we manage CSS helpers for themed tokens? - // actions: ['generate-css-helpers'], } } }; @@ -131,7 +129,9 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod filter: excludePrivateTokens, } ], - actions: ['generate-css-helpers'], + // TODO! do we need this? how do we manage CSS helpers for themed tokens? + // actions: ['generate-css-helpers'], + actions: ['generate-css-helpers', 'generate-extra-theming-files'], }, 'docs/json': { buildPath: 'dist/docs/products/', diff --git a/packages/tokens/scripts/build.ts b/packages/tokens/scripts/build.ts index 5069468a29e..52e3fc86a85 100644 --- a/packages/tokens/scripts/build.ts +++ b/packages/tokens/scripts/build.ts @@ -4,7 +4,7 @@ */ import StyleDictionary from 'style-dictionary'; -import { getReferences, usesReferences } from "style-dictionary/utils"; +// import { getReferences, usesReferences } from "style-dictionary/utils"; import type { DesignToken, PlatformConfig } from 'style-dictionary/types'; import tinycolor from 'tinycolor2'; @@ -15,8 +15,9 @@ import { fileURLToPath } from 'url'; import { dirname } from 'path'; import { cloneDeep } from 'lodash-es'; -import { generateCssHelpers } from './build-parts/generateCssHelpers.ts'; import { targets, modes, getStyleDictionaryConfig } from './build-parts/getStyleDictionaryConfig.ts'; +import { generateCssHelpers } from './build-parts/generateCssHelpers.ts'; +import { generateExtraThemingFiles } from './build-parts/generateExtraThemingFiles.ts'; // SCRIPT CONFIG @@ -284,6 +285,12 @@ StyleDictionary.registerAction({ undo: () => {} }); +StyleDictionary.registerAction({ + name: 'generate-extra-theming-files', + do: generateExtraThemingFiles, + undo: () => {} +}); + // ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• // ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• @@ -298,19 +305,19 @@ console.log('\n=============================================='); console.log(`\nCleaning up dist folder`); fs.emptyDirSync(distFolder); -// generate standard tokens -for (const target of targets) { - const StyleDictionaryInstance = new StyleDictionary(getStyleDictionaryConfig({ target })); - console.log(`\n---\n\nProcessing target "${target}"...`); +// 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 themed tokens -for (const mode of modes) { - const StyleDictionaryInstance = new StyleDictionary(getStyleDictionaryConfig({ target: 'products', mode })); - console.log(`\n---\n\nProcessing mode "${mode}"...`); +// generate standard tokens +for (const target of targets) { + const StyleDictionaryInstance = new StyleDictionary(getStyleDictionaryConfig({ target })); + console.log(`\n---\n\nProcessing target "${target}"...`); await StyleDictionaryInstance.hasInitialized; await StyleDictionaryInstance.buildAllPlatforms() console.log('\nEnd processing'); From abd9576d999958f1a0469803f4f1071db2173ba8 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 30 Sep 2025 10:53:48 +0100 Subject: [PATCH 017/224] REVERT - Removed `modes-testing` tokens --- .../tokens/src/modes-testing/01-colors.json | 40 ------------------- .../tokens/src/modes-testing/02-semantic.json | 33 --------------- .../src/modes-testing/03-component.json | 38 ------------------ 3 files changed, 111 deletions(-) delete mode 100644 packages/tokens/src/modes-testing/01-colors.json delete mode 100644 packages/tokens/src/modes-testing/02-semantic.json delete mode 100644 packages/tokens/src/modes-testing/03-component.json diff --git a/packages/tokens/src/modes-testing/01-colors.json b/packages/tokens/src/modes-testing/01-colors.json deleted file mode 100644 index 158c4860435..00000000000 --- a/packages/tokens/src/modes-testing/01-colors.json +++ /dev/null @@ -1,40 +0,0 @@ -{ - "color": { - "palette": { - "neutral-300": { - "$type": "color", - "$value": "#000000", - "group": "palette", - "$modes": { - "hds": "#000000", - "cds-0": "#c00000", - "cds-10": "#c33333", - "cds-90": "#cccccc", - "cds-100": "#cfffff" - } - }, - "neutral-200": { - "$type": "color", - "$value": "#dedfe3", - "group": "palette" - }, - "neutral-100": { - "$type": "color", - "$value": "#f1f2f3", - "group": "palette" - }, - "neutral-0": { - "$type": "color", - "$value": "#ffffff", - "group": "palette", - "$modes": { - "hds": "#ffffff", - "cds-0": "#cfffff", - "cds-10": "#cccccc", - "cds-90": "#c33333", - "cds-100": "#c00000" - } - } - } - } -} \ No newline at end of file diff --git a/packages/tokens/src/modes-testing/02-semantic.json b/packages/tokens/src/modes-testing/02-semantic.json deleted file mode 100644 index b9b1329566a..00000000000 --- a/packages/tokens/src/modes-testing/02-semantic.json +++ /dev/null @@ -1,33 +0,0 @@ -{ - "color": { - "foreground": { - "strong": { - "$type": "color", - "$value": "{color.palette.neutral-300}", - "group": "semantic" - }, - "primary": { - "$type": "color", - "$value": "{color.palette.neutral-200}", - "group": "semantic" - }, - "high-contrast": { - "$type": "color", - "$value": "{color.palette.neutral-0}", - "group": "semantic" - }, - "semantic-outlier": { - "$type": "color", - "$value": "{color.palette.neutral-0}", - "group": "semantic", - "$modes": { - "hds": "{color.palette.neutral-0}", - "cds-0": "{color.palette.neutral-100}", - "cds-10": "{color.palette.neutral-200}", - "cds-90": "{color.palette.neutral-300}", - "cds-100": "#abcdef" - } - } - } - } -} \ No newline at end of file diff --git a/packages/tokens/src/modes-testing/03-component.json b/packages/tokens/src/modes-testing/03-component.json deleted file mode 100644 index a19ce4aef34..00000000000 --- a/packages/tokens/src/modes-testing/03-component.json +++ /dev/null @@ -1,38 +0,0 @@ -{ - "componentA": { - "color": { - "$type": "color", - "$value": "{color.palette.neutral-300}", - "group": "components" - }, - "size": { - "$type": "dimension", - "$value": "123", - "unit": "px", - "group": "components" - } - }, - "componentB": { - "color": { - "$type": "color", - "$value": "{color.palette.neutral-200}", - "group": "components" - }, - "size": { - "$value": "{componentA.size}", - "group": "components" - } - }, - "componentC": { - "color": { - "$value": "{color.foreground.high-contrast}", - "group": "components" - } - }, - "componentD": { - "color": { - "$value": "{color.foreground.semantic-outlier}", - "group": "components" - } - } -} \ No newline at end of file From dc7b2adc9781a4eb1a56fefffc3ffc5a81bbb14c Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 30 Sep 2025 11:04:31 +0100 Subject: [PATCH 018/224] removed `modes-testing` folder from compilation --- .../tokens/scripts/build-parts/getStyleDictionaryConfig.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts index e8bb22a58aa..017a6b232fb 100644 --- a/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts +++ b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts @@ -52,7 +52,8 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod return { ...baseConfig, source: [ - `src/modes-testing/**/*.json`, + `src/global/**/*.json`, + `src/products/shared/**/*.json` ], platforms: { [`web/themed-css-variables--mode-${mode}`]: { From 8ce296b9948641a9605499f7a483b30acf30cf8b Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 30 Sep 2025 11:05:23 +0100 Subject: [PATCH 019/224] added `carbon-extracted` reference in the `source` definitions --- .../tokens/scripts/build-parts/getStyleDictionaryConfig.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts index 017a6b232fb..6ab26fcae94 100644 --- a/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts +++ b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts @@ -52,6 +52,7 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod return { ...baseConfig, source: [ + `src/carbon-extracted/**/*.json`, `src/global/**/*.json`, `src/products/shared/**/*.json` ], @@ -114,6 +115,7 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod return { ...baseConfig, source: [ + `src/carbon-extracted/**/*.json`, `src/global/**/*.json`, `src/products/shared/**/*.json` ], @@ -160,6 +162,7 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod return { ...baseConfig, 'source': [ + `src/carbon-extracted/**/*.json`, `src/global/**/*.json`, `src/products/shared/**/*.json`, // just uncomment the line below to include overrides for 'devdot' tokens @@ -192,6 +195,7 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod return { ...baseConfig, 'source': [ + `src/carbon-extracted/**/*.json`, `src/global/**/*.json`, `src/products/shared/**/*.json`, ], From d1704789f2d4bbb62e0334db99da10eb7458b3c7 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 30 Sep 2025 11:08:41 +0100 Subject: [PATCH 020/224] TEMP - added `$modes` entries for some color and typography tokens, with references to Carbon tokens, for testing --- .../src/global/color/palette-neutrals.json | 8 +-- .../src/global/color/semantic-foreground.json | 9 ++- .../src/products/shared/typography.json | 66 +++++++++++++++++-- 3 files changed, 74 insertions(+), 9 deletions(-) diff --git a/packages/tokens/src/global/color/palette-neutrals.json b/packages/tokens/src/global/color/palette-neutrals.json index e7f4ddb8156..296bf8e878f 100644 --- a/packages/tokens/src/global/color/palette-neutrals.json +++ b/packages/tokens/src/global/color/palette-neutrals.json @@ -47,10 +47,10 @@ "group": "palette", "$modes": { "hds": "#ffffff", - "cds-0": "#ffffff", - "cds-10": "#cccccc", - "cds-90": "#333333", - "cds-100": "#000000" + "cds-0": "{carbon.color.white.0}", + "cds-10": "{carbon.color.white.0}", + "cds-90": "{carbon.color.white.0}", + "cds-100": "{carbon.color.white.0}" } }, "alpha-300": { diff --git a/packages/tokens/src/global/color/semantic-foreground.json b/packages/tokens/src/global/color/semantic-foreground.json index 43de0eb66fe..a116e8f06b0 100644 --- a/packages/tokens/src/global/color/semantic-foreground.json +++ b/packages/tokens/src/global/color/semantic-foreground.json @@ -9,7 +9,14 @@ "primary": { "$type": "color", "$value": "{color.palette.neutral-600}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-0": "{carbon.themes.white.textPrimary}", + "cds-10": "{carbon.themes.g10.textPrimary}", + "cds-90": "{carbon.themes.g90.textPrimary}", + "cds-100": "{carbon.themes.g100.textPrimary}" + } }, "faint": { "$type": "color", diff --git a/packages/tokens/src/products/shared/typography.json b/packages/tokens/src/products/shared/typography.json index f850e45959d..0b07e5e03d0 100644 --- a/packages/tokens/src/products/shared/typography.json +++ b/packages/tokens/src/products/shared/typography.json @@ -9,6 +9,16 @@ "-apple-system", "BlinkMacSystemFont" ], + "$modes": { + "hds": [ + "-apple-system", + "BlinkMacSystemFont" + ], + "cds-0": "{carbon.typography.font-family.sans}", + "cds-10": "{carbon.typography.font-family.sans}", + "cds-90": "{carbon.typography.font-family.sans}", + "cds-100": "{carbon.typography.font-family.sans}" + }, "private": "true" }, "windows": { @@ -44,6 +54,16 @@ "-apple-system", "BlinkMacSystemFont" ], + "$modes": { + "hds": [ + "-apple-system", + "BlinkMacSystemFont" + ], + "cds-0": "{carbon.typography.font-family.sans}", + "cds-10": "{carbon.typography.font-family.sans}", + "cds-90": "{carbon.typography.font-family.sans}", + "cds-100": "{carbon.typography.font-family.sans}" + }, "private": "true" }, "windows": { @@ -72,6 +92,16 @@ "ui-monospace", "Menlo" ], + "$modes": { + "hds": [ + "ui-monospace", + "Menlo" + ], + "cds-0": "{carbon.typography.font-family.mono}", + "cds-10": "{carbon.typography.font-family.mono}", + "cds-90": "{carbon.typography.font-family.mono}", + "cds-100": "{carbon.typography.font-family.mono}" + }, "private": "true" }, "windows": { @@ -113,19 +143,47 @@ "font-weight": { "regular": { "$type": "font-weight", - "$value": 400 + "$value": "400", + "$modes": { + "hds": "400", + "cds-0": "{carbon.typography.font-weight.regular}", + "cds-10": "{carbon.typography.font-weight.regular}", + "cds-90": "{carbon.typography.font-weight.regular}", + "cds-100": "{carbon.typography.font-weight.regular}" + } }, "medium": { "$type": "font-weight", - "$value": 500 + "$value": "500", + "$modes": { + "hds": "500", + "cds-0": "{carbon.typography.font-weight.regular}", + "cds-10": "{carbon.typography.font-weight.regular}", + "cds-90": "{carbon.typography.font-weight.regular}", + "cds-100": "{carbon.typography.font-weight.regular}" + } }, "semibold": { "$type": "font-weight", - "$value": 600 + "$value": "600", + "$modes": { + "hds": "600", + "cds-0": "{carbon.typography.font-weight.semibold}", + "cds-10": "{carbon.typography.font-weight.semibold}", + "cds-90": "{carbon.typography.font-weight.semibold}", + "cds-100": "{carbon.typography.font-weight.semibold}" + } }, "bold": { "$type": "font-weight", - "$value": 700 + "$value": "700", + "$modes": { + "hds": "700", + "cds-0": "{carbon.typography.font-weight.semibold}", + "cds-10": "{carbon.typography.font-weight.semibold}", + "cds-90": "{carbon.typography.font-weight.semibold}", + "cds-100": "{carbon.typography.font-weight.semibold}" + } } }, "display-500": { From 930f57bd7804e4e92b984a4b34f14c606119b7d2 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 30 Sep 2025 11:06:01 +0100 Subject: [PATCH 021/224] changed `outputReferences` to `false` (temporary) to bypass issue with missing references when using Carbon tokens with theming logic --- .../tokens/scripts/build-parts/getStyleDictionaryConfig.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts index 6ab26fcae94..2486c864446 100644 --- a/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts +++ b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts @@ -68,7 +68,7 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod format: 'css/variables', options: { // TODO understand if is better to output references or not for the "common" definitions (probably yes) - outputReferences: true, + outputReferences: false, // outputReferences: (token, { dictionary, usesDtcg }) => { // // `dictionary` contains `allTokens`, `tokens`, `tokenMap`, `unfilteredTokens`, `unfilteredAllTokens` and `unfilteredTokenMap` props // // `usesDtcg` tells you whether the Design Token Community Group spec is used with $ prefixes ($value, $type etc.) @@ -86,7 +86,7 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod format: 'css/variables', options: { // TODO understand if is better to output references or not for the "themed" definitions (almost certainly yes) - outputReferences: true, + outputReferences: false, // outputReferences: (token, { dictionary, usesDtcg }) => { // // `dictionary` contains `allTokens`, `tokens`, `tokenMap`, `unfilteredTokens`, `unfilteredAllTokens` and `unfilteredTokenMap` props // // `usesDtcg` tells you whether the Design Token Community Group spec is used with $ prefixes ($value, $type etc.) @@ -241,6 +241,7 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod ...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`, From d8914052fa4529fd0513a1dde927ac2f9e2a6485 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 30 Sep 2025 10:47:40 +0100 Subject: [PATCH 022/224] added commented code to `build` to use for debugging issue with missing references and filtering when theming is applied --- packages/tokens/scripts/build.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/tokens/scripts/build.ts b/packages/tokens/scripts/build.ts index 52e3fc86a85..71bffb629f6 100644 --- a/packages/tokens/scripts/build.ts +++ b/packages/tokens/scripts/build.ts @@ -72,6 +72,13 @@ StyleDictionary.registerTransform({ isThemeable = true; } + // TODO! understand how we can make this themeable using `usesReferences`/`getReferences` + // if (token.key === "{typography.display-500.font-family}") { + // console.log('usesReferences', usesReferences(token.original.$value)); + // const refs = getReferences(token.original.$value, StyleDictionaryInstance.tokenMap); + // console.log('refs', refs); + // } + // TODO understand if we really need this to split themeable vs non-themeable tokens // if (usesReferences(token.original.$value)) { // const refs = getReferences(token.original.$value, StyleDictionaryInstance.tokenMap); From 39319d67c2ae8e333b8f549246b604179e2da767 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 2 Oct 2025 12:37:19 +0100 Subject: [PATCH 023/224] added two new themed tokens generated files, for Scss mixins and for combined strategies --- .../build-parts/generateExtraThemingFiles.ts | 54 +++++++++++++++---- 1 file changed, 43 insertions(+), 11 deletions(-) diff --git a/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts b/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts index fac09e3d4c7..63a654ad15b 100644 --- a/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts +++ b/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts @@ -9,11 +9,6 @@ import prettier from 'prettier'; import type { Dictionary, PlatformConfig } from 'style-dictionary'; import { fileHeader } from 'style-dictionary/utils'; -const prettierConfig = { - parser: 'css', - tabWidth: 2, -} as const; - export async function generateExtraThemingFiles(_dictionary: Dictionary, config: PlatformConfig ): Promise { const commonSource = await getSourceFromFileWithRootSelector(config, 'hds', 'common-tokens.css'); @@ -25,23 +20,27 @@ export async function generateExtraThemingFiles(_dictionary: Dictionary, config: const header = await fileHeader({}); - const methods = ['prefers-color-scheme', 'css-selectors']; + const methods = ['prefers-color-scheme', 'css-selectors', 'combined-strategies', 'scss-mixins']; for (const method of methods) { let outputContent = `${header}\n\n`; - // CSS files for `prefers-color-scheme` (note: we use `cds-0` for `light` and ` + // CSS file for `prefers-color-scheme` (note: we use `cds-0` for `light` and `cds-100` for `dark` if (method === 'prefers-color-scheme') { + outputContent = `${header}\n\n`; outputContent += `@media (prefers-color-scheme: dark) { ${cds0ThemedSource} }\n\n`; outputContent += `@media (prefers-color-scheme: light) { ${cds100ThemedSource} }\n\n`; // this is the fallback to `light` mode // commented for now: consumers can always import the `themed-tokens/with-root-selector/cds-0/themed-tokens.css` as extra file if they want to // outputContent += '\n\n'; // outputContent += `${cds0ThemedSource}\n\n`; + // + // this is the common part + outputContent += `${commonSource}\n\n`; } - // CSS files for `.class/[data]` selectors + // CSS file for `.class/[data]` selectors if (method === 'css-selectors') { outputContent = `${header}\n\n`; outputContent += `${hdsThemedSource.replace(/^:root/, '.hds-theme-default, [data-hds-theme="default"]')}\n\n`; @@ -49,14 +48,47 @@ export async function generateExtraThemingFiles(_dictionary: Dictionary, config: outputContent += `${cds10ThemedSource.replace(/^:root/, '.hds-theme-cds-10, [data-hds-theme="cds-10"]')}\n\n`; outputContent += `${cds90ThemedSource.replace(/^:root/, '.hds-theme-cds-90, [data-hds-theme="cds-90"]')}\n\n`; outputContent += `${cds100ThemedSource.replace(/^:root/, '.hds-theme-cds-100, [data-hds-theme="cds-100"]')}\n\n`; + // + // this is the fallback to the default `hds` mode + outputContent += `${hdsThemedSource}\n\n`; + // + // this is the common part + outputContent += `${commonSource}\n\n`; + } + + // CSS file for combined `prefers-color-scheme` and CSS selectors in the same file + if (method === 'combined-strategies') { + outputContent = `${header}\n\n`; + // we will revisit the `[class*=hds-theme-]` selector if we find that is too generic and there are cases where this is picking up other classes + outputContent += `@media (prefers-color-scheme: dark) { ${cds0ThemedSource.replace(/^:root/, ':root:not([class*=hds-theme-]):not([data-hds-theme])')} }\n\n`; + outputContent += `@media (prefers-color-scheme: light) { ${cds100ThemedSource.replace(/^:root/, ':root:not([class*=hds-theme-]):not([data-hds-theme])')} }\n\n`; + outputContent += `${hdsThemedSource.replace(/^:root/, '.hds-theme-default, [data-hds-theme="default"]')}\n\n`; + outputContent += `${cds0ThemedSource.replace(/^:root/, '.hds-theme-cds-0, [data-hds-theme="cds-0"]')}\n\n`; + outputContent += `${cds10ThemedSource.replace(/^:root/, '.hds-theme-cds-10, [data-hds-theme="cds-10"]')}\n\n`; + outputContent += `${cds90ThemedSource.replace(/^:root/, '.hds-theme-cds-90, [data-hds-theme="cds-90"]')}\n\n`; + outputContent += `${cds100ThemedSource.replace(/^:root/, '.hds-theme-cds-100, [data-hds-theme="cds-100"]')}\n\n`; + // // this is the fallback to the default `hds` mode - outputContent += '\n\n'; outputContent += `${hdsThemedSource}\n\n`; + // + // this is the common part + outputContent += `${commonSource}\n\n`; } - outputContent += `${commonSource}\n\n`; + // SCSS file for mixins + if (method === 'scss-mixins') { + outputContent = `${header}\n\n`; + outputContent += `@mixin hds-theme-default() { ${hdsThemedSource} }\n\n`; + outputContent += `@mixin hds-theme-cds0() { ${cds0ThemedSource} }\n\n`; + outputContent += `@mixin hds-theme-cds10() { ${cds10ThemedSource} }\n\n`; + outputContent += `@mixin hds-theme-cds90() { ${cds90ThemedSource} }\n\n`; + outputContent += `@mixin hds-theme-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, prettierConfig); + const outputTokensCss = await prettier.format(outputContent, { parser: 'css', tabWidth: 2, }); const outputFolder = `${config.buildPath}themed-tokens/with-${method}/`; await fs.ensureDir(outputFolder); From 4ead7dcff1c6e8160a8c4ee32e3d2f5b4b789156 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 7 Oct 2025 13:07:45 +0100 Subject: [PATCH 024/224] fixed issue with `cds` naming missing the `g` --- .../build-parts/generateExtraThemingFiles.ts | 28 +++++----- .../build-parts/getStyleDictionaryConfig.ts | 2 +- .../src/global/color/palette-neutrals.json | 8 +-- .../src/global/color/semantic-foreground.json | 8 +-- .../src/products/shared/typography.json | 56 +++++++++---------- 5 files changed, 51 insertions(+), 51 deletions(-) diff --git a/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts b/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts index 63a654ad15b..1d371a42acc 100644 --- a/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts +++ b/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts @@ -13,10 +13,10 @@ export async function generateExtraThemingFiles(_dictionary: Dictionary, config: const commonSource = await getSourceFromFileWithRootSelector(config, 'hds', 'common-tokens.css'); const hdsThemedSource = await getSourceFromFileWithRootSelector(config, 'hds', 'themed-tokens.css'); - const cds0ThemedSource = await getSourceFromFileWithRootSelector(config, 'cds-0', 'themed-tokens.css'); - const cds10ThemedSource = await getSourceFromFileWithRootSelector(config, 'cds-10', 'themed-tokens.css'); - const cds90ThemedSource = await getSourceFromFileWithRootSelector(config, 'cds-90', 'themed-tokens.css'); - const cds100ThemedSource = await getSourceFromFileWithRootSelector(config, 'cds-100', '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({}); @@ -26,13 +26,13 @@ export async function generateExtraThemingFiles(_dictionary: Dictionary, config: let outputContent = `${header}\n\n`; - // CSS file for `prefers-color-scheme` (note: we use `cds-0` for `light` and `cds-100` for `dark` + // CSS file for `prefers-color-scheme` (note: we use `cds-g0` for `light` and `cds-g100` for `dark` if (method === 'prefers-color-scheme') { outputContent = `${header}\n\n`; outputContent += `@media (prefers-color-scheme: dark) { ${cds0ThemedSource} }\n\n`; outputContent += `@media (prefers-color-scheme: light) { ${cds100ThemedSource} }\n\n`; // this is the fallback to `light` mode - // commented for now: consumers can always import the `themed-tokens/with-root-selector/cds-0/themed-tokens.css` as extra file if they want to + // commented for now: consumers can always import the `themed-tokens/with-root-selector/cds-g0/themed-tokens.css` as extra file if they want to // outputContent += '\n\n'; // outputContent += `${cds0ThemedSource}\n\n`; // @@ -44,10 +44,10 @@ export async function generateExtraThemingFiles(_dictionary: Dictionary, config: if (method === 'css-selectors') { outputContent = `${header}\n\n`; outputContent += `${hdsThemedSource.replace(/^:root/, '.hds-theme-default, [data-hds-theme="default"]')}\n\n`; - outputContent += `${cds0ThemedSource.replace(/^:root/, '.hds-theme-cds-0, [data-hds-theme="cds-0"]')}\n\n`; - outputContent += `${cds10ThemedSource.replace(/^:root/, '.hds-theme-cds-10, [data-hds-theme="cds-10"]')}\n\n`; - outputContent += `${cds90ThemedSource.replace(/^:root/, '.hds-theme-cds-90, [data-hds-theme="cds-90"]')}\n\n`; - outputContent += `${cds100ThemedSource.replace(/^:root/, '.hds-theme-cds-100, [data-hds-theme="cds-100"]')}\n\n`; + outputContent += `${cds0ThemedSource.replace(/^:root/, '.hds-theme-cds-g0, [data-hds-theme="cds-g0"]')}\n\n`; + outputContent += `${cds10ThemedSource.replace(/^:root/, '.hds-theme-cds-g10, [data-hds-theme="cds-g10"]')}\n\n`; + outputContent += `${cds90ThemedSource.replace(/^:root/, '.hds-theme-cds-g90, [data-hds-theme="cds-g90"]')}\n\n`; + outputContent += `${cds100ThemedSource.replace(/^:root/, '.hds-theme-cds-g100, [data-hds-theme="cds-g100"]')}\n\n`; // // this is the fallback to the default `hds` mode outputContent += `${hdsThemedSource}\n\n`; @@ -63,10 +63,10 @@ export async function generateExtraThemingFiles(_dictionary: Dictionary, config: outputContent += `@media (prefers-color-scheme: dark) { ${cds0ThemedSource.replace(/^:root/, ':root:not([class*=hds-theme-]):not([data-hds-theme])')} }\n\n`; outputContent += `@media (prefers-color-scheme: light) { ${cds100ThemedSource.replace(/^:root/, ':root:not([class*=hds-theme-]):not([data-hds-theme])')} }\n\n`; outputContent += `${hdsThemedSource.replace(/^:root/, '.hds-theme-default, [data-hds-theme="default"]')}\n\n`; - outputContent += `${cds0ThemedSource.replace(/^:root/, '.hds-theme-cds-0, [data-hds-theme="cds-0"]')}\n\n`; - outputContent += `${cds10ThemedSource.replace(/^:root/, '.hds-theme-cds-10, [data-hds-theme="cds-10"]')}\n\n`; - outputContent += `${cds90ThemedSource.replace(/^:root/, '.hds-theme-cds-90, [data-hds-theme="cds-90"]')}\n\n`; - outputContent += `${cds100ThemedSource.replace(/^:root/, '.hds-theme-cds-100, [data-hds-theme="cds-100"]')}\n\n`; + outputContent += `${cds0ThemedSource.replace(/^:root/, '.hds-theme-cds-g0, [data-hds-theme="cds-g0"]')}\n\n`; + outputContent += `${cds10ThemedSource.replace(/^:root/, '.hds-theme-cds-g10, [data-hds-theme="cds-g10"]')}\n\n`; + outputContent += `${cds90ThemedSource.replace(/^:root/, '.hds-theme-cds-g90, [data-hds-theme="cds-g90"]')}\n\n`; + outputContent += `${cds100ThemedSource.replace(/^:root/, '.hds-theme-cds-g100, [data-hds-theme="cds-g100"]')}\n\n`; // // this is the fallback to the default `hds` mode outputContent += `${hdsThemedSource}\n\n`; diff --git a/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts index 2486c864446..755f42d624b 100644 --- a/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts +++ b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts @@ -6,7 +6,7 @@ import type { Config, DesignToken } from 'style-dictionary/types'; export const targets = ['products', 'devdot', 'marketing', 'cloud-email']; -export const modes = ['hds', 'cds-0', 'cds-10', 'cds-90', 'cds-100']; +export const modes = ['hds', 'cds-g0', 'cds-g10', 'cds-g90', 'cds-g100']; export type Target = typeof targets[number]; export type Mode = typeof modes[number]; diff --git a/packages/tokens/src/global/color/palette-neutrals.json b/packages/tokens/src/global/color/palette-neutrals.json index 296bf8e878f..62f22bccd19 100644 --- a/packages/tokens/src/global/color/palette-neutrals.json +++ b/packages/tokens/src/global/color/palette-neutrals.json @@ -47,10 +47,10 @@ "group": "palette", "$modes": { "hds": "#ffffff", - "cds-0": "{carbon.color.white.0}", - "cds-10": "{carbon.color.white.0}", - "cds-90": "{carbon.color.white.0}", - "cds-100": "{carbon.color.white.0}" + "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": { diff --git a/packages/tokens/src/global/color/semantic-foreground.json b/packages/tokens/src/global/color/semantic-foreground.json index a116e8f06b0..5b14889b034 100644 --- a/packages/tokens/src/global/color/semantic-foreground.json +++ b/packages/tokens/src/global/color/semantic-foreground.json @@ -12,10 +12,10 @@ "group": "semantic", "$modes": { "hds": "#ffffff", - "cds-0": "{carbon.themes.white.textPrimary}", - "cds-10": "{carbon.themes.g10.textPrimary}", - "cds-90": "{carbon.themes.g90.textPrimary}", - "cds-100": "{carbon.themes.g100.textPrimary}" + "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": { diff --git a/packages/tokens/src/products/shared/typography.json b/packages/tokens/src/products/shared/typography.json index 0b07e5e03d0..7a4fd516caa 100644 --- a/packages/tokens/src/products/shared/typography.json +++ b/packages/tokens/src/products/shared/typography.json @@ -14,10 +14,10 @@ "-apple-system", "BlinkMacSystemFont" ], - "cds-0": "{carbon.typography.font-family.sans}", - "cds-10": "{carbon.typography.font-family.sans}", - "cds-90": "{carbon.typography.font-family.sans}", - "cds-100": "{carbon.typography.font-family.sans}" + "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}" }, "private": "true" }, @@ -59,10 +59,10 @@ "-apple-system", "BlinkMacSystemFont" ], - "cds-0": "{carbon.typography.font-family.sans}", - "cds-10": "{carbon.typography.font-family.sans}", - "cds-90": "{carbon.typography.font-family.sans}", - "cds-100": "{carbon.typography.font-family.sans}" + "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}" }, "private": "true" }, @@ -97,10 +97,10 @@ "ui-monospace", "Menlo" ], - "cds-0": "{carbon.typography.font-family.mono}", - "cds-10": "{carbon.typography.font-family.mono}", - "cds-90": "{carbon.typography.font-family.mono}", - "cds-100": "{carbon.typography.font-family.mono}" + "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}" }, "private": "true" }, @@ -146,10 +146,10 @@ "$value": "400", "$modes": { "hds": "400", - "cds-0": "{carbon.typography.font-weight.regular}", - "cds-10": "{carbon.typography.font-weight.regular}", - "cds-90": "{carbon.typography.font-weight.regular}", - "cds-100": "{carbon.typography.font-weight.regular}" + "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": { @@ -157,10 +157,10 @@ "$value": "500", "$modes": { "hds": "500", - "cds-0": "{carbon.typography.font-weight.regular}", - "cds-10": "{carbon.typography.font-weight.regular}", - "cds-90": "{carbon.typography.font-weight.regular}", - "cds-100": "{carbon.typography.font-weight.regular}" + "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": { @@ -168,10 +168,10 @@ "$value": "600", "$modes": { "hds": "600", - "cds-0": "{carbon.typography.font-weight.semibold}", - "cds-10": "{carbon.typography.font-weight.semibold}", - "cds-90": "{carbon.typography.font-weight.semibold}", - "cds-100": "{carbon.typography.font-weight.semibold}" + "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": { @@ -179,10 +179,10 @@ "$value": "700", "$modes": { "hds": "700", - "cds-0": "{carbon.typography.font-weight.semibold}", - "cds-10": "{carbon.typography.font-weight.semibold}", - "cds-90": "{carbon.typography.font-weight.semibold}", - "cds-100": "{carbon.typography.font-weight.semibold}" + "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}" } } }, From b7c40075cac8435f899c865726da323d55ae6ff7 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 7 Oct 2025 13:15:10 +0100 Subject: [PATCH 025/224] =?UTF-8?q?fixed=20some=20issues=20with=20how=20th?= =?UTF-8?q?e=20=E2=80=9Cextra=E2=80=9D=20themed=20CSS=20files=20were=20gen?= =?UTF-8?q?erated?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../build-parts/generateExtraThemingFiles.ts | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts b/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts index 1d371a42acc..5163ad47657 100644 --- a/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts +++ b/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts @@ -29,12 +29,10 @@ export async function generateExtraThemingFiles(_dictionary: Dictionary, config: // CSS file for `prefers-color-scheme` (note: we use `cds-g0` for `light` and `cds-g100` for `dark` if (method === 'prefers-color-scheme') { outputContent = `${header}\n\n`; - outputContent += `@media (prefers-color-scheme: dark) { ${cds0ThemedSource} }\n\n`; - outputContent += `@media (prefers-color-scheme: light) { ${cds100ThemedSource} }\n\n`; - // this is the fallback to `light` mode - // commented for now: consumers can always import the `themed-tokens/with-root-selector/cds-g0/themed-tokens.css` as extra file if they want to - // outputContent += '\n\n'; - // outputContent += `${cds0ThemedSource}\n\n`; + // + // these are the themed `carbonized` tokens + outputContent += `@media (prefers-color-scheme: light) { ${cds0ThemedSource} }\n\n`; + outputContent += `@media (prefers-color-scheme: dark) { ${cds100ThemedSource} }\n\n`; // // this is the common part outputContent += `${commonSource}\n\n`; @@ -43,15 +41,16 @@ export async function generateExtraThemingFiles(_dictionary: Dictionary, config: // CSS file for `.class/[data]` selectors if (method === 'css-selectors') { outputContent = `${header}\n\n`; - outputContent += `${hdsThemedSource.replace(/^:root/, '.hds-theme-default, [data-hds-theme="default"]')}\n\n`; + // + // this is the fallback to the default `hds` mode + outputContent += `${hdsThemedSource}\n\n`; + // + // these are the themed `carbonized` tokens outputContent += `${cds0ThemedSource.replace(/^:root/, '.hds-theme-cds-g0, [data-hds-theme="cds-g0"]')}\n\n`; outputContent += `${cds10ThemedSource.replace(/^:root/, '.hds-theme-cds-g10, [data-hds-theme="cds-g10"]')}\n\n`; outputContent += `${cds90ThemedSource.replace(/^:root/, '.hds-theme-cds-g90, [data-hds-theme="cds-g90"]')}\n\n`; outputContent += `${cds100ThemedSource.replace(/^:root/, '.hds-theme-cds-g100, [data-hds-theme="cds-g100"]')}\n\n`; // - // this is the fallback to the default `hds` mode - outputContent += `${hdsThemedSource}\n\n`; - // // this is the common part outputContent += `${commonSource}\n\n`; } @@ -59,18 +58,19 @@ export async function generateExtraThemingFiles(_dictionary: Dictionary, config: // CSS file for combined `prefers-color-scheme` and CSS selectors in the same file if (method === 'combined-strategies') { outputContent = `${header}\n\n`; - // we will revisit the `[class*=hds-theme-]` selector if we find that is too generic and there are cases where this is picking up other classes - outputContent += `@media (prefers-color-scheme: dark) { ${cds0ThemedSource.replace(/^:root/, ':root:not([class*=hds-theme-]):not([data-hds-theme])')} }\n\n`; - outputContent += `@media (prefers-color-scheme: light) { ${cds100ThemedSource.replace(/^:root/, ':root:not([class*=hds-theme-]):not([data-hds-theme])')} }\n\n`; - outputContent += `${hdsThemedSource.replace(/^:root/, '.hds-theme-default, [data-hds-theme="default"]')}\n\n`; + // + // this is the fallback to the default `hds` mode + outputContent += `${hdsThemedSource}\n\n`; + // + // these are the themed `carbonized` tokens + // note: we will revisit the `[class*=hds-theme-]` selector if we find that is too generic and there are cases where this is picking up other classes + outputContent += `@media (prefers-color-scheme: light) { ${cds0ThemedSource.replace(/^:root/, ':root:not([class*=hds-theme-]):not([data-hds-theme])')} }\n\n`; + outputContent += `@media (prefers-color-scheme: dark) { ${cds100ThemedSource.replace(/^:root/, ':root:not([class*=hds-theme-]):not([data-hds-theme])')} }\n\n`; outputContent += `${cds0ThemedSource.replace(/^:root/, '.hds-theme-cds-g0, [data-hds-theme="cds-g0"]')}\n\n`; outputContent += `${cds10ThemedSource.replace(/^:root/, '.hds-theme-cds-g10, [data-hds-theme="cds-g10"]')}\n\n`; outputContent += `${cds90ThemedSource.replace(/^:root/, '.hds-theme-cds-g90, [data-hds-theme="cds-g90"]')}\n\n`; outputContent += `${cds100ThemedSource.replace(/^:root/, '.hds-theme-cds-g100, [data-hds-theme="cds-g100"]')}\n\n`; // - // this is the fallback to the default `hds` mode - outputContent += `${hdsThemedSource}\n\n`; - // // this is the common part outputContent += `${commonSource}\n\n`; } From 81268fe0b56729b12d475c9359e08cdb35584c3a Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 30 Sep 2025 11:25:45 +0100 Subject: [PATCH 026/224] TEMP - Re-generated tokens --- .../tokens/dist/docs/products/tokens.json | 102 +++- packages/tokens/dist/marketing/tokens.json | 102 +++- .../with-combined-strategies/tokens.css | 512 +++++++++++++++++ .../with-css-selectors/tokens.css | 518 ++++++++++++++++-- .../with-prefers-color-scheme/tokens.css | 466 +++++++++++++++- .../cds-0/common-tokens.css | 17 - .../cds-0/themed-tokens.css | 9 - .../cds-10/common-tokens.css | 17 - .../cds-10/themed-tokens.css | 9 - .../cds-100/common-tokens.css | 17 - .../cds-100/themed-tokens.css | 9 - .../cds-90/common-tokens.css | 17 - .../cds-90/themed-tokens.css | 9 - .../cds-g0/common-tokens.css | 385 +++++++++++++ .../cds-g0/themed-tokens.css | 12 + .../cds-g10/common-tokens.css | 385 +++++++++++++ .../cds-g10/themed-tokens.css | 12 + .../cds-g100/common-tokens.css | 385 +++++++++++++ .../cds-g100/themed-tokens.css | 12 + .../cds-g90/common-tokens.css | 385 +++++++++++++ .../cds-g90/themed-tokens.css | 12 + .../with-root-selector/hds/common-tokens.css | 386 ++++++++++++- .../with-root-selector/hds/themed-tokens.css | 7 +- .../themed-tokens/with-scss-mixins/tokens.css | 506 +++++++++++++++++ 24 files changed, 4077 insertions(+), 214 deletions(-) create mode 100644 packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css delete mode 100644 packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-0/common-tokens.css delete mode 100644 packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-0/themed-tokens.css delete mode 100644 packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-10/common-tokens.css delete mode 100644 packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-10/themed-tokens.css delete mode 100644 packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-100/common-tokens.css delete mode 100644 packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-100/themed-tokens.css delete mode 100644 packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-90/common-tokens.css delete mode 100644 packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-90/themed-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-scss-mixins/tokens.css diff --git a/packages/tokens/dist/docs/products/tokens.json b/packages/tokens/dist/docs/products/tokens.json index 1d369a4497e..3295ee1ec3b 100644 --- a/packages/tokens/dist/docs/products/tokens.json +++ b/packages/tokens/dist/docs/products/tokens.json @@ -888,10 +888,10 @@ "group": "palette", "$modes": { "hds": "#ffffff", - "cds-0": "#ffffff", - "cds-10": "#cccccc", - "cds-90": "#333333", - "cds-100": "#000000" + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" }, "original": { "$type": "color", @@ -899,10 +899,10 @@ "group": "palette", "$modes": { "hds": "#ffffff", - "cds-0": "#ffffff", - "cds-10": "#cccccc", - "cds-90": "#333333", - "cds-100": "#000000" + "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}" }, @@ -1271,10 +1271,24 @@ "$type": "color", "$value": "#3b3d45", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-600}", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "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", @@ -7467,10 +7481,24 @@ { "key": "{typography.font-weight.regular}", "$type": "font-weight", - "$value": 400, + "$value": "400", + "$modes": { + "hds": "400", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, "original": { "$type": "font-weight", - "$value": 400, + "$value": "400", + "$modes": { + "hds": "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", @@ -7486,10 +7514,24 @@ { "key": "{typography.font-weight.medium}", "$type": "font-weight", - "$value": 500, + "$value": "500", + "$modes": { + "hds": "500", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, "original": { "$type": "font-weight", - "$value": 500, + "$value": "500", + "$modes": { + "hds": "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", @@ -7505,10 +7547,24 @@ { "key": "{typography.font-weight.semibold}", "$type": "font-weight", - "$value": 600, + "$value": "600", + "$modes": { + "hds": "600", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, "original": { "$type": "font-weight", - "$value": 600, + "$value": "600", + "$modes": { + "hds": "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", @@ -7524,10 +7580,24 @@ { "key": "{typography.font-weight.bold}", "$type": "font-weight", - "$value": 700, + "$value": "700", + "$modes": { + "hds": "700", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, "original": { "$type": "font-weight", - "$value": 700, + "$value": "700", + "$modes": { + "hds": "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", diff --git a/packages/tokens/dist/marketing/tokens.json b/packages/tokens/dist/marketing/tokens.json index a68951d122c..da71fd43c38 100644 --- a/packages/tokens/dist/marketing/tokens.json +++ b/packages/tokens/dist/marketing/tokens.json @@ -978,10 +978,10 @@ "group": "palette", "$modes": { "hds": "#ffffff", - "cds-0": "#ffffff", - "cds-10": "#cccccc", - "cds-90": "#333333", - "cds-100": "#000000" + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" }, "filePath": "src/global/color/palette-neutrals.json", "isSource": true, @@ -991,10 +991,10 @@ "group": "palette", "$modes": { "hds": "#ffffff", - "cds-0": "#ffffff", - "cds-10": "#cccccc", - "cds-90": "#333333", - "cds-100": "#000000" + "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}" }, @@ -1405,12 +1405,26 @@ "$type": "color", "$value": "#3b3d45", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "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": { + "hds": "#ffffff", + "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", @@ -8497,12 +8511,26 @@ "regular": { "key": "{typography.font-weight.regular}", "$type": "font-weight", - "$value": 400, + "$value": "400", + "$modes": { + "hds": "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": { + "hds": "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", @@ -8518,12 +8546,26 @@ "medium": { "key": "{typography.font-weight.medium}", "$type": "font-weight", - "$value": 500, + "$value": "500", + "$modes": { + "hds": "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": { + "hds": "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", @@ -8539,12 +8581,26 @@ "semibold": { "key": "{typography.font-weight.semibold}", "$type": "font-weight", - "$value": 600, + "$value": "600", + "$modes": { + "hds": "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": { + "hds": "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", @@ -8560,12 +8616,26 @@ "bold": { "key": "{typography.font-weight.bold}", "$type": "font-weight", - "$value": 700, + "$value": "700", + "$modes": { + "hds": "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": { + "hds": "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", diff --git a/packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css new file mode 100644 index 00000000000..876c834a815 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css @@ -0,0 +1,512 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-primary: #ffffff; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 500; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 700; +} + +@media (prefers-color-scheme: light) { + :root:not([class*="hds-theme-"]):not([data-hds-theme]) { + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-primary: #161616; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 600; + } +} + +@media (prefers-color-scheme: dark) { + :root:not([class*="hds-theme-"]):not([data-hds-theme]) { + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-primary: #f4f4f4; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 600; + } +} + +.hds-theme-cds-g0, +[data-hds-theme="cds-g0"] { + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-primary: #161616; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 600; +} + +.hds-theme-cds-g10, +[data-hds-theme="cds-g10"] { + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-primary: #161616; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 600; +} + +.hds-theme-cds-g90, +[data-hds-theme="cds-g90"] { + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-primary: #f4f4f4; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 600; +} + +.hds-theme-cds-g100, +[data-hds-theme="cds-g100"] { + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-primary: #f4f4f4; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 600; +} + +:root { + --token-border-radius-x-small: 3px; + --token-border-radius-small: 5px; + --token-border-radius-medium: 6px; + --token-border-radius-large: 8px; + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-green-500: #054220; + --token-color-palette-green-400: #006619; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-400: #940004; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-50: #fff5f5; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-300: #c2c5cb; + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-100: #656a761a; + --token-color-border-primary: #656a7633; + --token-color-border-faint: #656a761a; + --token-color-border-strong: #3b3d4566; + --token-color-border-action: #cce3fe; + --token-color-border-highlight: #ead2fe; + --token-color-border-success: #cceeda; + --token-color-border-warning: #fbeabf; + --token-color-border-critical: #fbd4d4; + --token-color-focus-action-internal: #0c56e9; + --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-critical-internal: #c00005; + --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-foreground-strong: #0c0c0e; + --token-color-foreground-faint: #656a76; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: #8c909c; + --token-color-foreground-action: #1060ff; + --token-color-foreground-action-hover: #0c56e9; + --token-color-foreground-action-active: #0046d1; + --token-color-foreground-highlight: #a737ff; + --token-color-foreground-highlight-on-surface: #911ced; + --token-color-foreground-highlight-high-contrast: #42215b; + --token-color-foreground-success: #008a22; + --token-color-foreground-success-on-surface: #00781e; + --token-color-foreground-success-high-contrast: #054220; + --token-color-foreground-warning: #bb5a00; + --token-color-foreground-warning-on-surface: #9e4b00; + --token-color-foreground-warning-high-contrast: #542800; + --token-color-foreground-critical: #e52228; + --token-color-foreground-critical-on-surface: #c00005; + --token-color-foreground-critical-high-contrast: #51130a; + --token-color-page-primary: #ffffff; + --token-color-page-faint: #fafafa; + --token-color-surface-primary: #ffffff; + --token-color-surface-faint: #fafafa; + --token-color-surface-strong: #f1f2f3; + --token-color-surface-interactive: #ffffff; + --token-color-surface-interactive-hover: #f1f2f3; + --token-color-surface-interactive-active: #dedfe3; + --token-color-surface-interactive-disabled: #fafafa; + --token-color-surface-action: #f2f8ff; + --token-color-surface-highlight: #f9f2ff; + --token-color-surface-success: #f2fbf6; + --token-color-surface-warning: #fff9e8; + --token-color-surface-critical: #fff5f5; + --token-color-hashicorp-brand: #000000; + --token-color-boundary-brand: #f24c53; + --token-color-boundary-foreground: #cf2d32; + --token-color-boundary-surface: #ffecec; + --token-color-boundary-border: #fbd7d8; + --token-color-boundary-gradient-primary-start: #f97076; + --token-color-boundary-gradient-primary-stop: #db363b; + --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-consul-brand: #e03875; + --token-color-consul-foreground: #d01c5b; + --token-color-consul-surface: #ffe9f1; + --token-color-consul-border: #ffcede; + --token-color-consul-gradient-primary-start: #ff99be; + --token-color-consul-gradient-primary-stop: #da306e; + --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-hcp-brand: #000000; + --token-color-nomad-brand: #06d092; + --token-color-nomad-foreground: #008661; + --token-color-nomad-surface: #d3fdeb; + --token-color-nomad-border: #bff3dd; + --token-color-nomad-gradient-primary-start: #bff3dd; + --token-color-nomad-gradient-primary-stop: #60dea9; + --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-packer-brand: #02a8ef; + --token-color-packer-foreground: #007eb4; + --token-color-packer-surface: #d4f2ff; + --token-color-packer-border: #b4e4ff; + --token-color-packer-gradient-primary-start: #b4e4ff; + --token-color-packer-gradient-primary-stop: #63d0ff; + --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-terraform-brand: #7b42bc; + --token-color-terraform-brand-on-dark: #a067da; /** this is an alternative brand color meant to be used on dark backgrounds */ + --token-color-terraform-foreground: #773cb4; + --token-color-terraform-surface: #f4ecff; + --token-color-terraform-border: #ebdbfc; + --token-color-terraform-gradient-primary-start: #bb8deb; + --token-color-terraform-gradient-primary-stop: #844fba; + --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-vagrant-brand: #1868f2; + --token-color-vagrant-foreground: #1c61d8; + --token-color-vagrant-surface: #d6ebff; + --token-color-vagrant-border: #c7dbfc; + --token-color-vagrant-gradient-primary-start: #639cff; + --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-foreground: #9a6f00; + --token-color-vault-radar-surface: #fff9cf; + --token-color-vault-radar-border: #feec7b; + --token-color-vault-radar-gradient-primary-start: #feec7b; + --token-color-vault-radar-gradient-primary-stop: #ffe543; + --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-secrets-brand: #ffcf25; + --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-color-vault-secrets-foreground: #9a6f00; + --token-color-vault-secrets-surface: #fff9cf; + --token-color-vault-secrets-border: #feec7b; + --token-color-vault-secrets-gradient-primary-start: #feec7b; + --token-color-vault-secrets-gradient-primary-stop: #ffe543; + --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-brand: #ffcf25; + --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-foreground: #9a6f00; + --token-color-vault-surface: #fff9cf; + --token-color-vault-border: #feec7b; + --token-color-vault-gradient-primary-start: #feec7b; + --token-color-vault-gradient-primary-stop: #ffe543; + --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-waypoint-brand: #14c6cb; + --token-color-waypoint-foreground: #008196; + --token-color-waypoint-surface: #e0fcff; + --token-color-waypoint-border: #cbf1f3; + --token-color-waypoint-gradient-primary-start: #cbf1f3; + --token-color-waypoint-gradient-primary-stop: #62d4dc; + --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-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-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-overlay-box-shadow: + 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; + --token-surface-inset-box-shadow: + inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a; + --token-surface-base-box-shadow: 0 0 0 1px #656a7633; + --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-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-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-header-height: 60px; + --token-app-header-home-link-size: 36px; + --token-app-header-logo-size: 28px; + --token-app-side-nav-wrapper-border-width: 1px; + --token-app-side-nav-wrapper-border-color: var( + --token-color-palette-neutral-200 + ); + --token-app-side-nav-wrapper-padding-horizontal: 16px; + --token-app-side-nav-wrapper-padding-vertical: 16px; + --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-app-side-nav-toggle-button-border-radius: 5px; + --token-app-side-nav-header-home-link-padding: 4px; + --token-app-side-nav-header-home-link-logo-size: 48px; + --token-app-side-nav-header-home-link-logo-size-minimized: 32px; + --token-app-side-nav-header-actions-spacing: 8px; + --token-app-side-nav-body-list-margin-vertical: 24px; + --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-item-content-spacing-horizontal: 8px; + --token-app-side-nav-body-list-item-border-radius: 5px; + --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-foreground-faint: var( + --token-color-foreground-faint + ); + --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-form-label-color: #0c0c0e; + --token-form-legend-color: #0c0c0e; + --token-form-helper-text-color: #656a76; + --token-form-indicator-optional-color: #656a76; + --token-form-error-color: #c00005; + --token-form-error-icon-size: 14px; + --token-form-checkbox-size: 16px; + --token-form-checkbox-border-radius: 3px; + --token-form-checkbox-border-width: 1px; + --token-form-checkbox-background-image-size: 12px; + --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-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-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-control-base-foreground-value-color: #0c0c0e; + --token-form-control-base-foreground-placeholder-color: #656a76; + --token-form-control-base-surface-color-default: #ffffff; + --token-form-control-base-surface-color-hover: #f1f2f3; + --token-form-control-base-border-color-default: #8c909c; + --token-form-control-base-border-color-hover: #656a76; + --token-form-control-checked-foreground-color: #ffffff; + --token-form-control-checked-surface-color-default: #1060ff; + --token-form-control-checked-surface-color-hover: #0c56e9; + --token-form-control-checked-border-color-default: #0c56e9; + --token-form-control-checked-border-color-hover: #0046d1; + --token-form-control-invalid-border-color-default: #c00005; + --token-form-control-invalid-border-color-hover: #940004; + --token-form-control-readonly-foreground-color: #ffffff; + --token-form-control-readonly-surface-color: #f1f2f3; + --token-form-control-readonly-border-color: #656a761a; + --token-form-control-disabled-foreground-color: #8c909c; + --token-form-control-disabled-surface-color: #fafafa; + --token-form-control-disabled-border-color: #656a7633; + --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-border-radius: 5px; + --token-form-control-border-width: 1px; + --token-form-radio-size: 16px; + --token-form-radio-border-width: 1px; + --token-form-radio-background-image-size: 12px; + --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-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-radiocard-group-gap: 16px; + --token-form-radiocard-border-width: 1px; + --token-form-radiocard-border-radius: 6px; + --token-form-radiocard-content-padding: 24px; + --token-form-radiocard-control-padding: 8px; + --token-form-radiocard-transition-duration: 0.2s; + --token-form-select-background-image-size: 16px; + --token-form-select-background-image-position-right-x: 7px; + --token-form-select-background-image-position-top-y: 9px; + --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-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-text-input-background-image-size: 16px; + --token-form-text-input-background-image-position-x: 7px; + --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-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-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-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-toggle-width: 32px; + --token-form-toggle-height: 16px; + --token-form-toggle-base-surface-color-default: #f1f2f3; /** 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-background-image-size: 12px; + --token-form-toggle-background-image-position-x: 2px; + --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-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-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-pagination-nav-control-height: 36px; + --token-pagination-nav-control-padding-horizontal: 12px; + --token-pagination-nav-control-focus-inset: 4px; + --token-pagination-nav-control-icon-spacing: 6px; + --token-pagination-nav-indicator-height: 2px; + --token-pagination-nav-indicator-spacing: 6px; + --token-pagination-child-spacing-vertical: 8px; + --token-pagination-child-spacing-horizontal: 20px; + --token-side-nav-wrapper-border-width: 1px; + --token-side-nav-wrapper-border-color: #656a76; + --token-side-nav-wrapper-padding-horizontal: 16px; + --token-side-nav-wrapper-padding-vertical: 16px; + --token-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-side-nav-toggle-button-border-radius: 5px; + --token-side-nav-header-home-link-padding: 4px; + --token-side-nav-header-home-link-logo-size: 48px; + --token-side-nav-header-home-link-logo-size-minimized: 32px; + --token-side-nav-header-actions-spacing: 8px; + --token-side-nav-body-list-margin-vertical: 24px; + --token-side-nav-body-list-item-height: 36px; + --token-side-nav-body-list-item-padding-horizontal: 8px; + --token-side-nav-body-list-item-padding-vertical: 4px; + --token-side-nav-body-list-item-spacing-vertical: 2px; + --token-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-side-nav-body-list-item-border-radius: 5px; + --token-side-nav-color-foreground-primary: #dedfe3; + --token-side-nav-color-foreground-strong: #ffffff; + --token-side-nav-color-foreground-faint: #8c909c; + --token-side-nav-color-surface-primary: #0c0c0e; + --token-side-nav-color-surface-interactive-hover: #3b3d45; + --token-side-nav-color-surface-interactive-active: #656a76; + --token-tabs-tab-height-medium: 36px; + --token-tabs-tab-height-large: 48px; + --token-tabs-tab-padding-horizontal-medium: 12px; + --token-tabs-tab-padding-horizontal-large: 20px; + --token-tabs-tab-padding-vertical: 0px; + --token-tabs-tab-border-radius: 5px; + --token-tabs-tab-focus-inset: 6px; + --token-tabs-tab-gutter: 6px; + --token-tabs-indicator-height: 3px; + --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-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; + --token-typography-font-stack-code: ui-monospace, Menlo, Consolas, monospace; + --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-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-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-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-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-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 */ + --token-typography-body-200-font-family: + -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, + Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --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: 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 */ +} 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 index 592d7afc00b..4db863683e3 100644 --- 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 @@ -2,67 +2,489 @@ * Do not edit directly, this file was auto-generated. */ -.hds-theme-default, -[data-hds-theme="default"] { - --token-color-palette-neutral-300: #000000; +:root { --token-color-palette-neutral-0: #ffffff; - --token-color-foreground-semantic-outlier: var( - --token-color-palette-neutral-0 - ); -} - -.hds-theme-cds-0, -[data-hds-theme="cds-0"] { - --token-color-palette-neutral-300: #c00000; - --token-color-palette-neutral-0: #cfffff; - --token-color-foreground-semantic-outlier: var( - --token-color-palette-neutral-100 - ); + --token-color-foreground-primary: #ffffff; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 500; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 700; } -.hds-theme-cds-10, -[data-hds-theme="cds-10"] { - --token-color-palette-neutral-300: #c33333; - --token-color-palette-neutral-0: #cccccc; - --token-color-foreground-semantic-outlier: var( - --token-color-palette-neutral-200 - ); +.hds-theme-cds-g0, +[data-hds-theme="cds-g0"] { + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-primary: #161616; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 600; } -.hds-theme-cds-90, -[data-hds-theme="cds-90"] { - --token-color-palette-neutral-300: #cccccc; - --token-color-palette-neutral-0: #c33333; - --token-color-foreground-semantic-outlier: var( - --token-color-palette-neutral-300 - ); +.hds-theme-cds-g10, +[data-hds-theme="cds-g10"] { + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-primary: #161616; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 600; } -.hds-theme-cds-100, -[data-hds-theme="cds-100"] { - --token-color-palette-neutral-300: #cfffff; - --token-color-palette-neutral-0: #c00000; - --token-color-foreground-semantic-outlier: #abcdef; +.hds-theme-cds-g90, +[data-hds-theme="cds-g90"] { + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-primary: #f4f4f4; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 600; } -:root { - --token-color-palette-neutral-300: #000000; +.hds-theme-cds-g100, +[data-hds-theme="cds-g100"] { --token-color-palette-neutral-0: #ffffff; - --token-color-foreground-semantic-outlier: var( - --token-color-palette-neutral-0 - ); + --token-color-foreground-primary: #f4f4f4; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 600; } :root { + --token-border-radius-x-small: 3px; + --token-border-radius-small: 5px; + --token-border-radius-medium: 6px; + --token-border-radius-large: 8px; + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-green-500: #054220; + --token-color-palette-green-400: #006619; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-400: #940004; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-50: #fff5f5; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-300: #c2c5cb; --token-color-palette-neutral-200: #dedfe3; --token-color-palette-neutral-100: #f1f2f3; - --token-component-a-size: 123px; - --token-color-foreground-strong: var(--token-color-palette-neutral-300); - --token-color-foreground-primary: var(--token-color-palette-neutral-200); - --token-color-foreground-high-contrast: var(--token-color-palette-neutral-0); - --token-component-a-color: var(--token-color-palette-neutral-300); - --token-component-b-color: var(--token-color-palette-neutral-200); - --token-component-b-size: var(--token-component-a-size); - --token-component-c-color: var(--token-color-foreground-high-contrast); - --token-component-d-color: var(--token-color-foreground-semantic-outlier); + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-100: #656a761a; + --token-color-border-primary: #656a7633; + --token-color-border-faint: #656a761a; + --token-color-border-strong: #3b3d4566; + --token-color-border-action: #cce3fe; + --token-color-border-highlight: #ead2fe; + --token-color-border-success: #cceeda; + --token-color-border-warning: #fbeabf; + --token-color-border-critical: #fbd4d4; + --token-color-focus-action-internal: #0c56e9; + --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-critical-internal: #c00005; + --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-foreground-strong: #0c0c0e; + --token-color-foreground-faint: #656a76; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: #8c909c; + --token-color-foreground-action: #1060ff; + --token-color-foreground-action-hover: #0c56e9; + --token-color-foreground-action-active: #0046d1; + --token-color-foreground-highlight: #a737ff; + --token-color-foreground-highlight-on-surface: #911ced; + --token-color-foreground-highlight-high-contrast: #42215b; + --token-color-foreground-success: #008a22; + --token-color-foreground-success-on-surface: #00781e; + --token-color-foreground-success-high-contrast: #054220; + --token-color-foreground-warning: #bb5a00; + --token-color-foreground-warning-on-surface: #9e4b00; + --token-color-foreground-warning-high-contrast: #542800; + --token-color-foreground-critical: #e52228; + --token-color-foreground-critical-on-surface: #c00005; + --token-color-foreground-critical-high-contrast: #51130a; + --token-color-page-primary: #ffffff; + --token-color-page-faint: #fafafa; + --token-color-surface-primary: #ffffff; + --token-color-surface-faint: #fafafa; + --token-color-surface-strong: #f1f2f3; + --token-color-surface-interactive: #ffffff; + --token-color-surface-interactive-hover: #f1f2f3; + --token-color-surface-interactive-active: #dedfe3; + --token-color-surface-interactive-disabled: #fafafa; + --token-color-surface-action: #f2f8ff; + --token-color-surface-highlight: #f9f2ff; + --token-color-surface-success: #f2fbf6; + --token-color-surface-warning: #fff9e8; + --token-color-surface-critical: #fff5f5; + --token-color-hashicorp-brand: #000000; + --token-color-boundary-brand: #f24c53; + --token-color-boundary-foreground: #cf2d32; + --token-color-boundary-surface: #ffecec; + --token-color-boundary-border: #fbd7d8; + --token-color-boundary-gradient-primary-start: #f97076; + --token-color-boundary-gradient-primary-stop: #db363b; + --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-consul-brand: #e03875; + --token-color-consul-foreground: #d01c5b; + --token-color-consul-surface: #ffe9f1; + --token-color-consul-border: #ffcede; + --token-color-consul-gradient-primary-start: #ff99be; + --token-color-consul-gradient-primary-stop: #da306e; + --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-hcp-brand: #000000; + --token-color-nomad-brand: #06d092; + --token-color-nomad-foreground: #008661; + --token-color-nomad-surface: #d3fdeb; + --token-color-nomad-border: #bff3dd; + --token-color-nomad-gradient-primary-start: #bff3dd; + --token-color-nomad-gradient-primary-stop: #60dea9; + --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-packer-brand: #02a8ef; + --token-color-packer-foreground: #007eb4; + --token-color-packer-surface: #d4f2ff; + --token-color-packer-border: #b4e4ff; + --token-color-packer-gradient-primary-start: #b4e4ff; + --token-color-packer-gradient-primary-stop: #63d0ff; + --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-terraform-brand: #7b42bc; + --token-color-terraform-brand-on-dark: #a067da; /** this is an alternative brand color meant to be used on dark backgrounds */ + --token-color-terraform-foreground: #773cb4; + --token-color-terraform-surface: #f4ecff; + --token-color-terraform-border: #ebdbfc; + --token-color-terraform-gradient-primary-start: #bb8deb; + --token-color-terraform-gradient-primary-stop: #844fba; + --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-vagrant-brand: #1868f2; + --token-color-vagrant-foreground: #1c61d8; + --token-color-vagrant-surface: #d6ebff; + --token-color-vagrant-border: #c7dbfc; + --token-color-vagrant-gradient-primary-start: #639cff; + --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-foreground: #9a6f00; + --token-color-vault-radar-surface: #fff9cf; + --token-color-vault-radar-border: #feec7b; + --token-color-vault-radar-gradient-primary-start: #feec7b; + --token-color-vault-radar-gradient-primary-stop: #ffe543; + --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-secrets-brand: #ffcf25; + --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-color-vault-secrets-foreground: #9a6f00; + --token-color-vault-secrets-surface: #fff9cf; + --token-color-vault-secrets-border: #feec7b; + --token-color-vault-secrets-gradient-primary-start: #feec7b; + --token-color-vault-secrets-gradient-primary-stop: #ffe543; + --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-brand: #ffcf25; + --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-foreground: #9a6f00; + --token-color-vault-surface: #fff9cf; + --token-color-vault-border: #feec7b; + --token-color-vault-gradient-primary-start: #feec7b; + --token-color-vault-gradient-primary-stop: #ffe543; + --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-waypoint-brand: #14c6cb; + --token-color-waypoint-foreground: #008196; + --token-color-waypoint-surface: #e0fcff; + --token-color-waypoint-border: #cbf1f3; + --token-color-waypoint-gradient-primary-start: #cbf1f3; + --token-color-waypoint-gradient-primary-stop: #62d4dc; + --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-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-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-overlay-box-shadow: + 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; + --token-surface-inset-box-shadow: + inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a; + --token-surface-base-box-shadow: 0 0 0 1px #656a7633; + --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-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-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-header-height: 60px; + --token-app-header-home-link-size: 36px; + --token-app-header-logo-size: 28px; + --token-app-side-nav-wrapper-border-width: 1px; + --token-app-side-nav-wrapper-border-color: var( + --token-color-palette-neutral-200 + ); + --token-app-side-nav-wrapper-padding-horizontal: 16px; + --token-app-side-nav-wrapper-padding-vertical: 16px; + --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-app-side-nav-toggle-button-border-radius: 5px; + --token-app-side-nav-header-home-link-padding: 4px; + --token-app-side-nav-header-home-link-logo-size: 48px; + --token-app-side-nav-header-home-link-logo-size-minimized: 32px; + --token-app-side-nav-header-actions-spacing: 8px; + --token-app-side-nav-body-list-margin-vertical: 24px; + --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-item-content-spacing-horizontal: 8px; + --token-app-side-nav-body-list-item-border-radius: 5px; + --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-foreground-faint: var( + --token-color-foreground-faint + ); + --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-form-label-color: #0c0c0e; + --token-form-legend-color: #0c0c0e; + --token-form-helper-text-color: #656a76; + --token-form-indicator-optional-color: #656a76; + --token-form-error-color: #c00005; + --token-form-error-icon-size: 14px; + --token-form-checkbox-size: 16px; + --token-form-checkbox-border-radius: 3px; + --token-form-checkbox-border-width: 1px; + --token-form-checkbox-background-image-size: 12px; + --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-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-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-control-base-foreground-value-color: #0c0c0e; + --token-form-control-base-foreground-placeholder-color: #656a76; + --token-form-control-base-surface-color-default: #ffffff; + --token-form-control-base-surface-color-hover: #f1f2f3; + --token-form-control-base-border-color-default: #8c909c; + --token-form-control-base-border-color-hover: #656a76; + --token-form-control-checked-foreground-color: #ffffff; + --token-form-control-checked-surface-color-default: #1060ff; + --token-form-control-checked-surface-color-hover: #0c56e9; + --token-form-control-checked-border-color-default: #0c56e9; + --token-form-control-checked-border-color-hover: #0046d1; + --token-form-control-invalid-border-color-default: #c00005; + --token-form-control-invalid-border-color-hover: #940004; + --token-form-control-readonly-foreground-color: #ffffff; + --token-form-control-readonly-surface-color: #f1f2f3; + --token-form-control-readonly-border-color: #656a761a; + --token-form-control-disabled-foreground-color: #8c909c; + --token-form-control-disabled-surface-color: #fafafa; + --token-form-control-disabled-border-color: #656a7633; + --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-border-radius: 5px; + --token-form-control-border-width: 1px; + --token-form-radio-size: 16px; + --token-form-radio-border-width: 1px; + --token-form-radio-background-image-size: 12px; + --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-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-radiocard-group-gap: 16px; + --token-form-radiocard-border-width: 1px; + --token-form-radiocard-border-radius: 6px; + --token-form-radiocard-content-padding: 24px; + --token-form-radiocard-control-padding: 8px; + --token-form-radiocard-transition-duration: 0.2s; + --token-form-select-background-image-size: 16px; + --token-form-select-background-image-position-right-x: 7px; + --token-form-select-background-image-position-top-y: 9px; + --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-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-text-input-background-image-size: 16px; + --token-form-text-input-background-image-position-x: 7px; + --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-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-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-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-toggle-width: 32px; + --token-form-toggle-height: 16px; + --token-form-toggle-base-surface-color-default: #f1f2f3; /** 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-background-image-size: 12px; + --token-form-toggle-background-image-position-x: 2px; + --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-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-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-pagination-nav-control-height: 36px; + --token-pagination-nav-control-padding-horizontal: 12px; + --token-pagination-nav-control-focus-inset: 4px; + --token-pagination-nav-control-icon-spacing: 6px; + --token-pagination-nav-indicator-height: 2px; + --token-pagination-nav-indicator-spacing: 6px; + --token-pagination-child-spacing-vertical: 8px; + --token-pagination-child-spacing-horizontal: 20px; + --token-side-nav-wrapper-border-width: 1px; + --token-side-nav-wrapper-border-color: #656a76; + --token-side-nav-wrapper-padding-horizontal: 16px; + --token-side-nav-wrapper-padding-vertical: 16px; + --token-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-side-nav-toggle-button-border-radius: 5px; + --token-side-nav-header-home-link-padding: 4px; + --token-side-nav-header-home-link-logo-size: 48px; + --token-side-nav-header-home-link-logo-size-minimized: 32px; + --token-side-nav-header-actions-spacing: 8px; + --token-side-nav-body-list-margin-vertical: 24px; + --token-side-nav-body-list-item-height: 36px; + --token-side-nav-body-list-item-padding-horizontal: 8px; + --token-side-nav-body-list-item-padding-vertical: 4px; + --token-side-nav-body-list-item-spacing-vertical: 2px; + --token-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-side-nav-body-list-item-border-radius: 5px; + --token-side-nav-color-foreground-primary: #dedfe3; + --token-side-nav-color-foreground-strong: #ffffff; + --token-side-nav-color-foreground-faint: #8c909c; + --token-side-nav-color-surface-primary: #0c0c0e; + --token-side-nav-color-surface-interactive-hover: #3b3d45; + --token-side-nav-color-surface-interactive-active: #656a76; + --token-tabs-tab-height-medium: 36px; + --token-tabs-tab-height-large: 48px; + --token-tabs-tab-padding-horizontal-medium: 12px; + --token-tabs-tab-padding-horizontal-large: 20px; + --token-tabs-tab-padding-vertical: 0px; + --token-tabs-tab-border-radius: 5px; + --token-tabs-tab-focus-inset: 6px; + --token-tabs-tab-gutter: 6px; + --token-tabs-indicator-height: 3px; + --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-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; + --token-typography-font-stack-code: ui-monospace, Menlo, Consolas, monospace; + --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-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-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-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-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-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 */ + --token-typography-body-200-font-family: + -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, + Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --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: 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 */ } diff --git a/packages/tokens/dist/products/css/themed-tokens/with-prefers-color-scheme/tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-prefers-color-scheme/tokens.css index 90db7cd8b13..ea15c4eb802 100644 --- a/packages/tokens/dist/products/css/themed-tokens/with-prefers-color-scheme/tokens.css +++ b/packages/tokens/dist/products/css/themed-tokens/with-prefers-color-scheme/tokens.css @@ -2,34 +2,462 @@ * Do not edit directly, this file was auto-generated. */ -@media (prefers-color-scheme: dark) { +@media (prefers-color-scheme: light) { :root { - --token-color-palette-neutral-300: #c00000; - --token-color-palette-neutral-0: #cfffff; - --token-color-foreground-semantic-outlier: var( - --token-color-palette-neutral-100 - ); + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-primary: #161616; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 600; } } -@media (prefers-color-scheme: light) { +@media (prefers-color-scheme: dark) { :root { - --token-color-palette-neutral-300: #cfffff; - --token-color-palette-neutral-0: #c00000; - --token-color-foreground-semantic-outlier: #abcdef; + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-primary: #f4f4f4; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 600; } } :root { + --token-border-radius-x-small: 3px; + --token-border-radius-small: 5px; + --token-border-radius-medium: 6px; + --token-border-radius-large: 8px; + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-green-500: #054220; + --token-color-palette-green-400: #006619; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-400: #940004; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-50: #fff5f5; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-300: #c2c5cb; --token-color-palette-neutral-200: #dedfe3; --token-color-palette-neutral-100: #f1f2f3; - --token-component-a-size: 123px; - --token-color-foreground-strong: var(--token-color-palette-neutral-300); - --token-color-foreground-primary: var(--token-color-palette-neutral-200); - --token-color-foreground-high-contrast: var(--token-color-palette-neutral-0); - --token-component-a-color: var(--token-color-palette-neutral-300); - --token-component-b-color: var(--token-color-palette-neutral-200); - --token-component-b-size: var(--token-component-a-size); - --token-component-c-color: var(--token-color-foreground-high-contrast); - --token-component-d-color: var(--token-color-foreground-semantic-outlier); + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-100: #656a761a; + --token-color-border-primary: #656a7633; + --token-color-border-faint: #656a761a; + --token-color-border-strong: #3b3d4566; + --token-color-border-action: #cce3fe; + --token-color-border-highlight: #ead2fe; + --token-color-border-success: #cceeda; + --token-color-border-warning: #fbeabf; + --token-color-border-critical: #fbd4d4; + --token-color-focus-action-internal: #0c56e9; + --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-critical-internal: #c00005; + --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-foreground-strong: #0c0c0e; + --token-color-foreground-faint: #656a76; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: #8c909c; + --token-color-foreground-action: #1060ff; + --token-color-foreground-action-hover: #0c56e9; + --token-color-foreground-action-active: #0046d1; + --token-color-foreground-highlight: #a737ff; + --token-color-foreground-highlight-on-surface: #911ced; + --token-color-foreground-highlight-high-contrast: #42215b; + --token-color-foreground-success: #008a22; + --token-color-foreground-success-on-surface: #00781e; + --token-color-foreground-success-high-contrast: #054220; + --token-color-foreground-warning: #bb5a00; + --token-color-foreground-warning-on-surface: #9e4b00; + --token-color-foreground-warning-high-contrast: #542800; + --token-color-foreground-critical: #e52228; + --token-color-foreground-critical-on-surface: #c00005; + --token-color-foreground-critical-high-contrast: #51130a; + --token-color-page-primary: #ffffff; + --token-color-page-faint: #fafafa; + --token-color-surface-primary: #ffffff; + --token-color-surface-faint: #fafafa; + --token-color-surface-strong: #f1f2f3; + --token-color-surface-interactive: #ffffff; + --token-color-surface-interactive-hover: #f1f2f3; + --token-color-surface-interactive-active: #dedfe3; + --token-color-surface-interactive-disabled: #fafafa; + --token-color-surface-action: #f2f8ff; + --token-color-surface-highlight: #f9f2ff; + --token-color-surface-success: #f2fbf6; + --token-color-surface-warning: #fff9e8; + --token-color-surface-critical: #fff5f5; + --token-color-hashicorp-brand: #000000; + --token-color-boundary-brand: #f24c53; + --token-color-boundary-foreground: #cf2d32; + --token-color-boundary-surface: #ffecec; + --token-color-boundary-border: #fbd7d8; + --token-color-boundary-gradient-primary-start: #f97076; + --token-color-boundary-gradient-primary-stop: #db363b; + --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-consul-brand: #e03875; + --token-color-consul-foreground: #d01c5b; + --token-color-consul-surface: #ffe9f1; + --token-color-consul-border: #ffcede; + --token-color-consul-gradient-primary-start: #ff99be; + --token-color-consul-gradient-primary-stop: #da306e; + --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-hcp-brand: #000000; + --token-color-nomad-brand: #06d092; + --token-color-nomad-foreground: #008661; + --token-color-nomad-surface: #d3fdeb; + --token-color-nomad-border: #bff3dd; + --token-color-nomad-gradient-primary-start: #bff3dd; + --token-color-nomad-gradient-primary-stop: #60dea9; + --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-packer-brand: #02a8ef; + --token-color-packer-foreground: #007eb4; + --token-color-packer-surface: #d4f2ff; + --token-color-packer-border: #b4e4ff; + --token-color-packer-gradient-primary-start: #b4e4ff; + --token-color-packer-gradient-primary-stop: #63d0ff; + --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-terraform-brand: #7b42bc; + --token-color-terraform-brand-on-dark: #a067da; /** this is an alternative brand color meant to be used on dark backgrounds */ + --token-color-terraform-foreground: #773cb4; + --token-color-terraform-surface: #f4ecff; + --token-color-terraform-border: #ebdbfc; + --token-color-terraform-gradient-primary-start: #bb8deb; + --token-color-terraform-gradient-primary-stop: #844fba; + --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-vagrant-brand: #1868f2; + --token-color-vagrant-foreground: #1c61d8; + --token-color-vagrant-surface: #d6ebff; + --token-color-vagrant-border: #c7dbfc; + --token-color-vagrant-gradient-primary-start: #639cff; + --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-foreground: #9a6f00; + --token-color-vault-radar-surface: #fff9cf; + --token-color-vault-radar-border: #feec7b; + --token-color-vault-radar-gradient-primary-start: #feec7b; + --token-color-vault-radar-gradient-primary-stop: #ffe543; + --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-secrets-brand: #ffcf25; + --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-color-vault-secrets-foreground: #9a6f00; + --token-color-vault-secrets-surface: #fff9cf; + --token-color-vault-secrets-border: #feec7b; + --token-color-vault-secrets-gradient-primary-start: #feec7b; + --token-color-vault-secrets-gradient-primary-stop: #ffe543; + --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-brand: #ffcf25; + --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-foreground: #9a6f00; + --token-color-vault-surface: #fff9cf; + --token-color-vault-border: #feec7b; + --token-color-vault-gradient-primary-start: #feec7b; + --token-color-vault-gradient-primary-stop: #ffe543; + --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-waypoint-brand: #14c6cb; + --token-color-waypoint-foreground: #008196; + --token-color-waypoint-surface: #e0fcff; + --token-color-waypoint-border: #cbf1f3; + --token-color-waypoint-gradient-primary-start: #cbf1f3; + --token-color-waypoint-gradient-primary-stop: #62d4dc; + --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-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-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-overlay-box-shadow: + 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; + --token-surface-inset-box-shadow: + inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a; + --token-surface-base-box-shadow: 0 0 0 1px #656a7633; + --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-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-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-header-height: 60px; + --token-app-header-home-link-size: 36px; + --token-app-header-logo-size: 28px; + --token-app-side-nav-wrapper-border-width: 1px; + --token-app-side-nav-wrapper-border-color: var( + --token-color-palette-neutral-200 + ); + --token-app-side-nav-wrapper-padding-horizontal: 16px; + --token-app-side-nav-wrapper-padding-vertical: 16px; + --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-app-side-nav-toggle-button-border-radius: 5px; + --token-app-side-nav-header-home-link-padding: 4px; + --token-app-side-nav-header-home-link-logo-size: 48px; + --token-app-side-nav-header-home-link-logo-size-minimized: 32px; + --token-app-side-nav-header-actions-spacing: 8px; + --token-app-side-nav-body-list-margin-vertical: 24px; + --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-item-content-spacing-horizontal: 8px; + --token-app-side-nav-body-list-item-border-radius: 5px; + --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-foreground-faint: var( + --token-color-foreground-faint + ); + --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-form-label-color: #0c0c0e; + --token-form-legend-color: #0c0c0e; + --token-form-helper-text-color: #656a76; + --token-form-indicator-optional-color: #656a76; + --token-form-error-color: #c00005; + --token-form-error-icon-size: 14px; + --token-form-checkbox-size: 16px; + --token-form-checkbox-border-radius: 3px; + --token-form-checkbox-border-width: 1px; + --token-form-checkbox-background-image-size: 12px; + --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-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-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-control-base-foreground-value-color: #0c0c0e; + --token-form-control-base-foreground-placeholder-color: #656a76; + --token-form-control-base-surface-color-default: #ffffff; + --token-form-control-base-surface-color-hover: #f1f2f3; + --token-form-control-base-border-color-default: #8c909c; + --token-form-control-base-border-color-hover: #656a76; + --token-form-control-checked-foreground-color: #ffffff; + --token-form-control-checked-surface-color-default: #1060ff; + --token-form-control-checked-surface-color-hover: #0c56e9; + --token-form-control-checked-border-color-default: #0c56e9; + --token-form-control-checked-border-color-hover: #0046d1; + --token-form-control-invalid-border-color-default: #c00005; + --token-form-control-invalid-border-color-hover: #940004; + --token-form-control-readonly-foreground-color: #ffffff; + --token-form-control-readonly-surface-color: #f1f2f3; + --token-form-control-readonly-border-color: #656a761a; + --token-form-control-disabled-foreground-color: #8c909c; + --token-form-control-disabled-surface-color: #fafafa; + --token-form-control-disabled-border-color: #656a7633; + --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-border-radius: 5px; + --token-form-control-border-width: 1px; + --token-form-radio-size: 16px; + --token-form-radio-border-width: 1px; + --token-form-radio-background-image-size: 12px; + --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-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-radiocard-group-gap: 16px; + --token-form-radiocard-border-width: 1px; + --token-form-radiocard-border-radius: 6px; + --token-form-radiocard-content-padding: 24px; + --token-form-radiocard-control-padding: 8px; + --token-form-radiocard-transition-duration: 0.2s; + --token-form-select-background-image-size: 16px; + --token-form-select-background-image-position-right-x: 7px; + --token-form-select-background-image-position-top-y: 9px; + --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-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-text-input-background-image-size: 16px; + --token-form-text-input-background-image-position-x: 7px; + --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-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-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-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-toggle-width: 32px; + --token-form-toggle-height: 16px; + --token-form-toggle-base-surface-color-default: #f1f2f3; /** 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-background-image-size: 12px; + --token-form-toggle-background-image-position-x: 2px; + --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-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-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-pagination-nav-control-height: 36px; + --token-pagination-nav-control-padding-horizontal: 12px; + --token-pagination-nav-control-focus-inset: 4px; + --token-pagination-nav-control-icon-spacing: 6px; + --token-pagination-nav-indicator-height: 2px; + --token-pagination-nav-indicator-spacing: 6px; + --token-pagination-child-spacing-vertical: 8px; + --token-pagination-child-spacing-horizontal: 20px; + --token-side-nav-wrapper-border-width: 1px; + --token-side-nav-wrapper-border-color: #656a76; + --token-side-nav-wrapper-padding-horizontal: 16px; + --token-side-nav-wrapper-padding-vertical: 16px; + --token-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-side-nav-toggle-button-border-radius: 5px; + --token-side-nav-header-home-link-padding: 4px; + --token-side-nav-header-home-link-logo-size: 48px; + --token-side-nav-header-home-link-logo-size-minimized: 32px; + --token-side-nav-header-actions-spacing: 8px; + --token-side-nav-body-list-margin-vertical: 24px; + --token-side-nav-body-list-item-height: 36px; + --token-side-nav-body-list-item-padding-horizontal: 8px; + --token-side-nav-body-list-item-padding-vertical: 4px; + --token-side-nav-body-list-item-spacing-vertical: 2px; + --token-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-side-nav-body-list-item-border-radius: 5px; + --token-side-nav-color-foreground-primary: #dedfe3; + --token-side-nav-color-foreground-strong: #ffffff; + --token-side-nav-color-foreground-faint: #8c909c; + --token-side-nav-color-surface-primary: #0c0c0e; + --token-side-nav-color-surface-interactive-hover: #3b3d45; + --token-side-nav-color-surface-interactive-active: #656a76; + --token-tabs-tab-height-medium: 36px; + --token-tabs-tab-height-large: 48px; + --token-tabs-tab-padding-horizontal-medium: 12px; + --token-tabs-tab-padding-horizontal-large: 20px; + --token-tabs-tab-padding-vertical: 0px; + --token-tabs-tab-border-radius: 5px; + --token-tabs-tab-focus-inset: 6px; + --token-tabs-tab-gutter: 6px; + --token-tabs-indicator-height: 3px; + --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-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; + --token-typography-font-stack-code: ui-monospace, Menlo, Consolas, monospace; + --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-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-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-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-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-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 */ + --token-typography-body-200-font-family: + -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, + Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --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: 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 */ } diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-0/common-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-0/common-tokens.css deleted file mode 100644 index cf8f8008c44..00000000000 --- a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-0/common-tokens.css +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Do not edit directly, this file was auto-generated. - */ - -:root { - --token-color-palette-neutral-200: #dedfe3; - --token-color-palette-neutral-100: #f1f2f3; - --token-component-a-size: 123px; - --token-color-foreground-strong: var(--token-color-palette-neutral-300); - --token-color-foreground-primary: var(--token-color-palette-neutral-200); - --token-color-foreground-high-contrast: var(--token-color-palette-neutral-0); - --token-component-a-color: var(--token-color-palette-neutral-300); - --token-component-b-color: var(--token-color-palette-neutral-200); - --token-component-b-size: var(--token-component-a-size); - --token-component-c-color: var(--token-color-foreground-high-contrast); - --token-component-d-color: var(--token-color-foreground-semantic-outlier); -} diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-0/themed-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-0/themed-tokens.css deleted file mode 100644 index d9e0a1f523f..00000000000 --- a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-0/themed-tokens.css +++ /dev/null @@ -1,9 +0,0 @@ -/** - * Do not edit directly, this file was auto-generated. - */ - -:root { - --token-color-palette-neutral-300: #c00000; - --token-color-palette-neutral-0: #cfffff; - --token-color-foreground-semantic-outlier: var(--token-color-palette-neutral-100); -} diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-10/common-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-10/common-tokens.css deleted file mode 100644 index cf8f8008c44..00000000000 --- a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-10/common-tokens.css +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Do not edit directly, this file was auto-generated. - */ - -:root { - --token-color-palette-neutral-200: #dedfe3; - --token-color-palette-neutral-100: #f1f2f3; - --token-component-a-size: 123px; - --token-color-foreground-strong: var(--token-color-palette-neutral-300); - --token-color-foreground-primary: var(--token-color-palette-neutral-200); - --token-color-foreground-high-contrast: var(--token-color-palette-neutral-0); - --token-component-a-color: var(--token-color-palette-neutral-300); - --token-component-b-color: var(--token-color-palette-neutral-200); - --token-component-b-size: var(--token-component-a-size); - --token-component-c-color: var(--token-color-foreground-high-contrast); - --token-component-d-color: var(--token-color-foreground-semantic-outlier); -} diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-10/themed-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-10/themed-tokens.css deleted file mode 100644 index eec4c0f0852..00000000000 --- a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-10/themed-tokens.css +++ /dev/null @@ -1,9 +0,0 @@ -/** - * Do not edit directly, this file was auto-generated. - */ - -:root { - --token-color-palette-neutral-300: #c33333; - --token-color-palette-neutral-0: #cccccc; - --token-color-foreground-semantic-outlier: var(--token-color-palette-neutral-200); -} diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-100/common-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-100/common-tokens.css deleted file mode 100644 index 0d9c3807e08..00000000000 --- a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-100/common-tokens.css +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Do not edit directly, this file was auto-generated. - */ - -:root { - --token-color-palette-neutral-200: #dedfe3; - --token-color-palette-neutral-100: #f1f2f3; - --token-component-a-size: 123px; - --token-color-foreground-strong: var(--token-color-palette-neutral-300); - --token-color-foreground-primary: var(--token-color-palette-neutral-200); - --token-color-foreground-high-contrast: var(--token-color-palette-neutral-0); - --token-component-a-color: var(--token-color-palette-neutral-300); - --token-component-b-color: var(--token-color-palette-neutral-200); - --token-component-b-size: var(--token-component-a-size); - --token-component-d-color: var(--token-color-foreground-semantic-outlier); - --token-component-c-color: var(--token-color-foreground-high-contrast); -} diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-100/themed-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-100/themed-tokens.css deleted file mode 100644 index 73f0b68d0ac..00000000000 --- a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-100/themed-tokens.css +++ /dev/null @@ -1,9 +0,0 @@ -/** - * Do not edit directly, this file was auto-generated. - */ - -:root { - --token-color-palette-neutral-300: #cfffff; - --token-color-palette-neutral-0: #c00000; - --token-color-foreground-semantic-outlier: #abcdef; -} diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-90/common-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-90/common-tokens.css deleted file mode 100644 index cf8f8008c44..00000000000 --- a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-90/common-tokens.css +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Do not edit directly, this file was auto-generated. - */ - -:root { - --token-color-palette-neutral-200: #dedfe3; - --token-color-palette-neutral-100: #f1f2f3; - --token-component-a-size: 123px; - --token-color-foreground-strong: var(--token-color-palette-neutral-300); - --token-color-foreground-primary: var(--token-color-palette-neutral-200); - --token-color-foreground-high-contrast: var(--token-color-palette-neutral-0); - --token-component-a-color: var(--token-color-palette-neutral-300); - --token-component-b-color: var(--token-color-palette-neutral-200); - --token-component-b-size: var(--token-component-a-size); - --token-component-c-color: var(--token-color-foreground-high-contrast); - --token-component-d-color: var(--token-color-foreground-semantic-outlier); -} diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-90/themed-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-90/themed-tokens.css deleted file mode 100644 index 9a36f03ad66..00000000000 --- a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-90/themed-tokens.css +++ /dev/null @@ -1,9 +0,0 @@ -/** - * Do not edit directly, this file was auto-generated. - */ - -:root { - --token-color-palette-neutral-300: #cccccc; - --token-color-palette-neutral-0: #c33333; - --token-color-foreground-semantic-outlier: var(--token-color-palette-neutral-300); -} 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..68a70888748 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g0/common-tokens.css @@ -0,0 +1,385 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-border-radius-x-small: 3px; + --token-border-radius-small: 5px; + --token-border-radius-medium: 6px; + --token-border-radius-large: 8px; + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-green-500: #054220; + --token-color-palette-green-400: #006619; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-400: #940004; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-50: #fff5f5; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-300: #c2c5cb; + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-100: #656a761a; + --token-color-border-primary: #656a7633; + --token-color-border-faint: #656a761a; + --token-color-border-strong: #3b3d4566; + --token-color-border-action: #cce3fe; + --token-color-border-highlight: #ead2fe; + --token-color-border-success: #cceeda; + --token-color-border-warning: #fbeabf; + --token-color-border-critical: #fbd4d4; + --token-color-focus-action-internal: #0c56e9; + --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-critical-internal: #c00005; + --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-foreground-strong: #0c0c0e; + --token-color-foreground-faint: #656a76; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: #8c909c; + --token-color-foreground-action: #1060ff; + --token-color-foreground-action-hover: #0c56e9; + --token-color-foreground-action-active: #0046d1; + --token-color-foreground-highlight: #a737ff; + --token-color-foreground-highlight-on-surface: #911ced; + --token-color-foreground-highlight-high-contrast: #42215b; + --token-color-foreground-success: #008a22; + --token-color-foreground-success-on-surface: #00781e; + --token-color-foreground-success-high-contrast: #054220; + --token-color-foreground-warning: #bb5a00; + --token-color-foreground-warning-on-surface: #9e4b00; + --token-color-foreground-warning-high-contrast: #542800; + --token-color-foreground-critical: #e52228; + --token-color-foreground-critical-on-surface: #c00005; + --token-color-foreground-critical-high-contrast: #51130a; + --token-color-page-primary: #ffffff; + --token-color-page-faint: #fafafa; + --token-color-surface-primary: #ffffff; + --token-color-surface-faint: #fafafa; + --token-color-surface-strong: #f1f2f3; + --token-color-surface-interactive: #ffffff; + --token-color-surface-interactive-hover: #f1f2f3; + --token-color-surface-interactive-active: #dedfe3; + --token-color-surface-interactive-disabled: #fafafa; + --token-color-surface-action: #f2f8ff; + --token-color-surface-highlight: #f9f2ff; + --token-color-surface-success: #f2fbf6; + --token-color-surface-warning: #fff9e8; + --token-color-surface-critical: #fff5f5; + --token-color-hashicorp-brand: #000000; + --token-color-boundary-brand: #f24c53; + --token-color-boundary-foreground: #cf2d32; + --token-color-boundary-surface: #ffecec; + --token-color-boundary-border: #fbd7d8; + --token-color-boundary-gradient-primary-start: #f97076; + --token-color-boundary-gradient-primary-stop: #db363b; + --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-consul-brand: #e03875; + --token-color-consul-foreground: #d01c5b; + --token-color-consul-surface: #ffe9f1; + --token-color-consul-border: #ffcede; + --token-color-consul-gradient-primary-start: #ff99be; + --token-color-consul-gradient-primary-stop: #da306e; + --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-hcp-brand: #000000; + --token-color-nomad-brand: #06d092; + --token-color-nomad-foreground: #008661; + --token-color-nomad-surface: #d3fdeb; + --token-color-nomad-border: #bff3dd; + --token-color-nomad-gradient-primary-start: #bff3dd; + --token-color-nomad-gradient-primary-stop: #60dea9; + --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-packer-brand: #02a8ef; + --token-color-packer-foreground: #007eb4; + --token-color-packer-surface: #d4f2ff; + --token-color-packer-border: #b4e4ff; + --token-color-packer-gradient-primary-start: #b4e4ff; + --token-color-packer-gradient-primary-stop: #63d0ff; + --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-terraform-brand: #7b42bc; + --token-color-terraform-brand-on-dark: #a067da; /** this is an alternative brand color meant to be used on dark backgrounds */ + --token-color-terraform-foreground: #773cb4; + --token-color-terraform-surface: #f4ecff; + --token-color-terraform-border: #ebdbfc; + --token-color-terraform-gradient-primary-start: #bb8deb; + --token-color-terraform-gradient-primary-stop: #844fba; + --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-vagrant-brand: #1868f2; + --token-color-vagrant-foreground: #1c61d8; + --token-color-vagrant-surface: #d6ebff; + --token-color-vagrant-border: #c7dbfc; + --token-color-vagrant-gradient-primary-start: #639cff; + --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-foreground: #9a6f00; + --token-color-vault-radar-surface: #fff9cf; + --token-color-vault-radar-border: #feec7b; + --token-color-vault-radar-gradient-primary-start: #feec7b; + --token-color-vault-radar-gradient-primary-stop: #ffe543; + --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-secrets-brand: #ffcf25; + --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-color-vault-secrets-foreground: #9a6f00; + --token-color-vault-secrets-surface: #fff9cf; + --token-color-vault-secrets-border: #feec7b; + --token-color-vault-secrets-gradient-primary-start: #feec7b; + --token-color-vault-secrets-gradient-primary-stop: #ffe543; + --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-brand: #ffcf25; + --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-foreground: #9a6f00; + --token-color-vault-surface: #fff9cf; + --token-color-vault-border: #feec7b; + --token-color-vault-gradient-primary-start: #feec7b; + --token-color-vault-gradient-primary-stop: #ffe543; + --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-waypoint-brand: #14c6cb; + --token-color-waypoint-foreground: #008196; + --token-color-waypoint-surface: #e0fcff; + --token-color-waypoint-border: #cbf1f3; + --token-color-waypoint-gradient-primary-start: #cbf1f3; + --token-color-waypoint-gradient-primary-stop: #62d4dc; + --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-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-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-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; + --token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a; + --token-surface-base-box-shadow: 0 0 0 1px #656a7633; + --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-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-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-header-height: 60px; + --token-app-header-home-link-size: 36px; + --token-app-header-logo-size: 28px; + --token-app-side-nav-wrapper-border-width: 1px; + --token-app-side-nav-wrapper-border-color: var(--token-color-palette-neutral-200); + --token-app-side-nav-wrapper-padding-horizontal: 16px; + --token-app-side-nav-wrapper-padding-vertical: 16px; + --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-app-side-nav-toggle-button-border-radius: 5px; + --token-app-side-nav-header-home-link-padding: 4px; + --token-app-side-nav-header-home-link-logo-size: 48px; + --token-app-side-nav-header-home-link-logo-size-minimized: 32px; + --token-app-side-nav-header-actions-spacing: 8px; + --token-app-side-nav-body-list-margin-vertical: 24px; + --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-item-content-spacing-horizontal: 8px; + --token-app-side-nav-body-list-item-border-radius: 5px; + --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-foreground-faint: var(--token-color-foreground-faint); + --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-form-label-color: #0c0c0e; + --token-form-legend-color: #0c0c0e; + --token-form-helper-text-color: #656a76; + --token-form-indicator-optional-color: #656a76; + --token-form-error-color: #c00005; + --token-form-error-icon-size: 14px; + --token-form-checkbox-size: 16px; + --token-form-checkbox-border-radius: 3px; + --token-form-checkbox-border-width: 1px; + --token-form-checkbox-background-image-size: 12px; + --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-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-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-control-base-foreground-value-color: #0c0c0e; + --token-form-control-base-foreground-placeholder-color: #656a76; + --token-form-control-base-surface-color-default: #ffffff; + --token-form-control-base-surface-color-hover: #f1f2f3; + --token-form-control-base-border-color-default: #8c909c; + --token-form-control-base-border-color-hover: #656a76; + --token-form-control-checked-foreground-color: #ffffff; + --token-form-control-checked-surface-color-default: #1060ff; + --token-form-control-checked-surface-color-hover: #0c56e9; + --token-form-control-checked-border-color-default: #0c56e9; + --token-form-control-checked-border-color-hover: #0046d1; + --token-form-control-invalid-border-color-default: #c00005; + --token-form-control-invalid-border-color-hover: #940004; + --token-form-control-readonly-foreground-color: #161616; + --token-form-control-readonly-surface-color: #f1f2f3; + --token-form-control-readonly-border-color: #656a761a; + --token-form-control-disabled-foreground-color: #8c909c; + --token-form-control-disabled-surface-color: #fafafa; + --token-form-control-disabled-border-color: #656a7633; + --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-border-radius: 5px; + --token-form-control-border-width: 1px; + --token-form-radio-size: 16px; + --token-form-radio-border-width: 1px; + --token-form-radio-background-image-size: 12px; + --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-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-radiocard-group-gap: 16px; + --token-form-radiocard-border-width: 1px; + --token-form-radiocard-border-radius: 6px; + --token-form-radiocard-content-padding: 24px; + --token-form-radiocard-control-padding: 8px; + --token-form-radiocard-transition-duration: 0.2s; + --token-form-select-background-image-size: 16px; + --token-form-select-background-image-position-right-x: 7px; + --token-form-select-background-image-position-top-y: 9px; + --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-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-text-input-background-image-size: 16px; + --token-form-text-input-background-image-position-x: 7px; + --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-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-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-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-toggle-width: 32px; + --token-form-toggle-height: 16px; + --token-form-toggle-base-surface-color-default: #f1f2f3; /** 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-background-image-size: 12px; + --token-form-toggle-background-image-position-x: 2px; + --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-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-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-pagination-nav-control-height: 36px; + --token-pagination-nav-control-padding-horizontal: 12px; + --token-pagination-nav-control-focus-inset: 4px; + --token-pagination-nav-control-icon-spacing: 6px; + --token-pagination-nav-indicator-height: 2px; + --token-pagination-nav-indicator-spacing: 6px; + --token-pagination-child-spacing-vertical: 8px; + --token-pagination-child-spacing-horizontal: 20px; + --token-side-nav-wrapper-border-width: 1px; + --token-side-nav-wrapper-border-color: #656a76; + --token-side-nav-wrapper-padding-horizontal: 16px; + --token-side-nav-wrapper-padding-vertical: 16px; + --token-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-side-nav-toggle-button-border-radius: 5px; + --token-side-nav-header-home-link-padding: 4px; + --token-side-nav-header-home-link-logo-size: 48px; + --token-side-nav-header-home-link-logo-size-minimized: 32px; + --token-side-nav-header-actions-spacing: 8px; + --token-side-nav-body-list-margin-vertical: 24px; + --token-side-nav-body-list-item-height: 36px; + --token-side-nav-body-list-item-padding-horizontal: 8px; + --token-side-nav-body-list-item-padding-vertical: 4px; + --token-side-nav-body-list-item-spacing-vertical: 2px; + --token-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-side-nav-body-list-item-border-radius: 5px; + --token-side-nav-color-foreground-primary: #dedfe3; + --token-side-nav-color-foreground-strong: #ffffff; + --token-side-nav-color-foreground-faint: #8c909c; + --token-side-nav-color-surface-primary: #0c0c0e; + --token-side-nav-color-surface-interactive-hover: #3b3d45; + --token-side-nav-color-surface-interactive-active: #656a76; + --token-tabs-tab-height-medium: 36px; + --token-tabs-tab-height-large: 48px; + --token-tabs-tab-padding-horizontal-medium: 12px; + --token-tabs-tab-padding-horizontal-large: 20px; + --token-tabs-tab-padding-vertical: 0px; + --token-tabs-tab-border-radius: 5px; + --token-tabs-tab-focus-inset: 6px; + --token-tabs-tab-gutter: 6px; + --token-tabs-indicator-height: 3px; + --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-transition-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); + --token-typography-font-stack-display: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-font-stack-text: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-font-stack-code: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace, Consolas, monospace; + --token-typography-display-500-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, 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-400-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, 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-300-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, 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-200-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, 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-100-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, 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-body-300-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, 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 */ + --token-typography-body-200-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.4286; /** 20px */ + --token-typography-body-100-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, 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: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace, 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: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace, 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: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace, Consolas, monospace; + --token-typography-code-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.25; /** 20px */ +} 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..7d64c22dd81 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g0/themed-tokens.css @@ -0,0 +1,12 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-primary: #161616; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 600; +} 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..68a70888748 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g10/common-tokens.css @@ -0,0 +1,385 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-border-radius-x-small: 3px; + --token-border-radius-small: 5px; + --token-border-radius-medium: 6px; + --token-border-radius-large: 8px; + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-green-500: #054220; + --token-color-palette-green-400: #006619; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-400: #940004; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-50: #fff5f5; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-300: #c2c5cb; + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-100: #656a761a; + --token-color-border-primary: #656a7633; + --token-color-border-faint: #656a761a; + --token-color-border-strong: #3b3d4566; + --token-color-border-action: #cce3fe; + --token-color-border-highlight: #ead2fe; + --token-color-border-success: #cceeda; + --token-color-border-warning: #fbeabf; + --token-color-border-critical: #fbd4d4; + --token-color-focus-action-internal: #0c56e9; + --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-critical-internal: #c00005; + --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-foreground-strong: #0c0c0e; + --token-color-foreground-faint: #656a76; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: #8c909c; + --token-color-foreground-action: #1060ff; + --token-color-foreground-action-hover: #0c56e9; + --token-color-foreground-action-active: #0046d1; + --token-color-foreground-highlight: #a737ff; + --token-color-foreground-highlight-on-surface: #911ced; + --token-color-foreground-highlight-high-contrast: #42215b; + --token-color-foreground-success: #008a22; + --token-color-foreground-success-on-surface: #00781e; + --token-color-foreground-success-high-contrast: #054220; + --token-color-foreground-warning: #bb5a00; + --token-color-foreground-warning-on-surface: #9e4b00; + --token-color-foreground-warning-high-contrast: #542800; + --token-color-foreground-critical: #e52228; + --token-color-foreground-critical-on-surface: #c00005; + --token-color-foreground-critical-high-contrast: #51130a; + --token-color-page-primary: #ffffff; + --token-color-page-faint: #fafafa; + --token-color-surface-primary: #ffffff; + --token-color-surface-faint: #fafafa; + --token-color-surface-strong: #f1f2f3; + --token-color-surface-interactive: #ffffff; + --token-color-surface-interactive-hover: #f1f2f3; + --token-color-surface-interactive-active: #dedfe3; + --token-color-surface-interactive-disabled: #fafafa; + --token-color-surface-action: #f2f8ff; + --token-color-surface-highlight: #f9f2ff; + --token-color-surface-success: #f2fbf6; + --token-color-surface-warning: #fff9e8; + --token-color-surface-critical: #fff5f5; + --token-color-hashicorp-brand: #000000; + --token-color-boundary-brand: #f24c53; + --token-color-boundary-foreground: #cf2d32; + --token-color-boundary-surface: #ffecec; + --token-color-boundary-border: #fbd7d8; + --token-color-boundary-gradient-primary-start: #f97076; + --token-color-boundary-gradient-primary-stop: #db363b; + --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-consul-brand: #e03875; + --token-color-consul-foreground: #d01c5b; + --token-color-consul-surface: #ffe9f1; + --token-color-consul-border: #ffcede; + --token-color-consul-gradient-primary-start: #ff99be; + --token-color-consul-gradient-primary-stop: #da306e; + --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-hcp-brand: #000000; + --token-color-nomad-brand: #06d092; + --token-color-nomad-foreground: #008661; + --token-color-nomad-surface: #d3fdeb; + --token-color-nomad-border: #bff3dd; + --token-color-nomad-gradient-primary-start: #bff3dd; + --token-color-nomad-gradient-primary-stop: #60dea9; + --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-packer-brand: #02a8ef; + --token-color-packer-foreground: #007eb4; + --token-color-packer-surface: #d4f2ff; + --token-color-packer-border: #b4e4ff; + --token-color-packer-gradient-primary-start: #b4e4ff; + --token-color-packer-gradient-primary-stop: #63d0ff; + --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-terraform-brand: #7b42bc; + --token-color-terraform-brand-on-dark: #a067da; /** this is an alternative brand color meant to be used on dark backgrounds */ + --token-color-terraform-foreground: #773cb4; + --token-color-terraform-surface: #f4ecff; + --token-color-terraform-border: #ebdbfc; + --token-color-terraform-gradient-primary-start: #bb8deb; + --token-color-terraform-gradient-primary-stop: #844fba; + --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-vagrant-brand: #1868f2; + --token-color-vagrant-foreground: #1c61d8; + --token-color-vagrant-surface: #d6ebff; + --token-color-vagrant-border: #c7dbfc; + --token-color-vagrant-gradient-primary-start: #639cff; + --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-foreground: #9a6f00; + --token-color-vault-radar-surface: #fff9cf; + --token-color-vault-radar-border: #feec7b; + --token-color-vault-radar-gradient-primary-start: #feec7b; + --token-color-vault-radar-gradient-primary-stop: #ffe543; + --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-secrets-brand: #ffcf25; + --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-color-vault-secrets-foreground: #9a6f00; + --token-color-vault-secrets-surface: #fff9cf; + --token-color-vault-secrets-border: #feec7b; + --token-color-vault-secrets-gradient-primary-start: #feec7b; + --token-color-vault-secrets-gradient-primary-stop: #ffe543; + --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-brand: #ffcf25; + --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-foreground: #9a6f00; + --token-color-vault-surface: #fff9cf; + --token-color-vault-border: #feec7b; + --token-color-vault-gradient-primary-start: #feec7b; + --token-color-vault-gradient-primary-stop: #ffe543; + --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-waypoint-brand: #14c6cb; + --token-color-waypoint-foreground: #008196; + --token-color-waypoint-surface: #e0fcff; + --token-color-waypoint-border: #cbf1f3; + --token-color-waypoint-gradient-primary-start: #cbf1f3; + --token-color-waypoint-gradient-primary-stop: #62d4dc; + --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-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-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-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; + --token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a; + --token-surface-base-box-shadow: 0 0 0 1px #656a7633; + --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-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-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-header-height: 60px; + --token-app-header-home-link-size: 36px; + --token-app-header-logo-size: 28px; + --token-app-side-nav-wrapper-border-width: 1px; + --token-app-side-nav-wrapper-border-color: var(--token-color-palette-neutral-200); + --token-app-side-nav-wrapper-padding-horizontal: 16px; + --token-app-side-nav-wrapper-padding-vertical: 16px; + --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-app-side-nav-toggle-button-border-radius: 5px; + --token-app-side-nav-header-home-link-padding: 4px; + --token-app-side-nav-header-home-link-logo-size: 48px; + --token-app-side-nav-header-home-link-logo-size-minimized: 32px; + --token-app-side-nav-header-actions-spacing: 8px; + --token-app-side-nav-body-list-margin-vertical: 24px; + --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-item-content-spacing-horizontal: 8px; + --token-app-side-nav-body-list-item-border-radius: 5px; + --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-foreground-faint: var(--token-color-foreground-faint); + --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-form-label-color: #0c0c0e; + --token-form-legend-color: #0c0c0e; + --token-form-helper-text-color: #656a76; + --token-form-indicator-optional-color: #656a76; + --token-form-error-color: #c00005; + --token-form-error-icon-size: 14px; + --token-form-checkbox-size: 16px; + --token-form-checkbox-border-radius: 3px; + --token-form-checkbox-border-width: 1px; + --token-form-checkbox-background-image-size: 12px; + --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-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-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-control-base-foreground-value-color: #0c0c0e; + --token-form-control-base-foreground-placeholder-color: #656a76; + --token-form-control-base-surface-color-default: #ffffff; + --token-form-control-base-surface-color-hover: #f1f2f3; + --token-form-control-base-border-color-default: #8c909c; + --token-form-control-base-border-color-hover: #656a76; + --token-form-control-checked-foreground-color: #ffffff; + --token-form-control-checked-surface-color-default: #1060ff; + --token-form-control-checked-surface-color-hover: #0c56e9; + --token-form-control-checked-border-color-default: #0c56e9; + --token-form-control-checked-border-color-hover: #0046d1; + --token-form-control-invalid-border-color-default: #c00005; + --token-form-control-invalid-border-color-hover: #940004; + --token-form-control-readonly-foreground-color: #161616; + --token-form-control-readonly-surface-color: #f1f2f3; + --token-form-control-readonly-border-color: #656a761a; + --token-form-control-disabled-foreground-color: #8c909c; + --token-form-control-disabled-surface-color: #fafafa; + --token-form-control-disabled-border-color: #656a7633; + --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-border-radius: 5px; + --token-form-control-border-width: 1px; + --token-form-radio-size: 16px; + --token-form-radio-border-width: 1px; + --token-form-radio-background-image-size: 12px; + --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-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-radiocard-group-gap: 16px; + --token-form-radiocard-border-width: 1px; + --token-form-radiocard-border-radius: 6px; + --token-form-radiocard-content-padding: 24px; + --token-form-radiocard-control-padding: 8px; + --token-form-radiocard-transition-duration: 0.2s; + --token-form-select-background-image-size: 16px; + --token-form-select-background-image-position-right-x: 7px; + --token-form-select-background-image-position-top-y: 9px; + --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-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-text-input-background-image-size: 16px; + --token-form-text-input-background-image-position-x: 7px; + --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-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-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-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-toggle-width: 32px; + --token-form-toggle-height: 16px; + --token-form-toggle-base-surface-color-default: #f1f2f3; /** 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-background-image-size: 12px; + --token-form-toggle-background-image-position-x: 2px; + --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-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-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-pagination-nav-control-height: 36px; + --token-pagination-nav-control-padding-horizontal: 12px; + --token-pagination-nav-control-focus-inset: 4px; + --token-pagination-nav-control-icon-spacing: 6px; + --token-pagination-nav-indicator-height: 2px; + --token-pagination-nav-indicator-spacing: 6px; + --token-pagination-child-spacing-vertical: 8px; + --token-pagination-child-spacing-horizontal: 20px; + --token-side-nav-wrapper-border-width: 1px; + --token-side-nav-wrapper-border-color: #656a76; + --token-side-nav-wrapper-padding-horizontal: 16px; + --token-side-nav-wrapper-padding-vertical: 16px; + --token-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-side-nav-toggle-button-border-radius: 5px; + --token-side-nav-header-home-link-padding: 4px; + --token-side-nav-header-home-link-logo-size: 48px; + --token-side-nav-header-home-link-logo-size-minimized: 32px; + --token-side-nav-header-actions-spacing: 8px; + --token-side-nav-body-list-margin-vertical: 24px; + --token-side-nav-body-list-item-height: 36px; + --token-side-nav-body-list-item-padding-horizontal: 8px; + --token-side-nav-body-list-item-padding-vertical: 4px; + --token-side-nav-body-list-item-spacing-vertical: 2px; + --token-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-side-nav-body-list-item-border-radius: 5px; + --token-side-nav-color-foreground-primary: #dedfe3; + --token-side-nav-color-foreground-strong: #ffffff; + --token-side-nav-color-foreground-faint: #8c909c; + --token-side-nav-color-surface-primary: #0c0c0e; + --token-side-nav-color-surface-interactive-hover: #3b3d45; + --token-side-nav-color-surface-interactive-active: #656a76; + --token-tabs-tab-height-medium: 36px; + --token-tabs-tab-height-large: 48px; + --token-tabs-tab-padding-horizontal-medium: 12px; + --token-tabs-tab-padding-horizontal-large: 20px; + --token-tabs-tab-padding-vertical: 0px; + --token-tabs-tab-border-radius: 5px; + --token-tabs-tab-focus-inset: 6px; + --token-tabs-tab-gutter: 6px; + --token-tabs-indicator-height: 3px; + --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-transition-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); + --token-typography-font-stack-display: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-font-stack-text: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-font-stack-code: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace, Consolas, monospace; + --token-typography-display-500-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, 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-400-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, 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-300-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, 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-200-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, 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-100-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, 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-body-300-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, 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 */ + --token-typography-body-200-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.4286; /** 20px */ + --token-typography-body-100-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, 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: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace, 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: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace, 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: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace, Consolas, monospace; + --token-typography-code-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.25; /** 20px */ +} 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..7d64c22dd81 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g10/themed-tokens.css @@ -0,0 +1,12 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-primary: #161616; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 600; +} 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..30bc0f275e4 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g100/common-tokens.css @@ -0,0 +1,385 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-border-radius-x-small: 3px; + --token-border-radius-small: 5px; + --token-border-radius-medium: 6px; + --token-border-radius-large: 8px; + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-green-500: #054220; + --token-color-palette-green-400: #006619; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-400: #940004; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-50: #fff5f5; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-300: #c2c5cb; + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-100: #656a761a; + --token-color-border-primary: #656a7633; + --token-color-border-faint: #656a761a; + --token-color-border-strong: #3b3d4566; + --token-color-border-action: #cce3fe; + --token-color-border-highlight: #ead2fe; + --token-color-border-success: #cceeda; + --token-color-border-warning: #fbeabf; + --token-color-border-critical: #fbd4d4; + --token-color-focus-action-internal: #0c56e9; + --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-critical-internal: #c00005; + --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-foreground-strong: #0c0c0e; + --token-color-foreground-faint: #656a76; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: #8c909c; + --token-color-foreground-action: #1060ff; + --token-color-foreground-action-hover: #0c56e9; + --token-color-foreground-action-active: #0046d1; + --token-color-foreground-highlight: #a737ff; + --token-color-foreground-highlight-on-surface: #911ced; + --token-color-foreground-highlight-high-contrast: #42215b; + --token-color-foreground-success: #008a22; + --token-color-foreground-success-on-surface: #00781e; + --token-color-foreground-success-high-contrast: #054220; + --token-color-foreground-warning: #bb5a00; + --token-color-foreground-warning-on-surface: #9e4b00; + --token-color-foreground-warning-high-contrast: #542800; + --token-color-foreground-critical: #e52228; + --token-color-foreground-critical-on-surface: #c00005; + --token-color-foreground-critical-high-contrast: #51130a; + --token-color-page-primary: #ffffff; + --token-color-page-faint: #fafafa; + --token-color-surface-primary: #ffffff; + --token-color-surface-faint: #fafafa; + --token-color-surface-strong: #f1f2f3; + --token-color-surface-interactive: #ffffff; + --token-color-surface-interactive-hover: #f1f2f3; + --token-color-surface-interactive-active: #dedfe3; + --token-color-surface-interactive-disabled: #fafafa; + --token-color-surface-action: #f2f8ff; + --token-color-surface-highlight: #f9f2ff; + --token-color-surface-success: #f2fbf6; + --token-color-surface-warning: #fff9e8; + --token-color-surface-critical: #fff5f5; + --token-color-hashicorp-brand: #000000; + --token-color-boundary-brand: #f24c53; + --token-color-boundary-foreground: #cf2d32; + --token-color-boundary-surface: #ffecec; + --token-color-boundary-border: #fbd7d8; + --token-color-boundary-gradient-primary-start: #f97076; + --token-color-boundary-gradient-primary-stop: #db363b; + --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-consul-brand: #e03875; + --token-color-consul-foreground: #d01c5b; + --token-color-consul-surface: #ffe9f1; + --token-color-consul-border: #ffcede; + --token-color-consul-gradient-primary-start: #ff99be; + --token-color-consul-gradient-primary-stop: #da306e; + --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-hcp-brand: #000000; + --token-color-nomad-brand: #06d092; + --token-color-nomad-foreground: #008661; + --token-color-nomad-surface: #d3fdeb; + --token-color-nomad-border: #bff3dd; + --token-color-nomad-gradient-primary-start: #bff3dd; + --token-color-nomad-gradient-primary-stop: #60dea9; + --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-packer-brand: #02a8ef; + --token-color-packer-foreground: #007eb4; + --token-color-packer-surface: #d4f2ff; + --token-color-packer-border: #b4e4ff; + --token-color-packer-gradient-primary-start: #b4e4ff; + --token-color-packer-gradient-primary-stop: #63d0ff; + --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-terraform-brand: #7b42bc; + --token-color-terraform-brand-on-dark: #a067da; /** this is an alternative brand color meant to be used on dark backgrounds */ + --token-color-terraform-foreground: #773cb4; + --token-color-terraform-surface: #f4ecff; + --token-color-terraform-border: #ebdbfc; + --token-color-terraform-gradient-primary-start: #bb8deb; + --token-color-terraform-gradient-primary-stop: #844fba; + --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-vagrant-brand: #1868f2; + --token-color-vagrant-foreground: #1c61d8; + --token-color-vagrant-surface: #d6ebff; + --token-color-vagrant-border: #c7dbfc; + --token-color-vagrant-gradient-primary-start: #639cff; + --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-foreground: #9a6f00; + --token-color-vault-radar-surface: #fff9cf; + --token-color-vault-radar-border: #feec7b; + --token-color-vault-radar-gradient-primary-start: #feec7b; + --token-color-vault-radar-gradient-primary-stop: #ffe543; + --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-secrets-brand: #ffcf25; + --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-color-vault-secrets-foreground: #9a6f00; + --token-color-vault-secrets-surface: #fff9cf; + --token-color-vault-secrets-border: #feec7b; + --token-color-vault-secrets-gradient-primary-start: #feec7b; + --token-color-vault-secrets-gradient-primary-stop: #ffe543; + --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-brand: #ffcf25; + --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-foreground: #9a6f00; + --token-color-vault-surface: #fff9cf; + --token-color-vault-border: #feec7b; + --token-color-vault-gradient-primary-start: #feec7b; + --token-color-vault-gradient-primary-stop: #ffe543; + --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-waypoint-brand: #14c6cb; + --token-color-waypoint-foreground: #008196; + --token-color-waypoint-surface: #e0fcff; + --token-color-waypoint-border: #cbf1f3; + --token-color-waypoint-gradient-primary-start: #cbf1f3; + --token-color-waypoint-gradient-primary-stop: #62d4dc; + --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-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-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-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; + --token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a; + --token-surface-base-box-shadow: 0 0 0 1px #656a7633; + --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-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-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-header-height: 60px; + --token-app-header-home-link-size: 36px; + --token-app-header-logo-size: 28px; + --token-app-side-nav-wrapper-border-width: 1px; + --token-app-side-nav-wrapper-border-color: var(--token-color-palette-neutral-200); + --token-app-side-nav-wrapper-padding-horizontal: 16px; + --token-app-side-nav-wrapper-padding-vertical: 16px; + --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-app-side-nav-toggle-button-border-radius: 5px; + --token-app-side-nav-header-home-link-padding: 4px; + --token-app-side-nav-header-home-link-logo-size: 48px; + --token-app-side-nav-header-home-link-logo-size-minimized: 32px; + --token-app-side-nav-header-actions-spacing: 8px; + --token-app-side-nav-body-list-margin-vertical: 24px; + --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-item-content-spacing-horizontal: 8px; + --token-app-side-nav-body-list-item-border-radius: 5px; + --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-foreground-faint: var(--token-color-foreground-faint); + --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-form-label-color: #0c0c0e; + --token-form-legend-color: #0c0c0e; + --token-form-helper-text-color: #656a76; + --token-form-indicator-optional-color: #656a76; + --token-form-error-color: #c00005; + --token-form-error-icon-size: 14px; + --token-form-checkbox-size: 16px; + --token-form-checkbox-border-radius: 3px; + --token-form-checkbox-border-width: 1px; + --token-form-checkbox-background-image-size: 12px; + --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-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-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-control-base-foreground-value-color: #0c0c0e; + --token-form-control-base-foreground-placeholder-color: #656a76; + --token-form-control-base-surface-color-default: #ffffff; + --token-form-control-base-surface-color-hover: #f1f2f3; + --token-form-control-base-border-color-default: #8c909c; + --token-form-control-base-border-color-hover: #656a76; + --token-form-control-checked-foreground-color: #ffffff; + --token-form-control-checked-surface-color-default: #1060ff; + --token-form-control-checked-surface-color-hover: #0c56e9; + --token-form-control-checked-border-color-default: #0c56e9; + --token-form-control-checked-border-color-hover: #0046d1; + --token-form-control-invalid-border-color-default: #c00005; + --token-form-control-invalid-border-color-hover: #940004; + --token-form-control-readonly-foreground-color: #f4f4f4; + --token-form-control-readonly-surface-color: #f1f2f3; + --token-form-control-readonly-border-color: #656a761a; + --token-form-control-disabled-foreground-color: #8c909c; + --token-form-control-disabled-surface-color: #fafafa; + --token-form-control-disabled-border-color: #656a7633; + --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-border-radius: 5px; + --token-form-control-border-width: 1px; + --token-form-radio-size: 16px; + --token-form-radio-border-width: 1px; + --token-form-radio-background-image-size: 12px; + --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-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-radiocard-group-gap: 16px; + --token-form-radiocard-border-width: 1px; + --token-form-radiocard-border-radius: 6px; + --token-form-radiocard-content-padding: 24px; + --token-form-radiocard-control-padding: 8px; + --token-form-radiocard-transition-duration: 0.2s; + --token-form-select-background-image-size: 16px; + --token-form-select-background-image-position-right-x: 7px; + --token-form-select-background-image-position-top-y: 9px; + --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-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-text-input-background-image-size: 16px; + --token-form-text-input-background-image-position-x: 7px; + --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-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-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-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-toggle-width: 32px; + --token-form-toggle-height: 16px; + --token-form-toggle-base-surface-color-default: #f1f2f3; /** 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-background-image-size: 12px; + --token-form-toggle-background-image-position-x: 2px; + --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-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-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-pagination-nav-control-height: 36px; + --token-pagination-nav-control-padding-horizontal: 12px; + --token-pagination-nav-control-focus-inset: 4px; + --token-pagination-nav-control-icon-spacing: 6px; + --token-pagination-nav-indicator-height: 2px; + --token-pagination-nav-indicator-spacing: 6px; + --token-pagination-child-spacing-vertical: 8px; + --token-pagination-child-spacing-horizontal: 20px; + --token-side-nav-wrapper-border-width: 1px; + --token-side-nav-wrapper-border-color: #656a76; + --token-side-nav-wrapper-padding-horizontal: 16px; + --token-side-nav-wrapper-padding-vertical: 16px; + --token-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-side-nav-toggle-button-border-radius: 5px; + --token-side-nav-header-home-link-padding: 4px; + --token-side-nav-header-home-link-logo-size: 48px; + --token-side-nav-header-home-link-logo-size-minimized: 32px; + --token-side-nav-header-actions-spacing: 8px; + --token-side-nav-body-list-margin-vertical: 24px; + --token-side-nav-body-list-item-height: 36px; + --token-side-nav-body-list-item-padding-horizontal: 8px; + --token-side-nav-body-list-item-padding-vertical: 4px; + --token-side-nav-body-list-item-spacing-vertical: 2px; + --token-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-side-nav-body-list-item-border-radius: 5px; + --token-side-nav-color-foreground-primary: #dedfe3; + --token-side-nav-color-foreground-strong: #ffffff; + --token-side-nav-color-foreground-faint: #8c909c; + --token-side-nav-color-surface-primary: #0c0c0e; + --token-side-nav-color-surface-interactive-hover: #3b3d45; + --token-side-nav-color-surface-interactive-active: #656a76; + --token-tabs-tab-height-medium: 36px; + --token-tabs-tab-height-large: 48px; + --token-tabs-tab-padding-horizontal-medium: 12px; + --token-tabs-tab-padding-horizontal-large: 20px; + --token-tabs-tab-padding-vertical: 0px; + --token-tabs-tab-border-radius: 5px; + --token-tabs-tab-focus-inset: 6px; + --token-tabs-tab-gutter: 6px; + --token-tabs-indicator-height: 3px; + --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-transition-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); + --token-typography-font-stack-display: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-font-stack-text: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-font-stack-code: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace, Consolas, monospace; + --token-typography-display-500-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, 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-400-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, 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-300-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, 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-200-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, 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-100-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, 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-body-300-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, 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 */ + --token-typography-body-200-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.4286; /** 20px */ + --token-typography-body-100-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, 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: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace, 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: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace, 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: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace, Consolas, monospace; + --token-typography-code-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.25; /** 20px */ +} 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..37475826396 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g100/themed-tokens.css @@ -0,0 +1,12 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-primary: #f4f4f4; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 600; +} 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..30bc0f275e4 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g90/common-tokens.css @@ -0,0 +1,385 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-border-radius-x-small: 3px; + --token-border-radius-small: 5px; + --token-border-radius-medium: 6px; + --token-border-radius-large: 8px; + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-green-500: #054220; + --token-color-palette-green-400: #006619; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-400: #940004; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-50: #fff5f5; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-300: #c2c5cb; + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-100: #656a761a; + --token-color-border-primary: #656a7633; + --token-color-border-faint: #656a761a; + --token-color-border-strong: #3b3d4566; + --token-color-border-action: #cce3fe; + --token-color-border-highlight: #ead2fe; + --token-color-border-success: #cceeda; + --token-color-border-warning: #fbeabf; + --token-color-border-critical: #fbd4d4; + --token-color-focus-action-internal: #0c56e9; + --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-critical-internal: #c00005; + --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-foreground-strong: #0c0c0e; + --token-color-foreground-faint: #656a76; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: #8c909c; + --token-color-foreground-action: #1060ff; + --token-color-foreground-action-hover: #0c56e9; + --token-color-foreground-action-active: #0046d1; + --token-color-foreground-highlight: #a737ff; + --token-color-foreground-highlight-on-surface: #911ced; + --token-color-foreground-highlight-high-contrast: #42215b; + --token-color-foreground-success: #008a22; + --token-color-foreground-success-on-surface: #00781e; + --token-color-foreground-success-high-contrast: #054220; + --token-color-foreground-warning: #bb5a00; + --token-color-foreground-warning-on-surface: #9e4b00; + --token-color-foreground-warning-high-contrast: #542800; + --token-color-foreground-critical: #e52228; + --token-color-foreground-critical-on-surface: #c00005; + --token-color-foreground-critical-high-contrast: #51130a; + --token-color-page-primary: #ffffff; + --token-color-page-faint: #fafafa; + --token-color-surface-primary: #ffffff; + --token-color-surface-faint: #fafafa; + --token-color-surface-strong: #f1f2f3; + --token-color-surface-interactive: #ffffff; + --token-color-surface-interactive-hover: #f1f2f3; + --token-color-surface-interactive-active: #dedfe3; + --token-color-surface-interactive-disabled: #fafafa; + --token-color-surface-action: #f2f8ff; + --token-color-surface-highlight: #f9f2ff; + --token-color-surface-success: #f2fbf6; + --token-color-surface-warning: #fff9e8; + --token-color-surface-critical: #fff5f5; + --token-color-hashicorp-brand: #000000; + --token-color-boundary-brand: #f24c53; + --token-color-boundary-foreground: #cf2d32; + --token-color-boundary-surface: #ffecec; + --token-color-boundary-border: #fbd7d8; + --token-color-boundary-gradient-primary-start: #f97076; + --token-color-boundary-gradient-primary-stop: #db363b; + --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-consul-brand: #e03875; + --token-color-consul-foreground: #d01c5b; + --token-color-consul-surface: #ffe9f1; + --token-color-consul-border: #ffcede; + --token-color-consul-gradient-primary-start: #ff99be; + --token-color-consul-gradient-primary-stop: #da306e; + --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-hcp-brand: #000000; + --token-color-nomad-brand: #06d092; + --token-color-nomad-foreground: #008661; + --token-color-nomad-surface: #d3fdeb; + --token-color-nomad-border: #bff3dd; + --token-color-nomad-gradient-primary-start: #bff3dd; + --token-color-nomad-gradient-primary-stop: #60dea9; + --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-packer-brand: #02a8ef; + --token-color-packer-foreground: #007eb4; + --token-color-packer-surface: #d4f2ff; + --token-color-packer-border: #b4e4ff; + --token-color-packer-gradient-primary-start: #b4e4ff; + --token-color-packer-gradient-primary-stop: #63d0ff; + --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-terraform-brand: #7b42bc; + --token-color-terraform-brand-on-dark: #a067da; /** this is an alternative brand color meant to be used on dark backgrounds */ + --token-color-terraform-foreground: #773cb4; + --token-color-terraform-surface: #f4ecff; + --token-color-terraform-border: #ebdbfc; + --token-color-terraform-gradient-primary-start: #bb8deb; + --token-color-terraform-gradient-primary-stop: #844fba; + --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-vagrant-brand: #1868f2; + --token-color-vagrant-foreground: #1c61d8; + --token-color-vagrant-surface: #d6ebff; + --token-color-vagrant-border: #c7dbfc; + --token-color-vagrant-gradient-primary-start: #639cff; + --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-foreground: #9a6f00; + --token-color-vault-radar-surface: #fff9cf; + --token-color-vault-radar-border: #feec7b; + --token-color-vault-radar-gradient-primary-start: #feec7b; + --token-color-vault-radar-gradient-primary-stop: #ffe543; + --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-secrets-brand: #ffcf25; + --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-color-vault-secrets-foreground: #9a6f00; + --token-color-vault-secrets-surface: #fff9cf; + --token-color-vault-secrets-border: #feec7b; + --token-color-vault-secrets-gradient-primary-start: #feec7b; + --token-color-vault-secrets-gradient-primary-stop: #ffe543; + --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-brand: #ffcf25; + --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-foreground: #9a6f00; + --token-color-vault-surface: #fff9cf; + --token-color-vault-border: #feec7b; + --token-color-vault-gradient-primary-start: #feec7b; + --token-color-vault-gradient-primary-stop: #ffe543; + --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-waypoint-brand: #14c6cb; + --token-color-waypoint-foreground: #008196; + --token-color-waypoint-surface: #e0fcff; + --token-color-waypoint-border: #cbf1f3; + --token-color-waypoint-gradient-primary-start: #cbf1f3; + --token-color-waypoint-gradient-primary-stop: #62d4dc; + --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-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-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-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; + --token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a; + --token-surface-base-box-shadow: 0 0 0 1px #656a7633; + --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-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-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-header-height: 60px; + --token-app-header-home-link-size: 36px; + --token-app-header-logo-size: 28px; + --token-app-side-nav-wrapper-border-width: 1px; + --token-app-side-nav-wrapper-border-color: var(--token-color-palette-neutral-200); + --token-app-side-nav-wrapper-padding-horizontal: 16px; + --token-app-side-nav-wrapper-padding-vertical: 16px; + --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-app-side-nav-toggle-button-border-radius: 5px; + --token-app-side-nav-header-home-link-padding: 4px; + --token-app-side-nav-header-home-link-logo-size: 48px; + --token-app-side-nav-header-home-link-logo-size-minimized: 32px; + --token-app-side-nav-header-actions-spacing: 8px; + --token-app-side-nav-body-list-margin-vertical: 24px; + --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-item-content-spacing-horizontal: 8px; + --token-app-side-nav-body-list-item-border-radius: 5px; + --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-foreground-faint: var(--token-color-foreground-faint); + --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-form-label-color: #0c0c0e; + --token-form-legend-color: #0c0c0e; + --token-form-helper-text-color: #656a76; + --token-form-indicator-optional-color: #656a76; + --token-form-error-color: #c00005; + --token-form-error-icon-size: 14px; + --token-form-checkbox-size: 16px; + --token-form-checkbox-border-radius: 3px; + --token-form-checkbox-border-width: 1px; + --token-form-checkbox-background-image-size: 12px; + --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-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-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-control-base-foreground-value-color: #0c0c0e; + --token-form-control-base-foreground-placeholder-color: #656a76; + --token-form-control-base-surface-color-default: #ffffff; + --token-form-control-base-surface-color-hover: #f1f2f3; + --token-form-control-base-border-color-default: #8c909c; + --token-form-control-base-border-color-hover: #656a76; + --token-form-control-checked-foreground-color: #ffffff; + --token-form-control-checked-surface-color-default: #1060ff; + --token-form-control-checked-surface-color-hover: #0c56e9; + --token-form-control-checked-border-color-default: #0c56e9; + --token-form-control-checked-border-color-hover: #0046d1; + --token-form-control-invalid-border-color-default: #c00005; + --token-form-control-invalid-border-color-hover: #940004; + --token-form-control-readonly-foreground-color: #f4f4f4; + --token-form-control-readonly-surface-color: #f1f2f3; + --token-form-control-readonly-border-color: #656a761a; + --token-form-control-disabled-foreground-color: #8c909c; + --token-form-control-disabled-surface-color: #fafafa; + --token-form-control-disabled-border-color: #656a7633; + --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-border-radius: 5px; + --token-form-control-border-width: 1px; + --token-form-radio-size: 16px; + --token-form-radio-border-width: 1px; + --token-form-radio-background-image-size: 12px; + --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-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-radiocard-group-gap: 16px; + --token-form-radiocard-border-width: 1px; + --token-form-radiocard-border-radius: 6px; + --token-form-radiocard-content-padding: 24px; + --token-form-radiocard-control-padding: 8px; + --token-form-radiocard-transition-duration: 0.2s; + --token-form-select-background-image-size: 16px; + --token-form-select-background-image-position-right-x: 7px; + --token-form-select-background-image-position-top-y: 9px; + --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-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-text-input-background-image-size: 16px; + --token-form-text-input-background-image-position-x: 7px; + --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-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-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-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-toggle-width: 32px; + --token-form-toggle-height: 16px; + --token-form-toggle-base-surface-color-default: #f1f2f3; /** 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-background-image-size: 12px; + --token-form-toggle-background-image-position-x: 2px; + --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-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-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-pagination-nav-control-height: 36px; + --token-pagination-nav-control-padding-horizontal: 12px; + --token-pagination-nav-control-focus-inset: 4px; + --token-pagination-nav-control-icon-spacing: 6px; + --token-pagination-nav-indicator-height: 2px; + --token-pagination-nav-indicator-spacing: 6px; + --token-pagination-child-spacing-vertical: 8px; + --token-pagination-child-spacing-horizontal: 20px; + --token-side-nav-wrapper-border-width: 1px; + --token-side-nav-wrapper-border-color: #656a76; + --token-side-nav-wrapper-padding-horizontal: 16px; + --token-side-nav-wrapper-padding-vertical: 16px; + --token-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-side-nav-toggle-button-border-radius: 5px; + --token-side-nav-header-home-link-padding: 4px; + --token-side-nav-header-home-link-logo-size: 48px; + --token-side-nav-header-home-link-logo-size-minimized: 32px; + --token-side-nav-header-actions-spacing: 8px; + --token-side-nav-body-list-margin-vertical: 24px; + --token-side-nav-body-list-item-height: 36px; + --token-side-nav-body-list-item-padding-horizontal: 8px; + --token-side-nav-body-list-item-padding-vertical: 4px; + --token-side-nav-body-list-item-spacing-vertical: 2px; + --token-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-side-nav-body-list-item-border-radius: 5px; + --token-side-nav-color-foreground-primary: #dedfe3; + --token-side-nav-color-foreground-strong: #ffffff; + --token-side-nav-color-foreground-faint: #8c909c; + --token-side-nav-color-surface-primary: #0c0c0e; + --token-side-nav-color-surface-interactive-hover: #3b3d45; + --token-side-nav-color-surface-interactive-active: #656a76; + --token-tabs-tab-height-medium: 36px; + --token-tabs-tab-height-large: 48px; + --token-tabs-tab-padding-horizontal-medium: 12px; + --token-tabs-tab-padding-horizontal-large: 20px; + --token-tabs-tab-padding-vertical: 0px; + --token-tabs-tab-border-radius: 5px; + --token-tabs-tab-focus-inset: 6px; + --token-tabs-tab-gutter: 6px; + --token-tabs-indicator-height: 3px; + --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-transition-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); + --token-typography-font-stack-display: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-font-stack-text: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-font-stack-code: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace, Consolas, monospace; + --token-typography-display-500-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, 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-400-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, 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-300-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, 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-200-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, 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-100-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, 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-body-300-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, 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 */ + --token-typography-body-200-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.4286; /** 20px */ + --token-typography-body-100-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, 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: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace, 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: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace, 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: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace, Consolas, monospace; + --token-typography-code-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.25; /** 20px */ +} 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..37475826396 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g90/themed-tokens.css @@ -0,0 +1,12 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-primary: #f4f4f4; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 600; +} diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/hds/common-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/hds/common-tokens.css index cf8f8008c44..b1d45ed0a2f 100644 --- a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/hds/common-tokens.css +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/hds/common-tokens.css @@ -3,15 +3,383 @@ */ :root { + --token-border-radius-x-small: 3px; + --token-border-radius-small: 5px; + --token-border-radius-medium: 6px; + --token-border-radius-large: 8px; + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-green-500: #054220; + --token-color-palette-green-400: #006619; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-400: #940004; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-50: #fff5f5; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-300: #c2c5cb; --token-color-palette-neutral-200: #dedfe3; --token-color-palette-neutral-100: #f1f2f3; - --token-component-a-size: 123px; - --token-color-foreground-strong: var(--token-color-palette-neutral-300); - --token-color-foreground-primary: var(--token-color-palette-neutral-200); - --token-color-foreground-high-contrast: var(--token-color-palette-neutral-0); - --token-component-a-color: var(--token-color-palette-neutral-300); - --token-component-b-color: var(--token-color-palette-neutral-200); - --token-component-b-size: var(--token-component-a-size); - --token-component-c-color: var(--token-color-foreground-high-contrast); - --token-component-d-color: var(--token-color-foreground-semantic-outlier); + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-100: #656a761a; + --token-color-border-primary: #656a7633; + --token-color-border-faint: #656a761a; + --token-color-border-strong: #3b3d4566; + --token-color-border-action: #cce3fe; + --token-color-border-highlight: #ead2fe; + --token-color-border-success: #cceeda; + --token-color-border-warning: #fbeabf; + --token-color-border-critical: #fbd4d4; + --token-color-focus-action-internal: #0c56e9; + --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-critical-internal: #c00005; + --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-foreground-strong: #0c0c0e; + --token-color-foreground-faint: #656a76; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: #8c909c; + --token-color-foreground-action: #1060ff; + --token-color-foreground-action-hover: #0c56e9; + --token-color-foreground-action-active: #0046d1; + --token-color-foreground-highlight: #a737ff; + --token-color-foreground-highlight-on-surface: #911ced; + --token-color-foreground-highlight-high-contrast: #42215b; + --token-color-foreground-success: #008a22; + --token-color-foreground-success-on-surface: #00781e; + --token-color-foreground-success-high-contrast: #054220; + --token-color-foreground-warning: #bb5a00; + --token-color-foreground-warning-on-surface: #9e4b00; + --token-color-foreground-warning-high-contrast: #542800; + --token-color-foreground-critical: #e52228; + --token-color-foreground-critical-on-surface: #c00005; + --token-color-foreground-critical-high-contrast: #51130a; + --token-color-page-primary: #ffffff; + --token-color-page-faint: #fafafa; + --token-color-surface-primary: #ffffff; + --token-color-surface-faint: #fafafa; + --token-color-surface-strong: #f1f2f3; + --token-color-surface-interactive: #ffffff; + --token-color-surface-interactive-hover: #f1f2f3; + --token-color-surface-interactive-active: #dedfe3; + --token-color-surface-interactive-disabled: #fafafa; + --token-color-surface-action: #f2f8ff; + --token-color-surface-highlight: #f9f2ff; + --token-color-surface-success: #f2fbf6; + --token-color-surface-warning: #fff9e8; + --token-color-surface-critical: #fff5f5; + --token-color-hashicorp-brand: #000000; + --token-color-boundary-brand: #f24c53; + --token-color-boundary-foreground: #cf2d32; + --token-color-boundary-surface: #ffecec; + --token-color-boundary-border: #fbd7d8; + --token-color-boundary-gradient-primary-start: #f97076; + --token-color-boundary-gradient-primary-stop: #db363b; + --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-consul-brand: #e03875; + --token-color-consul-foreground: #d01c5b; + --token-color-consul-surface: #ffe9f1; + --token-color-consul-border: #ffcede; + --token-color-consul-gradient-primary-start: #ff99be; + --token-color-consul-gradient-primary-stop: #da306e; + --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-hcp-brand: #000000; + --token-color-nomad-brand: #06d092; + --token-color-nomad-foreground: #008661; + --token-color-nomad-surface: #d3fdeb; + --token-color-nomad-border: #bff3dd; + --token-color-nomad-gradient-primary-start: #bff3dd; + --token-color-nomad-gradient-primary-stop: #60dea9; + --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-packer-brand: #02a8ef; + --token-color-packer-foreground: #007eb4; + --token-color-packer-surface: #d4f2ff; + --token-color-packer-border: #b4e4ff; + --token-color-packer-gradient-primary-start: #b4e4ff; + --token-color-packer-gradient-primary-stop: #63d0ff; + --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-terraform-brand: #7b42bc; + --token-color-terraform-brand-on-dark: #a067da; /** this is an alternative brand color meant to be used on dark backgrounds */ + --token-color-terraform-foreground: #773cb4; + --token-color-terraform-surface: #f4ecff; + --token-color-terraform-border: #ebdbfc; + --token-color-terraform-gradient-primary-start: #bb8deb; + --token-color-terraform-gradient-primary-stop: #844fba; + --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-vagrant-brand: #1868f2; + --token-color-vagrant-foreground: #1c61d8; + --token-color-vagrant-surface: #d6ebff; + --token-color-vagrant-border: #c7dbfc; + --token-color-vagrant-gradient-primary-start: #639cff; + --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-foreground: #9a6f00; + --token-color-vault-radar-surface: #fff9cf; + --token-color-vault-radar-border: #feec7b; + --token-color-vault-radar-gradient-primary-start: #feec7b; + --token-color-vault-radar-gradient-primary-stop: #ffe543; + --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-secrets-brand: #ffcf25; + --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-color-vault-secrets-foreground: #9a6f00; + --token-color-vault-secrets-surface: #fff9cf; + --token-color-vault-secrets-border: #feec7b; + --token-color-vault-secrets-gradient-primary-start: #feec7b; + --token-color-vault-secrets-gradient-primary-stop: #ffe543; + --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-brand: #ffcf25; + --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-foreground: #9a6f00; + --token-color-vault-surface: #fff9cf; + --token-color-vault-border: #feec7b; + --token-color-vault-gradient-primary-start: #feec7b; + --token-color-vault-gradient-primary-stop: #ffe543; + --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-waypoint-brand: #14c6cb; + --token-color-waypoint-foreground: #008196; + --token-color-waypoint-surface: #e0fcff; + --token-color-waypoint-border: #cbf1f3; + --token-color-waypoint-gradient-primary-start: #cbf1f3; + --token-color-waypoint-gradient-primary-stop: #62d4dc; + --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-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-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-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; + --token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a; + --token-surface-base-box-shadow: 0 0 0 1px #656a7633; + --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-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-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-header-height: 60px; + --token-app-header-home-link-size: 36px; + --token-app-header-logo-size: 28px; + --token-app-side-nav-wrapper-border-width: 1px; + --token-app-side-nav-wrapper-border-color: var(--token-color-palette-neutral-200); + --token-app-side-nav-wrapper-padding-horizontal: 16px; + --token-app-side-nav-wrapper-padding-vertical: 16px; + --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-app-side-nav-toggle-button-border-radius: 5px; + --token-app-side-nav-header-home-link-padding: 4px; + --token-app-side-nav-header-home-link-logo-size: 48px; + --token-app-side-nav-header-home-link-logo-size-minimized: 32px; + --token-app-side-nav-header-actions-spacing: 8px; + --token-app-side-nav-body-list-margin-vertical: 24px; + --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-item-content-spacing-horizontal: 8px; + --token-app-side-nav-body-list-item-border-radius: 5px; + --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-foreground-faint: var(--token-color-foreground-faint); + --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-form-label-color: #0c0c0e; + --token-form-legend-color: #0c0c0e; + --token-form-helper-text-color: #656a76; + --token-form-indicator-optional-color: #656a76; + --token-form-error-color: #c00005; + --token-form-error-icon-size: 14px; + --token-form-checkbox-size: 16px; + --token-form-checkbox-border-radius: 3px; + --token-form-checkbox-border-width: 1px; + --token-form-checkbox-background-image-size: 12px; + --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-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-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-control-base-foreground-value-color: #0c0c0e; + --token-form-control-base-foreground-placeholder-color: #656a76; + --token-form-control-base-surface-color-default: #ffffff; + --token-form-control-base-surface-color-hover: #f1f2f3; + --token-form-control-base-border-color-default: #8c909c; + --token-form-control-base-border-color-hover: #656a76; + --token-form-control-checked-foreground-color: #ffffff; + --token-form-control-checked-surface-color-default: #1060ff; + --token-form-control-checked-surface-color-hover: #0c56e9; + --token-form-control-checked-border-color-default: #0c56e9; + --token-form-control-checked-border-color-hover: #0046d1; + --token-form-control-invalid-border-color-default: #c00005; + --token-form-control-invalid-border-color-hover: #940004; + --token-form-control-readonly-foreground-color: #ffffff; + --token-form-control-readonly-surface-color: #f1f2f3; + --token-form-control-readonly-border-color: #656a761a; + --token-form-control-disabled-foreground-color: #8c909c; + --token-form-control-disabled-surface-color: #fafafa; + --token-form-control-disabled-border-color: #656a7633; + --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-border-radius: 5px; + --token-form-control-border-width: 1px; + --token-form-radio-size: 16px; + --token-form-radio-border-width: 1px; + --token-form-radio-background-image-size: 12px; + --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-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-radiocard-group-gap: 16px; + --token-form-radiocard-border-width: 1px; + --token-form-radiocard-border-radius: 6px; + --token-form-radiocard-content-padding: 24px; + --token-form-radiocard-control-padding: 8px; + --token-form-radiocard-transition-duration: 0.2s; + --token-form-select-background-image-size: 16px; + --token-form-select-background-image-position-right-x: 7px; + --token-form-select-background-image-position-top-y: 9px; + --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-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-text-input-background-image-size: 16px; + --token-form-text-input-background-image-position-x: 7px; + --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-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-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-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-toggle-width: 32px; + --token-form-toggle-height: 16px; + --token-form-toggle-base-surface-color-default: #f1f2f3; /** 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-background-image-size: 12px; + --token-form-toggle-background-image-position-x: 2px; + --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-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-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-pagination-nav-control-height: 36px; + --token-pagination-nav-control-padding-horizontal: 12px; + --token-pagination-nav-control-focus-inset: 4px; + --token-pagination-nav-control-icon-spacing: 6px; + --token-pagination-nav-indicator-height: 2px; + --token-pagination-nav-indicator-spacing: 6px; + --token-pagination-child-spacing-vertical: 8px; + --token-pagination-child-spacing-horizontal: 20px; + --token-side-nav-wrapper-border-width: 1px; + --token-side-nav-wrapper-border-color: #656a76; + --token-side-nav-wrapper-padding-horizontal: 16px; + --token-side-nav-wrapper-padding-vertical: 16px; + --token-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-side-nav-toggle-button-border-radius: 5px; + --token-side-nav-header-home-link-padding: 4px; + --token-side-nav-header-home-link-logo-size: 48px; + --token-side-nav-header-home-link-logo-size-minimized: 32px; + --token-side-nav-header-actions-spacing: 8px; + --token-side-nav-body-list-margin-vertical: 24px; + --token-side-nav-body-list-item-height: 36px; + --token-side-nav-body-list-item-padding-horizontal: 8px; + --token-side-nav-body-list-item-padding-vertical: 4px; + --token-side-nav-body-list-item-spacing-vertical: 2px; + --token-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-side-nav-body-list-item-border-radius: 5px; + --token-side-nav-color-foreground-primary: #dedfe3; + --token-side-nav-color-foreground-strong: #ffffff; + --token-side-nav-color-foreground-faint: #8c909c; + --token-side-nav-color-surface-primary: #0c0c0e; + --token-side-nav-color-surface-interactive-hover: #3b3d45; + --token-side-nav-color-surface-interactive-active: #656a76; + --token-tabs-tab-height-medium: 36px; + --token-tabs-tab-height-large: 48px; + --token-tabs-tab-padding-horizontal-medium: 12px; + --token-tabs-tab-padding-horizontal-large: 20px; + --token-tabs-tab-padding-vertical: 0px; + --token-tabs-tab-border-radius: 5px; + --token-tabs-tab-focus-inset: 6px; + --token-tabs-tab-gutter: 6px; + --token-tabs-indicator-height: 3px; + --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-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; + --token-typography-font-stack-code: ui-monospace, Menlo, Consolas, monospace; + --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-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-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-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-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-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 */ + --token-typography-body-200-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --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: 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 */ } diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/hds/themed-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/hds/themed-tokens.css index 74011dfe14a..3353619544d 100644 --- a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/hds/themed-tokens.css +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/hds/themed-tokens.css @@ -3,7 +3,10 @@ */ :root { - --token-color-palette-neutral-300: #000000; --token-color-palette-neutral-0: #ffffff; - --token-color-foreground-semantic-outlier: var(--token-color-palette-neutral-0); + --token-color-foreground-primary: #ffffff; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 500; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 700; } 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..ba028da1a2a --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-scss-mixins/tokens.css @@ -0,0 +1,506 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +@mixin hds-theme-default() { + :root { + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-primary: #ffffff; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 500; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 700; + } +} + +@mixin hds-theme-cds0() { + :root { + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-primary: #161616; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 600; + } +} + +@mixin hds-theme-cds10() { + :root { + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-primary: #161616; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 600; + } +} + +@mixin hds-theme-cds90() { + :root { + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-primary: #f4f4f4; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 600; + } +} + +@mixin hds-theme-cds100() { + :root { + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-primary: #f4f4f4; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 600; + } +} + +@mixin hds-theme-common() { + :root { + --token-border-radius-x-small: 3px; + --token-border-radius-small: 5px; + --token-border-radius-medium: 6px; + --token-border-radius-large: 8px; + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-green-500: #054220; + --token-color-palette-green-400: #006619; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-400: #940004; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-50: #fff5f5; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-300: #c2c5cb; + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-100: #656a761a; + --token-color-border-primary: #656a7633; + --token-color-border-faint: #656a761a; + --token-color-border-strong: #3b3d4566; + --token-color-border-action: #cce3fe; + --token-color-border-highlight: #ead2fe; + --token-color-border-success: #cceeda; + --token-color-border-warning: #fbeabf; + --token-color-border-critical: #fbd4d4; + --token-color-focus-action-internal: #0c56e9; + --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-critical-internal: #c00005; + --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-foreground-strong: #0c0c0e; + --token-color-foreground-faint: #656a76; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: #8c909c; + --token-color-foreground-action: #1060ff; + --token-color-foreground-action-hover: #0c56e9; + --token-color-foreground-action-active: #0046d1; + --token-color-foreground-highlight: #a737ff; + --token-color-foreground-highlight-on-surface: #911ced; + --token-color-foreground-highlight-high-contrast: #42215b; + --token-color-foreground-success: #008a22; + --token-color-foreground-success-on-surface: #00781e; + --token-color-foreground-success-high-contrast: #054220; + --token-color-foreground-warning: #bb5a00; + --token-color-foreground-warning-on-surface: #9e4b00; + --token-color-foreground-warning-high-contrast: #542800; + --token-color-foreground-critical: #e52228; + --token-color-foreground-critical-on-surface: #c00005; + --token-color-foreground-critical-high-contrast: #51130a; + --token-color-page-primary: #ffffff; + --token-color-page-faint: #fafafa; + --token-color-surface-primary: #ffffff; + --token-color-surface-faint: #fafafa; + --token-color-surface-strong: #f1f2f3; + --token-color-surface-interactive: #ffffff; + --token-color-surface-interactive-hover: #f1f2f3; + --token-color-surface-interactive-active: #dedfe3; + --token-color-surface-interactive-disabled: #fafafa; + --token-color-surface-action: #f2f8ff; + --token-color-surface-highlight: #f9f2ff; + --token-color-surface-success: #f2fbf6; + --token-color-surface-warning: #fff9e8; + --token-color-surface-critical: #fff5f5; + --token-color-hashicorp-brand: #000000; + --token-color-boundary-brand: #f24c53; + --token-color-boundary-foreground: #cf2d32; + --token-color-boundary-surface: #ffecec; + --token-color-boundary-border: #fbd7d8; + --token-color-boundary-gradient-primary-start: #f97076; + --token-color-boundary-gradient-primary-stop: #db363b; + --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-consul-brand: #e03875; + --token-color-consul-foreground: #d01c5b; + --token-color-consul-surface: #ffe9f1; + --token-color-consul-border: #ffcede; + --token-color-consul-gradient-primary-start: #ff99be; + --token-color-consul-gradient-primary-stop: #da306e; + --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-hcp-brand: #000000; + --token-color-nomad-brand: #06d092; + --token-color-nomad-foreground: #008661; + --token-color-nomad-surface: #d3fdeb; + --token-color-nomad-border: #bff3dd; + --token-color-nomad-gradient-primary-start: #bff3dd; + --token-color-nomad-gradient-primary-stop: #60dea9; + --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-packer-brand: #02a8ef; + --token-color-packer-foreground: #007eb4; + --token-color-packer-surface: #d4f2ff; + --token-color-packer-border: #b4e4ff; + --token-color-packer-gradient-primary-start: #b4e4ff; + --token-color-packer-gradient-primary-stop: #63d0ff; + --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-terraform-brand: #7b42bc; + --token-color-terraform-brand-on-dark: #a067da; /** this is an alternative brand color meant to be used on dark backgrounds */ + --token-color-terraform-foreground: #773cb4; + --token-color-terraform-surface: #f4ecff; + --token-color-terraform-border: #ebdbfc; + --token-color-terraform-gradient-primary-start: #bb8deb; + --token-color-terraform-gradient-primary-stop: #844fba; + --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-vagrant-brand: #1868f2; + --token-color-vagrant-foreground: #1c61d8; + --token-color-vagrant-surface: #d6ebff; + --token-color-vagrant-border: #c7dbfc; + --token-color-vagrant-gradient-primary-start: #639cff; + --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-foreground: #9a6f00; + --token-color-vault-radar-surface: #fff9cf; + --token-color-vault-radar-border: #feec7b; + --token-color-vault-radar-gradient-primary-start: #feec7b; + --token-color-vault-radar-gradient-primary-stop: #ffe543; + --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-secrets-brand: #ffcf25; + --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-color-vault-secrets-foreground: #9a6f00; + --token-color-vault-secrets-surface: #fff9cf; + --token-color-vault-secrets-border: #feec7b; + --token-color-vault-secrets-gradient-primary-start: #feec7b; + --token-color-vault-secrets-gradient-primary-stop: #ffe543; + --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-brand: #ffcf25; + --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-foreground: #9a6f00; + --token-color-vault-surface: #fff9cf; + --token-color-vault-border: #feec7b; + --token-color-vault-gradient-primary-start: #feec7b; + --token-color-vault-gradient-primary-stop: #ffe543; + --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-waypoint-brand: #14c6cb; + --token-color-waypoint-foreground: #008196; + --token-color-waypoint-surface: #e0fcff; + --token-color-waypoint-border: #cbf1f3; + --token-color-waypoint-gradient-primary-start: #cbf1f3; + --token-color-waypoint-gradient-primary-stop: #62d4dc; + --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-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-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-overlay-box-shadow: + 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; + --token-surface-inset-box-shadow: + inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a; + --token-surface-base-box-shadow: 0 0 0 1px #656a7633; + --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-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-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-header-height: 60px; + --token-app-header-home-link-size: 36px; + --token-app-header-logo-size: 28px; + --token-app-side-nav-wrapper-border-width: 1px; + --token-app-side-nav-wrapper-border-color: var( + --token-color-palette-neutral-200 + ); + --token-app-side-nav-wrapper-padding-horizontal: 16px; + --token-app-side-nav-wrapper-padding-vertical: 16px; + --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-app-side-nav-toggle-button-border-radius: 5px; + --token-app-side-nav-header-home-link-padding: 4px; + --token-app-side-nav-header-home-link-logo-size: 48px; + --token-app-side-nav-header-home-link-logo-size-minimized: 32px; + --token-app-side-nav-header-actions-spacing: 8px; + --token-app-side-nav-body-list-margin-vertical: 24px; + --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-item-content-spacing-horizontal: 8px; + --token-app-side-nav-body-list-item-border-radius: 5px; + --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-foreground-faint: var( + --token-color-foreground-faint + ); + --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-form-label-color: #0c0c0e; + --token-form-legend-color: #0c0c0e; + --token-form-helper-text-color: #656a76; + --token-form-indicator-optional-color: #656a76; + --token-form-error-color: #c00005; + --token-form-error-icon-size: 14px; + --token-form-checkbox-size: 16px; + --token-form-checkbox-border-radius: 3px; + --token-form-checkbox-border-width: 1px; + --token-form-checkbox-background-image-size: 12px; + --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-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-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-control-base-foreground-value-color: #0c0c0e; + --token-form-control-base-foreground-placeholder-color: #656a76; + --token-form-control-base-surface-color-default: #ffffff; + --token-form-control-base-surface-color-hover: #f1f2f3; + --token-form-control-base-border-color-default: #8c909c; + --token-form-control-base-border-color-hover: #656a76; + --token-form-control-checked-foreground-color: #ffffff; + --token-form-control-checked-surface-color-default: #1060ff; + --token-form-control-checked-surface-color-hover: #0c56e9; + --token-form-control-checked-border-color-default: #0c56e9; + --token-form-control-checked-border-color-hover: #0046d1; + --token-form-control-invalid-border-color-default: #c00005; + --token-form-control-invalid-border-color-hover: #940004; + --token-form-control-readonly-foreground-color: #ffffff; + --token-form-control-readonly-surface-color: #f1f2f3; + --token-form-control-readonly-border-color: #656a761a; + --token-form-control-disabled-foreground-color: #8c909c; + --token-form-control-disabled-surface-color: #fafafa; + --token-form-control-disabled-border-color: #656a7633; + --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-border-radius: 5px; + --token-form-control-border-width: 1px; + --token-form-radio-size: 16px; + --token-form-radio-border-width: 1px; + --token-form-radio-background-image-size: 12px; + --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-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-radiocard-group-gap: 16px; + --token-form-radiocard-border-width: 1px; + --token-form-radiocard-border-radius: 6px; + --token-form-radiocard-content-padding: 24px; + --token-form-radiocard-control-padding: 8px; + --token-form-radiocard-transition-duration: 0.2s; + --token-form-select-background-image-size: 16px; + --token-form-select-background-image-position-right-x: 7px; + --token-form-select-background-image-position-top-y: 9px; + --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-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-text-input-background-image-size: 16px; + --token-form-text-input-background-image-position-x: 7px; + --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-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-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-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-toggle-width: 32px; + --token-form-toggle-height: 16px; + --token-form-toggle-base-surface-color-default: #f1f2f3; /** 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-background-image-size: 12px; + --token-form-toggle-background-image-position-x: 2px; + --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-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-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-pagination-nav-control-height: 36px; + --token-pagination-nav-control-padding-horizontal: 12px; + --token-pagination-nav-control-focus-inset: 4px; + --token-pagination-nav-control-icon-spacing: 6px; + --token-pagination-nav-indicator-height: 2px; + --token-pagination-nav-indicator-spacing: 6px; + --token-pagination-child-spacing-vertical: 8px; + --token-pagination-child-spacing-horizontal: 20px; + --token-side-nav-wrapper-border-width: 1px; + --token-side-nav-wrapper-border-color: #656a76; + --token-side-nav-wrapper-padding-horizontal: 16px; + --token-side-nav-wrapper-padding-vertical: 16px; + --token-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-side-nav-toggle-button-border-radius: 5px; + --token-side-nav-header-home-link-padding: 4px; + --token-side-nav-header-home-link-logo-size: 48px; + --token-side-nav-header-home-link-logo-size-minimized: 32px; + --token-side-nav-header-actions-spacing: 8px; + --token-side-nav-body-list-margin-vertical: 24px; + --token-side-nav-body-list-item-height: 36px; + --token-side-nav-body-list-item-padding-horizontal: 8px; + --token-side-nav-body-list-item-padding-vertical: 4px; + --token-side-nav-body-list-item-spacing-vertical: 2px; + --token-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-side-nav-body-list-item-border-radius: 5px; + --token-side-nav-color-foreground-primary: #dedfe3; + --token-side-nav-color-foreground-strong: #ffffff; + --token-side-nav-color-foreground-faint: #8c909c; + --token-side-nav-color-surface-primary: #0c0c0e; + --token-side-nav-color-surface-interactive-hover: #3b3d45; + --token-side-nav-color-surface-interactive-active: #656a76; + --token-tabs-tab-height-medium: 36px; + --token-tabs-tab-height-large: 48px; + --token-tabs-tab-padding-horizontal-medium: 12px; + --token-tabs-tab-padding-horizontal-large: 20px; + --token-tabs-tab-padding-vertical: 0px; + --token-tabs-tab-border-radius: 5px; + --token-tabs-tab-focus-inset: 6px; + --token-tabs-tab-gutter: 6px; + --token-tabs-indicator-height: 3px; + --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-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; + --token-typography-font-stack-code: + ui-monospace, Menlo, Consolas, monospace; + --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-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-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-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-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-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 */ + --token-typography-body-200-font-family: + -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, + Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --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: 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 */ + } +} From b3cf42c304eb99560875123cda63186e31285db0 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 9 Oct 2025 15:45:52 +0100 Subject: [PATCH 027/224] REVERT - used local version of Style Dictionary for debugging This reverts commit c9f47dea3d79f27dc826140fb5708665471a50a2. --- package.json | 3 +- pnpm-lock.yaml | 118 ++++++++++++++----------------------------------- 2 files changed, 35 insertions(+), 86 deletions(-) diff --git a/package.json b/package.json index e6a9704a33f..a074882119b 100644 --- a/package.json +++ b/package.json @@ -26,8 +26,7 @@ }, "pnpm": { "overrides": { - "ember-composable-helpers": "npm:@nullvoxpopuli/ember-composable-helpers@^5.2.11", - "style-dictionary": "file:/Users/cristianorastelli/src/github/style-dictionary-didoo" + "ember-composable-helpers": "npm:@nullvoxpopuli/ember-composable-helpers@^5.2.11" }, "patchedDependencies": { "broccoli-asset-rewrite": "patches/broccoli-asset-rewrite.patch" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cf66ead99bd..5fdc76dbdb8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,7 +7,6 @@ settings: overrides: ember-composable-helpers: npm:@nullvoxpopuli/ember-composable-helpers@^5.2.11 - style-dictionary: file:/Users/cristianorastelli/src/github/style-dictionary-didoo patchedDependencies: broccoli-asset-rewrite: @@ -468,8 +467,8 @@ importers: specifier: ^3.4.2 version: 3.6.2 style-dictionary: - specifier: file:/Users/cristianorastelli/src/github/style-dictionary-didoo - version: file:../../github/style-dictionary-didoo + specifier: ^5.0.4 + version: 5.0.4 tinycolor2: specifier: ^1.6.0 version: 1.6.0 @@ -1880,8 +1879,8 @@ packages: '@bundled-es-modules/glob@11.0.3': resolution: {integrity: sha512-rt+1650YhlwRkkj67YMZQj5LXWZiavpHQg8K6jDcZBPbrBIooHbKOQvvxKJsKM80H1oHengEbIymfw3mn4FkUw==} - '@bundled-es-modules/memfs@4.17.0': - resolution: {integrity: sha512-ykdrkEmQr9BV804yd37ikXfNnvxrwYfY9Z2/EtMHFEFadEjsQXJ1zL9bVZrKNLDtm91UdUOEHso6Aweg93K6xQ==} + '@bundled-es-modules/memfs@4.9.4': + resolution: {integrity: sha512-1XyYPUaIHwEOdF19wYVLBtHJRr42Do+3ctht17cZOHwHf67vkmRNPlYDGY2kJps4RgE5+c7nEZmEzxxvb1NZWA==} '@carbon/colors@11.39.0': resolution: {integrity: sha512-H1hL9NW1I1vks469KuIV/YY4zHUiDQJ/MOlJgv8iCLi0SQS4DWkDslccXAhce8U8qRtx1JPfePhiYkRBbjgKgw==} @@ -2998,32 +2997,14 @@ packages: peerDependencies: tslib: '2' - '@jsonjoy.com/buffers@1.0.0': - resolution: {integrity: sha512-NDigYR3PHqCnQLXYyoLbnEdzMMvzeiCWo1KOut7Q0CoIqg9tUAPKJ1iq/2nFhc5kZtexzutNY0LFjdwWL3Dw3Q==} + '@jsonjoy.com/json-pack@1.1.1': + resolution: {integrity: sha512-osjeBqMJ2lb/j/M8NCPjs1ylqWIcTRTycIhVB5pt6LgzgeRSb0YRZ7j9RfA8wIUrsr/medIuhVyonXRZWLyfdw==} engines: {node: '>=10.0'} peerDependencies: tslib: '2' - '@jsonjoy.com/codegen@1.0.0': - resolution: {integrity: sha512-E8Oy+08cmCf0EK/NMxpaJZmOxPqM+6iSe2S4nlSBrPZOORoDJILxtbSUEDKQyTamm/BVAhIGllOBNU79/dwf0g==} - engines: {node: '>=10.0'} - peerDependencies: - tslib: '2' - - '@jsonjoy.com/json-pack@1.14.0': - resolution: {integrity: sha512-LpWbYgVnKzphN5S6uss4M25jJ/9+m6q6UJoeN6zTkK4xAGhKsiBRPVeF7OYMWonn5repMQbE5vieRXcMUrKDKw==} - engines: {node: '>=10.0'} - peerDependencies: - tslib: '2' - - '@jsonjoy.com/json-pointer@1.0.2': - resolution: {integrity: sha512-Fsn6wM2zlDzY1U+v4Nc8bo3bVqgfNTGcn6dMgs6FjrEnt4ZCe60o6ByKRjOGlI2gow0aE/Q41QOigdTqkyK5fg==} - engines: {node: '>=10.0'} - peerDependencies: - tslib: '2' - - '@jsonjoy.com/util@1.9.0': - resolution: {integrity: sha512-pLuQo+VPRnN8hfPqUTLTHk126wuYdXVxE6aDmjSeV4NCAgyxWbiOIeNJVtID3h1Vzpoi9m4jXezf73I6LgabgQ==} + '@jsonjoy.com/util@1.5.0': + resolution: {integrity: sha512-ojoNsrIuPI9g6o8UxhraZQSyF2ByJanAY4cTFbc8Mf2AXEF4aQRGY1dJxyJpuyav8r9FGflEt/Ff3u5Nt6YMPA==} engines: {node: '>=10.0'} peerDependencies: tslib: '2' @@ -3932,8 +3913,8 @@ packages: '@xtuc/long@4.2.2': resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==} - '@zip.js/zip.js@2.8.2': - resolution: {integrity: sha512-PI6UdgpSeVoGvzguKHmy2bwOqI3UYkntLZOCpyJSKIi7234c5aJmQYkJB/P4P2YUJkqhbqvu7iM2/0eJZ178nA==} + '@zip.js/zip.js@2.7.54': + resolution: {integrity: sha512-qMrJVg2hoEsZJjMJez9yI2+nZlBUxgYzGV3mqcb2B/6T1ihXp0fWBDYlVHlHquuorgNUQP5a8qSmX6HF5rFJNg==} engines: {bun: '>=0.7.0', deno: '>=1.0.0', node: '>=16.5.0'} abab@2.0.6: @@ -7339,12 +7320,6 @@ packages: resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==} engines: {node: '>=10.13.0'} - glob-to-regex.js@1.0.1: - resolution: {integrity: sha512-CG/iEvgQqfzoVsMUbxSJcwbG2JwyZ3naEqPkeltwl0BSS8Bp83k3xlGms+0QdWFUAwV+uvo80wNswKF6FWEkKg==} - engines: {node: '>=10.0'} - peerDependencies: - tslib: '2' - glob-to-regexp@0.3.0: resolution: {integrity: sha512-Iozmtbqv0noj0uDDqoL0zNq0VBEfK2YFoMAZoxJe4cwphvLR+JskfF30QhXHOR4m3KrE6NLRYw+U9MRXvifyig==} @@ -8830,8 +8805,8 @@ packages: resolution: {integrity: sha512-qvwipnozMohxLXG1pOqoLiZKNkC4r4qqRucSoDwXowsNGDSULiqFTRUF05vcZWnwJSG22qTsynQhxbaMtnX9gw==} engines: {node: '>=8'} - memfs@4.42.0: - resolution: {integrity: sha512-RG+4HMGyIVp6UWDWbFmZ38yKrSzblPnfJu0PyPt0hw52KW4PPlPp+HdV4qZBG0hLDuYVnf8wfQT4NymKXnlQjA==} + memfs@4.17.0: + resolution: {integrity: sha512-4eirfZ7thblFmqFjywlTmuWVSvccHAJbn1r8qQLzmTO11qcqpohOjmY2mFce6x7x7WtskzRqApPD0hv+Oa74jg==} engines: {node: '>= 4.0.0'} memory-streams@0.1.3: @@ -10837,8 +10812,8 @@ packages: strip-test-selectors@0.1.0: resolution: {integrity: sha512-wkVYph30L7wYkMf5EypfTqhY4qZwmQ0hpFOTksaXne49YbUr2jenJl5w5yj9IWx3ojtoH9BGAQ7cShnYEzbs5g==} - style-dictionary@file:../../github/style-dictionary-didoo: - resolution: {directory: ../../github/style-dictionary-didoo, type: directory} + style-dictionary@5.0.4: + resolution: {integrity: sha512-+k82riDTHnCpOYzKz1Xa4W219dEOI8pc2a2jnWZuAFY11PHvRL1Ao55Lle3t/kQbiRU5QACdC3xeUNuByaKE3w==} engines: {node: '>=22.0.0'} hasBin: true @@ -11069,8 +11044,8 @@ packages: resolution: {integrity: sha512-49WtAWS+tcsy93dRt6P0P3AMD2m5PvXRhuEA0kaXos5ZLlujtYmpmFsB+QvWUSxE1ZsstmYXfQ7L40+EcQgpAQ==} engines: {node: '>=0.8'} - thingies@2.5.0: - resolution: {integrity: sha512-s+2Bwztg6PhWUD7XMfeYm5qliDdSiZm7M7n8KjTkIsm3l/2lgVRc2/Gx/v+ZX8lT4FMA+i8aQvhcWylldc+ZNw==} + thingies@1.21.0: + resolution: {integrity: sha512-hsqsJsFMsV+aD4s3CWKk85ep/3I9XzYV/IXaSouJMYIoDlgyi11cBhsqYe9/geRfB0YIikBQg6raRaM+nIMP9g==} engines: {node: '>=10.18'} peerDependencies: tslib: ^2 @@ -11184,8 +11159,8 @@ packages: resolution: {integrity: sha512-UIRcWsX1kDOcC/Q2R58weYWlw01EnmWWBwUv3okWS+zMBvsgIfYoO6veHhuNE3hgzWCEImNp46QS5CyKnw5QUA==} engines: {node: 12.* || >= 14} - tree-dump@1.1.0: - resolution: {integrity: sha512-rMuvhU4MCDbcbnleZTFezWsaZXRFemSqAM+7jPnzUl1fo9w3YEKOxAeui0fz3OI4EU4hf23iyA7uQRVko+UaBA==} + tree-dump@1.0.2: + resolution: {integrity: sha512-dpev9ABuLWdEubk+cIaI9cHwRNNDjkBBLXTwI4UCUFdQ5xXKqNXoK4FEciw/vxf+NQ7Cb7sGUyeUtORvHIdRXQ==} engines: {node: '>=10.0'} peerDependencies: tslib: '2' @@ -12911,12 +12886,12 @@ snapshots: string_decoder: 1.3.0 url: 0.11.4 - '@bundled-es-modules/memfs@4.17.0': + '@bundled-es-modules/memfs@4.9.4': dependencies: assert: 2.1.0 buffer: 6.0.3 events: 3.3.0 - memfs: 4.42.0 + memfs: 4.17.0 path: 0.12.7 stream: 0.0.3 util: 0.12.5 @@ -14567,35 +14542,16 @@ snapshots: dependencies: tslib: 2.8.1 - '@jsonjoy.com/buffers@1.0.0(tslib@2.8.1)': - dependencies: - tslib: 2.8.1 - - '@jsonjoy.com/codegen@1.0.0(tslib@2.8.1)': - dependencies: - tslib: 2.8.1 - - '@jsonjoy.com/json-pack@1.14.0(tslib@2.8.1)': + '@jsonjoy.com/json-pack@1.1.1(tslib@2.8.1)': dependencies: '@jsonjoy.com/base64': 1.1.2(tslib@2.8.1) - '@jsonjoy.com/buffers': 1.0.0(tslib@2.8.1) - '@jsonjoy.com/codegen': 1.0.0(tslib@2.8.1) - '@jsonjoy.com/json-pointer': 1.0.2(tslib@2.8.1) - '@jsonjoy.com/util': 1.9.0(tslib@2.8.1) + '@jsonjoy.com/util': 1.5.0(tslib@2.8.1) hyperdyperid: 1.2.0 - thingies: 2.5.0(tslib@2.8.1) - tslib: 2.8.1 - - '@jsonjoy.com/json-pointer@1.0.2(tslib@2.8.1)': - dependencies: - '@jsonjoy.com/codegen': 1.0.0(tslib@2.8.1) - '@jsonjoy.com/util': 1.9.0(tslib@2.8.1) + thingies: 1.21.0(tslib@2.8.1) tslib: 2.8.1 - '@jsonjoy.com/util@1.9.0(tslib@2.8.1)': + '@jsonjoy.com/util@1.5.0(tslib@2.8.1)': dependencies: - '@jsonjoy.com/buffers': 1.0.0(tslib@2.8.1) - '@jsonjoy.com/codegen': 1.0.0(tslib@2.8.1) tslib: 2.8.1 '@keyv/serialize@1.1.0': {} @@ -15748,7 +15704,7 @@ snapshots: '@xtuc/long@4.2.2': {} - '@zip.js/zip.js@2.8.2': {} + '@zip.js/zip.js@2.7.54': {} abab@2.0.6: {} @@ -21221,10 +21177,6 @@ snapshots: dependencies: is-glob: 4.0.3 - glob-to-regex.js@1.0.1(tslib@2.8.1): - dependencies: - tslib: 2.8.1 - glob-to-regexp@0.3.0: {} glob-to-regexp@0.4.1: {} @@ -23109,13 +23061,11 @@ snapshots: mimic-fn: 2.1.0 p-is-promise: 2.1.0 - memfs@4.42.0: + memfs@4.17.0: dependencies: - '@jsonjoy.com/json-pack': 1.14.0(tslib@2.8.1) - '@jsonjoy.com/util': 1.9.0(tslib@2.8.1) - glob-to-regex.js: 1.0.1(tslib@2.8.1) - thingies: 2.5.0(tslib@2.8.1) - tree-dump: 1.1.0(tslib@2.8.1) + '@jsonjoy.com/json-pack': 1.1.1(tslib@2.8.1) + '@jsonjoy.com/util': 1.5.0(tslib@2.8.1) + tree-dump: 1.0.2(tslib@2.8.1) tslib: 2.8.1 memory-streams@0.1.3: @@ -25466,12 +25416,12 @@ snapshots: strip-test-selectors@0.1.0: {} - style-dictionary@file:../../github/style-dictionary-didoo: + style-dictionary@5.0.4: dependencies: '@bundled-es-modules/deepmerge': 4.3.1 '@bundled-es-modules/glob': 11.0.3 - '@bundled-es-modules/memfs': 4.17.0 - '@zip.js/zip.js': 2.8.2 + '@bundled-es-modules/memfs': 4.9.4 + '@zip.js/zip.js': 2.7.54 chalk: 5.4.1 change-case: 5.4.4 commander: 12.1.0 @@ -25894,7 +25844,7 @@ snapshots: textextensions@2.6.0: {} - thingies@2.5.0(tslib@2.8.1): + thingies@1.21.0(tslib@2.8.1): dependencies: tslib: 2.8.1 @@ -26023,7 +25973,7 @@ snapshots: transitivePeerDependencies: - supports-color - tree-dump@1.1.0(tslib@2.8.1): + tree-dump@1.0.2(tslib@2.8.1): dependencies: tslib: 2.8.1 From 4b23415a35642cdc92f13c768eb56e3803047893 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 9 Oct 2025 15:50:56 +0100 Subject: [PATCH 028/224] REVERT - added examples of generated themed tokens This reverts commit 194b9fb75053d9bb2cb7402bdf8298e599ca314f. --- .../tokens.css | 688 ----------------- .../tokens.css | 690 ------------------ .../common-tokens.css | 528 -------------- .../dark-tokens.css | 44 -- .../light-tokens.css | 44 -- 5 files changed, 1994 deletions(-) delete mode 100644 packages/tokens/expected-CSS-output/generated/themed-tokens-with-css-selectors/tokens.css delete mode 100644 packages/tokens/expected-CSS-output/generated/themed-tokens-with-prefers-color-scheme/tokens.css delete mode 100644 packages/tokens/expected-CSS-output/generated/themed-tokens-with-root-selector/common-tokens.css delete mode 100644 packages/tokens/expected-CSS-output/generated/themed-tokens-with-root-selector/dark-tokens.css delete mode 100644 packages/tokens/expected-CSS-output/generated/themed-tokens-with-root-selector/light-tokens.css diff --git a/packages/tokens/expected-CSS-output/generated/themed-tokens-with-css-selectors/tokens.css b/packages/tokens/expected-CSS-output/generated/themed-tokens-with-css-selectors/tokens.css deleted file mode 100644 index 3d4fc067a5e..00000000000 --- a/packages/tokens/expected-CSS-output/generated/themed-tokens-with-css-selectors/tokens.css +++ /dev/null @@ -1,688 +0,0 @@ -/** - * Do not edit directly, this file was auto-generated. - */ - -.hds-theme-dark, -[data-hds-theme="dark"] { - --token-color-palette-blue-500: #1c345f; - --token-color-palette-blue-400: #0046d1; - --token-color-palette-blue-300: #0c56e9; - --token-color-palette-blue-200: #1060ff; - --token-color-palette-blue-100: #cce3fe; - --token-color-palette-blue-50: #f2f8ff; - --token-color-palette-purple-500: #42215b; - --token-color-palette-purple-400: #7b00db; - --token-color-palette-purple-300: #911ced; - --token-color-palette-purple-200: #a737ff; - --token-color-palette-purple-100: #ead2fe; - --token-color-palette-purple-50: #f9f2ff; - --token-color-palette-green-500: #054220; - --token-color-palette-green-400: #006619; - --token-color-palette-green-300: #00781e; - --token-color-palette-green-200: #008a22; - --token-color-palette-green-100: #cceeda; - --token-color-palette-green-50: #f2fbf6; - --token-color-palette-amber-500: #542800; - --token-color-palette-amber-400: #803d00; - --token-color-palette-amber-300: #9e4b00; - --token-color-palette-amber-200: #bb5a00; - --token-color-palette-amber-100: #fbeabf; - --token-color-palette-amber-50: #fff9e8; - --token-color-palette-red-500: #51130a; - --token-color-palette-red-400: #940004; - --token-color-palette-red-300: #c00005; - --token-color-palette-red-200: #e52228; - --token-color-palette-red-100: #fbd4d4; - --token-color-palette-red-50: #fff5f5; - --token-color-palette-neutral-700: #0c0c0e; - --token-color-palette-neutral-600: #3b3d45; - --token-color-palette-neutral-500: #656a76; - --token-color-palette-neutral-400: #8c909c; - --token-color-palette-neutral-300: #c2c5cb; - --token-color-palette-neutral-200: #dedfe3; - --token-color-palette-neutral-100: #f1f2f3; - --token-color-palette-neutral-50: #fafafa; - --token-color-palette-neutral-0: #ffffff; - --token-color-palette-alpha-300: #3b3d4566; - --token-color-palette-alpha-200: #656a7633; - --token-color-palette-alpha-100: #656a761a; -} - -.hds-theme-light, -[data-hds-theme="light"] { - --token-color-palette-blue-500: #1c345f; - --token-color-palette-blue-400: #0046d1; - --token-color-palette-blue-300: #0c56e9; - --token-color-palette-blue-200: #1060ff; - --token-color-palette-blue-100: #cce3fe; - --token-color-palette-blue-50: #f2f8ff; - --token-color-palette-purple-500: #42215b; - --token-color-palette-purple-400: #7b00db; - --token-color-palette-purple-300: #911ced; - --token-color-palette-purple-200: #a737ff; - --token-color-palette-purple-100: #ead2fe; - --token-color-palette-purple-50: #f9f2ff; - --token-color-palette-green-500: #054220; - --token-color-palette-green-400: #006619; - --token-color-palette-green-300: #00781e; - --token-color-palette-green-200: #008a22; - --token-color-palette-green-100: #cceeda; - --token-color-palette-green-50: #f2fbf6; - --token-color-palette-amber-500: #542800; - --token-color-palette-amber-400: #803d00; - --token-color-palette-amber-300: #9e4b00; - --token-color-palette-amber-200: #bb5a00; - --token-color-palette-amber-100: #fbeabf; - --token-color-palette-amber-50: #fff9e8; - --token-color-palette-red-500: #51130a; - --token-color-palette-red-400: #940004; - --token-color-palette-red-300: #c00005; - --token-color-palette-red-200: #e52228; - --token-color-palette-red-100: #fbd4d4; - --token-color-palette-red-50: #fff5f5; - --token-color-palette-neutral-700: #0c0c0e; - --token-color-palette-neutral-600: #3b3d45; - --token-color-palette-neutral-500: #656a76; - --token-color-palette-neutral-400: #8c909c; - --token-color-palette-neutral-300: #c2c5cb; - --token-color-palette-neutral-200: #dedfe3; - --token-color-palette-neutral-100: #f1f2f3; - --token-color-palette-neutral-50: #fafafa; - --token-color-palette-neutral-0: #ffffff; - --token-color-palette-alpha-300: #3b3d4566; - --token-color-palette-alpha-200: #656a7633; - --token-color-palette-alpha-100: #656a761a; -} - -:root { - --token-color-border-primary: #656a7633; - --token-color-border-faint: #656a761a; - --token-color-border-strong: #3b3d4566; - --token-color-border-action: #cce3fe; - --token-color-border-highlight: #ead2fe; - --token-color-border-success: #cceeda; - --token-color-border-warning: #fbeabf; - --token-color-border-critical: #fbd4d4; - --token-color-focus-action-internal: #0c56e9; - --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-critical-internal: #c00005; - --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-foreground-strong: #0c0c0e; - --token-color-foreground-primary: #3b3d45; - --token-color-foreground-faint: #656a76; - --token-color-foreground-high-contrast: #ffffff; - --token-color-foreground-disabled: #8c909c; - --token-color-foreground-action: #1060ff; - --token-color-foreground-action-hover: #0c56e9; - --token-color-foreground-action-active: #0046d1; - --token-color-foreground-highlight: #a737ff; - --token-color-foreground-highlight-on-surface: #911ced; - --token-color-foreground-highlight-high-contrast: #42215b; - --token-color-foreground-success: #008a22; - --token-color-foreground-success-on-surface: #00781e; - --token-color-foreground-success-high-contrast: #054220; - --token-color-foreground-warning: #bb5a00; - --token-color-foreground-warning-on-surface: #9e4b00; - --token-color-foreground-warning-high-contrast: #542800; - --token-color-foreground-critical: #e52228; - --token-color-foreground-critical-on-surface: #c00005; - --token-color-foreground-critical-high-contrast: #51130a; - --token-color-page-primary: #ffffff; - --token-color-page-faint: #fafafa; - --token-color-surface-primary: #ffffff; - --token-color-surface-faint: #fafafa; - --token-color-surface-strong: #f1f2f3; - --token-color-surface-interactive: #ffffff; - --token-color-surface-interactive-hover: #f1f2f3; - --token-color-surface-interactive-active: #dedfe3; - --token-color-surface-interactive-disabled: #fafafa; - --token-color-surface-action: #f2f8ff; - --token-color-surface-highlight: #f9f2ff; - --token-color-surface-success: #f2fbf6; - --token-color-surface-warning: #fff9e8; - --token-color-surface-critical: #fff5f5; - --token-color-hashicorp-brand: #000000; - --token-color-boundary-brand: #f24c53; - --token-color-boundary-foreground: #cf2d32; - --token-color-boundary-surface: #ffecec; - --token-color-boundary-border: #fbd7d8; - --token-color-boundary-gradient-primary-start: #f97076; - --token-color-boundary-gradient-primary-stop: #db363b; - --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-consul-brand: #e03875; - --token-color-consul-foreground: #d01c5b; - --token-color-consul-surface: #ffe9f1; - --token-color-consul-border: #ffcede; - --token-color-consul-gradient-primary-start: #ff99be; - --token-color-consul-gradient-primary-stop: #da306e; - --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-hcp-brand: #000000; - --token-color-nomad-brand: #06d092; - --token-color-nomad-foreground: #008661; - --token-color-nomad-surface: #d3fdeb; - --token-color-nomad-border: #bff3dd; - --token-color-nomad-gradient-primary-start: #bff3dd; - --token-color-nomad-gradient-primary-stop: #60dea9; - --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-packer-brand: #02a8ef; - --token-color-packer-foreground: #007eb4; - --token-color-packer-surface: #d4f2ff; - --token-color-packer-border: #b4e4ff; - --token-color-packer-gradient-primary-start: #b4e4ff; - --token-color-packer-gradient-primary-stop: #63d0ff; - --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-terraform-brand: #7b42bc; - --token-color-terraform-brand-on-dark: #a067da; /* this is an alternative brand color meant to be used on dark backgrounds */ - --token-color-terraform-foreground: #773cb4; - --token-color-terraform-surface: #f4ecff; - --token-color-terraform-border: #ebdbfc; - --token-color-terraform-gradient-primary-start: #bb8deb; - --token-color-terraform-gradient-primary-stop: #844fba; - --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-vagrant-brand: #1868f2; - --token-color-vagrant-foreground: #1c61d8; - --token-color-vagrant-surface: #d6ebff; - --token-color-vagrant-border: #c7dbfc; - --token-color-vagrant-gradient-primary-start: #639cff; - --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-foreground: #9a6f00; - --token-color-vault-radar-surface: #fff9cf; - --token-color-vault-radar-border: #feec7b; - --token-color-vault-radar-gradient-primary-start: #feec7b; - --token-color-vault-radar-gradient-primary-stop: #ffe543; - --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-secrets-brand: #ffcf25; - --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-color-vault-secrets-foreground: #9a6f00; - --token-color-vault-secrets-surface: #fff9cf; - --token-color-vault-secrets-border: #feec7b; - --token-color-vault-secrets-gradient-primary-start: #feec7b; - --token-color-vault-secrets-gradient-primary-stop: #ffe543; - --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-brand: #ffcf25; - --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-foreground: #9a6f00; - --token-color-vault-surface: #fff9cf; - --token-color-vault-border: #feec7b; - --token-color-vault-gradient-primary-start: #feec7b; - --token-color-vault-gradient-primary-stop: #ffe543; - --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-waypoint-brand: #14c6cb; - --token-color-waypoint-foreground: #008196; - --token-color-waypoint-surface: #e0fcff; - --token-color-waypoint-border: #cbf1f3; - --token-color-waypoint-gradient-primary-start: #cbf1f3; - --token-color-waypoint-gradient-primary-stop: #62d4dc; - --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-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-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-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, - 0px 12px 24px 0px #3b3d4559; - --token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, - inset 0px 1px 2px 1px #656a761a; - --token-surface-base-box-shadow: 0 0 0 1px #656a7633; - --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-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-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-header-height: 60px; - --token-app-header-home-link-size: 36px; - --token-app-header-logo-size: 28px; - --token-app-side-nav-wrapper-border-width: 1px; - --token-app-side-nav-wrapper-border-color: var( - --token-color-palette-neutral-200 - ); - --token-app-side-nav-wrapper-padding-horizontal: 16px; - --token-app-side-nav-wrapper-padding-vertical: 16px; - --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; - --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; - --token-app-side-nav-toggle-button-border-radius: 5px; - --token-app-side-nav-header-home-link-padding: 4px; - --token-app-side-nav-header-home-link-logo-size: 48px; - --token-app-side-nav-header-home-link-logo-size-minimized: 32px; - --token-app-side-nav-header-actions-spacing: 8px; - --token-app-side-nav-body-list-margin-vertical: 24px; - --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-item-content-spacing-horizontal: 8px; - --token-app-side-nav-body-list-item-border-radius: 5px; - --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-foreground-faint: var( - --token-color-foreground-faint - ); - --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: 7px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ - --token-badge-count-padding-horizontal-medium: 11px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ - --token-badge-count-padding-horizontal-large: 13px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ - --token-badge-height-small: 20px; - --token-badge-height-medium: 24px; - --token-badge-height-large: 32px; - --token-badge-padding-horizontal-small: 5px; /* here we're taking into account the 1px border */ - --token-badge-padding-horizontal-medium: 7px; /* here we're taking into account the 1px border */ - --token-badge-padding-horizontal-large: 7px; /* here we're taking into account the 1px border */ - --token-badge-padding-vertical-small: 1px; /* here we're taking into account the 1px border */ - --token-badge-padding-vertical-medium: 3px; /* here we're taking into account the 1px border */ - --token-badge-padding-vertical-large: 3px; /* here we're taking into account the 1px border */ - --token-badge-icon-size-small: 12px; - --token-badge-icon-size-medium: 16px; - --token-badge-icon-size-large: 16px; - --token-badge-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, - Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, - Segoe UI Symbol; - --token-badge-font-size-small: 0.8125rem; /* 13px/0.8125rem */ - --token-badge-font-size-medium: 0.8125rem; /* 13px/0.8125rem */ - --token-badge-font-size-large: 1rem; /* 16px/1rem */ - --token-badge-line-height-small: 1.2308; /* 16px */ - --token-badge-line-height-medium: 1.2308; /* 16px */ - --token-badge-line-height-large: 1.5; /* 24px */ - --token-badge-font-weight: 500; - --token-badge-gap-small: 4px; - --token-badge-gap-medium: 4px; - --token-badge-gap-large: 6px; - --token-badge-border-width: 1px; - --token-badge-border-radius: 5px; - --token-badge-filled-neutral-foreground-color: #3b3d45; - --token-badge-filled-neutral-background-color: #f1f2f3; - --token-badge-filled-neutral-dark-mode-foreground-color: #ffffff; - --token-badge-filled-neutral-dark-mode-background-color: #656a76; - --token-badge-filled-highlight-foreground-color: #911ced; - --token-badge-filled-highlight-background-color: #f9f2ff; - --token-badge-filled-success-foreground-color: #00781e; - --token-badge-filled-success-background-color: #f2fbf6; - --token-badge-filled-warning-foreground-color: #9e4b00; - --token-badge-filled-warning-background-color: #fff9e8; - --token-badge-filled-critical-foreground-color: #c00005; - --token-badge-filled-critical-background-color: #fff5f5; - --token-badge-inverted-neutral-foreground-color: #ffffff; - --token-badge-inverted-neutral-background-color: #656a76; - --token-badge-inverted-neutral-dark-mode-foreground-color: #3b3d45; - --token-badge-inverted-neutral-dark-mode-background-color: #fafafa; - --token-badge-inverted-highlight-foreground-color: #ffffff; - --token-badge-inverted-highlight-background-color: #a737ff; - --token-badge-inverted-success-foreground-color: #ffffff; - --token-badge-inverted-success-background-color: #008a22; - --token-badge-inverted-warning-foreground-color: #ffffff; - --token-badge-inverted-warning-background-color: #bb5a00; - --token-badge-inverted-critical-foreground-color: #ffffff; - --token-badge-inverted-critical-background-color: #e52228; - --token-badge-outlined-neutral-foreground-color: #3b3d45; - --token-badge-outlined-neutral-border-color: #656a76; - --token-badge-outlined-neutral-dark-mode-foreground-color: #ffffff; - --token-badge-outlined-neutral-dark-mode-border-color: #fafafa; - --token-badge-outlined-highlight-foreground-color: #a737ff; - --token-badge-outlined-highlight-border-color: #a737ff; - --token-badge-outlined-success-foreground-color: #008a22; - --token-badge-outlined-success-border-color: #008a22; - --token-badge-outlined-warning-foreground-color: #bb5a00; - --token-badge-outlined-warning-border-color: #bb5a00; - --token-badge-outlined-critical-foreground-color: #e52228; - --token-badge-outlined-critical-border-color: #e52228; - --token-button-critical-foreground-default: #c00005; - --token-button-critical-foreground-hover: #ffffff; - --token-button-critical-foreground-focus: #c00005; - --token-button-critical-foreground-active: #ffffff; - --token-button-critical-surface-default: #fff5f5; - --token-button-critical-surface-hover: #c00005; - --token-button-critical-surface-focus: #fff5f5; - --token-button-critical-surface-active: #940004; - --token-button-critical-border-color-default: #c00005; - --token-button-critical-border-color-hover: #940004; - --token-button-critical-border-color-focus: #c00005; - --token-button-critical-border-color-active: #940004; - --token-button-critical-box-shadow-default: 0px 1px 1px 0px #656a760d, - 0px 2px 2px 0px #656a760d; - --token-button-critical-box-shadow-focus: none; - --token-button-critical-box-shadow-active: none; - --token-button-disabled-foreground: #8c909c; - --token-button-disabled-surface: #fafafa; - --token-button-disabled-border-color: #656a7633; - --token-button-disabled-box-shadow: none; - --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-icon-size-small: 12px; - --token-button-icon-size-medium: 16px; - --token-button-icon-size-large: 24px; - --token-button-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, - Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, - Segoe UI Symbol; - --token-button-font-size-small: 0.8125rem; /* 13px/0.8125rem */ - --token-button-font-size-medium: 0.875rem; /* 14px/0.875rem */ - --token-button-font-size-large: 1rem; /* 16px/1rem */ - --token-button-line-height-small: 1.0769; /* 14px - 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-line-height-medium: 1.1428; /* 16px */ - --token-button-line-height-large: 1.5; /* 24px */ - --token-button-font-weight: 400; /* notice: we set the font-weight of the button text to 'regular' (on purpose) because of the antialising of the browser that renders the text quite different from what it looks like in Figma, so we prefer to have them visually similar even if they differ in their internal implementation (in Figma the font-weight is medium/500) - for more context about this decision: https://hashicorp.atlassian.net/browse/HDS-2099 */ - --token-button-gap: 6px; - --token-button-border-width: 1px; - --token-button-border-radius: 5px; - --token-button-box-shadow-focus: none; - --token-button-focus-border-width: 3px; - --token-button-focus-border-radius: 0px; - --token-button-primary-foreground-default: #ffffff; - --token-button-primary-foreground-hover: #ffffff; - --token-button-primary-foreground-focus: #ffffff; - --token-button-primary-foreground-active: #ffffff; - --token-button-primary-surface-default: #1060ff; - --token-button-primary-surface-hover: #0046d1; - --token-button-primary-surface-focus: #1060ff; - --token-button-primary-surface-active: #0046d1; - --token-button-primary-border-color-default: #0c56e9; - --token-button-primary-border-color-hover: #0046d1; - --token-button-primary-border-color-focus: #0c56e9; - --token-button-primary-border-color-active: #0046d1; - --token-button-primary-box-shadow-default: 0px 1px 1px 0px #656a760d, - 0px 2px 2px 0px #656a760d; - --token-button-primary-box-shadow-focus: none; - --token-button-primary-box-shadow-active: none; - --token-button-secondary-foreground-default: #3b3d45; - --token-button-secondary-foreground-hover: #3b3d45; - --token-button-secondary-foreground-focus: #3b3d45; - --token-button-secondary-foreground-active: #3b3d45; - --token-button-secondary-surface-default: #fafafa; - --token-button-secondary-surface-hover: #ffffff; - --token-button-secondary-surface-focus: #fafafa; - --token-button-secondary-surface-active: #dedfe3; - --token-button-secondary-border-color-default: #3b3d4566; - --token-button-secondary-border-color-hover: #3b3d4566; - --token-button-secondary-border-color-focus: #0c56e9; - --token-button-secondary-border-color-active: #3b3d4566; - --token-button-secondary-box-shadow-default: 0px 1px 1px 0px #656a760d, - 0px 2px 2px 0px #656a760d; - --token-button-secondary-box-shadow-focus: none; - --token-button-secondary-box-shadow-active: none; - --token-button-tertiary-foreground-default: #1060ff; - --token-button-tertiary-foreground-hover: #0c56e9; - --token-button-tertiary-foreground-focus: #1060ff; - --token-button-tertiary-foreground-active: #0046d1; - --token-button-tertiary-surface-default: rgba(0, 0, 0, 0); - --token-button-tertiary-surface-hover: #ffffff; - --token-button-tertiary-surface-focus: #ffffff; - --token-button-tertiary-surface-active: #dedfe3; - --token-button-tertiary-border-color-default: rgba(0, 0, 0, 0); - --token-button-tertiary-border-color-hover: #3b3d4566; - --token-button-tertiary-border-color-focus: #0c56e9; - --token-button-tertiary-border-color-active: #3b3d4566; - --token-button-tertiary-box-shadow-default: none; - --token-button-tertiary-box-shadow-focus: none; - --token-button-tertiary-box-shadow-active: none; - --token-form-label-color: #0c0c0e; - --token-form-legend-color: #0c0c0e; - --token-form-helper-text-color: #656a76; - --token-form-indicator-optional-color: #656a76; - --token-form-visibility-toggle-size: 24px; - --token-form-visibility-toggle-padding: 3px; /* here we're taking into account the 1px border */ - --token-form-visibility-toggle-color: #3b3d45; - --token-form-visibility-toggle-background-color: rgba(0, 0, 0, 0); - --token-form-visibility-toggle-border-width: 1px; - --token-form-visibility-toggle-border-color: rgba(0, 0, 0, 0); - --token-form-error-color: #c00005; - --token-form-error-icon-size: 14px; - --token-form-error-icon-margin-horizontal: 0px; - --token-form-error-icon-margin-vertical: 2px; /* This extra margin is used for vertical optical alignment. */ - --token-form-error-gap: 8px; - --token-form-checkbox-size: 16px; - --token-form-checkbox-border-radius: 3px; - --token-form-checkbox-border-width: 1px; - --token-form-checkbox-background-image-size: 12px; - --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-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-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-file-input-min-height: 32px; - --token-form-file-input-margin-right: 16px; - --token-form-control-base-foreground-value-color: #0c0c0e; - --token-form-control-base-foreground-placeholder-color: #656a76; - --token-form-control-base-surface-color-default: #ffffff; - --token-form-control-base-surface-color-hover: #f1f2f3; - --token-form-control-base-border-color-default: #8c909c; - --token-form-control-base-border-color-hover: #656a76; - --token-form-control-base-box-shadow-default: inset 0px 1px 2px 1px #656a761a; - --token-form-control-checked-foreground-color: #ffffff; - --token-form-control-checked-surface-color-default: #1060ff; - --token-form-control-checked-surface-color-hover: #0c56e9; - --token-form-control-checked-border-color-default: #0c56e9; - --token-form-control-checked-border-color-hover: #0046d1; - --token-form-control-invalid-border-color-default: #c00005; - --token-form-control-invalid-border-color-hover: #940004; - --token-form-control-invalid-outline-color: #dd7578; - --token-form-control-readonly-foreground-color: #3b3d45; - --token-form-control-readonly-surface-color: #f1f2f3; - --token-form-control-readonly-border-color: #656a761a; - --token-form-control-focus-outline-color: #5990ff; - --token-form-control-focus-outline-width: 3px; - --token-form-control-focus-outline-offset: 0px; - --token-form-control-disabled-foreground-color: #8c909c; - --token-form-control-disabled-surface-color: #fafafa; - --token-form-control-disabled-border-color: #656a7633; - --token-form-control-standard-height: 32px; /* Notice: we use this special token for elements that need to match the 'standard' height of an input element (because that height is actually the result of: text line height + vertical padding + border size). */ - --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-padding-with-icon: 31px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. We also consider extra 24px for the icon. */ - --token-form-control-border-radius: 5px; - --token-form-control-border-width: 1px; - --token-form-masked-input-toggle-button-size: 24px; - --token-form-masked-input-copy-button-margin-right: 8px; - --token-form-radio-size: 16px; - --token-form-radio-border-width: 1px; - --token-form-radio-background-image-size: 12px; - --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-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-outline-offset: 1px; - --token-form-radiocard-group-gap: 16px; - --token-form-radiocard-group-legend-margin-bottom: 12px; - --token-form-radiocard-border-width: 1px; - --token-form-radiocard-border-radius: 6px; - --token-form-radiocard-content-padding: 24px; - --token-form-radiocard-control-padding: 8px; - --token-form-radiocard-box-shadow-default: 0px 2px 3px 0px #656a761a, - 0px 8px 16px -10px #656a7633; - --token-form-radiocard-box-shadow-hover: 0px 2px 3px 0px #656a7626, - 0px 16px 16px -10px #656a7633; - --token-form-radiocard-box-shadow-focus: 0 0 0 3px #5990ff; /* This is a custom shadow used to add a focus ring around the card */ - --token-form-radiocard-box-shadow-disabled: none; - --token-form-radiocard-transition-duration: 0.2s; - --token-form-select-background-image-size: 16px; - --token-form-select-background-image-position-right-x: 7px; - --token-form-select-background-image-position-top-y: 9px; - --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-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-outline-offset: 0px; - --token-form-text-area-min-height: 32px; - --token-form-text-area-outline-offset: 0px; - --token-form-text-input-background-image-size: 16px; - --token-form-text-input-background-image-position-x: 7px; - --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-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-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-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-toggle-width: 32px; - --token-form-toggle-height: 16px; - --token-form-toggle-base-surface-color-default: #f1f2f3; /* 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-background-image-size: 12px; - --token-form-toggle-background-image-position-x: 2px; - --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-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-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-form-toggle-thumb-border-radius: 50%px; - --token-form-toggle-outline-width: 3px; - --token-form-toggle-outline-offset: 1px; - --token-outline-offset: 0px; - --token-pagination-nav-control-height: 36px; - --token-pagination-nav-control-padding-horizontal: 12px; - --token-pagination-nav-control-focus-inset: 4px; - --token-pagination-nav-control-icon-spacing: 6px; - --token-pagination-nav-indicator-height: 2px; - --token-pagination-nav-indicator-spacing: 6px; - --token-pagination-child-spacing-vertical: 8px; - --token-pagination-child-spacing-horizontal: 20px; - --token-side-nav-wrapper-border-width: 1px; - --token-side-nav-wrapper-border-color: #656a76; - --token-side-nav-wrapper-padding-horizontal: 16px; - --token-side-nav-wrapper-padding-vertical: 16px; - --token-side-nav-wrapper-padding-horizontal-minimized: 8px; - --token-side-nav-wrapper-padding-vertical-minimized: 22px; - --token-side-nav-toggle-button-border-radius: 5px; - --token-side-nav-header-home-link-padding: 4px; - --token-side-nav-header-home-link-logo-size: 48px; - --token-side-nav-header-home-link-logo-size-minimized: 32px; - --token-side-nav-header-actions-spacing: 8px; - --token-side-nav-body-list-margin-vertical: 24px; - --token-side-nav-body-list-item-height: 36px; - --token-side-nav-body-list-item-padding-horizontal: 8px; - --token-side-nav-body-list-item-padding-vertical: 4px; - --token-side-nav-body-list-item-spacing-vertical: 2px; - --token-side-nav-body-list-item-content-spacing-horizontal: 8px; - --token-side-nav-body-list-item-border-radius: 5px; - --token-side-nav-color-foreground-primary: #dedfe3; - --token-side-nav-color-foreground-strong: #ffffff; - --token-side-nav-color-foreground-faint: #8c909c; - --token-side-nav-color-surface-primary: #0c0c0e; - --token-side-nav-color-surface-interactive-hover: #3b3d45; - --token-side-nav-color-surface-interactive-active: #656a76; - --token-tabs-tab-height-medium: 36px; - --token-tabs-tab-height-large: 48px; - --token-tabs-tab-padding-horizontal-medium: 12px; - --token-tabs-tab-padding-horizontal-large: 20px; - --token-tabs-tab-padding-vertical: 0px; - --token-tabs-tab-border-radius: 5px; - --token-tabs-tab-focus-inset: 6px; - --token-tabs-tab-gutter: 6px; - --token-tabs-indicator-height: 3px; - --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-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; - --token-typography-font-stack-code: ui-monospace, Menlo, Consolas, monospace; - --token-typography-font-weight-regular: 400; - --token-typography-font-weight-medium: 500; - --token-typography-font-weight-semibold: 600; - --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: 1.875rem; /* 30px/1.875rem */ - --token-typography-display-500-line-height: 1.2666; /* 38px */ - --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-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-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-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-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 */ - --token-typography-body-200-font-family: -apple-system, BlinkMacSystemFont, - Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, - Segoe UI Symbol; - --token-typography-body-200-font-size: 0.875rem; /* 14px/0.875rem */ - --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: 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 */ -} diff --git a/packages/tokens/expected-CSS-output/generated/themed-tokens-with-prefers-color-scheme/tokens.css b/packages/tokens/expected-CSS-output/generated/themed-tokens-with-prefers-color-scheme/tokens.css deleted file mode 100644 index 2aaed52b2e0..00000000000 --- a/packages/tokens/expected-CSS-output/generated/themed-tokens-with-prefers-color-scheme/tokens.css +++ /dev/null @@ -1,690 +0,0 @@ -/** - * Do not edit directly, this file was auto-generated. - */ - -@media (prefers-color-scheme: dark) { - :root { - --token-color-palette-blue-500: #1c345f; - --token-color-palette-blue-400: #0046d1; - --token-color-palette-blue-300: #0c56e9; - --token-color-palette-blue-200: #1060ff; - --token-color-palette-blue-100: #cce3fe; - --token-color-palette-blue-50: #f2f8ff; - --token-color-palette-purple-500: #42215b; - --token-color-palette-purple-400: #7b00db; - --token-color-palette-purple-300: #911ced; - --token-color-palette-purple-200: #a737ff; - --token-color-palette-purple-100: #ead2fe; - --token-color-palette-purple-50: #f9f2ff; - --token-color-palette-green-500: #054220; - --token-color-palette-green-400: #006619; - --token-color-palette-green-300: #00781e; - --token-color-palette-green-200: #008a22; - --token-color-palette-green-100: #cceeda; - --token-color-palette-green-50: #f2fbf6; - --token-color-palette-amber-500: #542800; - --token-color-palette-amber-400: #803d00; - --token-color-palette-amber-300: #9e4b00; - --token-color-palette-amber-200: #bb5a00; - --token-color-palette-amber-100: #fbeabf; - --token-color-palette-amber-50: #fff9e8; - --token-color-palette-red-500: #51130a; - --token-color-palette-red-400: #940004; - --token-color-palette-red-300: #c00005; - --token-color-palette-red-200: #e52228; - --token-color-palette-red-100: #fbd4d4; - --token-color-palette-red-50: #fff5f5; - --token-color-palette-neutral-700: #0c0c0e; - --token-color-palette-neutral-600: #3b3d45; - --token-color-palette-neutral-500: #656a76; - --token-color-palette-neutral-400: #8c909c; - --token-color-palette-neutral-300: #c2c5cb; - --token-color-palette-neutral-200: #dedfe3; - --token-color-palette-neutral-100: #f1f2f3; - --token-color-palette-neutral-50: #fafafa; - --token-color-palette-neutral-0: #ffffff; - --token-color-palette-alpha-300: #3b3d4566; - --token-color-palette-alpha-200: #656a7633; - --token-color-palette-alpha-100: #656a761a; - } -} - -@media (prefers-color-scheme: light) { - :root { - --token-color-palette-blue-500: #1c345f; - --token-color-palette-blue-400: #0046d1; - --token-color-palette-blue-300: #0c56e9; - --token-color-palette-blue-200: #1060ff; - --token-color-palette-blue-100: #cce3fe; - --token-color-palette-blue-50: #f2f8ff; - --token-color-palette-purple-500: #42215b; - --token-color-palette-purple-400: #7b00db; - --token-color-palette-purple-300: #911ced; - --token-color-palette-purple-200: #a737ff; - --token-color-palette-purple-100: #ead2fe; - --token-color-palette-purple-50: #f9f2ff; - --token-color-palette-green-500: #054220; - --token-color-palette-green-400: #006619; - --token-color-palette-green-300: #00781e; - --token-color-palette-green-200: #008a22; - --token-color-palette-green-100: #cceeda; - --token-color-palette-green-50: #f2fbf6; - --token-color-palette-amber-500: #542800; - --token-color-palette-amber-400: #803d00; - --token-color-palette-amber-300: #9e4b00; - --token-color-palette-amber-200: #bb5a00; - --token-color-palette-amber-100: #fbeabf; - --token-color-palette-amber-50: #fff9e8; - --token-color-palette-red-500: #51130a; - --token-color-palette-red-400: #940004; - --token-color-palette-red-300: #c00005; - --token-color-palette-red-200: #e52228; - --token-color-palette-red-100: #fbd4d4; - --token-color-palette-red-50: #fff5f5; - --token-color-palette-neutral-700: #0c0c0e; - --token-color-palette-neutral-600: #3b3d45; - --token-color-palette-neutral-500: #656a76; - --token-color-palette-neutral-400: #8c909c; - --token-color-palette-neutral-300: #c2c5cb; - --token-color-palette-neutral-200: #dedfe3; - --token-color-palette-neutral-100: #f1f2f3; - --token-color-palette-neutral-50: #fafafa; - --token-color-palette-neutral-0: #ffffff; - --token-color-palette-alpha-300: #3b3d4566; - --token-color-palette-alpha-200: #656a7633; - --token-color-palette-alpha-100: #656a761a; - } -} - -:root { - --token-color-border-primary: #656a7633; - --token-color-border-faint: #656a761a; - --token-color-border-strong: #3b3d4566; - --token-color-border-action: #cce3fe; - --token-color-border-highlight: #ead2fe; - --token-color-border-success: #cceeda; - --token-color-border-warning: #fbeabf; - --token-color-border-critical: #fbd4d4; - --token-color-focus-action-internal: #0c56e9; - --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-critical-internal: #c00005; - --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-foreground-strong: #0c0c0e; - --token-color-foreground-primary: #3b3d45; - --token-color-foreground-faint: #656a76; - --token-color-foreground-high-contrast: #ffffff; - --token-color-foreground-disabled: #8c909c; - --token-color-foreground-action: #1060ff; - --token-color-foreground-action-hover: #0c56e9; - --token-color-foreground-action-active: #0046d1; - --token-color-foreground-highlight: #a737ff; - --token-color-foreground-highlight-on-surface: #911ced; - --token-color-foreground-highlight-high-contrast: #42215b; - --token-color-foreground-success: #008a22; - --token-color-foreground-success-on-surface: #00781e; - --token-color-foreground-success-high-contrast: #054220; - --token-color-foreground-warning: #bb5a00; - --token-color-foreground-warning-on-surface: #9e4b00; - --token-color-foreground-warning-high-contrast: #542800; - --token-color-foreground-critical: #e52228; - --token-color-foreground-critical-on-surface: #c00005; - --token-color-foreground-critical-high-contrast: #51130a; - --token-color-page-primary: #ffffff; - --token-color-page-faint: #fafafa; - --token-color-surface-primary: #ffffff; - --token-color-surface-faint: #fafafa; - --token-color-surface-strong: #f1f2f3; - --token-color-surface-interactive: #ffffff; - --token-color-surface-interactive-hover: #f1f2f3; - --token-color-surface-interactive-active: #dedfe3; - --token-color-surface-interactive-disabled: #fafafa; - --token-color-surface-action: #f2f8ff; - --token-color-surface-highlight: #f9f2ff; - --token-color-surface-success: #f2fbf6; - --token-color-surface-warning: #fff9e8; - --token-color-surface-critical: #fff5f5; - --token-color-hashicorp-brand: #000000; - --token-color-boundary-brand: #f24c53; - --token-color-boundary-foreground: #cf2d32; - --token-color-boundary-surface: #ffecec; - --token-color-boundary-border: #fbd7d8; - --token-color-boundary-gradient-primary-start: #f97076; - --token-color-boundary-gradient-primary-stop: #db363b; - --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-consul-brand: #e03875; - --token-color-consul-foreground: #d01c5b; - --token-color-consul-surface: #ffe9f1; - --token-color-consul-border: #ffcede; - --token-color-consul-gradient-primary-start: #ff99be; - --token-color-consul-gradient-primary-stop: #da306e; - --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-hcp-brand: #000000; - --token-color-nomad-brand: #06d092; - --token-color-nomad-foreground: #008661; - --token-color-nomad-surface: #d3fdeb; - --token-color-nomad-border: #bff3dd; - --token-color-nomad-gradient-primary-start: #bff3dd; - --token-color-nomad-gradient-primary-stop: #60dea9; - --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-packer-brand: #02a8ef; - --token-color-packer-foreground: #007eb4; - --token-color-packer-surface: #d4f2ff; - --token-color-packer-border: #b4e4ff; - --token-color-packer-gradient-primary-start: #b4e4ff; - --token-color-packer-gradient-primary-stop: #63d0ff; - --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-terraform-brand: #7b42bc; - --token-color-terraform-brand-on-dark: #a067da; /* this is an alternative brand color meant to be used on dark backgrounds */ - --token-color-terraform-foreground: #773cb4; - --token-color-terraform-surface: #f4ecff; - --token-color-terraform-border: #ebdbfc; - --token-color-terraform-gradient-primary-start: #bb8deb; - --token-color-terraform-gradient-primary-stop: #844fba; - --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-vagrant-brand: #1868f2; - --token-color-vagrant-foreground: #1c61d8; - --token-color-vagrant-surface: #d6ebff; - --token-color-vagrant-border: #c7dbfc; - --token-color-vagrant-gradient-primary-start: #639cff; - --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-foreground: #9a6f00; - --token-color-vault-radar-surface: #fff9cf; - --token-color-vault-radar-border: #feec7b; - --token-color-vault-radar-gradient-primary-start: #feec7b; - --token-color-vault-radar-gradient-primary-stop: #ffe543; - --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-secrets-brand: #ffcf25; - --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-color-vault-secrets-foreground: #9a6f00; - --token-color-vault-secrets-surface: #fff9cf; - --token-color-vault-secrets-border: #feec7b; - --token-color-vault-secrets-gradient-primary-start: #feec7b; - --token-color-vault-secrets-gradient-primary-stop: #ffe543; - --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-brand: #ffcf25; - --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-foreground: #9a6f00; - --token-color-vault-surface: #fff9cf; - --token-color-vault-border: #feec7b; - --token-color-vault-gradient-primary-start: #feec7b; - --token-color-vault-gradient-primary-stop: #ffe543; - --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-waypoint-brand: #14c6cb; - --token-color-waypoint-foreground: #008196; - --token-color-waypoint-surface: #e0fcff; - --token-color-waypoint-border: #cbf1f3; - --token-color-waypoint-gradient-primary-start: #cbf1f3; - --token-color-waypoint-gradient-primary-stop: #62d4dc; - --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-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-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-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, - 0px 12px 24px 0px #3b3d4559; - --token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, - inset 0px 1px 2px 1px #656a761a; - --token-surface-base-box-shadow: 0 0 0 1px #656a7633; - --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-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-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-header-height: 60px; - --token-app-header-home-link-size: 36px; - --token-app-header-logo-size: 28px; - --token-app-side-nav-wrapper-border-width: 1px; - --token-app-side-nav-wrapper-border-color: var( - --token-color-palette-neutral-200 - ); - --token-app-side-nav-wrapper-padding-horizontal: 16px; - --token-app-side-nav-wrapper-padding-vertical: 16px; - --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; - --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; - --token-app-side-nav-toggle-button-border-radius: 5px; - --token-app-side-nav-header-home-link-padding: 4px; - --token-app-side-nav-header-home-link-logo-size: 48px; - --token-app-side-nav-header-home-link-logo-size-minimized: 32px; - --token-app-side-nav-header-actions-spacing: 8px; - --token-app-side-nav-body-list-margin-vertical: 24px; - --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-item-content-spacing-horizontal: 8px; - --token-app-side-nav-body-list-item-border-radius: 5px; - --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-foreground-faint: var( - --token-color-foreground-faint - ); - --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: 7px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ - --token-badge-count-padding-horizontal-medium: 11px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ - --token-badge-count-padding-horizontal-large: 13px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ - --token-badge-height-small: 20px; - --token-badge-height-medium: 24px; - --token-badge-height-large: 32px; - --token-badge-padding-horizontal-small: 5px; /* here we're taking into account the 1px border */ - --token-badge-padding-horizontal-medium: 7px; /* here we're taking into account the 1px border */ - --token-badge-padding-horizontal-large: 7px; /* here we're taking into account the 1px border */ - --token-badge-padding-vertical-small: 1px; /* here we're taking into account the 1px border */ - --token-badge-padding-vertical-medium: 3px; /* here we're taking into account the 1px border */ - --token-badge-padding-vertical-large: 3px; /* here we're taking into account the 1px border */ - --token-badge-icon-size-small: 12px; - --token-badge-icon-size-medium: 16px; - --token-badge-icon-size-large: 16px; - --token-badge-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, - Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, - Segoe UI Symbol; - --token-badge-font-size-small: 0.8125rem; /* 13px/0.8125rem */ - --token-badge-font-size-medium: 0.8125rem; /* 13px/0.8125rem */ - --token-badge-font-size-large: 1rem; /* 16px/1rem */ - --token-badge-line-height-small: 1.2308; /* 16px */ - --token-badge-line-height-medium: 1.2308; /* 16px */ - --token-badge-line-height-large: 1.5; /* 24px */ - --token-badge-font-weight: 500; - --token-badge-gap-small: 4px; - --token-badge-gap-medium: 4px; - --token-badge-gap-large: 6px; - --token-badge-border-width: 1px; - --token-badge-border-radius: 5px; - --token-badge-filled-neutral-foreground-color: #3b3d45; - --token-badge-filled-neutral-background-color: #f1f2f3; - --token-badge-filled-neutral-dark-mode-foreground-color: #ffffff; - --token-badge-filled-neutral-dark-mode-background-color: #656a76; - --token-badge-filled-highlight-foreground-color: #911ced; - --token-badge-filled-highlight-background-color: #f9f2ff; - --token-badge-filled-success-foreground-color: #00781e; - --token-badge-filled-success-background-color: #f2fbf6; - --token-badge-filled-warning-foreground-color: #9e4b00; - --token-badge-filled-warning-background-color: #fff9e8; - --token-badge-filled-critical-foreground-color: #c00005; - --token-badge-filled-critical-background-color: #fff5f5; - --token-badge-inverted-neutral-foreground-color: #ffffff; - --token-badge-inverted-neutral-background-color: #656a76; - --token-badge-inverted-neutral-dark-mode-foreground-color: #3b3d45; - --token-badge-inverted-neutral-dark-mode-background-color: #fafafa; - --token-badge-inverted-highlight-foreground-color: #ffffff; - --token-badge-inverted-highlight-background-color: #a737ff; - --token-badge-inverted-success-foreground-color: #ffffff; - --token-badge-inverted-success-background-color: #008a22; - --token-badge-inverted-warning-foreground-color: #ffffff; - --token-badge-inverted-warning-background-color: #bb5a00; - --token-badge-inverted-critical-foreground-color: #ffffff; - --token-badge-inverted-critical-background-color: #e52228; - --token-badge-outlined-neutral-foreground-color: #3b3d45; - --token-badge-outlined-neutral-border-color: #656a76; - --token-badge-outlined-neutral-dark-mode-foreground-color: #ffffff; - --token-badge-outlined-neutral-dark-mode-border-color: #fafafa; - --token-badge-outlined-highlight-foreground-color: #a737ff; - --token-badge-outlined-highlight-border-color: #a737ff; - --token-badge-outlined-success-foreground-color: #008a22; - --token-badge-outlined-success-border-color: #008a22; - --token-badge-outlined-warning-foreground-color: #bb5a00; - --token-badge-outlined-warning-border-color: #bb5a00; - --token-badge-outlined-critical-foreground-color: #e52228; - --token-badge-outlined-critical-border-color: #e52228; - --token-button-critical-foreground-default: #c00005; - --token-button-critical-foreground-hover: #ffffff; - --token-button-critical-foreground-focus: #c00005; - --token-button-critical-foreground-active: #ffffff; - --token-button-critical-surface-default: #fff5f5; - --token-button-critical-surface-hover: #c00005; - --token-button-critical-surface-focus: #fff5f5; - --token-button-critical-surface-active: #940004; - --token-button-critical-border-color-default: #c00005; - --token-button-critical-border-color-hover: #940004; - --token-button-critical-border-color-focus: #c00005; - --token-button-critical-border-color-active: #940004; - --token-button-critical-box-shadow-default: 0px 1px 1px 0px #656a760d, - 0px 2px 2px 0px #656a760d; - --token-button-critical-box-shadow-focus: none; - --token-button-critical-box-shadow-active: none; - --token-button-disabled-foreground: #8c909c; - --token-button-disabled-surface: #fafafa; - --token-button-disabled-border-color: #656a7633; - --token-button-disabled-box-shadow: none; - --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-icon-size-small: 12px; - --token-button-icon-size-medium: 16px; - --token-button-icon-size-large: 24px; - --token-button-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, - Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, - Segoe UI Symbol; - --token-button-font-size-small: 0.8125rem; /* 13px/0.8125rem */ - --token-button-font-size-medium: 0.875rem; /* 14px/0.875rem */ - --token-button-font-size-large: 1rem; /* 16px/1rem */ - --token-button-line-height-small: 1.0769; /* 14px - 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-line-height-medium: 1.1428; /* 16px */ - --token-button-line-height-large: 1.5; /* 24px */ - --token-button-font-weight: 400; /* notice: we set the font-weight of the button text to 'regular' (on purpose) because of the antialising of the browser that renders the text quite different from what it looks like in Figma, so we prefer to have them visually similar even if they differ in their internal implementation (in Figma the font-weight is medium/500) - for more context about this decision: https://hashicorp.atlassian.net/browse/HDS-2099 */ - --token-button-gap: 6px; - --token-button-border-width: 1px; - --token-button-border-radius: 5px; - --token-button-box-shadow-focus: none; - --token-button-focus-border-width: 3px; - --token-button-focus-border-radius: 0px; - --token-button-primary-foreground-default: #ffffff; - --token-button-primary-foreground-hover: #ffffff; - --token-button-primary-foreground-focus: #ffffff; - --token-button-primary-foreground-active: #ffffff; - --token-button-primary-surface-default: #1060ff; - --token-button-primary-surface-hover: #0046d1; - --token-button-primary-surface-focus: #1060ff; - --token-button-primary-surface-active: #0046d1; - --token-button-primary-border-color-default: #0c56e9; - --token-button-primary-border-color-hover: #0046d1; - --token-button-primary-border-color-focus: #0c56e9; - --token-button-primary-border-color-active: #0046d1; - --token-button-primary-box-shadow-default: 0px 1px 1px 0px #656a760d, - 0px 2px 2px 0px #656a760d; - --token-button-primary-box-shadow-focus: none; - --token-button-primary-box-shadow-active: none; - --token-button-secondary-foreground-default: #3b3d45; - --token-button-secondary-foreground-hover: #3b3d45; - --token-button-secondary-foreground-focus: #3b3d45; - --token-button-secondary-foreground-active: #3b3d45; - --token-button-secondary-surface-default: #fafafa; - --token-button-secondary-surface-hover: #ffffff; - --token-button-secondary-surface-focus: #fafafa; - --token-button-secondary-surface-active: #dedfe3; - --token-button-secondary-border-color-default: #3b3d4566; - --token-button-secondary-border-color-hover: #3b3d4566; - --token-button-secondary-border-color-focus: #0c56e9; - --token-button-secondary-border-color-active: #3b3d4566; - --token-button-secondary-box-shadow-default: 0px 1px 1px 0px #656a760d, - 0px 2px 2px 0px #656a760d; - --token-button-secondary-box-shadow-focus: none; - --token-button-secondary-box-shadow-active: none; - --token-button-tertiary-foreground-default: #1060ff; - --token-button-tertiary-foreground-hover: #0c56e9; - --token-button-tertiary-foreground-focus: #1060ff; - --token-button-tertiary-foreground-active: #0046d1; - --token-button-tertiary-surface-default: rgba(0, 0, 0, 0); - --token-button-tertiary-surface-hover: #ffffff; - --token-button-tertiary-surface-focus: #ffffff; - --token-button-tertiary-surface-active: #dedfe3; - --token-button-tertiary-border-color-default: rgba(0, 0, 0, 0); - --token-button-tertiary-border-color-hover: #3b3d4566; - --token-button-tertiary-border-color-focus: #0c56e9; - --token-button-tertiary-border-color-active: #3b3d4566; - --token-button-tertiary-box-shadow-default: none; - --token-button-tertiary-box-shadow-focus: none; - --token-button-tertiary-box-shadow-active: none; - --token-form-label-color: #0c0c0e; - --token-form-legend-color: #0c0c0e; - --token-form-helper-text-color: #656a76; - --token-form-indicator-optional-color: #656a76; - --token-form-visibility-toggle-size: 24px; - --token-form-visibility-toggle-padding: 3px; /* here we're taking into account the 1px border */ - --token-form-visibility-toggle-color: #3b3d45; - --token-form-visibility-toggle-background-color: rgba(0, 0, 0, 0); - --token-form-visibility-toggle-border-width: 1px; - --token-form-visibility-toggle-border-color: rgba(0, 0, 0, 0); - --token-form-error-color: #c00005; - --token-form-error-icon-size: 14px; - --token-form-error-icon-margin-horizontal: 0px; - --token-form-error-icon-margin-vertical: 2px; /* This extra margin is used for vertical optical alignment. */ - --token-form-error-gap: 8px; - --token-form-checkbox-size: 16px; - --token-form-checkbox-border-radius: 3px; - --token-form-checkbox-border-width: 1px; - --token-form-checkbox-background-image-size: 12px; - --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-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-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-file-input-min-height: 32px; - --token-form-file-input-margin-right: 16px; - --token-form-control-base-foreground-value-color: #0c0c0e; - --token-form-control-base-foreground-placeholder-color: #656a76; - --token-form-control-base-surface-color-default: #ffffff; - --token-form-control-base-surface-color-hover: #f1f2f3; - --token-form-control-base-border-color-default: #8c909c; - --token-form-control-base-border-color-hover: #656a76; - --token-form-control-base-box-shadow-default: inset 0px 1px 2px 1px #656a761a; - --token-form-control-checked-foreground-color: #ffffff; - --token-form-control-checked-surface-color-default: #1060ff; - --token-form-control-checked-surface-color-hover: #0c56e9; - --token-form-control-checked-border-color-default: #0c56e9; - --token-form-control-checked-border-color-hover: #0046d1; - --token-form-control-invalid-border-color-default: #c00005; - --token-form-control-invalid-border-color-hover: #940004; - --token-form-control-invalid-outline-color: #dd7578; - --token-form-control-readonly-foreground-color: #3b3d45; - --token-form-control-readonly-surface-color: #f1f2f3; - --token-form-control-readonly-border-color: #656a761a; - --token-form-control-focus-outline-color: #5990ff; - --token-form-control-focus-outline-width: 3px; - --token-form-control-focus-outline-offset: 0px; - --token-form-control-disabled-foreground-color: #8c909c; - --token-form-control-disabled-surface-color: #fafafa; - --token-form-control-disabled-border-color: #656a7633; - --token-form-control-standard-height: 32px; /* Notice: we use this special token for elements that need to match the 'standard' height of an input element (because that height is actually the result of: text line height + vertical padding + border size). */ - --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-padding-with-icon: 31px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. We also consider extra 24px for the icon. */ - --token-form-control-border-radius: 5px; - --token-form-control-border-width: 1px; - --token-form-masked-input-toggle-button-size: 24px; - --token-form-masked-input-copy-button-margin-right: 8px; - --token-form-radio-size: 16px; - --token-form-radio-border-width: 1px; - --token-form-radio-background-image-size: 12px; - --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-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-outline-offset: 1px; - --token-form-radiocard-group-gap: 16px; - --token-form-radiocard-group-legend-margin-bottom: 12px; - --token-form-radiocard-border-width: 1px; - --token-form-radiocard-border-radius: 6px; - --token-form-radiocard-content-padding: 24px; - --token-form-radiocard-control-padding: 8px; - --token-form-radiocard-box-shadow-default: 0px 2px 3px 0px #656a761a, - 0px 8px 16px -10px #656a7633; - --token-form-radiocard-box-shadow-hover: 0px 2px 3px 0px #656a7626, - 0px 16px 16px -10px #656a7633; - --token-form-radiocard-box-shadow-focus: 0 0 0 3px #5990ff; /* This is a custom shadow used to add a focus ring around the card */ - --token-form-radiocard-box-shadow-disabled: none; - --token-form-radiocard-transition-duration: 0.2s; - --token-form-select-background-image-size: 16px; - --token-form-select-background-image-position-right-x: 7px; - --token-form-select-background-image-position-top-y: 9px; - --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-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-outline-offset: 0px; - --token-form-text-area-min-height: 32px; - --token-form-text-area-outline-offset: 0px; - --token-form-text-input-background-image-size: 16px; - --token-form-text-input-background-image-position-x: 7px; - --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-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-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-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-toggle-width: 32px; - --token-form-toggle-height: 16px; - --token-form-toggle-base-surface-color-default: #f1f2f3; /* 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-background-image-size: 12px; - --token-form-toggle-background-image-position-x: 2px; - --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-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-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-form-toggle-thumb-border-radius: 50%px; - --token-form-toggle-outline-width: 3px; - --token-form-toggle-outline-offset: 1px; - --token-outline-offset: 0px; - --token-pagination-nav-control-height: 36px; - --token-pagination-nav-control-padding-horizontal: 12px; - --token-pagination-nav-control-focus-inset: 4px; - --token-pagination-nav-control-icon-spacing: 6px; - --token-pagination-nav-indicator-height: 2px; - --token-pagination-nav-indicator-spacing: 6px; - --token-pagination-child-spacing-vertical: 8px; - --token-pagination-child-spacing-horizontal: 20px; - --token-side-nav-wrapper-border-width: 1px; - --token-side-nav-wrapper-border-color: #656a76; - --token-side-nav-wrapper-padding-horizontal: 16px; - --token-side-nav-wrapper-padding-vertical: 16px; - --token-side-nav-wrapper-padding-horizontal-minimized: 8px; - --token-side-nav-wrapper-padding-vertical-minimized: 22px; - --token-side-nav-toggle-button-border-radius: 5px; - --token-side-nav-header-home-link-padding: 4px; - --token-side-nav-header-home-link-logo-size: 48px; - --token-side-nav-header-home-link-logo-size-minimized: 32px; - --token-side-nav-header-actions-spacing: 8px; - --token-side-nav-body-list-margin-vertical: 24px; - --token-side-nav-body-list-item-height: 36px; - --token-side-nav-body-list-item-padding-horizontal: 8px; - --token-side-nav-body-list-item-padding-vertical: 4px; - --token-side-nav-body-list-item-spacing-vertical: 2px; - --token-side-nav-body-list-item-content-spacing-horizontal: 8px; - --token-side-nav-body-list-item-border-radius: 5px; - --token-side-nav-color-foreground-primary: #dedfe3; - --token-side-nav-color-foreground-strong: #ffffff; - --token-side-nav-color-foreground-faint: #8c909c; - --token-side-nav-color-surface-primary: #0c0c0e; - --token-side-nav-color-surface-interactive-hover: #3b3d45; - --token-side-nav-color-surface-interactive-active: #656a76; - --token-tabs-tab-height-medium: 36px; - --token-tabs-tab-height-large: 48px; - --token-tabs-tab-padding-horizontal-medium: 12px; - --token-tabs-tab-padding-horizontal-large: 20px; - --token-tabs-tab-padding-vertical: 0px; - --token-tabs-tab-border-radius: 5px; - --token-tabs-tab-focus-inset: 6px; - --token-tabs-tab-gutter: 6px; - --token-tabs-indicator-height: 3px; - --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-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; - --token-typography-font-stack-code: ui-monospace, Menlo, Consolas, monospace; - --token-typography-font-weight-regular: 400; - --token-typography-font-weight-medium: 500; - --token-typography-font-weight-semibold: 600; - --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: 1.875rem; /* 30px/1.875rem */ - --token-typography-display-500-line-height: 1.2666; /* 38px */ - --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-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-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-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-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 */ - --token-typography-body-200-font-family: -apple-system, BlinkMacSystemFont, - Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, - Segoe UI Symbol; - --token-typography-body-200-font-size: 0.875rem; /* 14px/0.875rem */ - --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: 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 */ -} diff --git a/packages/tokens/expected-CSS-output/generated/themed-tokens-with-root-selector/common-tokens.css b/packages/tokens/expected-CSS-output/generated/themed-tokens-with-root-selector/common-tokens.css deleted file mode 100644 index 8d45c44eceb..00000000000 --- a/packages/tokens/expected-CSS-output/generated/themed-tokens-with-root-selector/common-tokens.css +++ /dev/null @@ -1,528 +0,0 @@ -:root { - --token-color-border-primary: #656a7633; - --token-color-border-faint: #656a761a; - --token-color-border-strong: #3b3d4566; - --token-color-border-action: #cce3fe; - --token-color-border-highlight: #ead2fe; - --token-color-border-success: #cceeda; - --token-color-border-warning: #fbeabf; - --token-color-border-critical: #fbd4d4; - --token-color-focus-action-internal: #0c56e9; - --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-critical-internal: #c00005; - --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-foreground-strong: #0c0c0e; - --token-color-foreground-primary: #3b3d45; - --token-color-foreground-faint: #656a76; - --token-color-foreground-high-contrast: #ffffff; - --token-color-foreground-disabled: #8c909c; - --token-color-foreground-action: #1060ff; - --token-color-foreground-action-hover: #0c56e9; - --token-color-foreground-action-active: #0046d1; - --token-color-foreground-highlight: #a737ff; - --token-color-foreground-highlight-on-surface: #911ced; - --token-color-foreground-highlight-high-contrast: #42215b; - --token-color-foreground-success: #008a22; - --token-color-foreground-success-on-surface: #00781e; - --token-color-foreground-success-high-contrast: #054220; - --token-color-foreground-warning: #bb5a00; - --token-color-foreground-warning-on-surface: #9e4b00; - --token-color-foreground-warning-high-contrast: #542800; - --token-color-foreground-critical: #e52228; - --token-color-foreground-critical-on-surface: #c00005; - --token-color-foreground-critical-high-contrast: #51130a; - --token-color-page-primary: #ffffff; - --token-color-page-faint: #fafafa; - --token-color-surface-primary: #ffffff; - --token-color-surface-faint: #fafafa; - --token-color-surface-strong: #f1f2f3; - --token-color-surface-interactive: #ffffff; - --token-color-surface-interactive-hover: #f1f2f3; - --token-color-surface-interactive-active: #dedfe3; - --token-color-surface-interactive-disabled: #fafafa; - --token-color-surface-action: #f2f8ff; - --token-color-surface-highlight: #f9f2ff; - --token-color-surface-success: #f2fbf6; - --token-color-surface-warning: #fff9e8; - --token-color-surface-critical: #fff5f5; - --token-color-hashicorp-brand: #000000; - --token-color-boundary-brand: #f24c53; - --token-color-boundary-foreground: #cf2d32; - --token-color-boundary-surface: #ffecec; - --token-color-boundary-border: #fbd7d8; - --token-color-boundary-gradient-primary-start: #f97076; - --token-color-boundary-gradient-primary-stop: #db363b; - --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-consul-brand: #e03875; - --token-color-consul-foreground: #d01c5b; - --token-color-consul-surface: #ffe9f1; - --token-color-consul-border: #ffcede; - --token-color-consul-gradient-primary-start: #ff99be; - --token-color-consul-gradient-primary-stop: #da306e; - --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-hcp-brand: #000000; - --token-color-nomad-brand: #06d092; - --token-color-nomad-foreground: #008661; - --token-color-nomad-surface: #d3fdeb; - --token-color-nomad-border: #bff3dd; - --token-color-nomad-gradient-primary-start: #bff3dd; - --token-color-nomad-gradient-primary-stop: #60dea9; - --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-packer-brand: #02a8ef; - --token-color-packer-foreground: #007eb4; - --token-color-packer-surface: #d4f2ff; - --token-color-packer-border: #b4e4ff; - --token-color-packer-gradient-primary-start: #b4e4ff; - --token-color-packer-gradient-primary-stop: #63d0ff; - --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-terraform-brand: #7b42bc; - --token-color-terraform-brand-on-dark: #a067da; /* this is an alternative brand color meant to be used on dark backgrounds */ - --token-color-terraform-foreground: #773cb4; - --token-color-terraform-surface: #f4ecff; - --token-color-terraform-border: #ebdbfc; - --token-color-terraform-gradient-primary-start: #bb8deb; - --token-color-terraform-gradient-primary-stop: #844fba; - --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-vagrant-brand: #1868f2; - --token-color-vagrant-foreground: #1c61d8; - --token-color-vagrant-surface: #d6ebff; - --token-color-vagrant-border: #c7dbfc; - --token-color-vagrant-gradient-primary-start: #639cff; - --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-foreground: #9a6f00; - --token-color-vault-radar-surface: #fff9cf; - --token-color-vault-radar-border: #feec7b; - --token-color-vault-radar-gradient-primary-start: #feec7b; - --token-color-vault-radar-gradient-primary-stop: #ffe543; - --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-secrets-brand: #ffcf25; - --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-color-vault-secrets-foreground: #9a6f00; - --token-color-vault-secrets-surface: #fff9cf; - --token-color-vault-secrets-border: #feec7b; - --token-color-vault-secrets-gradient-primary-start: #feec7b; - --token-color-vault-secrets-gradient-primary-stop: #ffe543; - --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-brand: #ffcf25; - --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-foreground: #9a6f00; - --token-color-vault-surface: #fff9cf; - --token-color-vault-border: #feec7b; - --token-color-vault-gradient-primary-start: #feec7b; - --token-color-vault-gradient-primary-stop: #ffe543; - --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-waypoint-brand: #14c6cb; - --token-color-waypoint-foreground: #008196; - --token-color-waypoint-surface: #e0fcff; - --token-color-waypoint-border: #cbf1f3; - --token-color-waypoint-gradient-primary-start: #cbf1f3; - --token-color-waypoint-gradient-primary-stop: #62d4dc; - --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-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-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-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; - --token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a; - --token-surface-base-box-shadow: 0 0 0 1px #656a7633; - --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-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-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-header-height: 60px; - --token-app-header-home-link-size: 36px; - --token-app-header-logo-size: 28px; - --token-app-side-nav-wrapper-border-width: 1px; - --token-app-side-nav-wrapper-border-color: var(--token-color-palette-neutral-200); - --token-app-side-nav-wrapper-padding-horizontal: 16px; - --token-app-side-nav-wrapper-padding-vertical: 16px; - --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; - --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; - --token-app-side-nav-toggle-button-border-radius: 5px; - --token-app-side-nav-header-home-link-padding: 4px; - --token-app-side-nav-header-home-link-logo-size: 48px; - --token-app-side-nav-header-home-link-logo-size-minimized: 32px; - --token-app-side-nav-header-actions-spacing: 8px; - --token-app-side-nav-body-list-margin-vertical: 24px; - --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-item-content-spacing-horizontal: 8px; - --token-app-side-nav-body-list-item-border-radius: 5px; - --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-foreground-faint: var(--token-color-foreground-faint); - --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: 7px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ - --token-badge-count-padding-horizontal-medium: 11px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ - --token-badge-count-padding-horizontal-large: 13px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ - --token-badge-height-small: 20px; - --token-badge-height-medium: 24px; - --token-badge-height-large: 32px; - --token-badge-padding-horizontal-small: 5px; /* here we're taking into account the 1px border */ - --token-badge-padding-horizontal-medium: 7px; /* here we're taking into account the 1px border */ - --token-badge-padding-horizontal-large: 7px; /* here we're taking into account the 1px border */ - --token-badge-padding-vertical-small: 1px; /* here we're taking into account the 1px border */ - --token-badge-padding-vertical-medium: 3px; /* here we're taking into account the 1px border */ - --token-badge-padding-vertical-large: 3px; /* here we're taking into account the 1px border */ - --token-badge-icon-size-small: 12px; - --token-badge-icon-size-medium: 16px; - --token-badge-icon-size-large: 16px; - --token-badge-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - --token-badge-font-size-small: 0.8125rem; /* 13px/0.8125rem */ - --token-badge-font-size-medium: 0.8125rem; /* 13px/0.8125rem */ - --token-badge-font-size-large: 1rem; /* 16px/1rem */ - --token-badge-line-height-small: 1.2308; /* 16px */ - --token-badge-line-height-medium: 1.2308; /* 16px */ - --token-badge-line-height-large: 1.5; /* 24px */ - --token-badge-font-weight: 500; - --token-badge-gap-small: 4px; - --token-badge-gap-medium: 4px; - --token-badge-gap-large: 6px; - --token-badge-border-width: 1px; - --token-badge-border-radius: 5px; - --token-badge-filled-neutral-foreground-color: #3b3d45; - --token-badge-filled-neutral-background-color: #f1f2f3; - --token-badge-filled-neutral-dark-mode-foreground-color: #ffffff; - --token-badge-filled-neutral-dark-mode-background-color: #656a76; - --token-badge-filled-highlight-foreground-color: #911ced; - --token-badge-filled-highlight-background-color: #f9f2ff; - --token-badge-filled-success-foreground-color: #00781e; - --token-badge-filled-success-background-color: #f2fbf6; - --token-badge-filled-warning-foreground-color: #9e4b00; - --token-badge-filled-warning-background-color: #fff9e8; - --token-badge-filled-critical-foreground-color: #c00005; - --token-badge-filled-critical-background-color: #fff5f5; - --token-badge-inverted-neutral-foreground-color: #ffffff; - --token-badge-inverted-neutral-background-color: #656a76; - --token-badge-inverted-neutral-dark-mode-foreground-color: #3b3d45; - --token-badge-inverted-neutral-dark-mode-background-color: #fafafa; - --token-badge-inverted-highlight-foreground-color: #ffffff; - --token-badge-inverted-highlight-background-color: #a737ff; - --token-badge-inverted-success-foreground-color: #ffffff; - --token-badge-inverted-success-background-color: #008a22; - --token-badge-inverted-warning-foreground-color: #ffffff; - --token-badge-inverted-warning-background-color: #bb5a00; - --token-badge-inverted-critical-foreground-color: #ffffff; - --token-badge-inverted-critical-background-color: #e52228; - --token-badge-outlined-neutral-foreground-color: #3b3d45; - --token-badge-outlined-neutral-border-color: #656a76; - --token-badge-outlined-neutral-dark-mode-foreground-color: #ffffff; - --token-badge-outlined-neutral-dark-mode-border-color: #fafafa; - --token-badge-outlined-highlight-foreground-color: #a737ff; - --token-badge-outlined-highlight-border-color: #a737ff; - --token-badge-outlined-success-foreground-color: #008a22; - --token-badge-outlined-success-border-color: #008a22; - --token-badge-outlined-warning-foreground-color: #bb5a00; - --token-badge-outlined-warning-border-color: #bb5a00; - --token-badge-outlined-critical-foreground-color: #e52228; - --token-badge-outlined-critical-border-color: #e52228; - --token-button-critical-foreground-default: #c00005; - --token-button-critical-foreground-hover: #ffffff; - --token-button-critical-foreground-focus: #c00005; - --token-button-critical-foreground-active: #ffffff; - --token-button-critical-surface-default: #fff5f5; - --token-button-critical-surface-hover: #c00005; - --token-button-critical-surface-focus: #fff5f5; - --token-button-critical-surface-active: #940004; - --token-button-critical-border-color-default: #c00005; - --token-button-critical-border-color-hover: #940004; - --token-button-critical-border-color-focus: #c00005; - --token-button-critical-border-color-active: #940004; - --token-button-critical-box-shadow-default: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; - --token-button-critical-box-shadow-focus: none; - --token-button-critical-box-shadow-active: none; - --token-button-disabled-foreground: #8c909c; - --token-button-disabled-surface: #fafafa; - --token-button-disabled-border-color: #656a7633; - --token-button-disabled-box-shadow: none; - --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-icon-size-small: 12px; - --token-button-icon-size-medium: 16px; - --token-button-icon-size-large: 24px; - --token-button-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - --token-button-font-size-small: 0.8125rem; /* 13px/0.8125rem */ - --token-button-font-size-medium: 0.875rem; /* 14px/0.875rem */ - --token-button-font-size-large: 1rem; /* 16px/1rem */ - --token-button-line-height-small: 1.0769; /* 14px - 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-line-height-medium: 1.1428; /* 16px */ - --token-button-line-height-large: 1.5; /* 24px */ - --token-button-font-weight: 400; /* notice: we set the font-weight of the button text to 'regular' (on purpose) because of the antialising of the browser that renders the text quite different from what it looks like in Figma, so we prefer to have them visually similar even if they differ in their internal implementation (in Figma the font-weight is medium/500) - for more context about this decision: https://hashicorp.atlassian.net/browse/HDS-2099 */ - --token-button-gap: 6px; - --token-button-border-width: 1px; - --token-button-border-radius: 5px; - --token-button-box-shadow-focus: none; - --token-button-focus-border-width: 3px; - --token-button-focus-border-radius: 0px; - --token-button-primary-foreground-default: #ffffff; - --token-button-primary-foreground-hover: #ffffff; - --token-button-primary-foreground-focus: #ffffff; - --token-button-primary-foreground-active: #ffffff; - --token-button-primary-surface-default: #1060ff; - --token-button-primary-surface-hover: #0046d1; - --token-button-primary-surface-focus: #1060ff; - --token-button-primary-surface-active: #0046d1; - --token-button-primary-border-color-default: #0c56e9; - --token-button-primary-border-color-hover: #0046d1; - --token-button-primary-border-color-focus: #0c56e9; - --token-button-primary-border-color-active: #0046d1; - --token-button-primary-box-shadow-default: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; - --token-button-primary-box-shadow-focus: none; - --token-button-primary-box-shadow-active: none; - --token-button-secondary-foreground-default: #3b3d45; - --token-button-secondary-foreground-hover: #3b3d45; - --token-button-secondary-foreground-focus: #3b3d45; - --token-button-secondary-foreground-active: #3b3d45; - --token-button-secondary-surface-default: #fafafa; - --token-button-secondary-surface-hover: #ffffff; - --token-button-secondary-surface-focus: #fafafa; - --token-button-secondary-surface-active: #dedfe3; - --token-button-secondary-border-color-default: #3b3d4566; - --token-button-secondary-border-color-hover: #3b3d4566; - --token-button-secondary-border-color-focus: #0c56e9; - --token-button-secondary-border-color-active: #3b3d4566; - --token-button-secondary-box-shadow-default: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; - --token-button-secondary-box-shadow-focus: none; - --token-button-secondary-box-shadow-active: none; - --token-button-tertiary-foreground-default: #1060ff; - --token-button-tertiary-foreground-hover: #0c56e9; - --token-button-tertiary-foreground-focus: #1060ff; - --token-button-tertiary-foreground-active: #0046d1; - --token-button-tertiary-surface-default: rgba(0, 0, 0, 0); - --token-button-tertiary-surface-hover: #ffffff; - --token-button-tertiary-surface-focus: #ffffff; - --token-button-tertiary-surface-active: #dedfe3; - --token-button-tertiary-border-color-default: rgba(0, 0, 0, 0); - --token-button-tertiary-border-color-hover: #3b3d4566; - --token-button-tertiary-border-color-focus: #0c56e9; - --token-button-tertiary-border-color-active: #3b3d4566; - --token-button-tertiary-box-shadow-default: none; - --token-button-tertiary-box-shadow-focus: none; - --token-button-tertiary-box-shadow-active: none; - --token-form-label-color: #0c0c0e; - --token-form-legend-color: #0c0c0e; - --token-form-helper-text-color: #656a76; - --token-form-indicator-optional-color: #656a76; - --token-form-visibility-toggle-size: 24px; - --token-form-visibility-toggle-padding: 3px; /* here we're taking into account the 1px border */ - --token-form-visibility-toggle-color: #3b3d45; - --token-form-visibility-toggle-background-color: rgba(0, 0, 0, 0); - --token-form-visibility-toggle-border-width: 1px; - --token-form-visibility-toggle-border-color: rgba(0, 0, 0, 0); - --token-form-error-color: #c00005; - --token-form-error-icon-size: 14px; - --token-form-error-icon-margin-horizontal: 0px; - --token-form-error-icon-margin-vertical: 2px; /* This extra margin is used for vertical optical alignment. */ - --token-form-error-gap: 8px; - --token-form-checkbox-size: 16px; - --token-form-checkbox-border-radius: 3px; - --token-form-checkbox-border-width: 1px; - --token-form-checkbox-background-image-size: 12px; - --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-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-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-file-input-min-height: 32px; - --token-form-file-input-margin-right: 16px; - --token-form-control-base-foreground-value-color: #0c0c0e; - --token-form-control-base-foreground-placeholder-color: #656a76; - --token-form-control-base-surface-color-default: #ffffff; - --token-form-control-base-surface-color-hover: #f1f2f3; - --token-form-control-base-border-color-default: #8c909c; - --token-form-control-base-border-color-hover: #656a76; - --token-form-control-base-box-shadow-default: inset 0px 1px 2px 1px #656a761a; - --token-form-control-checked-foreground-color: #ffffff; - --token-form-control-checked-surface-color-default: #1060ff; - --token-form-control-checked-surface-color-hover: #0c56e9; - --token-form-control-checked-border-color-default: #0c56e9; - --token-form-control-checked-border-color-hover: #0046d1; - --token-form-control-invalid-border-color-default: #c00005; - --token-form-control-invalid-border-color-hover: #940004; - --token-form-control-invalid-outline-color: #dd7578; - --token-form-control-readonly-foreground-color: #3b3d45; - --token-form-control-readonly-surface-color: #f1f2f3; - --token-form-control-readonly-border-color: #656a761a; - --token-form-control-focus-outline-color: #5990ff; - --token-form-control-focus-outline-width: 3px; - --token-form-control-focus-outline-offset: 0px; - --token-form-control-disabled-foreground-color: #8c909c; - --token-form-control-disabled-surface-color: #fafafa; - --token-form-control-disabled-border-color: #656a7633; - --token-form-control-standard-height: 32px; /* Notice: we use this special token for elements that need to match the 'standard' height of an input element (because that height is actually the result of: text line height + vertical padding + border size). */ - --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-padding-with-icon: 31px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. We also consider extra 24px for the icon. */ - --token-form-control-border-radius: 5px; - --token-form-control-border-width: 1px; - --token-form-masked-input-toggle-button-size: 24px; - --token-form-masked-input-copy-button-margin-right: 8px; - --token-form-radio-size: 16px; - --token-form-radio-border-width: 1px; - --token-form-radio-background-image-size: 12px; - --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-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-outline-offset: 1px; - --token-form-radiocard-group-gap: 16px; - --token-form-radiocard-group-legend-margin-bottom: 12px; - --token-form-radiocard-border-width: 1px; - --token-form-radiocard-border-radius: 6px; - --token-form-radiocard-content-padding: 24px; - --token-form-radiocard-control-padding: 8px; - --token-form-radiocard-box-shadow-default: 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633; - --token-form-radiocard-box-shadow-hover: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633; - --token-form-radiocard-box-shadow-focus: 0 0 0 3px #5990ff; /* This is a custom shadow used to add a focus ring around the card */ - --token-form-radiocard-box-shadow-disabled: none; - --token-form-radiocard-transition-duration: 0.2s; - --token-form-select-background-image-size: 16px; - --token-form-select-background-image-position-right-x: 7px; - --token-form-select-background-image-position-top-y: 9px; - --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-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-outline-offset: 0px; - --token-form-text-area-min-height: 32px; - --token-form-text-area-outline-offset: 0px; - --token-form-text-input-background-image-size: 16px; - --token-form-text-input-background-image-position-x: 7px; - --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-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-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-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-toggle-width: 32px; - --token-form-toggle-height: 16px; - --token-form-toggle-base-surface-color-default: #f1f2f3; /* 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-background-image-size: 12px; - --token-form-toggle-background-image-position-x: 2px; - --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-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-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-form-toggle-thumb-border-radius: 50%px; - --token-form-toggle-outline-width: 3px; - --token-form-toggle-outline-offset: 1px; - --token-outline-offset: 0px; - --token-pagination-nav-control-height: 36px; - --token-pagination-nav-control-padding-horizontal: 12px; - --token-pagination-nav-control-focus-inset: 4px; - --token-pagination-nav-control-icon-spacing: 6px; - --token-pagination-nav-indicator-height: 2px; - --token-pagination-nav-indicator-spacing: 6px; - --token-pagination-child-spacing-vertical: 8px; - --token-pagination-child-spacing-horizontal: 20px; - --token-side-nav-wrapper-border-width: 1px; - --token-side-nav-wrapper-border-color: #656a76; - --token-side-nav-wrapper-padding-horizontal: 16px; - --token-side-nav-wrapper-padding-vertical: 16px; - --token-side-nav-wrapper-padding-horizontal-minimized: 8px; - --token-side-nav-wrapper-padding-vertical-minimized: 22px; - --token-side-nav-toggle-button-border-radius: 5px; - --token-side-nav-header-home-link-padding: 4px; - --token-side-nav-header-home-link-logo-size: 48px; - --token-side-nav-header-home-link-logo-size-minimized: 32px; - --token-side-nav-header-actions-spacing: 8px; - --token-side-nav-body-list-margin-vertical: 24px; - --token-side-nav-body-list-item-height: 36px; - --token-side-nav-body-list-item-padding-horizontal: 8px; - --token-side-nav-body-list-item-padding-vertical: 4px; - --token-side-nav-body-list-item-spacing-vertical: 2px; - --token-side-nav-body-list-item-content-spacing-horizontal: 8px; - --token-side-nav-body-list-item-border-radius: 5px; - --token-side-nav-color-foreground-primary: #dedfe3; - --token-side-nav-color-foreground-strong: #ffffff; - --token-side-nav-color-foreground-faint: #8c909c; - --token-side-nav-color-surface-primary: #0c0c0e; - --token-side-nav-color-surface-interactive-hover: #3b3d45; - --token-side-nav-color-surface-interactive-active: #656a76; - --token-tabs-tab-height-medium: 36px; - --token-tabs-tab-height-large: 48px; - --token-tabs-tab-padding-horizontal-medium: 12px; - --token-tabs-tab-padding-horizontal-large: 20px; - --token-tabs-tab-padding-vertical: 0px; - --token-tabs-tab-border-radius: 5px; - --token-tabs-tab-focus-inset: 6px; - --token-tabs-tab-gutter: 6px; - --token-tabs-indicator-height: 3px; - --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-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; - --token-typography-font-stack-code: ui-monospace, Menlo, Consolas, monospace; - --token-typography-font-weight-regular: 400; - --token-typography-font-weight-medium: 500; - --token-typography-font-weight-semibold: 600; - --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: 1.875rem; /* 30px/1.875rem */ - --token-typography-display-500-line-height: 1.2666; /* 38px */ - --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-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-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-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-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 */ - --token-typography-body-200-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - --token-typography-body-200-font-size: 0.875rem; /* 14px/0.875rem */ - --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: 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 */ -} diff --git a/packages/tokens/expected-CSS-output/generated/themed-tokens-with-root-selector/dark-tokens.css b/packages/tokens/expected-CSS-output/generated/themed-tokens-with-root-selector/dark-tokens.css deleted file mode 100644 index f742f113858..00000000000 --- a/packages/tokens/expected-CSS-output/generated/themed-tokens-with-root-selector/dark-tokens.css +++ /dev/null @@ -1,44 +0,0 @@ -:root { - --token-color-palette-blue-500: #1c345f; - --token-color-palette-blue-400: #0046d1; - --token-color-palette-blue-300: #0c56e9; - --token-color-palette-blue-200: #1060ff; - --token-color-palette-blue-100: #cce3fe; - --token-color-palette-blue-50: #f2f8ff; - --token-color-palette-purple-500: #42215b; - --token-color-palette-purple-400: #7b00db; - --token-color-palette-purple-300: #911ced; - --token-color-palette-purple-200: #a737ff; - --token-color-palette-purple-100: #ead2fe; - --token-color-palette-purple-50: #f9f2ff; - --token-color-palette-green-500: #054220; - --token-color-palette-green-400: #006619; - --token-color-palette-green-300: #00781e; - --token-color-palette-green-200: #008a22; - --token-color-palette-green-100: #cceeda; - --token-color-palette-green-50: #f2fbf6; - --token-color-palette-amber-500: #542800; - --token-color-palette-amber-400: #803d00; - --token-color-palette-amber-300: #9e4b00; - --token-color-palette-amber-200: #bb5a00; - --token-color-palette-amber-100: #fbeabf; - --token-color-palette-amber-50: #fff9e8; - --token-color-palette-red-500: #51130a; - --token-color-palette-red-400: #940004; - --token-color-palette-red-300: #c00005; - --token-color-palette-red-200: #e52228; - --token-color-palette-red-100: #fbd4d4; - --token-color-palette-red-50: #fff5f5; - --token-color-palette-neutral-700: #0c0c0e; - --token-color-palette-neutral-600: #3b3d45; - --token-color-palette-neutral-500: #656a76; - --token-color-palette-neutral-400: #8c909c; - --token-color-palette-neutral-300: #c2c5cb; - --token-color-palette-neutral-200: #dedfe3; - --token-color-palette-neutral-100: #f1f2f3; - --token-color-palette-neutral-50: #fafafa; - --token-color-palette-neutral-0: #ffffff; - --token-color-palette-alpha-300: #3b3d4566; - --token-color-palette-alpha-200: #656a7633; - --token-color-palette-alpha-100: #656a761a; -} diff --git a/packages/tokens/expected-CSS-output/generated/themed-tokens-with-root-selector/light-tokens.css b/packages/tokens/expected-CSS-output/generated/themed-tokens-with-root-selector/light-tokens.css deleted file mode 100644 index f742f113858..00000000000 --- a/packages/tokens/expected-CSS-output/generated/themed-tokens-with-root-selector/light-tokens.css +++ /dev/null @@ -1,44 +0,0 @@ -:root { - --token-color-palette-blue-500: #1c345f; - --token-color-palette-blue-400: #0046d1; - --token-color-palette-blue-300: #0c56e9; - --token-color-palette-blue-200: #1060ff; - --token-color-palette-blue-100: #cce3fe; - --token-color-palette-blue-50: #f2f8ff; - --token-color-palette-purple-500: #42215b; - --token-color-palette-purple-400: #7b00db; - --token-color-palette-purple-300: #911ced; - --token-color-palette-purple-200: #a737ff; - --token-color-palette-purple-100: #ead2fe; - --token-color-palette-purple-50: #f9f2ff; - --token-color-palette-green-500: #054220; - --token-color-palette-green-400: #006619; - --token-color-palette-green-300: #00781e; - --token-color-palette-green-200: #008a22; - --token-color-palette-green-100: #cceeda; - --token-color-palette-green-50: #f2fbf6; - --token-color-palette-amber-500: #542800; - --token-color-palette-amber-400: #803d00; - --token-color-palette-amber-300: #9e4b00; - --token-color-palette-amber-200: #bb5a00; - --token-color-palette-amber-100: #fbeabf; - --token-color-palette-amber-50: #fff9e8; - --token-color-palette-red-500: #51130a; - --token-color-palette-red-400: #940004; - --token-color-palette-red-300: #c00005; - --token-color-palette-red-200: #e52228; - --token-color-palette-red-100: #fbd4d4; - --token-color-palette-red-50: #fff5f5; - --token-color-palette-neutral-700: #0c0c0e; - --token-color-palette-neutral-600: #3b3d45; - --token-color-palette-neutral-500: #656a76; - --token-color-palette-neutral-400: #8c909c; - --token-color-palette-neutral-300: #c2c5cb; - --token-color-palette-neutral-200: #dedfe3; - --token-color-palette-neutral-100: #f1f2f3; - --token-color-palette-neutral-50: #fafafa; - --token-color-palette-neutral-0: #ffffff; - --token-color-palette-alpha-300: #3b3d4566; - --token-color-palette-alpha-200: #656a7633; - --token-color-palette-alpha-100: #656a761a; -} From 46676c3b52422a7bd4ddeee5f81399319748eec6 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 9 Oct 2025 15:52:42 +0100 Subject: [PATCH 029/224] REVERT - added `expected-CSS-output` files This reverts commit 7462defbc6b5a3ce3d166176ccbd50cbd7072fb9. --- .../tokens.css | 43 ------------------- .../tokens.css | 41 ------------------ .../common-tokens.css | 9 ---- .../dark-tokens.css | 8 ---- .../light-tokens.css | 8 ---- .../products/css/tokens.css | 15 ------- 6 files changed, 124 deletions(-) delete mode 100644 packages/tokens/expected-CSS-output/products/css/themed-tokens-with-css-selectors/tokens.css delete mode 100644 packages/tokens/expected-CSS-output/products/css/themed-tokens-with-prefers-color-scheme/tokens.css delete mode 100644 packages/tokens/expected-CSS-output/products/css/themed-tokens-with-root-selector/common-tokens.css delete mode 100644 packages/tokens/expected-CSS-output/products/css/themed-tokens-with-root-selector/dark-tokens.css delete mode 100644 packages/tokens/expected-CSS-output/products/css/themed-tokens-with-root-selector/light-tokens.css delete mode 100644 packages/tokens/expected-CSS-output/products/css/tokens.css diff --git a/packages/tokens/expected-CSS-output/products/css/themed-tokens-with-css-selectors/tokens.css b/packages/tokens/expected-CSS-output/products/css/themed-tokens-with-css-selectors/tokens.css deleted file mode 100644 index f6e323d708c..00000000000 --- a/packages/tokens/expected-CSS-output/products/css/themed-tokens-with-css-selectors/tokens.css +++ /dev/null @@ -1,43 +0,0 @@ -/* These are the light-theme tokens */ - -.shw-theme-light, -[data-shw-theme="light"] { - :root { - --token-color-palette-blue-500: #1c345f; - --token-color-palette-blue-400: #0046d1; - --token-color-palette-blue-300: #0c56e9; - --token-color-palette-blue-200: #1060ff; - --token-color-palette-blue-100: #cce3fe; - --token-color-palette-blue-50: #f2f8ff; - } -} - -/* --------------------------------------- */ - -/* These are the dark-theme tokens */ - -.shw-theme-dark, -[data-shw-theme="dark"] { - :root { - --token-color-palette-blue-500: #f2f8ff; - --token-color-palette-blue-400: #cce3fe; - --token-color-palette-blue-300: #1060ff; - --token-color-palette-blue-200: #0c56e9; - --token-color-palette-blue-100: #0046d1; - --token-color-palette-blue-50: #1c345f; - } -} - -/* --------------------------------------- */ - -/* These are the common tokens */ - -:root { - --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-stack-code: ui-monospace, Menlo, Consolas, monospace; - --token-typography-font-weight-regular: 400; - --token-typography-font-weight-medium: 500; - --token-typography-font-weight-semibold: 600; - --token-typography-font-weight-bold: 700; -} diff --git a/packages/tokens/expected-CSS-output/products/css/themed-tokens-with-prefers-color-scheme/tokens.css b/packages/tokens/expected-CSS-output/products/css/themed-tokens-with-prefers-color-scheme/tokens.css deleted file mode 100644 index 7b03dfdb78e..00000000000 --- a/packages/tokens/expected-CSS-output/products/css/themed-tokens-with-prefers-color-scheme/tokens.css +++ /dev/null @@ -1,41 +0,0 @@ -/* These are the light-theme tokens */ - -@media (prefers-color-scheme: light) { - :root { - --token-color-palette-blue-500: #1c345f; - --token-color-palette-blue-400: #0046d1; - --token-color-palette-blue-300: #0c56e9; - --token-color-palette-blue-200: #1060ff; - --token-color-palette-blue-100: #cce3fe; - --token-color-palette-blue-50: #f2f8ff; - } -} - -/* --------------------------------------- */ - -/* These are the dark-theme tokens */ - -@media (prefers-color-scheme: dark) { - :root { - --token-color-palette-blue-500: #f2f8ff; - --token-color-palette-blue-400: #cce3fe; - --token-color-palette-blue-300: #1060ff; - --token-color-palette-blue-200: #0c56e9; - --token-color-palette-blue-100: #0046d1; - --token-color-palette-blue-50: #1c345f; - } -} - -/* --------------------------------------- */ - -/* These are the common tokens */ - -:root { - --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-stack-code: ui-monospace, Menlo, Consolas, monospace; - --token-typography-font-weight-regular: 400; - --token-typography-font-weight-medium: 500; - --token-typography-font-weight-semibold: 600; - --token-typography-font-weight-bold: 700; -} diff --git a/packages/tokens/expected-CSS-output/products/css/themed-tokens-with-root-selector/common-tokens.css b/packages/tokens/expected-CSS-output/products/css/themed-tokens-with-root-selector/common-tokens.css deleted file mode 100644 index 9db62f20b57..00000000000 --- a/packages/tokens/expected-CSS-output/products/css/themed-tokens-with-root-selector/common-tokens.css +++ /dev/null @@ -1,9 +0,0 @@ -:root { - --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-stack-code: ui-monospace, Menlo, Consolas, monospace; - --token-typography-font-weight-regular: 400; - --token-typography-font-weight-medium: 500; - --token-typography-font-weight-semibold: 600; - --token-typography-font-weight-bold: 700; -} diff --git a/packages/tokens/expected-CSS-output/products/css/themed-tokens-with-root-selector/dark-tokens.css b/packages/tokens/expected-CSS-output/products/css/themed-tokens-with-root-selector/dark-tokens.css deleted file mode 100644 index f2db36bc937..00000000000 --- a/packages/tokens/expected-CSS-output/products/css/themed-tokens-with-root-selector/dark-tokens.css +++ /dev/null @@ -1,8 +0,0 @@ -:root { - --token-color-palette-blue-500: #f2f8ff; - --token-color-palette-blue-400: #cce3fe; - --token-color-palette-blue-300: #1060ff; - --token-color-palette-blue-200: #0c56e9; - --token-color-palette-blue-100: #0046d1; - --token-color-palette-blue-50: #1c345f; -} diff --git a/packages/tokens/expected-CSS-output/products/css/themed-tokens-with-root-selector/light-tokens.css b/packages/tokens/expected-CSS-output/products/css/themed-tokens-with-root-selector/light-tokens.css deleted file mode 100644 index ecea6620252..00000000000 --- a/packages/tokens/expected-CSS-output/products/css/themed-tokens-with-root-selector/light-tokens.css +++ /dev/null @@ -1,8 +0,0 @@ -:root { - --token-color-palette-blue-500: #1c345f; - --token-color-palette-blue-400: #0046d1; - --token-color-palette-blue-300: #0c56e9; - --token-color-palette-blue-200: #1060ff; - --token-color-palette-blue-100: #cce3fe; - --token-color-palette-blue-50: #f2f8ff; -} diff --git a/packages/tokens/expected-CSS-output/products/css/tokens.css b/packages/tokens/expected-CSS-output/products/css/tokens.css deleted file mode 100644 index 17c16789329..00000000000 --- a/packages/tokens/expected-CSS-output/products/css/tokens.css +++ /dev/null @@ -1,15 +0,0 @@ -:root { - --token-color-palette-blue-500: #1c345f; - --token-color-palette-blue-400: #0046d1; - --token-color-palette-blue-300: #0c56e9; - --token-color-palette-blue-200: #1060ff; - --token-color-palette-blue-100: #cce3fe; - --token-color-palette-blue-50: #f2f8ff; - --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-stack-code: ui-monospace, Menlo, Consolas, monospace; - --token-typography-font-weight-regular: 400; - --token-typography-font-weight-medium: 500; - --token-typography-font-weight-semibold: 600; - --token-typography-font-weight-bold: 700; -} From 07c1b7f6b6cc5b374bf687bc62ff2f367d563cf9 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Mon, 27 Oct 2025 14:48:10 +0000 Subject: [PATCH 030/224] =?UTF-8?q?fixed=20wrong=20check=20for=20existence?= =?UTF-8?q?=20of=20key=20in=20object=20(`0`=20values=20would=20trigger=20a?= =?UTF-8?q?n=20error,=20but=20they=E2=80=99re=20valid)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/tokens/scripts/build.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tokens/scripts/build.ts b/packages/tokens/scripts/build.ts index 71bffb629f6..0a384aee893 100644 --- a/packages/tokens/scripts/build.ts +++ b/packages/tokens/scripts/build.ts @@ -40,7 +40,7 @@ for (const mode of modes) { // note: the `slice` is always an object (a token or a parent group) function replaceModes(slice: DesignToken) { if (slice.$modes) { - if (slice.$modes[mode]) { + if (mode in slice.$modes) { slice.$value = slice.$modes[mode]; } else { // TODO! decide if we want to throw here (and test if it works, by removing a value from one of the test files) From 30467ec2563bb6aa5071396ad76742601685d546 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Mon, 27 Oct 2025 17:04:15 +0000 Subject: [PATCH 031/224] =?UTF-8?q?added=20`.hds-theme-light/dark`=20and?= =?UTF-8?q?=20`[data-hds-theme=3D=E2=80=9Clight/dark=E2=80=9D]`=20to=20gen?= =?UTF-8?q?erated=20CSS=20selectors?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit (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) --- .../scripts/build-parts/generateExtraThemingFiles.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts b/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts index 5163ad47657..a1f817cc9c0 100644 --- a/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts +++ b/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts @@ -46,10 +46,10 @@ export async function generateExtraThemingFiles(_dictionary: Dictionary, config: outputContent += `${hdsThemedSource}\n\n`; // // these are the themed `carbonized` tokens - outputContent += `${cds0ThemedSource.replace(/^:root/, '.hds-theme-cds-g0, [data-hds-theme="cds-g0"]')}\n\n`; + outputContent += `${cds0ThemedSource.replace(/^:root/, '.hds-theme-light, .hds-theme-cds-g0, [data-hds-theme="light"], [data-hds-theme="cds-g0"]')}\n\n`; outputContent += `${cds10ThemedSource.replace(/^:root/, '.hds-theme-cds-g10, [data-hds-theme="cds-g10"]')}\n\n`; outputContent += `${cds90ThemedSource.replace(/^:root/, '.hds-theme-cds-g90, [data-hds-theme="cds-g90"]')}\n\n`; - outputContent += `${cds100ThemedSource.replace(/^:root/, '.hds-theme-cds-g100, [data-hds-theme="cds-g100"]')}\n\n`; + outputContent += `${cds100ThemedSource.replace(/^:root/, '.hds-theme-dark, .hds-theme-cds-g100, [data-hds-theme="dark"], [data-hds-theme="cds-g100"]')}\n\n`; // // this is the common part outputContent += `${commonSource}\n\n`; @@ -66,10 +66,10 @@ export async function generateExtraThemingFiles(_dictionary: Dictionary, config: // note: we will revisit the `[class*=hds-theme-]` selector if we find that is too generic and there are cases where this is picking up other classes outputContent += `@media (prefers-color-scheme: light) { ${cds0ThemedSource.replace(/^:root/, ':root:not([class*=hds-theme-]):not([data-hds-theme])')} }\n\n`; outputContent += `@media (prefers-color-scheme: dark) { ${cds100ThemedSource.replace(/^:root/, ':root:not([class*=hds-theme-]):not([data-hds-theme])')} }\n\n`; - outputContent += `${cds0ThemedSource.replace(/^:root/, '.hds-theme-cds-g0, [data-hds-theme="cds-g0"]')}\n\n`; + outputContent += `${cds0ThemedSource.replace(/^:root/, '.hds-theme-light, .hds-theme-cds-g0, [data-hds-theme="light"], [data-hds-theme="cds-g0"]')}\n\n`; outputContent += `${cds10ThemedSource.replace(/^:root/, '.hds-theme-cds-g10, [data-hds-theme="cds-g10"]')}\n\n`; outputContent += `${cds90ThemedSource.replace(/^:root/, '.hds-theme-cds-g90, [data-hds-theme="cds-g90"]')}\n\n`; - outputContent += `${cds100ThemedSource.replace(/^:root/, '.hds-theme-cds-g100, [data-hds-theme="cds-g100"]')}\n\n`; + outputContent += `${cds100ThemedSource.replace(/^:root/, '.hds-theme-dark, .hds-theme-cds-g100, [data-hds-theme="dark"], [data-hds-theme="cds-g100"]')}\n\n`; // // this is the common part outputContent += `${commonSource}\n\n`; From f0fb47191f6a76ec0744da4ba94f5aa7bb27eb16 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Mon, 27 Oct 2025 17:04:33 +0000 Subject: [PATCH 032/224] re-generated themed tokens --- .../css/themed-tokens/with-combined-strategies/tokens.css | 4 ++++ .../products/css/themed-tokens/with-css-selectors/tokens.css | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css index 876c834a815..85d4d1fd7f3 100644 --- a/packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css +++ b/packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css @@ -33,7 +33,9 @@ } } +.hds-theme-light, .hds-theme-cds-g0, +[data-hds-theme="light"], [data-hds-theme="cds-g0"] { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #161616; @@ -63,7 +65,9 @@ --token-typography-font-weight-bold: 600; } +.hds-theme-dark, .hds-theme-cds-g100, +[data-hds-theme="dark"], [data-hds-theme="cds-g100"] { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #f4f4f4; 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 index 4db863683e3..f554fbe922f 100644 --- 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 @@ -11,7 +11,9 @@ --token-typography-font-weight-bold: 700; } +.hds-theme-light, .hds-theme-cds-g0, +[data-hds-theme="light"], [data-hds-theme="cds-g0"] { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #161616; @@ -41,7 +43,9 @@ --token-typography-font-weight-bold: 600; } +.hds-theme-dark, .hds-theme-cds-g100, +[data-hds-theme="dark"], [data-hds-theme="cds-g100"] { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #f4f4f4; From 507c06b492b95d4f1f8e1df6568f4f189f30ace1 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Mon, 27 Oct 2025 17:39:05 +0000 Subject: [PATCH 033/224] =?UTF-8?q?updated=20generation=20of=20tokens?= =?UTF-8?q?=E2=80=99=20CSS=20helpers=20to=20use=20CSS=20variables=20for=20?= =?UTF-8?q?`font-weight`=20helpers?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tokens/scripts/build-parts/generateTypographyHelpers.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/tokens/scripts/build-parts/generateTypographyHelpers.ts b/packages/tokens/scripts/build-parts/generateTypographyHelpers.ts index 3965f14fef5..82facf7b039 100644 --- a/packages/tokens/scripts/build-parts/generateTypographyHelpers.ts +++ b/packages/tokens/scripts/build-parts/generateTypographyHelpers.ts @@ -42,7 +42,8 @@ export function generateTypographyHelpers(tokens: TransformedTokens, outputCssVa if (fontWeightTokens) { Object.keys(fontWeightTokens).forEach(weight => { const selector = `.${PREFIX}-font-weight-${weight}`; - helpers.push(`${selector} { font-weight: ${fontWeightTokens[weight].$value}; }`); + const valueFontWeight = outputCssVars ? `var(--token-typography-font-weight-${weight})` : fontWeightTokens[weight].$value; + helpers.push(`${selector} { font-weight: ${valueFontWeight}; }`); }); } From d5252d435609d5e5224ecadf228aca9565352ab0 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Mon, 27 Oct 2025 17:39:20 +0000 Subject: [PATCH 034/224] re-generated CSS helper files --- packages/tokens/dist/devdot/css/helpers/typography.css | 8 ++++---- packages/tokens/dist/marketing/css/helpers/typography.css | 8 ++++---- packages/tokens/dist/products/css/helpers/typography.css | 8 ++++---- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/tokens/dist/devdot/css/helpers/typography.css b/packages/tokens/dist/devdot/css/helpers/typography.css index 393b8900901..c0913ef1a67 100644 --- a/packages/tokens/dist/devdot/css/helpers/typography.css +++ b/packages/tokens/dist/devdot/css/helpers/typography.css @@ -5,10 +5,10 @@ .hds-font-family-sans-display { font-family: var(--token-typography-font-stack-display); } .hds-font-family-sans-text { font-family: var(--token-typography-font-stack-text); } .hds-font-family-mono-code { font-family: var(--token-typography-font-stack-code); } -.hds-font-weight-regular { font-weight: 400; } -.hds-font-weight-medium { font-weight: 500; } -.hds-font-weight-semibold { font-weight: 600; } -.hds-font-weight-bold { font-weight: 700; } +.hds-font-weight-regular { font-weight: var(--token-typography-font-weight-regular); } +.hds-font-weight-medium { font-weight: var(--token-typography-font-weight-medium); } +.hds-font-weight-semibold { font-weight: var(--token-typography-font-weight-semibold); } +.hds-font-weight-bold { font-weight: var(--token-typography-font-weight-bold); } .hds-typography-display-500 { font-family: var(--token-typography-display-500-font-family); font-size: var(--token-typography-display-500-font-size); line-height: var(--token-typography-display-500-line-height); margin: 0; padding: 0; } .hds-typography-display-400 { font-family: var(--token-typography-display-400-font-family); font-size: var(--token-typography-display-400-font-size); line-height: var(--token-typography-display-400-line-height); margin: 0; padding: 0; } .hds-typography-display-300 { font-family: var(--token-typography-display-300-font-family); font-size: var(--token-typography-display-300-font-size); line-height: var(--token-typography-display-300-line-height); margin: 0; padding: 0; } diff --git a/packages/tokens/dist/marketing/css/helpers/typography.css b/packages/tokens/dist/marketing/css/helpers/typography.css index 393b8900901..c0913ef1a67 100644 --- a/packages/tokens/dist/marketing/css/helpers/typography.css +++ b/packages/tokens/dist/marketing/css/helpers/typography.css @@ -5,10 +5,10 @@ .hds-font-family-sans-display { font-family: var(--token-typography-font-stack-display); } .hds-font-family-sans-text { font-family: var(--token-typography-font-stack-text); } .hds-font-family-mono-code { font-family: var(--token-typography-font-stack-code); } -.hds-font-weight-regular { font-weight: 400; } -.hds-font-weight-medium { font-weight: 500; } -.hds-font-weight-semibold { font-weight: 600; } -.hds-font-weight-bold { font-weight: 700; } +.hds-font-weight-regular { font-weight: var(--token-typography-font-weight-regular); } +.hds-font-weight-medium { font-weight: var(--token-typography-font-weight-medium); } +.hds-font-weight-semibold { font-weight: var(--token-typography-font-weight-semibold); } +.hds-font-weight-bold { font-weight: var(--token-typography-font-weight-bold); } .hds-typography-display-500 { font-family: var(--token-typography-display-500-font-family); font-size: var(--token-typography-display-500-font-size); line-height: var(--token-typography-display-500-line-height); margin: 0; padding: 0; } .hds-typography-display-400 { font-family: var(--token-typography-display-400-font-family); font-size: var(--token-typography-display-400-font-size); line-height: var(--token-typography-display-400-line-height); margin: 0; padding: 0; } .hds-typography-display-300 { font-family: var(--token-typography-display-300-font-family); font-size: var(--token-typography-display-300-font-size); line-height: var(--token-typography-display-300-line-height); margin: 0; padding: 0; } diff --git a/packages/tokens/dist/products/css/helpers/typography.css b/packages/tokens/dist/products/css/helpers/typography.css index 393b8900901..c0913ef1a67 100644 --- a/packages/tokens/dist/products/css/helpers/typography.css +++ b/packages/tokens/dist/products/css/helpers/typography.css @@ -5,10 +5,10 @@ .hds-font-family-sans-display { font-family: var(--token-typography-font-stack-display); } .hds-font-family-sans-text { font-family: var(--token-typography-font-stack-text); } .hds-font-family-mono-code { font-family: var(--token-typography-font-stack-code); } -.hds-font-weight-regular { font-weight: 400; } -.hds-font-weight-medium { font-weight: 500; } -.hds-font-weight-semibold { font-weight: 600; } -.hds-font-weight-bold { font-weight: 700; } +.hds-font-weight-regular { font-weight: var(--token-typography-font-weight-regular); } +.hds-font-weight-medium { font-weight: var(--token-typography-font-weight-medium); } +.hds-font-weight-semibold { font-weight: var(--token-typography-font-weight-semibold); } +.hds-font-weight-bold { font-weight: var(--token-typography-font-weight-bold); } .hds-typography-display-500 { font-family: var(--token-typography-display-500-font-family); font-size: var(--token-typography-display-500-font-size); line-height: var(--token-typography-display-500-line-height); margin: 0; padding: 0; } .hds-typography-display-400 { font-family: var(--token-typography-display-400-font-family); font-size: var(--token-typography-display-400-font-size); line-height: var(--token-typography-display-400-line-height); margin: 0; padding: 0; } .hds-typography-display-300 { font-family: var(--token-typography-display-300-font-family); font-size: var(--token-typography-display-300-font-size); line-height: var(--token-typography-display-300-line-height); margin: 0; padding: 0; } From 2d7deb2b6c85d8a39cf6370aa193132d45da52b0 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 28 Oct 2025 22:14:44 +0000 Subject: [PATCH 035/224] 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`) --- .../tokens/scripts/build-parts/generateExtraThemingFiles.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts b/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts index a1f817cc9c0..42d85ed65b1 100644 --- a/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts +++ b/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts @@ -43,7 +43,7 @@ export async function generateExtraThemingFiles(_dictionary: Dictionary, config: outputContent = `${header}\n\n`; // // this is the fallback to the default `hds` mode - outputContent += `${hdsThemedSource}\n\n`; + outputContent += `${hdsThemedSource.replace(/^:root/, ':root, .hds-theme-hds, [data-hds-theme="hds"]')}\n\n`; // // these are the themed `carbonized` tokens outputContent += `${cds0ThemedSource.replace(/^:root/, '.hds-theme-light, .hds-theme-cds-g0, [data-hds-theme="light"], [data-hds-theme="cds-g0"]')}\n\n`; @@ -60,7 +60,7 @@ export async function generateExtraThemingFiles(_dictionary: Dictionary, config: outputContent = `${header}\n\n`; // // this is the fallback to the default `hds` mode - outputContent += `${hdsThemedSource}\n\n`; + outputContent += `${hdsThemedSource.replace(/^:root/, ':root, .hds-theme-hds, [data-hds-theme="hds"]')}\n\n`; // // these are the themed `carbonized` tokens // note: we will revisit the `[class*=hds-theme-]` selector if we find that is too generic and there are cases where this is picking up other classes @@ -78,7 +78,7 @@ export async function generateExtraThemingFiles(_dictionary: Dictionary, config: // SCSS file for mixins if (method === 'scss-mixins') { outputContent = `${header}\n\n`; - outputContent += `@mixin hds-theme-default() { ${hdsThemedSource} }\n\n`; + outputContent += `@mixin hds-theme-hds() { ${hdsThemedSource} }\n\n`; outputContent += `@mixin hds-theme-cds0() { ${cds0ThemedSource} }\n\n`; outputContent += `@mixin hds-theme-cds10() { ${cds10ThemedSource} }\n\n`; outputContent += `@mixin hds-theme-cds90() { ${cds90ThemedSource} }\n\n`; From 980383afb061be83d3b181aaa719b1f9bd8c0ba8 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 28 Oct 2025 19:29:28 +0000 Subject: [PATCH 036/224] 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) --- ...les.ts => generateExtraThemingCssFiles.ts} | 4 +- .../generateExtraThemingDocsFiles.ts | 40 +++++++++++++++++++ .../build-parts/getStyleDictionaryConfig.ts | 22 ++++++++-- packages/tokens/scripts/build.ts | 13 ++++-- 4 files changed, 70 insertions(+), 9 deletions(-) rename packages/tokens/scripts/build-parts/{generateExtraThemingFiles.ts => generateExtraThemingCssFiles.ts} (97%) create mode 100644 packages/tokens/scripts/build-parts/generateExtraThemingDocsFiles.ts diff --git a/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts b/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts similarity index 97% rename from packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts rename to packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts index 42d85ed65b1..22ef4f71aff 100644 --- a/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts +++ b/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts @@ -9,7 +9,7 @@ import prettier from 'prettier'; import type { Dictionary, PlatformConfig } from 'style-dictionary'; import { fileHeader } from 'style-dictionary/utils'; -export async function generateExtraThemingFiles(_dictionary: Dictionary, config: PlatformConfig ): Promise { +export async function generateExtraThemingCssFiles(_dictionary: Dictionary, config: PlatformConfig): Promise { const commonSource = await getSourceFromFileWithRootSelector(config, 'hds', 'common-tokens.css'); const hdsThemedSource = await getSourceFromFileWithRootSelector(config, 'hds', 'themed-tokens.css'); @@ -101,4 +101,4 @@ async function getSourceFromFileWithRootSelector(config: PlatformConfig, theme: 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/generateExtraThemingDocsFiles.ts b/packages/tokens/scripts/build-parts/generateExtraThemingDocsFiles.ts new file mode 100644 index 00000000000..d25ebeed834 --- /dev/null +++ b/packages/tokens/scripts/build-parts/generateExtraThemingDocsFiles.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 generateExtraThemingDocsFiles(_dictionary: Dictionary, config: PlatformConfig): Promise { + + const hdsThemedTokens = await getJsonThemedObjectFromFile(config, 'hds'); + 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 = { + 'hds': hdsThemedTokens, + '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/getStyleDictionaryConfig.ts b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts index 755f42d624b..c9075ebb1b9 100644 --- a/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts +++ b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts @@ -102,6 +102,21 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod ], // 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}`], } } }; @@ -132,9 +147,7 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod filter: excludePrivateTokens, } ], - // TODO! do we need this? how do we manage CSS helpers for themed tokens? - // actions: ['generate-css-helpers'], - actions: ['generate-css-helpers', 'generate-extra-theming-files'], + actions: ['generate-css-helpers', 'generate-extra-theming-css-files'], }, 'docs/json': { buildPath: 'dist/docs/products/', @@ -147,7 +160,8 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod format: 'docs/json', filter: excludePrivateTokens, } - ] + ], + actions: ['generate-extra-theming-docs-files'], } } }; diff --git a/packages/tokens/scripts/build.ts b/packages/tokens/scripts/build.ts index 0a384aee893..a3a47d14871 100644 --- a/packages/tokens/scripts/build.ts +++ b/packages/tokens/scripts/build.ts @@ -17,7 +17,8 @@ import { cloneDeep } from 'lodash-es'; import { targets, modes, getStyleDictionaryConfig } from './build-parts/getStyleDictionaryConfig.ts'; import { generateCssHelpers } from './build-parts/generateCssHelpers.ts'; -import { generateExtraThemingFiles } from './build-parts/generateExtraThemingFiles.ts'; +import { generateExtraThemingCssFiles } from './build-parts/generateExtraThemingCssFiles.ts'; +import { generateExtraThemingDocsFiles } from './build-parts/generateExtraThemingDocsFiles.ts'; // SCRIPT CONFIG @@ -293,8 +294,14 @@ StyleDictionary.registerAction({ }); StyleDictionary.registerAction({ - name: 'generate-extra-theming-files', - do: generateExtraThemingFiles, + name: 'generate-extra-theming-css-files', + do: generateExtraThemingCssFiles, + undo: () => {} +}); + +StyleDictionary.registerAction({ + name: 'generate-extra-theming-docs-files', + do: generateExtraThemingDocsFiles, undo: () => {} }); From 19ff90127dd5480f08865893f3030a3d6b455143 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Mon, 27 Oct 2025 18:36:42 +0000 Subject: [PATCH 037/224] re-generated themed tokens --- .../dist/docs/products/themed-tokens.json | 41762 ++++++++++++++++ .../docs/products/themed-tokens/cds-g0.json | 8352 +++ .../docs/products/themed-tokens/cds-g10.json | 8352 +++ .../docs/products/themed-tokens/cds-g100.json | 8352 +++ .../docs/products/themed-tokens/cds-g90.json | 8352 +++ .../dist/docs/products/themed-tokens/hds.json | 8352 +++ .../with-combined-strategies/tokens.css | 4 +- .../with-css-selectors/tokens.css | 4 +- .../themed-tokens/with-scss-mixins/tokens.css | 2 +- 9 files changed, 83529 insertions(+), 3 deletions(-) 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/hds.json 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..5d7ccc56df0 --- /dev/null +++ b/packages/tokens/dist/docs/products/themed-tokens.json @@ -0,0 +1,41762 @@ +{ + "hds": { + "token-border-radius-x-small": { + "key": "{border.radius.x-small}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{border.radius.large}" + }, + "name": "token-border-radius-large", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "large" + ] + }, + "token-color-palette-blue-500": { + "key": "{color.palette.blue-500}", + "$type": "color", + "$value": "#1c345f", + "group": "palette", + "original": { + "$type": "color", + "$value": "#1c345f", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#0046d1", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#0c56e9", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#1060ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#cce3fe", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f2f8ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#42215b", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#7b00db", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#911ced", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#a737ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#ead2fe", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f9f2ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#054220", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#006619", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#00781e", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#008a22", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#cceeda", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f2fbf6", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#542800", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#803d00", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#9e4b00", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#bb5a00", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fbeabf", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fff9e8", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#51130a", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#940004", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#c00005", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#e52228", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fbd4d4", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fff5f5", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#0c0c0e", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#3b3d45", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#656a76", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#8c909c", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#c2c5cb", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#dedfe3", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f1f2f3", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fafafa", + "group": "palette", + "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": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "#ffffff", + "group": "palette", + "$modes": { + "hds": "#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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-600}", + "alpha": "0.4", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "alpha": "0.2", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "alpha": "0.1", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.alpha-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.alpha-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.alpha-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "semantic", + "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", + "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", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "semantic", + "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", + "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", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-700}", + "group": "semantic", + "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": "#ffffff", + "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "hds": "#ffffff", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-400}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-100}", + "group": "semantic", + "key": "{color.surface.strong}" + }, + "name": "token-color-surface-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "strong" + ] + }, + "token-color-surface-interactive": { + "key": "{color.surface.interactive}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-50}", + "group": "semantic", + "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", + "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", + "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", + "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", + "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", + "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", + "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", + "original": { + "$value": "{elevation.inset.box-shadow-01}", + "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", + "original": { + "$value": "{elevation.low.box-shadow-01}, {elevation.low.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.mid.box-shadow-01}, {elevation.mid.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.high.box-shadow-01}, {elevation.high.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.higher.box-shadow-01}, {elevation.higher.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.overlay.box-shadow-01}, {elevation.overlay.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.inset.box-shadow-border}, {elevation.inset.box-shadow}", + "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", + "original": { + "$value": "{elevation.base.box-shadow-border}", + "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", + "original": { + "$value": "{elevation.low.box-shadow-border}, {elevation.low.box-shadow}", + "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", + "original": { + "$value": "{elevation.mid.box-shadow-border}, {elevation.mid.box-shadow}", + "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", + "original": { + "$value": "{elevation.high.box-shadow-border}, {elevation.high.box-shadow}", + "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", + "original": { + "$value": "{elevation.higher.box-shadow-border}, {elevation.higher.box-shadow}", + "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", + "original": { + "$value": "{elevation.overlay.box-shadow-border}, {elevation.overlay.box-shadow}", + "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-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-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": "#ffffff", + "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", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{form.radiocard.border.radius}" + }, + "name": "token-form-radiocard-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "radius" + ] + }, + "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-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-side-nav-wrapper-border-width": { + "key": "{side-nav.wrapper.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{side-nav.wrapper.border.width}" + }, + "name": "token-side-nav-wrapper-border-width", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "border", + "width" + ] + }, + "token-side-nav-wrapper-border-color": { + "key": "{side-nav.wrapper.border.color}", + "$type": "color", + "$value": "#656a76", + "group": "components", + "original": { + "$type": "color", + "$value": "#656a76", + "group": "components", + "key": "{side-nav.wrapper.border.color}" + }, + "name": "token-side-nav-wrapper-border-color", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "border", + "color" + ] + }, + "token-side-nav-wrapper-padding-horizontal": { + "key": "{side-nav.wrapper.padding.horizontal}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{side-nav.wrapper.padding.horizontal}" + }, + "name": "token-side-nav-wrapper-padding-horizontal", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "horizontal" + ] + }, + "token-side-nav-wrapper-padding-vertical": { + "key": "{side-nav.wrapper.padding.vertical}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{side-nav.wrapper.padding.vertical}" + }, + "name": "token-side-nav-wrapper-padding-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "vertical" + ] + }, + "token-side-nav-wrapper-padding-horizontal-minimized": { + "key": "{side-nav.wrapper.padding.horizontal-minimized}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.wrapper.padding.horizontal-minimized}" + }, + "name": "token-side-nav-wrapper-padding-horizontal-minimized", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "horizontal-minimized" + ] + }, + "token-side-nav-wrapper-padding-vertical-minimized": { + "key": "{side-nav.wrapper.padding.vertical-minimized}", + "$type": "dimension", + "$value": "22px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "22", + "unit": "px", + "key": "{side-nav.wrapper.padding.vertical-minimized}" + }, + "name": "token-side-nav-wrapper-padding-vertical-minimized", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "vertical-minimized" + ] + }, + "token-side-nav-toggle-button-border-radius": { + "key": "{side-nav.toggle-button.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{side-nav.toggle-button.border.radius}" + }, + "name": "token-side-nav-toggle-button-border-radius", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "toggle-button", + "border", + "radius" + ] + }, + "token-side-nav-header-home-link-padding": { + "key": "{side-nav.header.home-link.padding}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{side-nav.header.home-link.padding}" + }, + "name": "token-side-nav-header-home-link-padding", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "home-link", + "padding" + ] + }, + "token-side-nav-header-home-link-logo-size": { + "key": "{side-nav.header.home-link.logo-size}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{side-nav.header.home-link.logo-size}" + }, + "name": "token-side-nav-header-home-link-logo-size", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "home-link", + "logo-size" + ] + }, + "token-side-nav-header-home-link-logo-size-minimized": { + "key": "{side-nav.header.home-link.logo-size-minimized}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{side-nav.header.home-link.logo-size-minimized}" + }, + "name": "token-side-nav-header-home-link-logo-size-minimized", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "home-link", + "logo-size-minimized" + ] + }, + "token-side-nav-header-actions-spacing": { + "key": "{side-nav.header.actions.spacing}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.header.actions.spacing}" + }, + "name": "token-side-nav-header-actions-spacing", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "actions", + "spacing" + ] + }, + "token-side-nav-body-list-margin-vertical": { + "key": "{side-nav.body.list.margin-vertical}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{side-nav.body.list.margin-vertical}" + }, + "name": "token-side-nav-body-list-margin-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list", + "margin-vertical" + ] + }, + "token-side-nav-body-list-item-height": { + "key": "{side-nav.body.list-item.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{side-nav.body.list-item.height}" + }, + "name": "token-side-nav-body-list-item-height", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "height" + ] + }, + "token-side-nav-body-list-item-padding-horizontal": { + "key": "{side-nav.body.list-item.padding.horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.body.list-item.padding.horizontal}" + }, + "name": "token-side-nav-body-list-item-padding-horizontal", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "padding", + "horizontal" + ] + }, + "token-side-nav-body-list-item-padding-vertical": { + "key": "{side-nav.body.list-item.padding.vertical}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{side-nav.body.list-item.padding.vertical}" + }, + "name": "token-side-nav-body-list-item-padding-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "padding", + "vertical" + ] + }, + "token-side-nav-body-list-item-spacing-vertical": { + "key": "{side-nav.body.list-item.spacing-vertical}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{side-nav.body.list-item.spacing-vertical}" + }, + "name": "token-side-nav-body-list-item-spacing-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "spacing-vertical" + ] + }, + "token-side-nav-body-list-item-content-spacing-horizontal": { + "key": "{side-nav.body.list-item.content-spacing-horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.body.list-item.content-spacing-horizontal}" + }, + "name": "token-side-nav-body-list-item-content-spacing-horizontal", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "content-spacing-horizontal" + ] + }, + "token-side-nav-body-list-item-border-radius": { + "key": "{side-nav.body.list-item.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{side-nav.body.list-item.border-radius}" + }, + "name": "token-side-nav-body-list-item-border-radius", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "border-radius" + ] + }, + "token-side-nav-color-foreground-primary": { + "key": "{side-nav.color.foreground.primary}", + "$type": "color", + "$value": "#dedfe3", + "group": "components", + "original": { + "$type": "color", + "$value": "#dedfe3", + "group": "components", + "key": "{side-nav.color.foreground.primary}" + }, + "name": "token-side-nav-color-foreground-primary", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "foreground", + "primary" + ] + }, + "token-side-nav-color-foreground-strong": { + "key": "{side-nav.color.foreground.strong}", + "$type": "color", + "$value": "#ffffff", + "group": "components", + "original": { + "$type": "color", + "$value": "#fff", + "group": "components", + "key": "{side-nav.color.foreground.strong}" + }, + "name": "token-side-nav-color-foreground-strong", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "foreground", + "strong" + ] + }, + "token-side-nav-color-foreground-faint": { + "key": "{side-nav.color.foreground.faint}", + "$type": "color", + "$value": "#8c909c", + "group": "components", + "original": { + "$type": "color", + "$value": "#8c909c", + "group": "components", + "key": "{side-nav.color.foreground.faint}" + }, + "name": "token-side-nav-color-foreground-faint", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "foreground", + "faint" + ] + }, + "token-side-nav-color-surface-primary": { + "key": "{side-nav.color.surface.primary}", + "$type": "color", + "$value": "#0c0c0e", + "group": "components", + "original": { + "$type": "color", + "$value": "#0c0c0e", + "group": "components", + "key": "{side-nav.color.surface.primary}" + }, + "name": "token-side-nav-color-surface-primary", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "surface", + "primary" + ] + }, + "token-side-nav-color-surface-interactive-hover": { + "key": "{side-nav.color.surface.interactive-hover}", + "$type": "color", + "$value": "#3b3d45", + "group": "semantic", + "original": { + "$type": "color", + "$value": "#3b3d45", + "group": "semantic", + "key": "{side-nav.color.surface.interactive-hover}" + }, + "name": "token-side-nav-color-surface-interactive-hover", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "surface", + "interactive-hover" + ] + }, + "token-side-nav-color-surface-interactive-active": { + "key": "{side-nav.color.surface.interactive-active}", + "$type": "color", + "$value": "#656a76", + "group": "semantic", + "original": { + "$type": "color", + "$value": "#656a76", + "group": "semantic", + "key": "{side-nav.color.surface.interactive-active}" + }, + "name": "token-side-nav-color-surface-interactive-active", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "surface", + "interactive-active" + ] + }, + "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-border-radius": { + "key": "{tooltip.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{tooltip.border-radius}" + }, + "name": "token-tooltip-border-radius", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "border-radius" + ] + }, + "token-tooltip-color-foreground-primary": { + "key": "{tooltip.color.foreground.primary}", + "$type": "color", + "$value": "var(--token-color-foreground-high-contrast)", + "group": "components", + "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" + ] + }, + "token-tooltip-color-surface-primary": { + "key": "{tooltip.color.surface.primary}", + "$type": "color", + "$value": "var(--token-color-palette-neutral-700)", + "group": "components", + "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" + ] + }, + "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-max-width": { + "key": "{tooltip.max-width}", + "$type": "dimension", + "$value": "280px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "280", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{tooltip.padding.vertical}" + }, + "name": "token-tooltip-padding-vertical", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "vertical" + ] + }, + "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", + "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}" + ], + "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", + "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}" + ], + "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", + "original": { + "$type": "font-family", + "$value": [ + "{typography.font-stack.monospace.code.macOS}", + "{typography.font-stack.monospace.code.windows}", + "monospace" + ], + "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": { + "hds": "400", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "400", + "$modes": { + "hds": "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": { + "hds": "500", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "500", + "$modes": { + "hds": "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": { + "hds": "600", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "600", + "$modes": { + "hds": "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": { + "hds": "700", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "700", + "$modes": { + "hds": "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", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "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", + "original": { + "$type": "font-size", + "$value": "30", + "unit": "px", + "comment": "30px/1.875rem", + "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", + "original": { + "$type": "number", + "$value": 1.2666, + "comment": "38px", + "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-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", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "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", + "original": { + "$type": "font-size", + "$value": "24", + "unit": "px", + "comment": "24px/1.5rem", + "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", + "original": { + "$type": "number", + "$value": 1.3333, + "comment": "32px", + "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-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", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "18", + "unit": "px", + "comment": "18px/1.125rem", + "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", + "original": { + "$type": "number", + "$value": 1.3333, + "comment": "24px", + "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", + "comment": "this is `tracking`", + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "comment": "this is `tracking`", + "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", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "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", + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "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", + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px", + "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", + "comment": "this is `tracking`", + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "comment": "this is `tracking`", + "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", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "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", + "original": { + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "key": "{typography.display-100.line-height}" + }, + "name": "token-typography-display-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "line-height" + ] + }, + "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", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "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", + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px", + "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", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "comment": "14px/0.875rem", + "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", + "original": { + "$type": "number", + "$value": 1.4286, + "comment": "20px", + "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", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "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", + "original": { + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "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-100-font-family": { + "key": "{typography.code-100.font-family}", + "$type": "font-family", + "$value": "ui-monospace, Menlo, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "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", + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "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", + "original": { + "$type": "number", + "$value": 1.23, + "comment": "16px", + "key": "{typography.code-100.line-height}" + }, + "name": "token-typography-code-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "line-height" + ] + }, + "token-typography-code-200-font-family": { + "key": "{typography.code-200.font-family}", + "$type": "font-family", + "$value": "ui-monospace, Menlo, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "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", + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "comment": "14px/0.875rem", + "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", + "original": { + "$type": "number", + "$value": 1.125, + "comment": "18px", + "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-300-font-family": { + "key": "{typography.code-300.font-family}", + "$type": "font-family", + "$value": "ui-monospace, Menlo, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "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", + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "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", + "original": { + "$type": "number", + "$value": 1.25, + "comment": "20px", + "key": "{typography.code-300.line-height}" + }, + "name": "token-typography-code-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "line-height" + ] + } + }, + "cds-g0": { + "token-border-radius-x-small": { + "key": "{border.radius.x-small}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{border.radius.large}" + }, + "name": "token-border-radius-large", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "large" + ] + }, + "token-color-palette-blue-500": { + "key": "{color.palette.blue-500}", + "$type": "color", + "$value": "#1c345f", + "group": "palette", + "original": { + "$type": "color", + "$value": "#1c345f", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#0046d1", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#0c56e9", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#1060ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#cce3fe", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f2f8ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#42215b", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#7b00db", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#911ced", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#a737ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#ead2fe", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f9f2ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#054220", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#006619", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#00781e", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#008a22", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#cceeda", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f2fbf6", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#542800", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#803d00", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#9e4b00", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#bb5a00", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fbeabf", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fff9e8", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#51130a", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#940004", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#c00005", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#e52228", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fbd4d4", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fff5f5", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#0c0c0e", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#3b3d45", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#656a76", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#8c909c", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#c2c5cb", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#dedfe3", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f1f2f3", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fafafa", + "group": "palette", + "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": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.white.0}", + "group": "palette", + "$modes": { + "hds": "#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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-600}", + "alpha": "0.4", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "alpha": "0.2", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "alpha": "0.1", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.alpha-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.alpha-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.alpha-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "semantic", + "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", + "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", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "semantic", + "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", + "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", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-700}", + "group": "semantic", + "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": { + "hds": "#ffffff", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textPrimary}", + "group": "semantic", + "$modes": { + "hds": "#ffffff", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-400}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-100}", + "group": "semantic", + "key": "{color.surface.strong}" + }, + "name": "token-color-surface-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "strong" + ] + }, + "token-color-surface-interactive": { + "key": "{color.surface.interactive}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-50}", + "group": "semantic", + "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", + "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", + "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", + "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", + "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", + "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", + "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", + "original": { + "$value": "{elevation.inset.box-shadow-01}", + "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", + "original": { + "$value": "{elevation.low.box-shadow-01}, {elevation.low.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.mid.box-shadow-01}, {elevation.mid.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.high.box-shadow-01}, {elevation.high.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.higher.box-shadow-01}, {elevation.higher.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.overlay.box-shadow-01}, {elevation.overlay.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.inset.box-shadow-border}, {elevation.inset.box-shadow}", + "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", + "original": { + "$value": "{elevation.base.box-shadow-border}", + "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", + "original": { + "$value": "{elevation.low.box-shadow-border}, {elevation.low.box-shadow}", + "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", + "original": { + "$value": "{elevation.mid.box-shadow-border}, {elevation.mid.box-shadow}", + "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", + "original": { + "$value": "{elevation.high.box-shadow-border}, {elevation.high.box-shadow}", + "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", + "original": { + "$value": "{elevation.higher.box-shadow-border}, {elevation.higher.box-shadow}", + "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", + "original": { + "$value": "{elevation.overlay.box-shadow-border}, {elevation.overlay.box-shadow}", + "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-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-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": "#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": "#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", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{form.radiocard.border.radius}" + }, + "name": "token-form-radiocard-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "radius" + ] + }, + "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-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-side-nav-wrapper-border-width": { + "key": "{side-nav.wrapper.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{side-nav.wrapper.border.width}" + }, + "name": "token-side-nav-wrapper-border-width", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "border", + "width" + ] + }, + "token-side-nav-wrapper-border-color": { + "key": "{side-nav.wrapper.border.color}", + "$type": "color", + "$value": "#656a76", + "group": "components", + "original": { + "$type": "color", + "$value": "#656a76", + "group": "components", + "key": "{side-nav.wrapper.border.color}" + }, + "name": "token-side-nav-wrapper-border-color", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "border", + "color" + ] + }, + "token-side-nav-wrapper-padding-horizontal": { + "key": "{side-nav.wrapper.padding.horizontal}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{side-nav.wrapper.padding.horizontal}" + }, + "name": "token-side-nav-wrapper-padding-horizontal", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "horizontal" + ] + }, + "token-side-nav-wrapper-padding-vertical": { + "key": "{side-nav.wrapper.padding.vertical}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{side-nav.wrapper.padding.vertical}" + }, + "name": "token-side-nav-wrapper-padding-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "vertical" + ] + }, + "token-side-nav-wrapper-padding-horizontal-minimized": { + "key": "{side-nav.wrapper.padding.horizontal-minimized}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.wrapper.padding.horizontal-minimized}" + }, + "name": "token-side-nav-wrapper-padding-horizontal-minimized", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "horizontal-minimized" + ] + }, + "token-side-nav-wrapper-padding-vertical-minimized": { + "key": "{side-nav.wrapper.padding.vertical-minimized}", + "$type": "dimension", + "$value": "22px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "22", + "unit": "px", + "key": "{side-nav.wrapper.padding.vertical-minimized}" + }, + "name": "token-side-nav-wrapper-padding-vertical-minimized", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "vertical-minimized" + ] + }, + "token-side-nav-toggle-button-border-radius": { + "key": "{side-nav.toggle-button.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{side-nav.toggle-button.border.radius}" + }, + "name": "token-side-nav-toggle-button-border-radius", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "toggle-button", + "border", + "radius" + ] + }, + "token-side-nav-header-home-link-padding": { + "key": "{side-nav.header.home-link.padding}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{side-nav.header.home-link.padding}" + }, + "name": "token-side-nav-header-home-link-padding", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "home-link", + "padding" + ] + }, + "token-side-nav-header-home-link-logo-size": { + "key": "{side-nav.header.home-link.logo-size}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{side-nav.header.home-link.logo-size}" + }, + "name": "token-side-nav-header-home-link-logo-size", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "home-link", + "logo-size" + ] + }, + "token-side-nav-header-home-link-logo-size-minimized": { + "key": "{side-nav.header.home-link.logo-size-minimized}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{side-nav.header.home-link.logo-size-minimized}" + }, + "name": "token-side-nav-header-home-link-logo-size-minimized", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "home-link", + "logo-size-minimized" + ] + }, + "token-side-nav-header-actions-spacing": { + "key": "{side-nav.header.actions.spacing}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.header.actions.spacing}" + }, + "name": "token-side-nav-header-actions-spacing", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "actions", + "spacing" + ] + }, + "token-side-nav-body-list-margin-vertical": { + "key": "{side-nav.body.list.margin-vertical}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{side-nav.body.list.margin-vertical}" + }, + "name": "token-side-nav-body-list-margin-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list", + "margin-vertical" + ] + }, + "token-side-nav-body-list-item-height": { + "key": "{side-nav.body.list-item.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{side-nav.body.list-item.height}" + }, + "name": "token-side-nav-body-list-item-height", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "height" + ] + }, + "token-side-nav-body-list-item-padding-horizontal": { + "key": "{side-nav.body.list-item.padding.horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.body.list-item.padding.horizontal}" + }, + "name": "token-side-nav-body-list-item-padding-horizontal", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "padding", + "horizontal" + ] + }, + "token-side-nav-body-list-item-padding-vertical": { + "key": "{side-nav.body.list-item.padding.vertical}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{side-nav.body.list-item.padding.vertical}" + }, + "name": "token-side-nav-body-list-item-padding-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "padding", + "vertical" + ] + }, + "token-side-nav-body-list-item-spacing-vertical": { + "key": "{side-nav.body.list-item.spacing-vertical}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{side-nav.body.list-item.spacing-vertical}" + }, + "name": "token-side-nav-body-list-item-spacing-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "spacing-vertical" + ] + }, + "token-side-nav-body-list-item-content-spacing-horizontal": { + "key": "{side-nav.body.list-item.content-spacing-horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.body.list-item.content-spacing-horizontal}" + }, + "name": "token-side-nav-body-list-item-content-spacing-horizontal", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "content-spacing-horizontal" + ] + }, + "token-side-nav-body-list-item-border-radius": { + "key": "{side-nav.body.list-item.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{side-nav.body.list-item.border-radius}" + }, + "name": "token-side-nav-body-list-item-border-radius", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "border-radius" + ] + }, + "token-side-nav-color-foreground-primary": { + "key": "{side-nav.color.foreground.primary}", + "$type": "color", + "$value": "#dedfe3", + "group": "components", + "original": { + "$type": "color", + "$value": "#dedfe3", + "group": "components", + "key": "{side-nav.color.foreground.primary}" + }, + "name": "token-side-nav-color-foreground-primary", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "foreground", + "primary" + ] + }, + "token-side-nav-color-foreground-strong": { + "key": "{side-nav.color.foreground.strong}", + "$type": "color", + "$value": "#ffffff", + "group": "components", + "original": { + "$type": "color", + "$value": "#fff", + "group": "components", + "key": "{side-nav.color.foreground.strong}" + }, + "name": "token-side-nav-color-foreground-strong", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "foreground", + "strong" + ] + }, + "token-side-nav-color-foreground-faint": { + "key": "{side-nav.color.foreground.faint}", + "$type": "color", + "$value": "#8c909c", + "group": "components", + "original": { + "$type": "color", + "$value": "#8c909c", + "group": "components", + "key": "{side-nav.color.foreground.faint}" + }, + "name": "token-side-nav-color-foreground-faint", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "foreground", + "faint" + ] + }, + "token-side-nav-color-surface-primary": { + "key": "{side-nav.color.surface.primary}", + "$type": "color", + "$value": "#0c0c0e", + "group": "components", + "original": { + "$type": "color", + "$value": "#0c0c0e", + "group": "components", + "key": "{side-nav.color.surface.primary}" + }, + "name": "token-side-nav-color-surface-primary", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "surface", + "primary" + ] + }, + "token-side-nav-color-surface-interactive-hover": { + "key": "{side-nav.color.surface.interactive-hover}", + "$type": "color", + "$value": "#3b3d45", + "group": "semantic", + "original": { + "$type": "color", + "$value": "#3b3d45", + "group": "semantic", + "key": "{side-nav.color.surface.interactive-hover}" + }, + "name": "token-side-nav-color-surface-interactive-hover", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "surface", + "interactive-hover" + ] + }, + "token-side-nav-color-surface-interactive-active": { + "key": "{side-nav.color.surface.interactive-active}", + "$type": "color", + "$value": "#656a76", + "group": "semantic", + "original": { + "$type": "color", + "$value": "#656a76", + "group": "semantic", + "key": "{side-nav.color.surface.interactive-active}" + }, + "name": "token-side-nav-color-surface-interactive-active", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "surface", + "interactive-active" + ] + }, + "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-border-radius": { + "key": "{tooltip.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{tooltip.border-radius}" + }, + "name": "token-tooltip-border-radius", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "border-radius" + ] + }, + "token-tooltip-color-foreground-primary": { + "key": "{tooltip.color.foreground.primary}", + "$type": "color", + "$value": "var(--token-color-foreground-high-contrast)", + "group": "components", + "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" + ] + }, + "token-tooltip-color-surface-primary": { + "key": "{tooltip.color.surface.primary}", + "$type": "color", + "$value": "var(--token-color-palette-neutral-700)", + "group": "components", + "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" + ] + }, + "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-max-width": { + "key": "{tooltip.max-width}", + "$type": "dimension", + "$value": "280px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "280", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{tooltip.padding.vertical}" + }, + "name": "token-tooltip-padding-vertical", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "vertical" + ] + }, + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "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}" + ], + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "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}" + ], + "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, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": [ + "{typography.font-stack.monospace.code.macOS}", + "{typography.font-stack.monospace.code.windows}", + "monospace" + ], + "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": { + "hds": "400", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "hds": "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": { + "hds": "500", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "hds": "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": { + "hds": "600", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "hds": "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": { + "hds": "700", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "hds": "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "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", + "original": { + "$type": "font-size", + "$value": "30", + "unit": "px", + "comment": "30px/1.875rem", + "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", + "original": { + "$type": "number", + "$value": 1.2666, + "comment": "38px", + "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-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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "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", + "original": { + "$type": "font-size", + "$value": "24", + "unit": "px", + "comment": "24px/1.5rem", + "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", + "original": { + "$type": "number", + "$value": 1.3333, + "comment": "32px", + "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-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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "18", + "unit": "px", + "comment": "18px/1.125rem", + "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", + "original": { + "$type": "number", + "$value": 1.3333, + "comment": "24px", + "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", + "comment": "this is `tracking`", + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "comment": "this is `tracking`", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "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", + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "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", + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px", + "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", + "comment": "this is `tracking`", + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "comment": "this is `tracking`", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "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", + "original": { + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "key": "{typography.display-100.line-height}" + }, + "name": "token-typography-display-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "line-height" + ] + }, + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "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", + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "comment": "14px/0.875rem", + "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", + "original": { + "$type": "number", + "$value": 1.4286, + "comment": "20px", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "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", + "original": { + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "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-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, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "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", + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "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", + "original": { + "$type": "number", + "$value": 1.23, + "comment": "16px", + "key": "{typography.code-100.line-height}" + }, + "name": "token-typography-code-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "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, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "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", + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "comment": "14px/0.875rem", + "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", + "original": { + "$type": "number", + "$value": 1.125, + "comment": "18px", + "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-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, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "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", + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "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", + "original": { + "$type": "number", + "$value": 1.25, + "comment": "20px", + "key": "{typography.code-300.line-height}" + }, + "name": "token-typography-code-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "line-height" + ] + } + }, + "cds-g10": { + "token-border-radius-x-small": { + "key": "{border.radius.x-small}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{border.radius.large}" + }, + "name": "token-border-radius-large", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "large" + ] + }, + "token-color-palette-blue-500": { + "key": "{color.palette.blue-500}", + "$type": "color", + "$value": "#1c345f", + "group": "palette", + "original": { + "$type": "color", + "$value": "#1c345f", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#0046d1", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#0c56e9", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#1060ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#cce3fe", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f2f8ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#42215b", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#7b00db", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#911ced", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#a737ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#ead2fe", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f9f2ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#054220", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#006619", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#00781e", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#008a22", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#cceeda", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f2fbf6", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#542800", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#803d00", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#9e4b00", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#bb5a00", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fbeabf", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fff9e8", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#51130a", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#940004", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#c00005", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#e52228", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fbd4d4", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fff5f5", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#0c0c0e", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#3b3d45", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#656a76", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#8c909c", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#c2c5cb", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#dedfe3", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f1f2f3", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fafafa", + "group": "palette", + "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": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.white.0}", + "group": "palette", + "$modes": { + "hds": "#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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-600}", + "alpha": "0.4", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "alpha": "0.2", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "alpha": "0.1", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.alpha-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.alpha-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.alpha-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "semantic", + "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", + "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", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "semantic", + "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", + "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", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-700}", + "group": "semantic", + "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": { + "hds": "#ffffff", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textPrimary}", + "group": "semantic", + "$modes": { + "hds": "#ffffff", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-400}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-100}", + "group": "semantic", + "key": "{color.surface.strong}" + }, + "name": "token-color-surface-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "strong" + ] + }, + "token-color-surface-interactive": { + "key": "{color.surface.interactive}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-50}", + "group": "semantic", + "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", + "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", + "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", + "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", + "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", + "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", + "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", + "original": { + "$value": "{elevation.inset.box-shadow-01}", + "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", + "original": { + "$value": "{elevation.low.box-shadow-01}, {elevation.low.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.mid.box-shadow-01}, {elevation.mid.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.high.box-shadow-01}, {elevation.high.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.higher.box-shadow-01}, {elevation.higher.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.overlay.box-shadow-01}, {elevation.overlay.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.inset.box-shadow-border}, {elevation.inset.box-shadow}", + "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", + "original": { + "$value": "{elevation.base.box-shadow-border}", + "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", + "original": { + "$value": "{elevation.low.box-shadow-border}, {elevation.low.box-shadow}", + "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", + "original": { + "$value": "{elevation.mid.box-shadow-border}, {elevation.mid.box-shadow}", + "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", + "original": { + "$value": "{elevation.high.box-shadow-border}, {elevation.high.box-shadow}", + "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", + "original": { + "$value": "{elevation.higher.box-shadow-border}, {elevation.higher.box-shadow}", + "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", + "original": { + "$value": "{elevation.overlay.box-shadow-border}, {elevation.overlay.box-shadow}", + "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-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-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": "#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": "#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", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{form.radiocard.border.radius}" + }, + "name": "token-form-radiocard-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "radius" + ] + }, + "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-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-side-nav-wrapper-border-width": { + "key": "{side-nav.wrapper.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{side-nav.wrapper.border.width}" + }, + "name": "token-side-nav-wrapper-border-width", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "border", + "width" + ] + }, + "token-side-nav-wrapper-border-color": { + "key": "{side-nav.wrapper.border.color}", + "$type": "color", + "$value": "#656a76", + "group": "components", + "original": { + "$type": "color", + "$value": "#656a76", + "group": "components", + "key": "{side-nav.wrapper.border.color}" + }, + "name": "token-side-nav-wrapper-border-color", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "border", + "color" + ] + }, + "token-side-nav-wrapper-padding-horizontal": { + "key": "{side-nav.wrapper.padding.horizontal}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{side-nav.wrapper.padding.horizontal}" + }, + "name": "token-side-nav-wrapper-padding-horizontal", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "horizontal" + ] + }, + "token-side-nav-wrapper-padding-vertical": { + "key": "{side-nav.wrapper.padding.vertical}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{side-nav.wrapper.padding.vertical}" + }, + "name": "token-side-nav-wrapper-padding-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "vertical" + ] + }, + "token-side-nav-wrapper-padding-horizontal-minimized": { + "key": "{side-nav.wrapper.padding.horizontal-minimized}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.wrapper.padding.horizontal-minimized}" + }, + "name": "token-side-nav-wrapper-padding-horizontal-minimized", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "horizontal-minimized" + ] + }, + "token-side-nav-wrapper-padding-vertical-minimized": { + "key": "{side-nav.wrapper.padding.vertical-minimized}", + "$type": "dimension", + "$value": "22px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "22", + "unit": "px", + "key": "{side-nav.wrapper.padding.vertical-minimized}" + }, + "name": "token-side-nav-wrapper-padding-vertical-minimized", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "vertical-minimized" + ] + }, + "token-side-nav-toggle-button-border-radius": { + "key": "{side-nav.toggle-button.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{side-nav.toggle-button.border.radius}" + }, + "name": "token-side-nav-toggle-button-border-radius", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "toggle-button", + "border", + "radius" + ] + }, + "token-side-nav-header-home-link-padding": { + "key": "{side-nav.header.home-link.padding}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{side-nav.header.home-link.padding}" + }, + "name": "token-side-nav-header-home-link-padding", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "home-link", + "padding" + ] + }, + "token-side-nav-header-home-link-logo-size": { + "key": "{side-nav.header.home-link.logo-size}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{side-nav.header.home-link.logo-size}" + }, + "name": "token-side-nav-header-home-link-logo-size", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "home-link", + "logo-size" + ] + }, + "token-side-nav-header-home-link-logo-size-minimized": { + "key": "{side-nav.header.home-link.logo-size-minimized}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{side-nav.header.home-link.logo-size-minimized}" + }, + "name": "token-side-nav-header-home-link-logo-size-minimized", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "home-link", + "logo-size-minimized" + ] + }, + "token-side-nav-header-actions-spacing": { + "key": "{side-nav.header.actions.spacing}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.header.actions.spacing}" + }, + "name": "token-side-nav-header-actions-spacing", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "actions", + "spacing" + ] + }, + "token-side-nav-body-list-margin-vertical": { + "key": "{side-nav.body.list.margin-vertical}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{side-nav.body.list.margin-vertical}" + }, + "name": "token-side-nav-body-list-margin-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list", + "margin-vertical" + ] + }, + "token-side-nav-body-list-item-height": { + "key": "{side-nav.body.list-item.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{side-nav.body.list-item.height}" + }, + "name": "token-side-nav-body-list-item-height", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "height" + ] + }, + "token-side-nav-body-list-item-padding-horizontal": { + "key": "{side-nav.body.list-item.padding.horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.body.list-item.padding.horizontal}" + }, + "name": "token-side-nav-body-list-item-padding-horizontal", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "padding", + "horizontal" + ] + }, + "token-side-nav-body-list-item-padding-vertical": { + "key": "{side-nav.body.list-item.padding.vertical}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{side-nav.body.list-item.padding.vertical}" + }, + "name": "token-side-nav-body-list-item-padding-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "padding", + "vertical" + ] + }, + "token-side-nav-body-list-item-spacing-vertical": { + "key": "{side-nav.body.list-item.spacing-vertical}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{side-nav.body.list-item.spacing-vertical}" + }, + "name": "token-side-nav-body-list-item-spacing-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "spacing-vertical" + ] + }, + "token-side-nav-body-list-item-content-spacing-horizontal": { + "key": "{side-nav.body.list-item.content-spacing-horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.body.list-item.content-spacing-horizontal}" + }, + "name": "token-side-nav-body-list-item-content-spacing-horizontal", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "content-spacing-horizontal" + ] + }, + "token-side-nav-body-list-item-border-radius": { + "key": "{side-nav.body.list-item.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{side-nav.body.list-item.border-radius}" + }, + "name": "token-side-nav-body-list-item-border-radius", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "border-radius" + ] + }, + "token-side-nav-color-foreground-primary": { + "key": "{side-nav.color.foreground.primary}", + "$type": "color", + "$value": "#dedfe3", + "group": "components", + "original": { + "$type": "color", + "$value": "#dedfe3", + "group": "components", + "key": "{side-nav.color.foreground.primary}" + }, + "name": "token-side-nav-color-foreground-primary", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "foreground", + "primary" + ] + }, + "token-side-nav-color-foreground-strong": { + "key": "{side-nav.color.foreground.strong}", + "$type": "color", + "$value": "#ffffff", + "group": "components", + "original": { + "$type": "color", + "$value": "#fff", + "group": "components", + "key": "{side-nav.color.foreground.strong}" + }, + "name": "token-side-nav-color-foreground-strong", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "foreground", + "strong" + ] + }, + "token-side-nav-color-foreground-faint": { + "key": "{side-nav.color.foreground.faint}", + "$type": "color", + "$value": "#8c909c", + "group": "components", + "original": { + "$type": "color", + "$value": "#8c909c", + "group": "components", + "key": "{side-nav.color.foreground.faint}" + }, + "name": "token-side-nav-color-foreground-faint", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "foreground", + "faint" + ] + }, + "token-side-nav-color-surface-primary": { + "key": "{side-nav.color.surface.primary}", + "$type": "color", + "$value": "#0c0c0e", + "group": "components", + "original": { + "$type": "color", + "$value": "#0c0c0e", + "group": "components", + "key": "{side-nav.color.surface.primary}" + }, + "name": "token-side-nav-color-surface-primary", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "surface", + "primary" + ] + }, + "token-side-nav-color-surface-interactive-hover": { + "key": "{side-nav.color.surface.interactive-hover}", + "$type": "color", + "$value": "#3b3d45", + "group": "semantic", + "original": { + "$type": "color", + "$value": "#3b3d45", + "group": "semantic", + "key": "{side-nav.color.surface.interactive-hover}" + }, + "name": "token-side-nav-color-surface-interactive-hover", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "surface", + "interactive-hover" + ] + }, + "token-side-nav-color-surface-interactive-active": { + "key": "{side-nav.color.surface.interactive-active}", + "$type": "color", + "$value": "#656a76", + "group": "semantic", + "original": { + "$type": "color", + "$value": "#656a76", + "group": "semantic", + "key": "{side-nav.color.surface.interactive-active}" + }, + "name": "token-side-nav-color-surface-interactive-active", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "surface", + "interactive-active" + ] + }, + "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-border-radius": { + "key": "{tooltip.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{tooltip.border-radius}" + }, + "name": "token-tooltip-border-radius", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "border-radius" + ] + }, + "token-tooltip-color-foreground-primary": { + "key": "{tooltip.color.foreground.primary}", + "$type": "color", + "$value": "var(--token-color-foreground-high-contrast)", + "group": "components", + "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" + ] + }, + "token-tooltip-color-surface-primary": { + "key": "{tooltip.color.surface.primary}", + "$type": "color", + "$value": "var(--token-color-palette-neutral-700)", + "group": "components", + "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" + ] + }, + "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-max-width": { + "key": "{tooltip.max-width}", + "$type": "dimension", + "$value": "280px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "280", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{tooltip.padding.vertical}" + }, + "name": "token-tooltip-padding-vertical", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "vertical" + ] + }, + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "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}" + ], + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "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}" + ], + "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, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": [ + "{typography.font-stack.monospace.code.macOS}", + "{typography.font-stack.monospace.code.windows}", + "monospace" + ], + "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": { + "hds": "400", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "hds": "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": { + "hds": "500", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "hds": "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": { + "hds": "600", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "hds": "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": { + "hds": "700", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "hds": "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "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", + "original": { + "$type": "font-size", + "$value": "30", + "unit": "px", + "comment": "30px/1.875rem", + "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", + "original": { + "$type": "number", + "$value": 1.2666, + "comment": "38px", + "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-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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "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", + "original": { + "$type": "font-size", + "$value": "24", + "unit": "px", + "comment": "24px/1.5rem", + "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", + "original": { + "$type": "number", + "$value": 1.3333, + "comment": "32px", + "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-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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "18", + "unit": "px", + "comment": "18px/1.125rem", + "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", + "original": { + "$type": "number", + "$value": 1.3333, + "comment": "24px", + "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", + "comment": "this is `tracking`", + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "comment": "this is `tracking`", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "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", + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "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", + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px", + "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", + "comment": "this is `tracking`", + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "comment": "this is `tracking`", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "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", + "original": { + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "key": "{typography.display-100.line-height}" + }, + "name": "token-typography-display-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "line-height" + ] + }, + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "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", + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "comment": "14px/0.875rem", + "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", + "original": { + "$type": "number", + "$value": 1.4286, + "comment": "20px", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "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", + "original": { + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "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-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, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "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", + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "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", + "original": { + "$type": "number", + "$value": 1.23, + "comment": "16px", + "key": "{typography.code-100.line-height}" + }, + "name": "token-typography-code-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "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, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "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", + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "comment": "14px/0.875rem", + "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", + "original": { + "$type": "number", + "$value": 1.125, + "comment": "18px", + "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-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, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "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", + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "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", + "original": { + "$type": "number", + "$value": 1.25, + "comment": "20px", + "key": "{typography.code-300.line-height}" + }, + "name": "token-typography-code-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "line-height" + ] + } + }, + "cds-g90": { + "token-border-radius-x-small": { + "key": "{border.radius.x-small}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{border.radius.large}" + }, + "name": "token-border-radius-large", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "large" + ] + }, + "token-color-palette-blue-500": { + "key": "{color.palette.blue-500}", + "$type": "color", + "$value": "#1c345f", + "group": "palette", + "original": { + "$type": "color", + "$value": "#1c345f", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#0046d1", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#0c56e9", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#1060ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#cce3fe", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f2f8ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#42215b", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#7b00db", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#911ced", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#a737ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#ead2fe", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f9f2ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#054220", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#006619", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#00781e", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#008a22", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#cceeda", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f2fbf6", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#542800", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#803d00", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#9e4b00", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#bb5a00", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fbeabf", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fff9e8", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#51130a", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#940004", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#c00005", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#e52228", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fbd4d4", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fff5f5", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#0c0c0e", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#3b3d45", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#656a76", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#8c909c", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#c2c5cb", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#dedfe3", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f1f2f3", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fafafa", + "group": "palette", + "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": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.white.0}", + "group": "palette", + "$modes": { + "hds": "#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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-600}", + "alpha": "0.4", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "alpha": "0.2", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "alpha": "0.1", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.alpha-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.alpha-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.alpha-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "semantic", + "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", + "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", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "semantic", + "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", + "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", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-700}", + "group": "semantic", + "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": { + "hds": "#ffffff", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textPrimary}", + "group": "semantic", + "$modes": { + "hds": "#ffffff", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-400}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-100}", + "group": "semantic", + "key": "{color.surface.strong}" + }, + "name": "token-color-surface-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "strong" + ] + }, + "token-color-surface-interactive": { + "key": "{color.surface.interactive}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-50}", + "group": "semantic", + "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", + "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", + "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", + "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", + "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", + "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", + "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", + "original": { + "$value": "{elevation.inset.box-shadow-01}", + "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", + "original": { + "$value": "{elevation.low.box-shadow-01}, {elevation.low.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.mid.box-shadow-01}, {elevation.mid.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.high.box-shadow-01}, {elevation.high.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.higher.box-shadow-01}, {elevation.higher.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.overlay.box-shadow-01}, {elevation.overlay.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.inset.box-shadow-border}, {elevation.inset.box-shadow}", + "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", + "original": { + "$value": "{elevation.base.box-shadow-border}", + "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", + "original": { + "$value": "{elevation.low.box-shadow-border}, {elevation.low.box-shadow}", + "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", + "original": { + "$value": "{elevation.mid.box-shadow-border}, {elevation.mid.box-shadow}", + "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", + "original": { + "$value": "{elevation.high.box-shadow-border}, {elevation.high.box-shadow}", + "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", + "original": { + "$value": "{elevation.higher.box-shadow-border}, {elevation.higher.box-shadow}", + "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", + "original": { + "$value": "{elevation.overlay.box-shadow-border}, {elevation.overlay.box-shadow}", + "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-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-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": "#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": "#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", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{form.radiocard.border.radius}" + }, + "name": "token-form-radiocard-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "radius" + ] + }, + "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-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-side-nav-wrapper-border-width": { + "key": "{side-nav.wrapper.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{side-nav.wrapper.border.width}" + }, + "name": "token-side-nav-wrapper-border-width", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "border", + "width" + ] + }, + "token-side-nav-wrapper-border-color": { + "key": "{side-nav.wrapper.border.color}", + "$type": "color", + "$value": "#656a76", + "group": "components", + "original": { + "$type": "color", + "$value": "#656a76", + "group": "components", + "key": "{side-nav.wrapper.border.color}" + }, + "name": "token-side-nav-wrapper-border-color", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "border", + "color" + ] + }, + "token-side-nav-wrapper-padding-horizontal": { + "key": "{side-nav.wrapper.padding.horizontal}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{side-nav.wrapper.padding.horizontal}" + }, + "name": "token-side-nav-wrapper-padding-horizontal", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "horizontal" + ] + }, + "token-side-nav-wrapper-padding-vertical": { + "key": "{side-nav.wrapper.padding.vertical}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{side-nav.wrapper.padding.vertical}" + }, + "name": "token-side-nav-wrapper-padding-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "vertical" + ] + }, + "token-side-nav-wrapper-padding-horizontal-minimized": { + "key": "{side-nav.wrapper.padding.horizontal-minimized}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.wrapper.padding.horizontal-minimized}" + }, + "name": "token-side-nav-wrapper-padding-horizontal-minimized", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "horizontal-minimized" + ] + }, + "token-side-nav-wrapper-padding-vertical-minimized": { + "key": "{side-nav.wrapper.padding.vertical-minimized}", + "$type": "dimension", + "$value": "22px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "22", + "unit": "px", + "key": "{side-nav.wrapper.padding.vertical-minimized}" + }, + "name": "token-side-nav-wrapper-padding-vertical-minimized", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "vertical-minimized" + ] + }, + "token-side-nav-toggle-button-border-radius": { + "key": "{side-nav.toggle-button.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{side-nav.toggle-button.border.radius}" + }, + "name": "token-side-nav-toggle-button-border-radius", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "toggle-button", + "border", + "radius" + ] + }, + "token-side-nav-header-home-link-padding": { + "key": "{side-nav.header.home-link.padding}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{side-nav.header.home-link.padding}" + }, + "name": "token-side-nav-header-home-link-padding", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "home-link", + "padding" + ] + }, + "token-side-nav-header-home-link-logo-size": { + "key": "{side-nav.header.home-link.logo-size}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{side-nav.header.home-link.logo-size}" + }, + "name": "token-side-nav-header-home-link-logo-size", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "home-link", + "logo-size" + ] + }, + "token-side-nav-header-home-link-logo-size-minimized": { + "key": "{side-nav.header.home-link.logo-size-minimized}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{side-nav.header.home-link.logo-size-minimized}" + }, + "name": "token-side-nav-header-home-link-logo-size-minimized", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "home-link", + "logo-size-minimized" + ] + }, + "token-side-nav-header-actions-spacing": { + "key": "{side-nav.header.actions.spacing}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.header.actions.spacing}" + }, + "name": "token-side-nav-header-actions-spacing", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "actions", + "spacing" + ] + }, + "token-side-nav-body-list-margin-vertical": { + "key": "{side-nav.body.list.margin-vertical}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{side-nav.body.list.margin-vertical}" + }, + "name": "token-side-nav-body-list-margin-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list", + "margin-vertical" + ] + }, + "token-side-nav-body-list-item-height": { + "key": "{side-nav.body.list-item.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{side-nav.body.list-item.height}" + }, + "name": "token-side-nav-body-list-item-height", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "height" + ] + }, + "token-side-nav-body-list-item-padding-horizontal": { + "key": "{side-nav.body.list-item.padding.horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.body.list-item.padding.horizontal}" + }, + "name": "token-side-nav-body-list-item-padding-horizontal", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "padding", + "horizontal" + ] + }, + "token-side-nav-body-list-item-padding-vertical": { + "key": "{side-nav.body.list-item.padding.vertical}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{side-nav.body.list-item.padding.vertical}" + }, + "name": "token-side-nav-body-list-item-padding-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "padding", + "vertical" + ] + }, + "token-side-nav-body-list-item-spacing-vertical": { + "key": "{side-nav.body.list-item.spacing-vertical}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{side-nav.body.list-item.spacing-vertical}" + }, + "name": "token-side-nav-body-list-item-spacing-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "spacing-vertical" + ] + }, + "token-side-nav-body-list-item-content-spacing-horizontal": { + "key": "{side-nav.body.list-item.content-spacing-horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.body.list-item.content-spacing-horizontal}" + }, + "name": "token-side-nav-body-list-item-content-spacing-horizontal", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "content-spacing-horizontal" + ] + }, + "token-side-nav-body-list-item-border-radius": { + "key": "{side-nav.body.list-item.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{side-nav.body.list-item.border-radius}" + }, + "name": "token-side-nav-body-list-item-border-radius", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "border-radius" + ] + }, + "token-side-nav-color-foreground-primary": { + "key": "{side-nav.color.foreground.primary}", + "$type": "color", + "$value": "#dedfe3", + "group": "components", + "original": { + "$type": "color", + "$value": "#dedfe3", + "group": "components", + "key": "{side-nav.color.foreground.primary}" + }, + "name": "token-side-nav-color-foreground-primary", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "foreground", + "primary" + ] + }, + "token-side-nav-color-foreground-strong": { + "key": "{side-nav.color.foreground.strong}", + "$type": "color", + "$value": "#ffffff", + "group": "components", + "original": { + "$type": "color", + "$value": "#fff", + "group": "components", + "key": "{side-nav.color.foreground.strong}" + }, + "name": "token-side-nav-color-foreground-strong", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "foreground", + "strong" + ] + }, + "token-side-nav-color-foreground-faint": { + "key": "{side-nav.color.foreground.faint}", + "$type": "color", + "$value": "#8c909c", + "group": "components", + "original": { + "$type": "color", + "$value": "#8c909c", + "group": "components", + "key": "{side-nav.color.foreground.faint}" + }, + "name": "token-side-nav-color-foreground-faint", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "foreground", + "faint" + ] + }, + "token-side-nav-color-surface-primary": { + "key": "{side-nav.color.surface.primary}", + "$type": "color", + "$value": "#0c0c0e", + "group": "components", + "original": { + "$type": "color", + "$value": "#0c0c0e", + "group": "components", + "key": "{side-nav.color.surface.primary}" + }, + "name": "token-side-nav-color-surface-primary", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "surface", + "primary" + ] + }, + "token-side-nav-color-surface-interactive-hover": { + "key": "{side-nav.color.surface.interactive-hover}", + "$type": "color", + "$value": "#3b3d45", + "group": "semantic", + "original": { + "$type": "color", + "$value": "#3b3d45", + "group": "semantic", + "key": "{side-nav.color.surface.interactive-hover}" + }, + "name": "token-side-nav-color-surface-interactive-hover", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "surface", + "interactive-hover" + ] + }, + "token-side-nav-color-surface-interactive-active": { + "key": "{side-nav.color.surface.interactive-active}", + "$type": "color", + "$value": "#656a76", + "group": "semantic", + "original": { + "$type": "color", + "$value": "#656a76", + "group": "semantic", + "key": "{side-nav.color.surface.interactive-active}" + }, + "name": "token-side-nav-color-surface-interactive-active", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "surface", + "interactive-active" + ] + }, + "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-border-radius": { + "key": "{tooltip.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{tooltip.border-radius}" + }, + "name": "token-tooltip-border-radius", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "border-radius" + ] + }, + "token-tooltip-color-foreground-primary": { + "key": "{tooltip.color.foreground.primary}", + "$type": "color", + "$value": "var(--token-color-foreground-high-contrast)", + "group": "components", + "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" + ] + }, + "token-tooltip-color-surface-primary": { + "key": "{tooltip.color.surface.primary}", + "$type": "color", + "$value": "var(--token-color-palette-neutral-700)", + "group": "components", + "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" + ] + }, + "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-max-width": { + "key": "{tooltip.max-width}", + "$type": "dimension", + "$value": "280px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "280", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{tooltip.padding.vertical}" + }, + "name": "token-tooltip-padding-vertical", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "vertical" + ] + }, + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "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}" + ], + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "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}" + ], + "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, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": [ + "{typography.font-stack.monospace.code.macOS}", + "{typography.font-stack.monospace.code.windows}", + "monospace" + ], + "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": { + "hds": "400", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "hds": "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": { + "hds": "500", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "hds": "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": { + "hds": "600", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "hds": "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": { + "hds": "700", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "hds": "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "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", + "original": { + "$type": "font-size", + "$value": "30", + "unit": "px", + "comment": "30px/1.875rem", + "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", + "original": { + "$type": "number", + "$value": 1.2666, + "comment": "38px", + "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-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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "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", + "original": { + "$type": "font-size", + "$value": "24", + "unit": "px", + "comment": "24px/1.5rem", + "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", + "original": { + "$type": "number", + "$value": 1.3333, + "comment": "32px", + "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-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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "18", + "unit": "px", + "comment": "18px/1.125rem", + "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", + "original": { + "$type": "number", + "$value": 1.3333, + "comment": "24px", + "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", + "comment": "this is `tracking`", + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "comment": "this is `tracking`", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "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", + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "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", + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px", + "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", + "comment": "this is `tracking`", + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "comment": "this is `tracking`", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "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", + "original": { + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "key": "{typography.display-100.line-height}" + }, + "name": "token-typography-display-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "line-height" + ] + }, + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "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", + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "comment": "14px/0.875rem", + "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", + "original": { + "$type": "number", + "$value": 1.4286, + "comment": "20px", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "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", + "original": { + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "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-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, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "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", + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "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", + "original": { + "$type": "number", + "$value": 1.23, + "comment": "16px", + "key": "{typography.code-100.line-height}" + }, + "name": "token-typography-code-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "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, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "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", + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "comment": "14px/0.875rem", + "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", + "original": { + "$type": "number", + "$value": 1.125, + "comment": "18px", + "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-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, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "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", + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "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", + "original": { + "$type": "number", + "$value": 1.25, + "comment": "20px", + "key": "{typography.code-300.line-height}" + }, + "name": "token-typography-code-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "line-height" + ] + } + }, + "cds-g100": { + "token-border-radius-x-small": { + "key": "{border.radius.x-small}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{border.radius.large}" + }, + "name": "token-border-radius-large", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "large" + ] + }, + "token-color-palette-blue-500": { + "key": "{color.palette.blue-500}", + "$type": "color", + "$value": "#1c345f", + "group": "palette", + "original": { + "$type": "color", + "$value": "#1c345f", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#0046d1", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#0c56e9", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#1060ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#cce3fe", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f2f8ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#42215b", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#7b00db", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#911ced", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#a737ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#ead2fe", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f9f2ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#054220", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#006619", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#00781e", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#008a22", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#cceeda", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f2fbf6", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#542800", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#803d00", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#9e4b00", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#bb5a00", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fbeabf", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fff9e8", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#51130a", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#940004", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#c00005", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#e52228", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fbd4d4", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fff5f5", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#0c0c0e", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#3b3d45", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#656a76", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#8c909c", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#c2c5cb", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#dedfe3", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f1f2f3", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fafafa", + "group": "palette", + "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": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.white.0}", + "group": "palette", + "$modes": { + "hds": "#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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-600}", + "alpha": "0.4", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "alpha": "0.2", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "alpha": "0.1", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.alpha-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.alpha-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.alpha-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "semantic", + "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", + "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", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "semantic", + "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", + "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", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-700}", + "group": "semantic", + "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": { + "hds": "#ffffff", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textPrimary}", + "group": "semantic", + "$modes": { + "hds": "#ffffff", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-400}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-100}", + "group": "semantic", + "key": "{color.surface.strong}" + }, + "name": "token-color-surface-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "strong" + ] + }, + "token-color-surface-interactive": { + "key": "{color.surface.interactive}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-50}", + "group": "semantic", + "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", + "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", + "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", + "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", + "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", + "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", + "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", + "original": { + "$value": "{elevation.inset.box-shadow-01}", + "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", + "original": { + "$value": "{elevation.low.box-shadow-01}, {elevation.low.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.mid.box-shadow-01}, {elevation.mid.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.high.box-shadow-01}, {elevation.high.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.higher.box-shadow-01}, {elevation.higher.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.overlay.box-shadow-01}, {elevation.overlay.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.inset.box-shadow-border}, {elevation.inset.box-shadow}", + "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", + "original": { + "$value": "{elevation.base.box-shadow-border}", + "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", + "original": { + "$value": "{elevation.low.box-shadow-border}, {elevation.low.box-shadow}", + "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", + "original": { + "$value": "{elevation.mid.box-shadow-border}, {elevation.mid.box-shadow}", + "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", + "original": { + "$value": "{elevation.high.box-shadow-border}, {elevation.high.box-shadow}", + "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", + "original": { + "$value": "{elevation.higher.box-shadow-border}, {elevation.higher.box-shadow}", + "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", + "original": { + "$value": "{elevation.overlay.box-shadow-border}, {elevation.overlay.box-shadow}", + "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-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-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": "#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": "#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", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{form.radiocard.border.radius}" + }, + "name": "token-form-radiocard-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "radius" + ] + }, + "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-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-side-nav-wrapper-border-width": { + "key": "{side-nav.wrapper.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{side-nav.wrapper.border.width}" + }, + "name": "token-side-nav-wrapper-border-width", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "border", + "width" + ] + }, + "token-side-nav-wrapper-border-color": { + "key": "{side-nav.wrapper.border.color}", + "$type": "color", + "$value": "#656a76", + "group": "components", + "original": { + "$type": "color", + "$value": "#656a76", + "group": "components", + "key": "{side-nav.wrapper.border.color}" + }, + "name": "token-side-nav-wrapper-border-color", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "border", + "color" + ] + }, + "token-side-nav-wrapper-padding-horizontal": { + "key": "{side-nav.wrapper.padding.horizontal}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{side-nav.wrapper.padding.horizontal}" + }, + "name": "token-side-nav-wrapper-padding-horizontal", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "horizontal" + ] + }, + "token-side-nav-wrapper-padding-vertical": { + "key": "{side-nav.wrapper.padding.vertical}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{side-nav.wrapper.padding.vertical}" + }, + "name": "token-side-nav-wrapper-padding-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "vertical" + ] + }, + "token-side-nav-wrapper-padding-horizontal-minimized": { + "key": "{side-nav.wrapper.padding.horizontal-minimized}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.wrapper.padding.horizontal-minimized}" + }, + "name": "token-side-nav-wrapper-padding-horizontal-minimized", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "horizontal-minimized" + ] + }, + "token-side-nav-wrapper-padding-vertical-minimized": { + "key": "{side-nav.wrapper.padding.vertical-minimized}", + "$type": "dimension", + "$value": "22px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "22", + "unit": "px", + "key": "{side-nav.wrapper.padding.vertical-minimized}" + }, + "name": "token-side-nav-wrapper-padding-vertical-minimized", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "vertical-minimized" + ] + }, + "token-side-nav-toggle-button-border-radius": { + "key": "{side-nav.toggle-button.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{side-nav.toggle-button.border.radius}" + }, + "name": "token-side-nav-toggle-button-border-radius", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "toggle-button", + "border", + "radius" + ] + }, + "token-side-nav-header-home-link-padding": { + "key": "{side-nav.header.home-link.padding}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{side-nav.header.home-link.padding}" + }, + "name": "token-side-nav-header-home-link-padding", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "home-link", + "padding" + ] + }, + "token-side-nav-header-home-link-logo-size": { + "key": "{side-nav.header.home-link.logo-size}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{side-nav.header.home-link.logo-size}" + }, + "name": "token-side-nav-header-home-link-logo-size", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "home-link", + "logo-size" + ] + }, + "token-side-nav-header-home-link-logo-size-minimized": { + "key": "{side-nav.header.home-link.logo-size-minimized}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{side-nav.header.home-link.logo-size-minimized}" + }, + "name": "token-side-nav-header-home-link-logo-size-minimized", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "home-link", + "logo-size-minimized" + ] + }, + "token-side-nav-header-actions-spacing": { + "key": "{side-nav.header.actions.spacing}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.header.actions.spacing}" + }, + "name": "token-side-nav-header-actions-spacing", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "actions", + "spacing" + ] + }, + "token-side-nav-body-list-margin-vertical": { + "key": "{side-nav.body.list.margin-vertical}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{side-nav.body.list.margin-vertical}" + }, + "name": "token-side-nav-body-list-margin-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list", + "margin-vertical" + ] + }, + "token-side-nav-body-list-item-height": { + "key": "{side-nav.body.list-item.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{side-nav.body.list-item.height}" + }, + "name": "token-side-nav-body-list-item-height", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "height" + ] + }, + "token-side-nav-body-list-item-padding-horizontal": { + "key": "{side-nav.body.list-item.padding.horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.body.list-item.padding.horizontal}" + }, + "name": "token-side-nav-body-list-item-padding-horizontal", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "padding", + "horizontal" + ] + }, + "token-side-nav-body-list-item-padding-vertical": { + "key": "{side-nav.body.list-item.padding.vertical}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{side-nav.body.list-item.padding.vertical}" + }, + "name": "token-side-nav-body-list-item-padding-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "padding", + "vertical" + ] + }, + "token-side-nav-body-list-item-spacing-vertical": { + "key": "{side-nav.body.list-item.spacing-vertical}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{side-nav.body.list-item.spacing-vertical}" + }, + "name": "token-side-nav-body-list-item-spacing-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "spacing-vertical" + ] + }, + "token-side-nav-body-list-item-content-spacing-horizontal": { + "key": "{side-nav.body.list-item.content-spacing-horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.body.list-item.content-spacing-horizontal}" + }, + "name": "token-side-nav-body-list-item-content-spacing-horizontal", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "content-spacing-horizontal" + ] + }, + "token-side-nav-body-list-item-border-radius": { + "key": "{side-nav.body.list-item.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{side-nav.body.list-item.border-radius}" + }, + "name": "token-side-nav-body-list-item-border-radius", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "border-radius" + ] + }, + "token-side-nav-color-foreground-primary": { + "key": "{side-nav.color.foreground.primary}", + "$type": "color", + "$value": "#dedfe3", + "group": "components", + "original": { + "$type": "color", + "$value": "#dedfe3", + "group": "components", + "key": "{side-nav.color.foreground.primary}" + }, + "name": "token-side-nav-color-foreground-primary", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "foreground", + "primary" + ] + }, + "token-side-nav-color-foreground-strong": { + "key": "{side-nav.color.foreground.strong}", + "$type": "color", + "$value": "#ffffff", + "group": "components", + "original": { + "$type": "color", + "$value": "#fff", + "group": "components", + "key": "{side-nav.color.foreground.strong}" + }, + "name": "token-side-nav-color-foreground-strong", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "foreground", + "strong" + ] + }, + "token-side-nav-color-foreground-faint": { + "key": "{side-nav.color.foreground.faint}", + "$type": "color", + "$value": "#8c909c", + "group": "components", + "original": { + "$type": "color", + "$value": "#8c909c", + "group": "components", + "key": "{side-nav.color.foreground.faint}" + }, + "name": "token-side-nav-color-foreground-faint", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "foreground", + "faint" + ] + }, + "token-side-nav-color-surface-primary": { + "key": "{side-nav.color.surface.primary}", + "$type": "color", + "$value": "#0c0c0e", + "group": "components", + "original": { + "$type": "color", + "$value": "#0c0c0e", + "group": "components", + "key": "{side-nav.color.surface.primary}" + }, + "name": "token-side-nav-color-surface-primary", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "surface", + "primary" + ] + }, + "token-side-nav-color-surface-interactive-hover": { + "key": "{side-nav.color.surface.interactive-hover}", + "$type": "color", + "$value": "#3b3d45", + "group": "semantic", + "original": { + "$type": "color", + "$value": "#3b3d45", + "group": "semantic", + "key": "{side-nav.color.surface.interactive-hover}" + }, + "name": "token-side-nav-color-surface-interactive-hover", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "surface", + "interactive-hover" + ] + }, + "token-side-nav-color-surface-interactive-active": { + "key": "{side-nav.color.surface.interactive-active}", + "$type": "color", + "$value": "#656a76", + "group": "semantic", + "original": { + "$type": "color", + "$value": "#656a76", + "group": "semantic", + "key": "{side-nav.color.surface.interactive-active}" + }, + "name": "token-side-nav-color-surface-interactive-active", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "surface", + "interactive-active" + ] + }, + "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-border-radius": { + "key": "{tooltip.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{tooltip.border-radius}" + }, + "name": "token-tooltip-border-radius", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "border-radius" + ] + }, + "token-tooltip-color-foreground-primary": { + "key": "{tooltip.color.foreground.primary}", + "$type": "color", + "$value": "var(--token-color-foreground-high-contrast)", + "group": "components", + "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" + ] + }, + "token-tooltip-color-surface-primary": { + "key": "{tooltip.color.surface.primary}", + "$type": "color", + "$value": "var(--token-color-palette-neutral-700)", + "group": "components", + "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" + ] + }, + "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-max-width": { + "key": "{tooltip.max-width}", + "$type": "dimension", + "$value": "280px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "280", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{tooltip.padding.vertical}" + }, + "name": "token-tooltip-padding-vertical", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "vertical" + ] + }, + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "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}" + ], + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "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}" + ], + "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, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": [ + "{typography.font-stack.monospace.code.macOS}", + "{typography.font-stack.monospace.code.windows}", + "monospace" + ], + "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": { + "hds": "400", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "hds": "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": { + "hds": "500", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "hds": "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": { + "hds": "600", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "hds": "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": { + "hds": "700", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "hds": "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "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", + "original": { + "$type": "font-size", + "$value": "30", + "unit": "px", + "comment": "30px/1.875rem", + "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", + "original": { + "$type": "number", + "$value": 1.2666, + "comment": "38px", + "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-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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "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", + "original": { + "$type": "font-size", + "$value": "24", + "unit": "px", + "comment": "24px/1.5rem", + "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", + "original": { + "$type": "number", + "$value": 1.3333, + "comment": "32px", + "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-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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "18", + "unit": "px", + "comment": "18px/1.125rem", + "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", + "original": { + "$type": "number", + "$value": 1.3333, + "comment": "24px", + "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", + "comment": "this is `tracking`", + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "comment": "this is `tracking`", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "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", + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "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", + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px", + "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", + "comment": "this is `tracking`", + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "comment": "this is `tracking`", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "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", + "original": { + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "key": "{typography.display-100.line-height}" + }, + "name": "token-typography-display-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "line-height" + ] + }, + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "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", + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "comment": "14px/0.875rem", + "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", + "original": { + "$type": "number", + "$value": 1.4286, + "comment": "20px", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "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", + "original": { + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "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-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, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "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", + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "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", + "original": { + "$type": "number", + "$value": 1.23, + "comment": "16px", + "key": "{typography.code-100.line-height}" + }, + "name": "token-typography-code-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "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, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "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", + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "comment": "14px/0.875rem", + "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", + "original": { + "$type": "number", + "$value": 1.125, + "comment": "18px", + "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-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, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "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", + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "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", + "original": { + "$type": "number", + "$value": 1.25, + "comment": "20px", + "key": "{typography.code-300.line-height}" + }, + "name": "token-typography-code-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "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..d51cca9e590 --- /dev/null +++ b/packages/tokens/dist/docs/products/themed-tokens/cds-g0.json @@ -0,0 +1,8352 @@ +[ + { + "key": "{border.radius.x-small}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{border.radius.large}" + }, + "name": "token-border-radius-large", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "large" + ] + }, + { + "key": "{color.palette.blue-500}", + "$type": "color", + "$value": "#1c345f", + "group": "palette", + "original": { + "$type": "color", + "$value": "#1c345f", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#0046d1", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#0c56e9", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#1060ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#cce3fe", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f2f8ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#42215b", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#7b00db", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#911ced", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#a737ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#ead2fe", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f9f2ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#054220", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#006619", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#00781e", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#008a22", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#cceeda", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f2fbf6", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#542800", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#803d00", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#9e4b00", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#bb5a00", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fbeabf", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fff9e8", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#51130a", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#940004", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#c00005", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#e52228", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fbd4d4", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fff5f5", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#0c0c0e", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#3b3d45", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#656a76", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#8c909c", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#c2c5cb", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#dedfe3", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f1f2f3", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fafafa", + "group": "palette", + "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": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.white.0}", + "group": "palette", + "$modes": { + "hds": "#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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-600}", + "alpha": "0.4", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "alpha": "0.2", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "alpha": "0.1", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.alpha-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.alpha-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.alpha-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "semantic", + "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", + "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", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "semantic", + "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", + "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", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-700}", + "group": "semantic", + "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": { + "hds": "#ffffff", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.textPrimary}", + "group": "semantic", + "$modes": { + "hds": "#ffffff", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-400}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-100}", + "group": "semantic", + "key": "{color.surface.strong}" + }, + "name": "token-color-surface-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "strong" + ] + }, + { + "key": "{color.surface.interactive}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-50}", + "group": "semantic", + "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", + "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", + "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", + "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", + "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", + "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", + "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", + "original": { + "$value": "{elevation.inset.box-shadow-01}", + "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", + "original": { + "$value": "{elevation.low.box-shadow-01}, {elevation.low.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.mid.box-shadow-01}, {elevation.mid.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.high.box-shadow-01}, {elevation.high.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.higher.box-shadow-01}, {elevation.higher.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.overlay.box-shadow-01}, {elevation.overlay.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.inset.box-shadow-border}, {elevation.inset.box-shadow}", + "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", + "original": { + "$value": "{elevation.base.box-shadow-border}", + "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", + "original": { + "$value": "{elevation.low.box-shadow-border}, {elevation.low.box-shadow}", + "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", + "original": { + "$value": "{elevation.mid.box-shadow-border}, {elevation.mid.box-shadow}", + "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", + "original": { + "$value": "{elevation.high.box-shadow-border}, {elevation.high.box-shadow}", + "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", + "original": { + "$value": "{elevation.higher.box-shadow-border}, {elevation.higher.box-shadow}", + "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", + "original": { + "$value": "{elevation.overlay.box-shadow-border}, {elevation.overlay.box-shadow}", + "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-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": "{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": "#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": "#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", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{form.radiocard.border.radius}" + }, + "name": "token-form-radiocard-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "radius" + ] + }, + { + "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": "{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": "{side-nav.wrapper.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{side-nav.wrapper.border.width}" + }, + "name": "token-side-nav-wrapper-border-width", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "border", + "width" + ] + }, + { + "key": "{side-nav.wrapper.border.color}", + "$type": "color", + "$value": "#656a76", + "group": "components", + "original": { + "$type": "color", + "$value": "#656a76", + "group": "components", + "key": "{side-nav.wrapper.border.color}" + }, + "name": "token-side-nav-wrapper-border-color", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "border", + "color" + ] + }, + { + "key": "{side-nav.wrapper.padding.horizontal}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{side-nav.wrapper.padding.horizontal}" + }, + "name": "token-side-nav-wrapper-padding-horizontal", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "horizontal" + ] + }, + { + "key": "{side-nav.wrapper.padding.vertical}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{side-nav.wrapper.padding.vertical}" + }, + "name": "token-side-nav-wrapper-padding-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "vertical" + ] + }, + { + "key": "{side-nav.wrapper.padding.horizontal-minimized}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.wrapper.padding.horizontal-minimized}" + }, + "name": "token-side-nav-wrapper-padding-horizontal-minimized", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "horizontal-minimized" + ] + }, + { + "key": "{side-nav.wrapper.padding.vertical-minimized}", + "$type": "dimension", + "$value": "22px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "22", + "unit": "px", + "key": "{side-nav.wrapper.padding.vertical-minimized}" + }, + "name": "token-side-nav-wrapper-padding-vertical-minimized", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "vertical-minimized" + ] + }, + { + "key": "{side-nav.toggle-button.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{side-nav.toggle-button.border.radius}" + }, + "name": "token-side-nav-toggle-button-border-radius", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "toggle-button", + "border", + "radius" + ] + }, + { + "key": "{side-nav.header.home-link.padding}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{side-nav.header.home-link.padding}" + }, + "name": "token-side-nav-header-home-link-padding", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "home-link", + "padding" + ] + }, + { + "key": "{side-nav.header.home-link.logo-size}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{side-nav.header.home-link.logo-size}" + }, + "name": "token-side-nav-header-home-link-logo-size", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "home-link", + "logo-size" + ] + }, + { + "key": "{side-nav.header.home-link.logo-size-minimized}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{side-nav.header.home-link.logo-size-minimized}" + }, + "name": "token-side-nav-header-home-link-logo-size-minimized", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "home-link", + "logo-size-minimized" + ] + }, + { + "key": "{side-nav.header.actions.spacing}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.header.actions.spacing}" + }, + "name": "token-side-nav-header-actions-spacing", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "actions", + "spacing" + ] + }, + { + "key": "{side-nav.body.list.margin-vertical}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{side-nav.body.list.margin-vertical}" + }, + "name": "token-side-nav-body-list-margin-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list", + "margin-vertical" + ] + }, + { + "key": "{side-nav.body.list-item.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{side-nav.body.list-item.height}" + }, + "name": "token-side-nav-body-list-item-height", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "height" + ] + }, + { + "key": "{side-nav.body.list-item.padding.horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.body.list-item.padding.horizontal}" + }, + "name": "token-side-nav-body-list-item-padding-horizontal", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "padding", + "horizontal" + ] + }, + { + "key": "{side-nav.body.list-item.padding.vertical}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{side-nav.body.list-item.padding.vertical}" + }, + "name": "token-side-nav-body-list-item-padding-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "padding", + "vertical" + ] + }, + { + "key": "{side-nav.body.list-item.spacing-vertical}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{side-nav.body.list-item.spacing-vertical}" + }, + "name": "token-side-nav-body-list-item-spacing-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "spacing-vertical" + ] + }, + { + "key": "{side-nav.body.list-item.content-spacing-horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.body.list-item.content-spacing-horizontal}" + }, + "name": "token-side-nav-body-list-item-content-spacing-horizontal", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "content-spacing-horizontal" + ] + }, + { + "key": "{side-nav.body.list-item.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{side-nav.body.list-item.border-radius}" + }, + "name": "token-side-nav-body-list-item-border-radius", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "border-radius" + ] + }, + { + "key": "{side-nav.color.foreground.primary}", + "$type": "color", + "$value": "#dedfe3", + "group": "components", + "original": { + "$type": "color", + "$value": "#dedfe3", + "group": "components", + "key": "{side-nav.color.foreground.primary}" + }, + "name": "token-side-nav-color-foreground-primary", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "foreground", + "primary" + ] + }, + { + "key": "{side-nav.color.foreground.strong}", + "$type": "color", + "$value": "#ffffff", + "group": "components", + "original": { + "$type": "color", + "$value": "#fff", + "group": "components", + "key": "{side-nav.color.foreground.strong}" + }, + "name": "token-side-nav-color-foreground-strong", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "foreground", + "strong" + ] + }, + { + "key": "{side-nav.color.foreground.faint}", + "$type": "color", + "$value": "#8c909c", + "group": "components", + "original": { + "$type": "color", + "$value": "#8c909c", + "group": "components", + "key": "{side-nav.color.foreground.faint}" + }, + "name": "token-side-nav-color-foreground-faint", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "foreground", + "faint" + ] + }, + { + "key": "{side-nav.color.surface.primary}", + "$type": "color", + "$value": "#0c0c0e", + "group": "components", + "original": { + "$type": "color", + "$value": "#0c0c0e", + "group": "components", + "key": "{side-nav.color.surface.primary}" + }, + "name": "token-side-nav-color-surface-primary", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "surface", + "primary" + ] + }, + { + "key": "{side-nav.color.surface.interactive-hover}", + "$type": "color", + "$value": "#3b3d45", + "group": "semantic", + "original": { + "$type": "color", + "$value": "#3b3d45", + "group": "semantic", + "key": "{side-nav.color.surface.interactive-hover}" + }, + "name": "token-side-nav-color-surface-interactive-hover", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "surface", + "interactive-hover" + ] + }, + { + "key": "{side-nav.color.surface.interactive-active}", + "$type": "color", + "$value": "#656a76", + "group": "semantic", + "original": { + "$type": "color", + "$value": "#656a76", + "group": "semantic", + "key": "{side-nav.color.surface.interactive-active}" + }, + "name": "token-side-nav-color-surface-interactive-active", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "surface", + "interactive-active" + ] + }, + { + "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.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{tooltip.border-radius}" + }, + "name": "token-tooltip-border-radius", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "border-radius" + ] + }, + { + "key": "{tooltip.color.foreground.primary}", + "$type": "color", + "$value": "var(--token-color-foreground-high-contrast)", + "group": "components", + "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" + ] + }, + { + "key": "{tooltip.color.surface.primary}", + "$type": "color", + "$value": "var(--token-color-palette-neutral-700)", + "group": "components", + "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" + ] + }, + { + "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.max-width}", + "$type": "dimension", + "$value": "280px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "280", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{tooltip.padding.vertical}" + }, + "name": "token-tooltip-padding-vertical", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "vertical" + ] + }, + { + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "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}" + ], + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "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}" + ], + "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, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": [ + "{typography.font-stack.monospace.code.macOS}", + "{typography.font-stack.monospace.code.windows}", + "monospace" + ], + "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": { + "hds": "400", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "hds": "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": { + "hds": "500", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "hds": "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": { + "hds": "600", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "hds": "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": { + "hds": "700", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "hds": "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "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", + "original": { + "$type": "font-size", + "$value": "30", + "unit": "px", + "comment": "30px/1.875rem", + "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", + "original": { + "$type": "number", + "$value": 1.2666, + "comment": "38px", + "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-400.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "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", + "original": { + "$type": "font-size", + "$value": "24", + "unit": "px", + "comment": "24px/1.5rem", + "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", + "original": { + "$type": "number", + "$value": 1.3333, + "comment": "32px", + "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-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "18", + "unit": "px", + "comment": "18px/1.125rem", + "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", + "original": { + "$type": "number", + "$value": 1.3333, + "comment": "24px", + "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", + "comment": "this is `tracking`", + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "comment": "this is `tracking`", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "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", + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "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", + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px", + "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", + "comment": "this is `tracking`", + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "comment": "this is `tracking`", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "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", + "original": { + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "key": "{typography.display-100.line-height}" + }, + "name": "token-typography-display-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "line-height" + ] + }, + { + "key": "{typography.body-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "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", + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "comment": "14px/0.875rem", + "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", + "original": { + "$type": "number", + "$value": 1.4286, + "comment": "20px", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "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", + "original": { + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "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-100.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "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", + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "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", + "original": { + "$type": "number", + "$value": 1.23, + "comment": "16px", + "key": "{typography.code-100.line-height}" + }, + "name": "token-typography-code-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "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, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "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", + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "comment": "14px/0.875rem", + "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", + "original": { + "$type": "number", + "$value": 1.125, + "comment": "18px", + "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-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "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", + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "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", + "original": { + "$type": "number", + "$value": 1.25, + "comment": "20px", + "key": "{typography.code-300.line-height}" + }, + "name": "token-typography-code-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "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..98001293bb5 --- /dev/null +++ b/packages/tokens/dist/docs/products/themed-tokens/cds-g10.json @@ -0,0 +1,8352 @@ +[ + { + "key": "{border.radius.x-small}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{border.radius.large}" + }, + "name": "token-border-radius-large", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "large" + ] + }, + { + "key": "{color.palette.blue-500}", + "$type": "color", + "$value": "#1c345f", + "group": "palette", + "original": { + "$type": "color", + "$value": "#1c345f", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#0046d1", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#0c56e9", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#1060ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#cce3fe", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f2f8ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#42215b", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#7b00db", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#911ced", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#a737ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#ead2fe", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f9f2ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#054220", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#006619", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#00781e", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#008a22", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#cceeda", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f2fbf6", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#542800", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#803d00", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#9e4b00", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#bb5a00", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fbeabf", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fff9e8", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#51130a", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#940004", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#c00005", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#e52228", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fbd4d4", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fff5f5", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#0c0c0e", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#3b3d45", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#656a76", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#8c909c", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#c2c5cb", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#dedfe3", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f1f2f3", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fafafa", + "group": "palette", + "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": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.white.0}", + "group": "palette", + "$modes": { + "hds": "#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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-600}", + "alpha": "0.4", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "alpha": "0.2", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "alpha": "0.1", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.alpha-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.alpha-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.alpha-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "semantic", + "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", + "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", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "semantic", + "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", + "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", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-700}", + "group": "semantic", + "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": { + "hds": "#ffffff", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.textPrimary}", + "group": "semantic", + "$modes": { + "hds": "#ffffff", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-400}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-100}", + "group": "semantic", + "key": "{color.surface.strong}" + }, + "name": "token-color-surface-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "strong" + ] + }, + { + "key": "{color.surface.interactive}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-50}", + "group": "semantic", + "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", + "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", + "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", + "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", + "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", + "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", + "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", + "original": { + "$value": "{elevation.inset.box-shadow-01}", + "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", + "original": { + "$value": "{elevation.low.box-shadow-01}, {elevation.low.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.mid.box-shadow-01}, {elevation.mid.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.high.box-shadow-01}, {elevation.high.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.higher.box-shadow-01}, {elevation.higher.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.overlay.box-shadow-01}, {elevation.overlay.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.inset.box-shadow-border}, {elevation.inset.box-shadow}", + "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", + "original": { + "$value": "{elevation.base.box-shadow-border}", + "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", + "original": { + "$value": "{elevation.low.box-shadow-border}, {elevation.low.box-shadow}", + "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", + "original": { + "$value": "{elevation.mid.box-shadow-border}, {elevation.mid.box-shadow}", + "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", + "original": { + "$value": "{elevation.high.box-shadow-border}, {elevation.high.box-shadow}", + "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", + "original": { + "$value": "{elevation.higher.box-shadow-border}, {elevation.higher.box-shadow}", + "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", + "original": { + "$value": "{elevation.overlay.box-shadow-border}, {elevation.overlay.box-shadow}", + "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-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": "{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": "#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": "#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", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{form.radiocard.border.radius}" + }, + "name": "token-form-radiocard-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "radius" + ] + }, + { + "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": "{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": "{side-nav.wrapper.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{side-nav.wrapper.border.width}" + }, + "name": "token-side-nav-wrapper-border-width", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "border", + "width" + ] + }, + { + "key": "{side-nav.wrapper.border.color}", + "$type": "color", + "$value": "#656a76", + "group": "components", + "original": { + "$type": "color", + "$value": "#656a76", + "group": "components", + "key": "{side-nav.wrapper.border.color}" + }, + "name": "token-side-nav-wrapper-border-color", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "border", + "color" + ] + }, + { + "key": "{side-nav.wrapper.padding.horizontal}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{side-nav.wrapper.padding.horizontal}" + }, + "name": "token-side-nav-wrapper-padding-horizontal", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "horizontal" + ] + }, + { + "key": "{side-nav.wrapper.padding.vertical}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{side-nav.wrapper.padding.vertical}" + }, + "name": "token-side-nav-wrapper-padding-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "vertical" + ] + }, + { + "key": "{side-nav.wrapper.padding.horizontal-minimized}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.wrapper.padding.horizontal-minimized}" + }, + "name": "token-side-nav-wrapper-padding-horizontal-minimized", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "horizontal-minimized" + ] + }, + { + "key": "{side-nav.wrapper.padding.vertical-minimized}", + "$type": "dimension", + "$value": "22px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "22", + "unit": "px", + "key": "{side-nav.wrapper.padding.vertical-minimized}" + }, + "name": "token-side-nav-wrapper-padding-vertical-minimized", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "vertical-minimized" + ] + }, + { + "key": "{side-nav.toggle-button.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{side-nav.toggle-button.border.radius}" + }, + "name": "token-side-nav-toggle-button-border-radius", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "toggle-button", + "border", + "radius" + ] + }, + { + "key": "{side-nav.header.home-link.padding}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{side-nav.header.home-link.padding}" + }, + "name": "token-side-nav-header-home-link-padding", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "home-link", + "padding" + ] + }, + { + "key": "{side-nav.header.home-link.logo-size}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{side-nav.header.home-link.logo-size}" + }, + "name": "token-side-nav-header-home-link-logo-size", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "home-link", + "logo-size" + ] + }, + { + "key": "{side-nav.header.home-link.logo-size-minimized}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{side-nav.header.home-link.logo-size-minimized}" + }, + "name": "token-side-nav-header-home-link-logo-size-minimized", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "home-link", + "logo-size-minimized" + ] + }, + { + "key": "{side-nav.header.actions.spacing}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.header.actions.spacing}" + }, + "name": "token-side-nav-header-actions-spacing", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "actions", + "spacing" + ] + }, + { + "key": "{side-nav.body.list.margin-vertical}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{side-nav.body.list.margin-vertical}" + }, + "name": "token-side-nav-body-list-margin-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list", + "margin-vertical" + ] + }, + { + "key": "{side-nav.body.list-item.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{side-nav.body.list-item.height}" + }, + "name": "token-side-nav-body-list-item-height", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "height" + ] + }, + { + "key": "{side-nav.body.list-item.padding.horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.body.list-item.padding.horizontal}" + }, + "name": "token-side-nav-body-list-item-padding-horizontal", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "padding", + "horizontal" + ] + }, + { + "key": "{side-nav.body.list-item.padding.vertical}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{side-nav.body.list-item.padding.vertical}" + }, + "name": "token-side-nav-body-list-item-padding-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "padding", + "vertical" + ] + }, + { + "key": "{side-nav.body.list-item.spacing-vertical}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{side-nav.body.list-item.spacing-vertical}" + }, + "name": "token-side-nav-body-list-item-spacing-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "spacing-vertical" + ] + }, + { + "key": "{side-nav.body.list-item.content-spacing-horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.body.list-item.content-spacing-horizontal}" + }, + "name": "token-side-nav-body-list-item-content-spacing-horizontal", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "content-spacing-horizontal" + ] + }, + { + "key": "{side-nav.body.list-item.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{side-nav.body.list-item.border-radius}" + }, + "name": "token-side-nav-body-list-item-border-radius", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "border-radius" + ] + }, + { + "key": "{side-nav.color.foreground.primary}", + "$type": "color", + "$value": "#dedfe3", + "group": "components", + "original": { + "$type": "color", + "$value": "#dedfe3", + "group": "components", + "key": "{side-nav.color.foreground.primary}" + }, + "name": "token-side-nav-color-foreground-primary", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "foreground", + "primary" + ] + }, + { + "key": "{side-nav.color.foreground.strong}", + "$type": "color", + "$value": "#ffffff", + "group": "components", + "original": { + "$type": "color", + "$value": "#fff", + "group": "components", + "key": "{side-nav.color.foreground.strong}" + }, + "name": "token-side-nav-color-foreground-strong", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "foreground", + "strong" + ] + }, + { + "key": "{side-nav.color.foreground.faint}", + "$type": "color", + "$value": "#8c909c", + "group": "components", + "original": { + "$type": "color", + "$value": "#8c909c", + "group": "components", + "key": "{side-nav.color.foreground.faint}" + }, + "name": "token-side-nav-color-foreground-faint", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "foreground", + "faint" + ] + }, + { + "key": "{side-nav.color.surface.primary}", + "$type": "color", + "$value": "#0c0c0e", + "group": "components", + "original": { + "$type": "color", + "$value": "#0c0c0e", + "group": "components", + "key": "{side-nav.color.surface.primary}" + }, + "name": "token-side-nav-color-surface-primary", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "surface", + "primary" + ] + }, + { + "key": "{side-nav.color.surface.interactive-hover}", + "$type": "color", + "$value": "#3b3d45", + "group": "semantic", + "original": { + "$type": "color", + "$value": "#3b3d45", + "group": "semantic", + "key": "{side-nav.color.surface.interactive-hover}" + }, + "name": "token-side-nav-color-surface-interactive-hover", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "surface", + "interactive-hover" + ] + }, + { + "key": "{side-nav.color.surface.interactive-active}", + "$type": "color", + "$value": "#656a76", + "group": "semantic", + "original": { + "$type": "color", + "$value": "#656a76", + "group": "semantic", + "key": "{side-nav.color.surface.interactive-active}" + }, + "name": "token-side-nav-color-surface-interactive-active", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "surface", + "interactive-active" + ] + }, + { + "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.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{tooltip.border-radius}" + }, + "name": "token-tooltip-border-radius", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "border-radius" + ] + }, + { + "key": "{tooltip.color.foreground.primary}", + "$type": "color", + "$value": "var(--token-color-foreground-high-contrast)", + "group": "components", + "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" + ] + }, + { + "key": "{tooltip.color.surface.primary}", + "$type": "color", + "$value": "var(--token-color-palette-neutral-700)", + "group": "components", + "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" + ] + }, + { + "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.max-width}", + "$type": "dimension", + "$value": "280px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "280", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{tooltip.padding.vertical}" + }, + "name": "token-tooltip-padding-vertical", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "vertical" + ] + }, + { + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "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}" + ], + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "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}" + ], + "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, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": [ + "{typography.font-stack.monospace.code.macOS}", + "{typography.font-stack.monospace.code.windows}", + "monospace" + ], + "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": { + "hds": "400", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "hds": "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": { + "hds": "500", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "hds": "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": { + "hds": "600", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "hds": "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": { + "hds": "700", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "hds": "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "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", + "original": { + "$type": "font-size", + "$value": "30", + "unit": "px", + "comment": "30px/1.875rem", + "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", + "original": { + "$type": "number", + "$value": 1.2666, + "comment": "38px", + "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-400.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "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", + "original": { + "$type": "font-size", + "$value": "24", + "unit": "px", + "comment": "24px/1.5rem", + "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", + "original": { + "$type": "number", + "$value": 1.3333, + "comment": "32px", + "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-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "18", + "unit": "px", + "comment": "18px/1.125rem", + "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", + "original": { + "$type": "number", + "$value": 1.3333, + "comment": "24px", + "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", + "comment": "this is `tracking`", + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "comment": "this is `tracking`", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "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", + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "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", + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px", + "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", + "comment": "this is `tracking`", + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "comment": "this is `tracking`", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "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", + "original": { + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "key": "{typography.display-100.line-height}" + }, + "name": "token-typography-display-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "line-height" + ] + }, + { + "key": "{typography.body-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "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", + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "comment": "14px/0.875rem", + "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", + "original": { + "$type": "number", + "$value": 1.4286, + "comment": "20px", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "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", + "original": { + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "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-100.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "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", + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "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", + "original": { + "$type": "number", + "$value": 1.23, + "comment": "16px", + "key": "{typography.code-100.line-height}" + }, + "name": "token-typography-code-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "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, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "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", + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "comment": "14px/0.875rem", + "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", + "original": { + "$type": "number", + "$value": 1.125, + "comment": "18px", + "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-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "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", + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "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", + "original": { + "$type": "number", + "$value": 1.25, + "comment": "20px", + "key": "{typography.code-300.line-height}" + }, + "name": "token-typography-code-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "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..4b6b2cd72ea --- /dev/null +++ b/packages/tokens/dist/docs/products/themed-tokens/cds-g100.json @@ -0,0 +1,8352 @@ +[ + { + "key": "{border.radius.x-small}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{border.radius.large}" + }, + "name": "token-border-radius-large", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "large" + ] + }, + { + "key": "{color.palette.blue-500}", + "$type": "color", + "$value": "#1c345f", + "group": "palette", + "original": { + "$type": "color", + "$value": "#1c345f", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#0046d1", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#0c56e9", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#1060ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#cce3fe", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f2f8ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#42215b", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#7b00db", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#911ced", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#a737ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#ead2fe", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f9f2ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#054220", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#006619", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#00781e", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#008a22", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#cceeda", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f2fbf6", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#542800", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#803d00", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#9e4b00", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#bb5a00", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fbeabf", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fff9e8", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#51130a", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#940004", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#c00005", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#e52228", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fbd4d4", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fff5f5", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#0c0c0e", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#3b3d45", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#656a76", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#8c909c", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#c2c5cb", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#dedfe3", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f1f2f3", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fafafa", + "group": "palette", + "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": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.white.0}", + "group": "palette", + "$modes": { + "hds": "#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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-600}", + "alpha": "0.4", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "alpha": "0.2", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "alpha": "0.1", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.alpha-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.alpha-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.alpha-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "semantic", + "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", + "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", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "semantic", + "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", + "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", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-700}", + "group": "semantic", + "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": { + "hds": "#ffffff", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.textPrimary}", + "group": "semantic", + "$modes": { + "hds": "#ffffff", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-400}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-100}", + "group": "semantic", + "key": "{color.surface.strong}" + }, + "name": "token-color-surface-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "strong" + ] + }, + { + "key": "{color.surface.interactive}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-50}", + "group": "semantic", + "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", + "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", + "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", + "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", + "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", + "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", + "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", + "original": { + "$value": "{elevation.inset.box-shadow-01}", + "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", + "original": { + "$value": "{elevation.low.box-shadow-01}, {elevation.low.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.mid.box-shadow-01}, {elevation.mid.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.high.box-shadow-01}, {elevation.high.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.higher.box-shadow-01}, {elevation.higher.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.overlay.box-shadow-01}, {elevation.overlay.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.inset.box-shadow-border}, {elevation.inset.box-shadow}", + "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", + "original": { + "$value": "{elevation.base.box-shadow-border}", + "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", + "original": { + "$value": "{elevation.low.box-shadow-border}, {elevation.low.box-shadow}", + "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", + "original": { + "$value": "{elevation.mid.box-shadow-border}, {elevation.mid.box-shadow}", + "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", + "original": { + "$value": "{elevation.high.box-shadow-border}, {elevation.high.box-shadow}", + "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", + "original": { + "$value": "{elevation.higher.box-shadow-border}, {elevation.higher.box-shadow}", + "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", + "original": { + "$value": "{elevation.overlay.box-shadow-border}, {elevation.overlay.box-shadow}", + "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-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": "{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": "#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": "#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", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{form.radiocard.border.radius}" + }, + "name": "token-form-radiocard-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "radius" + ] + }, + { + "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": "{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": "{side-nav.wrapper.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{side-nav.wrapper.border.width}" + }, + "name": "token-side-nav-wrapper-border-width", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "border", + "width" + ] + }, + { + "key": "{side-nav.wrapper.border.color}", + "$type": "color", + "$value": "#656a76", + "group": "components", + "original": { + "$type": "color", + "$value": "#656a76", + "group": "components", + "key": "{side-nav.wrapper.border.color}" + }, + "name": "token-side-nav-wrapper-border-color", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "border", + "color" + ] + }, + { + "key": "{side-nav.wrapper.padding.horizontal}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{side-nav.wrapper.padding.horizontal}" + }, + "name": "token-side-nav-wrapper-padding-horizontal", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "horizontal" + ] + }, + { + "key": "{side-nav.wrapper.padding.vertical}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{side-nav.wrapper.padding.vertical}" + }, + "name": "token-side-nav-wrapper-padding-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "vertical" + ] + }, + { + "key": "{side-nav.wrapper.padding.horizontal-minimized}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.wrapper.padding.horizontal-minimized}" + }, + "name": "token-side-nav-wrapper-padding-horizontal-minimized", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "horizontal-minimized" + ] + }, + { + "key": "{side-nav.wrapper.padding.vertical-minimized}", + "$type": "dimension", + "$value": "22px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "22", + "unit": "px", + "key": "{side-nav.wrapper.padding.vertical-minimized}" + }, + "name": "token-side-nav-wrapper-padding-vertical-minimized", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "vertical-minimized" + ] + }, + { + "key": "{side-nav.toggle-button.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{side-nav.toggle-button.border.radius}" + }, + "name": "token-side-nav-toggle-button-border-radius", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "toggle-button", + "border", + "radius" + ] + }, + { + "key": "{side-nav.header.home-link.padding}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{side-nav.header.home-link.padding}" + }, + "name": "token-side-nav-header-home-link-padding", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "home-link", + "padding" + ] + }, + { + "key": "{side-nav.header.home-link.logo-size}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{side-nav.header.home-link.logo-size}" + }, + "name": "token-side-nav-header-home-link-logo-size", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "home-link", + "logo-size" + ] + }, + { + "key": "{side-nav.header.home-link.logo-size-minimized}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{side-nav.header.home-link.logo-size-minimized}" + }, + "name": "token-side-nav-header-home-link-logo-size-minimized", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "home-link", + "logo-size-minimized" + ] + }, + { + "key": "{side-nav.header.actions.spacing}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.header.actions.spacing}" + }, + "name": "token-side-nav-header-actions-spacing", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "actions", + "spacing" + ] + }, + { + "key": "{side-nav.body.list.margin-vertical}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{side-nav.body.list.margin-vertical}" + }, + "name": "token-side-nav-body-list-margin-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list", + "margin-vertical" + ] + }, + { + "key": "{side-nav.body.list-item.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{side-nav.body.list-item.height}" + }, + "name": "token-side-nav-body-list-item-height", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "height" + ] + }, + { + "key": "{side-nav.body.list-item.padding.horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.body.list-item.padding.horizontal}" + }, + "name": "token-side-nav-body-list-item-padding-horizontal", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "padding", + "horizontal" + ] + }, + { + "key": "{side-nav.body.list-item.padding.vertical}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{side-nav.body.list-item.padding.vertical}" + }, + "name": "token-side-nav-body-list-item-padding-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "padding", + "vertical" + ] + }, + { + "key": "{side-nav.body.list-item.spacing-vertical}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{side-nav.body.list-item.spacing-vertical}" + }, + "name": "token-side-nav-body-list-item-spacing-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "spacing-vertical" + ] + }, + { + "key": "{side-nav.body.list-item.content-spacing-horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.body.list-item.content-spacing-horizontal}" + }, + "name": "token-side-nav-body-list-item-content-spacing-horizontal", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "content-spacing-horizontal" + ] + }, + { + "key": "{side-nav.body.list-item.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{side-nav.body.list-item.border-radius}" + }, + "name": "token-side-nav-body-list-item-border-radius", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "border-radius" + ] + }, + { + "key": "{side-nav.color.foreground.primary}", + "$type": "color", + "$value": "#dedfe3", + "group": "components", + "original": { + "$type": "color", + "$value": "#dedfe3", + "group": "components", + "key": "{side-nav.color.foreground.primary}" + }, + "name": "token-side-nav-color-foreground-primary", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "foreground", + "primary" + ] + }, + { + "key": "{side-nav.color.foreground.strong}", + "$type": "color", + "$value": "#ffffff", + "group": "components", + "original": { + "$type": "color", + "$value": "#fff", + "group": "components", + "key": "{side-nav.color.foreground.strong}" + }, + "name": "token-side-nav-color-foreground-strong", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "foreground", + "strong" + ] + }, + { + "key": "{side-nav.color.foreground.faint}", + "$type": "color", + "$value": "#8c909c", + "group": "components", + "original": { + "$type": "color", + "$value": "#8c909c", + "group": "components", + "key": "{side-nav.color.foreground.faint}" + }, + "name": "token-side-nav-color-foreground-faint", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "foreground", + "faint" + ] + }, + { + "key": "{side-nav.color.surface.primary}", + "$type": "color", + "$value": "#0c0c0e", + "group": "components", + "original": { + "$type": "color", + "$value": "#0c0c0e", + "group": "components", + "key": "{side-nav.color.surface.primary}" + }, + "name": "token-side-nav-color-surface-primary", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "surface", + "primary" + ] + }, + { + "key": "{side-nav.color.surface.interactive-hover}", + "$type": "color", + "$value": "#3b3d45", + "group": "semantic", + "original": { + "$type": "color", + "$value": "#3b3d45", + "group": "semantic", + "key": "{side-nav.color.surface.interactive-hover}" + }, + "name": "token-side-nav-color-surface-interactive-hover", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "surface", + "interactive-hover" + ] + }, + { + "key": "{side-nav.color.surface.interactive-active}", + "$type": "color", + "$value": "#656a76", + "group": "semantic", + "original": { + "$type": "color", + "$value": "#656a76", + "group": "semantic", + "key": "{side-nav.color.surface.interactive-active}" + }, + "name": "token-side-nav-color-surface-interactive-active", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "surface", + "interactive-active" + ] + }, + { + "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.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{tooltip.border-radius}" + }, + "name": "token-tooltip-border-radius", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "border-radius" + ] + }, + { + "key": "{tooltip.color.foreground.primary}", + "$type": "color", + "$value": "var(--token-color-foreground-high-contrast)", + "group": "components", + "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" + ] + }, + { + "key": "{tooltip.color.surface.primary}", + "$type": "color", + "$value": "var(--token-color-palette-neutral-700)", + "group": "components", + "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" + ] + }, + { + "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.max-width}", + "$type": "dimension", + "$value": "280px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "280", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{tooltip.padding.vertical}" + }, + "name": "token-tooltip-padding-vertical", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "vertical" + ] + }, + { + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "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}" + ], + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "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}" + ], + "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, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": [ + "{typography.font-stack.monospace.code.macOS}", + "{typography.font-stack.monospace.code.windows}", + "monospace" + ], + "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": { + "hds": "400", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "hds": "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": { + "hds": "500", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "hds": "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": { + "hds": "600", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "hds": "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": { + "hds": "700", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "hds": "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "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", + "original": { + "$type": "font-size", + "$value": "30", + "unit": "px", + "comment": "30px/1.875rem", + "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", + "original": { + "$type": "number", + "$value": 1.2666, + "comment": "38px", + "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-400.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "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", + "original": { + "$type": "font-size", + "$value": "24", + "unit": "px", + "comment": "24px/1.5rem", + "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", + "original": { + "$type": "number", + "$value": 1.3333, + "comment": "32px", + "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-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "18", + "unit": "px", + "comment": "18px/1.125rem", + "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", + "original": { + "$type": "number", + "$value": 1.3333, + "comment": "24px", + "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", + "comment": "this is `tracking`", + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "comment": "this is `tracking`", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "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", + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "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", + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px", + "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", + "comment": "this is `tracking`", + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "comment": "this is `tracking`", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "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", + "original": { + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "key": "{typography.display-100.line-height}" + }, + "name": "token-typography-display-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "line-height" + ] + }, + { + "key": "{typography.body-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "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", + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "comment": "14px/0.875rem", + "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", + "original": { + "$type": "number", + "$value": 1.4286, + "comment": "20px", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "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", + "original": { + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "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-100.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "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", + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "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", + "original": { + "$type": "number", + "$value": 1.23, + "comment": "16px", + "key": "{typography.code-100.line-height}" + }, + "name": "token-typography-code-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "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, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "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", + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "comment": "14px/0.875rem", + "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", + "original": { + "$type": "number", + "$value": 1.125, + "comment": "18px", + "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-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "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", + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "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", + "original": { + "$type": "number", + "$value": 1.25, + "comment": "20px", + "key": "{typography.code-300.line-height}" + }, + "name": "token-typography-code-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "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..047eb1190fa --- /dev/null +++ b/packages/tokens/dist/docs/products/themed-tokens/cds-g90.json @@ -0,0 +1,8352 @@ +[ + { + "key": "{border.radius.x-small}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{border.radius.large}" + }, + "name": "token-border-radius-large", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "large" + ] + }, + { + "key": "{color.palette.blue-500}", + "$type": "color", + "$value": "#1c345f", + "group": "palette", + "original": { + "$type": "color", + "$value": "#1c345f", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#0046d1", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#0c56e9", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#1060ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#cce3fe", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f2f8ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#42215b", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#7b00db", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#911ced", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#a737ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#ead2fe", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f9f2ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#054220", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#006619", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#00781e", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#008a22", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#cceeda", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f2fbf6", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#542800", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#803d00", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#9e4b00", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#bb5a00", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fbeabf", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fff9e8", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#51130a", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#940004", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#c00005", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#e52228", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fbd4d4", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fff5f5", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#0c0c0e", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#3b3d45", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#656a76", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#8c909c", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#c2c5cb", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#dedfe3", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f1f2f3", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fafafa", + "group": "palette", + "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": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "{carbon.color.white.0}", + "group": "palette", + "$modes": { + "hds": "#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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-600}", + "alpha": "0.4", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "alpha": "0.2", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "alpha": "0.1", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.alpha-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.alpha-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.alpha-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "semantic", + "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", + "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", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "semantic", + "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", + "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", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-700}", + "group": "semantic", + "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": { + "hds": "#ffffff", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.textPrimary}", + "group": "semantic", + "$modes": { + "hds": "#ffffff", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-400}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-100}", + "group": "semantic", + "key": "{color.surface.strong}" + }, + "name": "token-color-surface-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "strong" + ] + }, + { + "key": "{color.surface.interactive}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-50}", + "group": "semantic", + "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", + "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", + "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", + "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", + "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", + "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", + "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", + "original": { + "$value": "{elevation.inset.box-shadow-01}", + "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", + "original": { + "$value": "{elevation.low.box-shadow-01}, {elevation.low.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.mid.box-shadow-01}, {elevation.mid.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.high.box-shadow-01}, {elevation.high.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.higher.box-shadow-01}, {elevation.higher.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.overlay.box-shadow-01}, {elevation.overlay.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.inset.box-shadow-border}, {elevation.inset.box-shadow}", + "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", + "original": { + "$value": "{elevation.base.box-shadow-border}", + "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", + "original": { + "$value": "{elevation.low.box-shadow-border}, {elevation.low.box-shadow}", + "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", + "original": { + "$value": "{elevation.mid.box-shadow-border}, {elevation.mid.box-shadow}", + "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", + "original": { + "$value": "{elevation.high.box-shadow-border}, {elevation.high.box-shadow}", + "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", + "original": { + "$value": "{elevation.higher.box-shadow-border}, {elevation.higher.box-shadow}", + "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", + "original": { + "$value": "{elevation.overlay.box-shadow-border}, {elevation.overlay.box-shadow}", + "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-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": "{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": "#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": "#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", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{form.radiocard.border.radius}" + }, + "name": "token-form-radiocard-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "radius" + ] + }, + { + "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": "{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": "{side-nav.wrapper.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{side-nav.wrapper.border.width}" + }, + "name": "token-side-nav-wrapper-border-width", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "border", + "width" + ] + }, + { + "key": "{side-nav.wrapper.border.color}", + "$type": "color", + "$value": "#656a76", + "group": "components", + "original": { + "$type": "color", + "$value": "#656a76", + "group": "components", + "key": "{side-nav.wrapper.border.color}" + }, + "name": "token-side-nav-wrapper-border-color", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "border", + "color" + ] + }, + { + "key": "{side-nav.wrapper.padding.horizontal}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{side-nav.wrapper.padding.horizontal}" + }, + "name": "token-side-nav-wrapper-padding-horizontal", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "horizontal" + ] + }, + { + "key": "{side-nav.wrapper.padding.vertical}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{side-nav.wrapper.padding.vertical}" + }, + "name": "token-side-nav-wrapper-padding-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "vertical" + ] + }, + { + "key": "{side-nav.wrapper.padding.horizontal-minimized}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.wrapper.padding.horizontal-minimized}" + }, + "name": "token-side-nav-wrapper-padding-horizontal-minimized", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "horizontal-minimized" + ] + }, + { + "key": "{side-nav.wrapper.padding.vertical-minimized}", + "$type": "dimension", + "$value": "22px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "22", + "unit": "px", + "key": "{side-nav.wrapper.padding.vertical-minimized}" + }, + "name": "token-side-nav-wrapper-padding-vertical-minimized", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "vertical-minimized" + ] + }, + { + "key": "{side-nav.toggle-button.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{side-nav.toggle-button.border.radius}" + }, + "name": "token-side-nav-toggle-button-border-radius", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "toggle-button", + "border", + "radius" + ] + }, + { + "key": "{side-nav.header.home-link.padding}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{side-nav.header.home-link.padding}" + }, + "name": "token-side-nav-header-home-link-padding", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "home-link", + "padding" + ] + }, + { + "key": "{side-nav.header.home-link.logo-size}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{side-nav.header.home-link.logo-size}" + }, + "name": "token-side-nav-header-home-link-logo-size", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "home-link", + "logo-size" + ] + }, + { + "key": "{side-nav.header.home-link.logo-size-minimized}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{side-nav.header.home-link.logo-size-minimized}" + }, + "name": "token-side-nav-header-home-link-logo-size-minimized", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "home-link", + "logo-size-minimized" + ] + }, + { + "key": "{side-nav.header.actions.spacing}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.header.actions.spacing}" + }, + "name": "token-side-nav-header-actions-spacing", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "actions", + "spacing" + ] + }, + { + "key": "{side-nav.body.list.margin-vertical}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{side-nav.body.list.margin-vertical}" + }, + "name": "token-side-nav-body-list-margin-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list", + "margin-vertical" + ] + }, + { + "key": "{side-nav.body.list-item.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{side-nav.body.list-item.height}" + }, + "name": "token-side-nav-body-list-item-height", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "height" + ] + }, + { + "key": "{side-nav.body.list-item.padding.horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.body.list-item.padding.horizontal}" + }, + "name": "token-side-nav-body-list-item-padding-horizontal", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "padding", + "horizontal" + ] + }, + { + "key": "{side-nav.body.list-item.padding.vertical}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{side-nav.body.list-item.padding.vertical}" + }, + "name": "token-side-nav-body-list-item-padding-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "padding", + "vertical" + ] + }, + { + "key": "{side-nav.body.list-item.spacing-vertical}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{side-nav.body.list-item.spacing-vertical}" + }, + "name": "token-side-nav-body-list-item-spacing-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "spacing-vertical" + ] + }, + { + "key": "{side-nav.body.list-item.content-spacing-horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.body.list-item.content-spacing-horizontal}" + }, + "name": "token-side-nav-body-list-item-content-spacing-horizontal", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "content-spacing-horizontal" + ] + }, + { + "key": "{side-nav.body.list-item.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{side-nav.body.list-item.border-radius}" + }, + "name": "token-side-nav-body-list-item-border-radius", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "border-radius" + ] + }, + { + "key": "{side-nav.color.foreground.primary}", + "$type": "color", + "$value": "#dedfe3", + "group": "components", + "original": { + "$type": "color", + "$value": "#dedfe3", + "group": "components", + "key": "{side-nav.color.foreground.primary}" + }, + "name": "token-side-nav-color-foreground-primary", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "foreground", + "primary" + ] + }, + { + "key": "{side-nav.color.foreground.strong}", + "$type": "color", + "$value": "#ffffff", + "group": "components", + "original": { + "$type": "color", + "$value": "#fff", + "group": "components", + "key": "{side-nav.color.foreground.strong}" + }, + "name": "token-side-nav-color-foreground-strong", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "foreground", + "strong" + ] + }, + { + "key": "{side-nav.color.foreground.faint}", + "$type": "color", + "$value": "#8c909c", + "group": "components", + "original": { + "$type": "color", + "$value": "#8c909c", + "group": "components", + "key": "{side-nav.color.foreground.faint}" + }, + "name": "token-side-nav-color-foreground-faint", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "foreground", + "faint" + ] + }, + { + "key": "{side-nav.color.surface.primary}", + "$type": "color", + "$value": "#0c0c0e", + "group": "components", + "original": { + "$type": "color", + "$value": "#0c0c0e", + "group": "components", + "key": "{side-nav.color.surface.primary}" + }, + "name": "token-side-nav-color-surface-primary", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "surface", + "primary" + ] + }, + { + "key": "{side-nav.color.surface.interactive-hover}", + "$type": "color", + "$value": "#3b3d45", + "group": "semantic", + "original": { + "$type": "color", + "$value": "#3b3d45", + "group": "semantic", + "key": "{side-nav.color.surface.interactive-hover}" + }, + "name": "token-side-nav-color-surface-interactive-hover", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "surface", + "interactive-hover" + ] + }, + { + "key": "{side-nav.color.surface.interactive-active}", + "$type": "color", + "$value": "#656a76", + "group": "semantic", + "original": { + "$type": "color", + "$value": "#656a76", + "group": "semantic", + "key": "{side-nav.color.surface.interactive-active}" + }, + "name": "token-side-nav-color-surface-interactive-active", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "surface", + "interactive-active" + ] + }, + { + "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.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{tooltip.border-radius}" + }, + "name": "token-tooltip-border-radius", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "border-radius" + ] + }, + { + "key": "{tooltip.color.foreground.primary}", + "$type": "color", + "$value": "var(--token-color-foreground-high-contrast)", + "group": "components", + "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" + ] + }, + { + "key": "{tooltip.color.surface.primary}", + "$type": "color", + "$value": "var(--token-color-palette-neutral-700)", + "group": "components", + "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" + ] + }, + { + "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.max-width}", + "$type": "dimension", + "$value": "280px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "280", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{tooltip.padding.vertical}" + }, + "name": "token-tooltip-padding-vertical", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "vertical" + ] + }, + { + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "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}" + ], + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "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}" + ], + "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, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": [ + "{typography.font-stack.monospace.code.macOS}", + "{typography.font-stack.monospace.code.windows}", + "monospace" + ], + "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": { + "hds": "400", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "hds": "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": { + "hds": "500", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.regular}", + "$modes": { + "hds": "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": { + "hds": "600", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "hds": "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": { + "hds": "700", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "{carbon.typography.font-weight.semibold}", + "$modes": { + "hds": "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "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", + "original": { + "$type": "font-size", + "$value": "30", + "unit": "px", + "comment": "30px/1.875rem", + "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", + "original": { + "$type": "number", + "$value": 1.2666, + "comment": "38px", + "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-400.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "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", + "original": { + "$type": "font-size", + "$value": "24", + "unit": "px", + "comment": "24px/1.5rem", + "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", + "original": { + "$type": "number", + "$value": 1.3333, + "comment": "32px", + "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-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "18", + "unit": "px", + "comment": "18px/1.125rem", + "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", + "original": { + "$type": "number", + "$value": 1.3333, + "comment": "24px", + "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", + "comment": "this is `tracking`", + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "comment": "this is `tracking`", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "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", + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "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", + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px", + "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", + "comment": "this is `tracking`", + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "comment": "this is `tracking`", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "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", + "original": { + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "key": "{typography.display-100.line-height}" + }, + "name": "token-typography-display-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "line-height" + ] + }, + { + "key": "{typography.body-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "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", + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "comment": "14px/0.875rem", + "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", + "original": { + "$type": "number", + "$value": 1.4286, + "comment": "20px", + "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, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "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", + "original": { + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "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-100.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "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", + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "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", + "original": { + "$type": "number", + "$value": 1.23, + "comment": "16px", + "key": "{typography.code-100.line-height}" + }, + "name": "token-typography-code-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "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, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "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", + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "comment": "14px/0.875rem", + "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", + "original": { + "$type": "number", + "$value": 1.125, + "comment": "18px", + "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-300.font-family}", + "$type": "font-family", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "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", + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "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", + "original": { + "$type": "number", + "$value": 1.25, + "comment": "20px", + "key": "{typography.code-300.line-height}" + }, + "name": "token-typography-code-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "line-height" + ] + } +] \ No newline at end of file diff --git a/packages/tokens/dist/docs/products/themed-tokens/hds.json b/packages/tokens/dist/docs/products/themed-tokens/hds.json new file mode 100644 index 00000000000..b22d4ea52ba --- /dev/null +++ b/packages/tokens/dist/docs/products/themed-tokens/hds.json @@ -0,0 +1,8352 @@ +[ + { + "key": "{border.radius.x-small}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{border.radius.large}" + }, + "name": "token-border-radius-large", + "attributes": { + "category": "border" + }, + "path": [ + "border", + "radius", + "large" + ] + }, + { + "key": "{color.palette.blue-500}", + "$type": "color", + "$value": "#1c345f", + "group": "palette", + "original": { + "$type": "color", + "$value": "#1c345f", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#0046d1", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#0c56e9", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#1060ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#cce3fe", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f2f8ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#42215b", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#7b00db", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#911ced", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#a737ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#ead2fe", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f9f2ff", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#054220", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#006619", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#00781e", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#008a22", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#cceeda", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f2fbf6", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#542800", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#803d00", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#9e4b00", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#bb5a00", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fbeabf", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fff9e8", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#51130a", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#940004", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#c00005", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#e52228", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fbd4d4", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fff5f5", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#0c0c0e", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#3b3d45", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#656a76", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#8c909c", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#c2c5cb", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#dedfe3", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#f1f2f3", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "#fafafa", + "group": "palette", + "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": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, + "original": { + "$type": "color", + "$value": "#ffffff", + "group": "palette", + "$modes": { + "hds": "#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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-600}", + "alpha": "0.4", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "alpha": "0.2", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "alpha": "0.1", + "group": "palette", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.alpha-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.alpha-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.alpha-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "semantic", + "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", + "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", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "semantic", + "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", + "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", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-700}", + "group": "semantic", + "key": "{color.foreground.strong}" + }, + "name": "token-color-foreground-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "foreground", + "strong" + ] + }, + { + "key": "{color.foreground.primary}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "$modes": { + "hds": "#ffffff", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-400}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-400}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-300}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-500}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-100}", + "group": "semantic", + "key": "{color.surface.strong}" + }, + "name": "token-color-surface-strong", + "attributes": { + "category": "color" + }, + "path": [ + "color", + "surface", + "strong" + ] + }, + { + "key": "{color.surface.interactive}", + "$type": "color", + "$value": "#ffffff", + "group": "semantic", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-0}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-100}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-200}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.neutral-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.blue-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.purple-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.green-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.amber-50}", + "group": "semantic", + "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", + "original": { + "$type": "color", + "$value": "{color.palette.red-50}", + "group": "semantic", + "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", + "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", + "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", + "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", + "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", + "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", + "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", + "original": { + "$value": "{elevation.inset.box-shadow-01}", + "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", + "original": { + "$value": "{elevation.low.box-shadow-01}, {elevation.low.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.mid.box-shadow-01}, {elevation.mid.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.high.box-shadow-01}, {elevation.high.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.higher.box-shadow-01}, {elevation.higher.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.overlay.box-shadow-01}, {elevation.overlay.box-shadow-02}", + "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", + "original": { + "$value": "{elevation.inset.box-shadow-border}, {elevation.inset.box-shadow}", + "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", + "original": { + "$value": "{elevation.base.box-shadow-border}", + "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", + "original": { + "$value": "{elevation.low.box-shadow-border}, {elevation.low.box-shadow}", + "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", + "original": { + "$value": "{elevation.mid.box-shadow-border}, {elevation.mid.box-shadow}", + "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", + "original": { + "$value": "{elevation.high.box-shadow-border}, {elevation.high.box-shadow}", + "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", + "original": { + "$value": "{elevation.higher.box-shadow-border}, {elevation.higher.box-shadow}", + "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", + "original": { + "$value": "{elevation.overlay.box-shadow-border}, {elevation.overlay.box-shadow}", + "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-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": "{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": "#ffffff", + "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", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{form.radiocard.border.radius}" + }, + "name": "token-form-radiocard-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "radiocard", + "border", + "radius" + ] + }, + { + "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": "{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": "{side-nav.wrapper.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{side-nav.wrapper.border.width}" + }, + "name": "token-side-nav-wrapper-border-width", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "border", + "width" + ] + }, + { + "key": "{side-nav.wrapper.border.color}", + "$type": "color", + "$value": "#656a76", + "group": "components", + "original": { + "$type": "color", + "$value": "#656a76", + "group": "components", + "key": "{side-nav.wrapper.border.color}" + }, + "name": "token-side-nav-wrapper-border-color", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "border", + "color" + ] + }, + { + "key": "{side-nav.wrapper.padding.horizontal}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{side-nav.wrapper.padding.horizontal}" + }, + "name": "token-side-nav-wrapper-padding-horizontal", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "horizontal" + ] + }, + { + "key": "{side-nav.wrapper.padding.vertical}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{side-nav.wrapper.padding.vertical}" + }, + "name": "token-side-nav-wrapper-padding-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "vertical" + ] + }, + { + "key": "{side-nav.wrapper.padding.horizontal-minimized}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.wrapper.padding.horizontal-minimized}" + }, + "name": "token-side-nav-wrapper-padding-horizontal-minimized", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "horizontal-minimized" + ] + }, + { + "key": "{side-nav.wrapper.padding.vertical-minimized}", + "$type": "dimension", + "$value": "22px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "22", + "unit": "px", + "key": "{side-nav.wrapper.padding.vertical-minimized}" + }, + "name": "token-side-nav-wrapper-padding-vertical-minimized", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "vertical-minimized" + ] + }, + { + "key": "{side-nav.toggle-button.border.radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{side-nav.toggle-button.border.radius}" + }, + "name": "token-side-nav-toggle-button-border-radius", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "toggle-button", + "border", + "radius" + ] + }, + { + "key": "{side-nav.header.home-link.padding}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{side-nav.header.home-link.padding}" + }, + "name": "token-side-nav-header-home-link-padding", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "home-link", + "padding" + ] + }, + { + "key": "{side-nav.header.home-link.logo-size}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{side-nav.header.home-link.logo-size}" + }, + "name": "token-side-nav-header-home-link-logo-size", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "home-link", + "logo-size" + ] + }, + { + "key": "{side-nav.header.home-link.logo-size-minimized}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{side-nav.header.home-link.logo-size-minimized}" + }, + "name": "token-side-nav-header-home-link-logo-size-minimized", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "home-link", + "logo-size-minimized" + ] + }, + { + "key": "{side-nav.header.actions.spacing}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.header.actions.spacing}" + }, + "name": "token-side-nav-header-actions-spacing", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "header", + "actions", + "spacing" + ] + }, + { + "key": "{side-nav.body.list.margin-vertical}", + "$type": "dimension", + "$value": "24px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "24", + "unit": "px", + "key": "{side-nav.body.list.margin-vertical}" + }, + "name": "token-side-nav-body-list-margin-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list", + "margin-vertical" + ] + }, + { + "key": "{side-nav.body.list-item.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{side-nav.body.list-item.height}" + }, + "name": "token-side-nav-body-list-item-height", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "height" + ] + }, + { + "key": "{side-nav.body.list-item.padding.horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.body.list-item.padding.horizontal}" + }, + "name": "token-side-nav-body-list-item-padding-horizontal", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "padding", + "horizontal" + ] + }, + { + "key": "{side-nav.body.list-item.padding.vertical}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{side-nav.body.list-item.padding.vertical}" + }, + "name": "token-side-nav-body-list-item-padding-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "padding", + "vertical" + ] + }, + { + "key": "{side-nav.body.list-item.spacing-vertical}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{side-nav.body.list-item.spacing-vertical}" + }, + "name": "token-side-nav-body-list-item-spacing-vertical", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "spacing-vertical" + ] + }, + { + "key": "{side-nav.body.list-item.content-spacing-horizontal}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{side-nav.body.list-item.content-spacing-horizontal}" + }, + "name": "token-side-nav-body-list-item-content-spacing-horizontal", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "content-spacing-horizontal" + ] + }, + { + "key": "{side-nav.body.list-item.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{side-nav.body.list-item.border-radius}" + }, + "name": "token-side-nav-body-list-item-border-radius", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "body", + "list-item", + "border-radius" + ] + }, + { + "key": "{side-nav.color.foreground.primary}", + "$type": "color", + "$value": "#dedfe3", + "group": "components", + "original": { + "$type": "color", + "$value": "#dedfe3", + "group": "components", + "key": "{side-nav.color.foreground.primary}" + }, + "name": "token-side-nav-color-foreground-primary", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "foreground", + "primary" + ] + }, + { + "key": "{side-nav.color.foreground.strong}", + "$type": "color", + "$value": "#ffffff", + "group": "components", + "original": { + "$type": "color", + "$value": "#fff", + "group": "components", + "key": "{side-nav.color.foreground.strong}" + }, + "name": "token-side-nav-color-foreground-strong", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "foreground", + "strong" + ] + }, + { + "key": "{side-nav.color.foreground.faint}", + "$type": "color", + "$value": "#8c909c", + "group": "components", + "original": { + "$type": "color", + "$value": "#8c909c", + "group": "components", + "key": "{side-nav.color.foreground.faint}" + }, + "name": "token-side-nav-color-foreground-faint", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "foreground", + "faint" + ] + }, + { + "key": "{side-nav.color.surface.primary}", + "$type": "color", + "$value": "#0c0c0e", + "group": "components", + "original": { + "$type": "color", + "$value": "#0c0c0e", + "group": "components", + "key": "{side-nav.color.surface.primary}" + }, + "name": "token-side-nav-color-surface-primary", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "surface", + "primary" + ] + }, + { + "key": "{side-nav.color.surface.interactive-hover}", + "$type": "color", + "$value": "#3b3d45", + "group": "semantic", + "original": { + "$type": "color", + "$value": "#3b3d45", + "group": "semantic", + "key": "{side-nav.color.surface.interactive-hover}" + }, + "name": "token-side-nav-color-surface-interactive-hover", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "surface", + "interactive-hover" + ] + }, + { + "key": "{side-nav.color.surface.interactive-active}", + "$type": "color", + "$value": "#656a76", + "group": "semantic", + "original": { + "$type": "color", + "$value": "#656a76", + "group": "semantic", + "key": "{side-nav.color.surface.interactive-active}" + }, + "name": "token-side-nav-color-surface-interactive-active", + "attributes": { + "category": "side-nav" + }, + "path": [ + "side-nav", + "color", + "surface", + "interactive-active" + ] + }, + { + "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.border-radius}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "key": "{tooltip.border-radius}" + }, + "name": "token-tooltip-border-radius", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "border-radius" + ] + }, + { + "key": "{tooltip.color.foreground.primary}", + "$type": "color", + "$value": "var(--token-color-foreground-high-contrast)", + "group": "components", + "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" + ] + }, + { + "key": "{tooltip.color.surface.primary}", + "$type": "color", + "$value": "var(--token-color-palette-neutral-700)", + "group": "components", + "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" + ] + }, + { + "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.max-width}", + "$type": "dimension", + "$value": "280px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "280", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "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", + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "key": "{tooltip.padding.vertical}" + }, + "name": "token-tooltip-padding-vertical", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "padding", + "vertical" + ] + }, + { + "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", + "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}" + ], + "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", + "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}" + ], + "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", + "original": { + "$type": "font-family", + "$value": [ + "{typography.font-stack.monospace.code.macOS}", + "{typography.font-stack.monospace.code.windows}", + "monospace" + ], + "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": { + "hds": "400", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "400", + "$modes": { + "hds": "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": { + "hds": "500", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 + }, + "original": { + "$type": "font-weight", + "$value": "500", + "$modes": { + "hds": "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": { + "hds": "600", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "600", + "$modes": { + "hds": "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": { + "hds": "700", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 + }, + "original": { + "$type": "font-weight", + "$value": "700", + "$modes": { + "hds": "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", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "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", + "original": { + "$type": "font-size", + "$value": "30", + "unit": "px", + "comment": "30px/1.875rem", + "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", + "original": { + "$type": "number", + "$value": 1.2666, + "comment": "38px", + "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-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", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "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", + "original": { + "$type": "font-size", + "$value": "24", + "unit": "px", + "comment": "24px/1.5rem", + "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", + "original": { + "$type": "number", + "$value": 1.3333, + "comment": "32px", + "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-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", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "18", + "unit": "px", + "comment": "18px/1.125rem", + "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", + "original": { + "$type": "number", + "$value": 1.3333, + "comment": "24px", + "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", + "comment": "this is `tracking`", + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "comment": "this is `tracking`", + "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", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "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", + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "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", + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px", + "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", + "comment": "this is `tracking`", + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "comment": "this is `tracking`", + "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", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "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", + "original": { + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "key": "{typography.display-100.line-height}" + }, + "name": "token-typography-display-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "line-height" + ] + }, + { + "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", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "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", + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px", + "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", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "comment": "14px/0.875rem", + "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", + "original": { + "$type": "number", + "$value": 1.4286, + "comment": "20px", + "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", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "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", + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "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", + "original": { + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "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-100.font-family}", + "$type": "font-family", + "$value": "ui-monospace, Menlo, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "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", + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "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", + "original": { + "$type": "number", + "$value": 1.23, + "comment": "16px", + "key": "{typography.code-100.line-height}" + }, + "name": "token-typography-code-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "line-height" + ] + }, + { + "key": "{typography.code-200.font-family}", + "$type": "font-family", + "$value": "ui-monospace, Menlo, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "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", + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "comment": "14px/0.875rem", + "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", + "original": { + "$type": "number", + "$value": 1.125, + "comment": "18px", + "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-300.font-family}", + "$type": "font-family", + "$value": "ui-monospace, Menlo, Consolas, monospace", + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "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", + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "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", + "original": { + "$type": "number", + "$value": 1.25, + "comment": "20px", + "key": "{typography.code-300.line-height}" + }, + "name": "token-typography-code-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "line-height" + ] + } +] \ No newline at end of file diff --git a/packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css index 85d4d1fd7f3..10d25272e3a 100644 --- a/packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css +++ b/packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css @@ -2,7 +2,9 @@ * Do not edit directly, this file was auto-generated. */ -:root { +:root, +.hds-theme-hds, +[data-hds-theme="hds"] { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #ffffff; --token-typography-font-weight-regular: 400; 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 index f554fbe922f..bf19944a35b 100644 --- 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 @@ -2,7 +2,9 @@ * Do not edit directly, this file was auto-generated. */ -:root { +:root, +.hds-theme-hds, +[data-hds-theme="hds"] { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #ffffff; --token-typography-font-weight-regular: 400; 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 index ba028da1a2a..d11eabad25c 100644 --- 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 @@ -2,7 +2,7 @@ * Do not edit directly, this file was auto-generated. */ -@mixin hds-theme-default() { +@mixin hds-theme-hds() { :root { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #ffffff; From c1fc24e5f2247089829271d502e26040d39d856f Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 6 Nov 2025 18:16:07 +0000 Subject: [PATCH 038/224] =?UTF-8?q?updated=20=E2=80=9Csrc=E2=80=9D=20files?= =?UTF-8?q?=20to=20replace=20`hds`=20key=20with=20`default`=20in=20`$modes?= =?UTF-8?q?`=20definitions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tokens/src/global/color/palette-neutrals.json | 2 +- .../src/global/color/semantic-foreground.json | 2 +- .../tokens/src/products/shared/typography.json | 14 +++++++------- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/tokens/src/global/color/palette-neutrals.json b/packages/tokens/src/global/color/palette-neutrals.json index 62f22bccd19..35275c43271 100644 --- a/packages/tokens/src/global/color/palette-neutrals.json +++ b/packages/tokens/src/global/color/palette-neutrals.json @@ -46,7 +46,7 @@ "$value": "#ffffff", "group": "palette", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "{carbon.color.white.0}", "cds-g10": "{carbon.color.white.0}", "cds-g90": "{carbon.color.white.0}", diff --git a/packages/tokens/src/global/color/semantic-foreground.json b/packages/tokens/src/global/color/semantic-foreground.json index 5b14889b034..9c897e6b4c3 100644 --- a/packages/tokens/src/global/color/semantic-foreground.json +++ b/packages/tokens/src/global/color/semantic-foreground.json @@ -11,7 +11,7 @@ "$value": "{color.palette.neutral-600}", "group": "semantic", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "{carbon.themes.white.textPrimary}", "cds-g10": "{carbon.themes.g10.textPrimary}", "cds-g90": "{carbon.themes.g90.textPrimary}", diff --git a/packages/tokens/src/products/shared/typography.json b/packages/tokens/src/products/shared/typography.json index 7a4fd516caa..80e45e332ec 100644 --- a/packages/tokens/src/products/shared/typography.json +++ b/packages/tokens/src/products/shared/typography.json @@ -10,7 +10,7 @@ "BlinkMacSystemFont" ], "$modes": { - "hds": [ + "default": [ "-apple-system", "BlinkMacSystemFont" ], @@ -55,7 +55,7 @@ "BlinkMacSystemFont" ], "$modes": { - "hds": [ + "default": [ "-apple-system", "BlinkMacSystemFont" ], @@ -93,7 +93,7 @@ "Menlo" ], "$modes": { - "hds": [ + "default": [ "ui-monospace", "Menlo" ], @@ -145,7 +145,7 @@ "$type": "font-weight", "$value": "400", "$modes": { - "hds": "400", + "default": "400", "cds-g0": "{carbon.typography.font-weight.regular}", "cds-g10": "{carbon.typography.font-weight.regular}", "cds-g90": "{carbon.typography.font-weight.regular}", @@ -156,7 +156,7 @@ "$type": "font-weight", "$value": "500", "$modes": { - "hds": "500", + "default": "500", "cds-g0": "{carbon.typography.font-weight.regular}", "cds-g10": "{carbon.typography.font-weight.regular}", "cds-g90": "{carbon.typography.font-weight.regular}", @@ -167,7 +167,7 @@ "$type": "font-weight", "$value": "600", "$modes": { - "hds": "600", + "default": "600", "cds-g0": "{carbon.typography.font-weight.semibold}", "cds-g10": "{carbon.typography.font-weight.semibold}", "cds-g90": "{carbon.typography.font-weight.semibold}", @@ -178,7 +178,7 @@ "$type": "font-weight", "$value": "700", "$modes": { - "hds": "700", + "default": "700", "cds-g0": "{carbon.typography.font-weight.semibold}", "cds-g10": "{carbon.typography.font-weight.semibold}", "cds-g90": "{carbon.typography.font-weight.semibold}", From 4396bb0bce342b7191e06003e2d0705fa3d643f1 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 6 Nov 2025 18:16:33 +0000 Subject: [PATCH 039/224] updated logic to replace `hds` key with `default` in `$modes` definitions --- .../build-parts/generateExtraThemingCssFiles.ts | 14 +++++++------- .../build-parts/generateExtraThemingDocsFiles.ts | 4 ++-- .../build-parts/getStyleDictionaryConfig.ts | 2 +- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts b/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts index 22ef4f71aff..121f9de621b 100644 --- a/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts +++ b/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts @@ -11,8 +11,8 @@ import { fileHeader } from 'style-dictionary/utils'; export async function generateExtraThemingCssFiles(_dictionary: Dictionary, config: PlatformConfig): Promise { - const commonSource = await getSourceFromFileWithRootSelector(config, 'hds', 'common-tokens.css'); - const hdsThemedSource = await getSourceFromFileWithRootSelector(config, 'hds', 'themed-tokens.css'); + 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'); @@ -42,8 +42,8 @@ export async function generateExtraThemingCssFiles(_dictionary: Dictionary, conf if (method === 'css-selectors') { outputContent = `${header}\n\n`; // - // this is the fallback to the default `hds` mode - outputContent += `${hdsThemedSource.replace(/^:root/, ':root, .hds-theme-hds, [data-hds-theme="hds"]')}\n\n`; + // this is the fallback to the `default` mode (standard HDS) + outputContent += `${defaultThemedSource.replace(/^:root/, ':root, .hds-theme-default, [data-hds-theme="default"]')}\n\n`; // // these are the themed `carbonized` tokens outputContent += `${cds0ThemedSource.replace(/^:root/, '.hds-theme-light, .hds-theme-cds-g0, [data-hds-theme="light"], [data-hds-theme="cds-g0"]')}\n\n`; @@ -59,8 +59,8 @@ export async function generateExtraThemingCssFiles(_dictionary: Dictionary, conf if (method === 'combined-strategies') { outputContent = `${header}\n\n`; // - // this is the fallback to the default `hds` mode - outputContent += `${hdsThemedSource.replace(/^:root/, ':root, .hds-theme-hds, [data-hds-theme="hds"]')}\n\n`; + // this is the fallback to the `default` mode (standard HDS) + outputContent += `${defaultThemedSource.replace(/^:root/, ':root, .hds-theme-default, [data-hds-theme="default"]')}\n\n`; // // these are the themed `carbonized` tokens // note: we will revisit the `[class*=hds-theme-]` selector if we find that is too generic and there are cases where this is picking up other classes @@ -78,7 +78,7 @@ export async function generateExtraThemingCssFiles(_dictionary: Dictionary, conf // SCSS file for mixins if (method === 'scss-mixins') { outputContent = `${header}\n\n`; - outputContent += `@mixin hds-theme-hds() { ${hdsThemedSource} }\n\n`; + outputContent += `@mixin hds-theme-default() { ${defaultThemedSource} }\n\n`; outputContent += `@mixin hds-theme-cds0() { ${cds0ThemedSource} }\n\n`; outputContent += `@mixin hds-theme-cds10() { ${cds10ThemedSource} }\n\n`; outputContent += `@mixin hds-theme-cds90() { ${cds90ThemedSource} }\n\n`; diff --git a/packages/tokens/scripts/build-parts/generateExtraThemingDocsFiles.ts b/packages/tokens/scripts/build-parts/generateExtraThemingDocsFiles.ts index d25ebeed834..1cc469870a6 100644 --- a/packages/tokens/scripts/build-parts/generateExtraThemingDocsFiles.ts +++ b/packages/tokens/scripts/build-parts/generateExtraThemingDocsFiles.ts @@ -10,14 +10,14 @@ import type { DesignToken } from 'style-dictionary/types'; export async function generateExtraThemingDocsFiles(_dictionary: Dictionary, config: PlatformConfig): Promise { - const hdsThemedTokens = await getJsonThemedObjectFromFile(config, 'hds'); + 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 = { - 'hds': hdsThemedTokens, + 'default': defaultThemedTokens, 'cds-g0': cds0ThemedTokens, 'cds-g10': cds10ThemedTokens, 'cds-g90': cds90ThemedTokens, diff --git a/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts index c9075ebb1b9..9fdb03a8cdd 100644 --- a/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts +++ b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts @@ -6,7 +6,7 @@ import type { Config, DesignToken } from 'style-dictionary/types'; export const targets = ['products', 'devdot', 'marketing', 'cloud-email']; -export const modes = ['hds', 'cds-g0', 'cds-g10', 'cds-g90', 'cds-g100']; +export const modes = ['default', 'cds-g0', 'cds-g10', 'cds-g90', 'cds-g100']; export type Target = typeof targets[number]; export type Mode = typeof modes[number]; From abd1393e21b0592053c44ae3bcd5c4bb34cfeb2c Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 6 Nov 2025 18:17:32 +0000 Subject: [PATCH 040/224] re-generated tokens in `dist` folder --- .../dist/docs/products/themed-tokens.json | 122 +++++++++--------- .../docs/products/themed-tokens/cds-g0.json | 24 ++-- .../docs/products/themed-tokens/cds-g10.json | 24 ++-- .../docs/products/themed-tokens/cds-g100.json | 24 ++-- .../docs/products/themed-tokens/cds-g90.json | 24 ++-- .../themed-tokens/{hds.json => default.json} | 24 ++-- .../tokens/dist/docs/products/tokens.json | 24 ++-- packages/tokens/dist/marketing/tokens.json | 24 ++-- .../with-combined-strategies/tokens.css | 4 +- .../with-css-selectors/tokens.css | 4 +- .../{hds => default}/common-tokens.css | 0 .../{hds => default}/themed-tokens.css | 0 .../themed-tokens/with-scss-mixins/tokens.css | 2 +- 13 files changed, 150 insertions(+), 150 deletions(-) rename packages/tokens/dist/docs/products/themed-tokens/{hds.json => default.json} (99%) rename packages/tokens/dist/products/css/themed-tokens/with-root-selector/{hds => default}/common-tokens.css (100%) rename packages/tokens/dist/products/css/themed-tokens/with-root-selector/{hds => default}/themed-tokens.css (100%) diff --git a/packages/tokens/dist/docs/products/themed-tokens.json b/packages/tokens/dist/docs/products/themed-tokens.json index 5d7ccc56df0..abccdddf34c 100644 --- a/packages/tokens/dist/docs/products/themed-tokens.json +++ b/packages/tokens/dist/docs/products/themed-tokens.json @@ -1,5 +1,5 @@ { - "hds": { + "default": { "token-border-radius-x-small": { "key": "{border.radius.x-small}", "$type": "dimension", @@ -888,7 +888,7 @@ "$value": "#ffffff", "group": "palette", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "#ffffff", "cds-g10": "#ffffff", "cds-g90": "#ffffff", @@ -899,7 +899,7 @@ "$value": "#ffffff", "group": "palette", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "{carbon.color.white.0}", "cds-g10": "{carbon.color.white.0}", "cds-g90": "{carbon.color.white.0}", @@ -1273,7 +1273,7 @@ "$value": "#ffffff", "group": "semantic", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "#161616", "cds-g10": "#161616", "cds-g90": "#f4f4f4", @@ -1284,7 +1284,7 @@ "$value": "#ffffff", "group": "semantic", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "{carbon.themes.white.textPrimary}", "cds-g10": "{carbon.themes.g10.textPrimary}", "cds-g90": "{carbon.themes.g90.textPrimary}", @@ -7484,7 +7484,7 @@ "$type": "font-weight", "$value": "400", "$modes": { - "hds": "400", + "default": "400", "cds-g0": 400, "cds-g10": 400, "cds-g90": 400, @@ -7494,7 +7494,7 @@ "$type": "font-weight", "$value": "400", "$modes": { - "hds": "400", + "default": "400", "cds-g0": "{carbon.typography.font-weight.regular}", "cds-g10": "{carbon.typography.font-weight.regular}", "cds-g90": "{carbon.typography.font-weight.regular}", @@ -7517,7 +7517,7 @@ "$type": "font-weight", "$value": "500", "$modes": { - "hds": "500", + "default": "500", "cds-g0": 400, "cds-g10": 400, "cds-g90": 400, @@ -7527,7 +7527,7 @@ "$type": "font-weight", "$value": "500", "$modes": { - "hds": "500", + "default": "500", "cds-g0": "{carbon.typography.font-weight.regular}", "cds-g10": "{carbon.typography.font-weight.regular}", "cds-g90": "{carbon.typography.font-weight.regular}", @@ -7550,7 +7550,7 @@ "$type": "font-weight", "$value": "600", "$modes": { - "hds": "600", + "default": "600", "cds-g0": 600, "cds-g10": 600, "cds-g90": 600, @@ -7560,7 +7560,7 @@ "$type": "font-weight", "$value": "600", "$modes": { - "hds": "600", + "default": "600", "cds-g0": "{carbon.typography.font-weight.semibold}", "cds-g10": "{carbon.typography.font-weight.semibold}", "cds-g90": "{carbon.typography.font-weight.semibold}", @@ -7583,7 +7583,7 @@ "$type": "font-weight", "$value": "700", "$modes": { - "hds": "700", + "default": "700", "cds-g0": 600, "cds-g10": 600, "cds-g90": 600, @@ -7593,7 +7593,7 @@ "$type": "font-weight", "$value": "700", "$modes": { - "hds": "700", + "default": "700", "cds-g0": "{carbon.typography.font-weight.semibold}", "cds-g10": "{carbon.typography.font-weight.semibold}", "cds-g90": "{carbon.typography.font-weight.semibold}", @@ -9240,7 +9240,7 @@ "$value": "#ffffff", "group": "palette", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "#ffffff", "cds-g10": "#ffffff", "cds-g90": "#ffffff", @@ -9251,7 +9251,7 @@ "$value": "{carbon.color.white.0}", "group": "palette", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "{carbon.color.white.0}", "cds-g10": "{carbon.color.white.0}", "cds-g90": "{carbon.color.white.0}", @@ -9625,7 +9625,7 @@ "$value": "#161616", "group": "semantic", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "#161616", "cds-g10": "#161616", "cds-g90": "#f4f4f4", @@ -9636,7 +9636,7 @@ "$value": "{carbon.themes.white.textPrimary}", "group": "semantic", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "{carbon.themes.white.textPrimary}", "cds-g10": "{carbon.themes.g10.textPrimary}", "cds-g90": "{carbon.themes.g90.textPrimary}", @@ -15836,7 +15836,7 @@ "$type": "font-weight", "$value": 400, "$modes": { - "hds": "400", + "default": "400", "cds-g0": 400, "cds-g10": 400, "cds-g90": 400, @@ -15846,7 +15846,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.regular}", "$modes": { - "hds": "400", + "default": "400", "cds-g0": "{carbon.typography.font-weight.regular}", "cds-g10": "{carbon.typography.font-weight.regular}", "cds-g90": "{carbon.typography.font-weight.regular}", @@ -15869,7 +15869,7 @@ "$type": "font-weight", "$value": 400, "$modes": { - "hds": "500", + "default": "500", "cds-g0": 400, "cds-g10": 400, "cds-g90": 400, @@ -15879,7 +15879,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.regular}", "$modes": { - "hds": "500", + "default": "500", "cds-g0": "{carbon.typography.font-weight.regular}", "cds-g10": "{carbon.typography.font-weight.regular}", "cds-g90": "{carbon.typography.font-weight.regular}", @@ -15902,7 +15902,7 @@ "$type": "font-weight", "$value": 600, "$modes": { - "hds": "600", + "default": "600", "cds-g0": 600, "cds-g10": 600, "cds-g90": 600, @@ -15912,7 +15912,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.semibold}", "$modes": { - "hds": "600", + "default": "600", "cds-g0": "{carbon.typography.font-weight.semibold}", "cds-g10": "{carbon.typography.font-weight.semibold}", "cds-g90": "{carbon.typography.font-weight.semibold}", @@ -15935,7 +15935,7 @@ "$type": "font-weight", "$value": 600, "$modes": { - "hds": "700", + "default": "700", "cds-g0": 600, "cds-g10": 600, "cds-g90": 600, @@ -15945,7 +15945,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.semibold}", "$modes": { - "hds": "700", + "default": "700", "cds-g0": "{carbon.typography.font-weight.semibold}", "cds-g10": "{carbon.typography.font-weight.semibold}", "cds-g90": "{carbon.typography.font-weight.semibold}", @@ -17592,7 +17592,7 @@ "$value": "#ffffff", "group": "palette", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "#ffffff", "cds-g10": "#ffffff", "cds-g90": "#ffffff", @@ -17603,7 +17603,7 @@ "$value": "{carbon.color.white.0}", "group": "palette", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "{carbon.color.white.0}", "cds-g10": "{carbon.color.white.0}", "cds-g90": "{carbon.color.white.0}", @@ -17977,7 +17977,7 @@ "$value": "#161616", "group": "semantic", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "#161616", "cds-g10": "#161616", "cds-g90": "#f4f4f4", @@ -17988,7 +17988,7 @@ "$value": "{carbon.themes.g10.textPrimary}", "group": "semantic", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "{carbon.themes.white.textPrimary}", "cds-g10": "{carbon.themes.g10.textPrimary}", "cds-g90": "{carbon.themes.g90.textPrimary}", @@ -24188,7 +24188,7 @@ "$type": "font-weight", "$value": 400, "$modes": { - "hds": "400", + "default": "400", "cds-g0": 400, "cds-g10": 400, "cds-g90": 400, @@ -24198,7 +24198,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.regular}", "$modes": { - "hds": "400", + "default": "400", "cds-g0": "{carbon.typography.font-weight.regular}", "cds-g10": "{carbon.typography.font-weight.regular}", "cds-g90": "{carbon.typography.font-weight.regular}", @@ -24221,7 +24221,7 @@ "$type": "font-weight", "$value": 400, "$modes": { - "hds": "500", + "default": "500", "cds-g0": 400, "cds-g10": 400, "cds-g90": 400, @@ -24231,7 +24231,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.regular}", "$modes": { - "hds": "500", + "default": "500", "cds-g0": "{carbon.typography.font-weight.regular}", "cds-g10": "{carbon.typography.font-weight.regular}", "cds-g90": "{carbon.typography.font-weight.regular}", @@ -24254,7 +24254,7 @@ "$type": "font-weight", "$value": 600, "$modes": { - "hds": "600", + "default": "600", "cds-g0": 600, "cds-g10": 600, "cds-g90": 600, @@ -24264,7 +24264,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.semibold}", "$modes": { - "hds": "600", + "default": "600", "cds-g0": "{carbon.typography.font-weight.semibold}", "cds-g10": "{carbon.typography.font-weight.semibold}", "cds-g90": "{carbon.typography.font-weight.semibold}", @@ -24287,7 +24287,7 @@ "$type": "font-weight", "$value": 600, "$modes": { - "hds": "700", + "default": "700", "cds-g0": 600, "cds-g10": 600, "cds-g90": 600, @@ -24297,7 +24297,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.semibold}", "$modes": { - "hds": "700", + "default": "700", "cds-g0": "{carbon.typography.font-weight.semibold}", "cds-g10": "{carbon.typography.font-weight.semibold}", "cds-g90": "{carbon.typography.font-weight.semibold}", @@ -25944,7 +25944,7 @@ "$value": "#ffffff", "group": "palette", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "#ffffff", "cds-g10": "#ffffff", "cds-g90": "#ffffff", @@ -25955,7 +25955,7 @@ "$value": "{carbon.color.white.0}", "group": "palette", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "{carbon.color.white.0}", "cds-g10": "{carbon.color.white.0}", "cds-g90": "{carbon.color.white.0}", @@ -26329,7 +26329,7 @@ "$value": "#f4f4f4", "group": "semantic", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "#161616", "cds-g10": "#161616", "cds-g90": "#f4f4f4", @@ -26340,7 +26340,7 @@ "$value": "{carbon.themes.g90.textPrimary}", "group": "semantic", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "{carbon.themes.white.textPrimary}", "cds-g10": "{carbon.themes.g10.textPrimary}", "cds-g90": "{carbon.themes.g90.textPrimary}", @@ -32540,7 +32540,7 @@ "$type": "font-weight", "$value": 400, "$modes": { - "hds": "400", + "default": "400", "cds-g0": 400, "cds-g10": 400, "cds-g90": 400, @@ -32550,7 +32550,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.regular}", "$modes": { - "hds": "400", + "default": "400", "cds-g0": "{carbon.typography.font-weight.regular}", "cds-g10": "{carbon.typography.font-weight.regular}", "cds-g90": "{carbon.typography.font-weight.regular}", @@ -32573,7 +32573,7 @@ "$type": "font-weight", "$value": 400, "$modes": { - "hds": "500", + "default": "500", "cds-g0": 400, "cds-g10": 400, "cds-g90": 400, @@ -32583,7 +32583,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.regular}", "$modes": { - "hds": "500", + "default": "500", "cds-g0": "{carbon.typography.font-weight.regular}", "cds-g10": "{carbon.typography.font-weight.regular}", "cds-g90": "{carbon.typography.font-weight.regular}", @@ -32606,7 +32606,7 @@ "$type": "font-weight", "$value": 600, "$modes": { - "hds": "600", + "default": "600", "cds-g0": 600, "cds-g10": 600, "cds-g90": 600, @@ -32616,7 +32616,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.semibold}", "$modes": { - "hds": "600", + "default": "600", "cds-g0": "{carbon.typography.font-weight.semibold}", "cds-g10": "{carbon.typography.font-weight.semibold}", "cds-g90": "{carbon.typography.font-weight.semibold}", @@ -32639,7 +32639,7 @@ "$type": "font-weight", "$value": 600, "$modes": { - "hds": "700", + "default": "700", "cds-g0": 600, "cds-g10": 600, "cds-g90": 600, @@ -32649,7 +32649,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.semibold}", "$modes": { - "hds": "700", + "default": "700", "cds-g0": "{carbon.typography.font-weight.semibold}", "cds-g10": "{carbon.typography.font-weight.semibold}", "cds-g90": "{carbon.typography.font-weight.semibold}", @@ -34296,7 +34296,7 @@ "$value": "#ffffff", "group": "palette", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "#ffffff", "cds-g10": "#ffffff", "cds-g90": "#ffffff", @@ -34307,7 +34307,7 @@ "$value": "{carbon.color.white.0}", "group": "palette", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "{carbon.color.white.0}", "cds-g10": "{carbon.color.white.0}", "cds-g90": "{carbon.color.white.0}", @@ -34681,7 +34681,7 @@ "$value": "#f4f4f4", "group": "semantic", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "#161616", "cds-g10": "#161616", "cds-g90": "#f4f4f4", @@ -34692,7 +34692,7 @@ "$value": "{carbon.themes.g100.textPrimary}", "group": "semantic", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "{carbon.themes.white.textPrimary}", "cds-g10": "{carbon.themes.g10.textPrimary}", "cds-g90": "{carbon.themes.g90.textPrimary}", @@ -40892,7 +40892,7 @@ "$type": "font-weight", "$value": 400, "$modes": { - "hds": "400", + "default": "400", "cds-g0": 400, "cds-g10": 400, "cds-g90": 400, @@ -40902,7 +40902,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.regular}", "$modes": { - "hds": "400", + "default": "400", "cds-g0": "{carbon.typography.font-weight.regular}", "cds-g10": "{carbon.typography.font-weight.regular}", "cds-g90": "{carbon.typography.font-weight.regular}", @@ -40925,7 +40925,7 @@ "$type": "font-weight", "$value": 400, "$modes": { - "hds": "500", + "default": "500", "cds-g0": 400, "cds-g10": 400, "cds-g90": 400, @@ -40935,7 +40935,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.regular}", "$modes": { - "hds": "500", + "default": "500", "cds-g0": "{carbon.typography.font-weight.regular}", "cds-g10": "{carbon.typography.font-weight.regular}", "cds-g90": "{carbon.typography.font-weight.regular}", @@ -40958,7 +40958,7 @@ "$type": "font-weight", "$value": 600, "$modes": { - "hds": "600", + "default": "600", "cds-g0": 600, "cds-g10": 600, "cds-g90": 600, @@ -40968,7 +40968,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.semibold}", "$modes": { - "hds": "600", + "default": "600", "cds-g0": "{carbon.typography.font-weight.semibold}", "cds-g10": "{carbon.typography.font-weight.semibold}", "cds-g90": "{carbon.typography.font-weight.semibold}", @@ -40991,7 +40991,7 @@ "$type": "font-weight", "$value": 600, "$modes": { - "hds": "700", + "default": "700", "cds-g0": 600, "cds-g10": 600, "cds-g90": 600, @@ -41001,7 +41001,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.semibold}", "$modes": { - "hds": "700", + "default": "700", "cds-g0": "{carbon.typography.font-weight.semibold}", "cds-g10": "{carbon.typography.font-weight.semibold}", "cds-g90": "{carbon.typography.font-weight.semibold}", diff --git a/packages/tokens/dist/docs/products/themed-tokens/cds-g0.json b/packages/tokens/dist/docs/products/themed-tokens/cds-g0.json index d51cca9e590..b43ef37bfd3 100644 --- a/packages/tokens/dist/docs/products/themed-tokens/cds-g0.json +++ b/packages/tokens/dist/docs/products/themed-tokens/cds-g0.json @@ -887,7 +887,7 @@ "$value": "#ffffff", "group": "palette", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "#ffffff", "cds-g10": "#ffffff", "cds-g90": "#ffffff", @@ -898,7 +898,7 @@ "$value": "{carbon.color.white.0}", "group": "palette", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "{carbon.color.white.0}", "cds-g10": "{carbon.color.white.0}", "cds-g90": "{carbon.color.white.0}", @@ -1272,7 +1272,7 @@ "$value": "#161616", "group": "semantic", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "#161616", "cds-g10": "#161616", "cds-g90": "#f4f4f4", @@ -1283,7 +1283,7 @@ "$value": "{carbon.themes.white.textPrimary}", "group": "semantic", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "{carbon.themes.white.textPrimary}", "cds-g10": "{carbon.themes.g10.textPrimary}", "cds-g90": "{carbon.themes.g90.textPrimary}", @@ -7483,7 +7483,7 @@ "$type": "font-weight", "$value": 400, "$modes": { - "hds": "400", + "default": "400", "cds-g0": 400, "cds-g10": 400, "cds-g90": 400, @@ -7493,7 +7493,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.regular}", "$modes": { - "hds": "400", + "default": "400", "cds-g0": "{carbon.typography.font-weight.regular}", "cds-g10": "{carbon.typography.font-weight.regular}", "cds-g90": "{carbon.typography.font-weight.regular}", @@ -7516,7 +7516,7 @@ "$type": "font-weight", "$value": 400, "$modes": { - "hds": "500", + "default": "500", "cds-g0": 400, "cds-g10": 400, "cds-g90": 400, @@ -7526,7 +7526,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.regular}", "$modes": { - "hds": "500", + "default": "500", "cds-g0": "{carbon.typography.font-weight.regular}", "cds-g10": "{carbon.typography.font-weight.regular}", "cds-g90": "{carbon.typography.font-weight.regular}", @@ -7549,7 +7549,7 @@ "$type": "font-weight", "$value": 600, "$modes": { - "hds": "600", + "default": "600", "cds-g0": 600, "cds-g10": 600, "cds-g90": 600, @@ -7559,7 +7559,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.semibold}", "$modes": { - "hds": "600", + "default": "600", "cds-g0": "{carbon.typography.font-weight.semibold}", "cds-g10": "{carbon.typography.font-weight.semibold}", "cds-g90": "{carbon.typography.font-weight.semibold}", @@ -7582,7 +7582,7 @@ "$type": "font-weight", "$value": 600, "$modes": { - "hds": "700", + "default": "700", "cds-g0": 600, "cds-g10": 600, "cds-g90": 600, @@ -7592,7 +7592,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.semibold}", "$modes": { - "hds": "700", + "default": "700", "cds-g0": "{carbon.typography.font-weight.semibold}", "cds-g10": "{carbon.typography.font-weight.semibold}", "cds-g90": "{carbon.typography.font-weight.semibold}", diff --git a/packages/tokens/dist/docs/products/themed-tokens/cds-g10.json b/packages/tokens/dist/docs/products/themed-tokens/cds-g10.json index 98001293bb5..3b7746e8036 100644 --- a/packages/tokens/dist/docs/products/themed-tokens/cds-g10.json +++ b/packages/tokens/dist/docs/products/themed-tokens/cds-g10.json @@ -887,7 +887,7 @@ "$value": "#ffffff", "group": "palette", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "#ffffff", "cds-g10": "#ffffff", "cds-g90": "#ffffff", @@ -898,7 +898,7 @@ "$value": "{carbon.color.white.0}", "group": "palette", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "{carbon.color.white.0}", "cds-g10": "{carbon.color.white.0}", "cds-g90": "{carbon.color.white.0}", @@ -1272,7 +1272,7 @@ "$value": "#161616", "group": "semantic", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "#161616", "cds-g10": "#161616", "cds-g90": "#f4f4f4", @@ -1283,7 +1283,7 @@ "$value": "{carbon.themes.g10.textPrimary}", "group": "semantic", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "{carbon.themes.white.textPrimary}", "cds-g10": "{carbon.themes.g10.textPrimary}", "cds-g90": "{carbon.themes.g90.textPrimary}", @@ -7483,7 +7483,7 @@ "$type": "font-weight", "$value": 400, "$modes": { - "hds": "400", + "default": "400", "cds-g0": 400, "cds-g10": 400, "cds-g90": 400, @@ -7493,7 +7493,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.regular}", "$modes": { - "hds": "400", + "default": "400", "cds-g0": "{carbon.typography.font-weight.regular}", "cds-g10": "{carbon.typography.font-weight.regular}", "cds-g90": "{carbon.typography.font-weight.regular}", @@ -7516,7 +7516,7 @@ "$type": "font-weight", "$value": 400, "$modes": { - "hds": "500", + "default": "500", "cds-g0": 400, "cds-g10": 400, "cds-g90": 400, @@ -7526,7 +7526,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.regular}", "$modes": { - "hds": "500", + "default": "500", "cds-g0": "{carbon.typography.font-weight.regular}", "cds-g10": "{carbon.typography.font-weight.regular}", "cds-g90": "{carbon.typography.font-weight.regular}", @@ -7549,7 +7549,7 @@ "$type": "font-weight", "$value": 600, "$modes": { - "hds": "600", + "default": "600", "cds-g0": 600, "cds-g10": 600, "cds-g90": 600, @@ -7559,7 +7559,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.semibold}", "$modes": { - "hds": "600", + "default": "600", "cds-g0": "{carbon.typography.font-weight.semibold}", "cds-g10": "{carbon.typography.font-weight.semibold}", "cds-g90": "{carbon.typography.font-weight.semibold}", @@ -7582,7 +7582,7 @@ "$type": "font-weight", "$value": 600, "$modes": { - "hds": "700", + "default": "700", "cds-g0": 600, "cds-g10": 600, "cds-g90": 600, @@ -7592,7 +7592,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.semibold}", "$modes": { - "hds": "700", + "default": "700", "cds-g0": "{carbon.typography.font-weight.semibold}", "cds-g10": "{carbon.typography.font-weight.semibold}", "cds-g90": "{carbon.typography.font-weight.semibold}", diff --git a/packages/tokens/dist/docs/products/themed-tokens/cds-g100.json b/packages/tokens/dist/docs/products/themed-tokens/cds-g100.json index 4b6b2cd72ea..d8874ac7d5f 100644 --- a/packages/tokens/dist/docs/products/themed-tokens/cds-g100.json +++ b/packages/tokens/dist/docs/products/themed-tokens/cds-g100.json @@ -887,7 +887,7 @@ "$value": "#ffffff", "group": "palette", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "#ffffff", "cds-g10": "#ffffff", "cds-g90": "#ffffff", @@ -898,7 +898,7 @@ "$value": "{carbon.color.white.0}", "group": "palette", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "{carbon.color.white.0}", "cds-g10": "{carbon.color.white.0}", "cds-g90": "{carbon.color.white.0}", @@ -1272,7 +1272,7 @@ "$value": "#f4f4f4", "group": "semantic", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "#161616", "cds-g10": "#161616", "cds-g90": "#f4f4f4", @@ -1283,7 +1283,7 @@ "$value": "{carbon.themes.g100.textPrimary}", "group": "semantic", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "{carbon.themes.white.textPrimary}", "cds-g10": "{carbon.themes.g10.textPrimary}", "cds-g90": "{carbon.themes.g90.textPrimary}", @@ -7483,7 +7483,7 @@ "$type": "font-weight", "$value": 400, "$modes": { - "hds": "400", + "default": "400", "cds-g0": 400, "cds-g10": 400, "cds-g90": 400, @@ -7493,7 +7493,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.regular}", "$modes": { - "hds": "400", + "default": "400", "cds-g0": "{carbon.typography.font-weight.regular}", "cds-g10": "{carbon.typography.font-weight.regular}", "cds-g90": "{carbon.typography.font-weight.regular}", @@ -7516,7 +7516,7 @@ "$type": "font-weight", "$value": 400, "$modes": { - "hds": "500", + "default": "500", "cds-g0": 400, "cds-g10": 400, "cds-g90": 400, @@ -7526,7 +7526,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.regular}", "$modes": { - "hds": "500", + "default": "500", "cds-g0": "{carbon.typography.font-weight.regular}", "cds-g10": "{carbon.typography.font-weight.regular}", "cds-g90": "{carbon.typography.font-weight.regular}", @@ -7549,7 +7549,7 @@ "$type": "font-weight", "$value": 600, "$modes": { - "hds": "600", + "default": "600", "cds-g0": 600, "cds-g10": 600, "cds-g90": 600, @@ -7559,7 +7559,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.semibold}", "$modes": { - "hds": "600", + "default": "600", "cds-g0": "{carbon.typography.font-weight.semibold}", "cds-g10": "{carbon.typography.font-weight.semibold}", "cds-g90": "{carbon.typography.font-weight.semibold}", @@ -7582,7 +7582,7 @@ "$type": "font-weight", "$value": 600, "$modes": { - "hds": "700", + "default": "700", "cds-g0": 600, "cds-g10": 600, "cds-g90": 600, @@ -7592,7 +7592,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.semibold}", "$modes": { - "hds": "700", + "default": "700", "cds-g0": "{carbon.typography.font-weight.semibold}", "cds-g10": "{carbon.typography.font-weight.semibold}", "cds-g90": "{carbon.typography.font-weight.semibold}", diff --git a/packages/tokens/dist/docs/products/themed-tokens/cds-g90.json b/packages/tokens/dist/docs/products/themed-tokens/cds-g90.json index 047eb1190fa..d16ea7b4f5d 100644 --- a/packages/tokens/dist/docs/products/themed-tokens/cds-g90.json +++ b/packages/tokens/dist/docs/products/themed-tokens/cds-g90.json @@ -887,7 +887,7 @@ "$value": "#ffffff", "group": "palette", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "#ffffff", "cds-g10": "#ffffff", "cds-g90": "#ffffff", @@ -898,7 +898,7 @@ "$value": "{carbon.color.white.0}", "group": "palette", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "{carbon.color.white.0}", "cds-g10": "{carbon.color.white.0}", "cds-g90": "{carbon.color.white.0}", @@ -1272,7 +1272,7 @@ "$value": "#f4f4f4", "group": "semantic", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "#161616", "cds-g10": "#161616", "cds-g90": "#f4f4f4", @@ -1283,7 +1283,7 @@ "$value": "{carbon.themes.g90.textPrimary}", "group": "semantic", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "{carbon.themes.white.textPrimary}", "cds-g10": "{carbon.themes.g10.textPrimary}", "cds-g90": "{carbon.themes.g90.textPrimary}", @@ -7483,7 +7483,7 @@ "$type": "font-weight", "$value": 400, "$modes": { - "hds": "400", + "default": "400", "cds-g0": 400, "cds-g10": 400, "cds-g90": 400, @@ -7493,7 +7493,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.regular}", "$modes": { - "hds": "400", + "default": "400", "cds-g0": "{carbon.typography.font-weight.regular}", "cds-g10": "{carbon.typography.font-weight.regular}", "cds-g90": "{carbon.typography.font-weight.regular}", @@ -7516,7 +7516,7 @@ "$type": "font-weight", "$value": 400, "$modes": { - "hds": "500", + "default": "500", "cds-g0": 400, "cds-g10": 400, "cds-g90": 400, @@ -7526,7 +7526,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.regular}", "$modes": { - "hds": "500", + "default": "500", "cds-g0": "{carbon.typography.font-weight.regular}", "cds-g10": "{carbon.typography.font-weight.regular}", "cds-g90": "{carbon.typography.font-weight.regular}", @@ -7549,7 +7549,7 @@ "$type": "font-weight", "$value": 600, "$modes": { - "hds": "600", + "default": "600", "cds-g0": 600, "cds-g10": 600, "cds-g90": 600, @@ -7559,7 +7559,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.semibold}", "$modes": { - "hds": "600", + "default": "600", "cds-g0": "{carbon.typography.font-weight.semibold}", "cds-g10": "{carbon.typography.font-weight.semibold}", "cds-g90": "{carbon.typography.font-weight.semibold}", @@ -7582,7 +7582,7 @@ "$type": "font-weight", "$value": 600, "$modes": { - "hds": "700", + "default": "700", "cds-g0": 600, "cds-g10": 600, "cds-g90": 600, @@ -7592,7 +7592,7 @@ "$type": "font-weight", "$value": "{carbon.typography.font-weight.semibold}", "$modes": { - "hds": "700", + "default": "700", "cds-g0": "{carbon.typography.font-weight.semibold}", "cds-g10": "{carbon.typography.font-weight.semibold}", "cds-g90": "{carbon.typography.font-weight.semibold}", diff --git a/packages/tokens/dist/docs/products/themed-tokens/hds.json b/packages/tokens/dist/docs/products/themed-tokens/default.json similarity index 99% rename from packages/tokens/dist/docs/products/themed-tokens/hds.json rename to packages/tokens/dist/docs/products/themed-tokens/default.json index b22d4ea52ba..3b5e7f0801c 100644 --- a/packages/tokens/dist/docs/products/themed-tokens/hds.json +++ b/packages/tokens/dist/docs/products/themed-tokens/default.json @@ -887,7 +887,7 @@ "$value": "#ffffff", "group": "palette", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "#ffffff", "cds-g10": "#ffffff", "cds-g90": "#ffffff", @@ -898,7 +898,7 @@ "$value": "#ffffff", "group": "palette", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "{carbon.color.white.0}", "cds-g10": "{carbon.color.white.0}", "cds-g90": "{carbon.color.white.0}", @@ -1272,7 +1272,7 @@ "$value": "#ffffff", "group": "semantic", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "#161616", "cds-g10": "#161616", "cds-g90": "#f4f4f4", @@ -1283,7 +1283,7 @@ "$value": "#ffffff", "group": "semantic", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "{carbon.themes.white.textPrimary}", "cds-g10": "{carbon.themes.g10.textPrimary}", "cds-g90": "{carbon.themes.g90.textPrimary}", @@ -7483,7 +7483,7 @@ "$type": "font-weight", "$value": "400", "$modes": { - "hds": "400", + "default": "400", "cds-g0": 400, "cds-g10": 400, "cds-g90": 400, @@ -7493,7 +7493,7 @@ "$type": "font-weight", "$value": "400", "$modes": { - "hds": "400", + "default": "400", "cds-g0": "{carbon.typography.font-weight.regular}", "cds-g10": "{carbon.typography.font-weight.regular}", "cds-g90": "{carbon.typography.font-weight.regular}", @@ -7516,7 +7516,7 @@ "$type": "font-weight", "$value": "500", "$modes": { - "hds": "500", + "default": "500", "cds-g0": 400, "cds-g10": 400, "cds-g90": 400, @@ -7526,7 +7526,7 @@ "$type": "font-weight", "$value": "500", "$modes": { - "hds": "500", + "default": "500", "cds-g0": "{carbon.typography.font-weight.regular}", "cds-g10": "{carbon.typography.font-weight.regular}", "cds-g90": "{carbon.typography.font-weight.regular}", @@ -7549,7 +7549,7 @@ "$type": "font-weight", "$value": "600", "$modes": { - "hds": "600", + "default": "600", "cds-g0": 600, "cds-g10": 600, "cds-g90": 600, @@ -7559,7 +7559,7 @@ "$type": "font-weight", "$value": "600", "$modes": { - "hds": "600", + "default": "600", "cds-g0": "{carbon.typography.font-weight.semibold}", "cds-g10": "{carbon.typography.font-weight.semibold}", "cds-g90": "{carbon.typography.font-weight.semibold}", @@ -7582,7 +7582,7 @@ "$type": "font-weight", "$value": "700", "$modes": { - "hds": "700", + "default": "700", "cds-g0": 600, "cds-g10": 600, "cds-g90": 600, @@ -7592,7 +7592,7 @@ "$type": "font-weight", "$value": "700", "$modes": { - "hds": "700", + "default": "700", "cds-g0": "{carbon.typography.font-weight.semibold}", "cds-g10": "{carbon.typography.font-weight.semibold}", "cds-g90": "{carbon.typography.font-weight.semibold}", diff --git a/packages/tokens/dist/docs/products/tokens.json b/packages/tokens/dist/docs/products/tokens.json index 3295ee1ec3b..5dacd2e4150 100644 --- a/packages/tokens/dist/docs/products/tokens.json +++ b/packages/tokens/dist/docs/products/tokens.json @@ -887,7 +887,7 @@ "$value": "#ffffff", "group": "palette", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "#ffffff", "cds-g10": "#ffffff", "cds-g90": "#ffffff", @@ -898,7 +898,7 @@ "$value": "#ffffff", "group": "palette", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "{carbon.color.white.0}", "cds-g10": "{carbon.color.white.0}", "cds-g90": "{carbon.color.white.0}", @@ -1272,7 +1272,7 @@ "$value": "#3b3d45", "group": "semantic", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "#161616", "cds-g10": "#161616", "cds-g90": "#f4f4f4", @@ -1283,7 +1283,7 @@ "$value": "{color.palette.neutral-600}", "group": "semantic", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "{carbon.themes.white.textPrimary}", "cds-g10": "{carbon.themes.g10.textPrimary}", "cds-g90": "{carbon.themes.g90.textPrimary}", @@ -7483,7 +7483,7 @@ "$type": "font-weight", "$value": "400", "$modes": { - "hds": "400", + "default": "400", "cds-g0": 400, "cds-g10": 400, "cds-g90": 400, @@ -7493,7 +7493,7 @@ "$type": "font-weight", "$value": "400", "$modes": { - "hds": "400", + "default": "400", "cds-g0": "{carbon.typography.font-weight.regular}", "cds-g10": "{carbon.typography.font-weight.regular}", "cds-g90": "{carbon.typography.font-weight.regular}", @@ -7516,7 +7516,7 @@ "$type": "font-weight", "$value": "500", "$modes": { - "hds": "500", + "default": "500", "cds-g0": 400, "cds-g10": 400, "cds-g90": 400, @@ -7526,7 +7526,7 @@ "$type": "font-weight", "$value": "500", "$modes": { - "hds": "500", + "default": "500", "cds-g0": "{carbon.typography.font-weight.regular}", "cds-g10": "{carbon.typography.font-weight.regular}", "cds-g90": "{carbon.typography.font-weight.regular}", @@ -7549,7 +7549,7 @@ "$type": "font-weight", "$value": "600", "$modes": { - "hds": "600", + "default": "600", "cds-g0": 600, "cds-g10": 600, "cds-g90": 600, @@ -7559,7 +7559,7 @@ "$type": "font-weight", "$value": "600", "$modes": { - "hds": "600", + "default": "600", "cds-g0": "{carbon.typography.font-weight.semibold}", "cds-g10": "{carbon.typography.font-weight.semibold}", "cds-g90": "{carbon.typography.font-weight.semibold}", @@ -7582,7 +7582,7 @@ "$type": "font-weight", "$value": "700", "$modes": { - "hds": "700", + "default": "700", "cds-g0": 600, "cds-g10": 600, "cds-g90": 600, @@ -7592,7 +7592,7 @@ "$type": "font-weight", "$value": "700", "$modes": { - "hds": "700", + "default": "700", "cds-g0": "{carbon.typography.font-weight.semibold}", "cds-g10": "{carbon.typography.font-weight.semibold}", "cds-g90": "{carbon.typography.font-weight.semibold}", diff --git a/packages/tokens/dist/marketing/tokens.json b/packages/tokens/dist/marketing/tokens.json index da71fd43c38..efe48b76ff4 100644 --- a/packages/tokens/dist/marketing/tokens.json +++ b/packages/tokens/dist/marketing/tokens.json @@ -977,7 +977,7 @@ "$value": "#ffffff", "group": "palette", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "#ffffff", "cds-g10": "#ffffff", "cds-g90": "#ffffff", @@ -990,7 +990,7 @@ "$value": "#ffffff", "group": "palette", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "{carbon.color.white.0}", "cds-g10": "{carbon.color.white.0}", "cds-g90": "{carbon.color.white.0}", @@ -1406,7 +1406,7 @@ "$value": "#3b3d45", "group": "semantic", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "#161616", "cds-g10": "#161616", "cds-g90": "#f4f4f4", @@ -1419,7 +1419,7 @@ "$value": "{color.palette.neutral-600}", "group": "semantic", "$modes": { - "hds": "#ffffff", + "default": "#ffffff", "cds-g0": "{carbon.themes.white.textPrimary}", "cds-g10": "{carbon.themes.g10.textPrimary}", "cds-g90": "{carbon.themes.g90.textPrimary}", @@ -8513,7 +8513,7 @@ "$type": "font-weight", "$value": "400", "$modes": { - "hds": "400", + "default": "400", "cds-g0": 400, "cds-g10": 400, "cds-g90": 400, @@ -8525,7 +8525,7 @@ "$type": "font-weight", "$value": "400", "$modes": { - "hds": "400", + "default": "400", "cds-g0": "{carbon.typography.font-weight.regular}", "cds-g10": "{carbon.typography.font-weight.regular}", "cds-g90": "{carbon.typography.font-weight.regular}", @@ -8548,7 +8548,7 @@ "$type": "font-weight", "$value": "500", "$modes": { - "hds": "500", + "default": "500", "cds-g0": 400, "cds-g10": 400, "cds-g90": 400, @@ -8560,7 +8560,7 @@ "$type": "font-weight", "$value": "500", "$modes": { - "hds": "500", + "default": "500", "cds-g0": "{carbon.typography.font-weight.regular}", "cds-g10": "{carbon.typography.font-weight.regular}", "cds-g90": "{carbon.typography.font-weight.regular}", @@ -8583,7 +8583,7 @@ "$type": "font-weight", "$value": "600", "$modes": { - "hds": "600", + "default": "600", "cds-g0": 600, "cds-g10": 600, "cds-g90": 600, @@ -8595,7 +8595,7 @@ "$type": "font-weight", "$value": "600", "$modes": { - "hds": "600", + "default": "600", "cds-g0": "{carbon.typography.font-weight.semibold}", "cds-g10": "{carbon.typography.font-weight.semibold}", "cds-g90": "{carbon.typography.font-weight.semibold}", @@ -8618,7 +8618,7 @@ "$type": "font-weight", "$value": "700", "$modes": { - "hds": "700", + "default": "700", "cds-g0": 600, "cds-g10": 600, "cds-g90": 600, @@ -8630,7 +8630,7 @@ "$type": "font-weight", "$value": "700", "$modes": { - "hds": "700", + "default": "700", "cds-g0": "{carbon.typography.font-weight.semibold}", "cds-g10": "{carbon.typography.font-weight.semibold}", "cds-g90": "{carbon.typography.font-weight.semibold}", diff --git a/packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css index 10d25272e3a..a5d28d58101 100644 --- a/packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css +++ b/packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css @@ -3,8 +3,8 @@ */ :root, -.hds-theme-hds, -[data-hds-theme="hds"] { +.hds-theme-default, +[data-hds-theme="default"] { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #ffffff; --token-typography-font-weight-regular: 400; 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 index bf19944a35b..1e7d7f9ddc2 100644 --- 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 @@ -3,8 +3,8 @@ */ :root, -.hds-theme-hds, -[data-hds-theme="hds"] { +.hds-theme-default, +[data-hds-theme="default"] { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #ffffff; --token-typography-font-weight-regular: 400; diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/hds/common-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/default/common-tokens.css similarity index 100% rename from packages/tokens/dist/products/css/themed-tokens/with-root-selector/hds/common-tokens.css rename to packages/tokens/dist/products/css/themed-tokens/with-root-selector/default/common-tokens.css diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/hds/themed-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/default/themed-tokens.css similarity index 100% rename from packages/tokens/dist/products/css/themed-tokens/with-root-selector/hds/themed-tokens.css rename to packages/tokens/dist/products/css/themed-tokens/with-root-selector/default/themed-tokens.css 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 index d11eabad25c..ba028da1a2a 100644 --- 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 @@ -2,7 +2,7 @@ * Do not edit directly, this file was auto-generated. */ -@mixin hds-theme-hds() { +@mixin hds-theme-default() { :root { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #ffffff; From c382225017f588f860b206faf528f9e2776011e7 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Fri, 7 Nov 2025 14:23:28 +0000 Subject: [PATCH 041/224] =?UTF-8?q?tweaked=20logic=20for=20CSS=20selectors?= =?UTF-8?q?=20for=20`@media=20(prefers-color-scheme)`=20to=20use=20explici?= =?UTF-8?q?t=20selectors=20`.hds-theme-system`/`[data-hds-theme=3D"system?= =?UTF-8?q?=E2=80=9D]`=20to=20avoid=20specificity=20issues?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `: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 --- .../build-parts/generateExtraThemingCssFiles.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts b/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts index 121f9de621b..d4599064b8a 100644 --- a/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts +++ b/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts @@ -30,9 +30,12 @@ export async function generateExtraThemingCssFiles(_dictionary: Dictionary, conf if (method === 'prefers-color-scheme') { outputContent = `${header}\n\n`; // + // this is the fallback to the `default` mode (standard HDS) + outputContent += `${defaultThemedSource.replace(/^:root/, ':root, .hds-theme-default, [data-hds-theme="default"]')}\n\n`; + // // these are the themed `carbonized` tokens - outputContent += `@media (prefers-color-scheme: light) { ${cds0ThemedSource} }\n\n`; - outputContent += `@media (prefers-color-scheme: dark) { ${cds100ThemedSource} }\n\n`; + outputContent += `@media (prefers-color-scheme: light) { ${cds0ThemedSource.replace(/^:root/, '.hds-theme-system, [data-hds-theme="system"]')} }\n\n`; + outputContent += `@media (prefers-color-scheme: dark) { ${cds100ThemedSource.replace(/^:root/, '.hds-theme-system, [data-hds-theme="system"]')} }\n\n`; // // this is the common part outputContent += `${commonSource}\n\n`; @@ -64,8 +67,8 @@ export async function generateExtraThemingCssFiles(_dictionary: Dictionary, conf // // these are the themed `carbonized` tokens // note: we will revisit the `[class*=hds-theme-]` selector if we find that is too generic and there are cases where this is picking up other classes - outputContent += `@media (prefers-color-scheme: light) { ${cds0ThemedSource.replace(/^:root/, ':root:not([class*=hds-theme-]):not([data-hds-theme])')} }\n\n`; - outputContent += `@media (prefers-color-scheme: dark) { ${cds100ThemedSource.replace(/^:root/, ':root:not([class*=hds-theme-]):not([data-hds-theme])')} }\n\n`; + outputContent += `@media (prefers-color-scheme: light) { ${cds0ThemedSource.replace(/^:root/, '.hds-theme-system, [data-hds-theme="system"]')} }\n\n`; + outputContent += `@media (prefers-color-scheme: dark) { ${cds100ThemedSource.replace(/^:root/, '.hds-theme-system, [data-hds-theme="system"]')} }\n\n`; outputContent += `${cds0ThemedSource.replace(/^:root/, '.hds-theme-light, .hds-theme-cds-g0, [data-hds-theme="light"], [data-hds-theme="cds-g0"]')}\n\n`; outputContent += `${cds10ThemedSource.replace(/^:root/, '.hds-theme-cds-g10, [data-hds-theme="cds-g10"]')}\n\n`; outputContent += `${cds90ThemedSource.replace(/^:root/, '.hds-theme-cds-g90, [data-hds-theme="cds-g90"]')}\n\n`; From 54be4e69e8dff2ae04acffe49677eb3a8e5f64cb Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Fri, 7 Nov 2025 14:23:40 +0000 Subject: [PATCH 042/224] re-generated tokens in `dist` folder --- .../with-combined-strategies/tokens.css | 6 ++++-- .../with-prefers-color-scheme/tokens.css | 17 +++++++++++++++-- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css index a5d28d58101..0620a01ed99 100644 --- a/packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css +++ b/packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css @@ -14,7 +14,8 @@ } @media (prefers-color-scheme: light) { - :root:not([class*="hds-theme-"]):not([data-hds-theme]) { + .hds-theme-system, + [data-hds-theme="system"] { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #161616; --token-typography-font-weight-regular: 400; @@ -25,7 +26,8 @@ } @media (prefers-color-scheme: dark) { - :root:not([class*="hds-theme-"]):not([data-hds-theme]) { + .hds-theme-system, + [data-hds-theme="system"] { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #f4f4f4; --token-typography-font-weight-regular: 400; diff --git a/packages/tokens/dist/products/css/themed-tokens/with-prefers-color-scheme/tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-prefers-color-scheme/tokens.css index ea15c4eb802..abaa33aa9f2 100644 --- a/packages/tokens/dist/products/css/themed-tokens/with-prefers-color-scheme/tokens.css +++ b/packages/tokens/dist/products/css/themed-tokens/with-prefers-color-scheme/tokens.css @@ -2,8 +2,20 @@ * Do not edit directly, this file was auto-generated. */ +:root, +.hds-theme-default, +[data-hds-theme="default"] { + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-primary: #ffffff; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 500; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 700; +} + @media (prefers-color-scheme: light) { - :root { + .hds-theme-system, + [data-hds-theme="system"] { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #161616; --token-typography-font-weight-regular: 400; @@ -14,7 +26,8 @@ } @media (prefers-color-scheme: dark) { - :root { + .hds-theme-system, + [data-hds-theme="system"] { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #f4f4f4; --token-typography-font-weight-regular: 400; From 32f0fccf0ebf48dbff903f5232f0095f34f5408f Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Wed, 12 Nov 2025 18:46:07 +0000 Subject: [PATCH 043/224] =?UTF-8?q?updated=20generation=20of=20extra=20the?= =?UTF-8?q?ming=20CSS=20files=20to=20avoid=20CSS=20variables=20=E2=80=9Cst?= =?UTF-8?q?aleness=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../generateExtraThemingCssFiles.ts | 31 ++++++++++++++++--- 1 file changed, 27 insertions(+), 4 deletions(-) diff --git a/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts b/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts index d4599064b8a..3069f21166e 100644 --- a/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts +++ b/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts @@ -38,7 +38,8 @@ export async function generateExtraThemingCssFiles(_dictionary: Dictionary, conf outputContent += `@media (prefers-color-scheme: dark) { ${cds100ThemedSource.replace(/^:root/, '.hds-theme-system, [data-hds-theme="system"]')} }\n\n`; // // this is the common part - outputContent += `${commonSource}\n\n`; + outputContent += getCssVariablesStalenessComment(); + outputContent += `${commonSource.replace(/^:root/, ':root, .hds-theme-default, .hds-theme-system, [data-hds-theme="default"], [data-hds-theme="system"]')}\n\n`; } // CSS file for `.class/[data]` selectors @@ -55,7 +56,8 @@ export async function generateExtraThemingCssFiles(_dictionary: Dictionary, conf outputContent += `${cds100ThemedSource.replace(/^:root/, '.hds-theme-dark, .hds-theme-cds-g100, [data-hds-theme="dark"], [data-hds-theme="cds-g100"]')}\n\n`; // // this is the common part - outputContent += `${commonSource}\n\n`; + outputContent += getCssVariablesStalenessComment(); + outputContent += `${commonSource.replace(/^:root/, ':root, .hds-theme-default, .hds-theme-light, .hds-theme-dark, .hds-theme-cds-g0, .hds-theme-cds-g10, .hds-theme-cds-g90, .hds-theme-cds-g100, [data-hds-theme="default"], [data-hds-theme="light"], [data-hds-theme="dark"], [data-hds-theme="cds-g0"], [data-hds-theme="cds-g10"], [data-hds-theme="cds-g90"], [data-hds-theme="cds-g100"]')}\n\n`; } // CSS file for combined `prefers-color-scheme` and CSS selectors in the same file @@ -75,7 +77,8 @@ export async function generateExtraThemingCssFiles(_dictionary: Dictionary, conf outputContent += `${cds100ThemedSource.replace(/^:root/, '.hds-theme-dark, .hds-theme-cds-g100, [data-hds-theme="dark"], [data-hds-theme="cds-g100"]')}\n\n`; // // this is the common part - outputContent += `${commonSource}\n\n`; + outputContent += getCssVariablesStalenessComment(); + outputContent += `${commonSource.replace(/^:root/, ':root, .hds-theme-default, .hds-theme-system, .hds-theme-light, .hds-theme-dark, .hds-theme-cds-g0, .hds-theme-cds-g10, .hds-theme-cds-g90, .hds-theme-cds-g100, [data-hds-theme="default"], [data-hds-theme="system"], [data-hds-theme="light"], [data-hds-theme="dark"], [data-hds-theme="cds-g0"], [data-hds-theme="cds-g10"], [data-hds-theme="cds-g90"], [data-hds-theme="cds-g100"]')}\n\n`; } // SCSS file for mixins @@ -100,8 +103,28 @@ export async function generateExtraThemingCssFiles(_dictionary: Dictionary, conf } 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, ''); } + +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; +} From ac1217c47abd134a7424c757d01789ddeb4742ed Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Fri, 14 Nov 2025 13:59:46 +0000 Subject: [PATCH 044/224] updated generation of extra theming CSS files to differentiate between `theme` and `mode` CSS selectors --- .../generateExtraThemingCssFiles.ts | 30 ++++++++++--------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts b/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts index 3069f21166e..6049dfb2c76 100644 --- a/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts +++ b/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts @@ -50,14 +50,14 @@ export async function generateExtraThemingCssFiles(_dictionary: Dictionary, conf outputContent += `${defaultThemedSource.replace(/^:root/, ':root, .hds-theme-default, [data-hds-theme="default"]')}\n\n`; // // these are the themed `carbonized` tokens - outputContent += `${cds0ThemedSource.replace(/^:root/, '.hds-theme-light, .hds-theme-cds-g0, [data-hds-theme="light"], [data-hds-theme="cds-g0"]')}\n\n`; - outputContent += `${cds10ThemedSource.replace(/^:root/, '.hds-theme-cds-g10, [data-hds-theme="cds-g10"]')}\n\n`; - outputContent += `${cds90ThemedSource.replace(/^:root/, '.hds-theme-cds-g90, [data-hds-theme="cds-g90"]')}\n\n`; - outputContent += `${cds100ThemedSource.replace(/^:root/, '.hds-theme-dark, .hds-theme-cds-g100, [data-hds-theme="dark"], [data-hds-theme="cds-g100"]')}\n\n`; + outputContent += `${cds0ThemedSource.replace(/^:root/, '.hds-theme-light, .hds-mode-cds-g0, [data-hds-theme="light"], [data-hds-mode="cds-g0"]')}\n\n`; + outputContent += `${cds100ThemedSource.replace(/^:root/, '.hds-theme-dark, .hds-mode-cds-g100, [data-hds-theme="dark"], [data-hds-mode="cds-g100"]')}\n\n`; + outputContent += `${cds10ThemedSource.replace(/^:root/, '.hds-mode-cds-g10, [data-hds-mode="cds-g10"]')}\n\n`; + outputContent += `${cds90ThemedSource.replace(/^:root/, '.hds-mode-cds-g90, [data-hds-mode="cds-g90"]')}\n\n`; // // this is the common part outputContent += getCssVariablesStalenessComment(); - outputContent += `${commonSource.replace(/^:root/, ':root, .hds-theme-default, .hds-theme-light, .hds-theme-dark, .hds-theme-cds-g0, .hds-theme-cds-g10, .hds-theme-cds-g90, .hds-theme-cds-g100, [data-hds-theme="default"], [data-hds-theme="light"], [data-hds-theme="dark"], [data-hds-theme="cds-g0"], [data-hds-theme="cds-g10"], [data-hds-theme="cds-g90"], [data-hds-theme="cds-g100"]')}\n\n`; + outputContent += `${commonSource.replace(/^:root/, ':root, .hds-theme-default, .hds-theme-light, .hds-theme-dark, .hds-mode-cds-g0, .hds-mode-cds-g10, .hds-mode-cds-g90, .hds-mode-cds-g100, [data-hds-theme="default"], [data-hds-theme="light"], [data-hds-theme="dark"], [data-hds-mode="cds-g0"], [data-hds-mode="cds-g10"], [data-hds-mode="cds-g90"], [data-hds-mode="cds-g100"]')}\n\n`; } // CSS file for combined `prefers-color-scheme` and CSS selectors in the same file @@ -71,24 +71,26 @@ export async function generateExtraThemingCssFiles(_dictionary: Dictionary, conf // note: we will revisit the `[class*=hds-theme-]` selector if we find that is too generic and there are cases where this is picking up other classes outputContent += `@media (prefers-color-scheme: light) { ${cds0ThemedSource.replace(/^:root/, '.hds-theme-system, [data-hds-theme="system"]')} }\n\n`; outputContent += `@media (prefers-color-scheme: dark) { ${cds100ThemedSource.replace(/^:root/, '.hds-theme-system, [data-hds-theme="system"]')} }\n\n`; - outputContent += `${cds0ThemedSource.replace(/^:root/, '.hds-theme-light, .hds-theme-cds-g0, [data-hds-theme="light"], [data-hds-theme="cds-g0"]')}\n\n`; - outputContent += `${cds10ThemedSource.replace(/^:root/, '.hds-theme-cds-g10, [data-hds-theme="cds-g10"]')}\n\n`; - outputContent += `${cds90ThemedSource.replace(/^:root/, '.hds-theme-cds-g90, [data-hds-theme="cds-g90"]')}\n\n`; - outputContent += `${cds100ThemedSource.replace(/^:root/, '.hds-theme-dark, .hds-theme-cds-g100, [data-hds-theme="dark"], [data-hds-theme="cds-g100"]')}\n\n`; + outputContent += `${cds0ThemedSource.replace(/^:root/, '.hds-theme-light, .hds-mode-cds-g0, [data-hds-theme="light"], [data-hds-mode="cds-g0"]')}\n\n`; + outputContent += `${cds100ThemedSource.replace(/^:root/, '.hds-theme-dark, .hds-mode-cds-g100, [data-hds-theme="dark"], [data-hds-mode="cds-g100"]')}\n\n`; + outputContent += `${cds10ThemedSource.replace(/^:root/, '.hds-mode-cds-g10, [data-hds-mode="cds-g10"]')}\n\n`; + outputContent += `${cds90ThemedSource.replace(/^:root/, '.hds-mode-cds-g90, [data-hds-mode="cds-g90"]')}\n\n`; // // this is the common part outputContent += getCssVariablesStalenessComment(); - outputContent += `${commonSource.replace(/^:root/, ':root, .hds-theme-default, .hds-theme-system, .hds-theme-light, .hds-theme-dark, .hds-theme-cds-g0, .hds-theme-cds-g10, .hds-theme-cds-g90, .hds-theme-cds-g100, [data-hds-theme="default"], [data-hds-theme="system"], [data-hds-theme="light"], [data-hds-theme="dark"], [data-hds-theme="cds-g0"], [data-hds-theme="cds-g10"], [data-hds-theme="cds-g90"], [data-hds-theme="cds-g100"]')}\n\n`; + 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, [data-hds-theme="default"], [data-hds-theme="system"], [data-hds-theme="light"], [data-hds-theme="dark"], [data-hds-mode="cds-g0"], [data-hds-mode="cds-g10"], [data-hds-mode="cds-g90"], [data-hds-mode="cds-g100"]')}\n\n`; } // SCSS file for mixins if (method === 'scss-mixins') { outputContent = `${header}\n\n`; outputContent += `@mixin hds-theme-default() { ${defaultThemedSource} }\n\n`; - outputContent += `@mixin hds-theme-cds0() { ${cds0ThemedSource} }\n\n`; - outputContent += `@mixin hds-theme-cds10() { ${cds10ThemedSource} }\n\n`; - outputContent += `@mixin hds-theme-cds90() { ${cds90ThemedSource} }\n\n`; - outputContent += `@mixin hds-theme-cds100() { ${cds100ThemedSource} }\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`; From 5039a0fde72fdbcdd931684a0102db7aee71186f Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Fri, 14 Nov 2025 14:09:36 +0000 Subject: [PATCH 045/224] re-generated tokens in `dist` folder --- .../with-combined-strategies/tokens.css | 61 +++++++++++++++---- .../with-css-selectors/tokens.css | 59 ++++++++++++++---- .../with-prefers-color-scheme/tokens.css | 25 +++++++- .../themed-tokens/with-scss-mixins/tokens.css | 30 +++++++-- 4 files changed, 144 insertions(+), 31 deletions(-) diff --git a/packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css index 0620a01ed99..db2ed050020 100644 --- a/packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css +++ b/packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css @@ -38,9 +38,9 @@ } .hds-theme-light, -.hds-theme-cds-g0, +.hds-mode-cds-g0, [data-hds-theme="light"], -[data-hds-theme="cds-g0"] { +[data-hds-mode="cds-g0"] { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #161616; --token-typography-font-weight-regular: 400; @@ -49,30 +49,30 @@ --token-typography-font-weight-bold: 600; } -.hds-theme-cds-g10, -[data-hds-theme="cds-g10"] { +.hds-theme-dark, +.hds-mode-cds-g100, +[data-hds-theme="dark"], +[data-hds-mode="cds-g100"] { --token-color-palette-neutral-0: #ffffff; - --token-color-foreground-primary: #161616; + --token-color-foreground-primary: #f4f4f4; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; } -.hds-theme-cds-g90, -[data-hds-theme="cds-g90"] { +.hds-mode-cds-g10, +[data-hds-mode="cds-g10"] { --token-color-palette-neutral-0: #ffffff; - --token-color-foreground-primary: #f4f4f4; + --token-color-foreground-primary: #161616; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; } -.hds-theme-dark, -.hds-theme-cds-g100, -[data-hds-theme="dark"], -[data-hds-theme="cds-g100"] { +.hds-mode-cds-g90, +[data-hds-mode="cds-g90"] { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #f4f4f4; --token-typography-font-weight-regular: 400; @@ -81,7 +81,42 @@ --token-typography-font-weight-bold: 600; } -:root { +/* + +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, +[data-hds-theme="default"], +[data-hds-theme="system"], +[data-hds-theme="light"], +[data-hds-theme="dark"], +[data-hds-mode="cds-g0"], +[data-hds-mode="cds-g10"], +[data-hds-mode="cds-g90"], +[data-hds-mode="cds-g100"] { --token-border-radius-x-small: 3px; --token-border-radius-small: 5px; --token-border-radius-medium: 6px; 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 index 1e7d7f9ddc2..b416e2eee2b 100644 --- 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 @@ -14,9 +14,9 @@ } .hds-theme-light, -.hds-theme-cds-g0, +.hds-mode-cds-g0, [data-hds-theme="light"], -[data-hds-theme="cds-g0"] { +[data-hds-mode="cds-g0"] { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #161616; --token-typography-font-weight-regular: 400; @@ -25,30 +25,30 @@ --token-typography-font-weight-bold: 600; } -.hds-theme-cds-g10, -[data-hds-theme="cds-g10"] { +.hds-theme-dark, +.hds-mode-cds-g100, +[data-hds-theme="dark"], +[data-hds-mode="cds-g100"] { --token-color-palette-neutral-0: #ffffff; - --token-color-foreground-primary: #161616; + --token-color-foreground-primary: #f4f4f4; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; } -.hds-theme-cds-g90, -[data-hds-theme="cds-g90"] { +.hds-mode-cds-g10, +[data-hds-mode="cds-g10"] { --token-color-palette-neutral-0: #ffffff; - --token-color-foreground-primary: #f4f4f4; + --token-color-foreground-primary: #161616; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; } -.hds-theme-dark, -.hds-theme-cds-g100, -[data-hds-theme="dark"], -[data-hds-theme="cds-g100"] { +.hds-mode-cds-g90, +[data-hds-mode="cds-g90"] { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #f4f4f4; --token-typography-font-weight-regular: 400; @@ -57,7 +57,40 @@ --token-typography-font-weight-bold: 600; } -:root { +/* + +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-light, +.hds-theme-dark, +.hds-mode-cds-g0, +.hds-mode-cds-g10, +.hds-mode-cds-g90, +.hds-mode-cds-g100, +[data-hds-theme="default"], +[data-hds-theme="light"], +[data-hds-theme="dark"], +[data-hds-mode="cds-g0"], +[data-hds-mode="cds-g10"], +[data-hds-mode="cds-g90"], +[data-hds-mode="cds-g100"] { --token-border-radius-x-small: 3px; --token-border-radius-small: 5px; --token-border-radius-medium: 6px; diff --git a/packages/tokens/dist/products/css/themed-tokens/with-prefers-color-scheme/tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-prefers-color-scheme/tokens.css index abaa33aa9f2..2f3b1361d23 100644 --- a/packages/tokens/dist/products/css/themed-tokens/with-prefers-color-scheme/tokens.css +++ b/packages/tokens/dist/products/css/themed-tokens/with-prefers-color-scheme/tokens.css @@ -37,7 +37,30 @@ } } -:root { +/* + +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, +[data-hds-theme="default"], +[data-hds-theme="system"] { --token-border-radius-x-small: 3px; --token-border-radius-small: 5px; --token-border-radius-medium: 6px; 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 index ba028da1a2a..fb3364875bc 100644 --- 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 @@ -13,7 +13,7 @@ } } -@mixin hds-theme-cds0() { +@mixin hds-theme-light() { :root { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #161616; @@ -24,7 +24,29 @@ } } -@mixin hds-theme-cds10() { +@mixin hds-theme-dark() { + :root { + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-primary: #f4f4f4; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 600; + } +} + +@mixin hds-mode-cds0() { + :root { + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-primary: #161616; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 600; + } +} + +@mixin hds-mode-cds10() { :root { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #161616; @@ -35,7 +57,7 @@ } } -@mixin hds-theme-cds90() { +@mixin hds-mode-cds90() { :root { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #f4f4f4; @@ -46,7 +68,7 @@ } } -@mixin hds-theme-cds100() { +@mixin hds-mode-cds100() { :root { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #f4f4f4; From 5108db546c0cbc53e5eea7c7a80044e845e16ec5 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Mon, 17 Nov 2025 19:48:10 +0000 Subject: [PATCH 046/224] removed `[data-hds-theme]` CSS selectors for simplicity MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../generateExtraThemingCssFiles.ts | 38 +++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts b/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts index 6049dfb2c76..d828d073496 100644 --- a/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts +++ b/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts @@ -31,33 +31,33 @@ export async function generateExtraThemingCssFiles(_dictionary: Dictionary, conf outputContent = `${header}\n\n`; // // this is the fallback to the `default` mode (standard HDS) - outputContent += `${defaultThemedSource.replace(/^:root/, ':root, .hds-theme-default, [data-hds-theme="default"]')}\n\n`; + 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, [data-hds-theme="system"]')} }\n\n`; - outputContent += `@media (prefers-color-scheme: dark) { ${cds100ThemedSource.replace(/^:root/, '.hds-theme-system, [data-hds-theme="system"]')} }\n\n`; + 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`; // // this is the common part outputContent += getCssVariablesStalenessComment(); - outputContent += `${commonSource.replace(/^:root/, ':root, .hds-theme-default, .hds-theme-system, [data-hds-theme="default"], [data-hds-theme="system"]')}\n\n`; + outputContent += `${commonSource.replace(/^:root/, ':root, .hds-theme-default, .hds-theme-system')}\n\n`; } - // CSS file for `.class/[data]` selectors + // CSS file for `.class` selectors if (method === 'css-selectors') { outputContent = `${header}\n\n`; // // this is the fallback to the `default` mode (standard HDS) - outputContent += `${defaultThemedSource.replace(/^:root/, ':root, .hds-theme-default, [data-hds-theme="default"]')}\n\n`; + outputContent += `${defaultThemedSource.replace(/^:root/, ':root, .hds-theme-default')}\n\n`; // // these are the themed `carbonized` tokens - outputContent += `${cds0ThemedSource.replace(/^:root/, '.hds-theme-light, .hds-mode-cds-g0, [data-hds-theme="light"], [data-hds-mode="cds-g0"]')}\n\n`; - outputContent += `${cds100ThemedSource.replace(/^:root/, '.hds-theme-dark, .hds-mode-cds-g100, [data-hds-theme="dark"], [data-hds-mode="cds-g100"]')}\n\n`; - outputContent += `${cds10ThemedSource.replace(/^:root/, '.hds-mode-cds-g10, [data-hds-mode="cds-g10"]')}\n\n`; - outputContent += `${cds90ThemedSource.replace(/^:root/, '.hds-mode-cds-g90, [data-hds-mode="cds-g90"]')}\n\n`; + 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`; + 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(); - outputContent += `${commonSource.replace(/^:root/, ':root, .hds-theme-default, .hds-theme-light, .hds-theme-dark, .hds-mode-cds-g0, .hds-mode-cds-g10, .hds-mode-cds-g90, .hds-mode-cds-g100, [data-hds-theme="default"], [data-hds-theme="light"], [data-hds-theme="dark"], [data-hds-mode="cds-g0"], [data-hds-mode="cds-g10"], [data-hds-mode="cds-g90"], [data-hds-mode="cds-g100"]')}\n\n`; + outputContent += `${commonSource.replace(/^:root/, ':root, .hds-theme-default, .hds-theme-light, .hds-theme-dark, .hds-mode-cds-g0, .hds-mode-cds-g10, .hds-mode-cds-g90, .hds-mode-cds-g100')}\n\n`; } // CSS file for combined `prefers-color-scheme` and CSS selectors in the same file @@ -65,20 +65,20 @@ export async function generateExtraThemingCssFiles(_dictionary: Dictionary, conf outputContent = `${header}\n\n`; // // this is the fallback to the `default` mode (standard HDS) - outputContent += `${defaultThemedSource.replace(/^:root/, ':root, .hds-theme-default, [data-hds-theme="default"]')}\n\n`; + outputContent += `${defaultThemedSource.replace(/^:root/, ':root, .hds-theme-default')}\n\n`; // // these are the themed `carbonized` tokens // note: we will revisit the `[class*=hds-theme-]` selector if we find that is too generic and there are cases where this is picking up other classes - outputContent += `@media (prefers-color-scheme: light) { ${cds0ThemedSource.replace(/^:root/, '.hds-theme-system, [data-hds-theme="system"]')} }\n\n`; - outputContent += `@media (prefers-color-scheme: dark) { ${cds100ThemedSource.replace(/^:root/, '.hds-theme-system, [data-hds-theme="system"]')} }\n\n`; - outputContent += `${cds0ThemedSource.replace(/^:root/, '.hds-theme-light, .hds-mode-cds-g0, [data-hds-theme="light"], [data-hds-mode="cds-g0"]')}\n\n`; - outputContent += `${cds100ThemedSource.replace(/^:root/, '.hds-theme-dark, .hds-mode-cds-g100, [data-hds-theme="dark"], [data-hds-mode="cds-g100"]')}\n\n`; - outputContent += `${cds10ThemedSource.replace(/^:root/, '.hds-mode-cds-g10, [data-hds-mode="cds-g10"]')}\n\n`; - outputContent += `${cds90ThemedSource.replace(/^:root/, '.hds-mode-cds-g90, [data-hds-mode="cds-g90"]')}\n\n`; + 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`; + 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`; + 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(); - 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, [data-hds-theme="default"], [data-hds-theme="system"], [data-hds-theme="light"], [data-hds-theme="dark"], [data-hds-mode="cds-g0"], [data-hds-mode="cds-g10"], [data-hds-mode="cds-g90"], [data-hds-mode="cds-g100"]')}\n\n`; + 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 From 20b962dbeac8778bf916679cc718281421e3069c Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Mon, 17 Nov 2025 19:49:04 +0000 Subject: [PATCH 047/224] re-generated tokens in `dist` folder --- .../with-combined-strategies/tokens.css | 33 +++++-------------- .../with-css-selectors/tokens.css | 26 ++++----------- .../with-prefers-color-scheme/tokens.css | 13 +++----- 3 files changed, 18 insertions(+), 54 deletions(-) diff --git a/packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css index db2ed050020..929cdb3d1b2 100644 --- a/packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css +++ b/packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css @@ -3,8 +3,7 @@ */ :root, -.hds-theme-default, -[data-hds-theme="default"] { +.hds-theme-default { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #ffffff; --token-typography-font-weight-regular: 400; @@ -14,8 +13,7 @@ } @media (prefers-color-scheme: light) { - .hds-theme-system, - [data-hds-theme="system"] { + .hds-theme-system { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #161616; --token-typography-font-weight-regular: 400; @@ -26,8 +24,7 @@ } @media (prefers-color-scheme: dark) { - .hds-theme-system, - [data-hds-theme="system"] { + .hds-theme-system { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #f4f4f4; --token-typography-font-weight-regular: 400; @@ -38,9 +35,7 @@ } .hds-theme-light, -.hds-mode-cds-g0, -[data-hds-theme="light"], -[data-hds-mode="cds-g0"] { +.hds-mode-cds-g0 { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #161616; --token-typography-font-weight-regular: 400; @@ -50,9 +45,7 @@ } .hds-theme-dark, -.hds-mode-cds-g100, -[data-hds-theme="dark"], -[data-hds-mode="cds-g100"] { +.hds-mode-cds-g100 { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #f4f4f4; --token-typography-font-weight-regular: 400; @@ -61,8 +54,7 @@ --token-typography-font-weight-bold: 600; } -.hds-mode-cds-g10, -[data-hds-mode="cds-g10"] { +.hds-mode-cds-g10 { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #161616; --token-typography-font-weight-regular: 400; @@ -71,8 +63,7 @@ --token-typography-font-weight-bold: 600; } -.hds-mode-cds-g90, -[data-hds-mode="cds-g90"] { +.hds-mode-cds-g90 { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #f4f4f4; --token-typography-font-weight-regular: 400; @@ -108,15 +99,7 @@ we redeclare each "computed" variable in every theme scope where its "source" va .hds-mode-cds-g0, .hds-mode-cds-g10, .hds-mode-cds-g90, -.hds-mode-cds-g100, -[data-hds-theme="default"], -[data-hds-theme="system"], -[data-hds-theme="light"], -[data-hds-theme="dark"], -[data-hds-mode="cds-g0"], -[data-hds-mode="cds-g10"], -[data-hds-mode="cds-g90"], -[data-hds-mode="cds-g100"] { +.hds-mode-cds-g100 { --token-border-radius-x-small: 3px; --token-border-radius-small: 5px; --token-border-radius-medium: 6px; 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 index b416e2eee2b..26d07f0d76c 100644 --- 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 @@ -3,8 +3,7 @@ */ :root, -.hds-theme-default, -[data-hds-theme="default"] { +.hds-theme-default { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #ffffff; --token-typography-font-weight-regular: 400; @@ -14,9 +13,7 @@ } .hds-theme-light, -.hds-mode-cds-g0, -[data-hds-theme="light"], -[data-hds-mode="cds-g0"] { +.hds-mode-cds-g0 { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #161616; --token-typography-font-weight-regular: 400; @@ -26,9 +23,7 @@ } .hds-theme-dark, -.hds-mode-cds-g100, -[data-hds-theme="dark"], -[data-hds-mode="cds-g100"] { +.hds-mode-cds-g100 { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #f4f4f4; --token-typography-font-weight-regular: 400; @@ -37,8 +32,7 @@ --token-typography-font-weight-bold: 600; } -.hds-mode-cds-g10, -[data-hds-mode="cds-g10"] { +.hds-mode-cds-g10 { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #161616; --token-typography-font-weight-regular: 400; @@ -47,8 +41,7 @@ --token-typography-font-weight-bold: 600; } -.hds-mode-cds-g90, -[data-hds-mode="cds-g90"] { +.hds-mode-cds-g90 { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #f4f4f4; --token-typography-font-weight-regular: 400; @@ -83,14 +76,7 @@ we redeclare each "computed" variable in every theme scope where its "source" va .hds-mode-cds-g0, .hds-mode-cds-g10, .hds-mode-cds-g90, -.hds-mode-cds-g100, -[data-hds-theme="default"], -[data-hds-theme="light"], -[data-hds-theme="dark"], -[data-hds-mode="cds-g0"], -[data-hds-mode="cds-g10"], -[data-hds-mode="cds-g90"], -[data-hds-mode="cds-g100"] { +.hds-mode-cds-g100 { --token-border-radius-x-small: 3px; --token-border-radius-small: 5px; --token-border-radius-medium: 6px; diff --git a/packages/tokens/dist/products/css/themed-tokens/with-prefers-color-scheme/tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-prefers-color-scheme/tokens.css index 2f3b1361d23..66c9316a188 100644 --- a/packages/tokens/dist/products/css/themed-tokens/with-prefers-color-scheme/tokens.css +++ b/packages/tokens/dist/products/css/themed-tokens/with-prefers-color-scheme/tokens.css @@ -3,8 +3,7 @@ */ :root, -.hds-theme-default, -[data-hds-theme="default"] { +.hds-theme-default { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #ffffff; --token-typography-font-weight-regular: 400; @@ -14,8 +13,7 @@ } @media (prefers-color-scheme: light) { - .hds-theme-system, - [data-hds-theme="system"] { + .hds-theme-system { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #161616; --token-typography-font-weight-regular: 400; @@ -26,8 +24,7 @@ } @media (prefers-color-scheme: dark) { - .hds-theme-system, - [data-hds-theme="system"] { + .hds-theme-system { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #f4f4f4; --token-typography-font-weight-regular: 400; @@ -58,9 +55,7 @@ we redeclare each "computed" variable in every theme scope where its "source" va :root, .hds-theme-default, -.hds-theme-system, -[data-hds-theme="default"], -[data-hds-theme="system"] { +.hds-theme-system { --token-border-radius-x-small: 3px; --token-border-radius-small: 5px; --token-border-radius-medium: 6px; From f9c268b8edf23be228bf9d3babd1519d76ca181c Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 18 Nov 2025 13:13:49 +0000 Subject: [PATCH 048/224] =?UTF-8?q?updated=20logic=20for=20generation=20of?= =?UTF-8?q?=20extra=20=E2=80=9Cthemed=E2=80=9D=20CSS=20files=20(removed=20?= =?UTF-8?q?`prefers-color-scheme`-only=20case,=20generalized=20`css-select?= =?UTF-8?q?ors`)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../generateExtraThemingCssFiles.ts | 82 ++++++++----------- 1 file changed, 34 insertions(+), 48 deletions(-) diff --git a/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts b/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts index d828d073496..f87112d3810 100644 --- a/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts +++ b/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts @@ -20,70 +20,56 @@ export async function generateExtraThemingCssFiles(_dictionary: Dictionary, conf const header = await fileHeader({}); - const methods = ['prefers-color-scheme', 'css-selectors', 'combined-strategies', 'scss-mixins']; + 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 `prefers-color-scheme` (note: we use `cds-g0` for `light` and `cds-g100` for `dark` - if (method === 'prefers-color-scheme') { - outputContent = `${header}\n\n`; - // - // this is the fallback to the `default` mode (standard HDS) - 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`; - // - // this is the common part - outputContent += getCssVariablesStalenessComment(); - outputContent += `${commonSource.replace(/^:root/, ':root, .hds-theme-default, .hds-theme-system')}\n\n`; - } + // CSS file for combined `system/light/dark` themes in the same file (using `.class` selectors) + if (method.startsWith('css-selectors')) { - // CSS file for `.class` selectors - if (method === 'css-selectors') { - outputContent = `${header}\n\n`; - // - // this is the fallback to the `default` mode (standard HDS) - outputContent += `${defaultThemedSource.replace(/^:root/, ':root, .hds-theme-default')}\n\n`; - // - // these are the themed `carbonized` tokens - 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`; - 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(); - outputContent += `${commonSource.replace(/^:root/, ':root, .hds-theme-default, .hds-theme-light, .hds-theme-dark, .hds-mode-cds-g0, .hds-mode-cds-g10, .hds-mode-cds-g90, .hds-mode-cds-g100')}\n\n`; - } + // 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`; + } - // CSS file for combined `prefers-color-scheme` and CSS selectors in the same file - if (method === 'combined-strategies') { - outputContent = `${header}\n\n`; - // - // this is the fallback to the `default` mode (standard HDS) - outputContent += `${defaultThemedSource.replace(/^:root/, ':root, .hds-theme-default')}\n\n`; - // // these are the themed `carbonized` tokens - // note: we will revisit the `[class*=hds-theme-]` selector if we find that is too generic and there are cases where this is picking up other classes 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`; - 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`; - outputContent += `${cds10ThemedSource.replace(/^:root/, '.hds-mode-cds-g10')}\n\n`; - outputContent += `${cds90ThemedSource.replace(/^:root/, '.hds-mode-cds-g90')}\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(); - 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`; + 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') { - outputContent = `${header}\n\n`; outputContent += `@mixin hds-theme-default() { ${defaultThemedSource} }\n\n`; outputContent += `@mixin hds-theme-light() { ${cds0ThemedSource} }\n\n`; outputContent += `@mixin hds-theme-dark() { ${cds100ThemedSource} }\n\n`; From 5c338f4125a88f0bfd9132dcc2e0500c3a0f5185 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 18 Nov 2025 13:20:42 +0000 Subject: [PATCH 049/224] re-generated tokens in `dist` folder --- .../tokens.css | 0 .../tokens.css | 22 +++++++- .../with-css-selectors/tokens.css | 53 +++++++++---------- 3 files changed, 46 insertions(+), 29 deletions(-) rename packages/tokens/dist/products/css/themed-tokens/{with-combined-strategies => with-css-selectors--advanced}/tokens.css (100%) rename packages/tokens/dist/products/css/themed-tokens/{with-prefers-color-scheme => with-css-selectors--migration}/tokens.css (98%) diff --git a/packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-css-selectors--advanced/tokens.css similarity index 100% rename from packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css rename to packages/tokens/dist/products/css/themed-tokens/with-css-selectors--advanced/tokens.css diff --git a/packages/tokens/dist/products/css/themed-tokens/with-prefers-color-scheme/tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-css-selectors--migration/tokens.css similarity index 98% rename from packages/tokens/dist/products/css/themed-tokens/with-prefers-color-scheme/tokens.css rename to packages/tokens/dist/products/css/themed-tokens/with-css-selectors--migration/tokens.css index 66c9316a188..16f138de40d 100644 --- a/packages/tokens/dist/products/css/themed-tokens/with-prefers-color-scheme/tokens.css +++ b/packages/tokens/dist/products/css/themed-tokens/with-css-selectors--migration/tokens.css @@ -34,6 +34,24 @@ } } +.hds-theme-light { + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-primary: #161616; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 600; +} + +.hds-theme-dark { + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-primary: #f4f4f4; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 600; +} + /* WHY ARE ALL "COMPUTED" CSS VARIABLES REDECLARED IN EACH THEME SCOPE? @@ -55,7 +73,9 @@ we redeclare each "computed" variable in every theme scope where its "source" va :root, .hds-theme-default, -.hds-theme-system { +.hds-theme-system, +.hds-theme-light, +.hds-theme-dark { --token-border-radius-x-small: 3px; --token-border-radius-small: 5px; --token-border-radius-medium: 6px; 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 index 26d07f0d76c..7ec79b3bb62 100644 --- 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 @@ -2,18 +2,7 @@ * Do not edit directly, this file was auto-generated. */ -:root, -.hds-theme-default { - --token-color-palette-neutral-0: #ffffff; - --token-color-foreground-primary: #ffffff; - --token-typography-font-weight-regular: 400; - --token-typography-font-weight-medium: 500; - --token-typography-font-weight-semibold: 600; - --token-typography-font-weight-bold: 700; -} - -.hds-theme-light, -.hds-mode-cds-g0 { +:root { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #161616; --token-typography-font-weight-regular: 400; @@ -22,17 +11,29 @@ --token-typography-font-weight-bold: 600; } -.hds-theme-dark, -.hds-mode-cds-g100 { - --token-color-palette-neutral-0: #ffffff; - --token-color-foreground-primary: #f4f4f4; - --token-typography-font-weight-regular: 400; - --token-typography-font-weight-medium: 400; - --token-typography-font-weight-semibold: 600; - --token-typography-font-weight-bold: 600; +@media (prefers-color-scheme: light) { + .hds-theme-system { + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-primary: #161616; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 600; + } +} + +@media (prefers-color-scheme: dark) { + .hds-theme-system { + --token-color-palette-neutral-0: #ffffff; + --token-color-foreground-primary: #f4f4f4; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 400; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 600; + } } -.hds-mode-cds-g10 { +.hds-theme-light { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #161616; --token-typography-font-weight-regular: 400; @@ -41,7 +42,7 @@ --token-typography-font-weight-bold: 600; } -.hds-mode-cds-g90 { +.hds-theme-dark { --token-color-palette-neutral-0: #ffffff; --token-color-foreground-primary: #f4f4f4; --token-typography-font-weight-regular: 400; @@ -70,13 +71,9 @@ we redeclare each "computed" variable in every theme scope where its "source" va */ :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 { +.hds-theme-dark { --token-border-radius-x-small: 3px; --token-border-radius-small: 5px; --token-border-radius-medium: 6px; From 11877e7ef8077bfc9f05e142cdf2ae5e07586aba Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 20 Nov 2025 09:41:06 +0000 Subject: [PATCH 050/224] small tweakings before code review --- .../build-parts/generateExtraThemingCssFiles.ts | 6 ++++-- .../build-parts/getStyleDictionaryConfig.ts | 13 ++----------- packages/tokens/scripts/build.ts | 14 +++++++------- 3 files changed, 13 insertions(+), 20 deletions(-) diff --git a/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts b/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts index f87112d3810..d4a68767fb9 100644 --- a/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts +++ b/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts @@ -20,6 +20,7 @@ export async function generateExtraThemingCssFiles(_dictionary: Dictionary, conf 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) { @@ -70,6 +71,7 @@ export async function generateExtraThemingCssFiles(_dictionary: Dictionary, conf // 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`; @@ -77,12 +79,12 @@ export async function generateExtraThemingCssFiles(_dictionary: Dictionary, conf 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: 'css', tabWidth: 2, }); + const outputTokensCss = await prettier.format(outputContent, { parser: 'scss', tabWidth: 2, }); const outputFolder = `${config.buildPath}themed-tokens/with-${method}/`; await fs.ensureDir(outputFolder); diff --git a/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts index 9fdb03a8cdd..87090a3e008 100644 --- a/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts +++ b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts @@ -26,15 +26,6 @@ const excludePrivateTokens = (token: DesignToken) => { return !token.private; } -// const getFilterForMode = (mode: Mode) => { -// // this function returns a function to filter based on -// return function (token: DesignToken) { -// // TODO! -// console.log('xxx filter for mode', mode); -// return !token.private; -// }; -// } - export function getStyleDictionaryConfig({ target, mode }: { target: Target, mode?: Mode }): Config { // ----------------------- @@ -67,7 +58,7 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod destination: `themed-tokens/with-root-selector/${mode}/common-tokens.css`, format: 'css/variables', options: { - // TODO understand if is better to output references or not for the "common" definitions (probably yes) + // TODO understand if is better to output references or not for the "common" definitions (almost certainly no) - see: https://hashicorp.atlassian.net/browse/HDS-5669 outputReferences: false, // outputReferences: (token, { dictionary, usesDtcg }) => { // // `dictionary` contains `allTokens`, `tokens`, `tokenMap`, `unfilteredTokens`, `unfilteredAllTokens` and `unfilteredTokenMap` props @@ -85,7 +76,7 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod destination: `themed-tokens/with-root-selector/${mode}/themed-tokens.css`, format: 'css/variables', options: { - // TODO understand if is better to output references or not for the "themed" definitions (almost certainly yes) + // TODO understand if is better to output references or not for the "themed" definitions (almost certainly no) - see: https://hashicorp.atlassian.net/browse/HDS-5669 outputReferences: false, // outputReferences: (token, { dictionary, usesDtcg }) => { // // `dictionary` contains `allTokens`, `tokens`, `tokenMap`, `unfilteredTokens`, `unfilteredAllTokens` and `unfilteredTokenMap` props diff --git a/packages/tokens/scripts/build.ts b/packages/tokens/scripts/build.ts index a3a47d14871..b4943102100 100644 --- a/packages/tokens/scripts/build.ts +++ b/packages/tokens/scripts/build.ts @@ -44,7 +44,7 @@ for (const mode of modes) { if (mode in slice.$modes) { slice.$value = slice.$modes[mode]; } else { - // TODO! decide if we want to throw here (and test if it works, by removing a value from one of the test files) + // TODO! decide if we want to throw here (and test if it works, by removing a value from one of the test files) - see: https://hashicorp.atlassian.net/browse/HDS-5668 console.error(`❌ ERROR - Found themed token without '${mode}' value:`, JSON.stringify(slice, null, 2)); } } else { @@ -73,14 +73,14 @@ StyleDictionary.registerTransform({ isThemeable = true; } - // TODO! understand how we can make this themeable using `usesReferences`/`getReferences` + // TODO! understand how we can make this themeable using `usesReferences`/`getReferences` - see: https://hashicorp.atlassian.net/browse/HDS-5667 // if (token.key === "{typography.display-500.font-family}") { - // console.log('usesReferences', usesReferences(token.original.$value)); - // const refs = getReferences(token.original.$value, StyleDictionaryInstance.tokenMap); - // console.log('refs', refs); - // } + // console.log('usesReferences', usesReferences(token.original.$value)); + // const refs = getReferences(token.original.$value, StyleDictionaryInstance.tokenMap); + // console.log('refs', refs); + // } - // TODO understand if we really need this to split themeable vs non-themeable tokens + // TODO understand if we really need this to split themeable vs non-themeable tokens - see: https://hashicorp.atlassian.net/browse/HDS-5667 // if (usesReferences(token.original.$value)) { // const refs = getReferences(token.original.$value, StyleDictionaryInstance.tokenMap); // isThemeable = refs.some((ref) => '$modes' in ref); From f8caa0f11d6b63deaa8c88fec16d043e1e68cfd0 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 20 Nov 2025 09:43:18 +0000 Subject: [PATCH 051/224] renamed `generateExtra***` to `generate***` --- ...ThemingCssFiles.ts => generateThemingCssFiles.ts} | 2 +- ...emingDocsFiles.ts => generateThemingDocsFiles.ts} | 2 +- .../scripts/build-parts/getStyleDictionaryConfig.ts | 4 ++-- packages/tokens/scripts/build.ts | 12 ++++++------ 4 files changed, 10 insertions(+), 10 deletions(-) rename packages/tokens/scripts/build-parts/{generateExtraThemingCssFiles.ts => generateThemingCssFiles.ts} (98%) rename packages/tokens/scripts/build-parts/{generateExtraThemingDocsFiles.ts => generateThemingDocsFiles.ts} (92%) diff --git a/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts b/packages/tokens/scripts/build-parts/generateThemingCssFiles.ts similarity index 98% rename from packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts rename to packages/tokens/scripts/build-parts/generateThemingCssFiles.ts index d4a68767fb9..91df0735960 100644 --- a/packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts +++ b/packages/tokens/scripts/build-parts/generateThemingCssFiles.ts @@ -9,7 +9,7 @@ import prettier from 'prettier'; import type { Dictionary, PlatformConfig } from 'style-dictionary'; import { fileHeader } from 'style-dictionary/utils'; -export async function generateExtraThemingCssFiles(_dictionary: Dictionary, config: PlatformConfig): Promise { +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'); diff --git a/packages/tokens/scripts/build-parts/generateExtraThemingDocsFiles.ts b/packages/tokens/scripts/build-parts/generateThemingDocsFiles.ts similarity index 92% rename from packages/tokens/scripts/build-parts/generateExtraThemingDocsFiles.ts rename to packages/tokens/scripts/build-parts/generateThemingDocsFiles.ts index 1cc469870a6..aa21f8f8664 100644 --- a/packages/tokens/scripts/build-parts/generateExtraThemingDocsFiles.ts +++ b/packages/tokens/scripts/build-parts/generateThemingDocsFiles.ts @@ -8,7 +8,7 @@ import fs from 'fs-extra'; import type { Dictionary, PlatformConfig } from 'style-dictionary'; import type { DesignToken } from 'style-dictionary/types'; -export async function generateExtraThemingDocsFiles(_dictionary: Dictionary, config: PlatformConfig): Promise { +export async function generateThemingDocsFiles(_dictionary: Dictionary, config: PlatformConfig): Promise { const defaultThemedTokens = await getJsonThemedObjectFromFile(config, 'default'); const cds0ThemedTokens = await getJsonThemedObjectFromFile(config, 'cds-g0'); diff --git a/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts index 87090a3e008..88faba5fa4e 100644 --- a/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts +++ b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts @@ -138,7 +138,7 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod filter: excludePrivateTokens, } ], - actions: ['generate-css-helpers', 'generate-extra-theming-css-files'], + actions: ['generate-css-helpers', 'generate-theming-css-files'], }, 'docs/json': { buildPath: 'dist/docs/products/', @@ -152,7 +152,7 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod filter: excludePrivateTokens, } ], - actions: ['generate-extra-theming-docs-files'], + actions: ['generate-theming-docs-files'], } } }; diff --git a/packages/tokens/scripts/build.ts b/packages/tokens/scripts/build.ts index b4943102100..95a823a1a8b 100644 --- a/packages/tokens/scripts/build.ts +++ b/packages/tokens/scripts/build.ts @@ -17,8 +17,8 @@ import { cloneDeep } from 'lodash-es'; import { targets, modes, getStyleDictionaryConfig } from './build-parts/getStyleDictionaryConfig.ts'; import { generateCssHelpers } from './build-parts/generateCssHelpers.ts'; -import { generateExtraThemingCssFiles } from './build-parts/generateExtraThemingCssFiles.ts'; -import { generateExtraThemingDocsFiles } from './build-parts/generateExtraThemingDocsFiles.ts'; +import { generateThemingCssFiles } from './build-parts/generateThemingCssFiles.ts'; +import { generateThemingDocsFiles } from './build-parts/generateThemingDocsFiles.ts'; // SCRIPT CONFIG @@ -294,14 +294,14 @@ StyleDictionary.registerAction({ }); StyleDictionary.registerAction({ - name: 'generate-extra-theming-css-files', - do: generateExtraThemingCssFiles, + name: 'generate-theming-css-files', + do: generateThemingCssFiles, undo: () => {} }); StyleDictionary.registerAction({ - name: 'generate-extra-theming-docs-files', - do: generateExtraThemingDocsFiles, + name: 'generate-theming-docs-files', + do: generateThemingDocsFiles, undo: () => {} }); From 9e45b40b5935e19c8dd260bd80e94d3c57372476 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Fri, 21 Nov 2025 15:17:38 +0000 Subject: [PATCH 052/224] updated comment --- packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts index 88faba5fa4e..683abb101fb 100644 --- a/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts +++ b/packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts @@ -170,7 +170,7 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod `src/carbon-extracted/**/*.json`, `src/global/**/*.json`, `src/products/shared/**/*.json`, - // just uncomment the line below to include overrides for 'devdot' tokens + // custom overrides for 'devdot' tokens `src/devdot/**/*.json` ], 'platforms': { From 4e131af5d1bb5c5593aeaf0d08a60014006ab903 Mon Sep 17 00:00:00 2001 From: Alex Date: Wed, 24 Sep 2025 16:21:59 +0100 Subject: [PATCH 053/224] Draft a custom plugin to compile the themed SCSS --- packages/components/rollup.config.mjs | 26 +++++++++++++++++++ ...-system-components-with-css-selectors.scss | 12 +++++++++ 2 files changed, 38 insertions(+) create mode 100644 packages/components/src/styles/@hashicorp/design-system-components-with-css-selectors.scss diff --git a/packages/components/rollup.config.mjs b/packages/components/rollup.config.mjs index 9b83a1c23c6..5fbef1b94af 100644 --- a/packages/components/rollup.config.mjs +++ b/packages/components/rollup.config.mjs @@ -9,6 +9,7 @@ import copy from 'rollup-plugin-copy'; import scss from 'rollup-plugin-scss'; import process from 'process'; import path from 'node:path'; +import * as sass from 'sass'; const addon = new Addon({ srcDir: 'src', @@ -61,6 +62,31 @@ const plugins = [ fileName: 'styles/@hashicorp/design-system-power-select-overrides.css', }), + // Custom plugin to compile the themed SCSS with different include paths + { + name: 'compile-themed-scss', + generateBundle() { + // Compile the themed SCSS file + try { + const result = sass.compile('src/styles/@hashicorp/design-system-components-with-css-selectors.scss', { + // equivalent to includePaths in rollup-plugin-scss + loadPaths: [ + 'node_modules/@hashicorp/design-system-tokens/dist/products/css/themed-tokens/with-css-selectors', + ], + }); + + // Emit the compiled CSS + this.emitFile({ + type: 'asset', + fileName: 'styles/@hashicorp/design-system-components-with-css-selectors.css', + source: result.css, + }); + } catch (error) { + this.error(`Failed to compile themed SCSS: ${error.message}`); + } + }, + }, + // Ensure that standalone .hbs files are properly integrated as Javascript. addon.hbs(), diff --git a/packages/components/src/styles/@hashicorp/design-system-components-with-css-selectors.scss b/packages/components/src/styles/@hashicorp/design-system-components-with-css-selectors.scss new file mode 100644 index 00000000000..4c30f8588da --- /dev/null +++ b/packages/components/src/styles/@hashicorp/design-system-components-with-css-selectors.scss @@ -0,0 +1,12 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +// this file comes from packages/tokens/dist/products/css/tokens.css +@use "tokens"; +@use "../mixins/screen-reader-only" as *; + +.sr-only { + @include screen-reader-only(); +} From 1ced1d2ab9435f5f04798113bd7c49d54e4bfb0f Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Fri, 26 Sep 2025 22:00:43 +0100 Subject: [PATCH 054/224] updated SCSS files organization for components (split common part) + added custom source files for theming + updated rollup config to process different files --- packages/components/rollup.config.mjs | 55 ++++++++++++---- ...components-theming-with-css-selectors.scss | 22 +++++++ ...nts-theming-with-prefers-color-scheme.scss | 22 +++++++ ...-system-components-with-css-selectors.scss | 12 ---- .../@hashicorp/design-system-components.scss | 65 ++++--------------- .../src/styles/components/index.scss | 52 +++++++++++++++ 6 files changed, 149 insertions(+), 79 deletions(-) create mode 100644 packages/components/src/styles/@hashicorp/design-system-components-theming-with-css-selectors.scss create mode 100644 packages/components/src/styles/@hashicorp/design-system-components-theming-with-prefers-color-scheme.scss delete mode 100644 packages/components/src/styles/@hashicorp/design-system-components-with-css-selectors.scss create mode 100644 packages/components/src/styles/components/index.scss diff --git a/packages/components/rollup.config.mjs b/packages/components/rollup.config.mjs index 5fbef1b94af..70b4fa29594 100644 --- a/packages/components/rollup.config.mjs +++ b/packages/components/rollup.config.mjs @@ -53,36 +53,65 @@ const plugins = [ scss({ fileName: 'styles/@hashicorp/design-system-components.css', - includePaths: [ - 'node_modules/@hashicorp/design-system-tokens/dist/products/css', - ], + includePaths: ['node_modules/@hashicorp/design-system-tokens/dist'], }), scss({ fileName: 'styles/@hashicorp/design-system-power-select-overrides.css', }), - // Custom plugin to compile the themed SCSS with different include paths + // Custom plugins to compile the "themed" SCSS files { - name: 'compile-themed-scss', + name: 'compile-scss-themed-with-css-selectors', generateBundle() { // Compile the themed SCSS file try { - const result = sass.compile('src/styles/@hashicorp/design-system-components-with-css-selectors.scss', { - // equivalent to includePaths in rollup-plugin-scss - loadPaths: [ - 'node_modules/@hashicorp/design-system-tokens/dist/products/css/themed-tokens/with-css-selectors', - ], + const result = sass.compile( + 'src/styles/@hashicorp/design-system-components-theming-with-css-selectors.scss', + { + // equivalent to includePaths in rollup-plugin-scss + loadPaths: ['node_modules/@hashicorp/design-system-tokens/dist'], + } + ); + + // Emit the compiled CSS + this.emitFile({ + type: 'asset', + fileName: + 'styles/@hashicorp/design-system-components-theming-with-css-selectors.css', + source: result.css, }); - + } catch (error) { + this.error( + `Failed to compile themed ("with CSS selectors") SCSS: ${error.message}` + ); + } + }, + }, + { + name: 'compile-scss-themed-with-prefers-color-scheme', + generateBundle() { + // Compile the themed SCSS file + try { + const result = sass.compile( + 'src/styles/@hashicorp/design-system-components-theming-with-prefers-color-scheme.scss', + { + // equivalent to includePaths in rollup-plugin-scss + loadPaths: ['node_modules/@hashicorp/design-system-tokens/dist'], + } + ); + // Emit the compiled CSS this.emitFile({ type: 'asset', - fileName: 'styles/@hashicorp/design-system-components-with-css-selectors.css', + fileName: + 'styles/@hashicorp/design-system-components-theming-with-prefers-color-scheme.css', source: result.css, }); } catch (error) { - this.error(`Failed to compile themed SCSS: ${error.message}`); + this.error( + `Failed to compile themed ("with CSS selectors") SCSS: ${error.message}` + ); } }, }, diff --git a/packages/components/src/styles/@hashicorp/design-system-components-theming-with-css-selectors.scss b/packages/components/src/styles/@hashicorp/design-system-components-theming-with-css-selectors.scss new file mode 100644 index 00000000000..8fb787a5541 --- /dev/null +++ b/packages/components/src/styles/@hashicorp/design-system-components-theming-with-css-selectors.scss @@ -0,0 +1,22 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +// these files come from `packages/tokens/dist/` +@use "products/css/themed-tokens/with-css-selectors/tokens.css"; +// TODO understand if these are common/shared or we should have different ones for the themed tokens +@use "products/css/helpers/color"; +@use "products/css/helpers/elevation"; +@use "products/css/helpers/focus-ring"; +@use "products/css/helpers/typography"; + +// main components file +@use "../components/index"; + +// screen-reader utility class +@use "../mixins/screen-reader-only" as *; + +.sr-only { + @include screen-reader-only(); +} diff --git a/packages/components/src/styles/@hashicorp/design-system-components-theming-with-prefers-color-scheme.scss b/packages/components/src/styles/@hashicorp/design-system-components-theming-with-prefers-color-scheme.scss new file mode 100644 index 00000000000..c83e68e495b --- /dev/null +++ b/packages/components/src/styles/@hashicorp/design-system-components-theming-with-prefers-color-scheme.scss @@ -0,0 +1,22 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +// these files come from `packages/tokens/dist/` +@use "products/css/themed-tokens/with-prefers-color-scheme/tokens.css"; +// TODO understand if these are common/shared or we should have different ones for the themed tokens +@use "products/css/helpers/color"; +@use "products/css/helpers/elevation"; +@use "products/css/helpers/focus-ring"; +@use "products/css/helpers/typography"; + +// main components file +@use "../components/index"; + +// screen-reader utility class +@use "../mixins/screen-reader-only" as *; + +.sr-only { + @include screen-reader-only(); +} diff --git a/packages/components/src/styles/@hashicorp/design-system-components-with-css-selectors.scss b/packages/components/src/styles/@hashicorp/design-system-components-with-css-selectors.scss deleted file mode 100644 index 4c30f8588da..00000000000 --- a/packages/components/src/styles/@hashicorp/design-system-components-with-css-selectors.scss +++ /dev/null @@ -1,12 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -// this file comes from packages/tokens/dist/products/css/tokens.css -@use "tokens"; -@use "../mixins/screen-reader-only" as *; - -.sr-only { - @include screen-reader-only(); -} diff --git a/packages/components/src/styles/@hashicorp/design-system-components.scss b/packages/components/src/styles/@hashicorp/design-system-components.scss index 00c6008b820..a07b10042c8 100644 --- a/packages/components/src/styles/@hashicorp/design-system-components.scss +++ b/packages/components/src/styles/@hashicorp/design-system-components.scss @@ -3,63 +3,20 @@ * SPDX-License-Identifier: MPL-2.0 */ -// these files come from the 'design-system-tokens' package -@use "tokens"; -@use "helpers/color"; -@use "helpers/elevation"; -@use "helpers/focus-ring"; -@use "helpers/typography"; +// these files come from `packages/tokens/dist/` +@use "products/css/tokens"; +// TODO understand if these are common/shared or we should have different ones for the themed tokens +@use "products/css/helpers/color"; +@use "products/css/helpers/elevation"; +@use "products/css/helpers/focus-ring"; +@use "products/css/helpers/typography"; -// Notice: this list can be automatically edited by the Ember blueprint, please don't remove the start/end comments -// START COMPONENTS CSS FILES IMPORTS -@use "../components/accordion"; -@use "../components/advanced-table"; -@use "../components/alert"; -@use "../components/app-footer"; -@use "../components/app-frame"; -@use "../components/app-header"; -@use "../components/app-side-nav"; -@use "../components/application-state"; -@use "../components/badge"; -@use "../components/badge-count"; -@use "../components/breadcrumb"; -@use "../components/button"; -@use "../components/button-set"; -@use "../components/card"; -@use "../components/code-block"; -@use "../components/code-editor"; -@use "../components/copy"; -@use "../components/dialog-primitive"; -@use "../components/disclosure-primitive"; -@use "../components/dismiss-button"; -@use "../components/dropdown"; -@use "../components/flyout"; -@use "../components/form"; // multiple components -@use "../components/icon"; -@use "../components/icon-tile"; -@use "../components/layout"; // multiple components -@use "../components/link"; // multiple components -@use "../components/menu-primitive"; -@use "../components/modal"; -@use "../components/page-header"; -@use "../components/pagination"; -@use "../components/reveal"; -@use "../components/rich-tooltip"; -@use "../components/segmented-group"; -@use "../components/separator"; -@use "../components/side-nav"; -@use "../components/stepper"; -@use "../components/table"; -@use "../components/tabs"; -@use "../components/tag"; -@use "../components/text"; -@use "../components/time"; -@use "../components/toast"; -@use "../components/tooltip"; -// END COMPONENT CSS FILES IMPORTS +// main components file +@use "../components/index"; +// screen-reader utility class @use "../mixins/screen-reader-only" as *; -// stylelint-disable-next-line selector-class-pattern + .sr-only { @include screen-reader-only(); } diff --git a/packages/components/src/styles/components/index.scss b/packages/components/src/styles/components/index.scss new file mode 100644 index 00000000000..aa64026dd67 --- /dev/null +++ b/packages/components/src/styles/components/index.scss @@ -0,0 +1,52 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +// Notice: this list can be automatically edited by the Ember blueprint, please don't remove the start/end comments +// START COMPONENTS CSS FILES IMPORTS +@use "./accordion"; +@use "./advanced-table"; +@use "./alert"; +@use "./app-footer"; +@use "./app-frame"; +@use "./app-header"; +@use "./app-side-nav"; +@use "./application-state"; +@use "./badge"; +@use "./badge-count"; +@use "./breadcrumb"; +@use "./button"; +@use "./button-set"; +@use "./card"; +@use "./code-block"; +@use "./code-editor"; +@use "./copy"; +@use "./dialog-primitive"; +@use "./disclosure-primitive"; +@use "./dismiss-button"; +@use "./dropdown"; +@use "./flyout"; +@use "./form"; // multiple components +@use "./icon"; +@use "./icon-tile"; +@use "./layout"; // multiple components +@use "./link"; // multiple components +@use "./menu-primitive"; +@use "./modal"; +@use "./page-header"; +@use "./pagination"; +@use "./reveal"; +@use "./rich-tooltip"; +@use "./segmented-group"; +@use "./separator"; +@use "./side-nav"; +@use "./stepper"; +@use "./table"; +@use "./tabs"; +@use "./tag"; +@use "./text"; +@use "./time"; +@use "./toast"; +@use "./tooltip"; +// END COMPONENT CSS FILES IMPORTS From d416e7fb300774036547958c70d271f7b01862f8 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Mon, 29 Sep 2025 16:18:18 +0100 Subject: [PATCH 055/224] added support for source maps for generated themed CSS files --- packages/components/rollup.config.mjs | 32 +++++++++++++++++++++++---- 1 file changed, 28 insertions(+), 4 deletions(-) diff --git a/packages/components/rollup.config.mjs b/packages/components/rollup.config.mjs index 70b4fa29594..f58a111bea2 100644 --- a/packages/components/rollup.config.mjs +++ b/packages/components/rollup.config.mjs @@ -69,18 +69,30 @@ const plugins = [ const result = sass.compile( 'src/styles/@hashicorp/design-system-components-theming-with-css-selectors.scss', { + sourceMap: true, // equivalent to includePaths in rollup-plugin-scss loadPaths: ['node_modules/@hashicorp/design-system-tokens/dist'], } ); + const cssFileName = + 'styles/@hashicorp/design-system-components-theming-with-css-selectors.css'; + // Emit the compiled CSS this.emitFile({ type: 'asset', - fileName: - 'styles/@hashicorp/design-system-components-theming-with-css-selectors.css', + fileName: cssFileName, source: result.css, }); + + // Emit the source map + if (result.sourceMap) { + this.emitFile({ + type: 'asset', + fileName: `${cssFileName}.map`, + source: JSON.stringify(result.sourceMap), + }); + } } catch (error) { this.error( `Failed to compile themed ("with CSS selectors") SCSS: ${error.message}` @@ -96,18 +108,30 @@ const plugins = [ const result = sass.compile( 'src/styles/@hashicorp/design-system-components-theming-with-prefers-color-scheme.scss', { + sourceMap: true, // equivalent to includePaths in rollup-plugin-scss loadPaths: ['node_modules/@hashicorp/design-system-tokens/dist'], } ); + const cssFileName = + 'styles/@hashicorp/design-system-components-theming-with-prefers-color-scheme.css'; + // Emit the compiled CSS this.emitFile({ type: 'asset', - fileName: - 'styles/@hashicorp/design-system-components-theming-with-prefers-color-scheme.css', + fileName: cssFileName, source: result.css, }); + + // Emit the source map + if (result.sourceMap) { + this.emitFile({ + type: 'asset', + fileName: `${cssFileName}.map`, + source: JSON.stringify(result.sourceMap), + }); + } } catch (error) { this.error( `Failed to compile themed ("with CSS selectors") SCSS: ${error.message}` From 2935a3d31401f182f16a60f83aa6ef8ab87a4c5c Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 30 Sep 2025 11:42:40 +0100 Subject: [PATCH 056/224] =?UTF-8?q?TEMP=20-=20Added=20generation=20of=20?= =?UTF-8?q?=E2=80=9Calt=E2=80=9D=20CSS=20for=20HDS=20components=20to=20com?= =?UTF-8?q?pare=20with=20output=20from=20`rollup-plugin-scss`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/components/rollup.config.mjs | 37 +++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/packages/components/rollup.config.mjs b/packages/components/rollup.config.mjs index f58a111bea2..e31d3ac56db 100644 --- a/packages/components/rollup.config.mjs +++ b/packages/components/rollup.config.mjs @@ -100,6 +100,43 @@ const plugins = [ } }, }, + { + name: 'compile-scss-alt', + generateBundle() { + // Compile the themed SCSS file + try { + const result = sass.compile( + 'src/styles/@hashicorp/design-system-components.scss', + { + sourceMap: true, + // equivalent to includePaths in rollup-plugin-scss + loadPaths: ['node_modules/@hashicorp/design-system-tokens/dist'], + } + ); + + const cssFileName = + 'styles/@hashicorp/design-system-components-ALT.css'; + + // Emit the compiled CSS + this.emitFile({ + type: 'asset', + fileName: cssFileName, + source: result.css, + }); + + // Emit the source map + if (result.sourceMap) { + this.emitFile({ + type: 'asset', + fileName: `${cssFileName}.map`, + source: JSON.stringify(result.sourceMap), + }); + } + } catch (error) { + this.error(`Failed to compile ALT SCSS: ${error.message}`); + } + }, + }, { name: 'compile-scss-themed-with-prefers-color-scheme', generateBundle() { From 423b8923c6b03681250a0b4710106803d7f02846 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 30 Sep 2025 14:39:47 +0100 Subject: [PATCH 057/224] abstracted logic for custom Rollup plugin to compile multiple Sass files to CSS files --- packages/components/rollup.config.mjs | 166 ++++++++------------------ 1 file changed, 53 insertions(+), 113 deletions(-) diff --git a/packages/components/rollup.config.mjs b/packages/components/rollup.config.mjs index e31d3ac56db..cfde8baedd4 100644 --- a/packages/components/rollup.config.mjs +++ b/packages/components/rollup.config.mjs @@ -16,6 +16,45 @@ const addon = new Addon({ destDir: 'dist', }); +// Custom SCSS compilation plugins for Rollup +function addScssCompilationPlugins(options) { + return options.map(({ inputFile, outputFile }) => ({ + name: `rollup custom plugin to generate ${outputFile}`, + generateBundle() { + try { + const inputFileFullPath = `src/styles/@hashicorp/${inputFile}`; + const outputFileFullPath = `styles/@hashicorp/${outputFile}`; + + const result = sass.compile(inputFileFullPath, { + sourceMap: true, + // equivalent to includePaths in rollup-plugin-scss + loadPaths: ['node_modules/@hashicorp/design-system-tokens/dist'], + }); + + // Emit the compiled CSS + this.emitFile({ + type: 'asset', + fileName: outputFileFullPath, + source: result.css, + }); + + // Emit the source map + if (result.sourceMap) { + this.emitFile({ + type: 'asset', + fileName: `${outputFileFullPath}.map`, + source: JSON.stringify(result.sourceMap), + }); + } + } catch (error) { + this.error( + `Failed to compile SCSS file "${inputFile}": ${error.message}` + ); + } + }, + })); +} + const plugins = [ // These are the modules that users should be able to import from your // addon. Anything not listed here may get optimized away. @@ -60,122 +99,23 @@ const plugins = [ fileName: 'styles/@hashicorp/design-system-power-select-overrides.css', }), - // Custom plugins to compile the "themed" SCSS files - { - name: 'compile-scss-themed-with-css-selectors', - generateBundle() { - // Compile the themed SCSS file - try { - const result = sass.compile( - 'src/styles/@hashicorp/design-system-components-theming-with-css-selectors.scss', - { - sourceMap: true, - // equivalent to includePaths in rollup-plugin-scss - loadPaths: ['node_modules/@hashicorp/design-system-tokens/dist'], - } - ); - - const cssFileName = - 'styles/@hashicorp/design-system-components-theming-with-css-selectors.css'; - - // Emit the compiled CSS - this.emitFile({ - type: 'asset', - fileName: cssFileName, - source: result.css, - }); - - // Emit the source map - if (result.sourceMap) { - this.emitFile({ - type: 'asset', - fileName: `${cssFileName}.map`, - source: JSON.stringify(result.sourceMap), - }); - } - } catch (error) { - this.error( - `Failed to compile themed ("with CSS selectors") SCSS: ${error.message}` - ); - } + // Custom SCSS compilation plugin function + ...addScssCompilationPlugins([ + { + inputFile: 'design-system-components.scss', + outputFile: 'design-system-components-ALT.css', }, - }, - { - name: 'compile-scss-alt', - generateBundle() { - // Compile the themed SCSS file - try { - const result = sass.compile( - 'src/styles/@hashicorp/design-system-components.scss', - { - sourceMap: true, - // equivalent to includePaths in rollup-plugin-scss - loadPaths: ['node_modules/@hashicorp/design-system-tokens/dist'], - } - ); - - const cssFileName = - 'styles/@hashicorp/design-system-components-ALT.css'; - - // Emit the compiled CSS - this.emitFile({ - type: 'asset', - fileName: cssFileName, - source: result.css, - }); - - // Emit the source map - if (result.sourceMap) { - this.emitFile({ - type: 'asset', - fileName: `${cssFileName}.map`, - source: JSON.stringify(result.sourceMap), - }); - } - } catch (error) { - this.error(`Failed to compile ALT SCSS: ${error.message}`); - } + { + inputFile: 'design-system-components-theming-with-css-selectors.scss', + outputFile: 'design-system-components-theming-with-css-selectors.css', }, - }, - { - name: 'compile-scss-themed-with-prefers-color-scheme', - generateBundle() { - // Compile the themed SCSS file - try { - const result = sass.compile( - 'src/styles/@hashicorp/design-system-components-theming-with-prefers-color-scheme.scss', - { - sourceMap: true, - // equivalent to includePaths in rollup-plugin-scss - loadPaths: ['node_modules/@hashicorp/design-system-tokens/dist'], - } - ); - - const cssFileName = - 'styles/@hashicorp/design-system-components-theming-with-prefers-color-scheme.css'; - - // Emit the compiled CSS - this.emitFile({ - type: 'asset', - fileName: cssFileName, - source: result.css, - }); - - // Emit the source map - if (result.sourceMap) { - this.emitFile({ - type: 'asset', - fileName: `${cssFileName}.map`, - source: JSON.stringify(result.sourceMap), - }); - } - } catch (error) { - this.error( - `Failed to compile themed ("with CSS selectors") SCSS: ${error.message}` - ); - } + { + inputFile: + 'design-system-components-theming-with-prefers-color-scheme.scss', + outputFile: + 'design-system-components-theming-with-prefers-color-scheme.css', }, - }, + ]), // Ensure that standalone .hbs files are properly integrated as Javascript. addon.hbs(), From aeac3496576850638ac9c3a38ce10f2cc29697c5 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 30 Sep 2025 15:46:09 +0100 Subject: [PATCH 058/224] updated `includePaths` for design tokens in Showcase and Website `ember-cli-build.js` --- showcase/ember-cli-build.js | 2 +- website/ember-cli-build.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/showcase/ember-cli-build.js b/showcase/ember-cli-build.js index 72fd5925260..7fb71fdd38e 100644 --- a/showcase/ember-cli-build.js +++ b/showcase/ember-cli-build.js @@ -17,7 +17,7 @@ module.exports = function (defaults) { sassOptions: { precision: 4, includePaths: [ - 'node_modules/@hashicorp/design-system-tokens/dist/products/css', + 'node_modules/@hashicorp/design-system-tokens/dist', 'node_modules/@hashicorp/design-system-components/dist/styles', 'node_modules/ember-power-select/vendor', ], diff --git a/website/ember-cli-build.js b/website/ember-cli-build.js index ad5b7ca6183..fd0f2390547 100644 --- a/website/ember-cli-build.js +++ b/website/ember-cli-build.js @@ -15,7 +15,7 @@ module.exports = function (defaults) { sassOptions: { precision: 4, includePaths: [ - 'node_modules/@hashicorp/design-system-tokens/dist/products/css', + 'node_modules/@hashicorp/design-system-tokens/dist', 'node_modules/@hashicorp/design-system-components/dist/styles', 'node_modules/ember-power-select/vendor', ], From fc45c2f194376c1d59ffea0a0eb29410134518d3 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 30 Sep 2025 16:40:53 +0100 Subject: [PATCH 059/224] moved compilation of existing Scss files for components and overrides to new custom plugin --- packages/components/rollup.config.mjs | 27 ++++++++------------------- 1 file changed, 8 insertions(+), 19 deletions(-) diff --git a/packages/components/rollup.config.mjs b/packages/components/rollup.config.mjs index cfde8baedd4..6d6253330a4 100644 --- a/packages/components/rollup.config.mjs +++ b/packages/components/rollup.config.mjs @@ -6,7 +6,6 @@ import { Addon } from '@embroider/addon-dev/rollup'; import { babel } from '@rollup/plugin-babel'; import copy from 'rollup-plugin-copy'; -import scss from 'rollup-plugin-scss'; import process from 'process'; import path from 'node:path'; import * as sass from 'sass'; @@ -27,7 +26,6 @@ function addScssCompilationPlugins(options) { const result = sass.compile(inputFileFullPath, { sourceMap: true, - // equivalent to includePaths in rollup-plugin-scss loadPaths: ['node_modules/@hashicorp/design-system-tokens/dist'], }); @@ -58,12 +56,7 @@ function addScssCompilationPlugins(options) { const plugins = [ // These are the modules that users should be able to import from your // addon. Anything not listed here may get optimized away. - addon.publicEntrypoints([ - '**/*.{js,ts}', - 'index.js', - 'template-registry.js', - 'styles/@hashicorp/design-system-components.scss', - ]), + addon.publicEntrypoints(['**/*.{js,ts}', 'index.js', 'template-registry.js']), // These are the modules that should get reexported into the traditional // "app" tree. Things in here should also be in publicEntrypoints above, but @@ -90,20 +83,12 @@ const plugins = [ // package names. addon.dependencies(), - scss({ - fileName: 'styles/@hashicorp/design-system-components.css', - includePaths: ['node_modules/@hashicorp/design-system-tokens/dist'], - }), - - scss({ - fileName: 'styles/@hashicorp/design-system-power-select-overrides.css', - }), - - // Custom SCSS compilation plugin function + // We use a custom plugin for the Sass/SCSS compilation + // so we can have multiple input and multiple outputs ...addScssCompilationPlugins([ { inputFile: 'design-system-components.scss', - outputFile: 'design-system-components-ALT.css', + outputFile: 'design-system-components.css', }, { inputFile: 'design-system-components-theming-with-css-selectors.scss', @@ -115,6 +100,10 @@ const plugins = [ outputFile: 'design-system-components-theming-with-prefers-color-scheme.css', }, + { + inputFile: 'design-system-power-select-overrides.scss', + outputFile: 'design-system-power-select-overrides.css', + }, ]), // Ensure that standalone .hbs files are properly integrated as Javascript. From 394a058edf4f3bbfbcf3d3fad965782d67ba882c Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 30 Sep 2025 17:10:39 +0100 Subject: [PATCH 060/224] removed `rollup-plugin-scss` dev dependency (we use our own custom plugin for every Scss compilation) --- packages/components/package.json | 1 - pnpm-lock.yaml | 10 ---------- 2 files changed, 11 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index caa55b250ec..ba03c3ec5eb 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -112,7 +112,6 @@ "prettier-plugin-ember-template-tag": "^2.0.5", "rollup": "^4.39.0", "rollup-plugin-copy": "^3.5.0", - "rollup-plugin-scss": "^4.0.1", "stylelint": "^16.17.0", "stylelint-config-rational-order": "^0.1.2", "stylelint-config-standard-scss": "^14.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5fdc76dbdb8..8559de4c48a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -295,9 +295,6 @@ importers: rollup-plugin-copy: specifier: ^3.5.0 version: 3.5.0 - rollup-plugin-scss: - specifier: ^4.0.1 - version: 4.0.1 stylelint: specifier: ^16.17.0 version: 16.23.0(typescript@5.9.2) @@ -10247,9 +10244,6 @@ packages: resolution: {integrity: sha512-wI8D5dvYovRMx/YYKtUNt3Yxaw4ORC9xo6Gt9t22kveWz1enG9QrhVlagzwrxSC455xD1dHMKhIJkbsQ7d48BA==} engines: {node: '>=8.3'} - rollup-plugin-scss@4.0.1: - resolution: {integrity: sha512-3W3+3OzR+shkDl3hJ1XTAuGkP4AfiLgIjie2GtcoZ9pHfRiNqeDbtCu1EUnkjZ98EPIM6nnMIXkKlc7Sx5bRvA==} - rollup-pluginutils@2.8.2: resolution: {integrity: sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==} @@ -24712,10 +24706,6 @@ snapshots: globby: 10.0.1 is-plain-object: 3.0.1 - rollup-plugin-scss@4.0.1: - dependencies: - rollup-pluginutils: 2.8.2 - rollup-pluginutils@2.8.2: dependencies: estree-walker: 0.6.1 From 909e0086345131ecb0bc40627c7dbb426678d64c Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 2 Oct 2025 12:43:37 +0100 Subject: [PATCH 061/224] added CSS compilation for `combined-strategies` tokens --- packages/components/rollup.config.mjs | 6 +++++ ...ents-theming-with-combined-strategies.scss | 22 +++++++++++++++++++ 2 files changed, 28 insertions(+) create mode 100644 packages/components/src/styles/@hashicorp/design-system-components-theming-with-combined-strategies.scss diff --git a/packages/components/rollup.config.mjs b/packages/components/rollup.config.mjs index 6d6253330a4..8b52c2fe51f 100644 --- a/packages/components/rollup.config.mjs +++ b/packages/components/rollup.config.mjs @@ -100,6 +100,12 @@ const plugins = [ outputFile: 'design-system-components-theming-with-prefers-color-scheme.css', }, + { + inputFile: + 'design-system-components-theming-with-combined-strategies.scss', + outputFile: + 'design-system-components-theming-with-combined-strategies.css', + }, { inputFile: 'design-system-power-select-overrides.scss', outputFile: 'design-system-power-select-overrides.css', diff --git a/packages/components/src/styles/@hashicorp/design-system-components-theming-with-combined-strategies.scss b/packages/components/src/styles/@hashicorp/design-system-components-theming-with-combined-strategies.scss new file mode 100644 index 00000000000..28ac7a9f0b4 --- /dev/null +++ b/packages/components/src/styles/@hashicorp/design-system-components-theming-with-combined-strategies.scss @@ -0,0 +1,22 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +// these files come from `packages/tokens/dist/` +@use "products/css/themed-tokens/with-combined-strategies/tokens.css"; +// TODO understand if these are common/shared or we should have different ones for the themed tokens +@use "products/css/helpers/color"; +@use "products/css/helpers/elevation"; +@use "products/css/helpers/focus-ring"; +@use "products/css/helpers/typography"; + +// main components file +@use "../components/index"; + +// screen-reader utility class +@use "../mixins/screen-reader-only" as *; + +.sr-only { + @include screen-reader-only(); +} From 5c22febf7f0518127a1865052cf868886756c70b Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Wed, 15 Oct 2025 15:43:36 +0100 Subject: [PATCH 062/224] updated the `prePublish` script in `package.json` of `components` to validate that all the new CSS files are generated too --- packages/components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/package.json b/packages/components/package.json index ba03c3ec5eb..155b6a5cfa8 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -30,7 +30,7 @@ "lint:js:fix": "eslint . --fix", "lint:types": "glint", "start": "rollup --config --watch --environment development", - "prepublishOnly": "pnpm build && test -f 'dist/styles/@hashicorp/design-system-components.css' || (echo \"\n\\033[31m⚠️ Error: the pre-compiled CSS file \\`dist/styles/@hashicorp/design-system-components.css\\` was not found\\033[0m\\n\" && exit 1)" + "prepublishOnly": "pnpm build && test -f 'dist/styles/@hashicorp/design-system-components.css' && test -f 'dist/styles/@hashicorp/design-system-components-theming-with-css-selectors.css' && test -f 'dist/styles/@hashicorp/design-system-components-theming-with-prefers-color-scheme.css' && test -f 'dist/styles/@hashicorp/design-system-components.css' && test -f 'dist/styles/@hashicorp/design-system-power-select-overrides.css' || (echo \"\n\\033[31m⚠️ Error: the pre-compiled CSS file was not found\\033[0m\\n\" && exit 1)" }, "dependencies": { "@codemirror/commands": "^6.8.0", From 24c9c9b7d22988b5d709fb5630c18d88ddbf92f5 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Fri, 24 Oct 2025 11:52:28 +0100 Subject: [PATCH 063/224] simplified architecture of CSS compilation for HDS components (as agreed) --- packages/components/rollup.config.mjs | 16 ++------------ ...s => design-system-components-common.scss} | 2 -- ...ents-theming-with-combined-strategies.scss | 22 ------------------- ...nts-theming-with-prefers-color-scheme.scss | 22 ------------------- .../@hashicorp/design-system-components.scss | 18 +++------------ 5 files changed, 5 insertions(+), 75 deletions(-) rename packages/components/src/styles/@hashicorp/{design-system-components-theming-with-css-selectors.scss => design-system-components-common.scss} (73%) delete mode 100644 packages/components/src/styles/@hashicorp/design-system-components-theming-with-combined-strategies.scss delete mode 100644 packages/components/src/styles/@hashicorp/design-system-components-theming-with-prefers-color-scheme.scss diff --git a/packages/components/rollup.config.mjs b/packages/components/rollup.config.mjs index 8b52c2fe51f..4b50ba4595d 100644 --- a/packages/components/rollup.config.mjs +++ b/packages/components/rollup.config.mjs @@ -91,20 +91,8 @@ const plugins = [ outputFile: 'design-system-components.css', }, { - inputFile: 'design-system-components-theming-with-css-selectors.scss', - outputFile: 'design-system-components-theming-with-css-selectors.css', - }, - { - inputFile: - 'design-system-components-theming-with-prefers-color-scheme.scss', - outputFile: - 'design-system-components-theming-with-prefers-color-scheme.css', - }, - { - inputFile: - 'design-system-components-theming-with-combined-strategies.scss', - outputFile: - 'design-system-components-theming-with-combined-strategies.css', + inputFile: 'design-system-components-common.scss', + outputFile: 'design-system-components-common.css', }, { inputFile: 'design-system-power-select-overrides.scss', diff --git a/packages/components/src/styles/@hashicorp/design-system-components-theming-with-css-selectors.scss b/packages/components/src/styles/@hashicorp/design-system-components-common.scss similarity index 73% rename from packages/components/src/styles/@hashicorp/design-system-components-theming-with-css-selectors.scss rename to packages/components/src/styles/@hashicorp/design-system-components-common.scss index 8fb787a5541..25a3f81a9f5 100644 --- a/packages/components/src/styles/@hashicorp/design-system-components-theming-with-css-selectors.scss +++ b/packages/components/src/styles/@hashicorp/design-system-components-common.scss @@ -4,8 +4,6 @@ */ // these files come from `packages/tokens/dist/` -@use "products/css/themed-tokens/with-css-selectors/tokens.css"; -// TODO understand if these are common/shared or we should have different ones for the themed tokens @use "products/css/helpers/color"; @use "products/css/helpers/elevation"; @use "products/css/helpers/focus-ring"; diff --git a/packages/components/src/styles/@hashicorp/design-system-components-theming-with-combined-strategies.scss b/packages/components/src/styles/@hashicorp/design-system-components-theming-with-combined-strategies.scss deleted file mode 100644 index 28ac7a9f0b4..00000000000 --- a/packages/components/src/styles/@hashicorp/design-system-components-theming-with-combined-strategies.scss +++ /dev/null @@ -1,22 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -// these files come from `packages/tokens/dist/` -@use "products/css/themed-tokens/with-combined-strategies/tokens.css"; -// TODO understand if these are common/shared or we should have different ones for the themed tokens -@use "products/css/helpers/color"; -@use "products/css/helpers/elevation"; -@use "products/css/helpers/focus-ring"; -@use "products/css/helpers/typography"; - -// main components file -@use "../components/index"; - -// screen-reader utility class -@use "../mixins/screen-reader-only" as *; - -.sr-only { - @include screen-reader-only(); -} diff --git a/packages/components/src/styles/@hashicorp/design-system-components-theming-with-prefers-color-scheme.scss b/packages/components/src/styles/@hashicorp/design-system-components-theming-with-prefers-color-scheme.scss deleted file mode 100644 index c83e68e495b..00000000000 --- a/packages/components/src/styles/@hashicorp/design-system-components-theming-with-prefers-color-scheme.scss +++ /dev/null @@ -1,22 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -// these files come from `packages/tokens/dist/` -@use "products/css/themed-tokens/with-prefers-color-scheme/tokens.css"; -// TODO understand if these are common/shared or we should have different ones for the themed tokens -@use "products/css/helpers/color"; -@use "products/css/helpers/elevation"; -@use "products/css/helpers/focus-ring"; -@use "products/css/helpers/typography"; - -// main components file -@use "../components/index"; - -// screen-reader utility class -@use "../mixins/screen-reader-only" as *; - -.sr-only { - @include screen-reader-only(); -} diff --git a/packages/components/src/styles/@hashicorp/design-system-components.scss b/packages/components/src/styles/@hashicorp/design-system-components.scss index a07b10042c8..cbc8470f7d0 100644 --- a/packages/components/src/styles/@hashicorp/design-system-components.scss +++ b/packages/components/src/styles/@hashicorp/design-system-components.scss @@ -3,20 +3,8 @@ * SPDX-License-Identifier: MPL-2.0 */ -// these files come from `packages/tokens/dist/` +// these are the "standard" HDS tokens (the file comes from `packages/tokens/dist/`) @use "products/css/tokens"; -// TODO understand if these are common/shared or we should have different ones for the themed tokens -@use "products/css/helpers/color"; -@use "products/css/helpers/elevation"; -@use "products/css/helpers/focus-ring"; -@use "products/css/helpers/typography"; -// main components file -@use "../components/index"; - -// screen-reader utility class -@use "../mixins/screen-reader-only" as *; - -.sr-only { - @include screen-reader-only(); -} +// these are the styles specific (and only) for the the HDS components +@use "./design-system-components-common"; From 16f51cbdebf8c9d1a19cc7cd22f0c9f680619b7e Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Fri, 24 Oct 2025 16:22:18 +0100 Subject: [PATCH 064/224] =?UTF-8?q?fixed=20`prepublisOnly`=20script=20that?= =?UTF-8?q?=20was=20causing=20error=20in=20build=20(looking=20for=20old=20?= =?UTF-8?q?CSS=20files=20that=20don=E2=80=99t=20exist=20anymore)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/components/package.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/components/package.json b/packages/components/package.json index 155b6a5cfa8..a2dfcfe6ba7 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -30,7 +30,10 @@ "lint:js:fix": "eslint . --fix", "lint:types": "glint", "start": "rollup --config --watch --environment development", - "prepublishOnly": "pnpm build && test -f 'dist/styles/@hashicorp/design-system-components.css' && test -f 'dist/styles/@hashicorp/design-system-components-theming-with-css-selectors.css' && test -f 'dist/styles/@hashicorp/design-system-components-theming-with-prefers-color-scheme.css' && test -f 'dist/styles/@hashicorp/design-system-components.css' && test -f 'dist/styles/@hashicorp/design-system-power-select-overrides.css' || (echo \"\n\\033[31m⚠️ Error: the pre-compiled CSS file was not found\\033[0m\\n\" && exit 1)" + "test-f:design-system-components": "test -f 'dist/styles/@hashicorp/design-system-components.css' || (echo \"\n\\033[31m⚠️ Error: the pre-compiled CSS file \\`dist/styles/@hashicorp/design-system-components.css\\` was not found\\033[0m\\n\" && exit 1)", + "test-f:design-system-components-common": "test -f 'dist/styles/@hashicorp/design-system-components-common.css' || (echo \"\n\\033[31m⚠️ Error: the pre-compiled CSS file \\`dist/styles/@hashicorp/design-system-components-common.css\\` was not found\\033[0m\\n\" && exit 1)", + "test-f:design-system-power-select-overrides": "test -f 'dist/styles/@hashicorp/design-system-power-select-overrides.css' || (echo \"\n\\033[31m⚠️ Error: the pre-compiled CSS file \\`dist/styles/@hashicorp/design-system-power-select-overrides.css\\` was not found\\033[0m\\n\" && exit 1)", + "prepublishOnly": "pnpm build && pnpm test-f:design-system-components && pnpm test-f:design-system-components-common && pnpm test-f:design-system-power-select-overrides" }, "dependencies": { "@codemirror/commands": "^6.8.0", From afb6e3f73cf099e327963ec35ce95939818dd0b8 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Wed, 29 Oct 2025 09:59:43 +0000 Subject: [PATCH 065/224] updated `cssFilePath` in blueprints to reflect new Scss file organization, per code review suggestion https://github.com/hashicorp/design-system/pull/3259#discussion_r2469643577 --- showcase/blueprints/hds-component/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/showcase/blueprints/hds-component/index.js b/showcase/blueprints/hds-component/index.js index 37f0c063d8e..48b79420c85 100644 --- a/showcase/blueprints/hds-component/index.js +++ b/showcase/blueprints/hds-component/index.js @@ -38,7 +38,7 @@ module.exports = { const updateHDSComponentsCSS = (options) => { const name = options.entity.name; - const cssFilePath = `${options.project.root}/../packages/components/src/styles/@hashicorp/design-system-components.scss`; + const cssFilePath = `${options.project.root}/../packages/components/src/styles/components/index.scss`; const source = fs.readFileSync(cssFilePath, 'utf-8'); const oldLinesArray = source.split(/\r?\n/); const firstComponentImportIndex = From 2fa10f44b9560f548af3fa23b692ac25b8573582 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 20 Nov 2025 11:02:04 +0000 Subject: [PATCH 066/224] Apply suggestions from code review Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- packages/components/rollup.config.mjs | 2 +- .../src/styles/@hashicorp/design-system-components-common.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/rollup.config.mjs b/packages/components/rollup.config.mjs index 4b50ba4595d..e85388eea80 100644 --- a/packages/components/rollup.config.mjs +++ b/packages/components/rollup.config.mjs @@ -15,7 +15,7 @@ const addon = new Addon({ destDir: 'dist', }); -// Custom SCSS compilation plugins for Rollup +// Custom SCSS compilation plugin for Rollup function addScssCompilationPlugins(options) { return options.map(({ inputFile, outputFile }) => ({ name: `rollup custom plugin to generate ${outputFile}`, diff --git a/packages/components/src/styles/@hashicorp/design-system-components-common.scss b/packages/components/src/styles/@hashicorp/design-system-components-common.scss index 25a3f81a9f5..25e98da8f95 100644 --- a/packages/components/src/styles/@hashicorp/design-system-components-common.scss +++ b/packages/components/src/styles/@hashicorp/design-system-components-common.scss @@ -15,6 +15,7 @@ // screen-reader utility class @use "../mixins/screen-reader-only" as *; +// The `.sr-only` utility class visually hides content but keeps it accessible to screen readers for accessibility purposes. .sr-only { @include screen-reader-only(); } From 053e6de4d05764bd4467992c5905852603c658fc Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Fri, 21 Nov 2025 22:00:07 +0000 Subject: [PATCH 067/224] Update packages/components/src/styles/@hashicorp/design-system-components.scss Co-authored-by: Kristin Bradley --- .../src/styles/@hashicorp/design-system-components.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/styles/@hashicorp/design-system-components.scss b/packages/components/src/styles/@hashicorp/design-system-components.scss index cbc8470f7d0..2b906e0c9ba 100644 --- a/packages/components/src/styles/@hashicorp/design-system-components.scss +++ b/packages/components/src/styles/@hashicorp/design-system-components.scss @@ -6,5 +6,5 @@ // these are the "standard" HDS tokens (the file comes from `packages/tokens/dist/`) @use "products/css/tokens"; -// these are the styles specific (and only) for the the HDS components +// these are the styles specific (and only) for the HDS components @use "./design-system-components-common"; From ab6700c29605d73a86ea57c706ab113d175b1592 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 30 Sep 2025 20:52:07 +0100 Subject: [PATCH 068/224] added `Hds::ThemeSwitcher` component --- packages/components/package.json | 3 +- packages/components/src/components.ts | 3 + .../components/hds/theme-switcher/index.hbs | 11 ++++ .../components/hds/theme-switcher/index.ts | 63 +++++++++++++++++++ packages/components/src/template-registry.ts | 5 ++ 5 files changed, 84 insertions(+), 1 deletion(-) create mode 100644 packages/components/src/components/hds/theme-switcher/index.hbs create mode 100644 packages/components/src/components/hds/theme-switcher/index.ts diff --git a/packages/components/package.json b/packages/components/package.json index a2dfcfe6ba7..136ab3b6824 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -369,6 +369,7 @@ "./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-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", @@ -427,4 +428,4 @@ "engines": { "node": ">= 18" } -} +} \ No newline at end of file diff --git a/packages/components/src/components.ts b/packages/components/src/components.ts index 400dc061324..adb7400d800 100644 --- a/packages/components/src/components.ts +++ b/packages/components/src/components.ts @@ -327,6 +327,9 @@ export { default as HdsTextCode } from './components/hds/text/code.ts'; export { default as HdsTextDisplay } from './components/hds/text/display.ts'; export * from './components/hds/text/types.ts'; +// Theme Switcher +export { default as HdsThemeSwitcher } from './components/hds/theme-switcher/index.ts'; + // Time export { default as HdsTime } from './components/hds/time/index.ts'; export { default as HdsTimeSingle } from './components/hds/time/single.ts'; 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..4486348faff --- /dev/null +++ b/packages/components/src/components/hds/theme-switcher/index.hbs @@ -0,0 +1,11 @@ +{{! + Copyright (c) HashiCorp, Inc. + SPDX-License-Identifier: MPL-2.0 +}} + + + + {{#each-in this._options as |key data|}} + {{data.label}} + {{/each-in}} + 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..4f6ec8fb882 --- /dev/null +++ b/packages/components/src/components/hds/theme-switcher/index.ts @@ -0,0 +1,63 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +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 HdsThemingService from '../../../services/hds-theming.ts'; +import { type HdsThemes } from '../../../services/hds-theming.ts'; + +export const OPTIONS = { + none: { theme: undefined, icon: 'minus', label: 'None' }, + system: { theme: 'system', icon: 'monitor', label: 'System' }, + light: { theme: 'light', icon: 'sun', label: 'Light' }, + dark: { theme: 'dark', icon: 'moon', label: 'Dark' }, +} as const; + +export interface HdsThemeSwitcherSignature { + Args: { + toggleSize?: HdsDropdownToggleButtonSignature['Args']['size']; + toggleIsFullWidth?: boolean; + }; + Element: HdsDropdownSignature['Element']; +} + +export default class HdsThemeSwitcher extends Component { + @service declare readonly hdsTheming: HdsThemingService; + + _options = OPTIONS; + + get toggleSize() { + return this.args.toggleSize ?? 'small'; + } + + get toggleContent() { + switch (this.currentTheme) { + case 'system': + case 'light': + case 'dark': + return { + label: OPTIONS[this.currentTheme].label, + icon: OPTIONS[this.currentTheme].icon, + }; + case undefined: + default: + return { label: 'Theme', icon: undefined }; + } + } + + get currentTheme() { + return this.hdsTheming.currentTheme; + } + + @action + setTheme(theme: HdsThemes): void { + // we set the theme in the global service + this.hdsTheming.setTheme(theme); + } +} diff --git a/packages/components/src/template-registry.ts b/packages/components/src/template-registry.ts index 66183aa31c6..25f4575d028 100644 --- a/packages/components/src/template-registry.ts +++ b/packages/components/src/template-registry.ts @@ -232,6 +232,7 @@ 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 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'; @@ -1021,6 +1022,10 @@ export default interface HdsComponentsRegistry { 'Hds::Toast': typeof HdsToastComponent; 'hds/toast': typeof HdsToastComponent; + // ThemeSwitcher + 'Hds::ThemeSwitcher': typeof HdsThemeSwitcherComponent; + 'hds/theme-switcher': typeof HdsThemeSwitcherComponent; + // Time 'Hds::Time': typeof HdsTimeComponent; 'hds/time': typeof HdsTimeComponent; From 6d6d7ca6398990556b2089c535067aa2f1e4aaae Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 30 Sep 2025 20:53:01 +0100 Subject: [PATCH 069/224] added `Hds::Theming` service --- packages/components/package.json | 1 + packages/components/src/services.ts | 2 + .../components/src/services/hds-theming.ts | 63 +++++++++++++++++++ 3 files changed, 66 insertions(+) create mode 100644 packages/components/src/services/hds-theming.ts diff --git a/packages/components/package.json b/packages/components/package.json index 136ab3b6824..d96dde0bf1a 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -398,6 +398,7 @@ "./modifiers/hds-register-event.js": "./dist/_app_/modifiers/hds-register-event.js", "./modifiers/hds-tooltip.js": "./dist/_app_/modifiers/hds-tooltip.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" } }, diff --git a/packages/components/src/services.ts b/packages/components/src/services.ts index 2650e722d57..9f61ec10978 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-theming.ts b/packages/components/src/services/hds-theming.ts new file mode 100644 index 00000000000..cb508ddc167 --- /dev/null +++ b/packages/components/src/services/hds-theming.ts @@ -0,0 +1,63 @@ +import Service from '@ember/service'; +import { tracked } from '@glimmer/tracking'; + +import type Owner from '@ember/owner'; + +export const LOCALSTORAGE_KEY = 'hds-current-theme'; + +export enum HdsThemeValues { + System = 'system', + Light = 'light', + Dark = 'dark', +} + +export type HdsThemes = `${HdsThemeValues}` | undefined; + +export const THEMES: string[] = Object.values(HdsThemeValues); + +export default class HdsThemingService extends Service { + @tracked currentTheme: HdsThemes = undefined; + + constructor(owner: Owner) { + super(owner); + this.initializeTheme(); + } + + initializeTheme() { + const _initialTheme = localStorage.getItem(LOCALSTORAGE_KEY); + if ( + _initialTheme === 'system' || + _initialTheme === 'light' || + _initialTheme === 'dark' + ) { + this.setTheme(_initialTheme); + } + } + + getTheme(): HdsThemes { + return this.currentTheme; + } + + setTheme(theme: HdsThemes) { + // console.log('setting HDS theme', theme); + + if (theme === undefined) { + localStorage.removeItem(LOCALSTORAGE_KEY); + } else { + localStorage.setItem(LOCALSTORAGE_KEY, theme); + } + + // IMPORTANT: for this to work, it needs to be the HTML tag (it's the `:root` in CSS) + const rootElement = document.querySelector('html'); + + if (rootElement) { + if (theme === undefined) { + rootElement.removeAttribute('data-hds-theme'); + this.currentTheme = undefined; + } else { + rootElement.setAttribute('data-hds-theme', theme); + this.currentTheme = theme; + } + } + } +} From 57ecc17636dc922110f31c997a4ae6a19779b74f Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 30 Sep 2025 21:10:42 +0100 Subject: [PATCH 070/224] =?UTF-8?q?added=20theming=20to=20the=20Showcase?= =?UTF-8?q?=20itself=20(and=20replaced=20hardcoded=20values=20with=20`?= =?UTF-8?q?=E2=80=94shw`=20CSS=20variables)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- showcase/app/styles/_globals.scss | 7 +++- showcase/app/styles/_tokens.scss | 41 ------------------- showcase/app/styles/_typography.scss | 6 ++- showcase/app/styles/app.scss | 3 +- .../styles/showcase-components/divider.scss | 4 +- .../app/styles/showcase-components/flex.scss | 4 +- .../app/styles/showcase-components/frame.scss | 6 +-- .../app/styles/showcase-components/grid.scss | 4 +- .../app/styles/showcase-components/label.scss | 2 +- .../showcase-components/placeholder.scss | 8 ++-- .../app/styles/showcase-pages/typography.scss | 3 +- .../app/styles/showcase-theming/dark.scss | 33 +++++++++++++++ .../app/styles/showcase-theming/light.scss | 37 +++++++++++++++++ 13 files changed, 99 insertions(+), 59 deletions(-) delete mode 100644 showcase/app/styles/_tokens.scss create mode 100644 showcase/app/styles/showcase-theming/dark.scss create mode 100644 showcase/app/styles/showcase-theming/light.scss diff --git a/showcase/app/styles/_globals.scss b/showcase/app/styles/_globals.scss index 1447a120e7e..76695a082fc 100644 --- a/showcase/app/styles/_globals.scss +++ b/showcase/app/styles/_globals.scss @@ -19,6 +19,7 @@ body { min-height: 100vh; margin: 0; padding: 0; + color: var(--shw-color-black); background: var(--shw-color-white); } @@ -32,7 +33,7 @@ body { height: 68px; padding: 0 24px; color: var(--shw-color-black); - border-bottom: 1px solid #eaeaea; + border-bottom: 1px solid var(--shw-color-gray-500); } .shw-page-header__logo { @@ -68,6 +69,10 @@ body { line-height: 1; } +.shw-page-header__theme-toggle { + margin-left: auto; +} + .shw-page-aside { padding: 1rem; diff --git a/showcase/app/styles/_tokens.scss b/showcase/app/styles/_tokens.scss deleted file mode 100644 index fa11ede62f2..00000000000 --- a/showcase/app/styles/_tokens.scss +++ /dev/null @@ -1,41 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -// TOKENS (CSS PROPS) - -:root { - // COLORS - --shw-color-white: #fff; - --shw-color-gray-600: #f2f2f3; - --shw-color-gray-500: #dbdbdc; - --shw-color-gray-400: #bfbfc0; - --shw-color-gray-300: #727374; - --shw-color-gray-200: #343536; - --shw-color-gray-100: #1d1e1f; - --shw-color-black: #000; - --shw-color-link-on-black: #4294ff; - --shw-color-link-on-white: #2264d6; - --shw-color-feedback-information-100: #0d44cc; - --shw-color-feedback-information-200: #1563ff; - --shw-color-feedback-information-300: #d0e0ff; - --shw-color-feedback-information-400: #eff5ff; - --shw-color-feedback-success-100: #007854; - --shw-color-feedback-success-200: #00bc7f; - --shw-color-feedback-success-300: #c1f1e0; - --shw-color-feedback-success-400: #ebfdf7; - --shw-color-feedback-warning-100: #975b06; - --shw-color-feedback-warning-200: #eaaa32; - --shw-color-feedback-warning-300: #f9eacd; - --shw-color-feedback-warning-400: #fcf6ea; - --shw-color-feedback-critical-100: #ba2226; - --shw-color-feedback-critical-200: #f25054; - --shw-color-feedback-critical-300: #ffd4d6; - --shw-color-feedback-critical-400: #fcf0f2; - --shw-color-action-active-foreground: #00f; // HTML "blue" - --shw-color-action-active-border: #00f; // HTML "blue" - --shw-color-action-active-background: #f0f8ff; // HTML "aliceblue" - // "FLEX/GRID" COMPONENTS - --shw-layout-gap-base: 1rem; -} diff --git a/showcase/app/styles/_typography.scss b/showcase/app/styles/_typography.scss index d94b4c80230..cad0d0452bf 100644 --- a/showcase/app/styles/_typography.scss +++ b/showcase/app/styles/_typography.scss @@ -86,6 +86,7 @@ $show-font-family-mono: ui-monospace, menlo, consolas, monospace; @mixin shw-font-style-h1() { @include shw-font-family("gilmer"); + color: var(--shw-color-black); font-weight: 700; font-size: 3rem; line-height: 1.3; @@ -95,6 +96,7 @@ $show-font-family-mono: ui-monospace, menlo, consolas, monospace; @mixin shw-font-style-h2() { @include shw-font-family("gilmer"); + color: var(--shw-color-black); font-weight: 400; font-size: 1.8rem; line-height: 1.3; @@ -104,6 +106,7 @@ $show-font-family-mono: ui-monospace, menlo, consolas, monospace; @mixin shw-font-style-h3() { @include shw-font-family("gilmer"); + color: var(--shw-color-black); font-weight: 400; font-size: 1.4rem; line-height: 1.3; @@ -113,7 +116,7 @@ $show-font-family-mono: ui-monospace, menlo, consolas, monospace; @mixin shw-font-style-h4() { @include shw-font-family("gilmer"); - color: #666; // equivalent to `opacity: 0.5` + color: var(--shw-color-gray-300); font-weight: 500; font-size: 1.2rem; line-height: 1.3; @@ -123,6 +126,7 @@ $show-font-family-mono: ui-monospace, menlo, consolas, monospace; @mixin shw-font-style-body { @include shw-font-family("gilmer"); + color: var(--shw-color-black); font-size: 1rem; line-height: 1.4; } diff --git a/showcase/app/styles/app.scss b/showcase/app/styles/app.scss index 3f80ec0b870..a8808eedabd 100644 --- a/showcase/app/styles/app.scss +++ b/showcase/app/styles/app.scss @@ -8,7 +8,8 @@ // global declarations -@use "./tokens"; +@use "./showcase-theming/light"; +@use "./showcase-theming/dark"; @use "./layout"; @use "./typography"; @use "./globals"; diff --git a/showcase/app/styles/showcase-components/divider.scss b/showcase/app/styles/showcase-components/divider.scss index 51f63676a67..19718e76ab3 100644 --- a/showcase/app/styles/showcase-components/divider.scss +++ b/showcase/app/styles/showcase-components/divider.scss @@ -6,9 +6,9 @@ .shw-divider { margin: 3rem 0; border: none; - border-top: 2px solid #ccc; + border-top: 2px solid var(--shw-color-gray-500); } .shw-divider--level-2 { - border-top: 2px dotted #ddd; + border-top-style: dotted; } diff --git a/showcase/app/styles/showcase-components/flex.scss b/showcase/app/styles/showcase-components/flex.scss index d5779511a0a..32808edb42f 100644 --- a/showcase/app/styles/showcase-components/flex.scss +++ b/showcase/app/styles/showcase-components/flex.scss @@ -8,13 +8,13 @@ .shw-flex { & + &, & + .shw-grid { - margin-top: var(--shw-layout-gap-base); + margin-top: 1rem; } } .shw-flex__items { display: flex; - gap: var(--shw-layout-gap-base); + gap: 1rem; .shw-flex--direction-row > & { flex-direction: row; diff --git a/showcase/app/styles/showcase-components/frame.scss b/showcase/app/styles/showcase-components/frame.scss index 3f06392e9a3..08c40f5d49a 100644 --- a/showcase/app/styles/showcase-components/frame.scss +++ b/showcase/app/styles/showcase-components/frame.scss @@ -15,7 +15,7 @@ $shw-frame-navigation-bar-height: 48px; max-width: 100%; height: calc(var(--iframe-height) + #{$shw-frame-navigation-bar-height}); max-height: 100%; - outline: 1px solid #e4e4d4; + outline: 1px solid var(--shw-color-gray-500); } .shw-frame__browser-navigation { @@ -25,12 +25,12 @@ $shw-frame-navigation-bar-height: 48px; height: $shw-frame-navigation-bar-height; // safe area for the dots padding: 8px 24px 8px 120px; - background-color: #fafafa; + background-color: var(--shw-frame-browser-navigation-background); background-image: url('data:image/svg+xml,'); background-repeat: no-repeat; background-position: 24px 50%; background-size: 56px 14px; - border-bottom: 1px solid #e4e4d4; + border-bottom: 1px solid var(--shw-color-gray-500); } .shw-frame__open-link { diff --git a/showcase/app/styles/showcase-components/grid.scss b/showcase/app/styles/showcase-components/grid.scss index 313db6e024b..9d2b9d92d23 100644 --- a/showcase/app/styles/showcase-components/grid.scss +++ b/showcase/app/styles/showcase-components/grid.scss @@ -8,7 +8,7 @@ .shw-grid { & + &, & + .shw-flex { - margin-top: var(--shw-layout-gap-base); + margin-top: 1rem; } } @@ -17,7 +17,7 @@ flex-wrap: wrap; // this will be set via JS grid-template-columns: repeat(var(--shw-grid-columns), 1fr); - gap: var(--shw-layout-gap-base); + gap: 1rem; } .shw-grid__item--grow { diff --git a/showcase/app/styles/showcase-components/label.scss b/showcase/app/styles/showcase-components/label.scss index 2340e936091..bdee3f9b876 100644 --- a/showcase/app/styles/showcase-components/label.scss +++ b/showcase/app/styles/showcase-components/label.scss @@ -10,7 +10,7 @@ .shw-label { @include shw-font-family("rubik"); margin: 0 0 10px 0; - color: #545454; + color: var(--shw-label-text-color); font-size: 0.8rem; line-height: 1.2; } diff --git a/showcase/app/styles/showcase-components/placeholder.scss b/showcase/app/styles/showcase-components/placeholder.scss index df37357fc9b..664ff2e37d4 100644 --- a/showcase/app/styles/showcase-components/placeholder.scss +++ b/showcase/app/styles/showcase-components/placeholder.scss @@ -11,18 +11,18 @@ display: flex; align-items: center; justify-content: center; - color: #6b6b6b; // if background is #EEE then this has the appropriate color contrast (4.59:1) + color: var(--shw-placeholder-text-color); font-weight: bold; font-size: 10px; font-family: monaco, Consolas, "Lucida Console", monospace; line-height: 1.2; text-align: center; - text-shadow: 0 0 5px #fff; - background-color: #eee; + text-shadow: 0 0 5px var(--shw-color-white); + background-color: var(--shw-placeholder-background-color); a, a > & { - color: #333; + color: var(--shw-placeholder-link-color); text-decoration: underline; } } diff --git a/showcase/app/styles/showcase-pages/typography.scss b/showcase/app/styles/showcase-pages/typography.scss index aa44b080a01..6ec00b2e738 100644 --- a/showcase/app/styles/showcase-pages/typography.scss +++ b/showcase/app/styles/showcase-pages/typography.scss @@ -7,11 +7,12 @@ body.page-foundations-typography { .shw-label { - color: #999; + color: var(--shw-color-gray-300); } p[class^="hds-"] { margin: 0; padding: 0; + color: var(--shw-color-black); } } diff --git a/showcase/app/styles/showcase-theming/dark.scss b/showcase/app/styles/showcase-theming/dark.scss new file mode 100644 index 00000000000..a00d5ccb79d --- /dev/null +++ b/showcase/app/styles/showcase-theming/dark.scss @@ -0,0 +1,33 @@ +// SHOWCASE COLORS > DARK THEME + +@mixin shw-theme-color-variables-dark() { + // SEMANTIC PALETTE + --shw-color-white: #1a1a1a; + --shw-color-gray-600: #222225; + --shw-color-gray-500: #353537; + --shw-color-gray-400: #4c4c4d; + --shw-color-gray-300: #89898a; + --shw-color-gray-200: #babbbc; + --shw-color-gray-100: #cccdcf; + --shw-color-black: #e5e5e5; + --shw-color-action-active-foreground: #1a1ae5; + --shw-color-action-active-border: #1a1ae5; + --shw-color-action-active-background: #062139; + // COMPONENTS + --shw-frame-browser-navigation-background: #050505; + --shw-label-text-color: #c4c4c4; + --shw-placeholder-text-color: #949494; + --shw-placeholder-background-color: #121212; + --shw-placeholder-link-color: #ccc; +} + +@media (prefers-color-scheme: dark) { + :root[data-hds-theme="auto"] { + @include shw-theme-color-variables-dark(); + } +} + +.hds-theme-dark, +[data-hds-theme="dark"] { + @include shw-theme-color-variables-dark(); +} diff --git a/showcase/app/styles/showcase-theming/light.scss b/showcase/app/styles/showcase-theming/light.scss new file mode 100644 index 00000000000..5ad549848fa --- /dev/null +++ b/showcase/app/styles/showcase-theming/light.scss @@ -0,0 +1,37 @@ +// SHOWCASE COLORS > LIGHT THEME + +@mixin shw-theme-color-variables-light() { + // SEMANTIC PALETTE + --shw-color-white: #fff; + --shw-color-gray-600: #f2f2f3; + --shw-color-gray-500: #dbdbdc; + --shw-color-gray-400: #bfbfc0; + --shw-color-gray-300: #727374; + --shw-color-gray-200: #343536; + --shw-color-gray-100: #1d1e1f; + --shw-color-black: #000; + --shw-color-action-active-foreground: #00f; // HTML "blue" + --shw-color-action-active-border: #00f; // HTML "blue" + --shw-color-action-active-background: #f0f8ff; // HTML "aliceblue" + // COMPONENTS + --shw-frame-browser-navigation-background: #fafafa; + --shw-label-text-color: #545454; + --shw-placeholder-text-color: #6b6b6b; // if background is #EEE then this has the appropriate color contrast (4.59:1) + --shw-placeholder-background-color: #eee; + --shw-placeholder-link-color: #333; +} + +:root { + @include shw-theme-color-variables-light(); +} + +@media (prefers-color-scheme: light) { + :root[data-shw-theme="auto"] { + @include shw-theme-color-variables-light(); + } +} + +.hds-theme-light, +[data-hds-theme="light"] { + @include shw-theme-color-variables-light(); +} From 4b2549e3c25be3f92229feacac5fb0cada07cdb3 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 30 Sep 2025 20:17:51 +0100 Subject: [PATCH 071/224] added `Shw::ThemeSwitcher` component for showcase --- .../components/shw/theme-switcher/index.gts | 57 +++++++++++++++++++ showcase/app/styles/app.scss | 1 + .../showcase-components/theme-switcher.scss | 32 +++++++++++ 3 files changed, 90 insertions(+) create mode 100644 showcase/app/components/shw/theme-switcher/index.gts create mode 100644 showcase/app/styles/showcase-components/theme-switcher.scss diff --git a/showcase/app/components/shw/theme-switcher/index.gts b/showcase/app/components/shw/theme-switcher/index.gts new file mode 100644 index 00000000000..d2c3c37504b --- /dev/null +++ b/showcase/app/components/shw/theme-switcher/index.gts @@ -0,0 +1,57 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import Component from '@glimmer/component'; +import { on } from '@ember/modifier'; +import { action } from '@ember/object'; +import { service } from '@ember/service'; +import { eq } from 'ember-truth-helpers'; +// import { tracked } from '@glimmer/tracking'; + +import type HdsThemingService from '@hashicorp/design-system-components/services/hds-theming.ts'; + +interface ShwThemeSwitcherSignature { + Element: HTMLDivElement; +} + +const options = { + none: 'None (No theming)', + system: 'System (prefers-color-scheme)', + light: 'Light (data-attribute)', + dark: 'Dark (data-attribute)', +}; + +export default class ShwThemeSwitcher extends Component { + @service declare readonly hdsTheming: HdsThemingService; + + @action + onChangePageTheme(event: Event) { + const select = event.target as HTMLSelectElement; + + // we set the theme in the global service + this.hdsTheming.setTheme(select.value); + } + + +} diff --git a/showcase/app/styles/app.scss b/showcase/app/styles/app.scss index a8808eedabd..ece7e869bb8 100644 --- a/showcase/app/styles/app.scss +++ b/showcase/app/styles/app.scss @@ -24,6 +24,7 @@ @use "./showcase-components/label"; @use "./showcase-components/outliner"; @use "./showcase-components/placeholder"; +@use "./showcase-components/theme-switcher"; @use "./mock-components/app"; @use "./mock-components/demo/breakpoints"; diff --git a/showcase/app/styles/showcase-components/theme-switcher.scss b/showcase/app/styles/showcase-components/theme-switcher.scss new file mode 100644 index 00000000000..f61937282bc --- /dev/null +++ b/showcase/app/styles/showcase-components/theme-switcher.scss @@ -0,0 +1,32 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +.shw-theme-switcher { + display: flex; + gap: 8px; + align-items: center; +} + +.shw-theme-switcher__label { + color: var(--shw-color-black); + font-size: 0.75rem; + font-family: monaco, Consolas, "Lucida Console", monospace; +} + +.shw-theme-switcher__control { + height: 24px; + padding: 2px 24px 2px 8px; + color: var(--shw-color-gray-100); + font-size: 0.75rem; + font-family: monaco, Consolas, "Lucida Console", monospace; + background-color: var(--shw-color-gray-600); + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.34572 7H20.6543C21.8517 7 22.4504 8.4463 21.6028 9.29391L12.9519 17.9515C12.4272 18.4763 11.5728 18.4763 11.0481 17.9515L2.39722 9.29391C1.54961 8.4463 2.14832 7 3.34572 7Z' fill='%23808080'/%3E%3C/svg%3E"); // notice: the 'caret' color is hardcoded here! + background-repeat: no-repeat; + background-position: right 6px top 4px; + background-size: 12px 12px; + border: 1px solid var(--shw-color-gray-400); + border-radius: 3px; + appearance: none; +} From 67461070642db1941ebf4eb78f80c2f17df9a670 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 30 Sep 2025 20:24:05 +0100 Subject: [PATCH 072/224] updated `Mock::App` and added new yielded sub-components --- showcase/app/components/mock/app/index.gts | 22 +- .../components/mock/app/main/form-complex.gts | 357 ++++++++++++++++++ .../mock/app/main/generic-text-content.gts | 13 + .../components/mock/app/main/pagination.gts | 31 ++ .../mock/app/main/table-complex.gts | 164 ++++++++ .../mock/app/sidebar/app-side-nav.gts | 9 + .../components/mock/app/sidebar/side-nav.gts | 2 + 7 files changed, 597 insertions(+), 1 deletion(-) create mode 100644 showcase/app/components/mock/app/main/form-complex.gts create mode 100644 showcase/app/components/mock/app/main/pagination.gts create mode 100644 showcase/app/components/mock/app/main/table-complex.gts diff --git a/showcase/app/components/mock/app/index.gts b/showcase/app/components/mock/app/index.gts index e8ffe853e0b..22d4933ec5e 100644 --- a/showcase/app/components/mock/app/index.gts +++ b/showcase/app/components/mock/app/index.gts @@ -11,10 +11,15 @@ import MockAppSidebarOldSideNav from './sidebar/side-nav'; import MockAppMainPageHeader from './main/page-header'; import MockAppMainGenericTextContent from './main/generic-text-content'; import MockAppMainGenericAdvancedTable from './main/generic-advanced-table'; +import MockAppMainFormComplex from './main/form-complex'; +import MockAppMainTableComplex from './main/table-complex'; import MockAppFooterAppFooter from './footer/app-footer'; // HDS components -import { HdsAppFrame } from '@hashicorp/design-system-components/components'; +import { + HdsAlert, + HdsAppFrame, +} from '@hashicorp/design-system-components/components'; // types import type { ComponentLike } from '@glint/template'; @@ -25,10 +30,14 @@ import type { MockAppSidebarOldSideNavSignature } from './sidebar/side-nav'; import type { MockAppMainPageHeaderSignature } from './main/page-header'; import type { MockAppMainGenericTextContentSignature } from './main/generic-text-content'; import type { MockAppMainGenericAdvancedTableSignature } from './main/generic-advanced-table'; +import type { MockAppMainFormComplexSignature } from './main/form-complex'; +import type { MockAppMainTableComplexSignature } from './main/table-complex'; +import type { MockAppMainPaginationSignature } from './main/pagination'; import type { MockAppFooterAppFooterSignature } from './footer/app-footer'; export interface MockAppSignature { Args: { + hasPageAlert?: boolean; hasHeader?: HdsAppFrameSignature['Args']['hasHeader']; hasSidebar?: HdsAppFrameSignature['Args']['hasSidebar']; hasOldSidebar?: boolean; @@ -52,6 +61,9 @@ export interface MockAppSignature { PageHeader?: ComponentLike; GenericTextContent?: ComponentLike; GenericAdvancedTable?: ComponentLike; + FormComplex?: ComponentLike; + TableComplex?: ComponentLike; + Pagination?: ComponentLike; }, ]; footer?: [ @@ -92,12 +104,20 @@ export default class MockApp extends Component { {{/if}} + {{#if @hasPageAlert}} + + Lorem ipsum + Lorem ipsum dolor sit amet. + + {{/if}}
{{yield (hash PageHeader=MockAppMainPageHeader GenericTextContent=MockAppMainGenericTextContent GenericAdvancedTable=MockAppMainGenericAdvancedTable + FormComplex=MockAppMainFormComplex + TableComplex=MockAppMainTableComplex ) to="main" }} diff --git a/showcase/app/components/mock/app/main/form-complex.gts b/showcase/app/components/mock/app/main/form-complex.gts new file mode 100644 index 00000000000..0b32daaedc3 --- /dev/null +++ b/showcase/app/components/mock/app/main/form-complex.gts @@ -0,0 +1,357 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import Component from '@glimmer/component'; +import style from 'ember-style-modifier/modifiers/style'; + +// HDS components +import { + HdsButton, + HdsButtonSet, + HdsFormCheckboxGroup, + HdsFormFileInputField, + HdsFormMaskedInputField, + HdsFormRadioGroup, + HdsFormRadioCardGroup, + HdsFormSelectField, + HdsFormSuperSelectSingleField, + HdsFormSuperSelectMultipleField, + HdsFormTextInputField, + HdsFormTextareaField, + HdsFormToggleField, + HdsLinkInline, + HdsSeparator, + HdsTextBody, + HdsTextDisplay, +} from '@hashicorp/design-system-components/components'; + +const RADIOCARDS = [ + { + value: '1', + label: 'Radio card label 1', + badge: 'Badge', + checked: true, + description: 'Radio card description 1', + generic: 'Radio card custom content 1', + }, + { + value: '2', + label: 'Radio card label 2', + badge: 'Badge', + description: 'Radio card description 2', + generic: 'Radio card custom content 2', + }, + { + value: '3', + label: 'Radio card label 3', + badge: 'Badge', + description: 'Radio card description 3', + generic: 'Radio card custom content 3', + }, +]; + +const SUPERSELECT1_OPTIONS = [ + { + size: 'Extra Small', + description: '2 vCPU | 1 GiB RAM', + price: '$0.02', + }, + { + size: 'Small', + description: '2 vCPU | 2 GiB RAM', + price: '$0.04', + disabled: true, + }, + { + size: 'Medium', + description: '4 vCPU | 4 GiB RAM', + price: '$0.08', + disabled: true, + }, + { size: 'Large', description: '8 vCPU | 8 GiB RAM', price: '$0.16' }, + { + size: 'Extra Large', + description: '16 vCPU | 16 GiB RAM', + price: '$0.32', + }, +]; +const SELECTED_SUPERSELECT1_OPTION = SUPERSELECT1_OPTIONS[1]; + +const SUPERSELECT2_OPTIONS = ['Option 1', 'Option 2', 'Option 3']; +const SELECTED_SUPERSELECT2_OPTIONS = [ + SUPERSELECT2_OPTIONS[0], + SUPERSELECT2_OPTIONS[1], +]; + +const noop = () => {}; + +export interface MockAppMainFormComplexSignature { + Args: { + showAll?: boolean; + showErrors?: boolean; + showIntro?: boolean; + showCheckbox?: boolean; + showFileInput?: boolean; + showMaskedInput?: boolean; + showRadio?: boolean; + showRadioCard?: boolean; + showSelect?: boolean; + showSuperSelect?: boolean; + showTextarea?: boolean; + showTextInput?: boolean; + showToggle?: boolean; + showButtons?: boolean; + }; + Element: HTMLDivElement; +} + +export default class MockAppMainFormComplex extends Component { + _showIntro; + _showCheckbox; + _showFileInput; + _showMaskedInput; + _showRadio; + _showRadioCard; + _showSelect; + _showSuperSelect; + _showTextarea; + _showTextInput; + _showToggle; + _showButtons; + _showErrors; + + constructor(owner: unknown, args: MockAppMainFormComplexSignature['Args']) { + super(owner, args); + this._showIntro = this.args.showIntro ?? this.args.showAll ?? false; + this._showCheckbox = this.args.showCheckbox ?? this.args.showAll ?? false; + this._showFileInput = this.args.showFileInput ?? this.args.showAll ?? false; + this._showMaskedInput = + this.args.showMaskedInput ?? this.args.showAll ?? false; + this._showRadio = this.args.showRadio ?? this.args.showAll ?? false; + this._showRadioCard = this.args.showRadioCard ?? this.args.showAll ?? false; + this._showSelect = this.args.showSelect ?? this.args.showAll ?? false; + this._showSuperSelect = + this.args.showSuperSelect ?? this.args.showAll ?? false; + this._showTextarea = this.args.showTextarea ?? this.args.showAll ?? false; + this._showToggle = this.args.showToggle ?? this.args.showAll ?? false; + this._showErrors = this.args.showErrors ?? this.args.showAll ?? false; + // we want at least something to be visible by default + this._showTextInput = this.args.showTextInput ?? this.args.showAll ?? true; + this._showButtons = this.args.showButtons ?? this.args.showAll ?? true; + } + + +} diff --git a/showcase/app/components/mock/app/main/generic-text-content.gts b/showcase/app/components/mock/app/main/generic-text-content.gts index 94c54345959..0fd674d4f35 100644 --- a/showcase/app/components/mock/app/main/generic-text-content.gts +++ b/showcase/app/components/mock/app/main/generic-text-content.gts @@ -8,16 +8,23 @@ import type { TemplateOnlyComponent } from '@ember/component/template-only'; // HDS components import { HdsLinkInline, + HdsTextDisplay, HdsTextBody, } from '@hashicorp/design-system-components/components'; export interface MockAppMainGenericTextContentSignature { + Args: { + showHeadings?: boolean; + }; Element: HTMLDivElement; } const MockAppMainGenericTextContent: TemplateOnlyComponent = diff --git a/showcase/app/components/mock/app/sidebar/side-nav.gts b/showcase/app/components/mock/app/sidebar/side-nav.gts index c5f61f41237..2bfad93852e 100644 --- a/showcase/app/components/mock/app/sidebar/side-nav.gts +++ b/showcase/app/components/mock/app/sidebar/side-nav.gts @@ -153,9 +153,11 @@ export default class MockAppSidebarOldSideNav extends Component + {{yield to="extraBodyAfter"}} <:footer> {{#if this.showFooter}} + {{yield to="extraFooterBefore"}} Date: Tue, 30 Sep 2025 21:20:41 +0100 Subject: [PATCH 073/224] added `Shw:: ThemeSwitcher` to the Showcase page header --- showcase/app/templates/application.gts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/showcase/app/templates/application.gts b/showcase/app/templates/application.gts index f7617b77a00..44bb388835e 100644 --- a/showcase/app/templates/application.gts +++ b/showcase/app/templates/application.gts @@ -14,6 +14,7 @@ import { modifier } from 'ember-modifier'; import { HdsIcon } from '@hashicorp/design-system-components/components'; import ShwLogoDesignSystem from 'showcase/components/shw/logo/design-system'; +import ShwThemeSwitcher from 'showcase/components/shw/theme-switcher'; export default class Application extends Component { @service declare readonly router: RouterService; @@ -68,6 +69,9 @@ export default class Application extends Component {
Components showcase
+
+ +