diff --git a/packages/components/package.json b/packages/components/package.json index 423e96dd026..84c8a09930e 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -18,6 +18,7 @@ "author": "HashiCorp Design Systems ", "scripts": { "build": "rollup --config", + "postbuild": "cp -R dist/styles/@hashicorp/design-system-components.css ../../showcase/public/assets/styles/@hashicorp/ && cp -R dist/styles/@hashicorp/design-system-components-common.css ../../showcase/public/assets/styles/@hashicorp/ && cp -R dist/styles/@hashicorp/design-system-power-select-overrides.css ../../showcase/public/assets/styles/@hashicorp/", "format": "prettier . --cache --write", "lint": "concurrently \"pnpm:lint:*(!fix)\" --names \"lint:\" --prefixColors auto", "lint:fix": "concurrently \"pnpm:lint:*:fix\" --names \"fix:\" --prefixColors auto && pnpm run format", diff --git a/packages/tokens/dist/cloud-email/helpers/typography.css b/packages/tokens/dist/cloud-email/helpers/typography.css index 7adb62f4fd0..3d71bb8637e 100644 --- a/packages/tokens/dist/cloud-email/helpers/typography.css +++ b/packages/tokens/dist/cloud-email/helpers/typography.css @@ -17,6 +17,6 @@ .hds-typography-body-300 { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; font-size: 16px; line-height: 1.5; margin: 0; padding: 0; } .hds-typography-body-200 { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; font-size: 14px; line-height: 1.4286; margin: 0; padding: 0; } .hds-typography-body-100 { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; font-size: 13px; line-height: 1.3846; margin: 0; padding: 0; } -.hds-typography-code-100 { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.23; margin: 0; padding: 0; } -.hds-typography-code-200 { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.125; margin: 0; padding: 0; } .hds-typography-code-300 { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 16px; line-height: 1.25; margin: 0; padding: 0; } +.hds-typography-code-200 { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.125; margin: 0; padding: 0; } +.hds-typography-code-100 { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.23; margin: 0; padding: 0; } diff --git a/packages/tokens/dist/cloud-email/tokens.scss b/packages/tokens/dist/cloud-email/tokens.scss index b56f31f8c2b..fa363524cb6 100644 --- a/packages/tokens/dist/cloud-email/tokens.scss +++ b/packages/tokens/dist/cloud-email/tokens.scss @@ -204,9 +204,11 @@ $token-typography-font-weight-bold: 700; $token-typography-display-500-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; $token-typography-display-500-font-size: 30px; // 30px/1.875rem $token-typography-display-500-line-height: 1.2666; // 38px +$token-typography-display-500-letter-spacing: -0.5px; // this is `tracking` $token-typography-display-400-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; $token-typography-display-400-font-size: 24px; // 24px/1.5rem $token-typography-display-400-line-height: 1.3333; // 32px +$token-typography-display-400-letter-spacing: 0px; // this is `tracking` $token-typography-display-300-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; $token-typography-display-300-font-size: 18px; // 18px/1.125rem $token-typography-display-300-line-height: 1.3333; // 24px @@ -218,6 +220,7 @@ $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: 13px; // 13px/0.8125rem $token-typography-display-100-line-height: 1.3846; // 18px +$token-typography-display-100-letter-spacing: 0px; // this is `tracking` $token-typography-body-300-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; $token-typography-body-300-font-size: 16px; // 16px/1rem $token-typography-body-300-line-height: 1.5; // 24px @@ -227,12 +230,12 @@ $token-typography-body-200-line-height: 1.4286; // 20px $token-typography-body-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; $token-typography-body-100-font-size: 13px; // 13px/0.8125rem $token-typography-body-100-line-height: 1.3846; // 18px -$token-typography-code-100-font-family: ui-monospace, Menlo, Consolas, monospace; -$token-typography-code-100-font-size: 13px; // 13px/0.8125rem -$token-typography-code-100-line-height: 1.23; // 16px -$token-typography-code-200-font-family: ui-monospace, Menlo, Consolas, monospace; -$token-typography-code-200-font-size: 14px; // 14px/0.875rem -$token-typography-code-200-line-height: 1.125; // 18px $token-typography-code-300-font-family: ui-monospace, Menlo, Consolas, monospace; $token-typography-code-300-font-size: 16px; // 16px/1rem $token-typography-code-300-line-height: 1.25; // 20px +$token-typography-code-200-font-family: ui-monospace, Menlo, Consolas, monospace; +$token-typography-code-200-font-size: 14px; // 14px/0.875rem +$token-typography-code-200-line-height: 1.125; // 18px +$token-typography-code-100-font-family: ui-monospace, Menlo, Consolas, monospace; +$token-typography-code-100-font-size: 13px; // 13px/0.8125rem +$token-typography-code-100-line-height: 1.23; // 16px diff --git a/packages/tokens/dist/devdot/css/helpers/typography.css b/packages/tokens/dist/devdot/css/helpers/typography.css index c0913ef1a67..63dd3021863 100644 --- a/packages/tokens/dist/devdot/css/helpers/typography.css +++ b/packages/tokens/dist/devdot/css/helpers/typography.css @@ -17,6 +17,6 @@ .hds-typography-body-300 { font-family: var(--token-typography-body-300-font-family); font-size: var(--token-typography-body-300-font-size); line-height: var(--token-typography-body-300-line-height); margin: 0; padding: 0; } .hds-typography-body-200 { font-family: var(--token-typography-body-200-font-family); font-size: var(--token-typography-body-200-font-size); line-height: var(--token-typography-body-200-line-height); margin: 0; padding: 0; } .hds-typography-body-100 { font-family: var(--token-typography-body-100-font-family); font-size: var(--token-typography-body-100-font-size); line-height: var(--token-typography-body-100-line-height); margin: 0; padding: 0; } -.hds-typography-code-100 { font-family: var(--token-typography-code-100-font-family); font-size: var(--token-typography-code-100-font-size); line-height: var(--token-typography-code-100-line-height); margin: 0; padding: 0; } -.hds-typography-code-200 { font-family: var(--token-typography-code-200-font-family); font-size: var(--token-typography-code-200-font-size); line-height: var(--token-typography-code-200-line-height); margin: 0; padding: 0; } .hds-typography-code-300 { font-family: var(--token-typography-code-300-font-family); font-size: var(--token-typography-code-300-font-size); line-height: var(--token-typography-code-300-line-height); margin: 0; padding: 0; } +.hds-typography-code-200 { font-family: var(--token-typography-code-200-font-family); font-size: var(--token-typography-code-200-font-size); line-height: var(--token-typography-code-200-line-height); margin: 0; padding: 0; } +.hds-typography-code-100 { font-family: var(--token-typography-code-100-font-family); font-size: var(--token-typography-code-100-font-size); line-height: var(--token-typography-code-100-line-height); margin: 0; padding: 0; } diff --git a/packages/tokens/dist/devdot/css/tokens.css b/packages/tokens/dist/devdot/css/tokens.css index 6a397c6a364..36bd3839b41 100644 --- a/packages/tokens/dist/devdot/css/tokens.css +++ b/packages/tokens/dist/devdot/css/tokens.css @@ -358,9 +358,11 @@ --token-typography-display-500-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-display-500-font-size: 1.875rem; /** 30px/1.875rem */ --token-typography-display-500-line-height: 1.2666; /** 38px */ + --token-typography-display-500-letter-spacing: -0.5px; /** this is `tracking` */ --token-typography-display-400-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-display-400-font-size: 1.5rem; /** 24px/1.5rem */ --token-typography-display-400-line-height: 1.3333; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ --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 */ @@ -372,6 +374,7 @@ --token-typography-display-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-display-100-font-size: 0.8125rem; /** 13px/0.8125rem */ --token-typography-display-100-line-height: 1.3846; /** 18px */ + --token-typography-display-100-letter-spacing: 0px; /** this is `tracking` */ --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 */ @@ -381,13 +384,13 @@ --token-typography-body-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-body-100-font-size: 0.8125rem; /** 13px/0.8125rem */ --token-typography-body-100-line-height: 1.3846; /** 18px */ - --token-typography-code-100-font-family: ui-monospace, Menlo, Consolas, monospace; - --token-typography-code-100-font-size: 0.8125rem; /** 13px/0.8125rem */ - --token-typography-code-100-line-height: 1.23; /** 16px */ - --token-typography-code-200-font-family: ui-monospace, Menlo, Consolas, monospace; - --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ - --token-typography-code-200-line-height: 1.125; /** 18px */ --token-typography-code-300-font-family: ui-monospace, Menlo, Consolas, monospace; --token-typography-code-300-font-size: 1rem; /** 16px/1rem */ --token-typography-code-300-line-height: 1.25; /** 20px */ + --token-typography-code-200-font-family: ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.125; /** 18px */ + --token-typography-code-100-font-family: ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-100-font-size: 0.8125rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.23; /** 16px */ } diff --git a/packages/tokens/dist/docs/products/themed-tokens.json b/packages/tokens/dist/docs/products/themed-tokens.json index 5d7ccc56df0..f8556d4fae5 100644 --- a/packages/tokens/dist/docs/products/themed-tokens.json +++ b/packages/tokens/dist/docs/products/themed-tokens.json @@ -991,10 +991,24 @@ "$type": "color", "$value": "#656a7633", "group": "semantic", + "$modes": { + "hds": "#656a7633", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, "original": { "$type": "color", "$value": "{color.palette.alpha-200}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-200}", + "cds-g0": "{carbon.themes.white.borderSubtle03}", + "cds-g10": "{carbon.themes.g10.borderSubtle03}", + "cds-g90": "{carbon.themes.g90.borderSubtle03}", + "cds-g100": "{carbon.themes.g100.borderSubtle03}" + }, "key": "{color.border.primary}" }, "name": "token-color-border-primary", @@ -1012,10 +1026,24 @@ "$type": "color", "$value": "#656a761a", "group": "semantic", + "$modes": { + "hds": "#656a761a", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, "original": { "$type": "color", "$value": "{color.palette.alpha-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-100}", + "cds-g0": "{carbon.themes.white.borderSubtle00}", + "cds-g10": "{carbon.themes.g10.borderSubtle00}", + "cds-g90": "{carbon.themes.g90.borderSubtle00}", + "cds-g100": "{carbon.themes.g100.borderSubtle00}" + }, "key": "{color.border.faint}" }, "name": "token-color-border-faint", @@ -1033,10 +1061,24 @@ "$type": "color", "$value": "#3b3d4566", "group": "semantic", + "$modes": { + "hds": "#3b3d4566", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, "original": { "$type": "color", "$value": "{color.palette.alpha-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-300}", + "cds-g0": "{carbon.themes.white.borderSubtle01}", + "cds-g10": "{carbon.themes.g10.borderSubtle01}", + "cds-g90": "{carbon.themes.g90.borderSubtle01}", + "cds-g100": "{carbon.themes.g100.borderSubtle01}" + }, "key": "{color.border.strong}" }, "name": "token-color-border-strong", @@ -1054,10 +1096,24 @@ "$type": "color", "$value": "#cce3fe", "group": "semantic", + "$modes": { + "hds": "#cce3fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, "original": { "$type": "color", "$value": "{color.palette.blue-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-100}", + "cds-g0": "{carbon.color.blue.60}", + "cds-g10": "{carbon.color.blue.60}", + "cds-g90": "{carbon.color.blue.50}", + "cds-g100": "{carbon.color.blue.50}" + }, "key": "{color.border.action}" }, "name": "token-color-border-action", @@ -1075,10 +1131,24 @@ "$type": "color", "$value": "#ead2fe", "group": "semantic", + "$modes": { + "hds": "#ead2fe", + "cds-g0": "#be95ff", + "cds-g10": "#be95ff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, "original": { "$type": "color", "$value": "{color.palette.purple-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-100}", + "cds-g0": "{carbon.color.purple.40}", + "cds-g10": "{carbon.color.purple.40}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, "key": "{color.border.highlight}" }, "name": "token-color-border-highlight", @@ -1096,10 +1166,24 @@ "$type": "color", "$value": "#cceeda", "group": "semantic", + "$modes": { + "hds": "#cceeda", + "cds-g0": "#42be65", + "cds-g10": "#42be65", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, "original": { "$type": "color", "$value": "{color.palette.green-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-100}", + "cds-g0": "{carbon.color.green.40}", + "cds-g10": "{carbon.color.green.40}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, "key": "{color.border.success}" }, "name": "token-color-border-success", @@ -1117,10 +1201,24 @@ "$type": "color", "$value": "#fbeabf", "group": "semantic", + "$modes": { + "hds": "#fbeabf", + "cds-g0": "#ff832b", + "cds-g10": "#ff832b", + "cds-g90": "#eb6200", + "cds-g100": "#eb6200" + }, "original": { "$type": "color", "$value": "{color.palette.amber-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.orange.40}", + "cds-g10": "{carbon.color.orange.40}", + "cds-g90": "{carbon.color.orange.50}", + "cds-g100": "{carbon.color.orange.50}" + }, "key": "{color.border.warning}" }, "name": "token-color-border-warning", @@ -1138,10 +1236,24 @@ "$type": "color", "$value": "#fbd4d4", "group": "semantic", + "$modes": { + "hds": "#fbd4d4", + "cds-g0": "#ff8389", + "cds-g10": "#ff8389", + "cds-g90": "#fa4d56", + "cds-g100": "#fa4d56" + }, "original": { "$type": "color", "$value": "{color.palette.red-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-100}", + "cds-g0": "{carbon.color.red.40}", + "cds-g10": "{carbon.color.red.40}", + "cds-g90": "{carbon.color.red.50}", + "cds-g100": "{carbon.color.red.50}" + }, "key": "{color.border.critical}" }, "name": "token-color-border-critical", @@ -1159,10 +1271,24 @@ "$type": "color", "$value": "#0c56e9", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", "$value": "{color.palette.blue-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, "key": "{color.focus.action.internal}" }, "name": "token-color-focus-action-internal", @@ -1182,11 +1308,25 @@ "$value": "#5990ff", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, "original": { "$type": "color", "$value": "#5990ff", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, "key": "{color.focus.action.external}" }, "name": "token-color-focus-action-external", @@ -1203,12 +1343,26 @@ "token-color-focus-critical-internal": { "key": "{color.focus.critical.internal}", "$type": "color", - "$value": "#c00005", + "$value": "#0c56e9", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.red-300}", + "$value": "{color.palette.blue-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, "key": "{color.focus.critical.internal}" }, "name": "token-color-focus-critical-internal", @@ -1225,14 +1379,28 @@ "token-color-focus-critical-external": { "key": "{color.focus.critical.external}", "$type": "color", - "$value": "#dd7578", + "$value": "#5990ff", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, "original": { "$type": "color", - "$value": "#dd7578", + "$value": "#5990ff", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, "key": "{color.focus.critical.external}" }, "name": "token-color-focus-critical-external", @@ -1251,10 +1419,24 @@ "$type": "color", "$value": "#0c0c0e", "group": "semantic", + "$modes": { + "hds": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-700}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, "key": "{color.foreground.strong}" }, "name": "token-color-foreground-strong", @@ -1270,10 +1452,10 @@ "token-color-foreground-primary": { "key": "{color.foreground.primary}", "$type": "color", - "$value": "#ffffff", + "$value": "#3b3d45", "group": "semantic", "$modes": { - "hds": "#ffffff", + "hds": "#3b3d45", "cds-g0": "#161616", "cds-g10": "#161616", "cds-g90": "#f4f4f4", @@ -1281,10 +1463,10 @@ }, "original": { "$type": "color", - "$value": "#ffffff", + "$value": "{color.palette.neutral-600}", "group": "semantic", "$modes": { - "hds": "#ffffff", + "hds": "{color.palette.neutral-600}", "cds-g0": "{carbon.themes.white.textPrimary}", "cds-g10": "{carbon.themes.g10.textPrimary}", "cds-g90": "{carbon.themes.g90.textPrimary}", @@ -1307,10 +1489,24 @@ "$type": "color", "$value": "#656a76", "group": "semantic", + "$modes": { + "hds": "#656a76", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-500}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-500}", + "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.faint}" }, "name": "token-color-foreground-faint", @@ -1326,12 +1522,26 @@ "token-color-foreground-high-contrast": { "key": "{color.foreground.high-contrast}", "$type": "color", - "$value": "#ffffff", + "$value": "#8c909c", "group": "semantic", + "$modes": { + "hds": "#8c909c", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{color.palette.neutral-400}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, "key": "{color.foreground.high-contrast}" }, "name": "token-color-foreground-high-contrast", @@ -1349,10 +1559,24 @@ "$type": "color", "$value": "#8c909c", "group": "semantic", + "$modes": { + "hds": "#8c909c", + "cds-g0": "rgba(22, 22, 22, 0.25)", + "cds-g10": "rgba(22, 22, 22, 0.25)", + "cds-g90": "rgba(244, 244, 244, 0.25)", + "cds-g100": "rgba(244, 244, 244, 0.25)" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-400}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textDisabled}", + "cds-g10": "{carbon.themes.g10.textDisabled}", + "cds-g90": "{carbon.themes.g90.textDisabled}", + "cds-g100": "{carbon.themes.g100.textDisabled}" + }, "key": "{color.foreground.disabled}" }, "name": "token-color-foreground-disabled", @@ -1370,10 +1594,24 @@ "$type": "color", "$value": "#1060ff", "group": "semantic", + "$modes": { + "hds": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#78a9ff", + "cds-g100": "#78a9ff" + }, "original": { "$type": "color", "$value": "{color.palette.blue-200}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.white.linkPrimary}", + "cds-g10": "{carbon.themes.g10.linkPrimary}", + "cds-g90": "{carbon.themes.g90.linkPrimary}", + "cds-g100": "{carbon.themes.g100.linkPrimary}" + }, "key": "{color.foreground.action}" }, "name": "token-color-foreground-action", @@ -1391,10 +1629,24 @@ "$type": "color", "$value": "#0c56e9", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, "original": { "$type": "color", "$value": "{color.palette.blue-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, "key": "{color.foreground.action-hover}" }, "name": "token-color-foreground-action-hover", @@ -1412,10 +1664,24 @@ "$type": "color", "$value": "#0046d1", "group": "semantic", + "$modes": { + "hds": "#0046d1", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, "original": { "$type": "color", "$value": "{color.palette.blue-400}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, "key": "{color.foreground.action-active}" }, "name": "token-color-foreground-action-active", @@ -1433,10 +1699,24 @@ "$type": "color", "$value": "#a737ff", "group": "semantic", + "$modes": { + "hds": "#a737ff", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, "original": { "$type": "color", "$value": "{color.palette.purple-200}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, "key": "{color.foreground.highlight}" }, "name": "token-color-foreground-highlight", @@ -1454,10 +1734,24 @@ "$type": "color", "$value": "#911ced", "group": "semantic", + "$modes": { + "hds": "#911ced", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#d4bbff", + "cds-g100": "#d4bbff" + }, "original": { "$type": "color", "$value": "{color.palette.purple-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-300}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.30}", + "cds-g100": "{carbon.color.purple.30}" + }, "key": "{color.foreground.highlight-on-surface}" }, "name": "token-color-foreground-highlight-on-surface", @@ -1475,10 +1769,24 @@ "$type": "color", "$value": "#42215b", "group": "semantic", + "$modes": { + "hds": "#42215b", + "cds-g0": "#491d8b", + "cds-g10": "#491d8b", + "cds-g90": "#e8daff", + "cds-g100": "#d4bbff" + }, "original": { "$type": "color", "$value": "{color.palette.purple-500}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-500}", + "cds-g0": "{carbon.color.purple.80}", + "cds-g10": "{carbon.color.purple.80}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.30}" + }, "key": "{color.foreground.highlight-high-contrast}" }, "name": "token-color-foreground-highlight-high-contrast", @@ -1496,10 +1804,24 @@ "$type": "color", "$value": "#008a22", "group": "semantic", + "$modes": { + "hds": "#008a22", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#42be65", + "cds-g100": "#42be65" + }, "original": { "$type": "color", "$value": "{color.palette.green-200}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-200}", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.40}", + "cds-g100": "{carbon.color.green.40}" + }, "key": "{color.foreground.success}" }, "name": "token-color-foreground-success", @@ -1517,10 +1839,24 @@ "$type": "color", "$value": "#00781e", "group": "semantic", + "$modes": { + "hds": "#00781e", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#6fdc8c", + "cds-g100": "#6fdc8c" + }, "original": { "$type": "color", "$value": "{color.palette.green-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-300}", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.30}", + "cds-g100": "{carbon.color.green.30}" + }, "key": "{color.foreground.success-on-surface}" }, "name": "token-color-foreground-success-on-surface", @@ -1538,10 +1874,24 @@ "$type": "color", "$value": "#054220", "group": "semantic", + "$modes": { + "hds": "#054220", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, "original": { "$type": "color", "$value": "{color.palette.green-500}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-500}", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, "key": "{color.foreground.success-high-contrast}" }, "name": "token-color-foreground-success-high-contrast", @@ -1559,10 +1909,24 @@ "$type": "color", "$value": "#bb5a00", "group": "semantic", + "$modes": { + "hds": "#bb5a00", + "cds-g0": "#ba4e00", + "cds-g10": "#ba4e00", + "cds-g90": "#ff832b", + "cds-g100": "#ff832b" + }, "original": { "$type": "color", "$value": "{color.palette.amber-200}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.orange.60}", + "cds-g10": "{carbon.color.orange.60}", + "cds-g90": "{carbon.color.orange.40}", + "cds-g100": "{carbon.color.orange.40}" + }, "key": "{color.foreground.warning}" }, "name": "token-color-foreground-warning", @@ -1580,10 +1944,24 @@ "$type": "color", "$value": "#9e4b00", "group": "semantic", + "$modes": { + "hds": "#9e4b00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffb784", + "cds-g100": "#ffb784" + }, "original": { "$type": "color", "$value": "{color.palette.amber-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-300}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.30}", + "cds-g100": "{carbon.color.orange.30}" + }, "key": "{color.foreground.warning-on-surface}" }, "name": "token-color-foreground-warning-on-surface", @@ -1601,10 +1979,24 @@ "$type": "color", "$value": "#542800", "group": "semantic", + "$modes": { + "hds": "#542800", + "cds-g0": "#5e2900", + "cds-g10": "#5e2900", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, "original": { "$type": "color", "$value": "{color.palette.amber-500}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-500}", + "cds-g0": "{carbon.color.orange.80}", + "cds-g10": "{carbon.color.orange.80}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, "key": "{color.foreground.warning-high-contrast}" }, "name": "token-color-foreground-warning-high-contrast", @@ -1622,10 +2014,24 @@ "$type": "color", "$value": "#e52228", "group": "semantic", + "$modes": { + "hds": "#e52228", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#ff8389", + "cds-g100": "#ff8389" + }, "original": { "$type": "color", "$value": "{color.palette.red-200}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-200}", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.40}", + "cds-g100": "{carbon.color.red.40}" + }, "key": "{color.foreground.critical}" }, "name": "token-color-foreground-critical", @@ -1643,10 +2049,24 @@ "$type": "color", "$value": "#c00005", "group": "semantic", + "$modes": { + "hds": "#c00005", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffb3b8", + "cds-g100": "#ffb3b8" + }, "original": { "$type": "color", "$value": "{color.palette.red-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-300}", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.30}", + "cds-g100": "{carbon.color.red.30}" + }, "key": "{color.foreground.critical-on-surface}" }, "name": "token-color-foreground-critical-on-surface", @@ -1664,10 +2084,24 @@ "$type": "color", "$value": "#51130a", "group": "semantic", + "$modes": { + "hds": "#51130a", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, "original": { "$type": "color", "$value": "{color.palette.red-500}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-500}", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, "key": "{color.foreground.critical-high-contrast}" }, "name": "token-color-foreground-critical-high-contrast", @@ -1685,10 +2119,24 @@ "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-0}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, "key": "{color.page.primary}" }, "name": "token-color-page-primary", @@ -1704,12 +2152,26 @@ "token-color-page-faint": { "key": "{color.page.faint}", "$type": "color", - "$value": "#fafafa", + "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-50}", + "$value": "{color.palette.neutral-0}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, "key": "{color.page.faint}" }, "name": "token-color-page-faint", @@ -1727,10 +2189,24 @@ "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-0}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.primary}" }, "name": "token-color-surface-primary", @@ -1748,10 +2224,24 @@ "$type": "color", "$value": "#fafafa", "group": "semantic", + "$modes": { + "hds": "#fafafa", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.faint}" }, "name": "token-color-surface-faint", @@ -1769,10 +2259,24 @@ "$type": "color", "$value": "#f1f2f3", "group": "semantic", + "$modes": { + "hds": "#f1f2f3", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.strong}" }, "name": "token-color-surface-strong", @@ -1790,10 +2294,24 @@ "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-0}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.interactive}" }, "name": "token-color-surface-interactive", @@ -1811,10 +2329,24 @@ "$type": "color", "$value": "#f1f2f3", "group": "semantic", + "$modes": { + "hds": "#f1f2f3", + "cds-g0": "#e8e8e8", + "cds-g10": "#e8e8e8", + "cds-g90": "#474747", + "cds-g100": "#333333" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerHover01}", + "cds-g10": "{carbon.themes.g10.layerHover01}", + "cds-g90": "{carbon.themes.g90.layerHover01}", + "cds-g100": "{carbon.themes.g100.layerHover01}" + }, "key": "{color.surface.interactive-hover}" }, "name": "token-color-surface-interactive-hover", @@ -1832,10 +2364,24 @@ "$type": "color", "$value": "#dedfe3", "group": "semantic", + "$modes": { + "hds": "#dedfe3", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-200}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.white.layerActive01}", + "cds-g10": "{carbon.themes.g10.layerActive01}", + "cds-g90": "{carbon.themes.g90.layerActive01}", + "cds-g100": "{carbon.themes.g100.layerActive01}" + }, "key": "{color.surface.interactive-active}" }, "name": "token-color-surface-interactive-active", @@ -1853,10 +2399,24 @@ "$type": "color", "$value": "#fafafa", "group": "semantic", + "$modes": { + "hds": "#fafafa", + "cds-g0": "#FF0000", + "cds-g10": "#FF0000", + "cds-g90": "#FF0000", + "cds-g100": "#FF0000" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-50}", + "cds-g0": "#FF0000", + "cds-g10": "#FF0000", + "cds-g90": "#FF0000", + "cds-g100": "#FF0000" + }, "key": "{color.surface.interactive-disabled}" }, "name": "token-color-surface-interactive-disabled", @@ -1874,10 +2434,24 @@ "$type": "color", "$value": "#f2f8ff", "group": "semantic", + "$modes": { + "hds": "#f2f8ff", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, "original": { "$type": "color", "$value": "{color.palette.blue-50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-50}", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.70}", + "cds-g100": "{carbon.color.blue.70}" + }, "key": "{color.surface.action}" }, "name": "token-color-surface-action", @@ -1895,10 +2469,24 @@ "$type": "color", "$value": "#f9f2ff", "group": "semantic", + "$modes": { + "hds": "#f9f2ff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, "original": { "$type": "color", "$value": "{color.palette.purple-50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-50}", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, "key": "{color.surface.highlight}" }, "name": "token-color-surface-highlight", @@ -1916,10 +2504,24 @@ "$type": "color", "$value": "#f2fbf6", "group": "semantic", + "$modes": { + "hds": "#f2fbf6", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, "original": { "$type": "color", "$value": "{color.palette.green-50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-50}", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, "key": "{color.surface.success}" }, "name": "token-color-surface-success", @@ -1937,10 +2539,24 @@ "$type": "color", "$value": "#fff9e8", "group": "semantic", + "$modes": { + "hds": "#fff9e8", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, "original": { "$type": "color", "$value": "{color.palette.amber-50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-50}", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, "key": "{color.surface.warning}" }, "name": "token-color-surface-warning", @@ -1958,10 +2574,24 @@ "$type": "color", "$value": "#fff5f5", "group": "semantic", + "$modes": { + "hds": "#fff5f5", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, "original": { "$type": "color", "$value": "{color.palette.red-50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-50}", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, "key": "{color.surface.critical}" }, "name": "token-color-surface-critical", @@ -4128,7 +4758,7 @@ }, "token-focus-ring-critical-box-shadow": { "key": "{focus-ring.critical.box-shadow}", - "$value": "inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578", + "$value": "inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff", "original": { "$value": "{focus-ring.critical.internal-box-shadow}, {focus-ring.critical.external-box-shadow}", "key": "{focus-ring.critical.box-shadow}" @@ -5170,7 +5800,7 @@ "token-form-control-checked-foreground-color": { "key": "{form.control.checked.foreground-color}", "$type": "color", - "$value": "#ffffff", + "$value": "#8c909c", "group": "components", "original": { "$type": "color", @@ -5330,7 +5960,7 @@ "token-form-control-readonly-foreground-color": { "key": "{form.control.readonly.foreground-color}", "$type": "color", - "$value": "#ffffff", + "$value": "#3b3d45", "group": "components", "original": { "$type": "color", @@ -7412,14 +8042,23 @@ "key": "{typography.font-stack.display}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.display.macOS}", - "{typography.font-stack.sans.display.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.display.emoji}" - ], + "$value": "{typography.font-stack.sans.display.combined}", + "$modes": { + "hds": "{typography.font-stack.sans.display.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.font-stack.display}" }, "name": "token-typography-font-stack-display", @@ -7436,14 +8075,23 @@ "key": "{typography.font-stack.text}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.text.macOS}", - "{typography.font-stack.sans.text.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.text.emoji}" - ], + "$value": "{typography.font-stack.sans.text.combined}", + "$modes": { + "hds": "{typography.font-stack.sans.text.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.font-stack.text}" }, "name": "token-typography-font-stack-text", @@ -7460,13 +8108,23 @@ "key": "{typography.font-stack.code}", "$type": "font-family", "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "hds": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.monospace.code.macOS}", - "{typography.font-stack.monospace.code.windows}", - "monospace" - ], + "$value": "{typography.font-stack.monospace.code.combined}", + "$modes": { + "hds": "{typography.font-stack.monospace.code.combined}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, "key": "{typography.font-stack.code}" }, "name": "token-typography-font-stack-code", @@ -7615,9 +8273,23 @@ "key": "{typography.display-500.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.display}", + "$modes": { + "hds": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-500.font-family}" }, "name": "token-typography-display-500-font-family", @@ -7636,11 +8308,25 @@ "$value": "1.875rem", "unit": "px", "comment": "30px/1.875rem", + "$modes": { + "hds": "30", + "cds-g0": "2rem", + "cds-g10": "2rem", + "cds-g90": "2rem", + "cds-g100": "2rem" + }, "original": { "$type": "font-size", "$value": "30", "unit": "px", "comment": "30px/1.875rem", + "$modes": { + "hds": "30", + "cds-g0": "{carbon.typography.heading05.font-size}", + "cds-g10": "{carbon.typography.heading05.font-size}", + "cds-g90": "{carbon.typography.heading05.font-size}", + "cds-g100": "{carbon.typography.heading05.font-size}" + }, "key": "{typography.display-500.font-size}" }, "name": "token-typography-display-500-font-size", @@ -7658,10 +8344,24 @@ "$type": "number", "$value": 1.2666, "comment": "38px", + "$modes": { + "hds": 1.2666, + "cds-g0": 1.25, + "cds-g10": 1.25, + "cds-g90": 1.25, + "cds-g100": 1.25 + }, "original": { "$type": "number", "$value": 1.2666, "comment": "38px", + "$modes": { + "hds": 1.2666, + "cds-g0": "{carbon.typography.heading05.line-height}", + "cds-g10": "{carbon.typography.heading05.line-height}", + "cds-g90": "{carbon.typography.heading05.line-height}", + "cds-g100": "{carbon.typography.heading05.line-height}" + }, "key": "{typography.display-500.line-height}" }, "name": "token-typography-display-500-line-height", @@ -7674,13 +8374,64 @@ "line-height" ] }, + "token-typography-display-500-letter-spacing": { + "key": "{typography.display-500.letter-spacing}", + "$type": "letter-spacing", + "$value": "-0.5px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading05.letter-spacing}", + "cds-g10": "{carbon.typography.heading05.letter-spacing}", + "cds-g90": "{carbon.typography.heading05.letter-spacing}", + "cds-g100": "{carbon.typography.heading05.letter-spacing}" + }, + "key": "{typography.display-500.letter-spacing}" + }, + "name": "token-typography-display-500-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "letter-spacing" + ] + }, "token-typography-display-400-font-family": { "key": "{typography.display-400.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.display}", + "$modes": { + "hds": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-400.font-family}" }, "name": "token-typography-display-400-font-family", @@ -7699,11 +8450,25 @@ "$value": "1.5rem", "unit": "px", "comment": "24px/1.5rem", + "$modes": { + "hds": "24", + "cds-g0": "1.75rem", + "cds-g10": "1.75rem", + "cds-g90": "1.75rem", + "cds-g100": "1.75rem" + }, "original": { "$type": "font-size", "$value": "24", "unit": "px", "comment": "24px/1.5rem", + "$modes": { + "hds": "24", + "cds-g0": "{carbon.typography.heading04.font-size}", + "cds-g10": "{carbon.typography.heading04.font-size}", + "cds-g90": "{carbon.typography.heading04.font-size}", + "cds-g100": "{carbon.typography.heading04.font-size}" + }, "key": "{typography.display-400.font-size}" }, "name": "token-typography-display-400-font-size", @@ -7721,10 +8486,24 @@ "$type": "number", "$value": 1.3333, "comment": "32px", + "$modes": { + "hds": 1.3333, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, "original": { "$type": "number", "$value": 1.3333, "comment": "32px", + "$modes": { + "hds": 1.3333, + "cds-g0": "{carbon.typography.heading04.line-height}", + "cds-g10": "{carbon.typography.heading04.line-height}", + "cds-g90": "{carbon.typography.heading04.line-height}", + "cds-g100": "{carbon.typography.heading04.line-height}" + }, "key": "{typography.display-400.line-height}" }, "name": "token-typography-display-400-line-height", @@ -7737,13 +8516,64 @@ "line-height" ] }, + "token-typography-display-400-letter-spacing": { + "key": "{typography.display-400.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": 0, + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "{carbon.typography.heading04.letter-spacing}", + "cds-g10": "{carbon.typography.heading04.letter-spacing}", + "cds-g90": "{carbon.typography.heading04.letter-spacing}", + "cds-g100": "{carbon.typography.heading04.letter-spacing}" + }, + "key": "{typography.display-400.letter-spacing}" + }, + "name": "token-typography-display-400-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "letter-spacing" + ] + }, "token-typography-display-300-font-family": { "key": "{typography.display-300.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.text}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-300.font-family}" }, "name": "token-typography-display-300-font-family", @@ -7762,11 +8592,25 @@ "$value": "1.125rem", "unit": "px", "comment": "18px/1.125rem", + "$modes": { + "hds": "18", + "cds-g0": "1.25rem", + "cds-g10": "1.25rem", + "cds-g90": "1.25rem", + "cds-g100": "1.25rem" + }, "original": { "$type": "font-size", "$value": "18", "unit": "px", "comment": "18px/1.125rem", + "$modes": { + "hds": "18", + "cds-g0": "{carbon.typography.heading03.font-size}", + "cds-g10": "{carbon.typography.heading03.font-size}", + "cds-g90": "{carbon.typography.heading03.font-size}", + "cds-g100": "{carbon.typography.heading03.font-size}" + }, "key": "{typography.display-300.font-size}" }, "name": "token-typography-display-300-font-size", @@ -7784,10 +8628,24 @@ "$type": "number", "$value": 1.3333, "comment": "24px", + "$modes": { + "hds": 1.3333, + "cds-g0": 1.4, + "cds-g10": 1.4, + "cds-g90": 1.4, + "cds-g100": 1.4 + }, "original": { "$type": "number", "$value": 1.3333, "comment": "24px", + "$modes": { + "hds": 1.3333, + "cds-g0": "{carbon.typography.heading03.line-height}", + "cds-g10": "{carbon.typography.heading03.line-height}", + "cds-g90": "{carbon.typography.heading03.line-height}", + "cds-g100": "{carbon.typography.heading03.line-height}" + }, "key": "{typography.display-300.line-height}" }, "name": "token-typography-display-300-line-height", @@ -7806,11 +8664,25 @@ "$value": "-0.5px", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, "original": { "$type": "letter-spacing", "$value": -0.5, "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading03.letter-spacing}", + "cds-g10": "{carbon.typography.heading03.letter-spacing}", + "cds-g90": "{carbon.typography.heading03.letter-spacing}", + "cds-g100": "{carbon.typography.heading03.letter-spacing}" + }, "key": "{typography.display-300.letter-spacing}" }, "name": "token-typography-display-300-letter-spacing", @@ -7827,9 +8699,23 @@ "key": "{typography.display-200.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$value": "{typography.font-stack.text}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-200.font-family}" }, "name": "token-typography-display-200-font-family", @@ -7848,11 +8734,25 @@ "$value": "1rem", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, "original": { "$type": "font-size", "$value": "16", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.heading02.font-size}", + "cds-g10": "{carbon.typography.heading02.font-size}", + "cds-g90": "{carbon.typography.heading02.font-size}", + "cds-g100": "{carbon.typography.heading02.font-size}" + }, "key": "{typography.display-200.font-size}" }, "name": "token-typography-display-200-font-size", @@ -7870,10 +8770,24 @@ "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "hds": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, "original": { "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "hds": 1.5, + "cds-g0": "{carbon.typography.heading02.line-height}", + "cds-g10": "{carbon.typography.heading02.line-height}", + "cds-g90": "{carbon.typography.heading02.line-height}", + "cds-g100": "{carbon.typography.heading02.line-height}" + }, "key": "{typography.display-200.line-height}" }, "name": "token-typography-display-200-line-height", @@ -7892,11 +8806,25 @@ "$value": "-0.5px", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, "original": { "$type": "letter-spacing", "$value": -0.5, "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading02.letter-spacing}", + "cds-g10": "{carbon.typography.heading02.letter-spacing}", + "cds-g90": "{carbon.typography.heading02.letter-spacing}", + "cds-g100": "{carbon.typography.heading02.letter-spacing}" + }, "key": "{typography.display-200.letter-spacing}" }, "name": "token-typography-display-200-letter-spacing", @@ -7913,9 +8841,23 @@ "key": "{typography.display-100.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.text}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-100.font-family}" }, "name": "token-typography-display-100-font-family", @@ -7934,11 +8876,25 @@ "$value": "0.8125rem", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", "$value": "13", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.heading01.font-size}", + "cds-g10": "{carbon.typography.heading01.font-size}", + "cds-g90": "{carbon.typography.heading01.font-size}", + "cds-g100": "{carbon.typography.heading01.font-size}" + }, "key": "{typography.display-100.font-size}" }, "name": "token-typography-display-100-font-size", @@ -7956,10 +8912,24 @@ "$type": "number", "$value": 1.3846, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", "$value": 1.3846, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": "{carbon.typography.heading01.line-height}", + "cds-g10": "{carbon.typography.heading01.line-height}", + "cds-g90": "{carbon.typography.heading01.line-height}", + "cds-g100": "{carbon.typography.heading01.line-height}" + }, "key": "{typography.display-100.line-height}" }, "name": "token-typography-display-100-line-height", @@ -7972,13 +8942,64 @@ "line-height" ] }, + "token-typography-display-100-letter-spacing": { + "key": "{typography.display-100.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "0.16px", + "cds-g10": "0.16px", + "cds-g90": "0.16px", + "cds-g100": "0.16px" + }, + "original": { + "$type": "letter-spacing", + "$value": 0, + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "{carbon.typography.heading01.letter-spacing}", + "cds-g10": "{carbon.typography.heading01.letter-spacing}", + "cds-g90": "{carbon.typography.heading01.letter-spacing}", + "cds-g100": "{carbon.typography.heading01.letter-spacing}" + }, + "key": "{typography.display-100.letter-spacing}" + }, + "name": "token-typography-display-100-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "letter-spacing" + ] + }, "token-typography-body-300-font-family": { "key": "{typography.body-300.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.text}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-300.font-family}" }, "name": "token-typography-body-300-font-family", @@ -7997,11 +9018,25 @@ "$value": "1rem", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, "original": { "$type": "font-size", "$value": "16", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.body02.font-size}", + "cds-g10": "{carbon.typography.body02.font-size}", + "cds-g90": "{carbon.typography.body02.font-size}", + "cds-g100": "{carbon.typography.body02.font-size}" + }, "key": "{typography.body-300.font-size}" }, "name": "token-typography-body-300-font-size", @@ -8017,12 +9052,26 @@ "token-typography-body-300-line-height": { "key": "{typography.body-300.line-height}", "$type": "number", - "$value": 1.5, + "$value": 1.4286, "comment": "24px", + "$modes": { + "hds": 1.4286, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, "original": { "$type": "number", - "$value": 1.5, + "$value": 1.4286, "comment": "24px", + "$modes": { + "hds": 1.4286, + "cds-g0": "{carbon.typography.body02.line-height}", + "cds-g10": "{carbon.typography.body02.line-height}", + "cds-g90": "{carbon.typography.body02.line-height}", + "cds-g100": "{carbon.typography.body02.line-height}" + }, "key": "{typography.body-300.line-height}" }, "name": "token-typography-body-300-line-height", @@ -8039,9 +9088,23 @@ "key": "{typography.body-200.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.text}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-200.font-family}" }, "name": "token-typography-body-200-font-family", @@ -8060,11 +9123,25 @@ "$value": "0.875rem", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", "$value": "14", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "{carbon.typography.body01.font-size}", + "cds-g10": "{carbon.typography.body01.font-size}", + "cds-g90": "{carbon.typography.body01.font-size}", + "cds-g100": "{carbon.typography.body01.font-size}" + }, "key": "{typography.body-200.font-size}" }, "name": "token-typography-body-200-font-size", @@ -8082,10 +9159,24 @@ "$type": "number", "$value": 1.4286, "comment": "20px", + "$modes": { + "hds": 1.4286, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", "$value": 1.4286, "comment": "20px", + "$modes": { + "hds": 1.4286, + "cds-g0": "{carbon.typography.body01.line-height}", + "cds-g10": "{carbon.typography.body01.line-height}", + "cds-g90": "{carbon.typography.body01.line-height}", + "cds-g100": "{carbon.typography.body01.line-height}" + }, "key": "{typography.body-200.line-height}" }, "name": "token-typography-body-200-line-height", @@ -8102,9 +9193,23 @@ "key": "{typography.body-100.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.text}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-100.font-family}" }, "name": "token-typography-body-100-font-family", @@ -8123,11 +9228,25 @@ "$value": "0.8125rem", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", "$value": "13", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.bodyCompact01.font-size}", + "cds-g10": "{carbon.typography.bodyCompact01.font-size}", + "cds-g90": "{carbon.typography.bodyCompact01.font-size}", + "cds-g100": "{carbon.typography.bodyCompact01.font-size}" + }, "key": "{typography.body-100.font-size}" }, "name": "token-typography-body-100-font-size", @@ -8145,10 +9264,24 @@ "$type": "number", "$value": 1.3846, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, "original": { "$type": "number", "$value": 1.3846, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": "{carbon.typography.bodyCompact01.line-height}", + "cds-g10": "{carbon.typography.bodyCompact01.line-height}", + "cds-g90": "{carbon.typography.bodyCompact01.line-height}", + "cds-g100": "{carbon.typography.bodyCompact01.line-height}" + }, "key": "{typography.body-100.line-height}" }, "name": "token-typography-body-100-line-height", @@ -8161,66 +9294,108 @@ "line-height" ] }, - "token-typography-code-100-font-family": { - "key": "{typography.code-100.font-family}", + "token-typography-code-300-font-family": { + "key": "{typography.code-300.font-family}", "$type": "font-family", "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "hds": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.code}", - "key": "{typography.code-100.font-family}" + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-300.font-family}" }, - "name": "token-typography-code-100-font-family", + "name": "token-typography-code-300-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "font-family" ] }, - "token-typography-code-100-font-size": { - "key": "{typography.code-100.font-size}", + "token-typography-code-300-font-size": { + "key": "{typography.code-300.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "1rem", "unit": "px", - "comment": "13px/0.8125rem", + "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "13", + "$value": "16", "unit": "px", - "comment": "13px/0.8125rem", - "key": "{typography.code-100.font-size}" + "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-300.font-size}" }, - "name": "token-typography-code-100-font-size", + "name": "token-typography-code-300-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "font-size" ] }, - "token-typography-code-100-line-height": { - "key": "{typography.code-100.line-height}", + "token-typography-code-300-line-height": { + "key": "{typography.code-300.line-height}", "$type": "number", - "$value": 1.23, - "comment": "16px", + "$value": 1.25, + "comment": "20px", + "$modes": { + "hds": 1.25, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.23, - "comment": "16px", - "key": "{typography.code-100.line-height}" + "$value": 1.25, + "comment": "20px", + "$modes": { + "hds": 1.25, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-300.line-height}" }, - "name": "token-typography-code-100-line-height", + "name": "token-typography-code-300-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "line-height" ] }, @@ -8228,9 +9403,23 @@ "key": "{typography.code-200.font-family}", "$type": "font-family", "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "hds": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.code}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, "key": "{typography.code-200.font-family}" }, "name": "token-typography-code-200-font-family", @@ -8249,11 +9438,25 @@ "$value": "0.875rem", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", "$value": "14", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, "key": "{typography.code-200.font-size}" }, "name": "token-typography-code-200-font-size", @@ -8271,10 +9474,24 @@ "$type": "number", "$value": 1.125, "comment": "18px", + "$modes": { + "hds": 1.125, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", "$value": 1.125, "comment": "18px", + "$modes": { + "hds": 1.125, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, "key": "{typography.code-200.line-height}" }, "name": "token-typography-code-200-line-height", @@ -8287,66 +9504,108 @@ "line-height" ] }, - "token-typography-code-300-font-family": { - "key": "{typography.code-300.font-family}", + "token-typography-code-100-font-family": { + "key": "{typography.code-100.font-family}", "$type": "font-family", "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "hds": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.code}", - "key": "{typography.code-300.font-family}" + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-100.font-family}" }, - "name": "token-typography-code-300-font-family", + "name": "token-typography-code-100-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "font-family" ] }, - "token-typography-code-300-font-size": { - "key": "{typography.code-300.font-size}", + "token-typography-code-100-font-size": { + "key": "{typography.code-100.font-size}", "$type": "font-size", - "$value": "1rem", + "$value": "0.8125rem", "unit": "px", - "comment": "16px/1rem", + "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "16", + "$value": "13", "unit": "px", - "comment": "16px/1rem", - "key": "{typography.code-300.font-size}" + "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-100.font-size}" }, - "name": "token-typography-code-300-font-size", + "name": "token-typography-code-100-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "font-size" ] }, - "token-typography-code-300-line-height": { - "key": "{typography.code-300.line-height}", + "token-typography-code-100-line-height": { + "key": "{typography.code-100.line-height}", "$type": "number", - "$value": 1.25, - "comment": "20px", + "$value": 1.23, + "comment": "16px", + "$modes": { + "hds": 1.23, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, "original": { "$type": "number", - "$value": 1.25, - "comment": "20px", - "key": "{typography.code-300.line-height}" + "$value": 1.23, + "comment": "16px", + "$modes": { + "hds": 1.23, + "cds-g0": "{carbon.typography.code01.line-height}", + "cds-g10": "{carbon.typography.code01.line-height}", + "cds-g90": "{carbon.typography.code01.line-height}", + "cds-g100": "{carbon.typography.code01.line-height}" + }, + "key": "{typography.code-100.line-height}" }, - "name": "token-typography-code-300-line-height", + "name": "token-typography-code-100-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "line-height" ] } @@ -9341,12 +10600,26 @@ "token-color-border-primary": { "key": "{color.border.primary}", "$type": "color", - "$value": "#656a7633", + "$value": "#c6c6c6", "group": "semantic", + "$modes": { + "hds": "#656a7633", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, "original": { "$type": "color", - "$value": "{color.palette.alpha-200}", + "$value": "{carbon.themes.white.borderSubtle03}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-200}", + "cds-g0": "{carbon.themes.white.borderSubtle03}", + "cds-g10": "{carbon.themes.g10.borderSubtle03}", + "cds-g90": "{carbon.themes.g90.borderSubtle03}", + "cds-g100": "{carbon.themes.g100.borderSubtle03}" + }, "key": "{color.border.primary}" }, "name": "token-color-border-primary", @@ -9362,12 +10635,26 @@ "token-color-border-faint": { "key": "{color.border.faint}", "$type": "color", - "$value": "#656a761a", + "$value": "#e0e0e0", "group": "semantic", + "$modes": { + "hds": "#656a761a", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, "original": { "$type": "color", - "$value": "{color.palette.alpha-100}", + "$value": "{carbon.themes.white.borderSubtle00}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-100}", + "cds-g0": "{carbon.themes.white.borderSubtle00}", + "cds-g10": "{carbon.themes.g10.borderSubtle00}", + "cds-g90": "{carbon.themes.g90.borderSubtle00}", + "cds-g100": "{carbon.themes.g100.borderSubtle00}" + }, "key": "{color.border.faint}" }, "name": "token-color-border-faint", @@ -9383,12 +10670,26 @@ "token-color-border-strong": { "key": "{color.border.strong}", "$type": "color", - "$value": "#3b3d4566", + "$value": "#c6c6c6", "group": "semantic", + "$modes": { + "hds": "#3b3d4566", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, "original": { "$type": "color", - "$value": "{color.palette.alpha-300}", + "$value": "{carbon.themes.white.borderSubtle01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-300}", + "cds-g0": "{carbon.themes.white.borderSubtle01}", + "cds-g10": "{carbon.themes.g10.borderSubtle01}", + "cds-g90": "{carbon.themes.g90.borderSubtle01}", + "cds-g100": "{carbon.themes.g100.borderSubtle01}" + }, "key": "{color.border.strong}" }, "name": "token-color-border-strong", @@ -9404,12 +10705,26 @@ "token-color-border-action": { "key": "{color.border.action}", "$type": "color", - "$value": "#cce3fe", + "$value": "#0f62fe", "group": "semantic", + "$modes": { + "hds": "#cce3fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-100}", + "$value": "{carbon.color.blue.60}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-100}", + "cds-g0": "{carbon.color.blue.60}", + "cds-g10": "{carbon.color.blue.60}", + "cds-g90": "{carbon.color.blue.50}", + "cds-g100": "{carbon.color.blue.50}" + }, "key": "{color.border.action}" }, "name": "token-color-border-action", @@ -9425,12 +10740,26 @@ "token-color-border-highlight": { "key": "{color.border.highlight}", "$type": "color", - "$value": "#ead2fe", + "$value": "#be95ff", "group": "semantic", + "$modes": { + "hds": "#ead2fe", + "cds-g0": "#be95ff", + "cds-g10": "#be95ff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-100}", + "$value": "{carbon.color.purple.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-100}", + "cds-g0": "{carbon.color.purple.40}", + "cds-g10": "{carbon.color.purple.40}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, "key": "{color.border.highlight}" }, "name": "token-color-border-highlight", @@ -9446,12 +10775,26 @@ "token-color-border-success": { "key": "{color.border.success}", "$type": "color", - "$value": "#cceeda", + "$value": "#42be65", "group": "semantic", + "$modes": { + "hds": "#cceeda", + "cds-g0": "#42be65", + "cds-g10": "#42be65", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, "original": { "$type": "color", - "$value": "{color.palette.green-100}", + "$value": "{carbon.color.green.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-100}", + "cds-g0": "{carbon.color.green.40}", + "cds-g10": "{carbon.color.green.40}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, "key": "{color.border.success}" }, "name": "token-color-border-success", @@ -9467,12 +10810,26 @@ "token-color-border-warning": { "key": "{color.border.warning}", "$type": "color", - "$value": "#fbeabf", + "$value": "#ff832b", "group": "semantic", + "$modes": { + "hds": "#fbeabf", + "cds-g0": "#ff832b", + "cds-g10": "#ff832b", + "cds-g90": "#eb6200", + "cds-g100": "#eb6200" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-100}", + "$value": "{carbon.color.orange.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.orange.40}", + "cds-g10": "{carbon.color.orange.40}", + "cds-g90": "{carbon.color.orange.50}", + "cds-g100": "{carbon.color.orange.50}" + }, "key": "{color.border.warning}" }, "name": "token-color-border-warning", @@ -9488,12 +10845,26 @@ "token-color-border-critical": { "key": "{color.border.critical}", "$type": "color", - "$value": "#fbd4d4", + "$value": "#ff8389", "group": "semantic", + "$modes": { + "hds": "#fbd4d4", + "cds-g0": "#ff8389", + "cds-g10": "#ff8389", + "cds-g90": "#fa4d56", + "cds-g100": "#fa4d56" + }, "original": { "$type": "color", - "$value": "{color.palette.red-100}", + "$value": "{carbon.color.red.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-100}", + "cds-g0": "{carbon.color.red.40}", + "cds-g10": "{carbon.color.red.40}", + "cds-g90": "{carbon.color.red.50}", + "cds-g100": "{carbon.color.red.50}" + }, "key": "{color.border.critical}" }, "name": "token-color-border-critical", @@ -9509,12 +10880,26 @@ "token-color-focus-action-internal": { "key": "{color.focus.action.internal}", "$type": "color", - "$value": "#0c56e9", + "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-300}", + "$value": "{carbon.themes.white.focusInset}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, "key": "{color.focus.action.internal}" }, "name": "token-color-focus-action-internal", @@ -9531,14 +10916,28 @@ "token-color-focus-action-external": { "key": "{color.focus.action.external}", "$type": "color", - "$value": "#5990ff", + "$value": "#0f62fe", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, "original": { "$type": "color", - "$value": "#5990ff", + "$value": "{carbon.themes.white.focus}", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, "key": "{color.focus.action.external}" }, "name": "token-color-focus-action-external", @@ -9555,12 +10954,26 @@ "token-color-focus-critical-internal": { "key": "{color.focus.critical.internal}", "$type": "color", - "$value": "#c00005", + "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.red-300}", + "$value": "{carbon.themes.white.focusInset}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, "key": "{color.focus.critical.internal}" }, "name": "token-color-focus-critical-internal", @@ -9577,14 +10990,28 @@ "token-color-focus-critical-external": { "key": "{color.focus.critical.external}", "$type": "color", - "$value": "#dd7578", + "$value": "#0f62fe", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, "original": { "$type": "color", - "$value": "#dd7578", + "$value": "{carbon.themes.white.focus}", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, "key": "{color.focus.critical.external}" }, "name": "token-color-focus-critical-external", @@ -9601,12 +11028,26 @@ "token-color-foreground-strong": { "key": "{color.foreground.strong}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#161616", "group": "semantic", + "$modes": { + "hds": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-700}", + "$value": "{carbon.themes.white.textPrimary}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, "key": "{color.foreground.strong}" }, "name": "token-color-foreground-strong", @@ -9625,7 +11066,7 @@ "$value": "#161616", "group": "semantic", "$modes": { - "hds": "#ffffff", + "hds": "#3b3d45", "cds-g0": "#161616", "cds-g10": "#161616", "cds-g90": "#f4f4f4", @@ -9636,7 +11077,7 @@ "$value": "{carbon.themes.white.textPrimary}", "group": "semantic", "$modes": { - "hds": "#ffffff", + "hds": "{color.palette.neutral-600}", "cds-g0": "{carbon.themes.white.textPrimary}", "cds-g10": "{carbon.themes.g10.textPrimary}", "cds-g90": "{carbon.themes.g90.textPrimary}", @@ -9657,12 +11098,26 @@ "token-color-foreground-faint": { "key": "{color.foreground.faint}", "$type": "color", - "$value": "#656a76", + "$value": "#161616", "group": "semantic", + "$modes": { + "hds": "#656a76", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-500}", + "$value": "{carbon.themes.white.textPrimary}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-500}", + "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.faint}" }, "name": "token-color-foreground-faint", @@ -9680,10 +11135,24 @@ "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#8c909c", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.white.textInverse}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, "key": "{color.foreground.high-contrast}" }, "name": "token-color-foreground-high-contrast", @@ -9699,12 +11168,26 @@ "token-color-foreground-disabled": { "key": "{color.foreground.disabled}", "$type": "color", - "$value": "#8c909c", + "$value": "rgba(22, 22, 22, 0.25)", "group": "semantic", + "$modes": { + "hds": "#8c909c", + "cds-g0": "rgba(22, 22, 22, 0.25)", + "cds-g10": "rgba(22, 22, 22, 0.25)", + "cds-g90": "rgba(244, 244, 244, 0.25)", + "cds-g100": "rgba(244, 244, 244, 0.25)" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-400}", + "$value": "{carbon.themes.white.textDisabled}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textDisabled}", + "cds-g10": "{carbon.themes.g10.textDisabled}", + "cds-g90": "{carbon.themes.g90.textDisabled}", + "cds-g100": "{carbon.themes.g100.textDisabled}" + }, "key": "{color.foreground.disabled}" }, "name": "token-color-foreground-disabled", @@ -9720,12 +11203,26 @@ "token-color-foreground-action": { "key": "{color.foreground.action}", "$type": "color", - "$value": "#1060ff", + "$value": "#0f62fe", "group": "semantic", + "$modes": { + "hds": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#78a9ff", + "cds-g100": "#78a9ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-200}", + "$value": "{carbon.themes.white.linkPrimary}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.white.linkPrimary}", + "cds-g10": "{carbon.themes.g10.linkPrimary}", + "cds-g90": "{carbon.themes.g90.linkPrimary}", + "cds-g100": "{carbon.themes.g100.linkPrimary}" + }, "key": "{color.foreground.action}" }, "name": "token-color-foreground-action", @@ -9741,12 +11238,26 @@ "token-color-foreground-action-hover": { "key": "{color.foreground.action-hover}", "$type": "color", - "$value": "#0c56e9", + "$value": "#0043ce", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-300}", + "$value": "{carbon.themes.white.linkPrimaryHover}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, "key": "{color.foreground.action-hover}" }, "name": "token-color-foreground-action-hover", @@ -9762,12 +11273,26 @@ "token-color-foreground-action-active": { "key": "{color.foreground.action-active}", "$type": "color", - "$value": "#0046d1", + "$value": "#0043ce", "group": "semantic", + "$modes": { + "hds": "#0046d1", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-400}", + "$value": "{carbon.themes.white.linkPrimaryHover}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, "key": "{color.foreground.action-active}" }, "name": "token-color-foreground-action-active", @@ -9783,12 +11308,26 @@ "token-color-foreground-highlight": { "key": "{color.foreground.highlight}", "$type": "color", - "$value": "#a737ff", + "$value": "#8a3ffc", "group": "semantic", + "$modes": { + "hds": "#a737ff", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-200}", + "$value": "{carbon.color.purple.60}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, "key": "{color.foreground.highlight}" }, "name": "token-color-foreground-highlight", @@ -9804,12 +11343,26 @@ "token-color-foreground-highlight-on-surface": { "key": "{color.foreground.highlight-on-surface}", "$type": "color", - "$value": "#911ced", + "$value": "#6929c4", "group": "semantic", + "$modes": { + "hds": "#911ced", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#d4bbff", + "cds-g100": "#d4bbff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-300}", + "$value": "{carbon.color.purple.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-300}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.30}", + "cds-g100": "{carbon.color.purple.30}" + }, "key": "{color.foreground.highlight-on-surface}" }, "name": "token-color-foreground-highlight-on-surface", @@ -9825,12 +11378,26 @@ "token-color-foreground-highlight-high-contrast": { "key": "{color.foreground.highlight-high-contrast}", "$type": "color", - "$value": "#42215b", + "$value": "#491d8b", "group": "semantic", + "$modes": { + "hds": "#42215b", + "cds-g0": "#491d8b", + "cds-g10": "#491d8b", + "cds-g90": "#e8daff", + "cds-g100": "#d4bbff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-500}", + "$value": "{carbon.color.purple.80}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-500}", + "cds-g0": "{carbon.color.purple.80}", + "cds-g10": "{carbon.color.purple.80}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.30}" + }, "key": "{color.foreground.highlight-high-contrast}" }, "name": "token-color-foreground-highlight-high-contrast", @@ -9846,12 +11413,26 @@ "token-color-foreground-success": { "key": "{color.foreground.success}", "$type": "color", - "$value": "#008a22", + "$value": "#198038", "group": "semantic", + "$modes": { + "hds": "#008a22", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#42be65", + "cds-g100": "#42be65" + }, "original": { "$type": "color", - "$value": "{color.palette.green-200}", + "$value": "{carbon.color.green.60}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-200}", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.40}", + "cds-g100": "{carbon.color.green.40}" + }, "key": "{color.foreground.success}" }, "name": "token-color-foreground-success", @@ -9867,12 +11448,26 @@ "token-color-foreground-success-on-surface": { "key": "{color.foreground.success-on-surface}", "$type": "color", - "$value": "#00781e", + "$value": "#0e6027", "group": "semantic", + "$modes": { + "hds": "#00781e", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#6fdc8c", + "cds-g100": "#6fdc8c" + }, "original": { "$type": "color", - "$value": "{color.palette.green-300}", + "$value": "{carbon.color.green.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-300}", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.30}", + "cds-g100": "{carbon.color.green.30}" + }, "key": "{color.foreground.success-on-surface}" }, "name": "token-color-foreground-success-on-surface", @@ -9888,12 +11483,26 @@ "token-color-foreground-success-high-contrast": { "key": "{color.foreground.success-high-contrast}", "$type": "color", - "$value": "#054220", + "$value": "#044317", "group": "semantic", + "$modes": { + "hds": "#054220", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, "original": { "$type": "color", - "$value": "{color.palette.green-500}", + "$value": "{carbon.color.green.80}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-500}", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, "key": "{color.foreground.success-high-contrast}" }, "name": "token-color-foreground-success-high-contrast", @@ -9909,12 +11518,26 @@ "token-color-foreground-warning": { "key": "{color.foreground.warning}", "$type": "color", - "$value": "#bb5a00", + "$value": "#ba4e00", "group": "semantic", + "$modes": { + "hds": "#bb5a00", + "cds-g0": "#ba4e00", + "cds-g10": "#ba4e00", + "cds-g90": "#ff832b", + "cds-g100": "#ff832b" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-200}", + "$value": "{carbon.color.orange.60}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.orange.60}", + "cds-g10": "{carbon.color.orange.60}", + "cds-g90": "{carbon.color.orange.40}", + "cds-g100": "{carbon.color.orange.40}" + }, "key": "{color.foreground.warning}" }, "name": "token-color-foreground-warning", @@ -9930,12 +11553,26 @@ "token-color-foreground-warning-on-surface": { "key": "{color.foreground.warning-on-surface}", "$type": "color", - "$value": "#9e4b00", + "$value": "#8a3800", "group": "semantic", + "$modes": { + "hds": "#9e4b00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffb784", + "cds-g100": "#ffb784" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-300}", + "$value": "{carbon.color.orange.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-300}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.30}", + "cds-g100": "{carbon.color.orange.30}" + }, "key": "{color.foreground.warning-on-surface}" }, "name": "token-color-foreground-warning-on-surface", @@ -9951,12 +11588,26 @@ "token-color-foreground-warning-high-contrast": { "key": "{color.foreground.warning-high-contrast}", "$type": "color", - "$value": "#542800", + "$value": "#5e2900", "group": "semantic", + "$modes": { + "hds": "#542800", + "cds-g0": "#5e2900", + "cds-g10": "#5e2900", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-500}", + "$value": "{carbon.color.orange.80}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-500}", + "cds-g0": "{carbon.color.orange.80}", + "cds-g10": "{carbon.color.orange.80}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, "key": "{color.foreground.warning-high-contrast}" }, "name": "token-color-foreground-warning-high-contrast", @@ -9972,12 +11623,26 @@ "token-color-foreground-critical": { "key": "{color.foreground.critical}", "$type": "color", - "$value": "#e52228", + "$value": "#da1e28", "group": "semantic", + "$modes": { + "hds": "#e52228", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#ff8389", + "cds-g100": "#ff8389" + }, "original": { "$type": "color", - "$value": "{color.palette.red-200}", + "$value": "{carbon.color.red.60}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-200}", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.40}", + "cds-g100": "{carbon.color.red.40}" + }, "key": "{color.foreground.critical}" }, "name": "token-color-foreground-critical", @@ -9993,12 +11658,26 @@ "token-color-foreground-critical-on-surface": { "key": "{color.foreground.critical-on-surface}", "$type": "color", - "$value": "#c00005", + "$value": "#a2191f", "group": "semantic", + "$modes": { + "hds": "#c00005", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffb3b8", + "cds-g100": "#ffb3b8" + }, "original": { "$type": "color", - "$value": "{color.palette.red-300}", + "$value": "{carbon.color.red.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-300}", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.30}", + "cds-g100": "{carbon.color.red.30}" + }, "key": "{color.foreground.critical-on-surface}" }, "name": "token-color-foreground-critical-on-surface", @@ -10014,12 +11693,26 @@ "token-color-foreground-critical-high-contrast": { "key": "{color.foreground.critical-high-contrast}", "$type": "color", - "$value": "#51130a", + "$value": "#750e13", "group": "semantic", + "$modes": { + "hds": "#51130a", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, "original": { "$type": "color", - "$value": "{color.palette.red-500}", + "$value": "{carbon.color.red.80}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-500}", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, "key": "{color.foreground.critical-high-contrast}" }, "name": "token-color-foreground-critical-high-contrast", @@ -10037,10 +11730,24 @@ "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.white.background}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, "key": "{color.page.primary}" }, "name": "token-color-page-primary", @@ -10056,12 +11763,26 @@ "token-color-page-faint": { "key": "{color.page.faint}", "$type": "color", - "$value": "#fafafa", + "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-50}", + "$value": "{carbon.themes.white.background}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, "key": "{color.page.faint}" }, "name": "token-color-page-faint", @@ -10077,12 +11798,26 @@ "token-color-surface-primary": { "key": "{color.surface.primary}", "$type": "color", - "$value": "#ffffff", + "$value": "#f4f4f4", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.white.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.primary}" }, "name": "token-color-surface-primary", @@ -10098,12 +11833,26 @@ "token-color-surface-faint": { "key": "{color.surface.faint}", "$type": "color", - "$value": "#fafafa", + "$value": "#f4f4f4", "group": "semantic", + "$modes": { + "hds": "#fafafa", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-50}", + "$value": "{carbon.themes.white.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.faint}" }, "name": "token-color-surface-faint", @@ -10119,12 +11868,26 @@ "token-color-surface-strong": { "key": "{color.surface.strong}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#f4f4f4", "group": "semantic", + "$modes": { + "hds": "#f1f2f3", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-100}", + "$value": "{carbon.themes.white.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.strong}" }, "name": "token-color-surface-strong", @@ -10140,12 +11903,26 @@ "token-color-surface-interactive": { "key": "{color.surface.interactive}", "$type": "color", - "$value": "#ffffff", + "$value": "#f4f4f4", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.white.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.interactive}" }, "name": "token-color-surface-interactive", @@ -10161,12 +11938,26 @@ "token-color-surface-interactive-hover": { "key": "{color.surface.interactive-hover}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#e8e8e8", "group": "semantic", + "$modes": { + "hds": "#f1f2f3", + "cds-g0": "#e8e8e8", + "cds-g10": "#e8e8e8", + "cds-g90": "#474747", + "cds-g100": "#333333" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-100}", + "$value": "{carbon.themes.white.layerHover01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerHover01}", + "cds-g10": "{carbon.themes.g10.layerHover01}", + "cds-g90": "{carbon.themes.g90.layerHover01}", + "cds-g100": "{carbon.themes.g100.layerHover01}" + }, "key": "{color.surface.interactive-hover}" }, "name": "token-color-surface-interactive-hover", @@ -10182,12 +11973,26 @@ "token-color-surface-interactive-active": { "key": "{color.surface.interactive-active}", "$type": "color", - "$value": "#dedfe3", + "$value": "#c6c6c6", "group": "semantic", + "$modes": { + "hds": "#dedfe3", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-200}", + "$value": "{carbon.themes.white.layerActive01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.white.layerActive01}", + "cds-g10": "{carbon.themes.g10.layerActive01}", + "cds-g90": "{carbon.themes.g90.layerActive01}", + "cds-g100": "{carbon.themes.g100.layerActive01}" + }, "key": "{color.surface.interactive-active}" }, "name": "token-color-surface-interactive-active", @@ -10203,12 +12008,26 @@ "token-color-surface-interactive-disabled": { "key": "{color.surface.interactive-disabled}", "$type": "color", - "$value": "#fafafa", + "$value": "#ff0000", "group": "semantic", + "$modes": { + "hds": "#fafafa", + "cds-g0": "#FF0000", + "cds-g10": "#FF0000", + "cds-g90": "#FF0000", + "cds-g100": "#FF0000" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-50}", + "$value": "#FF0000", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-50}", + "cds-g0": "#FF0000", + "cds-g10": "#FF0000", + "cds-g90": "#FF0000", + "cds-g100": "#FF0000" + }, "key": "{color.surface.interactive-disabled}" }, "name": "token-color-surface-interactive-disabled", @@ -10224,12 +12043,26 @@ "token-color-surface-action": { "key": "{color.surface.action}", "$type": "color", - "$value": "#f2f8ff", + "$value": "#d0e2ff", "group": "semantic", + "$modes": { + "hds": "#f2f8ff", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-50}", + "$value": "{carbon.color.blue.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-50}", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.70}", + "cds-g100": "{carbon.color.blue.70}" + }, "key": "{color.surface.action}" }, "name": "token-color-surface-action", @@ -10245,12 +12078,26 @@ "token-color-surface-highlight": { "key": "{color.surface.highlight}", "$type": "color", - "$value": "#f9f2ff", + "$value": "#e8daff", "group": "semantic", + "$modes": { + "hds": "#f9f2ff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-50}", + "$value": "{carbon.color.purple.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-50}", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, "key": "{color.surface.highlight}" }, "name": "token-color-surface-highlight", @@ -10266,12 +12113,26 @@ "token-color-surface-success": { "key": "{color.surface.success}", "$type": "color", - "$value": "#f2fbf6", + "$value": "#a7f0ba", "group": "semantic", + "$modes": { + "hds": "#f2fbf6", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, "original": { "$type": "color", - "$value": "{color.palette.green-50}", + "$value": "{carbon.color.green.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-50}", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, "key": "{color.surface.success}" }, "name": "token-color-surface-success", @@ -10287,12 +12148,26 @@ "token-color-surface-warning": { "key": "{color.surface.warning}", "$type": "color", - "$value": "#fff9e8", + "$value": "#ffd9be", "group": "semantic", + "$modes": { + "hds": "#fff9e8", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-50}", + "$value": "{carbon.color.orange.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-50}", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, "key": "{color.surface.warning}" }, "name": "token-color-surface-warning", @@ -10308,12 +12183,26 @@ "token-color-surface-critical": { "key": "{color.surface.critical}", "$type": "color", - "$value": "#fff5f5", + "$value": "#ffd7d9", "group": "semantic", + "$modes": { + "hds": "#fff5f5", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, "original": { "$type": "color", - "$value": "{color.palette.red-50}", + "$value": "{carbon.color.red.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-50}", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, "key": "{color.surface.critical}" }, "name": "token-color-surface-critical", @@ -12463,7 +14352,7 @@ }, "token-focus-ring-action-box-shadow": { "key": "{focus-ring.action.box-shadow}", - "$value": "inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff", + "$value": "inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe", "original": { "$value": "{focus-ring.action.internal-box-shadow}, {focus-ring.action.external-box-shadow}", "key": "{focus-ring.action.box-shadow}" @@ -12480,7 +14369,7 @@ }, "token-focus-ring-critical-box-shadow": { "key": "{focus-ring.critical.box-shadow}", - "$value": "inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578", + "$value": "inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe", "original": { "$value": "{focus-ring.critical.internal-box-shadow}, {focus-ring.critical.external-box-shadow}", "key": "{focus-ring.critical.box-shadow}" @@ -13090,7 +14979,7 @@ "token-form-label-color": { "key": "{form.label.color}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#161616", "group": "components", "original": { "$type": "color", @@ -13111,7 +15000,7 @@ "token-form-legend-color": { "key": "{form.legend.color}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#161616", "group": "components", "original": { "$type": "color", @@ -13132,7 +15021,7 @@ "token-form-helper-text-color": { "key": "{form.helper-text.color}", "$type": "color", - "$value": "#656a76", + "$value": "#161616", "group": "components", "original": { "$type": "color", @@ -13153,7 +15042,7 @@ "token-form-indicator-optional-color": { "key": "{form.indicator.optional.color}", "$type": "color", - "$value": "#656a76", + "$value": "#161616", "group": "components", "original": { "$type": "color", @@ -13384,7 +15273,7 @@ "token-form-control-base-foreground-value-color": { "key": "{form.control.base.foreground.value-color}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#161616", "group": "components", "original": { "$type": "color", @@ -13407,7 +15296,7 @@ "token-form-control-base-foreground-placeholder-color": { "key": "{form.control.base.foreground.placeholder-color}", "$type": "color", - "$value": "#656a76", + "$value": "#161616", "group": "components", "original": { "$type": "color", @@ -13430,7 +15319,7 @@ "token-form-control-base-surface-color-default": { "key": "{form.control.base.surface-color.default}", "$type": "color", - "$value": "#ffffff", + "$value": "#f4f4f4", "group": "components", "original": { "$type": "color", @@ -13453,7 +15342,7 @@ "token-form-control-base-surface-color-hover": { "key": "{form.control.base.surface-color.hover}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#e8e8e8", "group": "components", "original": { "$type": "color", @@ -13704,7 +15593,7 @@ "token-form-control-readonly-surface-color": { "key": "{form.control.readonly.surface-color}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#f4f4f4", "group": "components", "original": { "$type": "color", @@ -13726,7 +15615,7 @@ "token-form-control-readonly-border-color": { "key": "{form.control.readonly.border-color}", "$type": "color", - "$value": "#656a761a", + "$value": "#e0e0e0", "group": "components", "original": { "$type": "color", @@ -13748,7 +15637,7 @@ "token-form-control-disabled-foreground-color": { "key": "{form.control.disabled.foreground-color}", "$type": "color", - "$value": "#8c909c", + "$value": "rgba(22, 22, 22, 0.25)", "group": "components", "original": { "$type": "color", @@ -13770,7 +15659,7 @@ "token-form-control-disabled-surface-color": { "key": "{form.control.disabled.surface-color}", "$type": "color", - "$value": "#fafafa", + "$value": "#ff0000", "group": "components", "original": { "$type": "color", @@ -13792,7 +15681,7 @@ "token-form-control-disabled-border-color": { "key": "{form.control.disabled.border-color}", "$type": "color", - "$value": "#656a7633", + "$value": "#c6c6c6", "group": "components", "original": { "$type": "color", @@ -14403,7 +16292,7 @@ "token-form-toggle-base-surface-color-default": { "key": "{form.toggle.base.surface-color.default}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#f4f4f4", "group": "components", "comment": "the toggle has a different base surface color, compared to the other controls", "original": { @@ -15763,15 +17652,24 @@ "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.display.macOS}", - "{typography.font-stack.sans.display.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.display.emoji}" - ], + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.sans.display.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.font-stack.display}" }, "name": "token-typography-font-stack-display", @@ -15787,15 +17685,24 @@ "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.text.macOS}", - "{typography.font-stack.sans.text.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.text.emoji}" - ], + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.sans.text.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.font-stack.text}" }, "name": "token-typography-font-stack-text", @@ -15811,14 +17718,24 @@ "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", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.monospace.code.macOS}", - "{typography.font-stack.monospace.code.windows}", - "monospace" - ], + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.monospace.code.combined}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, "key": "{typography.font-stack.code}" }, "name": "token-typography-font-stack-code", @@ -15966,10 +17883,24 @@ "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-500.font-family}" }, "name": "token-typography-display-500-font-family", @@ -15985,14 +17916,28 @@ "token-typography-display-500-font-size": { "key": "{typography.display-500.font-size}", "$type": "font-size", - "$value": "1.875rem", + "$value": "2rem", "unit": "px", "comment": "30px/1.875rem", + "$modes": { + "hds": "30", + "cds-g0": "2rem", + "cds-g10": "2rem", + "cds-g90": "2rem", + "cds-g100": "2rem" + }, "original": { "$type": "font-size", - "$value": "30", + "$value": "{carbon.typography.heading05.font-size}", "unit": "px", "comment": "30px/1.875rem", + "$modes": { + "hds": "30", + "cds-g0": "{carbon.typography.heading05.font-size}", + "cds-g10": "{carbon.typography.heading05.font-size}", + "cds-g90": "{carbon.typography.heading05.font-size}", + "cds-g100": "{carbon.typography.heading05.font-size}" + }, "key": "{typography.display-500.font-size}" }, "name": "token-typography-display-500-font-size", @@ -16008,12 +17953,26 @@ "token-typography-display-500-line-height": { "key": "{typography.display-500.line-height}", "$type": "number", - "$value": 1.2666, + "$value": 1.25, "comment": "38px", + "$modes": { + "hds": 1.2666, + "cds-g0": 1.25, + "cds-g10": 1.25, + "cds-g90": 1.25, + "cds-g100": 1.25 + }, "original": { "$type": "number", - "$value": 1.2666, + "$value": "{carbon.typography.heading05.line-height}", "comment": "38px", + "$modes": { + "hds": 1.2666, + "cds-g0": "{carbon.typography.heading05.line-height}", + "cds-g10": "{carbon.typography.heading05.line-height}", + "cds-g90": "{carbon.typography.heading05.line-height}", + "cds-g100": "{carbon.typography.heading05.line-height}" + }, "key": "{typography.display-500.line-height}" }, "name": "token-typography-display-500-line-height", @@ -16026,13 +17985,64 @@ "line-height" ] }, + "token-typography-display-500-letter-spacing": { + "key": "{typography.display-500.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading05.letter-spacing}", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading05.letter-spacing}", + "cds-g10": "{carbon.typography.heading05.letter-spacing}", + "cds-g90": "{carbon.typography.heading05.letter-spacing}", + "cds-g100": "{carbon.typography.heading05.letter-spacing}" + }, + "key": "{typography.display-500.letter-spacing}" + }, + "name": "token-typography-display-500-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "letter-spacing" + ] + }, "token-typography-display-400-font-family": { "key": "{typography.display-400.font-family}", "$type": "font-family", - "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-400.font-family}" }, "name": "token-typography-display-400-font-family", @@ -16048,14 +18058,28 @@ "token-typography-display-400-font-size": { "key": "{typography.display-400.font-size}", "$type": "font-size", - "$value": "1.5rem", + "$value": "1.75rem", "unit": "px", "comment": "24px/1.5rem", + "$modes": { + "hds": "24", + "cds-g0": "1.75rem", + "cds-g10": "1.75rem", + "cds-g90": "1.75rem", + "cds-g100": "1.75rem" + }, "original": { "$type": "font-size", - "$value": "24", + "$value": "{carbon.typography.heading04.font-size}", "unit": "px", "comment": "24px/1.5rem", + "$modes": { + "hds": "24", + "cds-g0": "{carbon.typography.heading04.font-size}", + "cds-g10": "{carbon.typography.heading04.font-size}", + "cds-g90": "{carbon.typography.heading04.font-size}", + "cds-g100": "{carbon.typography.heading04.font-size}" + }, "key": "{typography.display-400.font-size}" }, "name": "token-typography-display-400-font-size", @@ -16071,12 +18095,26 @@ "token-typography-display-400-line-height": { "key": "{typography.display-400.line-height}", "$type": "number", - "$value": 1.3333, + "$value": 1.28572, "comment": "32px", + "$modes": { + "hds": 1.3333, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, "original": { "$type": "number", - "$value": 1.3333, + "$value": "{carbon.typography.heading04.line-height}", "comment": "32px", + "$modes": { + "hds": 1.3333, + "cds-g0": "{carbon.typography.heading04.line-height}", + "cds-g10": "{carbon.typography.heading04.line-height}", + "cds-g90": "{carbon.typography.heading04.line-height}", + "cds-g100": "{carbon.typography.heading04.line-height}" + }, "key": "{typography.display-400.line-height}" }, "name": "token-typography-display-400-line-height", @@ -16089,13 +18127,64 @@ "line-height" ] }, + "token-typography-display-400-letter-spacing": { + "key": "{typography.display-400.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading04.letter-spacing}", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "{carbon.typography.heading04.letter-spacing}", + "cds-g10": "{carbon.typography.heading04.letter-spacing}", + "cds-g90": "{carbon.typography.heading04.letter-spacing}", + "cds-g100": "{carbon.typography.heading04.letter-spacing}" + }, + "key": "{typography.display-400.letter-spacing}" + }, + "name": "token-typography-display-400-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "letter-spacing" + ] + }, "token-typography-display-300-font-family": { "key": "{typography.display-300.font-family}", "$type": "font-family", - "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-300.font-family}" }, "name": "token-typography-display-300-font-family", @@ -16111,14 +18200,28 @@ "token-typography-display-300-font-size": { "key": "{typography.display-300.font-size}", "$type": "font-size", - "$value": "1.125rem", + "$value": "1.25rem", "unit": "px", "comment": "18px/1.125rem", + "$modes": { + "hds": "18", + "cds-g0": "1.25rem", + "cds-g10": "1.25rem", + "cds-g90": "1.25rem", + "cds-g100": "1.25rem" + }, "original": { "$type": "font-size", - "$value": "18", + "$value": "{carbon.typography.heading03.font-size}", "unit": "px", "comment": "18px/1.125rem", + "$modes": { + "hds": "18", + "cds-g0": "{carbon.typography.heading03.font-size}", + "cds-g10": "{carbon.typography.heading03.font-size}", + "cds-g90": "{carbon.typography.heading03.font-size}", + "cds-g100": "{carbon.typography.heading03.font-size}" + }, "key": "{typography.display-300.font-size}" }, "name": "token-typography-display-300-font-size", @@ -16134,12 +18237,26 @@ "token-typography-display-300-line-height": { "key": "{typography.display-300.line-height}", "$type": "number", - "$value": 1.3333, + "$value": 1.4, "comment": "24px", + "$modes": { + "hds": 1.3333, + "cds-g0": 1.4, + "cds-g10": 1.4, + "cds-g90": 1.4, + "cds-g100": 1.4 + }, "original": { "$type": "number", - "$value": 1.3333, + "$value": "{carbon.typography.heading03.line-height}", "comment": "24px", + "$modes": { + "hds": 1.3333, + "cds-g0": "{carbon.typography.heading03.line-height}", + "cds-g10": "{carbon.typography.heading03.line-height}", + "cds-g90": "{carbon.typography.heading03.line-height}", + "cds-g100": "{carbon.typography.heading03.line-height}" + }, "key": "{typography.display-300.line-height}" }, "name": "token-typography-display-300-line-height", @@ -16155,14 +18272,28 @@ "token-typography-display-300-letter-spacing": { "key": "{typography.display-300.letter-spacing}", "$type": "letter-spacing", - "$value": "-0.5px", + "$value": "0px", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, "original": { "$type": "letter-spacing", - "$value": -0.5, + "$value": "{carbon.typography.heading03.letter-spacing}", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading03.letter-spacing}", + "cds-g10": "{carbon.typography.heading03.letter-spacing}", + "cds-g90": "{carbon.typography.heading03.letter-spacing}", + "cds-g100": "{carbon.typography.heading03.letter-spacing}" + }, "key": "{typography.display-300.letter-spacing}" }, "name": "token-typography-display-300-letter-spacing", @@ -16178,10 +18309,24 @@ "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-200.font-family}" }, "name": "token-typography-display-200-font-family", @@ -16200,11 +18345,25 @@ "$value": "1rem", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, "original": { "$type": "font-size", - "$value": "16", + "$value": "{carbon.typography.heading02.font-size}", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.heading02.font-size}", + "cds-g10": "{carbon.typography.heading02.font-size}", + "cds-g90": "{carbon.typography.heading02.font-size}", + "cds-g100": "{carbon.typography.heading02.font-size}" + }, "key": "{typography.display-200.font-size}" }, "name": "token-typography-display-200-font-size", @@ -16222,10 +18381,24 @@ "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "hds": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, "original": { "$type": "number", - "$value": 1.5, + "$value": "{carbon.typography.heading02.line-height}", "comment": "24px", + "$modes": { + "hds": 1.5, + "cds-g0": "{carbon.typography.heading02.line-height}", + "cds-g10": "{carbon.typography.heading02.line-height}", + "cds-g90": "{carbon.typography.heading02.line-height}", + "cds-g100": "{carbon.typography.heading02.line-height}" + }, "key": "{typography.display-200.line-height}" }, "name": "token-typography-display-200-line-height", @@ -16241,14 +18414,28 @@ "token-typography-display-200-letter-spacing": { "key": "{typography.display-200.letter-spacing}", "$type": "letter-spacing", - "$value": "-0.5px", + "$value": "0px", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, "original": { "$type": "letter-spacing", - "$value": -0.5, + "$value": "{carbon.typography.heading02.letter-spacing}", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading02.letter-spacing}", + "cds-g10": "{carbon.typography.heading02.letter-spacing}", + "cds-g90": "{carbon.typography.heading02.letter-spacing}", + "cds-g100": "{carbon.typography.heading02.letter-spacing}" + }, "key": "{typography.display-200.letter-spacing}" }, "name": "token-typography-display-200-letter-spacing", @@ -16264,10 +18451,24 @@ "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-100.font-family}" }, "name": "token-typography-display-100-font-family", @@ -16283,14 +18484,28 @@ "token-typography-display-100-font-size": { "key": "{typography.display-100.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "0.875rem", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "13", + "$value": "{carbon.typography.heading01.font-size}", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.heading01.font-size}", + "cds-g10": "{carbon.typography.heading01.font-size}", + "cds-g90": "{carbon.typography.heading01.font-size}", + "cds-g100": "{carbon.typography.heading01.font-size}" + }, "key": "{typography.display-100.font-size}" }, "name": "token-typography-display-100-font-size", @@ -16306,12 +18521,26 @@ "token-typography-display-100-line-height": { "key": "{typography.display-100.line-height}", "$type": "number", - "$value": 1.3846, + "$value": 1.42857, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.3846, + "$value": "{carbon.typography.heading01.line-height}", "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": "{carbon.typography.heading01.line-height}", + "cds-g10": "{carbon.typography.heading01.line-height}", + "cds-g90": "{carbon.typography.heading01.line-height}", + "cds-g100": "{carbon.typography.heading01.line-height}" + }, "key": "{typography.display-100.line-height}" }, "name": "token-typography-display-100-line-height", @@ -16324,13 +18553,64 @@ "line-height" ] }, + "token-typography-display-100-letter-spacing": { + "key": "{typography.display-100.letter-spacing}", + "$type": "letter-spacing", + "$value": "0.16px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "0.16px", + "cds-g10": "0.16px", + "cds-g90": "0.16px", + "cds-g100": "0.16px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading01.letter-spacing}", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "{carbon.typography.heading01.letter-spacing}", + "cds-g10": "{carbon.typography.heading01.letter-spacing}", + "cds-g90": "{carbon.typography.heading01.letter-spacing}", + "cds-g100": "{carbon.typography.heading01.letter-spacing}" + }, + "key": "{typography.display-100.letter-spacing}" + }, + "name": "token-typography-display-100-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "letter-spacing" + ] + }, "token-typography-body-300-font-family": { "key": "{typography.body-300.font-family}", "$type": "font-family", - "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-300.font-family}" }, "name": "token-typography-body-300-font-family", @@ -16349,11 +18629,25 @@ "$value": "1rem", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, "original": { "$type": "font-size", - "$value": "16", + "$value": "{carbon.typography.body02.font-size}", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.body02.font-size}", + "cds-g10": "{carbon.typography.body02.font-size}", + "cds-g90": "{carbon.typography.body02.font-size}", + "cds-g100": "{carbon.typography.body02.font-size}" + }, "key": "{typography.body-300.font-size}" }, "name": "token-typography-body-300-font-size", @@ -16371,10 +18665,24 @@ "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "hds": 1.4286, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, "original": { "$type": "number", - "$value": 1.5, + "$value": "{carbon.typography.body02.line-height}", "comment": "24px", + "$modes": { + "hds": 1.4286, + "cds-g0": "{carbon.typography.body02.line-height}", + "cds-g10": "{carbon.typography.body02.line-height}", + "cds-g90": "{carbon.typography.body02.line-height}", + "cds-g100": "{carbon.typography.body02.line-height}" + }, "key": "{typography.body-300.line-height}" }, "name": "token-typography-body-300-line-height", @@ -16390,10 +18698,24 @@ "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-200.font-family}" }, "name": "token-typography-body-200-font-family", @@ -16412,11 +18734,25 @@ "$value": "0.875rem", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "14", + "$value": "{carbon.typography.body01.font-size}", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "{carbon.typography.body01.font-size}", + "cds-g10": "{carbon.typography.body01.font-size}", + "cds-g90": "{carbon.typography.body01.font-size}", + "cds-g100": "{carbon.typography.body01.font-size}" + }, "key": "{typography.body-200.font-size}" }, "name": "token-typography-body-200-font-size", @@ -16432,12 +18768,26 @@ "token-typography-body-200-line-height": { "key": "{typography.body-200.line-height}", "$type": "number", - "$value": 1.4286, + "$value": 1.42857, "comment": "20px", + "$modes": { + "hds": 1.4286, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.4286, + "$value": "{carbon.typography.body01.line-height}", "comment": "20px", + "$modes": { + "hds": 1.4286, + "cds-g0": "{carbon.typography.body01.line-height}", + "cds-g10": "{carbon.typography.body01.line-height}", + "cds-g90": "{carbon.typography.body01.line-height}", + "cds-g100": "{carbon.typography.body01.line-height}" + }, "key": "{typography.body-200.line-height}" }, "name": "token-typography-body-200-line-height", @@ -16453,10 +18803,24 @@ "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-100.font-family}" }, "name": "token-typography-body-100-font-family", @@ -16472,14 +18836,28 @@ "token-typography-body-100-font-size": { "key": "{typography.body-100.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "0.875rem", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "13", + "$value": "{carbon.typography.bodyCompact01.font-size}", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.bodyCompact01.font-size}", + "cds-g10": "{carbon.typography.bodyCompact01.font-size}", + "cds-g90": "{carbon.typography.bodyCompact01.font-size}", + "cds-g100": "{carbon.typography.bodyCompact01.font-size}" + }, "key": "{typography.body-100.font-size}" }, "name": "token-typography-body-100-font-size", @@ -16495,12 +18873,26 @@ "token-typography-body-100-line-height": { "key": "{typography.body-100.line-height}", "$type": "number", - "$value": 1.3846, + "$value": 1.28572, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, "original": { "$type": "number", - "$value": 1.3846, + "$value": "{carbon.typography.bodyCompact01.line-height}", "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": "{carbon.typography.bodyCompact01.line-height}", + "cds-g10": "{carbon.typography.bodyCompact01.line-height}", + "cds-g90": "{carbon.typography.bodyCompact01.line-height}", + "cds-g100": "{carbon.typography.bodyCompact01.line-height}" + }, "key": "{typography.body-100.line-height}" }, "name": "token-typography-body-100-line-height", @@ -16513,76 +18905,132 @@ "line-height" ] }, - "token-typography-code-100-font-family": { - "key": "{typography.code-100.font-family}", + "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", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.code}", - "key": "{typography.code-100.font-family}" + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-300.font-family}" }, - "name": "token-typography-code-100-font-family", + "name": "token-typography-code-300-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "font-family" ] }, - "token-typography-code-100-font-size": { - "key": "{typography.code-100.font-size}", + "token-typography-code-300-font-size": { + "key": "{typography.code-300.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "0.875rem", "unit": "px", - "comment": "13px/0.8125rem", + "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "13", + "$value": "{carbon.typography.code02.font-size}", "unit": "px", - "comment": "13px/0.8125rem", - "key": "{typography.code-100.font-size}" + "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-300.font-size}" }, - "name": "token-typography-code-100-font-size", + "name": "token-typography-code-300-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "font-size" ] }, - "token-typography-code-100-line-height": { - "key": "{typography.code-100.line-height}", + "token-typography-code-300-line-height": { + "key": "{typography.code-300.line-height}", "$type": "number", - "$value": 1.23, - "comment": "16px", + "$value": 1.42857, + "comment": "20px", + "$modes": { + "hds": 1.25, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.23, - "comment": "16px", - "key": "{typography.code-100.line-height}" + "$value": "{carbon.typography.code02.line-height}", + "comment": "20px", + "$modes": { + "hds": 1.25, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-300.line-height}" }, - "name": "token-typography-code-100-line-height", + "name": "token-typography-code-300-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "line-height" ] }, "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", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.code}", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, "key": "{typography.code-200.font-family}" }, "name": "token-typography-code-200-font-family", @@ -16601,11 +19049,25 @@ "$value": "0.875rem", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "14", + "$value": "{carbon.typography.code02.font-size}", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, "key": "{typography.code-200.font-size}" }, "name": "token-typography-code-200-font-size", @@ -16621,12 +19083,26 @@ "token-typography-code-200-line-height": { "key": "{typography.code-200.line-height}", "$type": "number", - "$value": 1.125, + "$value": 1.42857, "comment": "18px", + "$modes": { + "hds": 1.125, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.125, + "$value": "{carbon.typography.code02.line-height}", "comment": "18px", + "$modes": { + "hds": 1.125, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, "key": "{typography.code-200.line-height}" }, "name": "token-typography-code-200-line-height", @@ -16639,66 +19115,108 @@ "line-height" ] }, - "token-typography-code-300-font-family": { - "key": "{typography.code-300.font-family}", + "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", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.code}", - "key": "{typography.code-300.font-family}" + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-100.font-family}" }, - "name": "token-typography-code-300-font-family", + "name": "token-typography-code-100-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "font-family" ] }, - "token-typography-code-300-font-size": { - "key": "{typography.code-300.font-size}", + "token-typography-code-100-font-size": { + "key": "{typography.code-100.font-size}", "$type": "font-size", - "$value": "1rem", + "$value": "0.875rem", "unit": "px", - "comment": "16px/1rem", + "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "16", + "$value": "{carbon.typography.code02.font-size}", "unit": "px", - "comment": "16px/1rem", - "key": "{typography.code-300.font-size}" + "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-100.font-size}" }, - "name": "token-typography-code-300-font-size", + "name": "token-typography-code-100-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "font-size" ] }, - "token-typography-code-300-line-height": { - "key": "{typography.code-300.line-height}", + "token-typography-code-100-line-height": { + "key": "{typography.code-100.line-height}", "$type": "number", - "$value": 1.25, - "comment": "20px", + "$value": 1.33333, + "comment": "16px", + "$modes": { + "hds": 1.23, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, "original": { "$type": "number", - "$value": 1.25, - "comment": "20px", - "key": "{typography.code-300.line-height}" + "$value": "{carbon.typography.code01.line-height}", + "comment": "16px", + "$modes": { + "hds": 1.23, + "cds-g0": "{carbon.typography.code01.line-height}", + "cds-g10": "{carbon.typography.code01.line-height}", + "cds-g90": "{carbon.typography.code01.line-height}", + "cds-g100": "{carbon.typography.code01.line-height}" + }, + "key": "{typography.code-100.line-height}" }, - "name": "token-typography-code-300-line-height", + "name": "token-typography-code-100-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "line-height" ] } @@ -17693,12 +20211,26 @@ "token-color-border-primary": { "key": "{color.border.primary}", "$type": "color", - "$value": "#656a7633", + "$value": "#e0e0e0", "group": "semantic", + "$modes": { + "hds": "#656a7633", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, "original": { "$type": "color", - "$value": "{color.palette.alpha-200}", + "$value": "{carbon.themes.g10.borderSubtle03}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-200}", + "cds-g0": "{carbon.themes.white.borderSubtle03}", + "cds-g10": "{carbon.themes.g10.borderSubtle03}", + "cds-g90": "{carbon.themes.g90.borderSubtle03}", + "cds-g100": "{carbon.themes.g100.borderSubtle03}" + }, "key": "{color.border.primary}" }, "name": "token-color-border-primary", @@ -17714,12 +20246,26 @@ "token-color-border-faint": { "key": "{color.border.faint}", "$type": "color", - "$value": "#656a761a", + "$value": "#c6c6c6", "group": "semantic", + "$modes": { + "hds": "#656a761a", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, "original": { "$type": "color", - "$value": "{color.palette.alpha-100}", + "$value": "{carbon.themes.g10.borderSubtle00}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-100}", + "cds-g0": "{carbon.themes.white.borderSubtle00}", + "cds-g10": "{carbon.themes.g10.borderSubtle00}", + "cds-g90": "{carbon.themes.g90.borderSubtle00}", + "cds-g100": "{carbon.themes.g100.borderSubtle00}" + }, "key": "{color.border.faint}" }, "name": "token-color-border-faint", @@ -17735,12 +20281,26 @@ "token-color-border-strong": { "key": "{color.border.strong}", "$type": "color", - "$value": "#3b3d4566", + "$value": "#e0e0e0", "group": "semantic", + "$modes": { + "hds": "#3b3d4566", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, "original": { "$type": "color", - "$value": "{color.palette.alpha-300}", + "$value": "{carbon.themes.g10.borderSubtle01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-300}", + "cds-g0": "{carbon.themes.white.borderSubtle01}", + "cds-g10": "{carbon.themes.g10.borderSubtle01}", + "cds-g90": "{carbon.themes.g90.borderSubtle01}", + "cds-g100": "{carbon.themes.g100.borderSubtle01}" + }, "key": "{color.border.strong}" }, "name": "token-color-border-strong", @@ -17756,12 +20316,26 @@ "token-color-border-action": { "key": "{color.border.action}", "$type": "color", - "$value": "#cce3fe", + "$value": "#0f62fe", "group": "semantic", + "$modes": { + "hds": "#cce3fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-100}", + "$value": "{carbon.color.blue.60}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-100}", + "cds-g0": "{carbon.color.blue.60}", + "cds-g10": "{carbon.color.blue.60}", + "cds-g90": "{carbon.color.blue.50}", + "cds-g100": "{carbon.color.blue.50}" + }, "key": "{color.border.action}" }, "name": "token-color-border-action", @@ -17777,12 +20351,26 @@ "token-color-border-highlight": { "key": "{color.border.highlight}", "$type": "color", - "$value": "#ead2fe", + "$value": "#be95ff", "group": "semantic", + "$modes": { + "hds": "#ead2fe", + "cds-g0": "#be95ff", + "cds-g10": "#be95ff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-100}", + "$value": "{carbon.color.purple.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-100}", + "cds-g0": "{carbon.color.purple.40}", + "cds-g10": "{carbon.color.purple.40}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, "key": "{color.border.highlight}" }, "name": "token-color-border-highlight", @@ -17798,12 +20386,26 @@ "token-color-border-success": { "key": "{color.border.success}", "$type": "color", - "$value": "#cceeda", + "$value": "#42be65", "group": "semantic", + "$modes": { + "hds": "#cceeda", + "cds-g0": "#42be65", + "cds-g10": "#42be65", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, "original": { "$type": "color", - "$value": "{color.palette.green-100}", + "$value": "{carbon.color.green.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-100}", + "cds-g0": "{carbon.color.green.40}", + "cds-g10": "{carbon.color.green.40}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, "key": "{color.border.success}" }, "name": "token-color-border-success", @@ -17819,12 +20421,26 @@ "token-color-border-warning": { "key": "{color.border.warning}", "$type": "color", - "$value": "#fbeabf", + "$value": "#ff832b", "group": "semantic", + "$modes": { + "hds": "#fbeabf", + "cds-g0": "#ff832b", + "cds-g10": "#ff832b", + "cds-g90": "#eb6200", + "cds-g100": "#eb6200" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-100}", + "$value": "{carbon.color.orange.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.orange.40}", + "cds-g10": "{carbon.color.orange.40}", + "cds-g90": "{carbon.color.orange.50}", + "cds-g100": "{carbon.color.orange.50}" + }, "key": "{color.border.warning}" }, "name": "token-color-border-warning", @@ -17840,12 +20456,26 @@ "token-color-border-critical": { "key": "{color.border.critical}", "$type": "color", - "$value": "#fbd4d4", + "$value": "#ff8389", "group": "semantic", + "$modes": { + "hds": "#fbd4d4", + "cds-g0": "#ff8389", + "cds-g10": "#ff8389", + "cds-g90": "#fa4d56", + "cds-g100": "#fa4d56" + }, "original": { "$type": "color", - "$value": "{color.palette.red-100}", + "$value": "{carbon.color.red.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-100}", + "cds-g0": "{carbon.color.red.40}", + "cds-g10": "{carbon.color.red.40}", + "cds-g90": "{carbon.color.red.50}", + "cds-g100": "{carbon.color.red.50}" + }, "key": "{color.border.critical}" }, "name": "token-color-border-critical", @@ -17861,12 +20491,26 @@ "token-color-focus-action-internal": { "key": "{color.focus.action.internal}", "$type": "color", - "$value": "#0c56e9", + "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-300}", + "$value": "{carbon.themes.g10.focusInset}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, "key": "{color.focus.action.internal}" }, "name": "token-color-focus-action-internal", @@ -17883,14 +20527,28 @@ "token-color-focus-action-external": { "key": "{color.focus.action.external}", "$type": "color", - "$value": "#5990ff", + "$value": "#0f62fe", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, "original": { "$type": "color", - "$value": "#5990ff", + "$value": "{carbon.themes.g10.focus}", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, "key": "{color.focus.action.external}" }, "name": "token-color-focus-action-external", @@ -17907,12 +20565,26 @@ "token-color-focus-critical-internal": { "key": "{color.focus.critical.internal}", "$type": "color", - "$value": "#c00005", + "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.red-300}", + "$value": "{carbon.themes.g10.focusInset}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, "key": "{color.focus.critical.internal}" }, "name": "token-color-focus-critical-internal", @@ -17929,14 +20601,28 @@ "token-color-focus-critical-external": { "key": "{color.focus.critical.external}", "$type": "color", - "$value": "#dd7578", + "$value": "#0f62fe", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, "original": { "$type": "color", - "$value": "#dd7578", + "$value": "{carbon.themes.g10.focus}", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, "key": "{color.focus.critical.external}" }, "name": "token-color-focus-critical-external", @@ -17953,12 +20639,26 @@ "token-color-foreground-strong": { "key": "{color.foreground.strong}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#161616", "group": "semantic", + "$modes": { + "hds": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-700}", + "$value": "{carbon.themes.g10.textPrimary}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, "key": "{color.foreground.strong}" }, "name": "token-color-foreground-strong", @@ -17977,7 +20677,7 @@ "$value": "#161616", "group": "semantic", "$modes": { - "hds": "#ffffff", + "hds": "#3b3d45", "cds-g0": "#161616", "cds-g10": "#161616", "cds-g90": "#f4f4f4", @@ -17988,7 +20688,7 @@ "$value": "{carbon.themes.g10.textPrimary}", "group": "semantic", "$modes": { - "hds": "#ffffff", + "hds": "{color.palette.neutral-600}", "cds-g0": "{carbon.themes.white.textPrimary}", "cds-g10": "{carbon.themes.g10.textPrimary}", "cds-g90": "{carbon.themes.g90.textPrimary}", @@ -18009,12 +20709,26 @@ "token-color-foreground-faint": { "key": "{color.foreground.faint}", "$type": "color", - "$value": "#656a76", + "$value": "#161616", "group": "semantic", + "$modes": { + "hds": "#656a76", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-500}", + "$value": "{carbon.themes.g10.textPrimary}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-500}", + "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.faint}" }, "name": "token-color-foreground-faint", @@ -18032,10 +20746,24 @@ "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#8c909c", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.g10.textInverse}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, "key": "{color.foreground.high-contrast}" }, "name": "token-color-foreground-high-contrast", @@ -18051,12 +20779,26 @@ "token-color-foreground-disabled": { "key": "{color.foreground.disabled}", "$type": "color", - "$value": "#8c909c", + "$value": "rgba(22, 22, 22, 0.25)", "group": "semantic", + "$modes": { + "hds": "#8c909c", + "cds-g0": "rgba(22, 22, 22, 0.25)", + "cds-g10": "rgba(22, 22, 22, 0.25)", + "cds-g90": "rgba(244, 244, 244, 0.25)", + "cds-g100": "rgba(244, 244, 244, 0.25)" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-400}", + "$value": "{carbon.themes.g10.textDisabled}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textDisabled}", + "cds-g10": "{carbon.themes.g10.textDisabled}", + "cds-g90": "{carbon.themes.g90.textDisabled}", + "cds-g100": "{carbon.themes.g100.textDisabled}" + }, "key": "{color.foreground.disabled}" }, "name": "token-color-foreground-disabled", @@ -18072,12 +20814,26 @@ "token-color-foreground-action": { "key": "{color.foreground.action}", "$type": "color", - "$value": "#1060ff", + "$value": "#0f62fe", "group": "semantic", + "$modes": { + "hds": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#78a9ff", + "cds-g100": "#78a9ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-200}", + "$value": "{carbon.themes.g10.linkPrimary}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.white.linkPrimary}", + "cds-g10": "{carbon.themes.g10.linkPrimary}", + "cds-g90": "{carbon.themes.g90.linkPrimary}", + "cds-g100": "{carbon.themes.g100.linkPrimary}" + }, "key": "{color.foreground.action}" }, "name": "token-color-foreground-action", @@ -18093,12 +20849,26 @@ "token-color-foreground-action-hover": { "key": "{color.foreground.action-hover}", "$type": "color", - "$value": "#0c56e9", + "$value": "#0043ce", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-300}", + "$value": "{carbon.themes.g10.linkPrimaryHover}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, "key": "{color.foreground.action-hover}" }, "name": "token-color-foreground-action-hover", @@ -18114,12 +20884,26 @@ "token-color-foreground-action-active": { "key": "{color.foreground.action-active}", "$type": "color", - "$value": "#0046d1", + "$value": "#0043ce", "group": "semantic", + "$modes": { + "hds": "#0046d1", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-400}", + "$value": "{carbon.themes.g10.linkPrimaryHover}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, "key": "{color.foreground.action-active}" }, "name": "token-color-foreground-action-active", @@ -18135,12 +20919,26 @@ "token-color-foreground-highlight": { "key": "{color.foreground.highlight}", "$type": "color", - "$value": "#a737ff", + "$value": "#8a3ffc", "group": "semantic", + "$modes": { + "hds": "#a737ff", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-200}", + "$value": "{carbon.color.purple.60}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, "key": "{color.foreground.highlight}" }, "name": "token-color-foreground-highlight", @@ -18156,12 +20954,26 @@ "token-color-foreground-highlight-on-surface": { "key": "{color.foreground.highlight-on-surface}", "$type": "color", - "$value": "#911ced", + "$value": "#6929c4", "group": "semantic", + "$modes": { + "hds": "#911ced", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#d4bbff", + "cds-g100": "#d4bbff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-300}", + "$value": "{carbon.color.purple.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-300}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.30}", + "cds-g100": "{carbon.color.purple.30}" + }, "key": "{color.foreground.highlight-on-surface}" }, "name": "token-color-foreground-highlight-on-surface", @@ -18177,12 +20989,26 @@ "token-color-foreground-highlight-high-contrast": { "key": "{color.foreground.highlight-high-contrast}", "$type": "color", - "$value": "#42215b", + "$value": "#491d8b", "group": "semantic", + "$modes": { + "hds": "#42215b", + "cds-g0": "#491d8b", + "cds-g10": "#491d8b", + "cds-g90": "#e8daff", + "cds-g100": "#d4bbff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-500}", + "$value": "{carbon.color.purple.80}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-500}", + "cds-g0": "{carbon.color.purple.80}", + "cds-g10": "{carbon.color.purple.80}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.30}" + }, "key": "{color.foreground.highlight-high-contrast}" }, "name": "token-color-foreground-highlight-high-contrast", @@ -18198,12 +21024,26 @@ "token-color-foreground-success": { "key": "{color.foreground.success}", "$type": "color", - "$value": "#008a22", + "$value": "#198038", "group": "semantic", + "$modes": { + "hds": "#008a22", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#42be65", + "cds-g100": "#42be65" + }, "original": { "$type": "color", - "$value": "{color.palette.green-200}", + "$value": "{carbon.color.green.60}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-200}", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.40}", + "cds-g100": "{carbon.color.green.40}" + }, "key": "{color.foreground.success}" }, "name": "token-color-foreground-success", @@ -18219,12 +21059,26 @@ "token-color-foreground-success-on-surface": { "key": "{color.foreground.success-on-surface}", "$type": "color", - "$value": "#00781e", + "$value": "#0e6027", "group": "semantic", + "$modes": { + "hds": "#00781e", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#6fdc8c", + "cds-g100": "#6fdc8c" + }, "original": { "$type": "color", - "$value": "{color.palette.green-300}", + "$value": "{carbon.color.green.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-300}", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.30}", + "cds-g100": "{carbon.color.green.30}" + }, "key": "{color.foreground.success-on-surface}" }, "name": "token-color-foreground-success-on-surface", @@ -18240,12 +21094,26 @@ "token-color-foreground-success-high-contrast": { "key": "{color.foreground.success-high-contrast}", "$type": "color", - "$value": "#054220", + "$value": "#044317", "group": "semantic", + "$modes": { + "hds": "#054220", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, "original": { "$type": "color", - "$value": "{color.palette.green-500}", + "$value": "{carbon.color.green.80}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-500}", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, "key": "{color.foreground.success-high-contrast}" }, "name": "token-color-foreground-success-high-contrast", @@ -18261,12 +21129,26 @@ "token-color-foreground-warning": { "key": "{color.foreground.warning}", "$type": "color", - "$value": "#bb5a00", + "$value": "#ba4e00", "group": "semantic", + "$modes": { + "hds": "#bb5a00", + "cds-g0": "#ba4e00", + "cds-g10": "#ba4e00", + "cds-g90": "#ff832b", + "cds-g100": "#ff832b" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-200}", + "$value": "{carbon.color.orange.60}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.orange.60}", + "cds-g10": "{carbon.color.orange.60}", + "cds-g90": "{carbon.color.orange.40}", + "cds-g100": "{carbon.color.orange.40}" + }, "key": "{color.foreground.warning}" }, "name": "token-color-foreground-warning", @@ -18282,12 +21164,26 @@ "token-color-foreground-warning-on-surface": { "key": "{color.foreground.warning-on-surface}", "$type": "color", - "$value": "#9e4b00", + "$value": "#8a3800", "group": "semantic", + "$modes": { + "hds": "#9e4b00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffb784", + "cds-g100": "#ffb784" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-300}", + "$value": "{carbon.color.orange.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-300}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.30}", + "cds-g100": "{carbon.color.orange.30}" + }, "key": "{color.foreground.warning-on-surface}" }, "name": "token-color-foreground-warning-on-surface", @@ -18303,12 +21199,26 @@ "token-color-foreground-warning-high-contrast": { "key": "{color.foreground.warning-high-contrast}", "$type": "color", - "$value": "#542800", + "$value": "#5e2900", "group": "semantic", + "$modes": { + "hds": "#542800", + "cds-g0": "#5e2900", + "cds-g10": "#5e2900", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-500}", + "$value": "{carbon.color.orange.80}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-500}", + "cds-g0": "{carbon.color.orange.80}", + "cds-g10": "{carbon.color.orange.80}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, "key": "{color.foreground.warning-high-contrast}" }, "name": "token-color-foreground-warning-high-contrast", @@ -18324,12 +21234,26 @@ "token-color-foreground-critical": { "key": "{color.foreground.critical}", "$type": "color", - "$value": "#e52228", + "$value": "#da1e28", "group": "semantic", + "$modes": { + "hds": "#e52228", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#ff8389", + "cds-g100": "#ff8389" + }, "original": { "$type": "color", - "$value": "{color.palette.red-200}", + "$value": "{carbon.color.red.60}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-200}", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.40}", + "cds-g100": "{carbon.color.red.40}" + }, "key": "{color.foreground.critical}" }, "name": "token-color-foreground-critical", @@ -18345,12 +21269,26 @@ "token-color-foreground-critical-on-surface": { "key": "{color.foreground.critical-on-surface}", "$type": "color", - "$value": "#c00005", + "$value": "#a2191f", "group": "semantic", + "$modes": { + "hds": "#c00005", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffb3b8", + "cds-g100": "#ffb3b8" + }, "original": { "$type": "color", - "$value": "{color.palette.red-300}", + "$value": "{carbon.color.red.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-300}", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.30}", + "cds-g100": "{carbon.color.red.30}" + }, "key": "{color.foreground.critical-on-surface}" }, "name": "token-color-foreground-critical-on-surface", @@ -18366,12 +21304,26 @@ "token-color-foreground-critical-high-contrast": { "key": "{color.foreground.critical-high-contrast}", "$type": "color", - "$value": "#51130a", + "$value": "#750e13", "group": "semantic", + "$modes": { + "hds": "#51130a", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, "original": { "$type": "color", - "$value": "{color.palette.red-500}", + "$value": "{carbon.color.red.80}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-500}", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, "key": "{color.foreground.critical-high-contrast}" }, "name": "token-color-foreground-critical-high-contrast", @@ -18387,12 +21339,26 @@ "token-color-page-primary": { "key": "{color.page.primary}", "$type": "color", - "$value": "#ffffff", + "$value": "#f4f4f4", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.g10.background}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, "key": "{color.page.primary}" }, "name": "token-color-page-primary", @@ -18408,12 +21374,26 @@ "token-color-page-faint": { "key": "{color.page.faint}", "$type": "color", - "$value": "#fafafa", + "$value": "#f4f4f4", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-50}", + "$value": "{carbon.themes.g10.background}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, "key": "{color.page.faint}" }, "name": "token-color-page-faint", @@ -18431,10 +21411,24 @@ "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.g10.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.primary}" }, "name": "token-color-surface-primary", @@ -18450,12 +21444,26 @@ "token-color-surface-faint": { "key": "{color.surface.faint}", "$type": "color", - "$value": "#fafafa", + "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#fafafa", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-50}", + "$value": "{carbon.themes.g10.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.faint}" }, "name": "token-color-surface-faint", @@ -18471,12 +21479,26 @@ "token-color-surface-strong": { "key": "{color.surface.strong}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#f1f2f3", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-100}", + "$value": "{carbon.themes.g10.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.strong}" }, "name": "token-color-surface-strong", @@ -18494,10 +21516,24 @@ "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.g10.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.interactive}" }, "name": "token-color-surface-interactive", @@ -18513,12 +21549,26 @@ "token-color-surface-interactive-hover": { "key": "{color.surface.interactive-hover}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#e8e8e8", "group": "semantic", + "$modes": { + "hds": "#f1f2f3", + "cds-g0": "#e8e8e8", + "cds-g10": "#e8e8e8", + "cds-g90": "#474747", + "cds-g100": "#333333" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-100}", + "$value": "{carbon.themes.g10.layerHover01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerHover01}", + "cds-g10": "{carbon.themes.g10.layerHover01}", + "cds-g90": "{carbon.themes.g90.layerHover01}", + "cds-g100": "{carbon.themes.g100.layerHover01}" + }, "key": "{color.surface.interactive-hover}" }, "name": "token-color-surface-interactive-hover", @@ -18534,12 +21584,26 @@ "token-color-surface-interactive-active": { "key": "{color.surface.interactive-active}", "$type": "color", - "$value": "#dedfe3", + "$value": "#c6c6c6", "group": "semantic", + "$modes": { + "hds": "#dedfe3", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-200}", + "$value": "{carbon.themes.g10.layerActive01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.white.layerActive01}", + "cds-g10": "{carbon.themes.g10.layerActive01}", + "cds-g90": "{carbon.themes.g90.layerActive01}", + "cds-g100": "{carbon.themes.g100.layerActive01}" + }, "key": "{color.surface.interactive-active}" }, "name": "token-color-surface-interactive-active", @@ -18555,12 +21619,26 @@ "token-color-surface-interactive-disabled": { "key": "{color.surface.interactive-disabled}", "$type": "color", - "$value": "#fafafa", + "$value": "#ff0000", "group": "semantic", + "$modes": { + "hds": "#fafafa", + "cds-g0": "#FF0000", + "cds-g10": "#FF0000", + "cds-g90": "#FF0000", + "cds-g100": "#FF0000" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-50}", + "$value": "#FF0000", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-50}", + "cds-g0": "#FF0000", + "cds-g10": "#FF0000", + "cds-g90": "#FF0000", + "cds-g100": "#FF0000" + }, "key": "{color.surface.interactive-disabled}" }, "name": "token-color-surface-interactive-disabled", @@ -18576,12 +21654,26 @@ "token-color-surface-action": { "key": "{color.surface.action}", "$type": "color", - "$value": "#f2f8ff", + "$value": "#d0e2ff", "group": "semantic", + "$modes": { + "hds": "#f2f8ff", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-50}", + "$value": "{carbon.color.blue.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-50}", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.70}", + "cds-g100": "{carbon.color.blue.70}" + }, "key": "{color.surface.action}" }, "name": "token-color-surface-action", @@ -18597,12 +21689,26 @@ "token-color-surface-highlight": { "key": "{color.surface.highlight}", "$type": "color", - "$value": "#f9f2ff", + "$value": "#e8daff", "group": "semantic", + "$modes": { + "hds": "#f9f2ff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-50}", + "$value": "{carbon.color.purple.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-50}", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, "key": "{color.surface.highlight}" }, "name": "token-color-surface-highlight", @@ -18618,12 +21724,26 @@ "token-color-surface-success": { "key": "{color.surface.success}", "$type": "color", - "$value": "#f2fbf6", + "$value": "#a7f0ba", "group": "semantic", + "$modes": { + "hds": "#f2fbf6", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, "original": { "$type": "color", - "$value": "{color.palette.green-50}", + "$value": "{carbon.color.green.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-50}", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, "key": "{color.surface.success}" }, "name": "token-color-surface-success", @@ -18639,12 +21759,26 @@ "token-color-surface-warning": { "key": "{color.surface.warning}", "$type": "color", - "$value": "#fff9e8", + "$value": "#ffd9be", "group": "semantic", + "$modes": { + "hds": "#fff9e8", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-50}", + "$value": "{carbon.color.orange.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-50}", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, "key": "{color.surface.warning}" }, "name": "token-color-surface-warning", @@ -18660,12 +21794,26 @@ "token-color-surface-critical": { "key": "{color.surface.critical}", "$type": "color", - "$value": "#fff5f5", + "$value": "#ffd7d9", "group": "semantic", + "$modes": { + "hds": "#fff5f5", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, "original": { "$type": "color", - "$value": "{color.palette.red-50}", + "$value": "{carbon.color.red.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-50}", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, "key": "{color.surface.critical}" }, "name": "token-color-surface-critical", @@ -20815,7 +23963,7 @@ }, "token-focus-ring-action-box-shadow": { "key": "{focus-ring.action.box-shadow}", - "$value": "inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff", + "$value": "inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe", "original": { "$value": "{focus-ring.action.internal-box-shadow}, {focus-ring.action.external-box-shadow}", "key": "{focus-ring.action.box-shadow}" @@ -20832,7 +23980,7 @@ }, "token-focus-ring-critical-box-shadow": { "key": "{focus-ring.critical.box-shadow}", - "$value": "inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578", + "$value": "inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe", "original": { "$value": "{focus-ring.critical.internal-box-shadow}, {focus-ring.critical.external-box-shadow}", "key": "{focus-ring.critical.box-shadow}" @@ -21442,7 +24590,7 @@ "token-form-label-color": { "key": "{form.label.color}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#161616", "group": "components", "original": { "$type": "color", @@ -21463,7 +24611,7 @@ "token-form-legend-color": { "key": "{form.legend.color}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#161616", "group": "components", "original": { "$type": "color", @@ -21484,7 +24632,7 @@ "token-form-helper-text-color": { "key": "{form.helper-text.color}", "$type": "color", - "$value": "#656a76", + "$value": "#161616", "group": "components", "original": { "$type": "color", @@ -21505,7 +24653,7 @@ "token-form-indicator-optional-color": { "key": "{form.indicator.optional.color}", "$type": "color", - "$value": "#656a76", + "$value": "#161616", "group": "components", "original": { "$type": "color", @@ -21736,7 +24884,7 @@ "token-form-control-base-foreground-value-color": { "key": "{form.control.base.foreground.value-color}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#161616", "group": "components", "original": { "$type": "color", @@ -21759,7 +24907,7 @@ "token-form-control-base-foreground-placeholder-color": { "key": "{form.control.base.foreground.placeholder-color}", "$type": "color", - "$value": "#656a76", + "$value": "#161616", "group": "components", "original": { "$type": "color", @@ -21805,7 +24953,7 @@ "token-form-control-base-surface-color-hover": { "key": "{form.control.base.surface-color.hover}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#e8e8e8", "group": "components", "original": { "$type": "color", @@ -22056,7 +25204,7 @@ "token-form-control-readonly-surface-color": { "key": "{form.control.readonly.surface-color}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#ffffff", "group": "components", "original": { "$type": "color", @@ -22078,7 +25226,7 @@ "token-form-control-readonly-border-color": { "key": "{form.control.readonly.border-color}", "$type": "color", - "$value": "#656a761a", + "$value": "#c6c6c6", "group": "components", "original": { "$type": "color", @@ -22100,7 +25248,7 @@ "token-form-control-disabled-foreground-color": { "key": "{form.control.disabled.foreground-color}", "$type": "color", - "$value": "#8c909c", + "$value": "rgba(22, 22, 22, 0.25)", "group": "components", "original": { "$type": "color", @@ -22122,7 +25270,7 @@ "token-form-control-disabled-surface-color": { "key": "{form.control.disabled.surface-color}", "$type": "color", - "$value": "#fafafa", + "$value": "#ff0000", "group": "components", "original": { "$type": "color", @@ -22144,7 +25292,7 @@ "token-form-control-disabled-border-color": { "key": "{form.control.disabled.border-color}", "$type": "color", - "$value": "#656a7633", + "$value": "#e0e0e0", "group": "components", "original": { "$type": "color", @@ -22755,7 +25903,7 @@ "token-form-toggle-base-surface-color-default": { "key": "{form.toggle.base.surface-color.default}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#ffffff", "group": "components", "comment": "the toggle has a different base surface color, compared to the other controls", "original": { @@ -24115,15 +27263,24 @@ "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.display.macOS}", - "{typography.font-stack.sans.display.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.display.emoji}" - ], + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.sans.display.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.font-stack.display}" }, "name": "token-typography-font-stack-display", @@ -24139,15 +27296,24 @@ "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.text.macOS}", - "{typography.font-stack.sans.text.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.text.emoji}" - ], + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.sans.text.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.font-stack.text}" }, "name": "token-typography-font-stack-text", @@ -24163,14 +27329,24 @@ "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", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.monospace.code.macOS}", - "{typography.font-stack.monospace.code.windows}", - "monospace" - ], + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.monospace.code.combined}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, "key": "{typography.font-stack.code}" }, "name": "token-typography-font-stack-code", @@ -24318,10 +27494,24 @@ "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-500.font-family}" }, "name": "token-typography-display-500-font-family", @@ -24337,14 +27527,28 @@ "token-typography-display-500-font-size": { "key": "{typography.display-500.font-size}", "$type": "font-size", - "$value": "1.875rem", + "$value": "2rem", "unit": "px", "comment": "30px/1.875rem", + "$modes": { + "hds": "30", + "cds-g0": "2rem", + "cds-g10": "2rem", + "cds-g90": "2rem", + "cds-g100": "2rem" + }, "original": { "$type": "font-size", - "$value": "30", + "$value": "{carbon.typography.heading05.font-size}", "unit": "px", "comment": "30px/1.875rem", + "$modes": { + "hds": "30", + "cds-g0": "{carbon.typography.heading05.font-size}", + "cds-g10": "{carbon.typography.heading05.font-size}", + "cds-g90": "{carbon.typography.heading05.font-size}", + "cds-g100": "{carbon.typography.heading05.font-size}" + }, "key": "{typography.display-500.font-size}" }, "name": "token-typography-display-500-font-size", @@ -24360,12 +27564,26 @@ "token-typography-display-500-line-height": { "key": "{typography.display-500.line-height}", "$type": "number", - "$value": 1.2666, + "$value": 1.25, "comment": "38px", + "$modes": { + "hds": 1.2666, + "cds-g0": 1.25, + "cds-g10": 1.25, + "cds-g90": 1.25, + "cds-g100": 1.25 + }, "original": { "$type": "number", - "$value": 1.2666, + "$value": "{carbon.typography.heading05.line-height}", "comment": "38px", + "$modes": { + "hds": 1.2666, + "cds-g0": "{carbon.typography.heading05.line-height}", + "cds-g10": "{carbon.typography.heading05.line-height}", + "cds-g90": "{carbon.typography.heading05.line-height}", + "cds-g100": "{carbon.typography.heading05.line-height}" + }, "key": "{typography.display-500.line-height}" }, "name": "token-typography-display-500-line-height", @@ -24378,13 +27596,64 @@ "line-height" ] }, + "token-typography-display-500-letter-spacing": { + "key": "{typography.display-500.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading05.letter-spacing}", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading05.letter-spacing}", + "cds-g10": "{carbon.typography.heading05.letter-spacing}", + "cds-g90": "{carbon.typography.heading05.letter-spacing}", + "cds-g100": "{carbon.typography.heading05.letter-spacing}" + }, + "key": "{typography.display-500.letter-spacing}" + }, + "name": "token-typography-display-500-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "letter-spacing" + ] + }, "token-typography-display-400-font-family": { "key": "{typography.display-400.font-family}", "$type": "font-family", - "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-400.font-family}" }, "name": "token-typography-display-400-font-family", @@ -24400,14 +27669,28 @@ "token-typography-display-400-font-size": { "key": "{typography.display-400.font-size}", "$type": "font-size", - "$value": "1.5rem", + "$value": "1.75rem", "unit": "px", "comment": "24px/1.5rem", + "$modes": { + "hds": "24", + "cds-g0": "1.75rem", + "cds-g10": "1.75rem", + "cds-g90": "1.75rem", + "cds-g100": "1.75rem" + }, "original": { "$type": "font-size", - "$value": "24", + "$value": "{carbon.typography.heading04.font-size}", "unit": "px", "comment": "24px/1.5rem", + "$modes": { + "hds": "24", + "cds-g0": "{carbon.typography.heading04.font-size}", + "cds-g10": "{carbon.typography.heading04.font-size}", + "cds-g90": "{carbon.typography.heading04.font-size}", + "cds-g100": "{carbon.typography.heading04.font-size}" + }, "key": "{typography.display-400.font-size}" }, "name": "token-typography-display-400-font-size", @@ -24423,12 +27706,26 @@ "token-typography-display-400-line-height": { "key": "{typography.display-400.line-height}", "$type": "number", - "$value": 1.3333, + "$value": 1.28572, "comment": "32px", + "$modes": { + "hds": 1.3333, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, "original": { "$type": "number", - "$value": 1.3333, + "$value": "{carbon.typography.heading04.line-height}", "comment": "32px", + "$modes": { + "hds": 1.3333, + "cds-g0": "{carbon.typography.heading04.line-height}", + "cds-g10": "{carbon.typography.heading04.line-height}", + "cds-g90": "{carbon.typography.heading04.line-height}", + "cds-g100": "{carbon.typography.heading04.line-height}" + }, "key": "{typography.display-400.line-height}" }, "name": "token-typography-display-400-line-height", @@ -24441,13 +27738,64 @@ "line-height" ] }, + "token-typography-display-400-letter-spacing": { + "key": "{typography.display-400.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading04.letter-spacing}", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "{carbon.typography.heading04.letter-spacing}", + "cds-g10": "{carbon.typography.heading04.letter-spacing}", + "cds-g90": "{carbon.typography.heading04.letter-spacing}", + "cds-g100": "{carbon.typography.heading04.letter-spacing}" + }, + "key": "{typography.display-400.letter-spacing}" + }, + "name": "token-typography-display-400-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "letter-spacing" + ] + }, "token-typography-display-300-font-family": { "key": "{typography.display-300.font-family}", "$type": "font-family", - "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-300.font-family}" }, "name": "token-typography-display-300-font-family", @@ -24463,14 +27811,28 @@ "token-typography-display-300-font-size": { "key": "{typography.display-300.font-size}", "$type": "font-size", - "$value": "1.125rem", + "$value": "1.25rem", "unit": "px", "comment": "18px/1.125rem", + "$modes": { + "hds": "18", + "cds-g0": "1.25rem", + "cds-g10": "1.25rem", + "cds-g90": "1.25rem", + "cds-g100": "1.25rem" + }, "original": { "$type": "font-size", - "$value": "18", + "$value": "{carbon.typography.heading03.font-size}", "unit": "px", "comment": "18px/1.125rem", + "$modes": { + "hds": "18", + "cds-g0": "{carbon.typography.heading03.font-size}", + "cds-g10": "{carbon.typography.heading03.font-size}", + "cds-g90": "{carbon.typography.heading03.font-size}", + "cds-g100": "{carbon.typography.heading03.font-size}" + }, "key": "{typography.display-300.font-size}" }, "name": "token-typography-display-300-font-size", @@ -24486,12 +27848,26 @@ "token-typography-display-300-line-height": { "key": "{typography.display-300.line-height}", "$type": "number", - "$value": 1.3333, + "$value": 1.4, "comment": "24px", + "$modes": { + "hds": 1.3333, + "cds-g0": 1.4, + "cds-g10": 1.4, + "cds-g90": 1.4, + "cds-g100": 1.4 + }, "original": { "$type": "number", - "$value": 1.3333, + "$value": "{carbon.typography.heading03.line-height}", "comment": "24px", + "$modes": { + "hds": 1.3333, + "cds-g0": "{carbon.typography.heading03.line-height}", + "cds-g10": "{carbon.typography.heading03.line-height}", + "cds-g90": "{carbon.typography.heading03.line-height}", + "cds-g100": "{carbon.typography.heading03.line-height}" + }, "key": "{typography.display-300.line-height}" }, "name": "token-typography-display-300-line-height", @@ -24507,14 +27883,28 @@ "token-typography-display-300-letter-spacing": { "key": "{typography.display-300.letter-spacing}", "$type": "letter-spacing", - "$value": "-0.5px", + "$value": "0px", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, "original": { "$type": "letter-spacing", - "$value": -0.5, + "$value": "{carbon.typography.heading03.letter-spacing}", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading03.letter-spacing}", + "cds-g10": "{carbon.typography.heading03.letter-spacing}", + "cds-g90": "{carbon.typography.heading03.letter-spacing}", + "cds-g100": "{carbon.typography.heading03.letter-spacing}" + }, "key": "{typography.display-300.letter-spacing}" }, "name": "token-typography-display-300-letter-spacing", @@ -24530,10 +27920,24 @@ "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-200.font-family}" }, "name": "token-typography-display-200-font-family", @@ -24552,11 +27956,25 @@ "$value": "1rem", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, "original": { "$type": "font-size", - "$value": "16", + "$value": "{carbon.typography.heading02.font-size}", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.heading02.font-size}", + "cds-g10": "{carbon.typography.heading02.font-size}", + "cds-g90": "{carbon.typography.heading02.font-size}", + "cds-g100": "{carbon.typography.heading02.font-size}" + }, "key": "{typography.display-200.font-size}" }, "name": "token-typography-display-200-font-size", @@ -24574,10 +27992,24 @@ "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "hds": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, "original": { "$type": "number", - "$value": 1.5, + "$value": "{carbon.typography.heading02.line-height}", "comment": "24px", + "$modes": { + "hds": 1.5, + "cds-g0": "{carbon.typography.heading02.line-height}", + "cds-g10": "{carbon.typography.heading02.line-height}", + "cds-g90": "{carbon.typography.heading02.line-height}", + "cds-g100": "{carbon.typography.heading02.line-height}" + }, "key": "{typography.display-200.line-height}" }, "name": "token-typography-display-200-line-height", @@ -24593,14 +28025,28 @@ "token-typography-display-200-letter-spacing": { "key": "{typography.display-200.letter-spacing}", "$type": "letter-spacing", - "$value": "-0.5px", + "$value": "0px", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, "original": { "$type": "letter-spacing", - "$value": -0.5, + "$value": "{carbon.typography.heading02.letter-spacing}", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading02.letter-spacing}", + "cds-g10": "{carbon.typography.heading02.letter-spacing}", + "cds-g90": "{carbon.typography.heading02.letter-spacing}", + "cds-g100": "{carbon.typography.heading02.letter-spacing}" + }, "key": "{typography.display-200.letter-spacing}" }, "name": "token-typography-display-200-letter-spacing", @@ -24616,10 +28062,24 @@ "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-100.font-family}" }, "name": "token-typography-display-100-font-family", @@ -24635,14 +28095,28 @@ "token-typography-display-100-font-size": { "key": "{typography.display-100.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "0.875rem", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "13", + "$value": "{carbon.typography.heading01.font-size}", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.heading01.font-size}", + "cds-g10": "{carbon.typography.heading01.font-size}", + "cds-g90": "{carbon.typography.heading01.font-size}", + "cds-g100": "{carbon.typography.heading01.font-size}" + }, "key": "{typography.display-100.font-size}" }, "name": "token-typography-display-100-font-size", @@ -24658,12 +28132,26 @@ "token-typography-display-100-line-height": { "key": "{typography.display-100.line-height}", "$type": "number", - "$value": 1.3846, + "$value": 1.42857, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.3846, + "$value": "{carbon.typography.heading01.line-height}", "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": "{carbon.typography.heading01.line-height}", + "cds-g10": "{carbon.typography.heading01.line-height}", + "cds-g90": "{carbon.typography.heading01.line-height}", + "cds-g100": "{carbon.typography.heading01.line-height}" + }, "key": "{typography.display-100.line-height}" }, "name": "token-typography-display-100-line-height", @@ -24676,13 +28164,64 @@ "line-height" ] }, + "token-typography-display-100-letter-spacing": { + "key": "{typography.display-100.letter-spacing}", + "$type": "letter-spacing", + "$value": "0.16px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "0.16px", + "cds-g10": "0.16px", + "cds-g90": "0.16px", + "cds-g100": "0.16px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading01.letter-spacing}", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "{carbon.typography.heading01.letter-spacing}", + "cds-g10": "{carbon.typography.heading01.letter-spacing}", + "cds-g90": "{carbon.typography.heading01.letter-spacing}", + "cds-g100": "{carbon.typography.heading01.letter-spacing}" + }, + "key": "{typography.display-100.letter-spacing}" + }, + "name": "token-typography-display-100-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "letter-spacing" + ] + }, "token-typography-body-300-font-family": { "key": "{typography.body-300.font-family}", "$type": "font-family", - "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-300.font-family}" }, "name": "token-typography-body-300-font-family", @@ -24701,11 +28240,25 @@ "$value": "1rem", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, "original": { "$type": "font-size", - "$value": "16", + "$value": "{carbon.typography.body02.font-size}", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.body02.font-size}", + "cds-g10": "{carbon.typography.body02.font-size}", + "cds-g90": "{carbon.typography.body02.font-size}", + "cds-g100": "{carbon.typography.body02.font-size}" + }, "key": "{typography.body-300.font-size}" }, "name": "token-typography-body-300-font-size", @@ -24723,10 +28276,24 @@ "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "hds": 1.4286, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, "original": { "$type": "number", - "$value": 1.5, + "$value": "{carbon.typography.body02.line-height}", "comment": "24px", + "$modes": { + "hds": 1.4286, + "cds-g0": "{carbon.typography.body02.line-height}", + "cds-g10": "{carbon.typography.body02.line-height}", + "cds-g90": "{carbon.typography.body02.line-height}", + "cds-g100": "{carbon.typography.body02.line-height}" + }, "key": "{typography.body-300.line-height}" }, "name": "token-typography-body-300-line-height", @@ -24742,10 +28309,24 @@ "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-200.font-family}" }, "name": "token-typography-body-200-font-family", @@ -24764,11 +28345,25 @@ "$value": "0.875rem", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "14", + "$value": "{carbon.typography.body01.font-size}", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "{carbon.typography.body01.font-size}", + "cds-g10": "{carbon.typography.body01.font-size}", + "cds-g90": "{carbon.typography.body01.font-size}", + "cds-g100": "{carbon.typography.body01.font-size}" + }, "key": "{typography.body-200.font-size}" }, "name": "token-typography-body-200-font-size", @@ -24784,12 +28379,26 @@ "token-typography-body-200-line-height": { "key": "{typography.body-200.line-height}", "$type": "number", - "$value": 1.4286, + "$value": 1.42857, "comment": "20px", + "$modes": { + "hds": 1.4286, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.4286, + "$value": "{carbon.typography.body01.line-height}", "comment": "20px", + "$modes": { + "hds": 1.4286, + "cds-g0": "{carbon.typography.body01.line-height}", + "cds-g10": "{carbon.typography.body01.line-height}", + "cds-g90": "{carbon.typography.body01.line-height}", + "cds-g100": "{carbon.typography.body01.line-height}" + }, "key": "{typography.body-200.line-height}" }, "name": "token-typography-body-200-line-height", @@ -24805,10 +28414,24 @@ "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-100.font-family}" }, "name": "token-typography-body-100-font-family", @@ -24824,14 +28447,28 @@ "token-typography-body-100-font-size": { "key": "{typography.body-100.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "0.875rem", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "13", + "$value": "{carbon.typography.bodyCompact01.font-size}", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.bodyCompact01.font-size}", + "cds-g10": "{carbon.typography.bodyCompact01.font-size}", + "cds-g90": "{carbon.typography.bodyCompact01.font-size}", + "cds-g100": "{carbon.typography.bodyCompact01.font-size}" + }, "key": "{typography.body-100.font-size}" }, "name": "token-typography-body-100-font-size", @@ -24847,12 +28484,26 @@ "token-typography-body-100-line-height": { "key": "{typography.body-100.line-height}", "$type": "number", - "$value": 1.3846, + "$value": 1.28572, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, "original": { "$type": "number", - "$value": 1.3846, + "$value": "{carbon.typography.bodyCompact01.line-height}", "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": "{carbon.typography.bodyCompact01.line-height}", + "cds-g10": "{carbon.typography.bodyCompact01.line-height}", + "cds-g90": "{carbon.typography.bodyCompact01.line-height}", + "cds-g100": "{carbon.typography.bodyCompact01.line-height}" + }, "key": "{typography.body-100.line-height}" }, "name": "token-typography-body-100-line-height", @@ -24865,76 +28516,132 @@ "line-height" ] }, - "token-typography-code-100-font-family": { - "key": "{typography.code-100.font-family}", + "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", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.code}", - "key": "{typography.code-100.font-family}" + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-300.font-family}" }, - "name": "token-typography-code-100-font-family", + "name": "token-typography-code-300-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "font-family" ] }, - "token-typography-code-100-font-size": { - "key": "{typography.code-100.font-size}", + "token-typography-code-300-font-size": { + "key": "{typography.code-300.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "0.875rem", "unit": "px", - "comment": "13px/0.8125rem", + "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "13", + "$value": "{carbon.typography.code02.font-size}", "unit": "px", - "comment": "13px/0.8125rem", - "key": "{typography.code-100.font-size}" + "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-300.font-size}" }, - "name": "token-typography-code-100-font-size", + "name": "token-typography-code-300-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "font-size" ] }, - "token-typography-code-100-line-height": { - "key": "{typography.code-100.line-height}", + "token-typography-code-300-line-height": { + "key": "{typography.code-300.line-height}", "$type": "number", - "$value": 1.23, - "comment": "16px", + "$value": 1.42857, + "comment": "20px", + "$modes": { + "hds": 1.25, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.23, - "comment": "16px", - "key": "{typography.code-100.line-height}" + "$value": "{carbon.typography.code02.line-height}", + "comment": "20px", + "$modes": { + "hds": 1.25, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-300.line-height}" }, - "name": "token-typography-code-100-line-height", + "name": "token-typography-code-300-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "line-height" ] }, "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", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.code}", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, "key": "{typography.code-200.font-family}" }, "name": "token-typography-code-200-font-family", @@ -24953,11 +28660,25 @@ "$value": "0.875rem", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "14", + "$value": "{carbon.typography.code02.font-size}", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, "key": "{typography.code-200.font-size}" }, "name": "token-typography-code-200-font-size", @@ -24973,12 +28694,26 @@ "token-typography-code-200-line-height": { "key": "{typography.code-200.line-height}", "$type": "number", - "$value": 1.125, + "$value": 1.42857, "comment": "18px", + "$modes": { + "hds": 1.125, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.125, + "$value": "{carbon.typography.code02.line-height}", "comment": "18px", + "$modes": { + "hds": 1.125, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, "key": "{typography.code-200.line-height}" }, "name": "token-typography-code-200-line-height", @@ -24991,66 +28726,108 @@ "line-height" ] }, - "token-typography-code-300-font-family": { - "key": "{typography.code-300.font-family}", + "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", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.code}", - "key": "{typography.code-300.font-family}" + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-100.font-family}" }, - "name": "token-typography-code-300-font-family", + "name": "token-typography-code-100-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "font-family" ] }, - "token-typography-code-300-font-size": { - "key": "{typography.code-300.font-size}", + "token-typography-code-100-font-size": { + "key": "{typography.code-100.font-size}", "$type": "font-size", - "$value": "1rem", + "$value": "0.875rem", "unit": "px", - "comment": "16px/1rem", + "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "16", + "$value": "{carbon.typography.code02.font-size}", "unit": "px", - "comment": "16px/1rem", - "key": "{typography.code-300.font-size}" + "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-100.font-size}" }, - "name": "token-typography-code-300-font-size", + "name": "token-typography-code-100-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "font-size" ] }, - "token-typography-code-300-line-height": { - "key": "{typography.code-300.line-height}", + "token-typography-code-100-line-height": { + "key": "{typography.code-100.line-height}", "$type": "number", - "$value": 1.25, - "comment": "20px", + "$value": 1.33333, + "comment": "16px", + "$modes": { + "hds": 1.23, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, "original": { "$type": "number", - "$value": 1.25, - "comment": "20px", - "key": "{typography.code-300.line-height}" + "$value": "{carbon.typography.code01.line-height}", + "comment": "16px", + "$modes": { + "hds": 1.23, + "cds-g0": "{carbon.typography.code01.line-height}", + "cds-g10": "{carbon.typography.code01.line-height}", + "cds-g90": "{carbon.typography.code01.line-height}", + "cds-g100": "{carbon.typography.code01.line-height}" + }, + "key": "{typography.code-100.line-height}" }, - "name": "token-typography-code-300-line-height", + "name": "token-typography-code-100-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "line-height" ] } @@ -26045,12 +29822,26 @@ "token-color-border-primary": { "key": "{color.border.primary}", "$type": "color", - "$value": "#656a7633", + "$value": "#8d8d8d", "group": "semantic", + "$modes": { + "hds": "#656a7633", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, "original": { "$type": "color", - "$value": "{color.palette.alpha-200}", + "$value": "{carbon.themes.g90.borderSubtle03}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-200}", + "cds-g0": "{carbon.themes.white.borderSubtle03}", + "cds-g10": "{carbon.themes.g10.borderSubtle03}", + "cds-g90": "{carbon.themes.g90.borderSubtle03}", + "cds-g100": "{carbon.themes.g100.borderSubtle03}" + }, "key": "{color.border.primary}" }, "name": "token-color-border-primary", @@ -26066,12 +29857,26 @@ "token-color-border-faint": { "key": "{color.border.faint}", "$type": "color", - "$value": "#656a761a", + "$value": "#525252", "group": "semantic", + "$modes": { + "hds": "#656a761a", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, "original": { "$type": "color", - "$value": "{color.palette.alpha-100}", + "$value": "{carbon.themes.g90.borderSubtle00}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-100}", + "cds-g0": "{carbon.themes.white.borderSubtle00}", + "cds-g10": "{carbon.themes.g10.borderSubtle00}", + "cds-g90": "{carbon.themes.g90.borderSubtle00}", + "cds-g100": "{carbon.themes.g100.borderSubtle00}" + }, "key": "{color.border.faint}" }, "name": "token-color-border-faint", @@ -26087,12 +29892,26 @@ "token-color-border-strong": { "key": "{color.border.strong}", "$type": "color", - "$value": "#3b3d4566", + "$value": "#6f6f6f", "group": "semantic", + "$modes": { + "hds": "#3b3d4566", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, "original": { "$type": "color", - "$value": "{color.palette.alpha-300}", + "$value": "{carbon.themes.g90.borderSubtle01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-300}", + "cds-g0": "{carbon.themes.white.borderSubtle01}", + "cds-g10": "{carbon.themes.g10.borderSubtle01}", + "cds-g90": "{carbon.themes.g90.borderSubtle01}", + "cds-g100": "{carbon.themes.g100.borderSubtle01}" + }, "key": "{color.border.strong}" }, "name": "token-color-border-strong", @@ -26108,12 +29927,26 @@ "token-color-border-action": { "key": "{color.border.action}", "$type": "color", - "$value": "#cce3fe", + "$value": "#4589ff", "group": "semantic", + "$modes": { + "hds": "#cce3fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-100}", + "$value": "{carbon.color.blue.50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-100}", + "cds-g0": "{carbon.color.blue.60}", + "cds-g10": "{carbon.color.blue.60}", + "cds-g90": "{carbon.color.blue.50}", + "cds-g100": "{carbon.color.blue.50}" + }, "key": "{color.border.action}" }, "name": "token-color-border-action", @@ -26129,12 +29962,26 @@ "token-color-border-highlight": { "key": "{color.border.highlight}", "$type": "color", - "$value": "#ead2fe", + "$value": "#a56eff", "group": "semantic", + "$modes": { + "hds": "#ead2fe", + "cds-g0": "#be95ff", + "cds-g10": "#be95ff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-100}", + "$value": "{carbon.color.purple.50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-100}", + "cds-g0": "{carbon.color.purple.40}", + "cds-g10": "{carbon.color.purple.40}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, "key": "{color.border.highlight}" }, "name": "token-color-border-highlight", @@ -26150,12 +29997,26 @@ "token-color-border-success": { "key": "{color.border.success}", "$type": "color", - "$value": "#cceeda", + "$value": "#24a148", "group": "semantic", + "$modes": { + "hds": "#cceeda", + "cds-g0": "#42be65", + "cds-g10": "#42be65", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, "original": { "$type": "color", - "$value": "{color.palette.green-100}", + "$value": "{carbon.color.green.50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-100}", + "cds-g0": "{carbon.color.green.40}", + "cds-g10": "{carbon.color.green.40}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, "key": "{color.border.success}" }, "name": "token-color-border-success", @@ -26171,12 +30032,26 @@ "token-color-border-warning": { "key": "{color.border.warning}", "$type": "color", - "$value": "#fbeabf", + "$value": "#eb6200", "group": "semantic", + "$modes": { + "hds": "#fbeabf", + "cds-g0": "#ff832b", + "cds-g10": "#ff832b", + "cds-g90": "#eb6200", + "cds-g100": "#eb6200" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-100}", + "$value": "{carbon.color.orange.50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.orange.40}", + "cds-g10": "{carbon.color.orange.40}", + "cds-g90": "{carbon.color.orange.50}", + "cds-g100": "{carbon.color.orange.50}" + }, "key": "{color.border.warning}" }, "name": "token-color-border-warning", @@ -26192,12 +30067,26 @@ "token-color-border-critical": { "key": "{color.border.critical}", "$type": "color", - "$value": "#fbd4d4", + "$value": "#fa4d56", "group": "semantic", + "$modes": { + "hds": "#fbd4d4", + "cds-g0": "#ff8389", + "cds-g10": "#ff8389", + "cds-g90": "#fa4d56", + "cds-g100": "#fa4d56" + }, "original": { "$type": "color", - "$value": "{color.palette.red-100}", + "$value": "{carbon.color.red.50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-100}", + "cds-g0": "{carbon.color.red.40}", + "cds-g10": "{carbon.color.red.40}", + "cds-g90": "{carbon.color.red.50}", + "cds-g100": "{carbon.color.red.50}" + }, "key": "{color.border.critical}" }, "name": "token-color-border-critical", @@ -26213,12 +30102,26 @@ "token-color-focus-action-internal": { "key": "{color.focus.action.internal}", "$type": "color", - "$value": "#0c56e9", + "$value": "#161616", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-300}", + "$value": "{carbon.themes.g90.focusInset}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, "key": "{color.focus.action.internal}" }, "name": "token-color-focus-action-internal", @@ -26235,14 +30138,28 @@ "token-color-focus-action-external": { "key": "{color.focus.action.external}", "$type": "color", - "$value": "#5990ff", + "$value": "#ffffff", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, "original": { "$type": "color", - "$value": "#5990ff", + "$value": "{carbon.themes.g90.focus}", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, "key": "{color.focus.action.external}" }, "name": "token-color-focus-action-external", @@ -26259,12 +30176,26 @@ "token-color-focus-critical-internal": { "key": "{color.focus.critical.internal}", "$type": "color", - "$value": "#c00005", + "$value": "#161616", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.red-300}", + "$value": "{carbon.themes.g90.focusInset}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, "key": "{color.focus.critical.internal}" }, "name": "token-color-focus-critical-internal", @@ -26281,14 +30212,28 @@ "token-color-focus-critical-external": { "key": "{color.focus.critical.external}", "$type": "color", - "$value": "#dd7578", + "$value": "#ffffff", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, "original": { "$type": "color", - "$value": "#dd7578", + "$value": "{carbon.themes.g90.focus}", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, "key": "{color.focus.critical.external}" }, "name": "token-color-focus-critical-external", @@ -26305,12 +30250,26 @@ "token-color-foreground-strong": { "key": "{color.foreground.strong}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#f4f4f4", "group": "semantic", + "$modes": { + "hds": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-700}", + "$value": "{carbon.themes.g90.textPrimary}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, "key": "{color.foreground.strong}" }, "name": "token-color-foreground-strong", @@ -26329,7 +30288,7 @@ "$value": "#f4f4f4", "group": "semantic", "$modes": { - "hds": "#ffffff", + "hds": "#3b3d45", "cds-g0": "#161616", "cds-g10": "#161616", "cds-g90": "#f4f4f4", @@ -26340,7 +30299,7 @@ "$value": "{carbon.themes.g90.textPrimary}", "group": "semantic", "$modes": { - "hds": "#ffffff", + "hds": "{color.palette.neutral-600}", "cds-g0": "{carbon.themes.white.textPrimary}", "cds-g10": "{carbon.themes.g10.textPrimary}", "cds-g90": "{carbon.themes.g90.textPrimary}", @@ -26361,12 +30320,26 @@ "token-color-foreground-faint": { "key": "{color.foreground.faint}", "$type": "color", - "$value": "#656a76", + "$value": "#f4f4f4", "group": "semantic", + "$modes": { + "hds": "#656a76", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-500}", + "$value": "{carbon.themes.g90.textPrimary}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-500}", + "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.faint}" }, "name": "token-color-foreground-faint", @@ -26382,12 +30355,26 @@ "token-color-foreground-high-contrast": { "key": "{color.foreground.high-contrast}", "$type": "color", - "$value": "#ffffff", + "$value": "#161616", "group": "semantic", + "$modes": { + "hds": "#8c909c", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.g90.textInverse}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, "key": "{color.foreground.high-contrast}" }, "name": "token-color-foreground-high-contrast", @@ -26403,12 +30390,26 @@ "token-color-foreground-disabled": { "key": "{color.foreground.disabled}", "$type": "color", - "$value": "#8c909c", + "$value": "rgba(244, 244, 244, 0.25)", "group": "semantic", + "$modes": { + "hds": "#8c909c", + "cds-g0": "rgba(22, 22, 22, 0.25)", + "cds-g10": "rgba(22, 22, 22, 0.25)", + "cds-g90": "rgba(244, 244, 244, 0.25)", + "cds-g100": "rgba(244, 244, 244, 0.25)" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-400}", + "$value": "{carbon.themes.g90.textDisabled}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textDisabled}", + "cds-g10": "{carbon.themes.g10.textDisabled}", + "cds-g90": "{carbon.themes.g90.textDisabled}", + "cds-g100": "{carbon.themes.g100.textDisabled}" + }, "key": "{color.foreground.disabled}" }, "name": "token-color-foreground-disabled", @@ -26424,12 +30425,26 @@ "token-color-foreground-action": { "key": "{color.foreground.action}", "$type": "color", - "$value": "#1060ff", + "$value": "#78a9ff", "group": "semantic", + "$modes": { + "hds": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#78a9ff", + "cds-g100": "#78a9ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-200}", + "$value": "{carbon.themes.g90.linkPrimary}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.white.linkPrimary}", + "cds-g10": "{carbon.themes.g10.linkPrimary}", + "cds-g90": "{carbon.themes.g90.linkPrimary}", + "cds-g100": "{carbon.themes.g100.linkPrimary}" + }, "key": "{color.foreground.action}" }, "name": "token-color-foreground-action", @@ -26445,12 +30460,26 @@ "token-color-foreground-action-hover": { "key": "{color.foreground.action-hover}", "$type": "color", - "$value": "#0c56e9", + "$value": "#a6c8ff", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-300}", + "$value": "{carbon.themes.g90.linkPrimaryHover}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, "key": "{color.foreground.action-hover}" }, "name": "token-color-foreground-action-hover", @@ -26466,12 +30495,26 @@ "token-color-foreground-action-active": { "key": "{color.foreground.action-active}", "$type": "color", - "$value": "#0046d1", + "$value": "#a6c8ff", "group": "semantic", + "$modes": { + "hds": "#0046d1", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-400}", + "$value": "{carbon.themes.g90.linkPrimaryHover}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, "key": "{color.foreground.action-active}" }, "name": "token-color-foreground-action-active", @@ -26487,12 +30530,26 @@ "token-color-foreground-highlight": { "key": "{color.foreground.highlight}", "$type": "color", - "$value": "#a737ff", + "$value": "#be95ff", "group": "semantic", + "$modes": { + "hds": "#a737ff", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-200}", + "$value": "{carbon.color.purple.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, "key": "{color.foreground.highlight}" }, "name": "token-color-foreground-highlight", @@ -26508,12 +30565,26 @@ "token-color-foreground-highlight-on-surface": { "key": "{color.foreground.highlight-on-surface}", "$type": "color", - "$value": "#911ced", + "$value": "#d4bbff", "group": "semantic", + "$modes": { + "hds": "#911ced", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#d4bbff", + "cds-g100": "#d4bbff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-300}", + "$value": "{carbon.color.purple.30}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-300}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.30}", + "cds-g100": "{carbon.color.purple.30}" + }, "key": "{color.foreground.highlight-on-surface}" }, "name": "token-color-foreground-highlight-on-surface", @@ -26529,12 +30600,26 @@ "token-color-foreground-highlight-high-contrast": { "key": "{color.foreground.highlight-high-contrast}", "$type": "color", - "$value": "#42215b", + "$value": "#e8daff", "group": "semantic", + "$modes": { + "hds": "#42215b", + "cds-g0": "#491d8b", + "cds-g10": "#491d8b", + "cds-g90": "#e8daff", + "cds-g100": "#d4bbff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-500}", + "$value": "{carbon.color.purple.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-500}", + "cds-g0": "{carbon.color.purple.80}", + "cds-g10": "{carbon.color.purple.80}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.30}" + }, "key": "{color.foreground.highlight-high-contrast}" }, "name": "token-color-foreground-highlight-high-contrast", @@ -26550,12 +30635,26 @@ "token-color-foreground-success": { "key": "{color.foreground.success}", "$type": "color", - "$value": "#008a22", + "$value": "#42be65", "group": "semantic", + "$modes": { + "hds": "#008a22", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#42be65", + "cds-g100": "#42be65" + }, "original": { "$type": "color", - "$value": "{color.palette.green-200}", + "$value": "{carbon.color.green.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-200}", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.40}", + "cds-g100": "{carbon.color.green.40}" + }, "key": "{color.foreground.success}" }, "name": "token-color-foreground-success", @@ -26571,12 +30670,26 @@ "token-color-foreground-success-on-surface": { "key": "{color.foreground.success-on-surface}", "$type": "color", - "$value": "#00781e", + "$value": "#6fdc8c", "group": "semantic", + "$modes": { + "hds": "#00781e", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#6fdc8c", + "cds-g100": "#6fdc8c" + }, "original": { "$type": "color", - "$value": "{color.palette.green-300}", + "$value": "{carbon.color.green.30}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-300}", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.30}", + "cds-g100": "{carbon.color.green.30}" + }, "key": "{color.foreground.success-on-surface}" }, "name": "token-color-foreground-success-on-surface", @@ -26592,12 +30705,26 @@ "token-color-foreground-success-high-contrast": { "key": "{color.foreground.success-high-contrast}", "$type": "color", - "$value": "#054220", + "$value": "#a7f0ba", "group": "semantic", + "$modes": { + "hds": "#054220", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, "original": { "$type": "color", - "$value": "{color.palette.green-500}", + "$value": "{carbon.color.green.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-500}", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, "key": "{color.foreground.success-high-contrast}" }, "name": "token-color-foreground-success-high-contrast", @@ -26613,12 +30740,26 @@ "token-color-foreground-warning": { "key": "{color.foreground.warning}", "$type": "color", - "$value": "#bb5a00", + "$value": "#ff832b", "group": "semantic", + "$modes": { + "hds": "#bb5a00", + "cds-g0": "#ba4e00", + "cds-g10": "#ba4e00", + "cds-g90": "#ff832b", + "cds-g100": "#ff832b" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-200}", + "$value": "{carbon.color.orange.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.orange.60}", + "cds-g10": "{carbon.color.orange.60}", + "cds-g90": "{carbon.color.orange.40}", + "cds-g100": "{carbon.color.orange.40}" + }, "key": "{color.foreground.warning}" }, "name": "token-color-foreground-warning", @@ -26634,12 +30775,26 @@ "token-color-foreground-warning-on-surface": { "key": "{color.foreground.warning-on-surface}", "$type": "color", - "$value": "#9e4b00", + "$value": "#ffb784", "group": "semantic", + "$modes": { + "hds": "#9e4b00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffb784", + "cds-g100": "#ffb784" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-300}", + "$value": "{carbon.color.orange.30}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-300}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.30}", + "cds-g100": "{carbon.color.orange.30}" + }, "key": "{color.foreground.warning-on-surface}" }, "name": "token-color-foreground-warning-on-surface", @@ -26655,12 +30810,26 @@ "token-color-foreground-warning-high-contrast": { "key": "{color.foreground.warning-high-contrast}", "$type": "color", - "$value": "#542800", + "$value": "#ffd9be", "group": "semantic", + "$modes": { + "hds": "#542800", + "cds-g0": "#5e2900", + "cds-g10": "#5e2900", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-500}", + "$value": "{carbon.color.orange.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-500}", + "cds-g0": "{carbon.color.orange.80}", + "cds-g10": "{carbon.color.orange.80}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, "key": "{color.foreground.warning-high-contrast}" }, "name": "token-color-foreground-warning-high-contrast", @@ -26676,12 +30845,26 @@ "token-color-foreground-critical": { "key": "{color.foreground.critical}", "$type": "color", - "$value": "#e52228", + "$value": "#ff8389", "group": "semantic", + "$modes": { + "hds": "#e52228", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#ff8389", + "cds-g100": "#ff8389" + }, "original": { "$type": "color", - "$value": "{color.palette.red-200}", + "$value": "{carbon.color.red.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-200}", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.40}", + "cds-g100": "{carbon.color.red.40}" + }, "key": "{color.foreground.critical}" }, "name": "token-color-foreground-critical", @@ -26697,12 +30880,26 @@ "token-color-foreground-critical-on-surface": { "key": "{color.foreground.critical-on-surface}", "$type": "color", - "$value": "#c00005", + "$value": "#ffb3b8", "group": "semantic", + "$modes": { + "hds": "#c00005", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffb3b8", + "cds-g100": "#ffb3b8" + }, "original": { "$type": "color", - "$value": "{color.palette.red-300}", + "$value": "{carbon.color.red.30}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-300}", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.30}", + "cds-g100": "{carbon.color.red.30}" + }, "key": "{color.foreground.critical-on-surface}" }, "name": "token-color-foreground-critical-on-surface", @@ -26718,12 +30915,26 @@ "token-color-foreground-critical-high-contrast": { "key": "{color.foreground.critical-high-contrast}", "$type": "color", - "$value": "#51130a", + "$value": "#ffd7d9", "group": "semantic", + "$modes": { + "hds": "#51130a", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, "original": { "$type": "color", - "$value": "{color.palette.red-500}", + "$value": "{carbon.color.red.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-500}", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, "key": "{color.foreground.critical-high-contrast}" }, "name": "token-color-foreground-critical-high-contrast", @@ -26739,12 +30950,26 @@ "token-color-page-primary": { "key": "{color.page.primary}", "$type": "color", - "$value": "#ffffff", + "$value": "#262626", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.g90.background}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, "key": "{color.page.primary}" }, "name": "token-color-page-primary", @@ -26760,12 +30985,26 @@ "token-color-page-faint": { "key": "{color.page.faint}", "$type": "color", - "$value": "#fafafa", + "$value": "#262626", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-50}", + "$value": "{carbon.themes.g90.background}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, "key": "{color.page.faint}" }, "name": "token-color-page-faint", @@ -26781,12 +31020,26 @@ "token-color-surface-primary": { "key": "{color.surface.primary}", "$type": "color", - "$value": "#ffffff", + "$value": "#393939", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.g90.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.primary}" }, "name": "token-color-surface-primary", @@ -26802,12 +31055,26 @@ "token-color-surface-faint": { "key": "{color.surface.faint}", "$type": "color", - "$value": "#fafafa", + "$value": "#393939", "group": "semantic", + "$modes": { + "hds": "#fafafa", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-50}", + "$value": "{carbon.themes.g90.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.faint}" }, "name": "token-color-surface-faint", @@ -26823,12 +31090,26 @@ "token-color-surface-strong": { "key": "{color.surface.strong}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#393939", "group": "semantic", + "$modes": { + "hds": "#f1f2f3", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-100}", + "$value": "{carbon.themes.g90.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.strong}" }, "name": "token-color-surface-strong", @@ -26844,12 +31125,26 @@ "token-color-surface-interactive": { "key": "{color.surface.interactive}", "$type": "color", - "$value": "#ffffff", + "$value": "#393939", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.g90.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.interactive}" }, "name": "token-color-surface-interactive", @@ -26865,12 +31160,26 @@ "token-color-surface-interactive-hover": { "key": "{color.surface.interactive-hover}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#474747", "group": "semantic", + "$modes": { + "hds": "#f1f2f3", + "cds-g0": "#e8e8e8", + "cds-g10": "#e8e8e8", + "cds-g90": "#474747", + "cds-g100": "#333333" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-100}", + "$value": "{carbon.themes.g90.layerHover01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerHover01}", + "cds-g10": "{carbon.themes.g10.layerHover01}", + "cds-g90": "{carbon.themes.g90.layerHover01}", + "cds-g100": "{carbon.themes.g100.layerHover01}" + }, "key": "{color.surface.interactive-hover}" }, "name": "token-color-surface-interactive-hover", @@ -26886,12 +31195,26 @@ "token-color-surface-interactive-active": { "key": "{color.surface.interactive-active}", "$type": "color", - "$value": "#dedfe3", + "$value": "#6f6f6f", "group": "semantic", + "$modes": { + "hds": "#dedfe3", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-200}", + "$value": "{carbon.themes.g90.layerActive01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.white.layerActive01}", + "cds-g10": "{carbon.themes.g10.layerActive01}", + "cds-g90": "{carbon.themes.g90.layerActive01}", + "cds-g100": "{carbon.themes.g100.layerActive01}" + }, "key": "{color.surface.interactive-active}" }, "name": "token-color-surface-interactive-active", @@ -26907,12 +31230,26 @@ "token-color-surface-interactive-disabled": { "key": "{color.surface.interactive-disabled}", "$type": "color", - "$value": "#fafafa", + "$value": "#ff0000", "group": "semantic", + "$modes": { + "hds": "#fafafa", + "cds-g0": "#FF0000", + "cds-g10": "#FF0000", + "cds-g90": "#FF0000", + "cds-g100": "#FF0000" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-50}", + "$value": "#FF0000", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-50}", + "cds-g0": "#FF0000", + "cds-g10": "#FF0000", + "cds-g90": "#FF0000", + "cds-g100": "#FF0000" + }, "key": "{color.surface.interactive-disabled}" }, "name": "token-color-surface-interactive-disabled", @@ -26928,12 +31265,26 @@ "token-color-surface-action": { "key": "{color.surface.action}", "$type": "color", - "$value": "#f2f8ff", + "$value": "#0043ce", "group": "semantic", + "$modes": { + "hds": "#f2f8ff", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-50}", + "$value": "{carbon.color.blue.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-50}", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.70}", + "cds-g100": "{carbon.color.blue.70}" + }, "key": "{color.surface.action}" }, "name": "token-color-surface-action", @@ -26949,12 +31300,26 @@ "token-color-surface-highlight": { "key": "{color.surface.highlight}", "$type": "color", - "$value": "#f9f2ff", + "$value": "#6929c4", "group": "semantic", + "$modes": { + "hds": "#f9f2ff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-50}", + "$value": "{carbon.color.purple.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-50}", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, "key": "{color.surface.highlight}" }, "name": "token-color-surface-highlight", @@ -26970,12 +31335,26 @@ "token-color-surface-success": { "key": "{color.surface.success}", "$type": "color", - "$value": "#f2fbf6", + "$value": "#0e6027", "group": "semantic", + "$modes": { + "hds": "#f2fbf6", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, "original": { "$type": "color", - "$value": "{color.palette.green-50}", + "$value": "{carbon.color.green.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-50}", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, "key": "{color.surface.success}" }, "name": "token-color-surface-success", @@ -26991,12 +31370,26 @@ "token-color-surface-warning": { "key": "{color.surface.warning}", "$type": "color", - "$value": "#fff9e8", + "$value": "#8a3800", "group": "semantic", + "$modes": { + "hds": "#fff9e8", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-50}", + "$value": "{carbon.color.orange.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-50}", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, "key": "{color.surface.warning}" }, "name": "token-color-surface-warning", @@ -27012,12 +31405,26 @@ "token-color-surface-critical": { "key": "{color.surface.critical}", "$type": "color", - "$value": "#fff5f5", + "$value": "#a2191f", "group": "semantic", + "$modes": { + "hds": "#fff5f5", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, "original": { "$type": "color", - "$value": "{color.palette.red-50}", + "$value": "{carbon.color.red.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-50}", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, "key": "{color.surface.critical}" }, "name": "token-color-surface-critical", @@ -29167,7 +33574,7 @@ }, "token-focus-ring-action-box-shadow": { "key": "{focus-ring.action.box-shadow}", - "$value": "inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff", + "$value": "inset 0 0 0 1px #161616, 0 0 0 3px #ffffff", "original": { "$value": "{focus-ring.action.internal-box-shadow}, {focus-ring.action.external-box-shadow}", "key": "{focus-ring.action.box-shadow}" @@ -29184,7 +33591,7 @@ }, "token-focus-ring-critical-box-shadow": { "key": "{focus-ring.critical.box-shadow}", - "$value": "inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578", + "$value": "inset 0 0 0 1px #161616, 0 0 0 3px #ffffff", "original": { "$value": "{focus-ring.critical.internal-box-shadow}, {focus-ring.critical.external-box-shadow}", "key": "{focus-ring.critical.box-shadow}" @@ -29794,7 +34201,7 @@ "token-form-label-color": { "key": "{form.label.color}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#f4f4f4", "group": "components", "original": { "$type": "color", @@ -29815,7 +34222,7 @@ "token-form-legend-color": { "key": "{form.legend.color}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#f4f4f4", "group": "components", "original": { "$type": "color", @@ -29836,7 +34243,7 @@ "token-form-helper-text-color": { "key": "{form.helper-text.color}", "$type": "color", - "$value": "#656a76", + "$value": "#f4f4f4", "group": "components", "original": { "$type": "color", @@ -29857,7 +34264,7 @@ "token-form-indicator-optional-color": { "key": "{form.indicator.optional.color}", "$type": "color", - "$value": "#656a76", + "$value": "#f4f4f4", "group": "components", "original": { "$type": "color", @@ -30088,7 +34495,7 @@ "token-form-control-base-foreground-value-color": { "key": "{form.control.base.foreground.value-color}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#f4f4f4", "group": "components", "original": { "$type": "color", @@ -30111,7 +34518,7 @@ "token-form-control-base-foreground-placeholder-color": { "key": "{form.control.base.foreground.placeholder-color}", "$type": "color", - "$value": "#656a76", + "$value": "#f4f4f4", "group": "components", "original": { "$type": "color", @@ -30134,7 +34541,7 @@ "token-form-control-base-surface-color-default": { "key": "{form.control.base.surface-color.default}", "$type": "color", - "$value": "#ffffff", + "$value": "#393939", "group": "components", "original": { "$type": "color", @@ -30157,7 +34564,7 @@ "token-form-control-base-surface-color-hover": { "key": "{form.control.base.surface-color.hover}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#474747", "group": "components", "original": { "$type": "color", @@ -30226,7 +34633,7 @@ "token-form-control-checked-foreground-color": { "key": "{form.control.checked.foreground-color}", "$type": "color", - "$value": "#ffffff", + "$value": "#161616", "group": "components", "original": { "$type": "color", @@ -30408,7 +34815,7 @@ "token-form-control-readonly-surface-color": { "key": "{form.control.readonly.surface-color}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#393939", "group": "components", "original": { "$type": "color", @@ -30430,7 +34837,7 @@ "token-form-control-readonly-border-color": { "key": "{form.control.readonly.border-color}", "$type": "color", - "$value": "#656a761a", + "$value": "#525252", "group": "components", "original": { "$type": "color", @@ -30452,7 +34859,7 @@ "token-form-control-disabled-foreground-color": { "key": "{form.control.disabled.foreground-color}", "$type": "color", - "$value": "#8c909c", + "$value": "rgba(244, 244, 244, 0.25)", "group": "components", "original": { "$type": "color", @@ -30474,7 +34881,7 @@ "token-form-control-disabled-surface-color": { "key": "{form.control.disabled.surface-color}", "$type": "color", - "$value": "#fafafa", + "$value": "#ff0000", "group": "components", "original": { "$type": "color", @@ -30496,7 +34903,7 @@ "token-form-control-disabled-border-color": { "key": "{form.control.disabled.border-color}", "$type": "color", - "$value": "#656a7633", + "$value": "#8d8d8d", "group": "components", "original": { "$type": "color", @@ -31107,7 +35514,7 @@ "token-form-toggle-base-surface-color-default": { "key": "{form.toggle.base.surface-color.default}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#393939", "group": "components", "comment": "the toggle has a different base surface color, compared to the other controls", "original": { @@ -32467,15 +36874,24 @@ "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.display.macOS}", - "{typography.font-stack.sans.display.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.display.emoji}" - ], + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.sans.display.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.font-stack.display}" }, "name": "token-typography-font-stack-display", @@ -32491,15 +36907,24 @@ "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.text.macOS}", - "{typography.font-stack.sans.text.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.text.emoji}" - ], + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.sans.text.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.font-stack.text}" }, "name": "token-typography-font-stack-text", @@ -32515,14 +36940,24 @@ "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", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.monospace.code.macOS}", - "{typography.font-stack.monospace.code.windows}", - "monospace" - ], + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.monospace.code.combined}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, "key": "{typography.font-stack.code}" }, "name": "token-typography-font-stack-code", @@ -32670,10 +37105,24 @@ "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-500.font-family}" }, "name": "token-typography-display-500-font-family", @@ -32689,14 +37138,28 @@ "token-typography-display-500-font-size": { "key": "{typography.display-500.font-size}", "$type": "font-size", - "$value": "1.875rem", + "$value": "2rem", "unit": "px", "comment": "30px/1.875rem", + "$modes": { + "hds": "30", + "cds-g0": "2rem", + "cds-g10": "2rem", + "cds-g90": "2rem", + "cds-g100": "2rem" + }, "original": { "$type": "font-size", - "$value": "30", + "$value": "{carbon.typography.heading05.font-size}", "unit": "px", "comment": "30px/1.875rem", + "$modes": { + "hds": "30", + "cds-g0": "{carbon.typography.heading05.font-size}", + "cds-g10": "{carbon.typography.heading05.font-size}", + "cds-g90": "{carbon.typography.heading05.font-size}", + "cds-g100": "{carbon.typography.heading05.font-size}" + }, "key": "{typography.display-500.font-size}" }, "name": "token-typography-display-500-font-size", @@ -32712,12 +37175,26 @@ "token-typography-display-500-line-height": { "key": "{typography.display-500.line-height}", "$type": "number", - "$value": 1.2666, + "$value": 1.25, "comment": "38px", + "$modes": { + "hds": 1.2666, + "cds-g0": 1.25, + "cds-g10": 1.25, + "cds-g90": 1.25, + "cds-g100": 1.25 + }, "original": { "$type": "number", - "$value": 1.2666, + "$value": "{carbon.typography.heading05.line-height}", "comment": "38px", + "$modes": { + "hds": 1.2666, + "cds-g0": "{carbon.typography.heading05.line-height}", + "cds-g10": "{carbon.typography.heading05.line-height}", + "cds-g90": "{carbon.typography.heading05.line-height}", + "cds-g100": "{carbon.typography.heading05.line-height}" + }, "key": "{typography.display-500.line-height}" }, "name": "token-typography-display-500-line-height", @@ -32730,13 +37207,64 @@ "line-height" ] }, + "token-typography-display-500-letter-spacing": { + "key": "{typography.display-500.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading05.letter-spacing}", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading05.letter-spacing}", + "cds-g10": "{carbon.typography.heading05.letter-spacing}", + "cds-g90": "{carbon.typography.heading05.letter-spacing}", + "cds-g100": "{carbon.typography.heading05.letter-spacing}" + }, + "key": "{typography.display-500.letter-spacing}" + }, + "name": "token-typography-display-500-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "letter-spacing" + ] + }, "token-typography-display-400-font-family": { "key": "{typography.display-400.font-family}", "$type": "font-family", - "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-400.font-family}" }, "name": "token-typography-display-400-font-family", @@ -32752,14 +37280,28 @@ "token-typography-display-400-font-size": { "key": "{typography.display-400.font-size}", "$type": "font-size", - "$value": "1.5rem", + "$value": "1.75rem", "unit": "px", "comment": "24px/1.5rem", + "$modes": { + "hds": "24", + "cds-g0": "1.75rem", + "cds-g10": "1.75rem", + "cds-g90": "1.75rem", + "cds-g100": "1.75rem" + }, "original": { "$type": "font-size", - "$value": "24", + "$value": "{carbon.typography.heading04.font-size}", "unit": "px", "comment": "24px/1.5rem", + "$modes": { + "hds": "24", + "cds-g0": "{carbon.typography.heading04.font-size}", + "cds-g10": "{carbon.typography.heading04.font-size}", + "cds-g90": "{carbon.typography.heading04.font-size}", + "cds-g100": "{carbon.typography.heading04.font-size}" + }, "key": "{typography.display-400.font-size}" }, "name": "token-typography-display-400-font-size", @@ -32775,12 +37317,26 @@ "token-typography-display-400-line-height": { "key": "{typography.display-400.line-height}", "$type": "number", - "$value": 1.3333, + "$value": 1.28572, "comment": "32px", + "$modes": { + "hds": 1.3333, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, "original": { "$type": "number", - "$value": 1.3333, + "$value": "{carbon.typography.heading04.line-height}", "comment": "32px", + "$modes": { + "hds": 1.3333, + "cds-g0": "{carbon.typography.heading04.line-height}", + "cds-g10": "{carbon.typography.heading04.line-height}", + "cds-g90": "{carbon.typography.heading04.line-height}", + "cds-g100": "{carbon.typography.heading04.line-height}" + }, "key": "{typography.display-400.line-height}" }, "name": "token-typography-display-400-line-height", @@ -32793,13 +37349,64 @@ "line-height" ] }, + "token-typography-display-400-letter-spacing": { + "key": "{typography.display-400.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading04.letter-spacing}", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "{carbon.typography.heading04.letter-spacing}", + "cds-g10": "{carbon.typography.heading04.letter-spacing}", + "cds-g90": "{carbon.typography.heading04.letter-spacing}", + "cds-g100": "{carbon.typography.heading04.letter-spacing}" + }, + "key": "{typography.display-400.letter-spacing}" + }, + "name": "token-typography-display-400-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "letter-spacing" + ] + }, "token-typography-display-300-font-family": { "key": "{typography.display-300.font-family}", "$type": "font-family", - "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-300.font-family}" }, "name": "token-typography-display-300-font-family", @@ -32815,14 +37422,28 @@ "token-typography-display-300-font-size": { "key": "{typography.display-300.font-size}", "$type": "font-size", - "$value": "1.125rem", + "$value": "1.25rem", "unit": "px", "comment": "18px/1.125rem", + "$modes": { + "hds": "18", + "cds-g0": "1.25rem", + "cds-g10": "1.25rem", + "cds-g90": "1.25rem", + "cds-g100": "1.25rem" + }, "original": { "$type": "font-size", - "$value": "18", + "$value": "{carbon.typography.heading03.font-size}", "unit": "px", "comment": "18px/1.125rem", + "$modes": { + "hds": "18", + "cds-g0": "{carbon.typography.heading03.font-size}", + "cds-g10": "{carbon.typography.heading03.font-size}", + "cds-g90": "{carbon.typography.heading03.font-size}", + "cds-g100": "{carbon.typography.heading03.font-size}" + }, "key": "{typography.display-300.font-size}" }, "name": "token-typography-display-300-font-size", @@ -32838,12 +37459,26 @@ "token-typography-display-300-line-height": { "key": "{typography.display-300.line-height}", "$type": "number", - "$value": 1.3333, + "$value": 1.4, "comment": "24px", + "$modes": { + "hds": 1.3333, + "cds-g0": 1.4, + "cds-g10": 1.4, + "cds-g90": 1.4, + "cds-g100": 1.4 + }, "original": { "$type": "number", - "$value": 1.3333, + "$value": "{carbon.typography.heading03.line-height}", "comment": "24px", + "$modes": { + "hds": 1.3333, + "cds-g0": "{carbon.typography.heading03.line-height}", + "cds-g10": "{carbon.typography.heading03.line-height}", + "cds-g90": "{carbon.typography.heading03.line-height}", + "cds-g100": "{carbon.typography.heading03.line-height}" + }, "key": "{typography.display-300.line-height}" }, "name": "token-typography-display-300-line-height", @@ -32859,14 +37494,28 @@ "token-typography-display-300-letter-spacing": { "key": "{typography.display-300.letter-spacing}", "$type": "letter-spacing", - "$value": "-0.5px", + "$value": "0px", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, "original": { "$type": "letter-spacing", - "$value": -0.5, + "$value": "{carbon.typography.heading03.letter-spacing}", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading03.letter-spacing}", + "cds-g10": "{carbon.typography.heading03.letter-spacing}", + "cds-g90": "{carbon.typography.heading03.letter-spacing}", + "cds-g100": "{carbon.typography.heading03.letter-spacing}" + }, "key": "{typography.display-300.letter-spacing}" }, "name": "token-typography-display-300-letter-spacing", @@ -32882,10 +37531,24 @@ "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-200.font-family}" }, "name": "token-typography-display-200-font-family", @@ -32904,11 +37567,25 @@ "$value": "1rem", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, "original": { "$type": "font-size", - "$value": "16", + "$value": "{carbon.typography.heading02.font-size}", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.heading02.font-size}", + "cds-g10": "{carbon.typography.heading02.font-size}", + "cds-g90": "{carbon.typography.heading02.font-size}", + "cds-g100": "{carbon.typography.heading02.font-size}" + }, "key": "{typography.display-200.font-size}" }, "name": "token-typography-display-200-font-size", @@ -32926,10 +37603,24 @@ "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "hds": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, "original": { "$type": "number", - "$value": 1.5, + "$value": "{carbon.typography.heading02.line-height}", "comment": "24px", + "$modes": { + "hds": 1.5, + "cds-g0": "{carbon.typography.heading02.line-height}", + "cds-g10": "{carbon.typography.heading02.line-height}", + "cds-g90": "{carbon.typography.heading02.line-height}", + "cds-g100": "{carbon.typography.heading02.line-height}" + }, "key": "{typography.display-200.line-height}" }, "name": "token-typography-display-200-line-height", @@ -32945,14 +37636,28 @@ "token-typography-display-200-letter-spacing": { "key": "{typography.display-200.letter-spacing}", "$type": "letter-spacing", - "$value": "-0.5px", + "$value": "0px", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, "original": { "$type": "letter-spacing", - "$value": -0.5, + "$value": "{carbon.typography.heading02.letter-spacing}", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading02.letter-spacing}", + "cds-g10": "{carbon.typography.heading02.letter-spacing}", + "cds-g90": "{carbon.typography.heading02.letter-spacing}", + "cds-g100": "{carbon.typography.heading02.letter-spacing}" + }, "key": "{typography.display-200.letter-spacing}" }, "name": "token-typography-display-200-letter-spacing", @@ -32968,10 +37673,24 @@ "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-100.font-family}" }, "name": "token-typography-display-100-font-family", @@ -32987,14 +37706,28 @@ "token-typography-display-100-font-size": { "key": "{typography.display-100.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "0.875rem", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "13", + "$value": "{carbon.typography.heading01.font-size}", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.heading01.font-size}", + "cds-g10": "{carbon.typography.heading01.font-size}", + "cds-g90": "{carbon.typography.heading01.font-size}", + "cds-g100": "{carbon.typography.heading01.font-size}" + }, "key": "{typography.display-100.font-size}" }, "name": "token-typography-display-100-font-size", @@ -33010,12 +37743,26 @@ "token-typography-display-100-line-height": { "key": "{typography.display-100.line-height}", "$type": "number", - "$value": 1.3846, + "$value": 1.42857, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.3846, + "$value": "{carbon.typography.heading01.line-height}", "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": "{carbon.typography.heading01.line-height}", + "cds-g10": "{carbon.typography.heading01.line-height}", + "cds-g90": "{carbon.typography.heading01.line-height}", + "cds-g100": "{carbon.typography.heading01.line-height}" + }, "key": "{typography.display-100.line-height}" }, "name": "token-typography-display-100-line-height", @@ -33028,13 +37775,64 @@ "line-height" ] }, + "token-typography-display-100-letter-spacing": { + "key": "{typography.display-100.letter-spacing}", + "$type": "letter-spacing", + "$value": "0.16px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "0.16px", + "cds-g10": "0.16px", + "cds-g90": "0.16px", + "cds-g100": "0.16px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading01.letter-spacing}", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "{carbon.typography.heading01.letter-spacing}", + "cds-g10": "{carbon.typography.heading01.letter-spacing}", + "cds-g90": "{carbon.typography.heading01.letter-spacing}", + "cds-g100": "{carbon.typography.heading01.letter-spacing}" + }, + "key": "{typography.display-100.letter-spacing}" + }, + "name": "token-typography-display-100-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "letter-spacing" + ] + }, "token-typography-body-300-font-family": { "key": "{typography.body-300.font-family}", "$type": "font-family", - "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-300.font-family}" }, "name": "token-typography-body-300-font-family", @@ -33053,11 +37851,25 @@ "$value": "1rem", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, "original": { "$type": "font-size", - "$value": "16", + "$value": "{carbon.typography.body02.font-size}", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.body02.font-size}", + "cds-g10": "{carbon.typography.body02.font-size}", + "cds-g90": "{carbon.typography.body02.font-size}", + "cds-g100": "{carbon.typography.body02.font-size}" + }, "key": "{typography.body-300.font-size}" }, "name": "token-typography-body-300-font-size", @@ -33075,10 +37887,24 @@ "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "hds": 1.4286, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, "original": { "$type": "number", - "$value": 1.5, + "$value": "{carbon.typography.body02.line-height}", "comment": "24px", + "$modes": { + "hds": 1.4286, + "cds-g0": "{carbon.typography.body02.line-height}", + "cds-g10": "{carbon.typography.body02.line-height}", + "cds-g90": "{carbon.typography.body02.line-height}", + "cds-g100": "{carbon.typography.body02.line-height}" + }, "key": "{typography.body-300.line-height}" }, "name": "token-typography-body-300-line-height", @@ -33094,10 +37920,24 @@ "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-200.font-family}" }, "name": "token-typography-body-200-font-family", @@ -33116,11 +37956,25 @@ "$value": "0.875rem", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "14", + "$value": "{carbon.typography.body01.font-size}", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "{carbon.typography.body01.font-size}", + "cds-g10": "{carbon.typography.body01.font-size}", + "cds-g90": "{carbon.typography.body01.font-size}", + "cds-g100": "{carbon.typography.body01.font-size}" + }, "key": "{typography.body-200.font-size}" }, "name": "token-typography-body-200-font-size", @@ -33136,12 +37990,26 @@ "token-typography-body-200-line-height": { "key": "{typography.body-200.line-height}", "$type": "number", - "$value": 1.4286, + "$value": 1.42857, "comment": "20px", + "$modes": { + "hds": 1.4286, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.4286, + "$value": "{carbon.typography.body01.line-height}", "comment": "20px", + "$modes": { + "hds": 1.4286, + "cds-g0": "{carbon.typography.body01.line-height}", + "cds-g10": "{carbon.typography.body01.line-height}", + "cds-g90": "{carbon.typography.body01.line-height}", + "cds-g100": "{carbon.typography.body01.line-height}" + }, "key": "{typography.body-200.line-height}" }, "name": "token-typography-body-200-line-height", @@ -33157,10 +38025,24 @@ "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-100.font-family}" }, "name": "token-typography-body-100-font-family", @@ -33176,14 +38058,28 @@ "token-typography-body-100-font-size": { "key": "{typography.body-100.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "0.875rem", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "13", + "$value": "{carbon.typography.bodyCompact01.font-size}", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.bodyCompact01.font-size}", + "cds-g10": "{carbon.typography.bodyCompact01.font-size}", + "cds-g90": "{carbon.typography.bodyCompact01.font-size}", + "cds-g100": "{carbon.typography.bodyCompact01.font-size}" + }, "key": "{typography.body-100.font-size}" }, "name": "token-typography-body-100-font-size", @@ -33199,12 +38095,26 @@ "token-typography-body-100-line-height": { "key": "{typography.body-100.line-height}", "$type": "number", - "$value": 1.3846, + "$value": 1.28572, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, "original": { "$type": "number", - "$value": 1.3846, + "$value": "{carbon.typography.bodyCompact01.line-height}", "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": "{carbon.typography.bodyCompact01.line-height}", + "cds-g10": "{carbon.typography.bodyCompact01.line-height}", + "cds-g90": "{carbon.typography.bodyCompact01.line-height}", + "cds-g100": "{carbon.typography.bodyCompact01.line-height}" + }, "key": "{typography.body-100.line-height}" }, "name": "token-typography-body-100-line-height", @@ -33217,76 +38127,132 @@ "line-height" ] }, - "token-typography-code-100-font-family": { - "key": "{typography.code-100.font-family}", + "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", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.code}", - "key": "{typography.code-100.font-family}" + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-300.font-family}" }, - "name": "token-typography-code-100-font-family", + "name": "token-typography-code-300-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "font-family" ] }, - "token-typography-code-100-font-size": { - "key": "{typography.code-100.font-size}", + "token-typography-code-300-font-size": { + "key": "{typography.code-300.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "0.875rem", "unit": "px", - "comment": "13px/0.8125rem", + "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "13", + "$value": "{carbon.typography.code02.font-size}", "unit": "px", - "comment": "13px/0.8125rem", - "key": "{typography.code-100.font-size}" + "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-300.font-size}" }, - "name": "token-typography-code-100-font-size", + "name": "token-typography-code-300-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "font-size" ] }, - "token-typography-code-100-line-height": { - "key": "{typography.code-100.line-height}", + "token-typography-code-300-line-height": { + "key": "{typography.code-300.line-height}", "$type": "number", - "$value": 1.23, - "comment": "16px", + "$value": 1.42857, + "comment": "20px", + "$modes": { + "hds": 1.25, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.23, - "comment": "16px", - "key": "{typography.code-100.line-height}" + "$value": "{carbon.typography.code02.line-height}", + "comment": "20px", + "$modes": { + "hds": 1.25, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-300.line-height}" }, - "name": "token-typography-code-100-line-height", + "name": "token-typography-code-300-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "line-height" ] }, "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", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.code}", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, "key": "{typography.code-200.font-family}" }, "name": "token-typography-code-200-font-family", @@ -33305,11 +38271,25 @@ "$value": "0.875rem", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "14", + "$value": "{carbon.typography.code02.font-size}", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, "key": "{typography.code-200.font-size}" }, "name": "token-typography-code-200-font-size", @@ -33325,12 +38305,26 @@ "token-typography-code-200-line-height": { "key": "{typography.code-200.line-height}", "$type": "number", - "$value": 1.125, + "$value": 1.42857, "comment": "18px", + "$modes": { + "hds": 1.125, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.125, + "$value": "{carbon.typography.code02.line-height}", "comment": "18px", + "$modes": { + "hds": 1.125, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, "key": "{typography.code-200.line-height}" }, "name": "token-typography-code-200-line-height", @@ -33343,66 +38337,108 @@ "line-height" ] }, - "token-typography-code-300-font-family": { - "key": "{typography.code-300.font-family}", + "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", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.code}", - "key": "{typography.code-300.font-family}" + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-100.font-family}" }, - "name": "token-typography-code-300-font-family", + "name": "token-typography-code-100-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "font-family" ] }, - "token-typography-code-300-font-size": { - "key": "{typography.code-300.font-size}", + "token-typography-code-100-font-size": { + "key": "{typography.code-100.font-size}", "$type": "font-size", - "$value": "1rem", + "$value": "0.875rem", "unit": "px", - "comment": "16px/1rem", + "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "16", + "$value": "{carbon.typography.code02.font-size}", "unit": "px", - "comment": "16px/1rem", - "key": "{typography.code-300.font-size}" + "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-100.font-size}" }, - "name": "token-typography-code-300-font-size", + "name": "token-typography-code-100-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "font-size" ] }, - "token-typography-code-300-line-height": { - "key": "{typography.code-300.line-height}", + "token-typography-code-100-line-height": { + "key": "{typography.code-100.line-height}", "$type": "number", - "$value": 1.25, - "comment": "20px", + "$value": 1.33333, + "comment": "16px", + "$modes": { + "hds": 1.23, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, "original": { "$type": "number", - "$value": 1.25, - "comment": "20px", - "key": "{typography.code-300.line-height}" + "$value": "{carbon.typography.code01.line-height}", + "comment": "16px", + "$modes": { + "hds": 1.23, + "cds-g0": "{carbon.typography.code01.line-height}", + "cds-g10": "{carbon.typography.code01.line-height}", + "cds-g90": "{carbon.typography.code01.line-height}", + "cds-g100": "{carbon.typography.code01.line-height}" + }, + "key": "{typography.code-100.line-height}" }, - "name": "token-typography-code-300-line-height", + "name": "token-typography-code-100-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "line-height" ] } @@ -34397,12 +39433,26 @@ "token-color-border-primary": { "key": "{color.border.primary}", "$type": "color", - "$value": "#656a7633", + "$value": "#6f6f6f", "group": "semantic", + "$modes": { + "hds": "#656a7633", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, "original": { "$type": "color", - "$value": "{color.palette.alpha-200}", + "$value": "{carbon.themes.g100.borderSubtle03}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-200}", + "cds-g0": "{carbon.themes.white.borderSubtle03}", + "cds-g10": "{carbon.themes.g10.borderSubtle03}", + "cds-g90": "{carbon.themes.g90.borderSubtle03}", + "cds-g100": "{carbon.themes.g100.borderSubtle03}" + }, "key": "{color.border.primary}" }, "name": "token-color-border-primary", @@ -34418,12 +39468,26 @@ "token-color-border-faint": { "key": "{color.border.faint}", "$type": "color", - "$value": "#656a761a", + "$value": "#393939", "group": "semantic", + "$modes": { + "hds": "#656a761a", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, "original": { "$type": "color", - "$value": "{color.palette.alpha-100}", + "$value": "{carbon.themes.g100.borderSubtle00}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-100}", + "cds-g0": "{carbon.themes.white.borderSubtle00}", + "cds-g10": "{carbon.themes.g10.borderSubtle00}", + "cds-g90": "{carbon.themes.g90.borderSubtle00}", + "cds-g100": "{carbon.themes.g100.borderSubtle00}" + }, "key": "{color.border.faint}" }, "name": "token-color-border-faint", @@ -34439,12 +39503,26 @@ "token-color-border-strong": { "key": "{color.border.strong}", "$type": "color", - "$value": "#3b3d4566", + "$value": "#525252", "group": "semantic", + "$modes": { + "hds": "#3b3d4566", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, "original": { "$type": "color", - "$value": "{color.palette.alpha-300}", + "$value": "{carbon.themes.g100.borderSubtle01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-300}", + "cds-g0": "{carbon.themes.white.borderSubtle01}", + "cds-g10": "{carbon.themes.g10.borderSubtle01}", + "cds-g90": "{carbon.themes.g90.borderSubtle01}", + "cds-g100": "{carbon.themes.g100.borderSubtle01}" + }, "key": "{color.border.strong}" }, "name": "token-color-border-strong", @@ -34460,12 +39538,26 @@ "token-color-border-action": { "key": "{color.border.action}", "$type": "color", - "$value": "#cce3fe", + "$value": "#4589ff", "group": "semantic", + "$modes": { + "hds": "#cce3fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-100}", + "$value": "{carbon.color.blue.50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-100}", + "cds-g0": "{carbon.color.blue.60}", + "cds-g10": "{carbon.color.blue.60}", + "cds-g90": "{carbon.color.blue.50}", + "cds-g100": "{carbon.color.blue.50}" + }, "key": "{color.border.action}" }, "name": "token-color-border-action", @@ -34481,12 +39573,26 @@ "token-color-border-highlight": { "key": "{color.border.highlight}", "$type": "color", - "$value": "#ead2fe", + "$value": "#a56eff", "group": "semantic", + "$modes": { + "hds": "#ead2fe", + "cds-g0": "#be95ff", + "cds-g10": "#be95ff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-100}", + "$value": "{carbon.color.purple.50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-100}", + "cds-g0": "{carbon.color.purple.40}", + "cds-g10": "{carbon.color.purple.40}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, "key": "{color.border.highlight}" }, "name": "token-color-border-highlight", @@ -34502,12 +39608,26 @@ "token-color-border-success": { "key": "{color.border.success}", "$type": "color", - "$value": "#cceeda", + "$value": "#24a148", "group": "semantic", + "$modes": { + "hds": "#cceeda", + "cds-g0": "#42be65", + "cds-g10": "#42be65", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, "original": { "$type": "color", - "$value": "{color.palette.green-100}", + "$value": "{carbon.color.green.50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-100}", + "cds-g0": "{carbon.color.green.40}", + "cds-g10": "{carbon.color.green.40}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, "key": "{color.border.success}" }, "name": "token-color-border-success", @@ -34523,12 +39643,26 @@ "token-color-border-warning": { "key": "{color.border.warning}", "$type": "color", - "$value": "#fbeabf", + "$value": "#eb6200", "group": "semantic", + "$modes": { + "hds": "#fbeabf", + "cds-g0": "#ff832b", + "cds-g10": "#ff832b", + "cds-g90": "#eb6200", + "cds-g100": "#eb6200" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-100}", + "$value": "{carbon.color.orange.50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.orange.40}", + "cds-g10": "{carbon.color.orange.40}", + "cds-g90": "{carbon.color.orange.50}", + "cds-g100": "{carbon.color.orange.50}" + }, "key": "{color.border.warning}" }, "name": "token-color-border-warning", @@ -34544,12 +39678,26 @@ "token-color-border-critical": { "key": "{color.border.critical}", "$type": "color", - "$value": "#fbd4d4", + "$value": "#fa4d56", "group": "semantic", + "$modes": { + "hds": "#fbd4d4", + "cds-g0": "#ff8389", + "cds-g10": "#ff8389", + "cds-g90": "#fa4d56", + "cds-g100": "#fa4d56" + }, "original": { "$type": "color", - "$value": "{color.palette.red-100}", + "$value": "{carbon.color.red.50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-100}", + "cds-g0": "{carbon.color.red.40}", + "cds-g10": "{carbon.color.red.40}", + "cds-g90": "{carbon.color.red.50}", + "cds-g100": "{carbon.color.red.50}" + }, "key": "{color.border.critical}" }, "name": "token-color-border-critical", @@ -34565,12 +39713,26 @@ "token-color-focus-action-internal": { "key": "{color.focus.action.internal}", "$type": "color", - "$value": "#0c56e9", + "$value": "#161616", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-300}", + "$value": "{carbon.themes.g100.focusInset}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, "key": "{color.focus.action.internal}" }, "name": "token-color-focus-action-internal", @@ -34587,14 +39749,28 @@ "token-color-focus-action-external": { "key": "{color.focus.action.external}", "$type": "color", - "$value": "#5990ff", + "$value": "#ffffff", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, "original": { "$type": "color", - "$value": "#5990ff", + "$value": "{carbon.themes.g100.focus}", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, "key": "{color.focus.action.external}" }, "name": "token-color-focus-action-external", @@ -34611,12 +39787,26 @@ "token-color-focus-critical-internal": { "key": "{color.focus.critical.internal}", "$type": "color", - "$value": "#c00005", + "$value": "#161616", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.red-300}", + "$value": "{carbon.themes.g100.focusInset}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, "key": "{color.focus.critical.internal}" }, "name": "token-color-focus-critical-internal", @@ -34633,14 +39823,28 @@ "token-color-focus-critical-external": { "key": "{color.focus.critical.external}", "$type": "color", - "$value": "#dd7578", + "$value": "#ffffff", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, "original": { "$type": "color", - "$value": "#dd7578", + "$value": "{carbon.themes.g100.focus}", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, "key": "{color.focus.critical.external}" }, "name": "token-color-focus-critical-external", @@ -34657,12 +39861,26 @@ "token-color-foreground-strong": { "key": "{color.foreground.strong}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#f4f4f4", "group": "semantic", + "$modes": { + "hds": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-700}", + "$value": "{carbon.themes.g100.textPrimary}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, "key": "{color.foreground.strong}" }, "name": "token-color-foreground-strong", @@ -34681,7 +39899,7 @@ "$value": "#f4f4f4", "group": "semantic", "$modes": { - "hds": "#ffffff", + "hds": "#3b3d45", "cds-g0": "#161616", "cds-g10": "#161616", "cds-g90": "#f4f4f4", @@ -34692,7 +39910,7 @@ "$value": "{carbon.themes.g100.textPrimary}", "group": "semantic", "$modes": { - "hds": "#ffffff", + "hds": "{color.palette.neutral-600}", "cds-g0": "{carbon.themes.white.textPrimary}", "cds-g10": "{carbon.themes.g10.textPrimary}", "cds-g90": "{carbon.themes.g90.textPrimary}", @@ -34713,12 +39931,26 @@ "token-color-foreground-faint": { "key": "{color.foreground.faint}", "$type": "color", - "$value": "#656a76", + "$value": "#f4f4f4", "group": "semantic", + "$modes": { + "hds": "#656a76", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-500}", + "$value": "{carbon.themes.g100.textPrimary}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-500}", + "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.faint}" }, "name": "token-color-foreground-faint", @@ -34734,12 +39966,26 @@ "token-color-foreground-high-contrast": { "key": "{color.foreground.high-contrast}", "$type": "color", - "$value": "#ffffff", + "$value": "#161616", "group": "semantic", + "$modes": { + "hds": "#8c909c", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.g100.textInverse}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, "key": "{color.foreground.high-contrast}" }, "name": "token-color-foreground-high-contrast", @@ -34755,12 +40001,26 @@ "token-color-foreground-disabled": { "key": "{color.foreground.disabled}", "$type": "color", - "$value": "#8c909c", + "$value": "rgba(244, 244, 244, 0.25)", "group": "semantic", + "$modes": { + "hds": "#8c909c", + "cds-g0": "rgba(22, 22, 22, 0.25)", + "cds-g10": "rgba(22, 22, 22, 0.25)", + "cds-g90": "rgba(244, 244, 244, 0.25)", + "cds-g100": "rgba(244, 244, 244, 0.25)" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-400}", + "$value": "{carbon.themes.g100.textDisabled}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textDisabled}", + "cds-g10": "{carbon.themes.g10.textDisabled}", + "cds-g90": "{carbon.themes.g90.textDisabled}", + "cds-g100": "{carbon.themes.g100.textDisabled}" + }, "key": "{color.foreground.disabled}" }, "name": "token-color-foreground-disabled", @@ -34776,12 +40036,26 @@ "token-color-foreground-action": { "key": "{color.foreground.action}", "$type": "color", - "$value": "#1060ff", + "$value": "#78a9ff", "group": "semantic", + "$modes": { + "hds": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#78a9ff", + "cds-g100": "#78a9ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-200}", + "$value": "{carbon.themes.g100.linkPrimary}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.white.linkPrimary}", + "cds-g10": "{carbon.themes.g10.linkPrimary}", + "cds-g90": "{carbon.themes.g90.linkPrimary}", + "cds-g100": "{carbon.themes.g100.linkPrimary}" + }, "key": "{color.foreground.action}" }, "name": "token-color-foreground-action", @@ -34797,12 +40071,26 @@ "token-color-foreground-action-hover": { "key": "{color.foreground.action-hover}", "$type": "color", - "$value": "#0c56e9", + "$value": "#a6c8ff", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-300}", + "$value": "{carbon.themes.g100.linkPrimaryHover}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, "key": "{color.foreground.action-hover}" }, "name": "token-color-foreground-action-hover", @@ -34818,12 +40106,26 @@ "token-color-foreground-action-active": { "key": "{color.foreground.action-active}", "$type": "color", - "$value": "#0046d1", + "$value": "#a6c8ff", "group": "semantic", + "$modes": { + "hds": "#0046d1", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-400}", + "$value": "{carbon.themes.g100.linkPrimaryHover}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, "key": "{color.foreground.action-active}" }, "name": "token-color-foreground-action-active", @@ -34839,12 +40141,26 @@ "token-color-foreground-highlight": { "key": "{color.foreground.highlight}", "$type": "color", - "$value": "#a737ff", + "$value": "#be95ff", "group": "semantic", + "$modes": { + "hds": "#a737ff", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-200}", + "$value": "{carbon.color.purple.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, "key": "{color.foreground.highlight}" }, "name": "token-color-foreground-highlight", @@ -34860,12 +40176,26 @@ "token-color-foreground-highlight-on-surface": { "key": "{color.foreground.highlight-on-surface}", "$type": "color", - "$value": "#911ced", + "$value": "#d4bbff", "group": "semantic", + "$modes": { + "hds": "#911ced", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#d4bbff", + "cds-g100": "#d4bbff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-300}", + "$value": "{carbon.color.purple.30}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-300}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.30}", + "cds-g100": "{carbon.color.purple.30}" + }, "key": "{color.foreground.highlight-on-surface}" }, "name": "token-color-foreground-highlight-on-surface", @@ -34881,12 +40211,26 @@ "token-color-foreground-highlight-high-contrast": { "key": "{color.foreground.highlight-high-contrast}", "$type": "color", - "$value": "#42215b", + "$value": "#d4bbff", "group": "semantic", + "$modes": { + "hds": "#42215b", + "cds-g0": "#491d8b", + "cds-g10": "#491d8b", + "cds-g90": "#e8daff", + "cds-g100": "#d4bbff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-500}", + "$value": "{carbon.color.purple.30}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-500}", + "cds-g0": "{carbon.color.purple.80}", + "cds-g10": "{carbon.color.purple.80}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.30}" + }, "key": "{color.foreground.highlight-high-contrast}" }, "name": "token-color-foreground-highlight-high-contrast", @@ -34902,12 +40246,26 @@ "token-color-foreground-success": { "key": "{color.foreground.success}", "$type": "color", - "$value": "#008a22", + "$value": "#42be65", "group": "semantic", + "$modes": { + "hds": "#008a22", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#42be65", + "cds-g100": "#42be65" + }, "original": { "$type": "color", - "$value": "{color.palette.green-200}", + "$value": "{carbon.color.green.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-200}", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.40}", + "cds-g100": "{carbon.color.green.40}" + }, "key": "{color.foreground.success}" }, "name": "token-color-foreground-success", @@ -34923,12 +40281,26 @@ "token-color-foreground-success-on-surface": { "key": "{color.foreground.success-on-surface}", "$type": "color", - "$value": "#00781e", + "$value": "#6fdc8c", "group": "semantic", + "$modes": { + "hds": "#00781e", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#6fdc8c", + "cds-g100": "#6fdc8c" + }, "original": { "$type": "color", - "$value": "{color.palette.green-300}", + "$value": "{carbon.color.green.30}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-300}", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.30}", + "cds-g100": "{carbon.color.green.30}" + }, "key": "{color.foreground.success-on-surface}" }, "name": "token-color-foreground-success-on-surface", @@ -34944,12 +40316,26 @@ "token-color-foreground-success-high-contrast": { "key": "{color.foreground.success-high-contrast}", "$type": "color", - "$value": "#054220", + "$value": "#a7f0ba", "group": "semantic", + "$modes": { + "hds": "#054220", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, "original": { "$type": "color", - "$value": "{color.palette.green-500}", + "$value": "{carbon.color.green.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-500}", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, "key": "{color.foreground.success-high-contrast}" }, "name": "token-color-foreground-success-high-contrast", @@ -34965,12 +40351,26 @@ "token-color-foreground-warning": { "key": "{color.foreground.warning}", "$type": "color", - "$value": "#bb5a00", + "$value": "#ff832b", "group": "semantic", + "$modes": { + "hds": "#bb5a00", + "cds-g0": "#ba4e00", + "cds-g10": "#ba4e00", + "cds-g90": "#ff832b", + "cds-g100": "#ff832b" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-200}", + "$value": "{carbon.color.orange.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.orange.60}", + "cds-g10": "{carbon.color.orange.60}", + "cds-g90": "{carbon.color.orange.40}", + "cds-g100": "{carbon.color.orange.40}" + }, "key": "{color.foreground.warning}" }, "name": "token-color-foreground-warning", @@ -34986,12 +40386,26 @@ "token-color-foreground-warning-on-surface": { "key": "{color.foreground.warning-on-surface}", "$type": "color", - "$value": "#9e4b00", + "$value": "#ffb784", "group": "semantic", + "$modes": { + "hds": "#9e4b00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffb784", + "cds-g100": "#ffb784" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-300}", + "$value": "{carbon.color.orange.30}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-300}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.30}", + "cds-g100": "{carbon.color.orange.30}" + }, "key": "{color.foreground.warning-on-surface}" }, "name": "token-color-foreground-warning-on-surface", @@ -35007,12 +40421,26 @@ "token-color-foreground-warning-high-contrast": { "key": "{color.foreground.warning-high-contrast}", "$type": "color", - "$value": "#542800", + "$value": "#ffd9be", "group": "semantic", + "$modes": { + "hds": "#542800", + "cds-g0": "#5e2900", + "cds-g10": "#5e2900", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-500}", + "$value": "{carbon.color.orange.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-500}", + "cds-g0": "{carbon.color.orange.80}", + "cds-g10": "{carbon.color.orange.80}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, "key": "{color.foreground.warning-high-contrast}" }, "name": "token-color-foreground-warning-high-contrast", @@ -35028,12 +40456,26 @@ "token-color-foreground-critical": { "key": "{color.foreground.critical}", "$type": "color", - "$value": "#e52228", + "$value": "#ff8389", "group": "semantic", + "$modes": { + "hds": "#e52228", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#ff8389", + "cds-g100": "#ff8389" + }, "original": { "$type": "color", - "$value": "{color.palette.red-200}", + "$value": "{carbon.color.red.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-200}", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.40}", + "cds-g100": "{carbon.color.red.40}" + }, "key": "{color.foreground.critical}" }, "name": "token-color-foreground-critical", @@ -35049,12 +40491,26 @@ "token-color-foreground-critical-on-surface": { "key": "{color.foreground.critical-on-surface}", "$type": "color", - "$value": "#c00005", + "$value": "#ffb3b8", "group": "semantic", + "$modes": { + "hds": "#c00005", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffb3b8", + "cds-g100": "#ffb3b8" + }, "original": { "$type": "color", - "$value": "{color.palette.red-300}", + "$value": "{carbon.color.red.30}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-300}", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.30}", + "cds-g100": "{carbon.color.red.30}" + }, "key": "{color.foreground.critical-on-surface}" }, "name": "token-color-foreground-critical-on-surface", @@ -35070,12 +40526,26 @@ "token-color-foreground-critical-high-contrast": { "key": "{color.foreground.critical-high-contrast}", "$type": "color", - "$value": "#51130a", + "$value": "#ffd7d9", "group": "semantic", + "$modes": { + "hds": "#51130a", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, "original": { "$type": "color", - "$value": "{color.palette.red-500}", + "$value": "{carbon.color.red.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-500}", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, "key": "{color.foreground.critical-high-contrast}" }, "name": "token-color-foreground-critical-high-contrast", @@ -35091,12 +40561,26 @@ "token-color-page-primary": { "key": "{color.page.primary}", "$type": "color", - "$value": "#ffffff", + "$value": "#161616", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.g100.background}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, "key": "{color.page.primary}" }, "name": "token-color-page-primary", @@ -35112,12 +40596,26 @@ "token-color-page-faint": { "key": "{color.page.faint}", "$type": "color", - "$value": "#fafafa", + "$value": "#161616", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-50}", + "$value": "{carbon.themes.g100.background}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, "key": "{color.page.faint}" }, "name": "token-color-page-faint", @@ -35133,12 +40631,26 @@ "token-color-surface-primary": { "key": "{color.surface.primary}", "$type": "color", - "$value": "#ffffff", + "$value": "#262626", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.g100.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.primary}" }, "name": "token-color-surface-primary", @@ -35154,12 +40666,26 @@ "token-color-surface-faint": { "key": "{color.surface.faint}", "$type": "color", - "$value": "#fafafa", + "$value": "#262626", "group": "semantic", + "$modes": { + "hds": "#fafafa", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-50}", + "$value": "{carbon.themes.g100.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.faint}" }, "name": "token-color-surface-faint", @@ -35175,12 +40701,26 @@ "token-color-surface-strong": { "key": "{color.surface.strong}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#262626", "group": "semantic", + "$modes": { + "hds": "#f1f2f3", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-100}", + "$value": "{carbon.themes.g100.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.strong}" }, "name": "token-color-surface-strong", @@ -35196,12 +40736,26 @@ "token-color-surface-interactive": { "key": "{color.surface.interactive}", "$type": "color", - "$value": "#ffffff", + "$value": "#262626", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.g100.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.interactive}" }, "name": "token-color-surface-interactive", @@ -35217,12 +40771,26 @@ "token-color-surface-interactive-hover": { "key": "{color.surface.interactive-hover}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#333333", "group": "semantic", + "$modes": { + "hds": "#f1f2f3", + "cds-g0": "#e8e8e8", + "cds-g10": "#e8e8e8", + "cds-g90": "#474747", + "cds-g100": "#333333" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-100}", + "$value": "{carbon.themes.g100.layerHover01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerHover01}", + "cds-g10": "{carbon.themes.g10.layerHover01}", + "cds-g90": "{carbon.themes.g90.layerHover01}", + "cds-g100": "{carbon.themes.g100.layerHover01}" + }, "key": "{color.surface.interactive-hover}" }, "name": "token-color-surface-interactive-hover", @@ -35238,12 +40806,26 @@ "token-color-surface-interactive-active": { "key": "{color.surface.interactive-active}", "$type": "color", - "$value": "#dedfe3", + "$value": "#525252", "group": "semantic", + "$modes": { + "hds": "#dedfe3", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-200}", + "$value": "{carbon.themes.g100.layerActive01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.white.layerActive01}", + "cds-g10": "{carbon.themes.g10.layerActive01}", + "cds-g90": "{carbon.themes.g90.layerActive01}", + "cds-g100": "{carbon.themes.g100.layerActive01}" + }, "key": "{color.surface.interactive-active}" }, "name": "token-color-surface-interactive-active", @@ -35259,12 +40841,26 @@ "token-color-surface-interactive-disabled": { "key": "{color.surface.interactive-disabled}", "$type": "color", - "$value": "#fafafa", + "$value": "#ff0000", "group": "semantic", + "$modes": { + "hds": "#fafafa", + "cds-g0": "#FF0000", + "cds-g10": "#FF0000", + "cds-g90": "#FF0000", + "cds-g100": "#FF0000" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-50}", + "$value": "#FF0000", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-50}", + "cds-g0": "#FF0000", + "cds-g10": "#FF0000", + "cds-g90": "#FF0000", + "cds-g100": "#FF0000" + }, "key": "{color.surface.interactive-disabled}" }, "name": "token-color-surface-interactive-disabled", @@ -35280,12 +40876,26 @@ "token-color-surface-action": { "key": "{color.surface.action}", "$type": "color", - "$value": "#f2f8ff", + "$value": "#0043ce", "group": "semantic", + "$modes": { + "hds": "#f2f8ff", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-50}", + "$value": "{carbon.color.blue.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-50}", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.70}", + "cds-g100": "{carbon.color.blue.70}" + }, "key": "{color.surface.action}" }, "name": "token-color-surface-action", @@ -35301,12 +40911,26 @@ "token-color-surface-highlight": { "key": "{color.surface.highlight}", "$type": "color", - "$value": "#f9f2ff", + "$value": "#6929c4", "group": "semantic", + "$modes": { + "hds": "#f9f2ff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-50}", + "$value": "{carbon.color.purple.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-50}", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, "key": "{color.surface.highlight}" }, "name": "token-color-surface-highlight", @@ -35322,12 +40946,26 @@ "token-color-surface-success": { "key": "{color.surface.success}", "$type": "color", - "$value": "#f2fbf6", + "$value": "#0e6027", "group": "semantic", + "$modes": { + "hds": "#f2fbf6", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, "original": { "$type": "color", - "$value": "{color.palette.green-50}", + "$value": "{carbon.color.green.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-50}", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, "key": "{color.surface.success}" }, "name": "token-color-surface-success", @@ -35343,12 +40981,26 @@ "token-color-surface-warning": { "key": "{color.surface.warning}", "$type": "color", - "$value": "#fff9e8", + "$value": "#8a3800", "group": "semantic", + "$modes": { + "hds": "#fff9e8", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-50}", + "$value": "{carbon.color.orange.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-50}", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, "key": "{color.surface.warning}" }, "name": "token-color-surface-warning", @@ -35364,12 +41016,26 @@ "token-color-surface-critical": { "key": "{color.surface.critical}", "$type": "color", - "$value": "#fff5f5", + "$value": "#a2191f", "group": "semantic", + "$modes": { + "hds": "#fff5f5", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, "original": { "$type": "color", - "$value": "{color.palette.red-50}", + "$value": "{carbon.color.red.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-50}", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, "key": "{color.surface.critical}" }, "name": "token-color-surface-critical", @@ -37519,7 +43185,7 @@ }, "token-focus-ring-action-box-shadow": { "key": "{focus-ring.action.box-shadow}", - "$value": "inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff", + "$value": "inset 0 0 0 1px #161616, 0 0 0 3px #ffffff", "original": { "$value": "{focus-ring.action.internal-box-shadow}, {focus-ring.action.external-box-shadow}", "key": "{focus-ring.action.box-shadow}" @@ -37536,7 +43202,7 @@ }, "token-focus-ring-critical-box-shadow": { "key": "{focus-ring.critical.box-shadow}", - "$value": "inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578", + "$value": "inset 0 0 0 1px #161616, 0 0 0 3px #ffffff", "original": { "$value": "{focus-ring.critical.internal-box-shadow}, {focus-ring.critical.external-box-shadow}", "key": "{focus-ring.critical.box-shadow}" @@ -38146,7 +43812,7 @@ "token-form-label-color": { "key": "{form.label.color}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#f4f4f4", "group": "components", "original": { "$type": "color", @@ -38167,7 +43833,7 @@ "token-form-legend-color": { "key": "{form.legend.color}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#f4f4f4", "group": "components", "original": { "$type": "color", @@ -38188,7 +43854,7 @@ "token-form-helper-text-color": { "key": "{form.helper-text.color}", "$type": "color", - "$value": "#656a76", + "$value": "#f4f4f4", "group": "components", "original": { "$type": "color", @@ -38209,7 +43875,7 @@ "token-form-indicator-optional-color": { "key": "{form.indicator.optional.color}", "$type": "color", - "$value": "#656a76", + "$value": "#f4f4f4", "group": "components", "original": { "$type": "color", @@ -38440,7 +44106,7 @@ "token-form-control-base-foreground-value-color": { "key": "{form.control.base.foreground.value-color}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#f4f4f4", "group": "components", "original": { "$type": "color", @@ -38463,7 +44129,7 @@ "token-form-control-base-foreground-placeholder-color": { "key": "{form.control.base.foreground.placeholder-color}", "$type": "color", - "$value": "#656a76", + "$value": "#f4f4f4", "group": "components", "original": { "$type": "color", @@ -38486,7 +44152,7 @@ "token-form-control-base-surface-color-default": { "key": "{form.control.base.surface-color.default}", "$type": "color", - "$value": "#ffffff", + "$value": "#262626", "group": "components", "original": { "$type": "color", @@ -38509,7 +44175,7 @@ "token-form-control-base-surface-color-hover": { "key": "{form.control.base.surface-color.hover}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#333333", "group": "components", "original": { "$type": "color", @@ -38578,7 +44244,7 @@ "token-form-control-checked-foreground-color": { "key": "{form.control.checked.foreground-color}", "$type": "color", - "$value": "#ffffff", + "$value": "#161616", "group": "components", "original": { "$type": "color", @@ -38760,7 +44426,7 @@ "token-form-control-readonly-surface-color": { "key": "{form.control.readonly.surface-color}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#262626", "group": "components", "original": { "$type": "color", @@ -38782,7 +44448,7 @@ "token-form-control-readonly-border-color": { "key": "{form.control.readonly.border-color}", "$type": "color", - "$value": "#656a761a", + "$value": "#393939", "group": "components", "original": { "$type": "color", @@ -38804,7 +44470,7 @@ "token-form-control-disabled-foreground-color": { "key": "{form.control.disabled.foreground-color}", "$type": "color", - "$value": "#8c909c", + "$value": "rgba(244, 244, 244, 0.25)", "group": "components", "original": { "$type": "color", @@ -38826,7 +44492,7 @@ "token-form-control-disabled-surface-color": { "key": "{form.control.disabled.surface-color}", "$type": "color", - "$value": "#fafafa", + "$value": "#ff0000", "group": "components", "original": { "$type": "color", @@ -38848,7 +44514,7 @@ "token-form-control-disabled-border-color": { "key": "{form.control.disabled.border-color}", "$type": "color", - "$value": "#656a7633", + "$value": "#6f6f6f", "group": "components", "original": { "$type": "color", @@ -39459,7 +45125,7 @@ "token-form-toggle-base-surface-color-default": { "key": "{form.toggle.base.surface-color.default}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#262626", "group": "components", "comment": "the toggle has a different base surface color, compared to the other controls", "original": { @@ -40819,15 +46485,24 @@ "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.display.macOS}", - "{typography.font-stack.sans.display.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.display.emoji}" - ], + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.sans.display.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.font-stack.display}" }, "name": "token-typography-font-stack-display", @@ -40843,15 +46518,24 @@ "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.text.macOS}", - "{typography.font-stack.sans.text.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.text.emoji}" - ], + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.sans.text.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.font-stack.text}" }, "name": "token-typography-font-stack-text", @@ -40867,14 +46551,24 @@ "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", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.monospace.code.macOS}", - "{typography.font-stack.monospace.code.windows}", - "monospace" - ], + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.monospace.code.combined}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, "key": "{typography.font-stack.code}" }, "name": "token-typography-font-stack-code", @@ -41022,10 +46716,24 @@ "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-500.font-family}" }, "name": "token-typography-display-500-font-family", @@ -41041,14 +46749,28 @@ "token-typography-display-500-font-size": { "key": "{typography.display-500.font-size}", "$type": "font-size", - "$value": "1.875rem", + "$value": "2rem", "unit": "px", "comment": "30px/1.875rem", + "$modes": { + "hds": "30", + "cds-g0": "2rem", + "cds-g10": "2rem", + "cds-g90": "2rem", + "cds-g100": "2rem" + }, "original": { "$type": "font-size", - "$value": "30", + "$value": "{carbon.typography.heading05.font-size}", "unit": "px", "comment": "30px/1.875rem", + "$modes": { + "hds": "30", + "cds-g0": "{carbon.typography.heading05.font-size}", + "cds-g10": "{carbon.typography.heading05.font-size}", + "cds-g90": "{carbon.typography.heading05.font-size}", + "cds-g100": "{carbon.typography.heading05.font-size}" + }, "key": "{typography.display-500.font-size}" }, "name": "token-typography-display-500-font-size", @@ -41064,12 +46786,26 @@ "token-typography-display-500-line-height": { "key": "{typography.display-500.line-height}", "$type": "number", - "$value": 1.2666, + "$value": 1.25, "comment": "38px", + "$modes": { + "hds": 1.2666, + "cds-g0": 1.25, + "cds-g10": 1.25, + "cds-g90": 1.25, + "cds-g100": 1.25 + }, "original": { "$type": "number", - "$value": 1.2666, + "$value": "{carbon.typography.heading05.line-height}", "comment": "38px", + "$modes": { + "hds": 1.2666, + "cds-g0": "{carbon.typography.heading05.line-height}", + "cds-g10": "{carbon.typography.heading05.line-height}", + "cds-g90": "{carbon.typography.heading05.line-height}", + "cds-g100": "{carbon.typography.heading05.line-height}" + }, "key": "{typography.display-500.line-height}" }, "name": "token-typography-display-500-line-height", @@ -41082,13 +46818,64 @@ "line-height" ] }, + "token-typography-display-500-letter-spacing": { + "key": "{typography.display-500.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading05.letter-spacing}", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading05.letter-spacing}", + "cds-g10": "{carbon.typography.heading05.letter-spacing}", + "cds-g90": "{carbon.typography.heading05.letter-spacing}", + "cds-g100": "{carbon.typography.heading05.letter-spacing}" + }, + "key": "{typography.display-500.letter-spacing}" + }, + "name": "token-typography-display-500-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "letter-spacing" + ] + }, "token-typography-display-400-font-family": { "key": "{typography.display-400.font-family}", "$type": "font-family", - "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-400.font-family}" }, "name": "token-typography-display-400-font-family", @@ -41104,14 +46891,28 @@ "token-typography-display-400-font-size": { "key": "{typography.display-400.font-size}", "$type": "font-size", - "$value": "1.5rem", + "$value": "1.75rem", "unit": "px", "comment": "24px/1.5rem", + "$modes": { + "hds": "24", + "cds-g0": "1.75rem", + "cds-g10": "1.75rem", + "cds-g90": "1.75rem", + "cds-g100": "1.75rem" + }, "original": { "$type": "font-size", - "$value": "24", + "$value": "{carbon.typography.heading04.font-size}", "unit": "px", "comment": "24px/1.5rem", + "$modes": { + "hds": "24", + "cds-g0": "{carbon.typography.heading04.font-size}", + "cds-g10": "{carbon.typography.heading04.font-size}", + "cds-g90": "{carbon.typography.heading04.font-size}", + "cds-g100": "{carbon.typography.heading04.font-size}" + }, "key": "{typography.display-400.font-size}" }, "name": "token-typography-display-400-font-size", @@ -41127,12 +46928,26 @@ "token-typography-display-400-line-height": { "key": "{typography.display-400.line-height}", "$type": "number", - "$value": 1.3333, + "$value": 1.28572, "comment": "32px", + "$modes": { + "hds": 1.3333, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, "original": { "$type": "number", - "$value": 1.3333, + "$value": "{carbon.typography.heading04.line-height}", "comment": "32px", + "$modes": { + "hds": 1.3333, + "cds-g0": "{carbon.typography.heading04.line-height}", + "cds-g10": "{carbon.typography.heading04.line-height}", + "cds-g90": "{carbon.typography.heading04.line-height}", + "cds-g100": "{carbon.typography.heading04.line-height}" + }, "key": "{typography.display-400.line-height}" }, "name": "token-typography-display-400-line-height", @@ -41145,13 +46960,64 @@ "line-height" ] }, + "token-typography-display-400-letter-spacing": { + "key": "{typography.display-400.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading04.letter-spacing}", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "{carbon.typography.heading04.letter-spacing}", + "cds-g10": "{carbon.typography.heading04.letter-spacing}", + "cds-g90": "{carbon.typography.heading04.letter-spacing}", + "cds-g100": "{carbon.typography.heading04.letter-spacing}" + }, + "key": "{typography.display-400.letter-spacing}" + }, + "name": "token-typography-display-400-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "letter-spacing" + ] + }, "token-typography-display-300-font-family": { "key": "{typography.display-300.font-family}", "$type": "font-family", - "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-300.font-family}" }, "name": "token-typography-display-300-font-family", @@ -41167,14 +47033,28 @@ "token-typography-display-300-font-size": { "key": "{typography.display-300.font-size}", "$type": "font-size", - "$value": "1.125rem", + "$value": "1.25rem", "unit": "px", "comment": "18px/1.125rem", + "$modes": { + "hds": "18", + "cds-g0": "1.25rem", + "cds-g10": "1.25rem", + "cds-g90": "1.25rem", + "cds-g100": "1.25rem" + }, "original": { "$type": "font-size", - "$value": "18", + "$value": "{carbon.typography.heading03.font-size}", "unit": "px", "comment": "18px/1.125rem", + "$modes": { + "hds": "18", + "cds-g0": "{carbon.typography.heading03.font-size}", + "cds-g10": "{carbon.typography.heading03.font-size}", + "cds-g90": "{carbon.typography.heading03.font-size}", + "cds-g100": "{carbon.typography.heading03.font-size}" + }, "key": "{typography.display-300.font-size}" }, "name": "token-typography-display-300-font-size", @@ -41190,12 +47070,26 @@ "token-typography-display-300-line-height": { "key": "{typography.display-300.line-height}", "$type": "number", - "$value": 1.3333, + "$value": 1.4, "comment": "24px", + "$modes": { + "hds": 1.3333, + "cds-g0": 1.4, + "cds-g10": 1.4, + "cds-g90": 1.4, + "cds-g100": 1.4 + }, "original": { "$type": "number", - "$value": 1.3333, + "$value": "{carbon.typography.heading03.line-height}", "comment": "24px", + "$modes": { + "hds": 1.3333, + "cds-g0": "{carbon.typography.heading03.line-height}", + "cds-g10": "{carbon.typography.heading03.line-height}", + "cds-g90": "{carbon.typography.heading03.line-height}", + "cds-g100": "{carbon.typography.heading03.line-height}" + }, "key": "{typography.display-300.line-height}" }, "name": "token-typography-display-300-line-height", @@ -41211,14 +47105,28 @@ "token-typography-display-300-letter-spacing": { "key": "{typography.display-300.letter-spacing}", "$type": "letter-spacing", - "$value": "-0.5px", + "$value": "0px", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, "original": { "$type": "letter-spacing", - "$value": -0.5, + "$value": "{carbon.typography.heading03.letter-spacing}", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading03.letter-spacing}", + "cds-g10": "{carbon.typography.heading03.letter-spacing}", + "cds-g90": "{carbon.typography.heading03.letter-spacing}", + "cds-g100": "{carbon.typography.heading03.letter-spacing}" + }, "key": "{typography.display-300.letter-spacing}" }, "name": "token-typography-display-300-letter-spacing", @@ -41234,10 +47142,24 @@ "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-200.font-family}" }, "name": "token-typography-display-200-font-family", @@ -41256,11 +47178,25 @@ "$value": "1rem", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, "original": { "$type": "font-size", - "$value": "16", + "$value": "{carbon.typography.heading02.font-size}", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.heading02.font-size}", + "cds-g10": "{carbon.typography.heading02.font-size}", + "cds-g90": "{carbon.typography.heading02.font-size}", + "cds-g100": "{carbon.typography.heading02.font-size}" + }, "key": "{typography.display-200.font-size}" }, "name": "token-typography-display-200-font-size", @@ -41278,10 +47214,24 @@ "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "hds": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, "original": { "$type": "number", - "$value": 1.5, + "$value": "{carbon.typography.heading02.line-height}", "comment": "24px", + "$modes": { + "hds": 1.5, + "cds-g0": "{carbon.typography.heading02.line-height}", + "cds-g10": "{carbon.typography.heading02.line-height}", + "cds-g90": "{carbon.typography.heading02.line-height}", + "cds-g100": "{carbon.typography.heading02.line-height}" + }, "key": "{typography.display-200.line-height}" }, "name": "token-typography-display-200-line-height", @@ -41297,14 +47247,28 @@ "token-typography-display-200-letter-spacing": { "key": "{typography.display-200.letter-spacing}", "$type": "letter-spacing", - "$value": "-0.5px", + "$value": "0px", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, "original": { "$type": "letter-spacing", - "$value": -0.5, + "$value": "{carbon.typography.heading02.letter-spacing}", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading02.letter-spacing}", + "cds-g10": "{carbon.typography.heading02.letter-spacing}", + "cds-g90": "{carbon.typography.heading02.letter-spacing}", + "cds-g100": "{carbon.typography.heading02.letter-spacing}" + }, "key": "{typography.display-200.letter-spacing}" }, "name": "token-typography-display-200-letter-spacing", @@ -41320,10 +47284,24 @@ "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-100.font-family}" }, "name": "token-typography-display-100-font-family", @@ -41339,14 +47317,28 @@ "token-typography-display-100-font-size": { "key": "{typography.display-100.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "0.875rem", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "13", + "$value": "{carbon.typography.heading01.font-size}", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.heading01.font-size}", + "cds-g10": "{carbon.typography.heading01.font-size}", + "cds-g90": "{carbon.typography.heading01.font-size}", + "cds-g100": "{carbon.typography.heading01.font-size}" + }, "key": "{typography.display-100.font-size}" }, "name": "token-typography-display-100-font-size", @@ -41362,12 +47354,26 @@ "token-typography-display-100-line-height": { "key": "{typography.display-100.line-height}", "$type": "number", - "$value": 1.3846, + "$value": 1.42857, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.3846, + "$value": "{carbon.typography.heading01.line-height}", "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": "{carbon.typography.heading01.line-height}", + "cds-g10": "{carbon.typography.heading01.line-height}", + "cds-g90": "{carbon.typography.heading01.line-height}", + "cds-g100": "{carbon.typography.heading01.line-height}" + }, "key": "{typography.display-100.line-height}" }, "name": "token-typography-display-100-line-height", @@ -41380,13 +47386,64 @@ "line-height" ] }, + "token-typography-display-100-letter-spacing": { + "key": "{typography.display-100.letter-spacing}", + "$type": "letter-spacing", + "$value": "0.16px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "0.16px", + "cds-g10": "0.16px", + "cds-g90": "0.16px", + "cds-g100": "0.16px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading01.letter-spacing}", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "{carbon.typography.heading01.letter-spacing}", + "cds-g10": "{carbon.typography.heading01.letter-spacing}", + "cds-g90": "{carbon.typography.heading01.letter-spacing}", + "cds-g100": "{carbon.typography.heading01.letter-spacing}" + }, + "key": "{typography.display-100.letter-spacing}" + }, + "name": "token-typography-display-100-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "letter-spacing" + ] + }, "token-typography-body-300-font-family": { "key": "{typography.body-300.font-family}", "$type": "font-family", - "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-300.font-family}" }, "name": "token-typography-body-300-font-family", @@ -41405,11 +47462,25 @@ "$value": "1rem", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, "original": { "$type": "font-size", - "$value": "16", + "$value": "{carbon.typography.body02.font-size}", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.body02.font-size}", + "cds-g10": "{carbon.typography.body02.font-size}", + "cds-g90": "{carbon.typography.body02.font-size}", + "cds-g100": "{carbon.typography.body02.font-size}" + }, "key": "{typography.body-300.font-size}" }, "name": "token-typography-body-300-font-size", @@ -41427,10 +47498,24 @@ "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "hds": 1.4286, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, "original": { "$type": "number", - "$value": 1.5, + "$value": "{carbon.typography.body02.line-height}", "comment": "24px", + "$modes": { + "hds": 1.4286, + "cds-g0": "{carbon.typography.body02.line-height}", + "cds-g10": "{carbon.typography.body02.line-height}", + "cds-g90": "{carbon.typography.body02.line-height}", + "cds-g100": "{carbon.typography.body02.line-height}" + }, "key": "{typography.body-300.line-height}" }, "name": "token-typography-body-300-line-height", @@ -41446,10 +47531,24 @@ "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-200.font-family}" }, "name": "token-typography-body-200-font-family", @@ -41468,11 +47567,25 @@ "$value": "0.875rem", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "14", + "$value": "{carbon.typography.body01.font-size}", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "{carbon.typography.body01.font-size}", + "cds-g10": "{carbon.typography.body01.font-size}", + "cds-g90": "{carbon.typography.body01.font-size}", + "cds-g100": "{carbon.typography.body01.font-size}" + }, "key": "{typography.body-200.font-size}" }, "name": "token-typography-body-200-font-size", @@ -41488,12 +47601,26 @@ "token-typography-body-200-line-height": { "key": "{typography.body-200.line-height}", "$type": "number", - "$value": 1.4286, + "$value": 1.42857, "comment": "20px", + "$modes": { + "hds": 1.4286, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.4286, + "$value": "{carbon.typography.body01.line-height}", "comment": "20px", + "$modes": { + "hds": 1.4286, + "cds-g0": "{carbon.typography.body01.line-height}", + "cds-g10": "{carbon.typography.body01.line-height}", + "cds-g90": "{carbon.typography.body01.line-height}", + "cds-g100": "{carbon.typography.body01.line-height}" + }, "key": "{typography.body-200.line-height}" }, "name": "token-typography-body-200-line-height", @@ -41509,10 +47636,24 @@ "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-100.font-family}" }, "name": "token-typography-body-100-font-family", @@ -41528,14 +47669,28 @@ "token-typography-body-100-font-size": { "key": "{typography.body-100.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "0.875rem", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "13", + "$value": "{carbon.typography.bodyCompact01.font-size}", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.bodyCompact01.font-size}", + "cds-g10": "{carbon.typography.bodyCompact01.font-size}", + "cds-g90": "{carbon.typography.bodyCompact01.font-size}", + "cds-g100": "{carbon.typography.bodyCompact01.font-size}" + }, "key": "{typography.body-100.font-size}" }, "name": "token-typography-body-100-font-size", @@ -41551,12 +47706,26 @@ "token-typography-body-100-line-height": { "key": "{typography.body-100.line-height}", "$type": "number", - "$value": 1.3846, + "$value": 1.28572, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, "original": { "$type": "number", - "$value": 1.3846, + "$value": "{carbon.typography.bodyCompact01.line-height}", "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": "{carbon.typography.bodyCompact01.line-height}", + "cds-g10": "{carbon.typography.bodyCompact01.line-height}", + "cds-g90": "{carbon.typography.bodyCompact01.line-height}", + "cds-g100": "{carbon.typography.bodyCompact01.line-height}" + }, "key": "{typography.body-100.line-height}" }, "name": "token-typography-body-100-line-height", @@ -41569,76 +47738,132 @@ "line-height" ] }, - "token-typography-code-100-font-family": { - "key": "{typography.code-100.font-family}", + "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", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.code}", - "key": "{typography.code-100.font-family}" + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-300.font-family}" }, - "name": "token-typography-code-100-font-family", + "name": "token-typography-code-300-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "font-family" ] }, - "token-typography-code-100-font-size": { - "key": "{typography.code-100.font-size}", + "token-typography-code-300-font-size": { + "key": "{typography.code-300.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "0.875rem", "unit": "px", - "comment": "13px/0.8125rem", + "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "13", + "$value": "{carbon.typography.code02.font-size}", "unit": "px", - "comment": "13px/0.8125rem", - "key": "{typography.code-100.font-size}" + "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-300.font-size}" }, - "name": "token-typography-code-100-font-size", + "name": "token-typography-code-300-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "font-size" ] }, - "token-typography-code-100-line-height": { - "key": "{typography.code-100.line-height}", + "token-typography-code-300-line-height": { + "key": "{typography.code-300.line-height}", "$type": "number", - "$value": 1.23, - "comment": "16px", + "$value": 1.42857, + "comment": "20px", + "$modes": { + "hds": 1.25, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.23, - "comment": "16px", - "key": "{typography.code-100.line-height}" + "$value": "{carbon.typography.code02.line-height}", + "comment": "20px", + "$modes": { + "hds": 1.25, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-300.line-height}" }, - "name": "token-typography-code-100-line-height", + "name": "token-typography-code-300-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "line-height" ] }, "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", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.code}", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, "key": "{typography.code-200.font-family}" }, "name": "token-typography-code-200-font-family", @@ -41657,11 +47882,25 @@ "$value": "0.875rem", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "14", + "$value": "{carbon.typography.code02.font-size}", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, "key": "{typography.code-200.font-size}" }, "name": "token-typography-code-200-font-size", @@ -41677,12 +47916,26 @@ "token-typography-code-200-line-height": { "key": "{typography.code-200.line-height}", "$type": "number", - "$value": 1.125, + "$value": 1.42857, "comment": "18px", + "$modes": { + "hds": 1.125, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.125, + "$value": "{carbon.typography.code02.line-height}", "comment": "18px", + "$modes": { + "hds": 1.125, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, "key": "{typography.code-200.line-height}" }, "name": "token-typography-code-200-line-height", @@ -41695,66 +47948,108 @@ "line-height" ] }, - "token-typography-code-300-font-family": { - "key": "{typography.code-300.font-family}", + "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", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.code}", - "key": "{typography.code-300.font-family}" + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-100.font-family}" }, - "name": "token-typography-code-300-font-family", + "name": "token-typography-code-100-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "font-family" ] }, - "token-typography-code-300-font-size": { - "key": "{typography.code-300.font-size}", + "token-typography-code-100-font-size": { + "key": "{typography.code-100.font-size}", "$type": "font-size", - "$value": "1rem", + "$value": "0.875rem", "unit": "px", - "comment": "16px/1rem", + "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "16", + "$value": "{carbon.typography.code02.font-size}", "unit": "px", - "comment": "16px/1rem", - "key": "{typography.code-300.font-size}" + "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-100.font-size}" }, - "name": "token-typography-code-300-font-size", + "name": "token-typography-code-100-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "font-size" ] }, - "token-typography-code-300-line-height": { - "key": "{typography.code-300.line-height}", + "token-typography-code-100-line-height": { + "key": "{typography.code-100.line-height}", "$type": "number", - "$value": 1.25, - "comment": "20px", + "$value": 1.33333, + "comment": "16px", + "$modes": { + "hds": 1.23, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, "original": { "$type": "number", - "$value": 1.25, - "comment": "20px", - "key": "{typography.code-300.line-height}" + "$value": "{carbon.typography.code01.line-height}", + "comment": "16px", + "$modes": { + "hds": 1.23, + "cds-g0": "{carbon.typography.code01.line-height}", + "cds-g10": "{carbon.typography.code01.line-height}", + "cds-g90": "{carbon.typography.code01.line-height}", + "cds-g100": "{carbon.typography.code01.line-height}" + }, + "key": "{typography.code-100.line-height}" }, - "name": "token-typography-code-300-line-height", + "name": "token-typography-code-100-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "line-height" ] } diff --git a/packages/tokens/dist/docs/products/themed-tokens/cds-g0.json b/packages/tokens/dist/docs/products/themed-tokens/cds-g0.json index d51cca9e590..cd95a9888e1 100644 --- a/packages/tokens/dist/docs/products/themed-tokens/cds-g0.json +++ b/packages/tokens/dist/docs/products/themed-tokens/cds-g0.json @@ -988,12 +988,26 @@ { "key": "{color.border.primary}", "$type": "color", - "$value": "#656a7633", + "$value": "#c6c6c6", "group": "semantic", + "$modes": { + "hds": "#656a7633", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, "original": { "$type": "color", - "$value": "{color.palette.alpha-200}", + "$value": "{carbon.themes.white.borderSubtle03}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-200}", + "cds-g0": "{carbon.themes.white.borderSubtle03}", + "cds-g10": "{carbon.themes.g10.borderSubtle03}", + "cds-g90": "{carbon.themes.g90.borderSubtle03}", + "cds-g100": "{carbon.themes.g100.borderSubtle03}" + }, "key": "{color.border.primary}" }, "name": "token-color-border-primary", @@ -1009,12 +1023,26 @@ { "key": "{color.border.faint}", "$type": "color", - "$value": "#656a761a", + "$value": "#e0e0e0", "group": "semantic", + "$modes": { + "hds": "#656a761a", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, "original": { "$type": "color", - "$value": "{color.palette.alpha-100}", + "$value": "{carbon.themes.white.borderSubtle00}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-100}", + "cds-g0": "{carbon.themes.white.borderSubtle00}", + "cds-g10": "{carbon.themes.g10.borderSubtle00}", + "cds-g90": "{carbon.themes.g90.borderSubtle00}", + "cds-g100": "{carbon.themes.g100.borderSubtle00}" + }, "key": "{color.border.faint}" }, "name": "token-color-border-faint", @@ -1030,12 +1058,26 @@ { "key": "{color.border.strong}", "$type": "color", - "$value": "#3b3d4566", + "$value": "#c6c6c6", "group": "semantic", + "$modes": { + "hds": "#3b3d4566", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, "original": { "$type": "color", - "$value": "{color.palette.alpha-300}", + "$value": "{carbon.themes.white.borderSubtle01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-300}", + "cds-g0": "{carbon.themes.white.borderSubtle01}", + "cds-g10": "{carbon.themes.g10.borderSubtle01}", + "cds-g90": "{carbon.themes.g90.borderSubtle01}", + "cds-g100": "{carbon.themes.g100.borderSubtle01}" + }, "key": "{color.border.strong}" }, "name": "token-color-border-strong", @@ -1051,12 +1093,26 @@ { "key": "{color.border.action}", "$type": "color", - "$value": "#cce3fe", + "$value": "#0f62fe", "group": "semantic", + "$modes": { + "hds": "#cce3fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-100}", + "$value": "{carbon.color.blue.60}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-100}", + "cds-g0": "{carbon.color.blue.60}", + "cds-g10": "{carbon.color.blue.60}", + "cds-g90": "{carbon.color.blue.50}", + "cds-g100": "{carbon.color.blue.50}" + }, "key": "{color.border.action}" }, "name": "token-color-border-action", @@ -1072,12 +1128,26 @@ { "key": "{color.border.highlight}", "$type": "color", - "$value": "#ead2fe", + "$value": "#be95ff", "group": "semantic", + "$modes": { + "hds": "#ead2fe", + "cds-g0": "#be95ff", + "cds-g10": "#be95ff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-100}", + "$value": "{carbon.color.purple.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-100}", + "cds-g0": "{carbon.color.purple.40}", + "cds-g10": "{carbon.color.purple.40}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, "key": "{color.border.highlight}" }, "name": "token-color-border-highlight", @@ -1093,12 +1163,26 @@ { "key": "{color.border.success}", "$type": "color", - "$value": "#cceeda", + "$value": "#42be65", "group": "semantic", + "$modes": { + "hds": "#cceeda", + "cds-g0": "#42be65", + "cds-g10": "#42be65", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, "original": { "$type": "color", - "$value": "{color.palette.green-100}", + "$value": "{carbon.color.green.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-100}", + "cds-g0": "{carbon.color.green.40}", + "cds-g10": "{carbon.color.green.40}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, "key": "{color.border.success}" }, "name": "token-color-border-success", @@ -1114,12 +1198,26 @@ { "key": "{color.border.warning}", "$type": "color", - "$value": "#fbeabf", + "$value": "#ff832b", "group": "semantic", + "$modes": { + "hds": "#fbeabf", + "cds-g0": "#ff832b", + "cds-g10": "#ff832b", + "cds-g90": "#eb6200", + "cds-g100": "#eb6200" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-100}", + "$value": "{carbon.color.orange.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.orange.40}", + "cds-g10": "{carbon.color.orange.40}", + "cds-g90": "{carbon.color.orange.50}", + "cds-g100": "{carbon.color.orange.50}" + }, "key": "{color.border.warning}" }, "name": "token-color-border-warning", @@ -1135,12 +1233,26 @@ { "key": "{color.border.critical}", "$type": "color", - "$value": "#fbd4d4", + "$value": "#ff8389", "group": "semantic", + "$modes": { + "hds": "#fbd4d4", + "cds-g0": "#ff8389", + "cds-g10": "#ff8389", + "cds-g90": "#fa4d56", + "cds-g100": "#fa4d56" + }, "original": { "$type": "color", - "$value": "{color.palette.red-100}", + "$value": "{carbon.color.red.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-100}", + "cds-g0": "{carbon.color.red.40}", + "cds-g10": "{carbon.color.red.40}", + "cds-g90": "{carbon.color.red.50}", + "cds-g100": "{carbon.color.red.50}" + }, "key": "{color.border.critical}" }, "name": "token-color-border-critical", @@ -1156,12 +1268,26 @@ { "key": "{color.focus.action.internal}", "$type": "color", - "$value": "#0c56e9", + "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-300}", + "$value": "{carbon.themes.white.focusInset}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, "key": "{color.focus.action.internal}" }, "name": "token-color-focus-action-internal", @@ -1178,14 +1304,28 @@ { "key": "{color.focus.action.external}", "$type": "color", - "$value": "#5990ff", + "$value": "#0f62fe", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, "original": { "$type": "color", - "$value": "#5990ff", + "$value": "{carbon.themes.white.focus}", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, "key": "{color.focus.action.external}" }, "name": "token-color-focus-action-external", @@ -1202,12 +1342,26 @@ { "key": "{color.focus.critical.internal}", "$type": "color", - "$value": "#c00005", + "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.red-300}", + "$value": "{carbon.themes.white.focusInset}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, "key": "{color.focus.critical.internal}" }, "name": "token-color-focus-critical-internal", @@ -1224,14 +1378,28 @@ { "key": "{color.focus.critical.external}", "$type": "color", - "$value": "#dd7578", + "$value": "#0f62fe", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, "original": { "$type": "color", - "$value": "#dd7578", + "$value": "{carbon.themes.white.focus}", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, "key": "{color.focus.critical.external}" }, "name": "token-color-focus-critical-external", @@ -1248,12 +1416,26 @@ { "key": "{color.foreground.strong}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#161616", "group": "semantic", + "$modes": { + "hds": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-700}", + "$value": "{carbon.themes.white.textPrimary}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, "key": "{color.foreground.strong}" }, "name": "token-color-foreground-strong", @@ -1272,7 +1454,7 @@ "$value": "#161616", "group": "semantic", "$modes": { - "hds": "#ffffff", + "hds": "#3b3d45", "cds-g0": "#161616", "cds-g10": "#161616", "cds-g90": "#f4f4f4", @@ -1283,7 +1465,7 @@ "$value": "{carbon.themes.white.textPrimary}", "group": "semantic", "$modes": { - "hds": "#ffffff", + "hds": "{color.palette.neutral-600}", "cds-g0": "{carbon.themes.white.textPrimary}", "cds-g10": "{carbon.themes.g10.textPrimary}", "cds-g90": "{carbon.themes.g90.textPrimary}", @@ -1304,12 +1486,26 @@ { "key": "{color.foreground.faint}", "$type": "color", - "$value": "#656a76", + "$value": "#161616", "group": "semantic", + "$modes": { + "hds": "#656a76", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-500}", + "$value": "{carbon.themes.white.textPrimary}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-500}", + "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.faint}" }, "name": "token-color-foreground-faint", @@ -1327,10 +1523,24 @@ "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#8c909c", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.white.textInverse}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, "key": "{color.foreground.high-contrast}" }, "name": "token-color-foreground-high-contrast", @@ -1346,12 +1556,26 @@ { "key": "{color.foreground.disabled}", "$type": "color", - "$value": "#8c909c", + "$value": "rgba(22, 22, 22, 0.25)", "group": "semantic", + "$modes": { + "hds": "#8c909c", + "cds-g0": "rgba(22, 22, 22, 0.25)", + "cds-g10": "rgba(22, 22, 22, 0.25)", + "cds-g90": "rgba(244, 244, 244, 0.25)", + "cds-g100": "rgba(244, 244, 244, 0.25)" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-400}", + "$value": "{carbon.themes.white.textDisabled}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textDisabled}", + "cds-g10": "{carbon.themes.g10.textDisabled}", + "cds-g90": "{carbon.themes.g90.textDisabled}", + "cds-g100": "{carbon.themes.g100.textDisabled}" + }, "key": "{color.foreground.disabled}" }, "name": "token-color-foreground-disabled", @@ -1367,12 +1591,26 @@ { "key": "{color.foreground.action}", "$type": "color", - "$value": "#1060ff", + "$value": "#0f62fe", "group": "semantic", + "$modes": { + "hds": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#78a9ff", + "cds-g100": "#78a9ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-200}", + "$value": "{carbon.themes.white.linkPrimary}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.white.linkPrimary}", + "cds-g10": "{carbon.themes.g10.linkPrimary}", + "cds-g90": "{carbon.themes.g90.linkPrimary}", + "cds-g100": "{carbon.themes.g100.linkPrimary}" + }, "key": "{color.foreground.action}" }, "name": "token-color-foreground-action", @@ -1388,12 +1626,26 @@ { "key": "{color.foreground.action-hover}", "$type": "color", - "$value": "#0c56e9", + "$value": "#0043ce", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-300}", + "$value": "{carbon.themes.white.linkPrimaryHover}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, "key": "{color.foreground.action-hover}" }, "name": "token-color-foreground-action-hover", @@ -1409,12 +1661,26 @@ { "key": "{color.foreground.action-active}", "$type": "color", - "$value": "#0046d1", + "$value": "#0043ce", "group": "semantic", + "$modes": { + "hds": "#0046d1", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-400}", + "$value": "{carbon.themes.white.linkPrimaryHover}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, "key": "{color.foreground.action-active}" }, "name": "token-color-foreground-action-active", @@ -1430,12 +1696,26 @@ { "key": "{color.foreground.highlight}", "$type": "color", - "$value": "#a737ff", + "$value": "#8a3ffc", "group": "semantic", + "$modes": { + "hds": "#a737ff", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-200}", + "$value": "{carbon.color.purple.60}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, "key": "{color.foreground.highlight}" }, "name": "token-color-foreground-highlight", @@ -1451,12 +1731,26 @@ { "key": "{color.foreground.highlight-on-surface}", "$type": "color", - "$value": "#911ced", + "$value": "#6929c4", "group": "semantic", + "$modes": { + "hds": "#911ced", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#d4bbff", + "cds-g100": "#d4bbff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-300}", + "$value": "{carbon.color.purple.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-300}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.30}", + "cds-g100": "{carbon.color.purple.30}" + }, "key": "{color.foreground.highlight-on-surface}" }, "name": "token-color-foreground-highlight-on-surface", @@ -1472,12 +1766,26 @@ { "key": "{color.foreground.highlight-high-contrast}", "$type": "color", - "$value": "#42215b", + "$value": "#491d8b", "group": "semantic", + "$modes": { + "hds": "#42215b", + "cds-g0": "#491d8b", + "cds-g10": "#491d8b", + "cds-g90": "#e8daff", + "cds-g100": "#d4bbff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-500}", + "$value": "{carbon.color.purple.80}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-500}", + "cds-g0": "{carbon.color.purple.80}", + "cds-g10": "{carbon.color.purple.80}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.30}" + }, "key": "{color.foreground.highlight-high-contrast}" }, "name": "token-color-foreground-highlight-high-contrast", @@ -1493,12 +1801,26 @@ { "key": "{color.foreground.success}", "$type": "color", - "$value": "#008a22", + "$value": "#198038", "group": "semantic", + "$modes": { + "hds": "#008a22", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#42be65", + "cds-g100": "#42be65" + }, "original": { "$type": "color", - "$value": "{color.palette.green-200}", + "$value": "{carbon.color.green.60}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-200}", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.40}", + "cds-g100": "{carbon.color.green.40}" + }, "key": "{color.foreground.success}" }, "name": "token-color-foreground-success", @@ -1514,12 +1836,26 @@ { "key": "{color.foreground.success-on-surface}", "$type": "color", - "$value": "#00781e", + "$value": "#0e6027", "group": "semantic", + "$modes": { + "hds": "#00781e", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#6fdc8c", + "cds-g100": "#6fdc8c" + }, "original": { "$type": "color", - "$value": "{color.palette.green-300}", + "$value": "{carbon.color.green.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-300}", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.30}", + "cds-g100": "{carbon.color.green.30}" + }, "key": "{color.foreground.success-on-surface}" }, "name": "token-color-foreground-success-on-surface", @@ -1535,12 +1871,26 @@ { "key": "{color.foreground.success-high-contrast}", "$type": "color", - "$value": "#054220", + "$value": "#044317", "group": "semantic", + "$modes": { + "hds": "#054220", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, "original": { "$type": "color", - "$value": "{color.palette.green-500}", + "$value": "{carbon.color.green.80}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-500}", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, "key": "{color.foreground.success-high-contrast}" }, "name": "token-color-foreground-success-high-contrast", @@ -1556,12 +1906,26 @@ { "key": "{color.foreground.warning}", "$type": "color", - "$value": "#bb5a00", + "$value": "#ba4e00", "group": "semantic", + "$modes": { + "hds": "#bb5a00", + "cds-g0": "#ba4e00", + "cds-g10": "#ba4e00", + "cds-g90": "#ff832b", + "cds-g100": "#ff832b" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-200}", + "$value": "{carbon.color.orange.60}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.orange.60}", + "cds-g10": "{carbon.color.orange.60}", + "cds-g90": "{carbon.color.orange.40}", + "cds-g100": "{carbon.color.orange.40}" + }, "key": "{color.foreground.warning}" }, "name": "token-color-foreground-warning", @@ -1577,12 +1941,26 @@ { "key": "{color.foreground.warning-on-surface}", "$type": "color", - "$value": "#9e4b00", + "$value": "#8a3800", "group": "semantic", + "$modes": { + "hds": "#9e4b00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffb784", + "cds-g100": "#ffb784" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-300}", + "$value": "{carbon.color.orange.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-300}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.30}", + "cds-g100": "{carbon.color.orange.30}" + }, "key": "{color.foreground.warning-on-surface}" }, "name": "token-color-foreground-warning-on-surface", @@ -1598,12 +1976,26 @@ { "key": "{color.foreground.warning-high-contrast}", "$type": "color", - "$value": "#542800", + "$value": "#5e2900", "group": "semantic", + "$modes": { + "hds": "#542800", + "cds-g0": "#5e2900", + "cds-g10": "#5e2900", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-500}", + "$value": "{carbon.color.orange.80}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-500}", + "cds-g0": "{carbon.color.orange.80}", + "cds-g10": "{carbon.color.orange.80}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, "key": "{color.foreground.warning-high-contrast}" }, "name": "token-color-foreground-warning-high-contrast", @@ -1619,12 +2011,26 @@ { "key": "{color.foreground.critical}", "$type": "color", - "$value": "#e52228", + "$value": "#da1e28", "group": "semantic", + "$modes": { + "hds": "#e52228", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#ff8389", + "cds-g100": "#ff8389" + }, "original": { "$type": "color", - "$value": "{color.palette.red-200}", + "$value": "{carbon.color.red.60}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-200}", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.40}", + "cds-g100": "{carbon.color.red.40}" + }, "key": "{color.foreground.critical}" }, "name": "token-color-foreground-critical", @@ -1640,12 +2046,26 @@ { "key": "{color.foreground.critical-on-surface}", "$type": "color", - "$value": "#c00005", + "$value": "#a2191f", "group": "semantic", + "$modes": { + "hds": "#c00005", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffb3b8", + "cds-g100": "#ffb3b8" + }, "original": { "$type": "color", - "$value": "{color.palette.red-300}", + "$value": "{carbon.color.red.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-300}", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.30}", + "cds-g100": "{carbon.color.red.30}" + }, "key": "{color.foreground.critical-on-surface}" }, "name": "token-color-foreground-critical-on-surface", @@ -1661,12 +2081,26 @@ { "key": "{color.foreground.critical-high-contrast}", "$type": "color", - "$value": "#51130a", + "$value": "#750e13", "group": "semantic", + "$modes": { + "hds": "#51130a", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, "original": { "$type": "color", - "$value": "{color.palette.red-500}", + "$value": "{carbon.color.red.80}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-500}", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, "key": "{color.foreground.critical-high-contrast}" }, "name": "token-color-foreground-critical-high-contrast", @@ -1684,10 +2118,24 @@ "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.white.background}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, "key": "{color.page.primary}" }, "name": "token-color-page-primary", @@ -1703,12 +2151,26 @@ { "key": "{color.page.faint}", "$type": "color", - "$value": "#fafafa", + "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-50}", + "$value": "{carbon.themes.white.background}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, "key": "{color.page.faint}" }, "name": "token-color-page-faint", @@ -1724,12 +2186,26 @@ { "key": "{color.surface.primary}", "$type": "color", - "$value": "#ffffff", + "$value": "#f4f4f4", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.white.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.primary}" }, "name": "token-color-surface-primary", @@ -1745,12 +2221,26 @@ { "key": "{color.surface.faint}", "$type": "color", - "$value": "#fafafa", + "$value": "#f4f4f4", "group": "semantic", + "$modes": { + "hds": "#fafafa", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-50}", + "$value": "{carbon.themes.white.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.faint}" }, "name": "token-color-surface-faint", @@ -1766,12 +2256,26 @@ { "key": "{color.surface.strong}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#f4f4f4", "group": "semantic", + "$modes": { + "hds": "#f1f2f3", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-100}", + "$value": "{carbon.themes.white.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.strong}" }, "name": "token-color-surface-strong", @@ -1787,12 +2291,26 @@ { "key": "{color.surface.interactive}", "$type": "color", - "$value": "#ffffff", + "$value": "#f4f4f4", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.white.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.interactive}" }, "name": "token-color-surface-interactive", @@ -1808,12 +2326,26 @@ { "key": "{color.surface.interactive-hover}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#e8e8e8", "group": "semantic", + "$modes": { + "hds": "#f1f2f3", + "cds-g0": "#e8e8e8", + "cds-g10": "#e8e8e8", + "cds-g90": "#474747", + "cds-g100": "#333333" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-100}", + "$value": "{carbon.themes.white.layerHover01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerHover01}", + "cds-g10": "{carbon.themes.g10.layerHover01}", + "cds-g90": "{carbon.themes.g90.layerHover01}", + "cds-g100": "{carbon.themes.g100.layerHover01}" + }, "key": "{color.surface.interactive-hover}" }, "name": "token-color-surface-interactive-hover", @@ -1829,12 +2361,26 @@ { "key": "{color.surface.interactive-active}", "$type": "color", - "$value": "#dedfe3", + "$value": "#c6c6c6", "group": "semantic", + "$modes": { + "hds": "#dedfe3", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-200}", + "$value": "{carbon.themes.white.layerActive01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.white.layerActive01}", + "cds-g10": "{carbon.themes.g10.layerActive01}", + "cds-g90": "{carbon.themes.g90.layerActive01}", + "cds-g100": "{carbon.themes.g100.layerActive01}" + }, "key": "{color.surface.interactive-active}" }, "name": "token-color-surface-interactive-active", @@ -1850,12 +2396,26 @@ { "key": "{color.surface.interactive-disabled}", "$type": "color", - "$value": "#fafafa", + "$value": "#ff0000", "group": "semantic", + "$modes": { + "hds": "#fafafa", + "cds-g0": "#FF0000", + "cds-g10": "#FF0000", + "cds-g90": "#FF0000", + "cds-g100": "#FF0000" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-50}", + "$value": "#FF0000", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-50}", + "cds-g0": "#FF0000", + "cds-g10": "#FF0000", + "cds-g90": "#FF0000", + "cds-g100": "#FF0000" + }, "key": "{color.surface.interactive-disabled}" }, "name": "token-color-surface-interactive-disabled", @@ -1871,12 +2431,26 @@ { "key": "{color.surface.action}", "$type": "color", - "$value": "#f2f8ff", + "$value": "#d0e2ff", "group": "semantic", + "$modes": { + "hds": "#f2f8ff", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-50}", + "$value": "{carbon.color.blue.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-50}", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.70}", + "cds-g100": "{carbon.color.blue.70}" + }, "key": "{color.surface.action}" }, "name": "token-color-surface-action", @@ -1892,12 +2466,26 @@ { "key": "{color.surface.highlight}", "$type": "color", - "$value": "#f9f2ff", + "$value": "#e8daff", "group": "semantic", - "original": { + "$modes": { + "hds": "#f9f2ff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { "$type": "color", - "$value": "{color.palette.purple-50}", + "$value": "{carbon.color.purple.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-50}", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, "key": "{color.surface.highlight}" }, "name": "token-color-surface-highlight", @@ -1913,12 +2501,26 @@ { "key": "{color.surface.success}", "$type": "color", - "$value": "#f2fbf6", + "$value": "#a7f0ba", "group": "semantic", + "$modes": { + "hds": "#f2fbf6", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, "original": { "$type": "color", - "$value": "{color.palette.green-50}", + "$value": "{carbon.color.green.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-50}", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, "key": "{color.surface.success}" }, "name": "token-color-surface-success", @@ -1934,12 +2536,26 @@ { "key": "{color.surface.warning}", "$type": "color", - "$value": "#fff9e8", + "$value": "#ffd9be", "group": "semantic", + "$modes": { + "hds": "#fff9e8", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-50}", + "$value": "{carbon.color.orange.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-50}", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, "key": "{color.surface.warning}" }, "name": "token-color-surface-warning", @@ -1955,12 +2571,26 @@ { "key": "{color.surface.critical}", "$type": "color", - "$value": "#fff5f5", + "$value": "#ffd7d9", "group": "semantic", + "$modes": { + "hds": "#fff5f5", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, "original": { "$type": "color", - "$value": "{color.palette.red-50}", + "$value": "{carbon.color.red.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-50}", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, "key": "{color.surface.critical}" }, "name": "token-color-surface-critical", @@ -4110,7 +4740,7 @@ }, { "key": "{focus-ring.action.box-shadow}", - "$value": "inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff", + "$value": "inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe", "original": { "$value": "{focus-ring.action.internal-box-shadow}, {focus-ring.action.external-box-shadow}", "key": "{focus-ring.action.box-shadow}" @@ -4127,7 +4757,7 @@ }, { "key": "{focus-ring.critical.box-shadow}", - "$value": "inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578", + "$value": "inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe", "original": { "$value": "{focus-ring.critical.internal-box-shadow}, {focus-ring.critical.external-box-shadow}", "key": "{focus-ring.critical.box-shadow}" @@ -4737,7 +5367,7 @@ { "key": "{form.label.color}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#161616", "group": "components", "original": { "$type": "color", @@ -4758,7 +5388,7 @@ { "key": "{form.legend.color}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#161616", "group": "components", "original": { "$type": "color", @@ -4779,7 +5409,7 @@ { "key": "{form.helper-text.color}", "$type": "color", - "$value": "#656a76", + "$value": "#161616", "group": "components", "original": { "$type": "color", @@ -4800,7 +5430,7 @@ { "key": "{form.indicator.optional.color}", "$type": "color", - "$value": "#656a76", + "$value": "#161616", "group": "components", "original": { "$type": "color", @@ -5031,7 +5661,7 @@ { "key": "{form.control.base.foreground.value-color}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#161616", "group": "components", "original": { "$type": "color", @@ -5054,7 +5684,7 @@ { "key": "{form.control.base.foreground.placeholder-color}", "$type": "color", - "$value": "#656a76", + "$value": "#161616", "group": "components", "original": { "$type": "color", @@ -5077,7 +5707,7 @@ { "key": "{form.control.base.surface-color.default}", "$type": "color", - "$value": "#ffffff", + "$value": "#f4f4f4", "group": "components", "original": { "$type": "color", @@ -5100,7 +5730,7 @@ { "key": "{form.control.base.surface-color.hover}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#e8e8e8", "group": "components", "original": { "$type": "color", @@ -5351,7 +5981,7 @@ { "key": "{form.control.readonly.surface-color}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#f4f4f4", "group": "components", "original": { "$type": "color", @@ -5373,7 +6003,7 @@ { "key": "{form.control.readonly.border-color}", "$type": "color", - "$value": "#656a761a", + "$value": "#e0e0e0", "group": "components", "original": { "$type": "color", @@ -5395,7 +6025,7 @@ { "key": "{form.control.disabled.foreground-color}", "$type": "color", - "$value": "#8c909c", + "$value": "rgba(22, 22, 22, 0.25)", "group": "components", "original": { "$type": "color", @@ -5417,7 +6047,7 @@ { "key": "{form.control.disabled.surface-color}", "$type": "color", - "$value": "#fafafa", + "$value": "#ff0000", "group": "components", "original": { "$type": "color", @@ -5439,7 +6069,7 @@ { "key": "{form.control.disabled.border-color}", "$type": "color", - "$value": "#656a7633", + "$value": "#c6c6c6", "group": "components", "original": { "$type": "color", @@ -6050,7 +6680,7 @@ { "key": "{form.toggle.base.surface-color.default}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#f4f4f4", "group": "components", "comment": "the toggle has a different base surface color, compared to the other controls", "original": { @@ -7410,15 +8040,24 @@ { "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.display.macOS}", - "{typography.font-stack.sans.display.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.display.emoji}" - ], + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.sans.display.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.font-stack.display}" }, "name": "token-typography-font-stack-display", @@ -7434,15 +8073,24 @@ { "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.text.macOS}", - "{typography.font-stack.sans.text.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.text.emoji}" - ], + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.sans.text.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.font-stack.text}" }, "name": "token-typography-font-stack-text", @@ -7458,14 +8106,24 @@ { "key": "{typography.font-stack.code}", "$type": "font-family", - "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace, Consolas, monospace", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.monospace.code.macOS}", - "{typography.font-stack.monospace.code.windows}", - "monospace" - ], + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.monospace.code.combined}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, "key": "{typography.font-stack.code}" }, "name": "token-typography-font-stack-code", @@ -7613,10 +8271,24 @@ { "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-500.font-family}" }, "name": "token-typography-display-500-font-family", @@ -7632,14 +8304,28 @@ { "key": "{typography.display-500.font-size}", "$type": "font-size", - "$value": "1.875rem", + "$value": "2rem", "unit": "px", "comment": "30px/1.875rem", + "$modes": { + "hds": "30", + "cds-g0": "2rem", + "cds-g10": "2rem", + "cds-g90": "2rem", + "cds-g100": "2rem" + }, "original": { "$type": "font-size", - "$value": "30", + "$value": "{carbon.typography.heading05.font-size}", "unit": "px", "comment": "30px/1.875rem", + "$modes": { + "hds": "30", + "cds-g0": "{carbon.typography.heading05.font-size}", + "cds-g10": "{carbon.typography.heading05.font-size}", + "cds-g90": "{carbon.typography.heading05.font-size}", + "cds-g100": "{carbon.typography.heading05.font-size}" + }, "key": "{typography.display-500.font-size}" }, "name": "token-typography-display-500-font-size", @@ -7655,12 +8341,26 @@ { "key": "{typography.display-500.line-height}", "$type": "number", - "$value": 1.2666, + "$value": 1.25, "comment": "38px", + "$modes": { + "hds": 1.2666, + "cds-g0": 1.25, + "cds-g10": 1.25, + "cds-g90": 1.25, + "cds-g100": 1.25 + }, "original": { "$type": "number", - "$value": 1.2666, + "$value": "{carbon.typography.heading05.line-height}", "comment": "38px", + "$modes": { + "hds": 1.2666, + "cds-g0": "{carbon.typography.heading05.line-height}", + "cds-g10": "{carbon.typography.heading05.line-height}", + "cds-g90": "{carbon.typography.heading05.line-height}", + "cds-g100": "{carbon.typography.heading05.line-height}" + }, "key": "{typography.display-500.line-height}" }, "name": "token-typography-display-500-line-height", @@ -7673,13 +8373,64 @@ "line-height" ] }, + { + "key": "{typography.display-500.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading05.letter-spacing}", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading05.letter-spacing}", + "cds-g10": "{carbon.typography.heading05.letter-spacing}", + "cds-g90": "{carbon.typography.heading05.letter-spacing}", + "cds-g100": "{carbon.typography.heading05.letter-spacing}" + }, + "key": "{typography.display-500.letter-spacing}" + }, + "name": "token-typography-display-500-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "letter-spacing" + ] + }, { "key": "{typography.display-400.font-family}", "$type": "font-family", - "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-400.font-family}" }, "name": "token-typography-display-400-font-family", @@ -7695,14 +8446,28 @@ { "key": "{typography.display-400.font-size}", "$type": "font-size", - "$value": "1.5rem", + "$value": "1.75rem", "unit": "px", "comment": "24px/1.5rem", + "$modes": { + "hds": "24", + "cds-g0": "1.75rem", + "cds-g10": "1.75rem", + "cds-g90": "1.75rem", + "cds-g100": "1.75rem" + }, "original": { "$type": "font-size", - "$value": "24", + "$value": "{carbon.typography.heading04.font-size}", "unit": "px", "comment": "24px/1.5rem", + "$modes": { + "hds": "24", + "cds-g0": "{carbon.typography.heading04.font-size}", + "cds-g10": "{carbon.typography.heading04.font-size}", + "cds-g90": "{carbon.typography.heading04.font-size}", + "cds-g100": "{carbon.typography.heading04.font-size}" + }, "key": "{typography.display-400.font-size}" }, "name": "token-typography-display-400-font-size", @@ -7718,12 +8483,26 @@ { "key": "{typography.display-400.line-height}", "$type": "number", - "$value": 1.3333, + "$value": 1.28572, "comment": "32px", + "$modes": { + "hds": 1.3333, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, "original": { "$type": "number", - "$value": 1.3333, + "$value": "{carbon.typography.heading04.line-height}", "comment": "32px", + "$modes": { + "hds": 1.3333, + "cds-g0": "{carbon.typography.heading04.line-height}", + "cds-g10": "{carbon.typography.heading04.line-height}", + "cds-g90": "{carbon.typography.heading04.line-height}", + "cds-g100": "{carbon.typography.heading04.line-height}" + }, "key": "{typography.display-400.line-height}" }, "name": "token-typography-display-400-line-height", @@ -7736,13 +8515,64 @@ "line-height" ] }, + { + "key": "{typography.display-400.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading04.letter-spacing}", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "{carbon.typography.heading04.letter-spacing}", + "cds-g10": "{carbon.typography.heading04.letter-spacing}", + "cds-g90": "{carbon.typography.heading04.letter-spacing}", + "cds-g100": "{carbon.typography.heading04.letter-spacing}" + }, + "key": "{typography.display-400.letter-spacing}" + }, + "name": "token-typography-display-400-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "letter-spacing" + ] + }, { "key": "{typography.display-300.font-family}", "$type": "font-family", - "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-300.font-family}" }, "name": "token-typography-display-300-font-family", @@ -7758,14 +8588,28 @@ { "key": "{typography.display-300.font-size}", "$type": "font-size", - "$value": "1.125rem", + "$value": "1.25rem", "unit": "px", "comment": "18px/1.125rem", + "$modes": { + "hds": "18", + "cds-g0": "1.25rem", + "cds-g10": "1.25rem", + "cds-g90": "1.25rem", + "cds-g100": "1.25rem" + }, "original": { "$type": "font-size", - "$value": "18", + "$value": "{carbon.typography.heading03.font-size}", "unit": "px", "comment": "18px/1.125rem", + "$modes": { + "hds": "18", + "cds-g0": "{carbon.typography.heading03.font-size}", + "cds-g10": "{carbon.typography.heading03.font-size}", + "cds-g90": "{carbon.typography.heading03.font-size}", + "cds-g100": "{carbon.typography.heading03.font-size}" + }, "key": "{typography.display-300.font-size}" }, "name": "token-typography-display-300-font-size", @@ -7781,12 +8625,26 @@ { "key": "{typography.display-300.line-height}", "$type": "number", - "$value": 1.3333, + "$value": 1.4, "comment": "24px", + "$modes": { + "hds": 1.3333, + "cds-g0": 1.4, + "cds-g10": 1.4, + "cds-g90": 1.4, + "cds-g100": 1.4 + }, "original": { "$type": "number", - "$value": 1.3333, + "$value": "{carbon.typography.heading03.line-height}", "comment": "24px", + "$modes": { + "hds": 1.3333, + "cds-g0": "{carbon.typography.heading03.line-height}", + "cds-g10": "{carbon.typography.heading03.line-height}", + "cds-g90": "{carbon.typography.heading03.line-height}", + "cds-g100": "{carbon.typography.heading03.line-height}" + }, "key": "{typography.display-300.line-height}" }, "name": "token-typography-display-300-line-height", @@ -7802,14 +8660,28 @@ { "key": "{typography.display-300.letter-spacing}", "$type": "letter-spacing", - "$value": "-0.5px", + "$value": "0px", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, "original": { "$type": "letter-spacing", - "$value": -0.5, + "$value": "{carbon.typography.heading03.letter-spacing}", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading03.letter-spacing}", + "cds-g10": "{carbon.typography.heading03.letter-spacing}", + "cds-g90": "{carbon.typography.heading03.letter-spacing}", + "cds-g100": "{carbon.typography.heading03.letter-spacing}" + }, "key": "{typography.display-300.letter-spacing}" }, "name": "token-typography-display-300-letter-spacing", @@ -7825,10 +8697,24 @@ { "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-200.font-family}" }, "name": "token-typography-display-200-font-family", @@ -7847,11 +8733,25 @@ "$value": "1rem", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, "original": { "$type": "font-size", - "$value": "16", + "$value": "{carbon.typography.heading02.font-size}", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.heading02.font-size}", + "cds-g10": "{carbon.typography.heading02.font-size}", + "cds-g90": "{carbon.typography.heading02.font-size}", + "cds-g100": "{carbon.typography.heading02.font-size}" + }, "key": "{typography.display-200.font-size}" }, "name": "token-typography-display-200-font-size", @@ -7869,10 +8769,24 @@ "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "hds": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, "original": { "$type": "number", - "$value": 1.5, + "$value": "{carbon.typography.heading02.line-height}", "comment": "24px", + "$modes": { + "hds": 1.5, + "cds-g0": "{carbon.typography.heading02.line-height}", + "cds-g10": "{carbon.typography.heading02.line-height}", + "cds-g90": "{carbon.typography.heading02.line-height}", + "cds-g100": "{carbon.typography.heading02.line-height}" + }, "key": "{typography.display-200.line-height}" }, "name": "token-typography-display-200-line-height", @@ -7888,14 +8802,28 @@ { "key": "{typography.display-200.letter-spacing}", "$type": "letter-spacing", - "$value": "-0.5px", + "$value": "0px", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, "original": { "$type": "letter-spacing", - "$value": -0.5, + "$value": "{carbon.typography.heading02.letter-spacing}", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading02.letter-spacing}", + "cds-g10": "{carbon.typography.heading02.letter-spacing}", + "cds-g90": "{carbon.typography.heading02.letter-spacing}", + "cds-g100": "{carbon.typography.heading02.letter-spacing}" + }, "key": "{typography.display-200.letter-spacing}" }, "name": "token-typography-display-200-letter-spacing", @@ -7911,10 +8839,24 @@ { "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-100.font-family}" }, "name": "token-typography-display-100-font-family", @@ -7930,14 +8872,28 @@ { "key": "{typography.display-100.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "0.875rem", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "13", + "$value": "{carbon.typography.heading01.font-size}", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.heading01.font-size}", + "cds-g10": "{carbon.typography.heading01.font-size}", + "cds-g90": "{carbon.typography.heading01.font-size}", + "cds-g100": "{carbon.typography.heading01.font-size}" + }, "key": "{typography.display-100.font-size}" }, "name": "token-typography-display-100-font-size", @@ -7953,12 +8909,26 @@ { "key": "{typography.display-100.line-height}", "$type": "number", - "$value": 1.3846, + "$value": 1.42857, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.3846, + "$value": "{carbon.typography.heading01.line-height}", "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": "{carbon.typography.heading01.line-height}", + "cds-g10": "{carbon.typography.heading01.line-height}", + "cds-g90": "{carbon.typography.heading01.line-height}", + "cds-g100": "{carbon.typography.heading01.line-height}" + }, "key": "{typography.display-100.line-height}" }, "name": "token-typography-display-100-line-height", @@ -7971,13 +8941,64 @@ "line-height" ] }, + { + "key": "{typography.display-100.letter-spacing}", + "$type": "letter-spacing", + "$value": "0.16px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "0.16px", + "cds-g10": "0.16px", + "cds-g90": "0.16px", + "cds-g100": "0.16px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading01.letter-spacing}", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "{carbon.typography.heading01.letter-spacing}", + "cds-g10": "{carbon.typography.heading01.letter-spacing}", + "cds-g90": "{carbon.typography.heading01.letter-spacing}", + "cds-g100": "{carbon.typography.heading01.letter-spacing}" + }, + "key": "{typography.display-100.letter-spacing}" + }, + "name": "token-typography-display-100-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "letter-spacing" + ] + }, { "key": "{typography.body-300.font-family}", "$type": "font-family", - "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-300.font-family}" }, "name": "token-typography-body-300-font-family", @@ -7996,11 +9017,25 @@ "$value": "1rem", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, "original": { "$type": "font-size", - "$value": "16", + "$value": "{carbon.typography.body02.font-size}", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.body02.font-size}", + "cds-g10": "{carbon.typography.body02.font-size}", + "cds-g90": "{carbon.typography.body02.font-size}", + "cds-g100": "{carbon.typography.body02.font-size}" + }, "key": "{typography.body-300.font-size}" }, "name": "token-typography-body-300-font-size", @@ -8018,10 +9053,24 @@ "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "hds": 1.4286, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, "original": { "$type": "number", - "$value": 1.5, + "$value": "{carbon.typography.body02.line-height}", "comment": "24px", + "$modes": { + "hds": 1.4286, + "cds-g0": "{carbon.typography.body02.line-height}", + "cds-g10": "{carbon.typography.body02.line-height}", + "cds-g90": "{carbon.typography.body02.line-height}", + "cds-g100": "{carbon.typography.body02.line-height}" + }, "key": "{typography.body-300.line-height}" }, "name": "token-typography-body-300-line-height", @@ -8037,10 +9086,24 @@ { "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-200.font-family}" }, "name": "token-typography-body-200-font-family", @@ -8059,11 +9122,25 @@ "$value": "0.875rem", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "14", + "$value": "{carbon.typography.body01.font-size}", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "{carbon.typography.body01.font-size}", + "cds-g10": "{carbon.typography.body01.font-size}", + "cds-g90": "{carbon.typography.body01.font-size}", + "cds-g100": "{carbon.typography.body01.font-size}" + }, "key": "{typography.body-200.font-size}" }, "name": "token-typography-body-200-font-size", @@ -8079,12 +9156,26 @@ { "key": "{typography.body-200.line-height}", "$type": "number", - "$value": 1.4286, + "$value": 1.42857, "comment": "20px", + "$modes": { + "hds": 1.4286, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.4286, + "$value": "{carbon.typography.body01.line-height}", "comment": "20px", + "$modes": { + "hds": 1.4286, + "cds-g0": "{carbon.typography.body01.line-height}", + "cds-g10": "{carbon.typography.body01.line-height}", + "cds-g90": "{carbon.typography.body01.line-height}", + "cds-g100": "{carbon.typography.body01.line-height}" + }, "key": "{typography.body-200.line-height}" }, "name": "token-typography-body-200-line-height", @@ -8100,10 +9191,24 @@ { "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-100.font-family}" }, "name": "token-typography-body-100-font-family", @@ -8119,14 +9224,28 @@ { "key": "{typography.body-100.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "0.875rem", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "13", + "$value": "{carbon.typography.bodyCompact01.font-size}", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.bodyCompact01.font-size}", + "cds-g10": "{carbon.typography.bodyCompact01.font-size}", + "cds-g90": "{carbon.typography.bodyCompact01.font-size}", + "cds-g100": "{carbon.typography.bodyCompact01.font-size}" + }, "key": "{typography.body-100.font-size}" }, "name": "token-typography-body-100-font-size", @@ -8142,12 +9261,26 @@ { "key": "{typography.body-100.line-height}", "$type": "number", - "$value": 1.3846, + "$value": 1.28572, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, "original": { "$type": "number", - "$value": 1.3846, + "$value": "{carbon.typography.bodyCompact01.line-height}", "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": "{carbon.typography.bodyCompact01.line-height}", + "cds-g10": "{carbon.typography.bodyCompact01.line-height}", + "cds-g90": "{carbon.typography.bodyCompact01.line-height}", + "cds-g100": "{carbon.typography.bodyCompact01.line-height}" + }, "key": "{typography.body-100.line-height}" }, "name": "token-typography-body-100-line-height", @@ -8161,75 +9294,131 @@ ] }, { - "key": "{typography.code-100.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", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.code}", - "key": "{typography.code-100.font-family}" + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-300.font-family}" }, - "name": "token-typography-code-100-font-family", + "name": "token-typography-code-300-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "font-family" ] }, { - "key": "{typography.code-100.font-size}", + "key": "{typography.code-300.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "0.875rem", "unit": "px", - "comment": "13px/0.8125rem", + "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "13", + "$value": "{carbon.typography.code02.font-size}", "unit": "px", - "comment": "13px/0.8125rem", - "key": "{typography.code-100.font-size}" + "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-300.font-size}" }, - "name": "token-typography-code-100-font-size", + "name": "token-typography-code-300-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "font-size" ] }, { - "key": "{typography.code-100.line-height}", + "key": "{typography.code-300.line-height}", "$type": "number", - "$value": 1.23, - "comment": "16px", + "$value": 1.42857, + "comment": "20px", + "$modes": { + "hds": 1.25, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.23, - "comment": "16px", - "key": "{typography.code-100.line-height}" + "$value": "{carbon.typography.code02.line-height}", + "comment": "20px", + "$modes": { + "hds": 1.25, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-300.line-height}" }, - "name": "token-typography-code-100-line-height", + "name": "token-typography-code-300-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "line-height" ] }, { "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", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.code}", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, "key": "{typography.code-200.font-family}" }, "name": "token-typography-code-200-font-family", @@ -8248,11 +9437,25 @@ "$value": "0.875rem", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "14", + "$value": "{carbon.typography.code02.font-size}", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, "key": "{typography.code-200.font-size}" }, "name": "token-typography-code-200-font-size", @@ -8268,12 +9471,26 @@ { "key": "{typography.code-200.line-height}", "$type": "number", - "$value": 1.125, + "$value": 1.42857, "comment": "18px", + "$modes": { + "hds": 1.125, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.125, + "$value": "{carbon.typography.code02.line-height}", "comment": "18px", + "$modes": { + "hds": 1.125, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, "key": "{typography.code-200.line-height}" }, "name": "token-typography-code-200-line-height", @@ -8287,65 +9504,107 @@ ] }, { - "key": "{typography.code-300.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", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.code}", - "key": "{typography.code-300.font-family}" + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-100.font-family}" }, - "name": "token-typography-code-300-font-family", + "name": "token-typography-code-100-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "font-family" ] }, { - "key": "{typography.code-300.font-size}", + "key": "{typography.code-100.font-size}", "$type": "font-size", - "$value": "1rem", + "$value": "0.875rem", "unit": "px", - "comment": "16px/1rem", + "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "16", + "$value": "{carbon.typography.code02.font-size}", "unit": "px", - "comment": "16px/1rem", - "key": "{typography.code-300.font-size}" + "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-100.font-size}" }, - "name": "token-typography-code-300-font-size", + "name": "token-typography-code-100-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "font-size" ] }, { - "key": "{typography.code-300.line-height}", + "key": "{typography.code-100.line-height}", "$type": "number", - "$value": 1.25, - "comment": "20px", + "$value": 1.33333, + "comment": "16px", + "$modes": { + "hds": 1.23, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, "original": { "$type": "number", - "$value": 1.25, - "comment": "20px", - "key": "{typography.code-300.line-height}" + "$value": "{carbon.typography.code01.line-height}", + "comment": "16px", + "$modes": { + "hds": 1.23, + "cds-g0": "{carbon.typography.code01.line-height}", + "cds-g10": "{carbon.typography.code01.line-height}", + "cds-g90": "{carbon.typography.code01.line-height}", + "cds-g100": "{carbon.typography.code01.line-height}" + }, + "key": "{typography.code-100.line-height}" }, - "name": "token-typography-code-300-line-height", + "name": "token-typography-code-100-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "line-height" ] } diff --git a/packages/tokens/dist/docs/products/themed-tokens/cds-g10.json b/packages/tokens/dist/docs/products/themed-tokens/cds-g10.json index 98001293bb5..638f63ab927 100644 --- a/packages/tokens/dist/docs/products/themed-tokens/cds-g10.json +++ b/packages/tokens/dist/docs/products/themed-tokens/cds-g10.json @@ -988,12 +988,26 @@ { "key": "{color.border.primary}", "$type": "color", - "$value": "#656a7633", + "$value": "#e0e0e0", "group": "semantic", + "$modes": { + "hds": "#656a7633", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, "original": { "$type": "color", - "$value": "{color.palette.alpha-200}", + "$value": "{carbon.themes.g10.borderSubtle03}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-200}", + "cds-g0": "{carbon.themes.white.borderSubtle03}", + "cds-g10": "{carbon.themes.g10.borderSubtle03}", + "cds-g90": "{carbon.themes.g90.borderSubtle03}", + "cds-g100": "{carbon.themes.g100.borderSubtle03}" + }, "key": "{color.border.primary}" }, "name": "token-color-border-primary", @@ -1009,12 +1023,26 @@ { "key": "{color.border.faint}", "$type": "color", - "$value": "#656a761a", + "$value": "#c6c6c6", "group": "semantic", + "$modes": { + "hds": "#656a761a", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, "original": { "$type": "color", - "$value": "{color.palette.alpha-100}", + "$value": "{carbon.themes.g10.borderSubtle00}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-100}", + "cds-g0": "{carbon.themes.white.borderSubtle00}", + "cds-g10": "{carbon.themes.g10.borderSubtle00}", + "cds-g90": "{carbon.themes.g90.borderSubtle00}", + "cds-g100": "{carbon.themes.g100.borderSubtle00}" + }, "key": "{color.border.faint}" }, "name": "token-color-border-faint", @@ -1030,12 +1058,26 @@ { "key": "{color.border.strong}", "$type": "color", - "$value": "#3b3d4566", + "$value": "#e0e0e0", "group": "semantic", + "$modes": { + "hds": "#3b3d4566", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, "original": { "$type": "color", - "$value": "{color.palette.alpha-300}", + "$value": "{carbon.themes.g10.borderSubtle01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-300}", + "cds-g0": "{carbon.themes.white.borderSubtle01}", + "cds-g10": "{carbon.themes.g10.borderSubtle01}", + "cds-g90": "{carbon.themes.g90.borderSubtle01}", + "cds-g100": "{carbon.themes.g100.borderSubtle01}" + }, "key": "{color.border.strong}" }, "name": "token-color-border-strong", @@ -1051,12 +1093,26 @@ { "key": "{color.border.action}", "$type": "color", - "$value": "#cce3fe", + "$value": "#0f62fe", "group": "semantic", + "$modes": { + "hds": "#cce3fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-100}", + "$value": "{carbon.color.blue.60}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-100}", + "cds-g0": "{carbon.color.blue.60}", + "cds-g10": "{carbon.color.blue.60}", + "cds-g90": "{carbon.color.blue.50}", + "cds-g100": "{carbon.color.blue.50}" + }, "key": "{color.border.action}" }, "name": "token-color-border-action", @@ -1072,12 +1128,26 @@ { "key": "{color.border.highlight}", "$type": "color", - "$value": "#ead2fe", + "$value": "#be95ff", "group": "semantic", + "$modes": { + "hds": "#ead2fe", + "cds-g0": "#be95ff", + "cds-g10": "#be95ff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-100}", + "$value": "{carbon.color.purple.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-100}", + "cds-g0": "{carbon.color.purple.40}", + "cds-g10": "{carbon.color.purple.40}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, "key": "{color.border.highlight}" }, "name": "token-color-border-highlight", @@ -1093,12 +1163,26 @@ { "key": "{color.border.success}", "$type": "color", - "$value": "#cceeda", + "$value": "#42be65", "group": "semantic", + "$modes": { + "hds": "#cceeda", + "cds-g0": "#42be65", + "cds-g10": "#42be65", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, "original": { "$type": "color", - "$value": "{color.palette.green-100}", + "$value": "{carbon.color.green.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-100}", + "cds-g0": "{carbon.color.green.40}", + "cds-g10": "{carbon.color.green.40}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, "key": "{color.border.success}" }, "name": "token-color-border-success", @@ -1114,12 +1198,26 @@ { "key": "{color.border.warning}", "$type": "color", - "$value": "#fbeabf", + "$value": "#ff832b", "group": "semantic", + "$modes": { + "hds": "#fbeabf", + "cds-g0": "#ff832b", + "cds-g10": "#ff832b", + "cds-g90": "#eb6200", + "cds-g100": "#eb6200" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-100}", + "$value": "{carbon.color.orange.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.orange.40}", + "cds-g10": "{carbon.color.orange.40}", + "cds-g90": "{carbon.color.orange.50}", + "cds-g100": "{carbon.color.orange.50}" + }, "key": "{color.border.warning}" }, "name": "token-color-border-warning", @@ -1135,12 +1233,26 @@ { "key": "{color.border.critical}", "$type": "color", - "$value": "#fbd4d4", + "$value": "#ff8389", "group": "semantic", + "$modes": { + "hds": "#fbd4d4", + "cds-g0": "#ff8389", + "cds-g10": "#ff8389", + "cds-g90": "#fa4d56", + "cds-g100": "#fa4d56" + }, "original": { "$type": "color", - "$value": "{color.palette.red-100}", + "$value": "{carbon.color.red.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-100}", + "cds-g0": "{carbon.color.red.40}", + "cds-g10": "{carbon.color.red.40}", + "cds-g90": "{carbon.color.red.50}", + "cds-g100": "{carbon.color.red.50}" + }, "key": "{color.border.critical}" }, "name": "token-color-border-critical", @@ -1156,12 +1268,26 @@ { "key": "{color.focus.action.internal}", "$type": "color", - "$value": "#0c56e9", + "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-300}", + "$value": "{carbon.themes.g10.focusInset}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, "key": "{color.focus.action.internal}" }, "name": "token-color-focus-action-internal", @@ -1178,14 +1304,28 @@ { "key": "{color.focus.action.external}", "$type": "color", - "$value": "#5990ff", + "$value": "#0f62fe", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, "original": { "$type": "color", - "$value": "#5990ff", + "$value": "{carbon.themes.g10.focus}", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, "key": "{color.focus.action.external}" }, "name": "token-color-focus-action-external", @@ -1202,12 +1342,26 @@ { "key": "{color.focus.critical.internal}", "$type": "color", - "$value": "#c00005", + "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.red-300}", + "$value": "{carbon.themes.g10.focusInset}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, "key": "{color.focus.critical.internal}" }, "name": "token-color-focus-critical-internal", @@ -1224,14 +1378,28 @@ { "key": "{color.focus.critical.external}", "$type": "color", - "$value": "#dd7578", + "$value": "#0f62fe", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, "original": { "$type": "color", - "$value": "#dd7578", + "$value": "{carbon.themes.g10.focus}", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, "key": "{color.focus.critical.external}" }, "name": "token-color-focus-critical-external", @@ -1248,12 +1416,26 @@ { "key": "{color.foreground.strong}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#161616", "group": "semantic", + "$modes": { + "hds": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-700}", + "$value": "{carbon.themes.g10.textPrimary}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, "key": "{color.foreground.strong}" }, "name": "token-color-foreground-strong", @@ -1272,7 +1454,7 @@ "$value": "#161616", "group": "semantic", "$modes": { - "hds": "#ffffff", + "hds": "#3b3d45", "cds-g0": "#161616", "cds-g10": "#161616", "cds-g90": "#f4f4f4", @@ -1283,7 +1465,7 @@ "$value": "{carbon.themes.g10.textPrimary}", "group": "semantic", "$modes": { - "hds": "#ffffff", + "hds": "{color.palette.neutral-600}", "cds-g0": "{carbon.themes.white.textPrimary}", "cds-g10": "{carbon.themes.g10.textPrimary}", "cds-g90": "{carbon.themes.g90.textPrimary}", @@ -1304,12 +1486,26 @@ { "key": "{color.foreground.faint}", "$type": "color", - "$value": "#656a76", + "$value": "#161616", "group": "semantic", + "$modes": { + "hds": "#656a76", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-500}", + "$value": "{carbon.themes.g10.textPrimary}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-500}", + "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.faint}" }, "name": "token-color-foreground-faint", @@ -1327,10 +1523,24 @@ "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#8c909c", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.g10.textInverse}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, "key": "{color.foreground.high-contrast}" }, "name": "token-color-foreground-high-contrast", @@ -1346,12 +1556,26 @@ { "key": "{color.foreground.disabled}", "$type": "color", - "$value": "#8c909c", + "$value": "rgba(22, 22, 22, 0.25)", "group": "semantic", + "$modes": { + "hds": "#8c909c", + "cds-g0": "rgba(22, 22, 22, 0.25)", + "cds-g10": "rgba(22, 22, 22, 0.25)", + "cds-g90": "rgba(244, 244, 244, 0.25)", + "cds-g100": "rgba(244, 244, 244, 0.25)" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-400}", + "$value": "{carbon.themes.g10.textDisabled}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textDisabled}", + "cds-g10": "{carbon.themes.g10.textDisabled}", + "cds-g90": "{carbon.themes.g90.textDisabled}", + "cds-g100": "{carbon.themes.g100.textDisabled}" + }, "key": "{color.foreground.disabled}" }, "name": "token-color-foreground-disabled", @@ -1367,12 +1591,26 @@ { "key": "{color.foreground.action}", "$type": "color", - "$value": "#1060ff", + "$value": "#0f62fe", "group": "semantic", + "$modes": { + "hds": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#78a9ff", + "cds-g100": "#78a9ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-200}", + "$value": "{carbon.themes.g10.linkPrimary}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.white.linkPrimary}", + "cds-g10": "{carbon.themes.g10.linkPrimary}", + "cds-g90": "{carbon.themes.g90.linkPrimary}", + "cds-g100": "{carbon.themes.g100.linkPrimary}" + }, "key": "{color.foreground.action}" }, "name": "token-color-foreground-action", @@ -1388,12 +1626,26 @@ { "key": "{color.foreground.action-hover}", "$type": "color", - "$value": "#0c56e9", + "$value": "#0043ce", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-300}", + "$value": "{carbon.themes.g10.linkPrimaryHover}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, "key": "{color.foreground.action-hover}" }, "name": "token-color-foreground-action-hover", @@ -1409,12 +1661,26 @@ { "key": "{color.foreground.action-active}", "$type": "color", - "$value": "#0046d1", + "$value": "#0043ce", "group": "semantic", + "$modes": { + "hds": "#0046d1", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-400}", + "$value": "{carbon.themes.g10.linkPrimaryHover}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, "key": "{color.foreground.action-active}" }, "name": "token-color-foreground-action-active", @@ -1430,12 +1696,26 @@ { "key": "{color.foreground.highlight}", "$type": "color", - "$value": "#a737ff", + "$value": "#8a3ffc", "group": "semantic", + "$modes": { + "hds": "#a737ff", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-200}", + "$value": "{carbon.color.purple.60}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, "key": "{color.foreground.highlight}" }, "name": "token-color-foreground-highlight", @@ -1451,12 +1731,26 @@ { "key": "{color.foreground.highlight-on-surface}", "$type": "color", - "$value": "#911ced", + "$value": "#6929c4", "group": "semantic", + "$modes": { + "hds": "#911ced", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#d4bbff", + "cds-g100": "#d4bbff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-300}", + "$value": "{carbon.color.purple.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-300}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.30}", + "cds-g100": "{carbon.color.purple.30}" + }, "key": "{color.foreground.highlight-on-surface}" }, "name": "token-color-foreground-highlight-on-surface", @@ -1472,12 +1766,26 @@ { "key": "{color.foreground.highlight-high-contrast}", "$type": "color", - "$value": "#42215b", + "$value": "#491d8b", "group": "semantic", + "$modes": { + "hds": "#42215b", + "cds-g0": "#491d8b", + "cds-g10": "#491d8b", + "cds-g90": "#e8daff", + "cds-g100": "#d4bbff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-500}", + "$value": "{carbon.color.purple.80}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-500}", + "cds-g0": "{carbon.color.purple.80}", + "cds-g10": "{carbon.color.purple.80}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.30}" + }, "key": "{color.foreground.highlight-high-contrast}" }, "name": "token-color-foreground-highlight-high-contrast", @@ -1493,12 +1801,26 @@ { "key": "{color.foreground.success}", "$type": "color", - "$value": "#008a22", + "$value": "#198038", "group": "semantic", + "$modes": { + "hds": "#008a22", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#42be65", + "cds-g100": "#42be65" + }, "original": { "$type": "color", - "$value": "{color.palette.green-200}", + "$value": "{carbon.color.green.60}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-200}", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.40}", + "cds-g100": "{carbon.color.green.40}" + }, "key": "{color.foreground.success}" }, "name": "token-color-foreground-success", @@ -1514,12 +1836,26 @@ { "key": "{color.foreground.success-on-surface}", "$type": "color", - "$value": "#00781e", + "$value": "#0e6027", "group": "semantic", + "$modes": { + "hds": "#00781e", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#6fdc8c", + "cds-g100": "#6fdc8c" + }, "original": { "$type": "color", - "$value": "{color.palette.green-300}", + "$value": "{carbon.color.green.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-300}", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.30}", + "cds-g100": "{carbon.color.green.30}" + }, "key": "{color.foreground.success-on-surface}" }, "name": "token-color-foreground-success-on-surface", @@ -1535,12 +1871,26 @@ { "key": "{color.foreground.success-high-contrast}", "$type": "color", - "$value": "#054220", + "$value": "#044317", "group": "semantic", + "$modes": { + "hds": "#054220", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, "original": { "$type": "color", - "$value": "{color.palette.green-500}", + "$value": "{carbon.color.green.80}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-500}", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, "key": "{color.foreground.success-high-contrast}" }, "name": "token-color-foreground-success-high-contrast", @@ -1556,12 +1906,26 @@ { "key": "{color.foreground.warning}", "$type": "color", - "$value": "#bb5a00", + "$value": "#ba4e00", "group": "semantic", + "$modes": { + "hds": "#bb5a00", + "cds-g0": "#ba4e00", + "cds-g10": "#ba4e00", + "cds-g90": "#ff832b", + "cds-g100": "#ff832b" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-200}", + "$value": "{carbon.color.orange.60}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.orange.60}", + "cds-g10": "{carbon.color.orange.60}", + "cds-g90": "{carbon.color.orange.40}", + "cds-g100": "{carbon.color.orange.40}" + }, "key": "{color.foreground.warning}" }, "name": "token-color-foreground-warning", @@ -1577,12 +1941,26 @@ { "key": "{color.foreground.warning-on-surface}", "$type": "color", - "$value": "#9e4b00", + "$value": "#8a3800", "group": "semantic", + "$modes": { + "hds": "#9e4b00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffb784", + "cds-g100": "#ffb784" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-300}", + "$value": "{carbon.color.orange.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-300}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.30}", + "cds-g100": "{carbon.color.orange.30}" + }, "key": "{color.foreground.warning-on-surface}" }, "name": "token-color-foreground-warning-on-surface", @@ -1598,12 +1976,26 @@ { "key": "{color.foreground.warning-high-contrast}", "$type": "color", - "$value": "#542800", + "$value": "#5e2900", "group": "semantic", + "$modes": { + "hds": "#542800", + "cds-g0": "#5e2900", + "cds-g10": "#5e2900", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-500}", + "$value": "{carbon.color.orange.80}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-500}", + "cds-g0": "{carbon.color.orange.80}", + "cds-g10": "{carbon.color.orange.80}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, "key": "{color.foreground.warning-high-contrast}" }, "name": "token-color-foreground-warning-high-contrast", @@ -1619,12 +2011,26 @@ { "key": "{color.foreground.critical}", "$type": "color", - "$value": "#e52228", + "$value": "#da1e28", "group": "semantic", + "$modes": { + "hds": "#e52228", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#ff8389", + "cds-g100": "#ff8389" + }, "original": { "$type": "color", - "$value": "{color.palette.red-200}", + "$value": "{carbon.color.red.60}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-200}", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.40}", + "cds-g100": "{carbon.color.red.40}" + }, "key": "{color.foreground.critical}" }, "name": "token-color-foreground-critical", @@ -1640,12 +2046,26 @@ { "key": "{color.foreground.critical-on-surface}", "$type": "color", - "$value": "#c00005", + "$value": "#a2191f", "group": "semantic", + "$modes": { + "hds": "#c00005", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffb3b8", + "cds-g100": "#ffb3b8" + }, "original": { "$type": "color", - "$value": "{color.palette.red-300}", + "$value": "{carbon.color.red.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-300}", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.30}", + "cds-g100": "{carbon.color.red.30}" + }, "key": "{color.foreground.critical-on-surface}" }, "name": "token-color-foreground-critical-on-surface", @@ -1661,12 +2081,26 @@ { "key": "{color.foreground.critical-high-contrast}", "$type": "color", - "$value": "#51130a", + "$value": "#750e13", "group": "semantic", + "$modes": { + "hds": "#51130a", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, "original": { "$type": "color", - "$value": "{color.palette.red-500}", + "$value": "{carbon.color.red.80}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-500}", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, "key": "{color.foreground.critical-high-contrast}" }, "name": "token-color-foreground-critical-high-contrast", @@ -1682,12 +2116,26 @@ { "key": "{color.page.primary}", "$type": "color", - "$value": "#ffffff", + "$value": "#f4f4f4", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.g10.background}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, "key": "{color.page.primary}" }, "name": "token-color-page-primary", @@ -1703,12 +2151,26 @@ { "key": "{color.page.faint}", "$type": "color", - "$value": "#fafafa", + "$value": "#f4f4f4", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-50}", + "$value": "{carbon.themes.g10.background}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, "key": "{color.page.faint}" }, "name": "token-color-page-faint", @@ -1726,10 +2188,24 @@ "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.g10.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.primary}" }, "name": "token-color-surface-primary", @@ -1745,12 +2221,26 @@ { "key": "{color.surface.faint}", "$type": "color", - "$value": "#fafafa", + "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#fafafa", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-50}", + "$value": "{carbon.themes.g10.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.faint}" }, "name": "token-color-surface-faint", @@ -1766,12 +2256,26 @@ { "key": "{color.surface.strong}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#f1f2f3", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-100}", + "$value": "{carbon.themes.g10.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.strong}" }, "name": "token-color-surface-strong", @@ -1789,10 +2293,24 @@ "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.g10.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.interactive}" }, "name": "token-color-surface-interactive", @@ -1808,12 +2326,26 @@ { "key": "{color.surface.interactive-hover}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#e8e8e8", "group": "semantic", + "$modes": { + "hds": "#f1f2f3", + "cds-g0": "#e8e8e8", + "cds-g10": "#e8e8e8", + "cds-g90": "#474747", + "cds-g100": "#333333" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-100}", + "$value": "{carbon.themes.g10.layerHover01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerHover01}", + "cds-g10": "{carbon.themes.g10.layerHover01}", + "cds-g90": "{carbon.themes.g90.layerHover01}", + "cds-g100": "{carbon.themes.g100.layerHover01}" + }, "key": "{color.surface.interactive-hover}" }, "name": "token-color-surface-interactive-hover", @@ -1829,12 +2361,26 @@ { "key": "{color.surface.interactive-active}", "$type": "color", - "$value": "#dedfe3", + "$value": "#c6c6c6", "group": "semantic", + "$modes": { + "hds": "#dedfe3", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-200}", + "$value": "{carbon.themes.g10.layerActive01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.white.layerActive01}", + "cds-g10": "{carbon.themes.g10.layerActive01}", + "cds-g90": "{carbon.themes.g90.layerActive01}", + "cds-g100": "{carbon.themes.g100.layerActive01}" + }, "key": "{color.surface.interactive-active}" }, "name": "token-color-surface-interactive-active", @@ -1850,12 +2396,26 @@ { "key": "{color.surface.interactive-disabled}", "$type": "color", - "$value": "#fafafa", + "$value": "#ff0000", "group": "semantic", + "$modes": { + "hds": "#fafafa", + "cds-g0": "#FF0000", + "cds-g10": "#FF0000", + "cds-g90": "#FF0000", + "cds-g100": "#FF0000" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-50}", + "$value": "#FF0000", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-50}", + "cds-g0": "#FF0000", + "cds-g10": "#FF0000", + "cds-g90": "#FF0000", + "cds-g100": "#FF0000" + }, "key": "{color.surface.interactive-disabled}" }, "name": "token-color-surface-interactive-disabled", @@ -1871,12 +2431,26 @@ { "key": "{color.surface.action}", "$type": "color", - "$value": "#f2f8ff", + "$value": "#d0e2ff", "group": "semantic", + "$modes": { + "hds": "#f2f8ff", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-50}", + "$value": "{carbon.color.blue.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-50}", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.70}", + "cds-g100": "{carbon.color.blue.70}" + }, "key": "{color.surface.action}" }, "name": "token-color-surface-action", @@ -1892,12 +2466,26 @@ { "key": "{color.surface.highlight}", "$type": "color", - "$value": "#f9f2ff", + "$value": "#e8daff", "group": "semantic", - "original": { + "$modes": { + "hds": "#f9f2ff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, + "original": { "$type": "color", - "$value": "{color.palette.purple-50}", + "$value": "{carbon.color.purple.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-50}", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, "key": "{color.surface.highlight}" }, "name": "token-color-surface-highlight", @@ -1913,12 +2501,26 @@ { "key": "{color.surface.success}", "$type": "color", - "$value": "#f2fbf6", + "$value": "#a7f0ba", "group": "semantic", + "$modes": { + "hds": "#f2fbf6", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, "original": { "$type": "color", - "$value": "{color.palette.green-50}", + "$value": "{carbon.color.green.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-50}", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, "key": "{color.surface.success}" }, "name": "token-color-surface-success", @@ -1934,12 +2536,26 @@ { "key": "{color.surface.warning}", "$type": "color", - "$value": "#fff9e8", + "$value": "#ffd9be", "group": "semantic", + "$modes": { + "hds": "#fff9e8", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-50}", + "$value": "{carbon.color.orange.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-50}", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, "key": "{color.surface.warning}" }, "name": "token-color-surface-warning", @@ -1955,12 +2571,26 @@ { "key": "{color.surface.critical}", "$type": "color", - "$value": "#fff5f5", + "$value": "#ffd7d9", "group": "semantic", + "$modes": { + "hds": "#fff5f5", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, "original": { "$type": "color", - "$value": "{color.palette.red-50}", + "$value": "{carbon.color.red.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-50}", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, "key": "{color.surface.critical}" }, "name": "token-color-surface-critical", @@ -4110,7 +4740,7 @@ }, { "key": "{focus-ring.action.box-shadow}", - "$value": "inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff", + "$value": "inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe", "original": { "$value": "{focus-ring.action.internal-box-shadow}, {focus-ring.action.external-box-shadow}", "key": "{focus-ring.action.box-shadow}" @@ -4127,7 +4757,7 @@ }, { "key": "{focus-ring.critical.box-shadow}", - "$value": "inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578", + "$value": "inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe", "original": { "$value": "{focus-ring.critical.internal-box-shadow}, {focus-ring.critical.external-box-shadow}", "key": "{focus-ring.critical.box-shadow}" @@ -4737,7 +5367,7 @@ { "key": "{form.label.color}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#161616", "group": "components", "original": { "$type": "color", @@ -4758,7 +5388,7 @@ { "key": "{form.legend.color}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#161616", "group": "components", "original": { "$type": "color", @@ -4779,7 +5409,7 @@ { "key": "{form.helper-text.color}", "$type": "color", - "$value": "#656a76", + "$value": "#161616", "group": "components", "original": { "$type": "color", @@ -4800,7 +5430,7 @@ { "key": "{form.indicator.optional.color}", "$type": "color", - "$value": "#656a76", + "$value": "#161616", "group": "components", "original": { "$type": "color", @@ -5031,7 +5661,7 @@ { "key": "{form.control.base.foreground.value-color}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#161616", "group": "components", "original": { "$type": "color", @@ -5054,7 +5684,7 @@ { "key": "{form.control.base.foreground.placeholder-color}", "$type": "color", - "$value": "#656a76", + "$value": "#161616", "group": "components", "original": { "$type": "color", @@ -5100,7 +5730,7 @@ { "key": "{form.control.base.surface-color.hover}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#e8e8e8", "group": "components", "original": { "$type": "color", @@ -5351,7 +5981,7 @@ { "key": "{form.control.readonly.surface-color}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#ffffff", "group": "components", "original": { "$type": "color", @@ -5373,7 +6003,7 @@ { "key": "{form.control.readonly.border-color}", "$type": "color", - "$value": "#656a761a", + "$value": "#c6c6c6", "group": "components", "original": { "$type": "color", @@ -5395,7 +6025,7 @@ { "key": "{form.control.disabled.foreground-color}", "$type": "color", - "$value": "#8c909c", + "$value": "rgba(22, 22, 22, 0.25)", "group": "components", "original": { "$type": "color", @@ -5417,7 +6047,7 @@ { "key": "{form.control.disabled.surface-color}", "$type": "color", - "$value": "#fafafa", + "$value": "#ff0000", "group": "components", "original": { "$type": "color", @@ -5439,7 +6069,7 @@ { "key": "{form.control.disabled.border-color}", "$type": "color", - "$value": "#656a7633", + "$value": "#e0e0e0", "group": "components", "original": { "$type": "color", @@ -6050,7 +6680,7 @@ { "key": "{form.toggle.base.surface-color.default}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#ffffff", "group": "components", "comment": "the toggle has a different base surface color, compared to the other controls", "original": { @@ -7410,15 +8040,24 @@ { "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.display.macOS}", - "{typography.font-stack.sans.display.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.display.emoji}" - ], + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.sans.display.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.font-stack.display}" }, "name": "token-typography-font-stack-display", @@ -7434,15 +8073,24 @@ { "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.text.macOS}", - "{typography.font-stack.sans.text.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.text.emoji}" - ], + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.sans.text.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.font-stack.text}" }, "name": "token-typography-font-stack-text", @@ -7458,14 +8106,24 @@ { "key": "{typography.font-stack.code}", "$type": "font-family", - "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace, Consolas, monospace", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.monospace.code.macOS}", - "{typography.font-stack.monospace.code.windows}", - "monospace" - ], + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.monospace.code.combined}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, "key": "{typography.font-stack.code}" }, "name": "token-typography-font-stack-code", @@ -7613,10 +8271,24 @@ { "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-500.font-family}" }, "name": "token-typography-display-500-font-family", @@ -7632,14 +8304,28 @@ { "key": "{typography.display-500.font-size}", "$type": "font-size", - "$value": "1.875rem", + "$value": "2rem", "unit": "px", "comment": "30px/1.875rem", + "$modes": { + "hds": "30", + "cds-g0": "2rem", + "cds-g10": "2rem", + "cds-g90": "2rem", + "cds-g100": "2rem" + }, "original": { "$type": "font-size", - "$value": "30", + "$value": "{carbon.typography.heading05.font-size}", "unit": "px", "comment": "30px/1.875rem", + "$modes": { + "hds": "30", + "cds-g0": "{carbon.typography.heading05.font-size}", + "cds-g10": "{carbon.typography.heading05.font-size}", + "cds-g90": "{carbon.typography.heading05.font-size}", + "cds-g100": "{carbon.typography.heading05.font-size}" + }, "key": "{typography.display-500.font-size}" }, "name": "token-typography-display-500-font-size", @@ -7655,12 +8341,26 @@ { "key": "{typography.display-500.line-height}", "$type": "number", - "$value": 1.2666, + "$value": 1.25, "comment": "38px", + "$modes": { + "hds": 1.2666, + "cds-g0": 1.25, + "cds-g10": 1.25, + "cds-g90": 1.25, + "cds-g100": 1.25 + }, "original": { "$type": "number", - "$value": 1.2666, + "$value": "{carbon.typography.heading05.line-height}", "comment": "38px", + "$modes": { + "hds": 1.2666, + "cds-g0": "{carbon.typography.heading05.line-height}", + "cds-g10": "{carbon.typography.heading05.line-height}", + "cds-g90": "{carbon.typography.heading05.line-height}", + "cds-g100": "{carbon.typography.heading05.line-height}" + }, "key": "{typography.display-500.line-height}" }, "name": "token-typography-display-500-line-height", @@ -7673,13 +8373,64 @@ "line-height" ] }, + { + "key": "{typography.display-500.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading05.letter-spacing}", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading05.letter-spacing}", + "cds-g10": "{carbon.typography.heading05.letter-spacing}", + "cds-g90": "{carbon.typography.heading05.letter-spacing}", + "cds-g100": "{carbon.typography.heading05.letter-spacing}" + }, + "key": "{typography.display-500.letter-spacing}" + }, + "name": "token-typography-display-500-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "letter-spacing" + ] + }, { "key": "{typography.display-400.font-family}", "$type": "font-family", - "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-400.font-family}" }, "name": "token-typography-display-400-font-family", @@ -7695,14 +8446,28 @@ { "key": "{typography.display-400.font-size}", "$type": "font-size", - "$value": "1.5rem", + "$value": "1.75rem", "unit": "px", "comment": "24px/1.5rem", + "$modes": { + "hds": "24", + "cds-g0": "1.75rem", + "cds-g10": "1.75rem", + "cds-g90": "1.75rem", + "cds-g100": "1.75rem" + }, "original": { "$type": "font-size", - "$value": "24", + "$value": "{carbon.typography.heading04.font-size}", "unit": "px", "comment": "24px/1.5rem", + "$modes": { + "hds": "24", + "cds-g0": "{carbon.typography.heading04.font-size}", + "cds-g10": "{carbon.typography.heading04.font-size}", + "cds-g90": "{carbon.typography.heading04.font-size}", + "cds-g100": "{carbon.typography.heading04.font-size}" + }, "key": "{typography.display-400.font-size}" }, "name": "token-typography-display-400-font-size", @@ -7718,12 +8483,26 @@ { "key": "{typography.display-400.line-height}", "$type": "number", - "$value": 1.3333, + "$value": 1.28572, "comment": "32px", + "$modes": { + "hds": 1.3333, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, "original": { "$type": "number", - "$value": 1.3333, + "$value": "{carbon.typography.heading04.line-height}", "comment": "32px", + "$modes": { + "hds": 1.3333, + "cds-g0": "{carbon.typography.heading04.line-height}", + "cds-g10": "{carbon.typography.heading04.line-height}", + "cds-g90": "{carbon.typography.heading04.line-height}", + "cds-g100": "{carbon.typography.heading04.line-height}" + }, "key": "{typography.display-400.line-height}" }, "name": "token-typography-display-400-line-height", @@ -7736,13 +8515,64 @@ "line-height" ] }, + { + "key": "{typography.display-400.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading04.letter-spacing}", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "{carbon.typography.heading04.letter-spacing}", + "cds-g10": "{carbon.typography.heading04.letter-spacing}", + "cds-g90": "{carbon.typography.heading04.letter-spacing}", + "cds-g100": "{carbon.typography.heading04.letter-spacing}" + }, + "key": "{typography.display-400.letter-spacing}" + }, + "name": "token-typography-display-400-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "letter-spacing" + ] + }, { "key": "{typography.display-300.font-family}", "$type": "font-family", - "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-300.font-family}" }, "name": "token-typography-display-300-font-family", @@ -7758,14 +8588,28 @@ { "key": "{typography.display-300.font-size}", "$type": "font-size", - "$value": "1.125rem", + "$value": "1.25rem", "unit": "px", "comment": "18px/1.125rem", + "$modes": { + "hds": "18", + "cds-g0": "1.25rem", + "cds-g10": "1.25rem", + "cds-g90": "1.25rem", + "cds-g100": "1.25rem" + }, "original": { "$type": "font-size", - "$value": "18", + "$value": "{carbon.typography.heading03.font-size}", "unit": "px", "comment": "18px/1.125rem", + "$modes": { + "hds": "18", + "cds-g0": "{carbon.typography.heading03.font-size}", + "cds-g10": "{carbon.typography.heading03.font-size}", + "cds-g90": "{carbon.typography.heading03.font-size}", + "cds-g100": "{carbon.typography.heading03.font-size}" + }, "key": "{typography.display-300.font-size}" }, "name": "token-typography-display-300-font-size", @@ -7781,12 +8625,26 @@ { "key": "{typography.display-300.line-height}", "$type": "number", - "$value": 1.3333, + "$value": 1.4, "comment": "24px", + "$modes": { + "hds": 1.3333, + "cds-g0": 1.4, + "cds-g10": 1.4, + "cds-g90": 1.4, + "cds-g100": 1.4 + }, "original": { "$type": "number", - "$value": 1.3333, + "$value": "{carbon.typography.heading03.line-height}", "comment": "24px", + "$modes": { + "hds": 1.3333, + "cds-g0": "{carbon.typography.heading03.line-height}", + "cds-g10": "{carbon.typography.heading03.line-height}", + "cds-g90": "{carbon.typography.heading03.line-height}", + "cds-g100": "{carbon.typography.heading03.line-height}" + }, "key": "{typography.display-300.line-height}" }, "name": "token-typography-display-300-line-height", @@ -7802,14 +8660,28 @@ { "key": "{typography.display-300.letter-spacing}", "$type": "letter-spacing", - "$value": "-0.5px", + "$value": "0px", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, "original": { "$type": "letter-spacing", - "$value": -0.5, + "$value": "{carbon.typography.heading03.letter-spacing}", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading03.letter-spacing}", + "cds-g10": "{carbon.typography.heading03.letter-spacing}", + "cds-g90": "{carbon.typography.heading03.letter-spacing}", + "cds-g100": "{carbon.typography.heading03.letter-spacing}" + }, "key": "{typography.display-300.letter-spacing}" }, "name": "token-typography-display-300-letter-spacing", @@ -7825,10 +8697,24 @@ { "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-200.font-family}" }, "name": "token-typography-display-200-font-family", @@ -7847,11 +8733,25 @@ "$value": "1rem", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, "original": { "$type": "font-size", - "$value": "16", + "$value": "{carbon.typography.heading02.font-size}", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.heading02.font-size}", + "cds-g10": "{carbon.typography.heading02.font-size}", + "cds-g90": "{carbon.typography.heading02.font-size}", + "cds-g100": "{carbon.typography.heading02.font-size}" + }, "key": "{typography.display-200.font-size}" }, "name": "token-typography-display-200-font-size", @@ -7869,10 +8769,24 @@ "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "hds": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, "original": { "$type": "number", - "$value": 1.5, + "$value": "{carbon.typography.heading02.line-height}", "comment": "24px", + "$modes": { + "hds": 1.5, + "cds-g0": "{carbon.typography.heading02.line-height}", + "cds-g10": "{carbon.typography.heading02.line-height}", + "cds-g90": "{carbon.typography.heading02.line-height}", + "cds-g100": "{carbon.typography.heading02.line-height}" + }, "key": "{typography.display-200.line-height}" }, "name": "token-typography-display-200-line-height", @@ -7888,14 +8802,28 @@ { "key": "{typography.display-200.letter-spacing}", "$type": "letter-spacing", - "$value": "-0.5px", + "$value": "0px", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, "original": { "$type": "letter-spacing", - "$value": -0.5, + "$value": "{carbon.typography.heading02.letter-spacing}", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading02.letter-spacing}", + "cds-g10": "{carbon.typography.heading02.letter-spacing}", + "cds-g90": "{carbon.typography.heading02.letter-spacing}", + "cds-g100": "{carbon.typography.heading02.letter-spacing}" + }, "key": "{typography.display-200.letter-spacing}" }, "name": "token-typography-display-200-letter-spacing", @@ -7911,10 +8839,24 @@ { "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-100.font-family}" }, "name": "token-typography-display-100-font-family", @@ -7930,14 +8872,28 @@ { "key": "{typography.display-100.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "0.875rem", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "13", + "$value": "{carbon.typography.heading01.font-size}", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.heading01.font-size}", + "cds-g10": "{carbon.typography.heading01.font-size}", + "cds-g90": "{carbon.typography.heading01.font-size}", + "cds-g100": "{carbon.typography.heading01.font-size}" + }, "key": "{typography.display-100.font-size}" }, "name": "token-typography-display-100-font-size", @@ -7953,12 +8909,26 @@ { "key": "{typography.display-100.line-height}", "$type": "number", - "$value": 1.3846, + "$value": 1.42857, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.3846, + "$value": "{carbon.typography.heading01.line-height}", "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": "{carbon.typography.heading01.line-height}", + "cds-g10": "{carbon.typography.heading01.line-height}", + "cds-g90": "{carbon.typography.heading01.line-height}", + "cds-g100": "{carbon.typography.heading01.line-height}" + }, "key": "{typography.display-100.line-height}" }, "name": "token-typography-display-100-line-height", @@ -7971,13 +8941,64 @@ "line-height" ] }, + { + "key": "{typography.display-100.letter-spacing}", + "$type": "letter-spacing", + "$value": "0.16px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "0.16px", + "cds-g10": "0.16px", + "cds-g90": "0.16px", + "cds-g100": "0.16px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading01.letter-spacing}", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "{carbon.typography.heading01.letter-spacing}", + "cds-g10": "{carbon.typography.heading01.letter-spacing}", + "cds-g90": "{carbon.typography.heading01.letter-spacing}", + "cds-g100": "{carbon.typography.heading01.letter-spacing}" + }, + "key": "{typography.display-100.letter-spacing}" + }, + "name": "token-typography-display-100-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "letter-spacing" + ] + }, { "key": "{typography.body-300.font-family}", "$type": "font-family", - "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-300.font-family}" }, "name": "token-typography-body-300-font-family", @@ -7996,11 +9017,25 @@ "$value": "1rem", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, "original": { "$type": "font-size", - "$value": "16", + "$value": "{carbon.typography.body02.font-size}", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.body02.font-size}", + "cds-g10": "{carbon.typography.body02.font-size}", + "cds-g90": "{carbon.typography.body02.font-size}", + "cds-g100": "{carbon.typography.body02.font-size}" + }, "key": "{typography.body-300.font-size}" }, "name": "token-typography-body-300-font-size", @@ -8018,10 +9053,24 @@ "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "hds": 1.4286, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, "original": { "$type": "number", - "$value": 1.5, + "$value": "{carbon.typography.body02.line-height}", "comment": "24px", + "$modes": { + "hds": 1.4286, + "cds-g0": "{carbon.typography.body02.line-height}", + "cds-g10": "{carbon.typography.body02.line-height}", + "cds-g90": "{carbon.typography.body02.line-height}", + "cds-g100": "{carbon.typography.body02.line-height}" + }, "key": "{typography.body-300.line-height}" }, "name": "token-typography-body-300-line-height", @@ -8037,10 +9086,24 @@ { "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-200.font-family}" }, "name": "token-typography-body-200-font-family", @@ -8059,11 +9122,25 @@ "$value": "0.875rem", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "14", + "$value": "{carbon.typography.body01.font-size}", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "{carbon.typography.body01.font-size}", + "cds-g10": "{carbon.typography.body01.font-size}", + "cds-g90": "{carbon.typography.body01.font-size}", + "cds-g100": "{carbon.typography.body01.font-size}" + }, "key": "{typography.body-200.font-size}" }, "name": "token-typography-body-200-font-size", @@ -8079,12 +9156,26 @@ { "key": "{typography.body-200.line-height}", "$type": "number", - "$value": 1.4286, + "$value": 1.42857, "comment": "20px", + "$modes": { + "hds": 1.4286, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.4286, + "$value": "{carbon.typography.body01.line-height}", "comment": "20px", + "$modes": { + "hds": 1.4286, + "cds-g0": "{carbon.typography.body01.line-height}", + "cds-g10": "{carbon.typography.body01.line-height}", + "cds-g90": "{carbon.typography.body01.line-height}", + "cds-g100": "{carbon.typography.body01.line-height}" + }, "key": "{typography.body-200.line-height}" }, "name": "token-typography-body-200-line-height", @@ -8100,10 +9191,24 @@ { "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-100.font-family}" }, "name": "token-typography-body-100-font-family", @@ -8119,14 +9224,28 @@ { "key": "{typography.body-100.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "0.875rem", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "13", + "$value": "{carbon.typography.bodyCompact01.font-size}", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.bodyCompact01.font-size}", + "cds-g10": "{carbon.typography.bodyCompact01.font-size}", + "cds-g90": "{carbon.typography.bodyCompact01.font-size}", + "cds-g100": "{carbon.typography.bodyCompact01.font-size}" + }, "key": "{typography.body-100.font-size}" }, "name": "token-typography-body-100-font-size", @@ -8142,12 +9261,26 @@ { "key": "{typography.body-100.line-height}", "$type": "number", - "$value": 1.3846, + "$value": 1.28572, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, "original": { "$type": "number", - "$value": 1.3846, + "$value": "{carbon.typography.bodyCompact01.line-height}", "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": "{carbon.typography.bodyCompact01.line-height}", + "cds-g10": "{carbon.typography.bodyCompact01.line-height}", + "cds-g90": "{carbon.typography.bodyCompact01.line-height}", + "cds-g100": "{carbon.typography.bodyCompact01.line-height}" + }, "key": "{typography.body-100.line-height}" }, "name": "token-typography-body-100-line-height", @@ -8161,75 +9294,131 @@ ] }, { - "key": "{typography.code-100.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", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.code}", - "key": "{typography.code-100.font-family}" + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-300.font-family}" }, - "name": "token-typography-code-100-font-family", + "name": "token-typography-code-300-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "font-family" ] }, { - "key": "{typography.code-100.font-size}", + "key": "{typography.code-300.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "0.875rem", "unit": "px", - "comment": "13px/0.8125rem", + "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "13", + "$value": "{carbon.typography.code02.font-size}", "unit": "px", - "comment": "13px/0.8125rem", - "key": "{typography.code-100.font-size}" + "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-300.font-size}" }, - "name": "token-typography-code-100-font-size", + "name": "token-typography-code-300-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "font-size" ] }, { - "key": "{typography.code-100.line-height}", + "key": "{typography.code-300.line-height}", "$type": "number", - "$value": 1.23, - "comment": "16px", + "$value": 1.42857, + "comment": "20px", + "$modes": { + "hds": 1.25, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.23, - "comment": "16px", - "key": "{typography.code-100.line-height}" + "$value": "{carbon.typography.code02.line-height}", + "comment": "20px", + "$modes": { + "hds": 1.25, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-300.line-height}" }, - "name": "token-typography-code-100-line-height", + "name": "token-typography-code-300-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "line-height" ] }, { "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", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.code}", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, "key": "{typography.code-200.font-family}" }, "name": "token-typography-code-200-font-family", @@ -8248,11 +9437,25 @@ "$value": "0.875rem", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "14", + "$value": "{carbon.typography.code02.font-size}", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, "key": "{typography.code-200.font-size}" }, "name": "token-typography-code-200-font-size", @@ -8268,12 +9471,26 @@ { "key": "{typography.code-200.line-height}", "$type": "number", - "$value": 1.125, + "$value": 1.42857, "comment": "18px", + "$modes": { + "hds": 1.125, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.125, + "$value": "{carbon.typography.code02.line-height}", "comment": "18px", + "$modes": { + "hds": 1.125, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, "key": "{typography.code-200.line-height}" }, "name": "token-typography-code-200-line-height", @@ -8287,65 +9504,107 @@ ] }, { - "key": "{typography.code-300.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", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.code}", - "key": "{typography.code-300.font-family}" + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-100.font-family}" }, - "name": "token-typography-code-300-font-family", + "name": "token-typography-code-100-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "font-family" ] }, { - "key": "{typography.code-300.font-size}", + "key": "{typography.code-100.font-size}", "$type": "font-size", - "$value": "1rem", + "$value": "0.875rem", "unit": "px", - "comment": "16px/1rem", + "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "16", + "$value": "{carbon.typography.code02.font-size}", "unit": "px", - "comment": "16px/1rem", - "key": "{typography.code-300.font-size}" + "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-100.font-size}" }, - "name": "token-typography-code-300-font-size", + "name": "token-typography-code-100-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "font-size" ] }, { - "key": "{typography.code-300.line-height}", + "key": "{typography.code-100.line-height}", "$type": "number", - "$value": 1.25, - "comment": "20px", + "$value": 1.33333, + "comment": "16px", + "$modes": { + "hds": 1.23, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, "original": { "$type": "number", - "$value": 1.25, - "comment": "20px", - "key": "{typography.code-300.line-height}" + "$value": "{carbon.typography.code01.line-height}", + "comment": "16px", + "$modes": { + "hds": 1.23, + "cds-g0": "{carbon.typography.code01.line-height}", + "cds-g10": "{carbon.typography.code01.line-height}", + "cds-g90": "{carbon.typography.code01.line-height}", + "cds-g100": "{carbon.typography.code01.line-height}" + }, + "key": "{typography.code-100.line-height}" }, - "name": "token-typography-code-300-line-height", + "name": "token-typography-code-100-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "line-height" ] } diff --git a/packages/tokens/dist/docs/products/themed-tokens/cds-g100.json b/packages/tokens/dist/docs/products/themed-tokens/cds-g100.json index 4b6b2cd72ea..54b26ca5e97 100644 --- a/packages/tokens/dist/docs/products/themed-tokens/cds-g100.json +++ b/packages/tokens/dist/docs/products/themed-tokens/cds-g100.json @@ -988,12 +988,26 @@ { "key": "{color.border.primary}", "$type": "color", - "$value": "#656a7633", + "$value": "#6f6f6f", "group": "semantic", + "$modes": { + "hds": "#656a7633", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, "original": { "$type": "color", - "$value": "{color.palette.alpha-200}", + "$value": "{carbon.themes.g100.borderSubtle03}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-200}", + "cds-g0": "{carbon.themes.white.borderSubtle03}", + "cds-g10": "{carbon.themes.g10.borderSubtle03}", + "cds-g90": "{carbon.themes.g90.borderSubtle03}", + "cds-g100": "{carbon.themes.g100.borderSubtle03}" + }, "key": "{color.border.primary}" }, "name": "token-color-border-primary", @@ -1009,12 +1023,26 @@ { "key": "{color.border.faint}", "$type": "color", - "$value": "#656a761a", + "$value": "#393939", "group": "semantic", + "$modes": { + "hds": "#656a761a", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, "original": { "$type": "color", - "$value": "{color.palette.alpha-100}", + "$value": "{carbon.themes.g100.borderSubtle00}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-100}", + "cds-g0": "{carbon.themes.white.borderSubtle00}", + "cds-g10": "{carbon.themes.g10.borderSubtle00}", + "cds-g90": "{carbon.themes.g90.borderSubtle00}", + "cds-g100": "{carbon.themes.g100.borderSubtle00}" + }, "key": "{color.border.faint}" }, "name": "token-color-border-faint", @@ -1030,12 +1058,26 @@ { "key": "{color.border.strong}", "$type": "color", - "$value": "#3b3d4566", + "$value": "#525252", "group": "semantic", + "$modes": { + "hds": "#3b3d4566", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, "original": { "$type": "color", - "$value": "{color.palette.alpha-300}", + "$value": "{carbon.themes.g100.borderSubtle01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-300}", + "cds-g0": "{carbon.themes.white.borderSubtle01}", + "cds-g10": "{carbon.themes.g10.borderSubtle01}", + "cds-g90": "{carbon.themes.g90.borderSubtle01}", + "cds-g100": "{carbon.themes.g100.borderSubtle01}" + }, "key": "{color.border.strong}" }, "name": "token-color-border-strong", @@ -1051,12 +1093,26 @@ { "key": "{color.border.action}", "$type": "color", - "$value": "#cce3fe", + "$value": "#4589ff", "group": "semantic", + "$modes": { + "hds": "#cce3fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-100}", + "$value": "{carbon.color.blue.50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-100}", + "cds-g0": "{carbon.color.blue.60}", + "cds-g10": "{carbon.color.blue.60}", + "cds-g90": "{carbon.color.blue.50}", + "cds-g100": "{carbon.color.blue.50}" + }, "key": "{color.border.action}" }, "name": "token-color-border-action", @@ -1072,12 +1128,26 @@ { "key": "{color.border.highlight}", "$type": "color", - "$value": "#ead2fe", + "$value": "#a56eff", "group": "semantic", + "$modes": { + "hds": "#ead2fe", + "cds-g0": "#be95ff", + "cds-g10": "#be95ff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-100}", + "$value": "{carbon.color.purple.50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-100}", + "cds-g0": "{carbon.color.purple.40}", + "cds-g10": "{carbon.color.purple.40}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, "key": "{color.border.highlight}" }, "name": "token-color-border-highlight", @@ -1093,12 +1163,26 @@ { "key": "{color.border.success}", "$type": "color", - "$value": "#cceeda", + "$value": "#24a148", "group": "semantic", + "$modes": { + "hds": "#cceeda", + "cds-g0": "#42be65", + "cds-g10": "#42be65", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, "original": { "$type": "color", - "$value": "{color.palette.green-100}", + "$value": "{carbon.color.green.50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-100}", + "cds-g0": "{carbon.color.green.40}", + "cds-g10": "{carbon.color.green.40}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, "key": "{color.border.success}" }, "name": "token-color-border-success", @@ -1114,12 +1198,26 @@ { "key": "{color.border.warning}", "$type": "color", - "$value": "#fbeabf", + "$value": "#eb6200", "group": "semantic", + "$modes": { + "hds": "#fbeabf", + "cds-g0": "#ff832b", + "cds-g10": "#ff832b", + "cds-g90": "#eb6200", + "cds-g100": "#eb6200" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-100}", + "$value": "{carbon.color.orange.50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.orange.40}", + "cds-g10": "{carbon.color.orange.40}", + "cds-g90": "{carbon.color.orange.50}", + "cds-g100": "{carbon.color.orange.50}" + }, "key": "{color.border.warning}" }, "name": "token-color-border-warning", @@ -1135,12 +1233,26 @@ { "key": "{color.border.critical}", "$type": "color", - "$value": "#fbd4d4", + "$value": "#fa4d56", "group": "semantic", + "$modes": { + "hds": "#fbd4d4", + "cds-g0": "#ff8389", + "cds-g10": "#ff8389", + "cds-g90": "#fa4d56", + "cds-g100": "#fa4d56" + }, "original": { "$type": "color", - "$value": "{color.palette.red-100}", + "$value": "{carbon.color.red.50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-100}", + "cds-g0": "{carbon.color.red.40}", + "cds-g10": "{carbon.color.red.40}", + "cds-g90": "{carbon.color.red.50}", + "cds-g100": "{carbon.color.red.50}" + }, "key": "{color.border.critical}" }, "name": "token-color-border-critical", @@ -1156,12 +1268,26 @@ { "key": "{color.focus.action.internal}", "$type": "color", - "$value": "#0c56e9", + "$value": "#161616", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-300}", + "$value": "{carbon.themes.g100.focusInset}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, "key": "{color.focus.action.internal}" }, "name": "token-color-focus-action-internal", @@ -1178,14 +1304,28 @@ { "key": "{color.focus.action.external}", "$type": "color", - "$value": "#5990ff", + "$value": "#ffffff", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, "original": { "$type": "color", - "$value": "#5990ff", + "$value": "{carbon.themes.g100.focus}", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, "key": "{color.focus.action.external}" }, "name": "token-color-focus-action-external", @@ -1202,12 +1342,26 @@ { "key": "{color.focus.critical.internal}", "$type": "color", - "$value": "#c00005", + "$value": "#161616", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.red-300}", + "$value": "{carbon.themes.g100.focusInset}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, "key": "{color.focus.critical.internal}" }, "name": "token-color-focus-critical-internal", @@ -1224,14 +1378,28 @@ { "key": "{color.focus.critical.external}", "$type": "color", - "$value": "#dd7578", + "$value": "#ffffff", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, "original": { "$type": "color", - "$value": "#dd7578", + "$value": "{carbon.themes.g100.focus}", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, "key": "{color.focus.critical.external}" }, "name": "token-color-focus-critical-external", @@ -1248,12 +1416,26 @@ { "key": "{color.foreground.strong}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#f4f4f4", "group": "semantic", + "$modes": { + "hds": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-700}", + "$value": "{carbon.themes.g100.textPrimary}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, "key": "{color.foreground.strong}" }, "name": "token-color-foreground-strong", @@ -1272,7 +1454,7 @@ "$value": "#f4f4f4", "group": "semantic", "$modes": { - "hds": "#ffffff", + "hds": "#3b3d45", "cds-g0": "#161616", "cds-g10": "#161616", "cds-g90": "#f4f4f4", @@ -1283,7 +1465,7 @@ "$value": "{carbon.themes.g100.textPrimary}", "group": "semantic", "$modes": { - "hds": "#ffffff", + "hds": "{color.palette.neutral-600}", "cds-g0": "{carbon.themes.white.textPrimary}", "cds-g10": "{carbon.themes.g10.textPrimary}", "cds-g90": "{carbon.themes.g90.textPrimary}", @@ -1304,12 +1486,26 @@ { "key": "{color.foreground.faint}", "$type": "color", - "$value": "#656a76", + "$value": "#f4f4f4", "group": "semantic", + "$modes": { + "hds": "#656a76", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-500}", + "$value": "{carbon.themes.g100.textPrimary}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-500}", + "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.faint}" }, "name": "token-color-foreground-faint", @@ -1325,12 +1521,26 @@ { "key": "{color.foreground.high-contrast}", "$type": "color", - "$value": "#ffffff", + "$value": "#161616", "group": "semantic", + "$modes": { + "hds": "#8c909c", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.g100.textInverse}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, "key": "{color.foreground.high-contrast}" }, "name": "token-color-foreground-high-contrast", @@ -1346,12 +1556,26 @@ { "key": "{color.foreground.disabled}", "$type": "color", - "$value": "#8c909c", + "$value": "rgba(244, 244, 244, 0.25)", "group": "semantic", + "$modes": { + "hds": "#8c909c", + "cds-g0": "rgba(22, 22, 22, 0.25)", + "cds-g10": "rgba(22, 22, 22, 0.25)", + "cds-g90": "rgba(244, 244, 244, 0.25)", + "cds-g100": "rgba(244, 244, 244, 0.25)" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-400}", + "$value": "{carbon.themes.g100.textDisabled}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textDisabled}", + "cds-g10": "{carbon.themes.g10.textDisabled}", + "cds-g90": "{carbon.themes.g90.textDisabled}", + "cds-g100": "{carbon.themes.g100.textDisabled}" + }, "key": "{color.foreground.disabled}" }, "name": "token-color-foreground-disabled", @@ -1367,12 +1591,26 @@ { "key": "{color.foreground.action}", "$type": "color", - "$value": "#1060ff", + "$value": "#78a9ff", "group": "semantic", + "$modes": { + "hds": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#78a9ff", + "cds-g100": "#78a9ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-200}", + "$value": "{carbon.themes.g100.linkPrimary}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.white.linkPrimary}", + "cds-g10": "{carbon.themes.g10.linkPrimary}", + "cds-g90": "{carbon.themes.g90.linkPrimary}", + "cds-g100": "{carbon.themes.g100.linkPrimary}" + }, "key": "{color.foreground.action}" }, "name": "token-color-foreground-action", @@ -1388,12 +1626,26 @@ { "key": "{color.foreground.action-hover}", "$type": "color", - "$value": "#0c56e9", + "$value": "#a6c8ff", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-300}", + "$value": "{carbon.themes.g100.linkPrimaryHover}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, "key": "{color.foreground.action-hover}" }, "name": "token-color-foreground-action-hover", @@ -1409,12 +1661,26 @@ { "key": "{color.foreground.action-active}", "$type": "color", - "$value": "#0046d1", + "$value": "#a6c8ff", "group": "semantic", + "$modes": { + "hds": "#0046d1", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-400}", + "$value": "{carbon.themes.g100.linkPrimaryHover}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, "key": "{color.foreground.action-active}" }, "name": "token-color-foreground-action-active", @@ -1430,12 +1696,26 @@ { "key": "{color.foreground.highlight}", "$type": "color", - "$value": "#a737ff", + "$value": "#be95ff", "group": "semantic", + "$modes": { + "hds": "#a737ff", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-200}", + "$value": "{carbon.color.purple.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, "key": "{color.foreground.highlight}" }, "name": "token-color-foreground-highlight", @@ -1451,12 +1731,26 @@ { "key": "{color.foreground.highlight-on-surface}", "$type": "color", - "$value": "#911ced", + "$value": "#d4bbff", "group": "semantic", + "$modes": { + "hds": "#911ced", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#d4bbff", + "cds-g100": "#d4bbff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-300}", + "$value": "{carbon.color.purple.30}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-300}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.30}", + "cds-g100": "{carbon.color.purple.30}" + }, "key": "{color.foreground.highlight-on-surface}" }, "name": "token-color-foreground-highlight-on-surface", @@ -1472,12 +1766,26 @@ { "key": "{color.foreground.highlight-high-contrast}", "$type": "color", - "$value": "#42215b", + "$value": "#d4bbff", "group": "semantic", + "$modes": { + "hds": "#42215b", + "cds-g0": "#491d8b", + "cds-g10": "#491d8b", + "cds-g90": "#e8daff", + "cds-g100": "#d4bbff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-500}", + "$value": "{carbon.color.purple.30}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-500}", + "cds-g0": "{carbon.color.purple.80}", + "cds-g10": "{carbon.color.purple.80}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.30}" + }, "key": "{color.foreground.highlight-high-contrast}" }, "name": "token-color-foreground-highlight-high-contrast", @@ -1493,12 +1801,26 @@ { "key": "{color.foreground.success}", "$type": "color", - "$value": "#008a22", + "$value": "#42be65", "group": "semantic", + "$modes": { + "hds": "#008a22", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#42be65", + "cds-g100": "#42be65" + }, "original": { "$type": "color", - "$value": "{color.palette.green-200}", + "$value": "{carbon.color.green.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-200}", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.40}", + "cds-g100": "{carbon.color.green.40}" + }, "key": "{color.foreground.success}" }, "name": "token-color-foreground-success", @@ -1514,12 +1836,26 @@ { "key": "{color.foreground.success-on-surface}", "$type": "color", - "$value": "#00781e", + "$value": "#6fdc8c", "group": "semantic", + "$modes": { + "hds": "#00781e", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#6fdc8c", + "cds-g100": "#6fdc8c" + }, "original": { "$type": "color", - "$value": "{color.palette.green-300}", + "$value": "{carbon.color.green.30}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-300}", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.30}", + "cds-g100": "{carbon.color.green.30}" + }, "key": "{color.foreground.success-on-surface}" }, "name": "token-color-foreground-success-on-surface", @@ -1535,12 +1871,26 @@ { "key": "{color.foreground.success-high-contrast}", "$type": "color", - "$value": "#054220", + "$value": "#a7f0ba", "group": "semantic", + "$modes": { + "hds": "#054220", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, "original": { "$type": "color", - "$value": "{color.palette.green-500}", + "$value": "{carbon.color.green.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-500}", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, "key": "{color.foreground.success-high-contrast}" }, "name": "token-color-foreground-success-high-contrast", @@ -1556,12 +1906,26 @@ { "key": "{color.foreground.warning}", "$type": "color", - "$value": "#bb5a00", + "$value": "#ff832b", "group": "semantic", + "$modes": { + "hds": "#bb5a00", + "cds-g0": "#ba4e00", + "cds-g10": "#ba4e00", + "cds-g90": "#ff832b", + "cds-g100": "#ff832b" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-200}", + "$value": "{carbon.color.orange.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.orange.60}", + "cds-g10": "{carbon.color.orange.60}", + "cds-g90": "{carbon.color.orange.40}", + "cds-g100": "{carbon.color.orange.40}" + }, "key": "{color.foreground.warning}" }, "name": "token-color-foreground-warning", @@ -1577,12 +1941,26 @@ { "key": "{color.foreground.warning-on-surface}", "$type": "color", - "$value": "#9e4b00", + "$value": "#ffb784", "group": "semantic", + "$modes": { + "hds": "#9e4b00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffb784", + "cds-g100": "#ffb784" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-300}", + "$value": "{carbon.color.orange.30}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-300}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.30}", + "cds-g100": "{carbon.color.orange.30}" + }, "key": "{color.foreground.warning-on-surface}" }, "name": "token-color-foreground-warning-on-surface", @@ -1598,12 +1976,26 @@ { "key": "{color.foreground.warning-high-contrast}", "$type": "color", - "$value": "#542800", + "$value": "#ffd9be", "group": "semantic", + "$modes": { + "hds": "#542800", + "cds-g0": "#5e2900", + "cds-g10": "#5e2900", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-500}", + "$value": "{carbon.color.orange.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-500}", + "cds-g0": "{carbon.color.orange.80}", + "cds-g10": "{carbon.color.orange.80}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, "key": "{color.foreground.warning-high-contrast}" }, "name": "token-color-foreground-warning-high-contrast", @@ -1619,12 +2011,26 @@ { "key": "{color.foreground.critical}", "$type": "color", - "$value": "#e52228", + "$value": "#ff8389", "group": "semantic", + "$modes": { + "hds": "#e52228", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#ff8389", + "cds-g100": "#ff8389" + }, "original": { "$type": "color", - "$value": "{color.palette.red-200}", + "$value": "{carbon.color.red.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-200}", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.40}", + "cds-g100": "{carbon.color.red.40}" + }, "key": "{color.foreground.critical}" }, "name": "token-color-foreground-critical", @@ -1640,12 +2046,26 @@ { "key": "{color.foreground.critical-on-surface}", "$type": "color", - "$value": "#c00005", + "$value": "#ffb3b8", "group": "semantic", + "$modes": { + "hds": "#c00005", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffb3b8", + "cds-g100": "#ffb3b8" + }, "original": { "$type": "color", - "$value": "{color.palette.red-300}", + "$value": "{carbon.color.red.30}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-300}", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.30}", + "cds-g100": "{carbon.color.red.30}" + }, "key": "{color.foreground.critical-on-surface}" }, "name": "token-color-foreground-critical-on-surface", @@ -1661,12 +2081,26 @@ { "key": "{color.foreground.critical-high-contrast}", "$type": "color", - "$value": "#51130a", + "$value": "#ffd7d9", "group": "semantic", + "$modes": { + "hds": "#51130a", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, "original": { "$type": "color", - "$value": "{color.palette.red-500}", + "$value": "{carbon.color.red.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-500}", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, "key": "{color.foreground.critical-high-contrast}" }, "name": "token-color-foreground-critical-high-contrast", @@ -1682,12 +2116,26 @@ { "key": "{color.page.primary}", "$type": "color", - "$value": "#ffffff", + "$value": "#161616", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.g100.background}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, "key": "{color.page.primary}" }, "name": "token-color-page-primary", @@ -1703,12 +2151,26 @@ { "key": "{color.page.faint}", "$type": "color", - "$value": "#fafafa", + "$value": "#161616", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-50}", + "$value": "{carbon.themes.g100.background}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, "key": "{color.page.faint}" }, "name": "token-color-page-faint", @@ -1724,12 +2186,26 @@ { "key": "{color.surface.primary}", "$type": "color", - "$value": "#ffffff", + "$value": "#262626", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.g100.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.primary}" }, "name": "token-color-surface-primary", @@ -1745,12 +2221,26 @@ { "key": "{color.surface.faint}", "$type": "color", - "$value": "#fafafa", + "$value": "#262626", "group": "semantic", + "$modes": { + "hds": "#fafafa", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-50}", + "$value": "{carbon.themes.g100.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.faint}" }, "name": "token-color-surface-faint", @@ -1766,12 +2256,26 @@ { "key": "{color.surface.strong}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#262626", "group": "semantic", + "$modes": { + "hds": "#f1f2f3", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-100}", + "$value": "{carbon.themes.g100.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.strong}" }, "name": "token-color-surface-strong", @@ -1787,12 +2291,26 @@ { "key": "{color.surface.interactive}", "$type": "color", - "$value": "#ffffff", + "$value": "#262626", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.g100.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.interactive}" }, "name": "token-color-surface-interactive", @@ -1808,12 +2326,26 @@ { "key": "{color.surface.interactive-hover}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#333333", "group": "semantic", + "$modes": { + "hds": "#f1f2f3", + "cds-g0": "#e8e8e8", + "cds-g10": "#e8e8e8", + "cds-g90": "#474747", + "cds-g100": "#333333" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-100}", + "$value": "{carbon.themes.g100.layerHover01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerHover01}", + "cds-g10": "{carbon.themes.g10.layerHover01}", + "cds-g90": "{carbon.themes.g90.layerHover01}", + "cds-g100": "{carbon.themes.g100.layerHover01}" + }, "key": "{color.surface.interactive-hover}" }, "name": "token-color-surface-interactive-hover", @@ -1829,12 +2361,26 @@ { "key": "{color.surface.interactive-active}", "$type": "color", - "$value": "#dedfe3", + "$value": "#525252", "group": "semantic", + "$modes": { + "hds": "#dedfe3", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-200}", + "$value": "{carbon.themes.g100.layerActive01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.white.layerActive01}", + "cds-g10": "{carbon.themes.g10.layerActive01}", + "cds-g90": "{carbon.themes.g90.layerActive01}", + "cds-g100": "{carbon.themes.g100.layerActive01}" + }, "key": "{color.surface.interactive-active}" }, "name": "token-color-surface-interactive-active", @@ -1850,12 +2396,26 @@ { "key": "{color.surface.interactive-disabled}", "$type": "color", - "$value": "#fafafa", + "$value": "#ff0000", "group": "semantic", + "$modes": { + "hds": "#fafafa", + "cds-g0": "#FF0000", + "cds-g10": "#FF0000", + "cds-g90": "#FF0000", + "cds-g100": "#FF0000" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-50}", + "$value": "#FF0000", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-50}", + "cds-g0": "#FF0000", + "cds-g10": "#FF0000", + "cds-g90": "#FF0000", + "cds-g100": "#FF0000" + }, "key": "{color.surface.interactive-disabled}" }, "name": "token-color-surface-interactive-disabled", @@ -1871,12 +2431,26 @@ { "key": "{color.surface.action}", "$type": "color", - "$value": "#f2f8ff", + "$value": "#0043ce", "group": "semantic", + "$modes": { + "hds": "#f2f8ff", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-50}", + "$value": "{carbon.color.blue.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-50}", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.70}", + "cds-g100": "{carbon.color.blue.70}" + }, "key": "{color.surface.action}" }, "name": "token-color-surface-action", @@ -1892,12 +2466,26 @@ { "key": "{color.surface.highlight}", "$type": "color", - "$value": "#f9f2ff", + "$value": "#6929c4", "group": "semantic", + "$modes": { + "hds": "#f9f2ff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-50}", + "$value": "{carbon.color.purple.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-50}", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, "key": "{color.surface.highlight}" }, "name": "token-color-surface-highlight", @@ -1913,12 +2501,26 @@ { "key": "{color.surface.success}", "$type": "color", - "$value": "#f2fbf6", + "$value": "#0e6027", "group": "semantic", + "$modes": { + "hds": "#f2fbf6", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, "original": { "$type": "color", - "$value": "{color.palette.green-50}", + "$value": "{carbon.color.green.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-50}", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, "key": "{color.surface.success}" }, "name": "token-color-surface-success", @@ -1934,12 +2536,26 @@ { "key": "{color.surface.warning}", "$type": "color", - "$value": "#fff9e8", + "$value": "#8a3800", "group": "semantic", + "$modes": { + "hds": "#fff9e8", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-50}", + "$value": "{carbon.color.orange.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-50}", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, "key": "{color.surface.warning}" }, "name": "token-color-surface-warning", @@ -1955,12 +2571,26 @@ { "key": "{color.surface.critical}", "$type": "color", - "$value": "#fff5f5", + "$value": "#a2191f", "group": "semantic", + "$modes": { + "hds": "#fff5f5", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, "original": { "$type": "color", - "$value": "{color.palette.red-50}", + "$value": "{carbon.color.red.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-50}", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, "key": "{color.surface.critical}" }, "name": "token-color-surface-critical", @@ -4110,7 +4740,7 @@ }, { "key": "{focus-ring.action.box-shadow}", - "$value": "inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff", + "$value": "inset 0 0 0 1px #161616, 0 0 0 3px #ffffff", "original": { "$value": "{focus-ring.action.internal-box-shadow}, {focus-ring.action.external-box-shadow}", "key": "{focus-ring.action.box-shadow}" @@ -4127,7 +4757,7 @@ }, { "key": "{focus-ring.critical.box-shadow}", - "$value": "inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578", + "$value": "inset 0 0 0 1px #161616, 0 0 0 3px #ffffff", "original": { "$value": "{focus-ring.critical.internal-box-shadow}, {focus-ring.critical.external-box-shadow}", "key": "{focus-ring.critical.box-shadow}" @@ -4737,7 +5367,7 @@ { "key": "{form.label.color}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#f4f4f4", "group": "components", "original": { "$type": "color", @@ -4758,7 +5388,7 @@ { "key": "{form.legend.color}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#f4f4f4", "group": "components", "original": { "$type": "color", @@ -4779,7 +5409,7 @@ { "key": "{form.helper-text.color}", "$type": "color", - "$value": "#656a76", + "$value": "#f4f4f4", "group": "components", "original": { "$type": "color", @@ -4800,7 +5430,7 @@ { "key": "{form.indicator.optional.color}", "$type": "color", - "$value": "#656a76", + "$value": "#f4f4f4", "group": "components", "original": { "$type": "color", @@ -5031,7 +5661,7 @@ { "key": "{form.control.base.foreground.value-color}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#f4f4f4", "group": "components", "original": { "$type": "color", @@ -5054,7 +5684,7 @@ { "key": "{form.control.base.foreground.placeholder-color}", "$type": "color", - "$value": "#656a76", + "$value": "#f4f4f4", "group": "components", "original": { "$type": "color", @@ -5077,7 +5707,7 @@ { "key": "{form.control.base.surface-color.default}", "$type": "color", - "$value": "#ffffff", + "$value": "#262626", "group": "components", "original": { "$type": "color", @@ -5100,7 +5730,7 @@ { "key": "{form.control.base.surface-color.hover}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#333333", "group": "components", "original": { "$type": "color", @@ -5169,7 +5799,7 @@ { "key": "{form.control.checked.foreground-color}", "$type": "color", - "$value": "#ffffff", + "$value": "#161616", "group": "components", "original": { "$type": "color", @@ -5351,7 +5981,7 @@ { "key": "{form.control.readonly.surface-color}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#262626", "group": "components", "original": { "$type": "color", @@ -5373,7 +6003,7 @@ { "key": "{form.control.readonly.border-color}", "$type": "color", - "$value": "#656a761a", + "$value": "#393939", "group": "components", "original": { "$type": "color", @@ -5395,7 +6025,7 @@ { "key": "{form.control.disabled.foreground-color}", "$type": "color", - "$value": "#8c909c", + "$value": "rgba(244, 244, 244, 0.25)", "group": "components", "original": { "$type": "color", @@ -5417,7 +6047,7 @@ { "key": "{form.control.disabled.surface-color}", "$type": "color", - "$value": "#fafafa", + "$value": "#ff0000", "group": "components", "original": { "$type": "color", @@ -5439,7 +6069,7 @@ { "key": "{form.control.disabled.border-color}", "$type": "color", - "$value": "#656a7633", + "$value": "#6f6f6f", "group": "components", "original": { "$type": "color", @@ -6050,7 +6680,7 @@ { "key": "{form.toggle.base.surface-color.default}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#262626", "group": "components", "comment": "the toggle has a different base surface color, compared to the other controls", "original": { @@ -7410,15 +8040,24 @@ { "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.display.macOS}", - "{typography.font-stack.sans.display.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.display.emoji}" - ], + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.sans.display.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.font-stack.display}" }, "name": "token-typography-font-stack-display", @@ -7434,15 +8073,24 @@ { "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.text.macOS}", - "{typography.font-stack.sans.text.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.text.emoji}" - ], + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.sans.text.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.font-stack.text}" }, "name": "token-typography-font-stack-text", @@ -7458,14 +8106,24 @@ { "key": "{typography.font-stack.code}", "$type": "font-family", - "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace, Consolas, monospace", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.monospace.code.macOS}", - "{typography.font-stack.monospace.code.windows}", - "monospace" - ], + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.monospace.code.combined}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, "key": "{typography.font-stack.code}" }, "name": "token-typography-font-stack-code", @@ -7613,10 +8271,24 @@ { "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-500.font-family}" }, "name": "token-typography-display-500-font-family", @@ -7632,14 +8304,28 @@ { "key": "{typography.display-500.font-size}", "$type": "font-size", - "$value": "1.875rem", + "$value": "2rem", "unit": "px", "comment": "30px/1.875rem", + "$modes": { + "hds": "30", + "cds-g0": "2rem", + "cds-g10": "2rem", + "cds-g90": "2rem", + "cds-g100": "2rem" + }, "original": { "$type": "font-size", - "$value": "30", + "$value": "{carbon.typography.heading05.font-size}", "unit": "px", "comment": "30px/1.875rem", + "$modes": { + "hds": "30", + "cds-g0": "{carbon.typography.heading05.font-size}", + "cds-g10": "{carbon.typography.heading05.font-size}", + "cds-g90": "{carbon.typography.heading05.font-size}", + "cds-g100": "{carbon.typography.heading05.font-size}" + }, "key": "{typography.display-500.font-size}" }, "name": "token-typography-display-500-font-size", @@ -7655,12 +8341,26 @@ { "key": "{typography.display-500.line-height}", "$type": "number", - "$value": 1.2666, + "$value": 1.25, "comment": "38px", + "$modes": { + "hds": 1.2666, + "cds-g0": 1.25, + "cds-g10": 1.25, + "cds-g90": 1.25, + "cds-g100": 1.25 + }, "original": { "$type": "number", - "$value": 1.2666, + "$value": "{carbon.typography.heading05.line-height}", "comment": "38px", + "$modes": { + "hds": 1.2666, + "cds-g0": "{carbon.typography.heading05.line-height}", + "cds-g10": "{carbon.typography.heading05.line-height}", + "cds-g90": "{carbon.typography.heading05.line-height}", + "cds-g100": "{carbon.typography.heading05.line-height}" + }, "key": "{typography.display-500.line-height}" }, "name": "token-typography-display-500-line-height", @@ -7673,13 +8373,64 @@ "line-height" ] }, + { + "key": "{typography.display-500.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading05.letter-spacing}", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading05.letter-spacing}", + "cds-g10": "{carbon.typography.heading05.letter-spacing}", + "cds-g90": "{carbon.typography.heading05.letter-spacing}", + "cds-g100": "{carbon.typography.heading05.letter-spacing}" + }, + "key": "{typography.display-500.letter-spacing}" + }, + "name": "token-typography-display-500-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "letter-spacing" + ] + }, { "key": "{typography.display-400.font-family}", "$type": "font-family", - "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-400.font-family}" }, "name": "token-typography-display-400-font-family", @@ -7695,14 +8446,28 @@ { "key": "{typography.display-400.font-size}", "$type": "font-size", - "$value": "1.5rem", + "$value": "1.75rem", "unit": "px", "comment": "24px/1.5rem", + "$modes": { + "hds": "24", + "cds-g0": "1.75rem", + "cds-g10": "1.75rem", + "cds-g90": "1.75rem", + "cds-g100": "1.75rem" + }, "original": { "$type": "font-size", - "$value": "24", + "$value": "{carbon.typography.heading04.font-size}", "unit": "px", "comment": "24px/1.5rem", + "$modes": { + "hds": "24", + "cds-g0": "{carbon.typography.heading04.font-size}", + "cds-g10": "{carbon.typography.heading04.font-size}", + "cds-g90": "{carbon.typography.heading04.font-size}", + "cds-g100": "{carbon.typography.heading04.font-size}" + }, "key": "{typography.display-400.font-size}" }, "name": "token-typography-display-400-font-size", @@ -7718,12 +8483,26 @@ { "key": "{typography.display-400.line-height}", "$type": "number", - "$value": 1.3333, + "$value": 1.28572, "comment": "32px", + "$modes": { + "hds": 1.3333, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, "original": { "$type": "number", - "$value": 1.3333, + "$value": "{carbon.typography.heading04.line-height}", "comment": "32px", + "$modes": { + "hds": 1.3333, + "cds-g0": "{carbon.typography.heading04.line-height}", + "cds-g10": "{carbon.typography.heading04.line-height}", + "cds-g90": "{carbon.typography.heading04.line-height}", + "cds-g100": "{carbon.typography.heading04.line-height}" + }, "key": "{typography.display-400.line-height}" }, "name": "token-typography-display-400-line-height", @@ -7736,13 +8515,64 @@ "line-height" ] }, + { + "key": "{typography.display-400.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading04.letter-spacing}", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "{carbon.typography.heading04.letter-spacing}", + "cds-g10": "{carbon.typography.heading04.letter-spacing}", + "cds-g90": "{carbon.typography.heading04.letter-spacing}", + "cds-g100": "{carbon.typography.heading04.letter-spacing}" + }, + "key": "{typography.display-400.letter-spacing}" + }, + "name": "token-typography-display-400-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "letter-spacing" + ] + }, { "key": "{typography.display-300.font-family}", "$type": "font-family", - "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-300.font-family}" }, "name": "token-typography-display-300-font-family", @@ -7758,14 +8588,28 @@ { "key": "{typography.display-300.font-size}", "$type": "font-size", - "$value": "1.125rem", + "$value": "1.25rem", "unit": "px", "comment": "18px/1.125rem", + "$modes": { + "hds": "18", + "cds-g0": "1.25rem", + "cds-g10": "1.25rem", + "cds-g90": "1.25rem", + "cds-g100": "1.25rem" + }, "original": { "$type": "font-size", - "$value": "18", + "$value": "{carbon.typography.heading03.font-size}", "unit": "px", "comment": "18px/1.125rem", + "$modes": { + "hds": "18", + "cds-g0": "{carbon.typography.heading03.font-size}", + "cds-g10": "{carbon.typography.heading03.font-size}", + "cds-g90": "{carbon.typography.heading03.font-size}", + "cds-g100": "{carbon.typography.heading03.font-size}" + }, "key": "{typography.display-300.font-size}" }, "name": "token-typography-display-300-font-size", @@ -7781,12 +8625,26 @@ { "key": "{typography.display-300.line-height}", "$type": "number", - "$value": 1.3333, + "$value": 1.4, "comment": "24px", + "$modes": { + "hds": 1.3333, + "cds-g0": 1.4, + "cds-g10": 1.4, + "cds-g90": 1.4, + "cds-g100": 1.4 + }, "original": { "$type": "number", - "$value": 1.3333, + "$value": "{carbon.typography.heading03.line-height}", "comment": "24px", + "$modes": { + "hds": 1.3333, + "cds-g0": "{carbon.typography.heading03.line-height}", + "cds-g10": "{carbon.typography.heading03.line-height}", + "cds-g90": "{carbon.typography.heading03.line-height}", + "cds-g100": "{carbon.typography.heading03.line-height}" + }, "key": "{typography.display-300.line-height}" }, "name": "token-typography-display-300-line-height", @@ -7802,14 +8660,28 @@ { "key": "{typography.display-300.letter-spacing}", "$type": "letter-spacing", - "$value": "-0.5px", + "$value": "0px", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, "original": { "$type": "letter-spacing", - "$value": -0.5, + "$value": "{carbon.typography.heading03.letter-spacing}", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading03.letter-spacing}", + "cds-g10": "{carbon.typography.heading03.letter-spacing}", + "cds-g90": "{carbon.typography.heading03.letter-spacing}", + "cds-g100": "{carbon.typography.heading03.letter-spacing}" + }, "key": "{typography.display-300.letter-spacing}" }, "name": "token-typography-display-300-letter-spacing", @@ -7825,10 +8697,24 @@ { "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-200.font-family}" }, "name": "token-typography-display-200-font-family", @@ -7847,11 +8733,25 @@ "$value": "1rem", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, "original": { "$type": "font-size", - "$value": "16", + "$value": "{carbon.typography.heading02.font-size}", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.heading02.font-size}", + "cds-g10": "{carbon.typography.heading02.font-size}", + "cds-g90": "{carbon.typography.heading02.font-size}", + "cds-g100": "{carbon.typography.heading02.font-size}" + }, "key": "{typography.display-200.font-size}" }, "name": "token-typography-display-200-font-size", @@ -7869,10 +8769,24 @@ "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "hds": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, "original": { "$type": "number", - "$value": 1.5, + "$value": "{carbon.typography.heading02.line-height}", "comment": "24px", + "$modes": { + "hds": 1.5, + "cds-g0": "{carbon.typography.heading02.line-height}", + "cds-g10": "{carbon.typography.heading02.line-height}", + "cds-g90": "{carbon.typography.heading02.line-height}", + "cds-g100": "{carbon.typography.heading02.line-height}" + }, "key": "{typography.display-200.line-height}" }, "name": "token-typography-display-200-line-height", @@ -7888,14 +8802,28 @@ { "key": "{typography.display-200.letter-spacing}", "$type": "letter-spacing", - "$value": "-0.5px", + "$value": "0px", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, "original": { "$type": "letter-spacing", - "$value": -0.5, + "$value": "{carbon.typography.heading02.letter-spacing}", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading02.letter-spacing}", + "cds-g10": "{carbon.typography.heading02.letter-spacing}", + "cds-g90": "{carbon.typography.heading02.letter-spacing}", + "cds-g100": "{carbon.typography.heading02.letter-spacing}" + }, "key": "{typography.display-200.letter-spacing}" }, "name": "token-typography-display-200-letter-spacing", @@ -7911,10 +8839,24 @@ { "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-100.font-family}" }, "name": "token-typography-display-100-font-family", @@ -7930,14 +8872,28 @@ { "key": "{typography.display-100.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "0.875rem", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "13", + "$value": "{carbon.typography.heading01.font-size}", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.heading01.font-size}", + "cds-g10": "{carbon.typography.heading01.font-size}", + "cds-g90": "{carbon.typography.heading01.font-size}", + "cds-g100": "{carbon.typography.heading01.font-size}" + }, "key": "{typography.display-100.font-size}" }, "name": "token-typography-display-100-font-size", @@ -7953,12 +8909,26 @@ { "key": "{typography.display-100.line-height}", "$type": "number", - "$value": 1.3846, + "$value": 1.42857, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.3846, + "$value": "{carbon.typography.heading01.line-height}", "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": "{carbon.typography.heading01.line-height}", + "cds-g10": "{carbon.typography.heading01.line-height}", + "cds-g90": "{carbon.typography.heading01.line-height}", + "cds-g100": "{carbon.typography.heading01.line-height}" + }, "key": "{typography.display-100.line-height}" }, "name": "token-typography-display-100-line-height", @@ -7971,13 +8941,64 @@ "line-height" ] }, + { + "key": "{typography.display-100.letter-spacing}", + "$type": "letter-spacing", + "$value": "0.16px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "0.16px", + "cds-g10": "0.16px", + "cds-g90": "0.16px", + "cds-g100": "0.16px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading01.letter-spacing}", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "{carbon.typography.heading01.letter-spacing}", + "cds-g10": "{carbon.typography.heading01.letter-spacing}", + "cds-g90": "{carbon.typography.heading01.letter-spacing}", + "cds-g100": "{carbon.typography.heading01.letter-spacing}" + }, + "key": "{typography.display-100.letter-spacing}" + }, + "name": "token-typography-display-100-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "letter-spacing" + ] + }, { "key": "{typography.body-300.font-family}", "$type": "font-family", - "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-300.font-family}" }, "name": "token-typography-body-300-font-family", @@ -7996,11 +9017,25 @@ "$value": "1rem", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, "original": { "$type": "font-size", - "$value": "16", + "$value": "{carbon.typography.body02.font-size}", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.body02.font-size}", + "cds-g10": "{carbon.typography.body02.font-size}", + "cds-g90": "{carbon.typography.body02.font-size}", + "cds-g100": "{carbon.typography.body02.font-size}" + }, "key": "{typography.body-300.font-size}" }, "name": "token-typography-body-300-font-size", @@ -8018,10 +9053,24 @@ "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "hds": 1.4286, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, "original": { "$type": "number", - "$value": 1.5, + "$value": "{carbon.typography.body02.line-height}", "comment": "24px", + "$modes": { + "hds": 1.4286, + "cds-g0": "{carbon.typography.body02.line-height}", + "cds-g10": "{carbon.typography.body02.line-height}", + "cds-g90": "{carbon.typography.body02.line-height}", + "cds-g100": "{carbon.typography.body02.line-height}" + }, "key": "{typography.body-300.line-height}" }, "name": "token-typography-body-300-line-height", @@ -8037,10 +9086,24 @@ { "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-200.font-family}" }, "name": "token-typography-body-200-font-family", @@ -8059,11 +9122,25 @@ "$value": "0.875rem", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "14", + "$value": "{carbon.typography.body01.font-size}", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "{carbon.typography.body01.font-size}", + "cds-g10": "{carbon.typography.body01.font-size}", + "cds-g90": "{carbon.typography.body01.font-size}", + "cds-g100": "{carbon.typography.body01.font-size}" + }, "key": "{typography.body-200.font-size}" }, "name": "token-typography-body-200-font-size", @@ -8079,12 +9156,26 @@ { "key": "{typography.body-200.line-height}", "$type": "number", - "$value": 1.4286, + "$value": 1.42857, "comment": "20px", + "$modes": { + "hds": 1.4286, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.4286, + "$value": "{carbon.typography.body01.line-height}", "comment": "20px", + "$modes": { + "hds": 1.4286, + "cds-g0": "{carbon.typography.body01.line-height}", + "cds-g10": "{carbon.typography.body01.line-height}", + "cds-g90": "{carbon.typography.body01.line-height}", + "cds-g100": "{carbon.typography.body01.line-height}" + }, "key": "{typography.body-200.line-height}" }, "name": "token-typography-body-200-line-height", @@ -8100,10 +9191,24 @@ { "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-100.font-family}" }, "name": "token-typography-body-100-font-family", @@ -8119,14 +9224,28 @@ { "key": "{typography.body-100.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "0.875rem", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "13", + "$value": "{carbon.typography.bodyCompact01.font-size}", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.bodyCompact01.font-size}", + "cds-g10": "{carbon.typography.bodyCompact01.font-size}", + "cds-g90": "{carbon.typography.bodyCompact01.font-size}", + "cds-g100": "{carbon.typography.bodyCompact01.font-size}" + }, "key": "{typography.body-100.font-size}" }, "name": "token-typography-body-100-font-size", @@ -8142,12 +9261,26 @@ { "key": "{typography.body-100.line-height}", "$type": "number", - "$value": 1.3846, + "$value": 1.28572, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, "original": { "$type": "number", - "$value": 1.3846, + "$value": "{carbon.typography.bodyCompact01.line-height}", "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": "{carbon.typography.bodyCompact01.line-height}", + "cds-g10": "{carbon.typography.bodyCompact01.line-height}", + "cds-g90": "{carbon.typography.bodyCompact01.line-height}", + "cds-g100": "{carbon.typography.bodyCompact01.line-height}" + }, "key": "{typography.body-100.line-height}" }, "name": "token-typography-body-100-line-height", @@ -8161,75 +9294,131 @@ ] }, { - "key": "{typography.code-100.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", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.code}", - "key": "{typography.code-100.font-family}" + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-300.font-family}" }, - "name": "token-typography-code-100-font-family", + "name": "token-typography-code-300-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "font-family" ] }, { - "key": "{typography.code-100.font-size}", + "key": "{typography.code-300.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "0.875rem", "unit": "px", - "comment": "13px/0.8125rem", + "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "13", + "$value": "{carbon.typography.code02.font-size}", "unit": "px", - "comment": "13px/0.8125rem", - "key": "{typography.code-100.font-size}" + "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-300.font-size}" }, - "name": "token-typography-code-100-font-size", + "name": "token-typography-code-300-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "font-size" ] }, { - "key": "{typography.code-100.line-height}", + "key": "{typography.code-300.line-height}", "$type": "number", - "$value": 1.23, - "comment": "16px", + "$value": 1.42857, + "comment": "20px", + "$modes": { + "hds": 1.25, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.23, - "comment": "16px", - "key": "{typography.code-100.line-height}" + "$value": "{carbon.typography.code02.line-height}", + "comment": "20px", + "$modes": { + "hds": 1.25, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-300.line-height}" }, - "name": "token-typography-code-100-line-height", + "name": "token-typography-code-300-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "line-height" ] }, { "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", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.code}", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, "key": "{typography.code-200.font-family}" }, "name": "token-typography-code-200-font-family", @@ -8248,11 +9437,25 @@ "$value": "0.875rem", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "14", + "$value": "{carbon.typography.code02.font-size}", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, "key": "{typography.code-200.font-size}" }, "name": "token-typography-code-200-font-size", @@ -8268,12 +9471,26 @@ { "key": "{typography.code-200.line-height}", "$type": "number", - "$value": 1.125, + "$value": 1.42857, "comment": "18px", + "$modes": { + "hds": 1.125, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.125, + "$value": "{carbon.typography.code02.line-height}", "comment": "18px", + "$modes": { + "hds": 1.125, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, "key": "{typography.code-200.line-height}" }, "name": "token-typography-code-200-line-height", @@ -8287,65 +9504,107 @@ ] }, { - "key": "{typography.code-300.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", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.code}", - "key": "{typography.code-300.font-family}" + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-100.font-family}" }, - "name": "token-typography-code-300-font-family", + "name": "token-typography-code-100-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "font-family" ] }, { - "key": "{typography.code-300.font-size}", + "key": "{typography.code-100.font-size}", "$type": "font-size", - "$value": "1rem", + "$value": "0.875rem", "unit": "px", - "comment": "16px/1rem", + "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "16", + "$value": "{carbon.typography.code02.font-size}", "unit": "px", - "comment": "16px/1rem", - "key": "{typography.code-300.font-size}" + "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-100.font-size}" }, - "name": "token-typography-code-300-font-size", + "name": "token-typography-code-100-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "font-size" ] }, { - "key": "{typography.code-300.line-height}", + "key": "{typography.code-100.line-height}", "$type": "number", - "$value": 1.25, - "comment": "20px", + "$value": 1.33333, + "comment": "16px", + "$modes": { + "hds": 1.23, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, "original": { "$type": "number", - "$value": 1.25, - "comment": "20px", - "key": "{typography.code-300.line-height}" + "$value": "{carbon.typography.code01.line-height}", + "comment": "16px", + "$modes": { + "hds": 1.23, + "cds-g0": "{carbon.typography.code01.line-height}", + "cds-g10": "{carbon.typography.code01.line-height}", + "cds-g90": "{carbon.typography.code01.line-height}", + "cds-g100": "{carbon.typography.code01.line-height}" + }, + "key": "{typography.code-100.line-height}" }, - "name": "token-typography-code-300-line-height", + "name": "token-typography-code-100-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "line-height" ] } diff --git a/packages/tokens/dist/docs/products/themed-tokens/cds-g90.json b/packages/tokens/dist/docs/products/themed-tokens/cds-g90.json index 047eb1190fa..f38a78a1b38 100644 --- a/packages/tokens/dist/docs/products/themed-tokens/cds-g90.json +++ b/packages/tokens/dist/docs/products/themed-tokens/cds-g90.json @@ -988,12 +988,26 @@ { "key": "{color.border.primary}", "$type": "color", - "$value": "#656a7633", + "$value": "#8d8d8d", "group": "semantic", + "$modes": { + "hds": "#656a7633", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, "original": { "$type": "color", - "$value": "{color.palette.alpha-200}", + "$value": "{carbon.themes.g90.borderSubtle03}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-200}", + "cds-g0": "{carbon.themes.white.borderSubtle03}", + "cds-g10": "{carbon.themes.g10.borderSubtle03}", + "cds-g90": "{carbon.themes.g90.borderSubtle03}", + "cds-g100": "{carbon.themes.g100.borderSubtle03}" + }, "key": "{color.border.primary}" }, "name": "token-color-border-primary", @@ -1009,12 +1023,26 @@ { "key": "{color.border.faint}", "$type": "color", - "$value": "#656a761a", + "$value": "#525252", "group": "semantic", + "$modes": { + "hds": "#656a761a", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, "original": { "$type": "color", - "$value": "{color.palette.alpha-100}", + "$value": "{carbon.themes.g90.borderSubtle00}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-100}", + "cds-g0": "{carbon.themes.white.borderSubtle00}", + "cds-g10": "{carbon.themes.g10.borderSubtle00}", + "cds-g90": "{carbon.themes.g90.borderSubtle00}", + "cds-g100": "{carbon.themes.g100.borderSubtle00}" + }, "key": "{color.border.faint}" }, "name": "token-color-border-faint", @@ -1030,12 +1058,26 @@ { "key": "{color.border.strong}", "$type": "color", - "$value": "#3b3d4566", + "$value": "#6f6f6f", "group": "semantic", + "$modes": { + "hds": "#3b3d4566", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, "original": { "$type": "color", - "$value": "{color.palette.alpha-300}", + "$value": "{carbon.themes.g90.borderSubtle01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-300}", + "cds-g0": "{carbon.themes.white.borderSubtle01}", + "cds-g10": "{carbon.themes.g10.borderSubtle01}", + "cds-g90": "{carbon.themes.g90.borderSubtle01}", + "cds-g100": "{carbon.themes.g100.borderSubtle01}" + }, "key": "{color.border.strong}" }, "name": "token-color-border-strong", @@ -1051,12 +1093,26 @@ { "key": "{color.border.action}", "$type": "color", - "$value": "#cce3fe", + "$value": "#4589ff", "group": "semantic", + "$modes": { + "hds": "#cce3fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-100}", + "$value": "{carbon.color.blue.50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-100}", + "cds-g0": "{carbon.color.blue.60}", + "cds-g10": "{carbon.color.blue.60}", + "cds-g90": "{carbon.color.blue.50}", + "cds-g100": "{carbon.color.blue.50}" + }, "key": "{color.border.action}" }, "name": "token-color-border-action", @@ -1072,12 +1128,26 @@ { "key": "{color.border.highlight}", "$type": "color", - "$value": "#ead2fe", + "$value": "#a56eff", "group": "semantic", + "$modes": { + "hds": "#ead2fe", + "cds-g0": "#be95ff", + "cds-g10": "#be95ff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-100}", + "$value": "{carbon.color.purple.50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-100}", + "cds-g0": "{carbon.color.purple.40}", + "cds-g10": "{carbon.color.purple.40}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, "key": "{color.border.highlight}" }, "name": "token-color-border-highlight", @@ -1093,12 +1163,26 @@ { "key": "{color.border.success}", "$type": "color", - "$value": "#cceeda", + "$value": "#24a148", "group": "semantic", + "$modes": { + "hds": "#cceeda", + "cds-g0": "#42be65", + "cds-g10": "#42be65", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, "original": { "$type": "color", - "$value": "{color.palette.green-100}", + "$value": "{carbon.color.green.50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-100}", + "cds-g0": "{carbon.color.green.40}", + "cds-g10": "{carbon.color.green.40}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, "key": "{color.border.success}" }, "name": "token-color-border-success", @@ -1114,12 +1198,26 @@ { "key": "{color.border.warning}", "$type": "color", - "$value": "#fbeabf", + "$value": "#eb6200", "group": "semantic", + "$modes": { + "hds": "#fbeabf", + "cds-g0": "#ff832b", + "cds-g10": "#ff832b", + "cds-g90": "#eb6200", + "cds-g100": "#eb6200" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-100}", + "$value": "{carbon.color.orange.50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.orange.40}", + "cds-g10": "{carbon.color.orange.40}", + "cds-g90": "{carbon.color.orange.50}", + "cds-g100": "{carbon.color.orange.50}" + }, "key": "{color.border.warning}" }, "name": "token-color-border-warning", @@ -1135,12 +1233,26 @@ { "key": "{color.border.critical}", "$type": "color", - "$value": "#fbd4d4", + "$value": "#fa4d56", "group": "semantic", + "$modes": { + "hds": "#fbd4d4", + "cds-g0": "#ff8389", + "cds-g10": "#ff8389", + "cds-g90": "#fa4d56", + "cds-g100": "#fa4d56" + }, "original": { "$type": "color", - "$value": "{color.palette.red-100}", + "$value": "{carbon.color.red.50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-100}", + "cds-g0": "{carbon.color.red.40}", + "cds-g10": "{carbon.color.red.40}", + "cds-g90": "{carbon.color.red.50}", + "cds-g100": "{carbon.color.red.50}" + }, "key": "{color.border.critical}" }, "name": "token-color-border-critical", @@ -1156,12 +1268,26 @@ { "key": "{color.focus.action.internal}", "$type": "color", - "$value": "#0c56e9", + "$value": "#161616", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-300}", + "$value": "{carbon.themes.g90.focusInset}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, "key": "{color.focus.action.internal}" }, "name": "token-color-focus-action-internal", @@ -1178,14 +1304,28 @@ { "key": "{color.focus.action.external}", "$type": "color", - "$value": "#5990ff", + "$value": "#ffffff", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, "original": { "$type": "color", - "$value": "#5990ff", + "$value": "{carbon.themes.g90.focus}", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, "key": "{color.focus.action.external}" }, "name": "token-color-focus-action-external", @@ -1202,12 +1342,26 @@ { "key": "{color.focus.critical.internal}", "$type": "color", - "$value": "#c00005", + "$value": "#161616", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.red-300}", + "$value": "{carbon.themes.g90.focusInset}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, "key": "{color.focus.critical.internal}" }, "name": "token-color-focus-critical-internal", @@ -1224,14 +1378,28 @@ { "key": "{color.focus.critical.external}", "$type": "color", - "$value": "#dd7578", + "$value": "#ffffff", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, "original": { "$type": "color", - "$value": "#dd7578", + "$value": "{carbon.themes.g90.focus}", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, "key": "{color.focus.critical.external}" }, "name": "token-color-focus-critical-external", @@ -1248,12 +1416,26 @@ { "key": "{color.foreground.strong}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#f4f4f4", "group": "semantic", + "$modes": { + "hds": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-700}", + "$value": "{carbon.themes.g90.textPrimary}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, "key": "{color.foreground.strong}" }, "name": "token-color-foreground-strong", @@ -1272,7 +1454,7 @@ "$value": "#f4f4f4", "group": "semantic", "$modes": { - "hds": "#ffffff", + "hds": "#3b3d45", "cds-g0": "#161616", "cds-g10": "#161616", "cds-g90": "#f4f4f4", @@ -1283,7 +1465,7 @@ "$value": "{carbon.themes.g90.textPrimary}", "group": "semantic", "$modes": { - "hds": "#ffffff", + "hds": "{color.palette.neutral-600}", "cds-g0": "{carbon.themes.white.textPrimary}", "cds-g10": "{carbon.themes.g10.textPrimary}", "cds-g90": "{carbon.themes.g90.textPrimary}", @@ -1304,12 +1486,26 @@ { "key": "{color.foreground.faint}", "$type": "color", - "$value": "#656a76", + "$value": "#f4f4f4", "group": "semantic", + "$modes": { + "hds": "#656a76", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-500}", + "$value": "{carbon.themes.g90.textPrimary}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-500}", + "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.faint}" }, "name": "token-color-foreground-faint", @@ -1325,12 +1521,26 @@ { "key": "{color.foreground.high-contrast}", "$type": "color", - "$value": "#ffffff", + "$value": "#161616", "group": "semantic", + "$modes": { + "hds": "#8c909c", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.g90.textInverse}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, "key": "{color.foreground.high-contrast}" }, "name": "token-color-foreground-high-contrast", @@ -1346,12 +1556,26 @@ { "key": "{color.foreground.disabled}", "$type": "color", - "$value": "#8c909c", + "$value": "rgba(244, 244, 244, 0.25)", "group": "semantic", + "$modes": { + "hds": "#8c909c", + "cds-g0": "rgba(22, 22, 22, 0.25)", + "cds-g10": "rgba(22, 22, 22, 0.25)", + "cds-g90": "rgba(244, 244, 244, 0.25)", + "cds-g100": "rgba(244, 244, 244, 0.25)" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-400}", + "$value": "{carbon.themes.g90.textDisabled}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textDisabled}", + "cds-g10": "{carbon.themes.g10.textDisabled}", + "cds-g90": "{carbon.themes.g90.textDisabled}", + "cds-g100": "{carbon.themes.g100.textDisabled}" + }, "key": "{color.foreground.disabled}" }, "name": "token-color-foreground-disabled", @@ -1367,12 +1591,26 @@ { "key": "{color.foreground.action}", "$type": "color", - "$value": "#1060ff", + "$value": "#78a9ff", "group": "semantic", + "$modes": { + "hds": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#78a9ff", + "cds-g100": "#78a9ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-200}", + "$value": "{carbon.themes.g90.linkPrimary}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.white.linkPrimary}", + "cds-g10": "{carbon.themes.g10.linkPrimary}", + "cds-g90": "{carbon.themes.g90.linkPrimary}", + "cds-g100": "{carbon.themes.g100.linkPrimary}" + }, "key": "{color.foreground.action}" }, "name": "token-color-foreground-action", @@ -1388,12 +1626,26 @@ { "key": "{color.foreground.action-hover}", "$type": "color", - "$value": "#0c56e9", + "$value": "#a6c8ff", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-300}", + "$value": "{carbon.themes.g90.linkPrimaryHover}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, "key": "{color.foreground.action-hover}" }, "name": "token-color-foreground-action-hover", @@ -1409,12 +1661,26 @@ { "key": "{color.foreground.action-active}", "$type": "color", - "$value": "#0046d1", + "$value": "#a6c8ff", "group": "semantic", + "$modes": { + "hds": "#0046d1", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-400}", + "$value": "{carbon.themes.g90.linkPrimaryHover}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, "key": "{color.foreground.action-active}" }, "name": "token-color-foreground-action-active", @@ -1430,12 +1696,26 @@ { "key": "{color.foreground.highlight}", "$type": "color", - "$value": "#a737ff", + "$value": "#be95ff", "group": "semantic", + "$modes": { + "hds": "#a737ff", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-200}", + "$value": "{carbon.color.purple.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, "key": "{color.foreground.highlight}" }, "name": "token-color-foreground-highlight", @@ -1451,12 +1731,26 @@ { "key": "{color.foreground.highlight-on-surface}", "$type": "color", - "$value": "#911ced", + "$value": "#d4bbff", "group": "semantic", + "$modes": { + "hds": "#911ced", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#d4bbff", + "cds-g100": "#d4bbff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-300}", + "$value": "{carbon.color.purple.30}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-300}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.30}", + "cds-g100": "{carbon.color.purple.30}" + }, "key": "{color.foreground.highlight-on-surface}" }, "name": "token-color-foreground-highlight-on-surface", @@ -1472,12 +1766,26 @@ { "key": "{color.foreground.highlight-high-contrast}", "$type": "color", - "$value": "#42215b", + "$value": "#e8daff", "group": "semantic", + "$modes": { + "hds": "#42215b", + "cds-g0": "#491d8b", + "cds-g10": "#491d8b", + "cds-g90": "#e8daff", + "cds-g100": "#d4bbff" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-500}", + "$value": "{carbon.color.purple.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-500}", + "cds-g0": "{carbon.color.purple.80}", + "cds-g10": "{carbon.color.purple.80}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.30}" + }, "key": "{color.foreground.highlight-high-contrast}" }, "name": "token-color-foreground-highlight-high-contrast", @@ -1493,12 +1801,26 @@ { "key": "{color.foreground.success}", "$type": "color", - "$value": "#008a22", + "$value": "#42be65", "group": "semantic", + "$modes": { + "hds": "#008a22", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#42be65", + "cds-g100": "#42be65" + }, "original": { "$type": "color", - "$value": "{color.palette.green-200}", + "$value": "{carbon.color.green.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-200}", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.40}", + "cds-g100": "{carbon.color.green.40}" + }, "key": "{color.foreground.success}" }, "name": "token-color-foreground-success", @@ -1514,12 +1836,26 @@ { "key": "{color.foreground.success-on-surface}", "$type": "color", - "$value": "#00781e", + "$value": "#6fdc8c", "group": "semantic", + "$modes": { + "hds": "#00781e", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#6fdc8c", + "cds-g100": "#6fdc8c" + }, "original": { "$type": "color", - "$value": "{color.palette.green-300}", + "$value": "{carbon.color.green.30}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-300}", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.30}", + "cds-g100": "{carbon.color.green.30}" + }, "key": "{color.foreground.success-on-surface}" }, "name": "token-color-foreground-success-on-surface", @@ -1535,12 +1871,26 @@ { "key": "{color.foreground.success-high-contrast}", "$type": "color", - "$value": "#054220", + "$value": "#a7f0ba", "group": "semantic", + "$modes": { + "hds": "#054220", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, "original": { "$type": "color", - "$value": "{color.palette.green-500}", + "$value": "{carbon.color.green.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-500}", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, "key": "{color.foreground.success-high-contrast}" }, "name": "token-color-foreground-success-high-contrast", @@ -1556,12 +1906,26 @@ { "key": "{color.foreground.warning}", "$type": "color", - "$value": "#bb5a00", + "$value": "#ff832b", "group": "semantic", + "$modes": { + "hds": "#bb5a00", + "cds-g0": "#ba4e00", + "cds-g10": "#ba4e00", + "cds-g90": "#ff832b", + "cds-g100": "#ff832b" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-200}", + "$value": "{carbon.color.orange.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.orange.60}", + "cds-g10": "{carbon.color.orange.60}", + "cds-g90": "{carbon.color.orange.40}", + "cds-g100": "{carbon.color.orange.40}" + }, "key": "{color.foreground.warning}" }, "name": "token-color-foreground-warning", @@ -1577,12 +1941,26 @@ { "key": "{color.foreground.warning-on-surface}", "$type": "color", - "$value": "#9e4b00", + "$value": "#ffb784", "group": "semantic", + "$modes": { + "hds": "#9e4b00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffb784", + "cds-g100": "#ffb784" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-300}", + "$value": "{carbon.color.orange.30}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-300}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.30}", + "cds-g100": "{carbon.color.orange.30}" + }, "key": "{color.foreground.warning-on-surface}" }, "name": "token-color-foreground-warning-on-surface", @@ -1598,12 +1976,26 @@ { "key": "{color.foreground.warning-high-contrast}", "$type": "color", - "$value": "#542800", + "$value": "#ffd9be", "group": "semantic", + "$modes": { + "hds": "#542800", + "cds-g0": "#5e2900", + "cds-g10": "#5e2900", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-500}", + "$value": "{carbon.color.orange.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-500}", + "cds-g0": "{carbon.color.orange.80}", + "cds-g10": "{carbon.color.orange.80}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, "key": "{color.foreground.warning-high-contrast}" }, "name": "token-color-foreground-warning-high-contrast", @@ -1619,12 +2011,26 @@ { "key": "{color.foreground.critical}", "$type": "color", - "$value": "#e52228", + "$value": "#ff8389", "group": "semantic", + "$modes": { + "hds": "#e52228", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#ff8389", + "cds-g100": "#ff8389" + }, "original": { "$type": "color", - "$value": "{color.palette.red-200}", + "$value": "{carbon.color.red.40}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-200}", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.40}", + "cds-g100": "{carbon.color.red.40}" + }, "key": "{color.foreground.critical}" }, "name": "token-color-foreground-critical", @@ -1640,12 +2046,26 @@ { "key": "{color.foreground.critical-on-surface}", "$type": "color", - "$value": "#c00005", + "$value": "#ffb3b8", "group": "semantic", + "$modes": { + "hds": "#c00005", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffb3b8", + "cds-g100": "#ffb3b8" + }, "original": { "$type": "color", - "$value": "{color.palette.red-300}", + "$value": "{carbon.color.red.30}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-300}", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.30}", + "cds-g100": "{carbon.color.red.30}" + }, "key": "{color.foreground.critical-on-surface}" }, "name": "token-color-foreground-critical-on-surface", @@ -1661,12 +2081,26 @@ { "key": "{color.foreground.critical-high-contrast}", "$type": "color", - "$value": "#51130a", + "$value": "#ffd7d9", "group": "semantic", + "$modes": { + "hds": "#51130a", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, "original": { "$type": "color", - "$value": "{color.palette.red-500}", + "$value": "{carbon.color.red.20}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-500}", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, "key": "{color.foreground.critical-high-contrast}" }, "name": "token-color-foreground-critical-high-contrast", @@ -1682,12 +2116,26 @@ { "key": "{color.page.primary}", "$type": "color", - "$value": "#ffffff", + "$value": "#262626", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.g90.background}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, "key": "{color.page.primary}" }, "name": "token-color-page-primary", @@ -1703,12 +2151,26 @@ { "key": "{color.page.faint}", "$type": "color", - "$value": "#fafafa", + "$value": "#262626", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-50}", + "$value": "{carbon.themes.g90.background}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, "key": "{color.page.faint}" }, "name": "token-color-page-faint", @@ -1724,12 +2186,26 @@ { "key": "{color.surface.primary}", "$type": "color", - "$value": "#ffffff", + "$value": "#393939", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.g90.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.primary}" }, "name": "token-color-surface-primary", @@ -1745,12 +2221,26 @@ { "key": "{color.surface.faint}", "$type": "color", - "$value": "#fafafa", + "$value": "#393939", "group": "semantic", + "$modes": { + "hds": "#fafafa", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-50}", + "$value": "{carbon.themes.g90.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.faint}" }, "name": "token-color-surface-faint", @@ -1766,12 +2256,26 @@ { "key": "{color.surface.strong}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#393939", "group": "semantic", + "$modes": { + "hds": "#f1f2f3", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-100}", + "$value": "{carbon.themes.g90.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.strong}" }, "name": "token-color-surface-strong", @@ -1787,12 +2291,26 @@ { "key": "{color.surface.interactive}", "$type": "color", - "$value": "#ffffff", + "$value": "#393939", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{carbon.themes.g90.layer01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.interactive}" }, "name": "token-color-surface-interactive", @@ -1808,12 +2326,26 @@ { "key": "{color.surface.interactive-hover}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#474747", "group": "semantic", + "$modes": { + "hds": "#f1f2f3", + "cds-g0": "#e8e8e8", + "cds-g10": "#e8e8e8", + "cds-g90": "#474747", + "cds-g100": "#333333" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-100}", + "$value": "{carbon.themes.g90.layerHover01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerHover01}", + "cds-g10": "{carbon.themes.g10.layerHover01}", + "cds-g90": "{carbon.themes.g90.layerHover01}", + "cds-g100": "{carbon.themes.g100.layerHover01}" + }, "key": "{color.surface.interactive-hover}" }, "name": "token-color-surface-interactive-hover", @@ -1829,12 +2361,26 @@ { "key": "{color.surface.interactive-active}", "$type": "color", - "$value": "#dedfe3", + "$value": "#6f6f6f", "group": "semantic", + "$modes": { + "hds": "#dedfe3", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-200}", + "$value": "{carbon.themes.g90.layerActive01}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.white.layerActive01}", + "cds-g10": "{carbon.themes.g10.layerActive01}", + "cds-g90": "{carbon.themes.g90.layerActive01}", + "cds-g100": "{carbon.themes.g100.layerActive01}" + }, "key": "{color.surface.interactive-active}" }, "name": "token-color-surface-interactive-active", @@ -1850,12 +2396,26 @@ { "key": "{color.surface.interactive-disabled}", "$type": "color", - "$value": "#fafafa", + "$value": "#ff0000", "group": "semantic", + "$modes": { + "hds": "#fafafa", + "cds-g0": "#FF0000", + "cds-g10": "#FF0000", + "cds-g90": "#FF0000", + "cds-g100": "#FF0000" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-50}", + "$value": "#FF0000", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-50}", + "cds-g0": "#FF0000", + "cds-g10": "#FF0000", + "cds-g90": "#FF0000", + "cds-g100": "#FF0000" + }, "key": "{color.surface.interactive-disabled}" }, "name": "token-color-surface-interactive-disabled", @@ -1871,12 +2431,26 @@ { "key": "{color.surface.action}", "$type": "color", - "$value": "#f2f8ff", + "$value": "#0043ce", "group": "semantic", + "$modes": { + "hds": "#f2f8ff", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, "original": { "$type": "color", - "$value": "{color.palette.blue-50}", + "$value": "{carbon.color.blue.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-50}", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.70}", + "cds-g100": "{carbon.color.blue.70}" + }, "key": "{color.surface.action}" }, "name": "token-color-surface-action", @@ -1892,12 +2466,26 @@ { "key": "{color.surface.highlight}", "$type": "color", - "$value": "#f9f2ff", + "$value": "#6929c4", "group": "semantic", + "$modes": { + "hds": "#f9f2ff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, "original": { "$type": "color", - "$value": "{color.palette.purple-50}", + "$value": "{carbon.color.purple.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-50}", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, "key": "{color.surface.highlight}" }, "name": "token-color-surface-highlight", @@ -1913,12 +2501,26 @@ { "key": "{color.surface.success}", "$type": "color", - "$value": "#f2fbf6", + "$value": "#0e6027", "group": "semantic", + "$modes": { + "hds": "#f2fbf6", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, "original": { "$type": "color", - "$value": "{color.palette.green-50}", + "$value": "{carbon.color.green.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-50}", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, "key": "{color.surface.success}" }, "name": "token-color-surface-success", @@ -1934,12 +2536,26 @@ { "key": "{color.surface.warning}", "$type": "color", - "$value": "#fff9e8", + "$value": "#8a3800", "group": "semantic", + "$modes": { + "hds": "#fff9e8", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, "original": { "$type": "color", - "$value": "{color.palette.amber-50}", + "$value": "{carbon.color.orange.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-50}", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, "key": "{color.surface.warning}" }, "name": "token-color-surface-warning", @@ -1955,12 +2571,26 @@ { "key": "{color.surface.critical}", "$type": "color", - "$value": "#fff5f5", + "$value": "#a2191f", "group": "semantic", + "$modes": { + "hds": "#fff5f5", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, "original": { "$type": "color", - "$value": "{color.palette.red-50}", + "$value": "{carbon.color.red.70}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-50}", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, "key": "{color.surface.critical}" }, "name": "token-color-surface-critical", @@ -4110,7 +4740,7 @@ }, { "key": "{focus-ring.action.box-shadow}", - "$value": "inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff", + "$value": "inset 0 0 0 1px #161616, 0 0 0 3px #ffffff", "original": { "$value": "{focus-ring.action.internal-box-shadow}, {focus-ring.action.external-box-shadow}", "key": "{focus-ring.action.box-shadow}" @@ -4127,7 +4757,7 @@ }, { "key": "{focus-ring.critical.box-shadow}", - "$value": "inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578", + "$value": "inset 0 0 0 1px #161616, 0 0 0 3px #ffffff", "original": { "$value": "{focus-ring.critical.internal-box-shadow}, {focus-ring.critical.external-box-shadow}", "key": "{focus-ring.critical.box-shadow}" @@ -4737,7 +5367,7 @@ { "key": "{form.label.color}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#f4f4f4", "group": "components", "original": { "$type": "color", @@ -4758,7 +5388,7 @@ { "key": "{form.legend.color}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#f4f4f4", "group": "components", "original": { "$type": "color", @@ -4779,7 +5409,7 @@ { "key": "{form.helper-text.color}", "$type": "color", - "$value": "#656a76", + "$value": "#f4f4f4", "group": "components", "original": { "$type": "color", @@ -4800,7 +5430,7 @@ { "key": "{form.indicator.optional.color}", "$type": "color", - "$value": "#656a76", + "$value": "#f4f4f4", "group": "components", "original": { "$type": "color", @@ -5031,7 +5661,7 @@ { "key": "{form.control.base.foreground.value-color}", "$type": "color", - "$value": "#0c0c0e", + "$value": "#f4f4f4", "group": "components", "original": { "$type": "color", @@ -5054,7 +5684,7 @@ { "key": "{form.control.base.foreground.placeholder-color}", "$type": "color", - "$value": "#656a76", + "$value": "#f4f4f4", "group": "components", "original": { "$type": "color", @@ -5077,7 +5707,7 @@ { "key": "{form.control.base.surface-color.default}", "$type": "color", - "$value": "#ffffff", + "$value": "#393939", "group": "components", "original": { "$type": "color", @@ -5100,7 +5730,7 @@ { "key": "{form.control.base.surface-color.hover}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#474747", "group": "components", "original": { "$type": "color", @@ -5169,7 +5799,7 @@ { "key": "{form.control.checked.foreground-color}", "$type": "color", - "$value": "#ffffff", + "$value": "#161616", "group": "components", "original": { "$type": "color", @@ -5351,7 +5981,7 @@ { "key": "{form.control.readonly.surface-color}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#393939", "group": "components", "original": { "$type": "color", @@ -5373,7 +6003,7 @@ { "key": "{form.control.readonly.border-color}", "$type": "color", - "$value": "#656a761a", + "$value": "#525252", "group": "components", "original": { "$type": "color", @@ -5395,7 +6025,7 @@ { "key": "{form.control.disabled.foreground-color}", "$type": "color", - "$value": "#8c909c", + "$value": "rgba(244, 244, 244, 0.25)", "group": "components", "original": { "$type": "color", @@ -5417,7 +6047,7 @@ { "key": "{form.control.disabled.surface-color}", "$type": "color", - "$value": "#fafafa", + "$value": "#ff0000", "group": "components", "original": { "$type": "color", @@ -5439,7 +6069,7 @@ { "key": "{form.control.disabled.border-color}", "$type": "color", - "$value": "#656a7633", + "$value": "#8d8d8d", "group": "components", "original": { "$type": "color", @@ -6050,7 +6680,7 @@ { "key": "{form.toggle.base.surface-color.default}", "$type": "color", - "$value": "#f1f2f3", + "$value": "#393939", "group": "components", "comment": "the toggle has a different base surface color, compared to the other controls", "original": { @@ -7410,15 +8040,24 @@ { "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.display.macOS}", - "{typography.font-stack.sans.display.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.display.emoji}" - ], + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.sans.display.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.font-stack.display}" }, "name": "token-typography-font-stack-display", @@ -7434,15 +8073,24 @@ { "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.text.macOS}", - "{typography.font-stack.sans.text.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.text.emoji}" - ], + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.sans.text.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.font-stack.text}" }, "name": "token-typography-font-stack-text", @@ -7458,14 +8106,24 @@ { "key": "{typography.font-stack.code}", "$type": "font-family", - "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace, Consolas, monospace", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.monospace.code.macOS}", - "{typography.font-stack.monospace.code.windows}", - "monospace" - ], + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.monospace.code.combined}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, "key": "{typography.font-stack.code}" }, "name": "token-typography-font-stack-code", @@ -7613,10 +8271,24 @@ { "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-500.font-family}" }, "name": "token-typography-display-500-font-family", @@ -7632,14 +8304,28 @@ { "key": "{typography.display-500.font-size}", "$type": "font-size", - "$value": "1.875rem", + "$value": "2rem", "unit": "px", "comment": "30px/1.875rem", + "$modes": { + "hds": "30", + "cds-g0": "2rem", + "cds-g10": "2rem", + "cds-g90": "2rem", + "cds-g100": "2rem" + }, "original": { "$type": "font-size", - "$value": "30", + "$value": "{carbon.typography.heading05.font-size}", "unit": "px", "comment": "30px/1.875rem", + "$modes": { + "hds": "30", + "cds-g0": "{carbon.typography.heading05.font-size}", + "cds-g10": "{carbon.typography.heading05.font-size}", + "cds-g90": "{carbon.typography.heading05.font-size}", + "cds-g100": "{carbon.typography.heading05.font-size}" + }, "key": "{typography.display-500.font-size}" }, "name": "token-typography-display-500-font-size", @@ -7655,12 +8341,26 @@ { "key": "{typography.display-500.line-height}", "$type": "number", - "$value": 1.2666, + "$value": 1.25, "comment": "38px", + "$modes": { + "hds": 1.2666, + "cds-g0": 1.25, + "cds-g10": 1.25, + "cds-g90": 1.25, + "cds-g100": 1.25 + }, "original": { "$type": "number", - "$value": 1.2666, + "$value": "{carbon.typography.heading05.line-height}", "comment": "38px", + "$modes": { + "hds": 1.2666, + "cds-g0": "{carbon.typography.heading05.line-height}", + "cds-g10": "{carbon.typography.heading05.line-height}", + "cds-g90": "{carbon.typography.heading05.line-height}", + "cds-g100": "{carbon.typography.heading05.line-height}" + }, "key": "{typography.display-500.line-height}" }, "name": "token-typography-display-500-line-height", @@ -7673,13 +8373,64 @@ "line-height" ] }, + { + "key": "{typography.display-500.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading05.letter-spacing}", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading05.letter-spacing}", + "cds-g10": "{carbon.typography.heading05.letter-spacing}", + "cds-g90": "{carbon.typography.heading05.letter-spacing}", + "cds-g100": "{carbon.typography.heading05.letter-spacing}" + }, + "key": "{typography.display-500.letter-spacing}" + }, + "name": "token-typography-display-500-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "letter-spacing" + ] + }, { "key": "{typography.display-400.font-family}", "$type": "font-family", - "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-400.font-family}" }, "name": "token-typography-display-400-font-family", @@ -7695,14 +8446,28 @@ { "key": "{typography.display-400.font-size}", "$type": "font-size", - "$value": "1.5rem", + "$value": "1.75rem", "unit": "px", "comment": "24px/1.5rem", + "$modes": { + "hds": "24", + "cds-g0": "1.75rem", + "cds-g10": "1.75rem", + "cds-g90": "1.75rem", + "cds-g100": "1.75rem" + }, "original": { "$type": "font-size", - "$value": "24", + "$value": "{carbon.typography.heading04.font-size}", "unit": "px", "comment": "24px/1.5rem", + "$modes": { + "hds": "24", + "cds-g0": "{carbon.typography.heading04.font-size}", + "cds-g10": "{carbon.typography.heading04.font-size}", + "cds-g90": "{carbon.typography.heading04.font-size}", + "cds-g100": "{carbon.typography.heading04.font-size}" + }, "key": "{typography.display-400.font-size}" }, "name": "token-typography-display-400-font-size", @@ -7718,12 +8483,26 @@ { "key": "{typography.display-400.line-height}", "$type": "number", - "$value": 1.3333, + "$value": 1.28572, "comment": "32px", + "$modes": { + "hds": 1.3333, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, "original": { "$type": "number", - "$value": 1.3333, + "$value": "{carbon.typography.heading04.line-height}", "comment": "32px", + "$modes": { + "hds": 1.3333, + "cds-g0": "{carbon.typography.heading04.line-height}", + "cds-g10": "{carbon.typography.heading04.line-height}", + "cds-g90": "{carbon.typography.heading04.line-height}", + "cds-g100": "{carbon.typography.heading04.line-height}" + }, "key": "{typography.display-400.line-height}" }, "name": "token-typography-display-400-line-height", @@ -7736,13 +8515,64 @@ "line-height" ] }, + { + "key": "{typography.display-400.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading04.letter-spacing}", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "{carbon.typography.heading04.letter-spacing}", + "cds-g10": "{carbon.typography.heading04.letter-spacing}", + "cds-g90": "{carbon.typography.heading04.letter-spacing}", + "cds-g100": "{carbon.typography.heading04.letter-spacing}" + }, + "key": "{typography.display-400.letter-spacing}" + }, + "name": "token-typography-display-400-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "letter-spacing" + ] + }, { "key": "{typography.display-300.font-family}", "$type": "font-family", - "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-300.font-family}" }, "name": "token-typography-display-300-font-family", @@ -7758,14 +8588,28 @@ { "key": "{typography.display-300.font-size}", "$type": "font-size", - "$value": "1.125rem", + "$value": "1.25rem", "unit": "px", "comment": "18px/1.125rem", + "$modes": { + "hds": "18", + "cds-g0": "1.25rem", + "cds-g10": "1.25rem", + "cds-g90": "1.25rem", + "cds-g100": "1.25rem" + }, "original": { "$type": "font-size", - "$value": "18", + "$value": "{carbon.typography.heading03.font-size}", "unit": "px", "comment": "18px/1.125rem", + "$modes": { + "hds": "18", + "cds-g0": "{carbon.typography.heading03.font-size}", + "cds-g10": "{carbon.typography.heading03.font-size}", + "cds-g90": "{carbon.typography.heading03.font-size}", + "cds-g100": "{carbon.typography.heading03.font-size}" + }, "key": "{typography.display-300.font-size}" }, "name": "token-typography-display-300-font-size", @@ -7781,12 +8625,26 @@ { "key": "{typography.display-300.line-height}", "$type": "number", - "$value": 1.3333, + "$value": 1.4, "comment": "24px", + "$modes": { + "hds": 1.3333, + "cds-g0": 1.4, + "cds-g10": 1.4, + "cds-g90": 1.4, + "cds-g100": 1.4 + }, "original": { "$type": "number", - "$value": 1.3333, + "$value": "{carbon.typography.heading03.line-height}", "comment": "24px", + "$modes": { + "hds": 1.3333, + "cds-g0": "{carbon.typography.heading03.line-height}", + "cds-g10": "{carbon.typography.heading03.line-height}", + "cds-g90": "{carbon.typography.heading03.line-height}", + "cds-g100": "{carbon.typography.heading03.line-height}" + }, "key": "{typography.display-300.line-height}" }, "name": "token-typography-display-300-line-height", @@ -7802,14 +8660,28 @@ { "key": "{typography.display-300.letter-spacing}", "$type": "letter-spacing", - "$value": "-0.5px", + "$value": "0px", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, "original": { "$type": "letter-spacing", - "$value": -0.5, + "$value": "{carbon.typography.heading03.letter-spacing}", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading03.letter-spacing}", + "cds-g10": "{carbon.typography.heading03.letter-spacing}", + "cds-g90": "{carbon.typography.heading03.letter-spacing}", + "cds-g100": "{carbon.typography.heading03.letter-spacing}" + }, "key": "{typography.display-300.letter-spacing}" }, "name": "token-typography-display-300-letter-spacing", @@ -7825,10 +8697,24 @@ { "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-200.font-family}" }, "name": "token-typography-display-200-font-family", @@ -7847,11 +8733,25 @@ "$value": "1rem", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, "original": { "$type": "font-size", - "$value": "16", + "$value": "{carbon.typography.heading02.font-size}", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.heading02.font-size}", + "cds-g10": "{carbon.typography.heading02.font-size}", + "cds-g90": "{carbon.typography.heading02.font-size}", + "cds-g100": "{carbon.typography.heading02.font-size}" + }, "key": "{typography.display-200.font-size}" }, "name": "token-typography-display-200-font-size", @@ -7869,10 +8769,24 @@ "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "hds": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, "original": { "$type": "number", - "$value": 1.5, + "$value": "{carbon.typography.heading02.line-height}", "comment": "24px", + "$modes": { + "hds": 1.5, + "cds-g0": "{carbon.typography.heading02.line-height}", + "cds-g10": "{carbon.typography.heading02.line-height}", + "cds-g90": "{carbon.typography.heading02.line-height}", + "cds-g100": "{carbon.typography.heading02.line-height}" + }, "key": "{typography.display-200.line-height}" }, "name": "token-typography-display-200-line-height", @@ -7888,14 +8802,28 @@ { "key": "{typography.display-200.letter-spacing}", "$type": "letter-spacing", - "$value": "-0.5px", + "$value": "0px", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, "original": { "$type": "letter-spacing", - "$value": -0.5, + "$value": "{carbon.typography.heading02.letter-spacing}", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading02.letter-spacing}", + "cds-g10": "{carbon.typography.heading02.letter-spacing}", + "cds-g90": "{carbon.typography.heading02.letter-spacing}", + "cds-g100": "{carbon.typography.heading02.letter-spacing}" + }, "key": "{typography.display-200.letter-spacing}" }, "name": "token-typography-display-200-letter-spacing", @@ -7911,10 +8839,24 @@ { "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-100.font-family}" }, "name": "token-typography-display-100-font-family", @@ -7930,14 +8872,28 @@ { "key": "{typography.display-100.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "0.875rem", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "13", + "$value": "{carbon.typography.heading01.font-size}", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.heading01.font-size}", + "cds-g10": "{carbon.typography.heading01.font-size}", + "cds-g90": "{carbon.typography.heading01.font-size}", + "cds-g100": "{carbon.typography.heading01.font-size}" + }, "key": "{typography.display-100.font-size}" }, "name": "token-typography-display-100-font-size", @@ -7953,12 +8909,26 @@ { "key": "{typography.display-100.line-height}", "$type": "number", - "$value": 1.3846, + "$value": 1.42857, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.3846, + "$value": "{carbon.typography.heading01.line-height}", "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": "{carbon.typography.heading01.line-height}", + "cds-g10": "{carbon.typography.heading01.line-height}", + "cds-g90": "{carbon.typography.heading01.line-height}", + "cds-g100": "{carbon.typography.heading01.line-height}" + }, "key": "{typography.display-100.line-height}" }, "name": "token-typography-display-100-line-height", @@ -7971,13 +8941,64 @@ "line-height" ] }, + { + "key": "{typography.display-100.letter-spacing}", + "$type": "letter-spacing", + "$value": "0.16px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "0.16px", + "cds-g10": "0.16px", + "cds-g90": "0.16px", + "cds-g100": "0.16px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.heading01.letter-spacing}", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "{carbon.typography.heading01.letter-spacing}", + "cds-g10": "{carbon.typography.heading01.letter-spacing}", + "cds-g90": "{carbon.typography.heading01.letter-spacing}", + "cds-g100": "{carbon.typography.heading01.letter-spacing}" + }, + "key": "{typography.display-100.letter-spacing}" + }, + "name": "token-typography-display-100-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "letter-spacing" + ] + }, { "key": "{typography.body-300.font-family}", "$type": "font-family", - "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-300.font-family}" }, "name": "token-typography-body-300-font-family", @@ -7996,11 +9017,25 @@ "$value": "1rem", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, "original": { "$type": "font-size", - "$value": "16", + "$value": "{carbon.typography.body02.font-size}", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.body02.font-size}", + "cds-g10": "{carbon.typography.body02.font-size}", + "cds-g90": "{carbon.typography.body02.font-size}", + "cds-g100": "{carbon.typography.body02.font-size}" + }, "key": "{typography.body-300.font-size}" }, "name": "token-typography-body-300-font-size", @@ -8018,10 +9053,24 @@ "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "hds": 1.4286, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, "original": { "$type": "number", - "$value": 1.5, + "$value": "{carbon.typography.body02.line-height}", "comment": "24px", + "$modes": { + "hds": 1.4286, + "cds-g0": "{carbon.typography.body02.line-height}", + "cds-g10": "{carbon.typography.body02.line-height}", + "cds-g90": "{carbon.typography.body02.line-height}", + "cds-g100": "{carbon.typography.body02.line-height}" + }, "key": "{typography.body-300.line-height}" }, "name": "token-typography-body-300-line-height", @@ -8037,10 +9086,24 @@ { "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-200.font-family}" }, "name": "token-typography-body-200-font-family", @@ -8059,11 +9122,25 @@ "$value": "0.875rem", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "14", + "$value": "{carbon.typography.body01.font-size}", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "{carbon.typography.body01.font-size}", + "cds-g10": "{carbon.typography.body01.font-size}", + "cds-g90": "{carbon.typography.body01.font-size}", + "cds-g100": "{carbon.typography.body01.font-size}" + }, "key": "{typography.body-200.font-size}" }, "name": "token-typography-body-200-font-size", @@ -8079,12 +9156,26 @@ { "key": "{typography.body-200.line-height}", "$type": "number", - "$value": 1.4286, + "$value": 1.42857, "comment": "20px", + "$modes": { + "hds": 1.4286, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.4286, + "$value": "{carbon.typography.body01.line-height}", "comment": "20px", + "$modes": { + "hds": 1.4286, + "cds-g0": "{carbon.typography.body01.line-height}", + "cds-g10": "{carbon.typography.body01.line-height}", + "cds-g90": "{carbon.typography.body01.line-height}", + "cds-g100": "{carbon.typography.body01.line-height}" + }, "key": "{typography.body-200.line-height}" }, "name": "token-typography-body-200-line-height", @@ -8100,10 +9191,24 @@ { "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", + "$value": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "$modes": { + "hds": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{carbon.typography.font-family.sans}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-100.font-family}" }, "name": "token-typography-body-100-font-family", @@ -8119,14 +9224,28 @@ { "key": "{typography.body-100.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "0.875rem", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "13", + "$value": "{carbon.typography.bodyCompact01.font-size}", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.bodyCompact01.font-size}", + "cds-g10": "{carbon.typography.bodyCompact01.font-size}", + "cds-g90": "{carbon.typography.bodyCompact01.font-size}", + "cds-g100": "{carbon.typography.bodyCompact01.font-size}" + }, "key": "{typography.body-100.font-size}" }, "name": "token-typography-body-100-font-size", @@ -8142,12 +9261,26 @@ { "key": "{typography.body-100.line-height}", "$type": "number", - "$value": 1.3846, + "$value": 1.28572, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, "original": { "$type": "number", - "$value": 1.3846, + "$value": "{carbon.typography.bodyCompact01.line-height}", "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": "{carbon.typography.bodyCompact01.line-height}", + "cds-g10": "{carbon.typography.bodyCompact01.line-height}", + "cds-g90": "{carbon.typography.bodyCompact01.line-height}", + "cds-g100": "{carbon.typography.bodyCompact01.line-height}" + }, "key": "{typography.body-100.line-height}" }, "name": "token-typography-body-100-line-height", @@ -8161,75 +9294,131 @@ ] }, { - "key": "{typography.code-100.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", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.code}", - "key": "{typography.code-100.font-family}" + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-300.font-family}" }, - "name": "token-typography-code-100-font-family", + "name": "token-typography-code-300-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "font-family" ] }, { - "key": "{typography.code-100.font-size}", + "key": "{typography.code-300.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "0.875rem", "unit": "px", - "comment": "13px/0.8125rem", + "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "13", + "$value": "{carbon.typography.code02.font-size}", "unit": "px", - "comment": "13px/0.8125rem", - "key": "{typography.code-100.font-size}" + "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-300.font-size}" }, - "name": "token-typography-code-100-font-size", + "name": "token-typography-code-300-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "font-size" ] }, { - "key": "{typography.code-100.line-height}", + "key": "{typography.code-300.line-height}", "$type": "number", - "$value": 1.23, - "comment": "16px", + "$value": 1.42857, + "comment": "20px", + "$modes": { + "hds": 1.25, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.23, - "comment": "16px", - "key": "{typography.code-100.line-height}" + "$value": "{carbon.typography.code02.line-height}", + "comment": "20px", + "$modes": { + "hds": 1.25, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-300.line-height}" }, - "name": "token-typography-code-100-line-height", + "name": "token-typography-code-300-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "line-height" ] }, { "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", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.code}", + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, "key": "{typography.code-200.font-family}" }, "name": "token-typography-code-200-font-family", @@ -8248,11 +9437,25 @@ "$value": "0.875rem", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "14", + "$value": "{carbon.typography.code02.font-size}", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, "key": "{typography.code-200.font-size}" }, "name": "token-typography-code-200-font-size", @@ -8268,12 +9471,26 @@ { "key": "{typography.code-200.line-height}", "$type": "number", - "$value": 1.125, + "$value": 1.42857, "comment": "18px", + "$modes": { + "hds": 1.125, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.125, + "$value": "{carbon.typography.code02.line-height}", "comment": "18px", + "$modes": { + "hds": 1.125, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, "key": "{typography.code-200.line-height}" }, "name": "token-typography-code-200-line-height", @@ -8287,65 +9504,107 @@ ] }, { - "key": "{typography.code-300.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", + "$value": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "$modes": { + "hds": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.code}", - "key": "{typography.code-300.font-family}" + "$value": "{carbon.typography.font-family.mono}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-100.font-family}" }, - "name": "token-typography-code-300-font-family", + "name": "token-typography-code-100-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "font-family" ] }, { - "key": "{typography.code-300.font-size}", + "key": "{typography.code-100.font-size}", "$type": "font-size", - "$value": "1rem", + "$value": "0.875rem", "unit": "px", - "comment": "16px/1rem", + "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "16", + "$value": "{carbon.typography.code02.font-size}", "unit": "px", - "comment": "16px/1rem", - "key": "{typography.code-300.font-size}" + "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-100.font-size}" }, - "name": "token-typography-code-300-font-size", + "name": "token-typography-code-100-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "font-size" ] }, { - "key": "{typography.code-300.line-height}", + "key": "{typography.code-100.line-height}", "$type": "number", - "$value": 1.25, - "comment": "20px", + "$value": 1.33333, + "comment": "16px", + "$modes": { + "hds": 1.23, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, "original": { "$type": "number", - "$value": 1.25, - "comment": "20px", - "key": "{typography.code-300.line-height}" + "$value": "{carbon.typography.code01.line-height}", + "comment": "16px", + "$modes": { + "hds": 1.23, + "cds-g0": "{carbon.typography.code01.line-height}", + "cds-g10": "{carbon.typography.code01.line-height}", + "cds-g90": "{carbon.typography.code01.line-height}", + "cds-g100": "{carbon.typography.code01.line-height}" + }, + "key": "{typography.code-100.line-height}" }, - "name": "token-typography-code-300-line-height", + "name": "token-typography-code-100-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "line-height" ] } diff --git a/packages/tokens/dist/docs/products/themed-tokens/hds.json b/packages/tokens/dist/docs/products/themed-tokens/hds.json index b22d4ea52ba..fe3eab5c5b4 100644 --- a/packages/tokens/dist/docs/products/themed-tokens/hds.json +++ b/packages/tokens/dist/docs/products/themed-tokens/hds.json @@ -990,10 +990,24 @@ "$type": "color", "$value": "#656a7633", "group": "semantic", + "$modes": { + "hds": "#656a7633", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, "original": { "$type": "color", "$value": "{color.palette.alpha-200}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-200}", + "cds-g0": "{carbon.themes.white.borderSubtle03}", + "cds-g10": "{carbon.themes.g10.borderSubtle03}", + "cds-g90": "{carbon.themes.g90.borderSubtle03}", + "cds-g100": "{carbon.themes.g100.borderSubtle03}" + }, "key": "{color.border.primary}" }, "name": "token-color-border-primary", @@ -1011,10 +1025,24 @@ "$type": "color", "$value": "#656a761a", "group": "semantic", + "$modes": { + "hds": "#656a761a", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, "original": { "$type": "color", "$value": "{color.palette.alpha-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-100}", + "cds-g0": "{carbon.themes.white.borderSubtle00}", + "cds-g10": "{carbon.themes.g10.borderSubtle00}", + "cds-g90": "{carbon.themes.g90.borderSubtle00}", + "cds-g100": "{carbon.themes.g100.borderSubtle00}" + }, "key": "{color.border.faint}" }, "name": "token-color-border-faint", @@ -1032,10 +1060,24 @@ "$type": "color", "$value": "#3b3d4566", "group": "semantic", + "$modes": { + "hds": "#3b3d4566", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, "original": { "$type": "color", "$value": "{color.palette.alpha-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-300}", + "cds-g0": "{carbon.themes.white.borderSubtle01}", + "cds-g10": "{carbon.themes.g10.borderSubtle01}", + "cds-g90": "{carbon.themes.g90.borderSubtle01}", + "cds-g100": "{carbon.themes.g100.borderSubtle01}" + }, "key": "{color.border.strong}" }, "name": "token-color-border-strong", @@ -1053,10 +1095,24 @@ "$type": "color", "$value": "#cce3fe", "group": "semantic", + "$modes": { + "hds": "#cce3fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, "original": { "$type": "color", "$value": "{color.palette.blue-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-100}", + "cds-g0": "{carbon.color.blue.60}", + "cds-g10": "{carbon.color.blue.60}", + "cds-g90": "{carbon.color.blue.50}", + "cds-g100": "{carbon.color.blue.50}" + }, "key": "{color.border.action}" }, "name": "token-color-border-action", @@ -1074,10 +1130,24 @@ "$type": "color", "$value": "#ead2fe", "group": "semantic", + "$modes": { + "hds": "#ead2fe", + "cds-g0": "#be95ff", + "cds-g10": "#be95ff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, "original": { "$type": "color", "$value": "{color.palette.purple-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-100}", + "cds-g0": "{carbon.color.purple.40}", + "cds-g10": "{carbon.color.purple.40}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, "key": "{color.border.highlight}" }, "name": "token-color-border-highlight", @@ -1095,10 +1165,24 @@ "$type": "color", "$value": "#cceeda", "group": "semantic", + "$modes": { + "hds": "#cceeda", + "cds-g0": "#42be65", + "cds-g10": "#42be65", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, "original": { "$type": "color", "$value": "{color.palette.green-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-100}", + "cds-g0": "{carbon.color.green.40}", + "cds-g10": "{carbon.color.green.40}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, "key": "{color.border.success}" }, "name": "token-color-border-success", @@ -1116,10 +1200,24 @@ "$type": "color", "$value": "#fbeabf", "group": "semantic", + "$modes": { + "hds": "#fbeabf", + "cds-g0": "#ff832b", + "cds-g10": "#ff832b", + "cds-g90": "#eb6200", + "cds-g100": "#eb6200" + }, "original": { "$type": "color", "$value": "{color.palette.amber-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.orange.40}", + "cds-g10": "{carbon.color.orange.40}", + "cds-g90": "{carbon.color.orange.50}", + "cds-g100": "{carbon.color.orange.50}" + }, "key": "{color.border.warning}" }, "name": "token-color-border-warning", @@ -1137,10 +1235,24 @@ "$type": "color", "$value": "#fbd4d4", "group": "semantic", + "$modes": { + "hds": "#fbd4d4", + "cds-g0": "#ff8389", + "cds-g10": "#ff8389", + "cds-g90": "#fa4d56", + "cds-g100": "#fa4d56" + }, "original": { "$type": "color", "$value": "{color.palette.red-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-100}", + "cds-g0": "{carbon.color.red.40}", + "cds-g10": "{carbon.color.red.40}", + "cds-g90": "{carbon.color.red.50}", + "cds-g100": "{carbon.color.red.50}" + }, "key": "{color.border.critical}" }, "name": "token-color-border-critical", @@ -1158,10 +1270,24 @@ "$type": "color", "$value": "#0c56e9", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", "$value": "{color.palette.blue-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, "key": "{color.focus.action.internal}" }, "name": "token-color-focus-action-internal", @@ -1181,11 +1307,25 @@ "$value": "#5990ff", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, "original": { "$type": "color", "$value": "#5990ff", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, "key": "{color.focus.action.external}" }, "name": "token-color-focus-action-external", @@ -1202,12 +1342,26 @@ { "key": "{color.focus.critical.internal}", "$type": "color", - "$value": "#c00005", + "$value": "#0c56e9", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.red-300}", + "$value": "{color.palette.blue-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, "key": "{color.focus.critical.internal}" }, "name": "token-color-focus-critical-internal", @@ -1224,14 +1378,28 @@ { "key": "{color.focus.critical.external}", "$type": "color", - "$value": "#dd7578", + "$value": "#5990ff", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, "original": { "$type": "color", - "$value": "#dd7578", + "$value": "#5990ff", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, "key": "{color.focus.critical.external}" }, "name": "token-color-focus-critical-external", @@ -1250,10 +1418,24 @@ "$type": "color", "$value": "#0c0c0e", "group": "semantic", + "$modes": { + "hds": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-700}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, "key": "{color.foreground.strong}" }, "name": "token-color-foreground-strong", @@ -1269,10 +1451,10 @@ { "key": "{color.foreground.primary}", "$type": "color", - "$value": "#ffffff", + "$value": "#3b3d45", "group": "semantic", "$modes": { - "hds": "#ffffff", + "hds": "#3b3d45", "cds-g0": "#161616", "cds-g10": "#161616", "cds-g90": "#f4f4f4", @@ -1280,10 +1462,10 @@ }, "original": { "$type": "color", - "$value": "#ffffff", + "$value": "{color.palette.neutral-600}", "group": "semantic", "$modes": { - "hds": "#ffffff", + "hds": "{color.palette.neutral-600}", "cds-g0": "{carbon.themes.white.textPrimary}", "cds-g10": "{carbon.themes.g10.textPrimary}", "cds-g90": "{carbon.themes.g90.textPrimary}", @@ -1306,10 +1488,24 @@ "$type": "color", "$value": "#656a76", "group": "semantic", + "$modes": { + "hds": "#656a76", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-500}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-500}", + "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.faint}" }, "name": "token-color-foreground-faint", @@ -1325,12 +1521,26 @@ { "key": "{color.foreground.high-contrast}", "$type": "color", - "$value": "#ffffff", + "$value": "#8c909c", "group": "semantic", + "$modes": { + "hds": "#8c909c", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-0}", + "$value": "{color.palette.neutral-400}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, "key": "{color.foreground.high-contrast}" }, "name": "token-color-foreground-high-contrast", @@ -1348,10 +1558,24 @@ "$type": "color", "$value": "#8c909c", "group": "semantic", + "$modes": { + "hds": "#8c909c", + "cds-g0": "rgba(22, 22, 22, 0.25)", + "cds-g10": "rgba(22, 22, 22, 0.25)", + "cds-g90": "rgba(244, 244, 244, 0.25)", + "cds-g100": "rgba(244, 244, 244, 0.25)" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-400}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textDisabled}", + "cds-g10": "{carbon.themes.g10.textDisabled}", + "cds-g90": "{carbon.themes.g90.textDisabled}", + "cds-g100": "{carbon.themes.g100.textDisabled}" + }, "key": "{color.foreground.disabled}" }, "name": "token-color-foreground-disabled", @@ -1369,10 +1593,24 @@ "$type": "color", "$value": "#1060ff", "group": "semantic", + "$modes": { + "hds": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#78a9ff", + "cds-g100": "#78a9ff" + }, "original": { "$type": "color", "$value": "{color.palette.blue-200}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.white.linkPrimary}", + "cds-g10": "{carbon.themes.g10.linkPrimary}", + "cds-g90": "{carbon.themes.g90.linkPrimary}", + "cds-g100": "{carbon.themes.g100.linkPrimary}" + }, "key": "{color.foreground.action}" }, "name": "token-color-foreground-action", @@ -1390,10 +1628,24 @@ "$type": "color", "$value": "#0c56e9", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, "original": { "$type": "color", "$value": "{color.palette.blue-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, "key": "{color.foreground.action-hover}" }, "name": "token-color-foreground-action-hover", @@ -1411,10 +1663,24 @@ "$type": "color", "$value": "#0046d1", "group": "semantic", + "$modes": { + "hds": "#0046d1", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, "original": { "$type": "color", "$value": "{color.palette.blue-400}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, "key": "{color.foreground.action-active}" }, "name": "token-color-foreground-action-active", @@ -1432,10 +1698,24 @@ "$type": "color", "$value": "#a737ff", "group": "semantic", + "$modes": { + "hds": "#a737ff", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, "original": { "$type": "color", "$value": "{color.palette.purple-200}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, "key": "{color.foreground.highlight}" }, "name": "token-color-foreground-highlight", @@ -1453,10 +1733,24 @@ "$type": "color", "$value": "#911ced", "group": "semantic", + "$modes": { + "hds": "#911ced", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#d4bbff", + "cds-g100": "#d4bbff" + }, "original": { "$type": "color", "$value": "{color.palette.purple-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-300}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.30}", + "cds-g100": "{carbon.color.purple.30}" + }, "key": "{color.foreground.highlight-on-surface}" }, "name": "token-color-foreground-highlight-on-surface", @@ -1474,10 +1768,24 @@ "$type": "color", "$value": "#42215b", "group": "semantic", + "$modes": { + "hds": "#42215b", + "cds-g0": "#491d8b", + "cds-g10": "#491d8b", + "cds-g90": "#e8daff", + "cds-g100": "#d4bbff" + }, "original": { "$type": "color", "$value": "{color.palette.purple-500}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-500}", + "cds-g0": "{carbon.color.purple.80}", + "cds-g10": "{carbon.color.purple.80}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.30}" + }, "key": "{color.foreground.highlight-high-contrast}" }, "name": "token-color-foreground-highlight-high-contrast", @@ -1495,10 +1803,24 @@ "$type": "color", "$value": "#008a22", "group": "semantic", + "$modes": { + "hds": "#008a22", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#42be65", + "cds-g100": "#42be65" + }, "original": { "$type": "color", "$value": "{color.palette.green-200}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-200}", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.40}", + "cds-g100": "{carbon.color.green.40}" + }, "key": "{color.foreground.success}" }, "name": "token-color-foreground-success", @@ -1516,10 +1838,24 @@ "$type": "color", "$value": "#00781e", "group": "semantic", + "$modes": { + "hds": "#00781e", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#6fdc8c", + "cds-g100": "#6fdc8c" + }, "original": { "$type": "color", "$value": "{color.palette.green-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-300}", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.30}", + "cds-g100": "{carbon.color.green.30}" + }, "key": "{color.foreground.success-on-surface}" }, "name": "token-color-foreground-success-on-surface", @@ -1537,10 +1873,24 @@ "$type": "color", "$value": "#054220", "group": "semantic", + "$modes": { + "hds": "#054220", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, "original": { "$type": "color", "$value": "{color.palette.green-500}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-500}", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, "key": "{color.foreground.success-high-contrast}" }, "name": "token-color-foreground-success-high-contrast", @@ -1558,10 +1908,24 @@ "$type": "color", "$value": "#bb5a00", "group": "semantic", + "$modes": { + "hds": "#bb5a00", + "cds-g0": "#ba4e00", + "cds-g10": "#ba4e00", + "cds-g90": "#ff832b", + "cds-g100": "#ff832b" + }, "original": { "$type": "color", "$value": "{color.palette.amber-200}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.orange.60}", + "cds-g10": "{carbon.color.orange.60}", + "cds-g90": "{carbon.color.orange.40}", + "cds-g100": "{carbon.color.orange.40}" + }, "key": "{color.foreground.warning}" }, "name": "token-color-foreground-warning", @@ -1579,10 +1943,24 @@ "$type": "color", "$value": "#9e4b00", "group": "semantic", + "$modes": { + "hds": "#9e4b00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffb784", + "cds-g100": "#ffb784" + }, "original": { "$type": "color", "$value": "{color.palette.amber-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-300}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.30}", + "cds-g100": "{carbon.color.orange.30}" + }, "key": "{color.foreground.warning-on-surface}" }, "name": "token-color-foreground-warning-on-surface", @@ -1600,10 +1978,24 @@ "$type": "color", "$value": "#542800", "group": "semantic", + "$modes": { + "hds": "#542800", + "cds-g0": "#5e2900", + "cds-g10": "#5e2900", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, "original": { "$type": "color", "$value": "{color.palette.amber-500}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-500}", + "cds-g0": "{carbon.color.orange.80}", + "cds-g10": "{carbon.color.orange.80}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, "key": "{color.foreground.warning-high-contrast}" }, "name": "token-color-foreground-warning-high-contrast", @@ -1621,10 +2013,24 @@ "$type": "color", "$value": "#e52228", "group": "semantic", + "$modes": { + "hds": "#e52228", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#ff8389", + "cds-g100": "#ff8389" + }, "original": { "$type": "color", "$value": "{color.palette.red-200}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-200}", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.40}", + "cds-g100": "{carbon.color.red.40}" + }, "key": "{color.foreground.critical}" }, "name": "token-color-foreground-critical", @@ -1642,10 +2048,24 @@ "$type": "color", "$value": "#c00005", "group": "semantic", + "$modes": { + "hds": "#c00005", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffb3b8", + "cds-g100": "#ffb3b8" + }, "original": { "$type": "color", "$value": "{color.palette.red-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-300}", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.30}", + "cds-g100": "{carbon.color.red.30}" + }, "key": "{color.foreground.critical-on-surface}" }, "name": "token-color-foreground-critical-on-surface", @@ -1663,10 +2083,24 @@ "$type": "color", "$value": "#51130a", "group": "semantic", + "$modes": { + "hds": "#51130a", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, "original": { "$type": "color", "$value": "{color.palette.red-500}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-500}", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, "key": "{color.foreground.critical-high-contrast}" }, "name": "token-color-foreground-critical-high-contrast", @@ -1684,10 +2118,24 @@ "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-0}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, "key": "{color.page.primary}" }, "name": "token-color-page-primary", @@ -1703,12 +2151,26 @@ { "key": "{color.page.faint}", "$type": "color", - "$value": "#fafafa", + "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, "original": { "$type": "color", - "$value": "{color.palette.neutral-50}", + "$value": "{color.palette.neutral-0}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, "key": "{color.page.faint}" }, "name": "token-color-page-faint", @@ -1726,10 +2188,24 @@ "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-0}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.primary}" }, "name": "token-color-surface-primary", @@ -1747,10 +2223,24 @@ "$type": "color", "$value": "#fafafa", "group": "semantic", + "$modes": { + "hds": "#fafafa", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.faint}" }, "name": "token-color-surface-faint", @@ -1768,10 +2258,24 @@ "$type": "color", "$value": "#f1f2f3", "group": "semantic", + "$modes": { + "hds": "#f1f2f3", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.strong}" }, "name": "token-color-surface-strong", @@ -1789,10 +2293,24 @@ "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-0}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.interactive}" }, "name": "token-color-surface-interactive", @@ -1810,10 +2328,24 @@ "$type": "color", "$value": "#f1f2f3", "group": "semantic", + "$modes": { + "hds": "#f1f2f3", + "cds-g0": "#e8e8e8", + "cds-g10": "#e8e8e8", + "cds-g90": "#474747", + "cds-g100": "#333333" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerHover01}", + "cds-g10": "{carbon.themes.g10.layerHover01}", + "cds-g90": "{carbon.themes.g90.layerHover01}", + "cds-g100": "{carbon.themes.g100.layerHover01}" + }, "key": "{color.surface.interactive-hover}" }, "name": "token-color-surface-interactive-hover", @@ -1831,10 +2363,24 @@ "$type": "color", "$value": "#dedfe3", "group": "semantic", + "$modes": { + "hds": "#dedfe3", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-200}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.white.layerActive01}", + "cds-g10": "{carbon.themes.g10.layerActive01}", + "cds-g90": "{carbon.themes.g90.layerActive01}", + "cds-g100": "{carbon.themes.g100.layerActive01}" + }, "key": "{color.surface.interactive-active}" }, "name": "token-color-surface-interactive-active", @@ -1852,10 +2398,24 @@ "$type": "color", "$value": "#fafafa", "group": "semantic", + "$modes": { + "hds": "#fafafa", + "cds-g0": "#FF0000", + "cds-g10": "#FF0000", + "cds-g90": "#FF0000", + "cds-g100": "#FF0000" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-50}", + "cds-g0": "#FF0000", + "cds-g10": "#FF0000", + "cds-g90": "#FF0000", + "cds-g100": "#FF0000" + }, "key": "{color.surface.interactive-disabled}" }, "name": "token-color-surface-interactive-disabled", @@ -1873,10 +2433,24 @@ "$type": "color", "$value": "#f2f8ff", "group": "semantic", + "$modes": { + "hds": "#f2f8ff", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, "original": { "$type": "color", "$value": "{color.palette.blue-50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-50}", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.70}", + "cds-g100": "{carbon.color.blue.70}" + }, "key": "{color.surface.action}" }, "name": "token-color-surface-action", @@ -1894,10 +2468,24 @@ "$type": "color", "$value": "#f9f2ff", "group": "semantic", + "$modes": { + "hds": "#f9f2ff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, "original": { "$type": "color", "$value": "{color.palette.purple-50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-50}", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, "key": "{color.surface.highlight}" }, "name": "token-color-surface-highlight", @@ -1915,10 +2503,24 @@ "$type": "color", "$value": "#f2fbf6", "group": "semantic", + "$modes": { + "hds": "#f2fbf6", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, "original": { "$type": "color", "$value": "{color.palette.green-50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-50}", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, "key": "{color.surface.success}" }, "name": "token-color-surface-success", @@ -1936,10 +2538,24 @@ "$type": "color", "$value": "#fff9e8", "group": "semantic", + "$modes": { + "hds": "#fff9e8", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, "original": { "$type": "color", "$value": "{color.palette.amber-50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-50}", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, "key": "{color.surface.warning}" }, "name": "token-color-surface-warning", @@ -1957,10 +2573,24 @@ "$type": "color", "$value": "#fff5f5", "group": "semantic", + "$modes": { + "hds": "#fff5f5", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, "original": { "$type": "color", "$value": "{color.palette.red-50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-50}", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, "key": "{color.surface.critical}" }, "name": "token-color-surface-critical", @@ -4127,7 +4757,7 @@ }, { "key": "{focus-ring.critical.box-shadow}", - "$value": "inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578", + "$value": "inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff", "original": { "$value": "{focus-ring.critical.internal-box-shadow}, {focus-ring.critical.external-box-shadow}", "key": "{focus-ring.critical.box-shadow}" @@ -5169,7 +5799,7 @@ { "key": "{form.control.checked.foreground-color}", "$type": "color", - "$value": "#ffffff", + "$value": "#8c909c", "group": "components", "original": { "$type": "color", @@ -5329,7 +5959,7 @@ { "key": "{form.control.readonly.foreground-color}", "$type": "color", - "$value": "#ffffff", + "$value": "#3b3d45", "group": "components", "original": { "$type": "color", @@ -7411,14 +8041,23 @@ "key": "{typography.font-stack.display}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.display.macOS}", - "{typography.font-stack.sans.display.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.display.emoji}" - ], + "$value": "{typography.font-stack.sans.display.combined}", + "$modes": { + "hds": "{typography.font-stack.sans.display.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.font-stack.display}" }, "name": "token-typography-font-stack-display", @@ -7435,14 +8074,23 @@ "key": "{typography.font-stack.text}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.text.macOS}", - "{typography.font-stack.sans.text.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.text.emoji}" - ], + "$value": "{typography.font-stack.sans.text.combined}", + "$modes": { + "hds": "{typography.font-stack.sans.text.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.font-stack.text}" }, "name": "token-typography-font-stack-text", @@ -7459,13 +8107,23 @@ "key": "{typography.font-stack.code}", "$type": "font-family", "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "hds": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.monospace.code.macOS}", - "{typography.font-stack.monospace.code.windows}", - "monospace" - ], + "$value": "{typography.font-stack.monospace.code.combined}", + "$modes": { + "hds": "{typography.font-stack.monospace.code.combined}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, "key": "{typography.font-stack.code}" }, "name": "token-typography-font-stack-code", @@ -7614,9 +8272,23 @@ "key": "{typography.display-500.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.display}", + "$modes": { + "hds": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-500.font-family}" }, "name": "token-typography-display-500-font-family", @@ -7635,11 +8307,25 @@ "$value": "1.875rem", "unit": "px", "comment": "30px/1.875rem", + "$modes": { + "hds": "30", + "cds-g0": "2rem", + "cds-g10": "2rem", + "cds-g90": "2rem", + "cds-g100": "2rem" + }, "original": { "$type": "font-size", "$value": "30", "unit": "px", "comment": "30px/1.875rem", + "$modes": { + "hds": "30", + "cds-g0": "{carbon.typography.heading05.font-size}", + "cds-g10": "{carbon.typography.heading05.font-size}", + "cds-g90": "{carbon.typography.heading05.font-size}", + "cds-g100": "{carbon.typography.heading05.font-size}" + }, "key": "{typography.display-500.font-size}" }, "name": "token-typography-display-500-font-size", @@ -7657,10 +8343,24 @@ "$type": "number", "$value": 1.2666, "comment": "38px", + "$modes": { + "hds": 1.2666, + "cds-g0": 1.25, + "cds-g10": 1.25, + "cds-g90": 1.25, + "cds-g100": 1.25 + }, "original": { "$type": "number", "$value": 1.2666, "comment": "38px", + "$modes": { + "hds": 1.2666, + "cds-g0": "{carbon.typography.heading05.line-height}", + "cds-g10": "{carbon.typography.heading05.line-height}", + "cds-g90": "{carbon.typography.heading05.line-height}", + "cds-g100": "{carbon.typography.heading05.line-height}" + }, "key": "{typography.display-500.line-height}" }, "name": "token-typography-display-500-line-height", @@ -7673,13 +8373,64 @@ "line-height" ] }, + { + "key": "{typography.display-500.letter-spacing}", + "$type": "letter-spacing", + "$value": "-0.5px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading05.letter-spacing}", + "cds-g10": "{carbon.typography.heading05.letter-spacing}", + "cds-g90": "{carbon.typography.heading05.letter-spacing}", + "cds-g100": "{carbon.typography.heading05.letter-spacing}" + }, + "key": "{typography.display-500.letter-spacing}" + }, + "name": "token-typography-display-500-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "letter-spacing" + ] + }, { "key": "{typography.display-400.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.display}", + "$modes": { + "hds": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-400.font-family}" }, "name": "token-typography-display-400-font-family", @@ -7698,11 +8449,25 @@ "$value": "1.5rem", "unit": "px", "comment": "24px/1.5rem", + "$modes": { + "hds": "24", + "cds-g0": "1.75rem", + "cds-g10": "1.75rem", + "cds-g90": "1.75rem", + "cds-g100": "1.75rem" + }, "original": { "$type": "font-size", "$value": "24", "unit": "px", "comment": "24px/1.5rem", + "$modes": { + "hds": "24", + "cds-g0": "{carbon.typography.heading04.font-size}", + "cds-g10": "{carbon.typography.heading04.font-size}", + "cds-g90": "{carbon.typography.heading04.font-size}", + "cds-g100": "{carbon.typography.heading04.font-size}" + }, "key": "{typography.display-400.font-size}" }, "name": "token-typography-display-400-font-size", @@ -7720,10 +8485,24 @@ "$type": "number", "$value": 1.3333, "comment": "32px", + "$modes": { + "hds": 1.3333, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, "original": { "$type": "number", "$value": 1.3333, "comment": "32px", + "$modes": { + "hds": 1.3333, + "cds-g0": "{carbon.typography.heading04.line-height}", + "cds-g10": "{carbon.typography.heading04.line-height}", + "cds-g90": "{carbon.typography.heading04.line-height}", + "cds-g100": "{carbon.typography.heading04.line-height}" + }, "key": "{typography.display-400.line-height}" }, "name": "token-typography-display-400-line-height", @@ -7736,13 +8515,64 @@ "line-height" ] }, + { + "key": "{typography.display-400.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": 0, + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "{carbon.typography.heading04.letter-spacing}", + "cds-g10": "{carbon.typography.heading04.letter-spacing}", + "cds-g90": "{carbon.typography.heading04.letter-spacing}", + "cds-g100": "{carbon.typography.heading04.letter-spacing}" + }, + "key": "{typography.display-400.letter-spacing}" + }, + "name": "token-typography-display-400-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "letter-spacing" + ] + }, { "key": "{typography.display-300.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.text}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-300.font-family}" }, "name": "token-typography-display-300-font-family", @@ -7761,11 +8591,25 @@ "$value": "1.125rem", "unit": "px", "comment": "18px/1.125rem", + "$modes": { + "hds": "18", + "cds-g0": "1.25rem", + "cds-g10": "1.25rem", + "cds-g90": "1.25rem", + "cds-g100": "1.25rem" + }, "original": { "$type": "font-size", "$value": "18", "unit": "px", "comment": "18px/1.125rem", + "$modes": { + "hds": "18", + "cds-g0": "{carbon.typography.heading03.font-size}", + "cds-g10": "{carbon.typography.heading03.font-size}", + "cds-g90": "{carbon.typography.heading03.font-size}", + "cds-g100": "{carbon.typography.heading03.font-size}" + }, "key": "{typography.display-300.font-size}" }, "name": "token-typography-display-300-font-size", @@ -7783,10 +8627,24 @@ "$type": "number", "$value": 1.3333, "comment": "24px", + "$modes": { + "hds": 1.3333, + "cds-g0": 1.4, + "cds-g10": 1.4, + "cds-g90": 1.4, + "cds-g100": 1.4 + }, "original": { "$type": "number", "$value": 1.3333, "comment": "24px", + "$modes": { + "hds": 1.3333, + "cds-g0": "{carbon.typography.heading03.line-height}", + "cds-g10": "{carbon.typography.heading03.line-height}", + "cds-g90": "{carbon.typography.heading03.line-height}", + "cds-g100": "{carbon.typography.heading03.line-height}" + }, "key": "{typography.display-300.line-height}" }, "name": "token-typography-display-300-line-height", @@ -7805,11 +8663,25 @@ "$value": "-0.5px", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, "original": { "$type": "letter-spacing", "$value": -0.5, "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading03.letter-spacing}", + "cds-g10": "{carbon.typography.heading03.letter-spacing}", + "cds-g90": "{carbon.typography.heading03.letter-spacing}", + "cds-g100": "{carbon.typography.heading03.letter-spacing}" + }, "key": "{typography.display-300.letter-spacing}" }, "name": "token-typography-display-300-letter-spacing", @@ -7826,9 +8698,23 @@ "key": "{typography.display-200.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$value": "{typography.font-stack.text}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-200.font-family}" }, "name": "token-typography-display-200-font-family", @@ -7847,11 +8733,25 @@ "$value": "1rem", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, "original": { "$type": "font-size", "$value": "16", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.heading02.font-size}", + "cds-g10": "{carbon.typography.heading02.font-size}", + "cds-g90": "{carbon.typography.heading02.font-size}", + "cds-g100": "{carbon.typography.heading02.font-size}" + }, "key": "{typography.display-200.font-size}" }, "name": "token-typography-display-200-font-size", @@ -7869,10 +8769,24 @@ "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "hds": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, "original": { "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "hds": 1.5, + "cds-g0": "{carbon.typography.heading02.line-height}", + "cds-g10": "{carbon.typography.heading02.line-height}", + "cds-g90": "{carbon.typography.heading02.line-height}", + "cds-g100": "{carbon.typography.heading02.line-height}" + }, "key": "{typography.display-200.line-height}" }, "name": "token-typography-display-200-line-height", @@ -7891,11 +8805,25 @@ "$value": "-0.5px", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, "original": { "$type": "letter-spacing", "$value": -0.5, "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading02.letter-spacing}", + "cds-g10": "{carbon.typography.heading02.letter-spacing}", + "cds-g90": "{carbon.typography.heading02.letter-spacing}", + "cds-g100": "{carbon.typography.heading02.letter-spacing}" + }, "key": "{typography.display-200.letter-spacing}" }, "name": "token-typography-display-200-letter-spacing", @@ -7912,9 +8840,23 @@ "key": "{typography.display-100.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.text}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-100.font-family}" }, "name": "token-typography-display-100-font-family", @@ -7933,11 +8875,25 @@ "$value": "0.8125rem", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", "$value": "13", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.heading01.font-size}", + "cds-g10": "{carbon.typography.heading01.font-size}", + "cds-g90": "{carbon.typography.heading01.font-size}", + "cds-g100": "{carbon.typography.heading01.font-size}" + }, "key": "{typography.display-100.font-size}" }, "name": "token-typography-display-100-font-size", @@ -7955,10 +8911,24 @@ "$type": "number", "$value": 1.3846, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", "$value": 1.3846, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": "{carbon.typography.heading01.line-height}", + "cds-g10": "{carbon.typography.heading01.line-height}", + "cds-g90": "{carbon.typography.heading01.line-height}", + "cds-g100": "{carbon.typography.heading01.line-height}" + }, "key": "{typography.display-100.line-height}" }, "name": "token-typography-display-100-line-height", @@ -7971,13 +8941,64 @@ "line-height" ] }, + { + "key": "{typography.display-100.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "0.16px", + "cds-g10": "0.16px", + "cds-g90": "0.16px", + "cds-g100": "0.16px" + }, + "original": { + "$type": "letter-spacing", + "$value": 0, + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "{carbon.typography.heading01.letter-spacing}", + "cds-g10": "{carbon.typography.heading01.letter-spacing}", + "cds-g90": "{carbon.typography.heading01.letter-spacing}", + "cds-g100": "{carbon.typography.heading01.letter-spacing}" + }, + "key": "{typography.display-100.letter-spacing}" + }, + "name": "token-typography-display-100-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "letter-spacing" + ] + }, { "key": "{typography.body-300.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.text}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-300.font-family}" }, "name": "token-typography-body-300-font-family", @@ -7996,11 +9017,25 @@ "$value": "1rem", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, "original": { "$type": "font-size", "$value": "16", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.body02.font-size}", + "cds-g10": "{carbon.typography.body02.font-size}", + "cds-g90": "{carbon.typography.body02.font-size}", + "cds-g100": "{carbon.typography.body02.font-size}" + }, "key": "{typography.body-300.font-size}" }, "name": "token-typography-body-300-font-size", @@ -8016,12 +9051,26 @@ { "key": "{typography.body-300.line-height}", "$type": "number", - "$value": 1.5, + "$value": 1.4286, "comment": "24px", + "$modes": { + "hds": 1.4286, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, "original": { "$type": "number", - "$value": 1.5, + "$value": 1.4286, "comment": "24px", + "$modes": { + "hds": 1.4286, + "cds-g0": "{carbon.typography.body02.line-height}", + "cds-g10": "{carbon.typography.body02.line-height}", + "cds-g90": "{carbon.typography.body02.line-height}", + "cds-g100": "{carbon.typography.body02.line-height}" + }, "key": "{typography.body-300.line-height}" }, "name": "token-typography-body-300-line-height", @@ -8038,9 +9087,23 @@ "key": "{typography.body-200.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.text}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-200.font-family}" }, "name": "token-typography-body-200-font-family", @@ -8059,11 +9122,25 @@ "$value": "0.875rem", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", "$value": "14", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "{carbon.typography.body01.font-size}", + "cds-g10": "{carbon.typography.body01.font-size}", + "cds-g90": "{carbon.typography.body01.font-size}", + "cds-g100": "{carbon.typography.body01.font-size}" + }, "key": "{typography.body-200.font-size}" }, "name": "token-typography-body-200-font-size", @@ -8081,10 +9158,24 @@ "$type": "number", "$value": 1.4286, "comment": "20px", + "$modes": { + "hds": 1.4286, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", "$value": 1.4286, "comment": "20px", + "$modes": { + "hds": 1.4286, + "cds-g0": "{carbon.typography.body01.line-height}", + "cds-g10": "{carbon.typography.body01.line-height}", + "cds-g90": "{carbon.typography.body01.line-height}", + "cds-g100": "{carbon.typography.body01.line-height}" + }, "key": "{typography.body-200.line-height}" }, "name": "token-typography-body-200-line-height", @@ -8101,9 +9192,23 @@ "key": "{typography.body-100.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.text}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-100.font-family}" }, "name": "token-typography-body-100-font-family", @@ -8122,11 +9227,25 @@ "$value": "0.8125rem", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", "$value": "13", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.bodyCompact01.font-size}", + "cds-g10": "{carbon.typography.bodyCompact01.font-size}", + "cds-g90": "{carbon.typography.bodyCompact01.font-size}", + "cds-g100": "{carbon.typography.bodyCompact01.font-size}" + }, "key": "{typography.body-100.font-size}" }, "name": "token-typography-body-100-font-size", @@ -8144,10 +9263,24 @@ "$type": "number", "$value": 1.3846, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, "original": { "$type": "number", "$value": 1.3846, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": "{carbon.typography.bodyCompact01.line-height}", + "cds-g10": "{carbon.typography.bodyCompact01.line-height}", + "cds-g90": "{carbon.typography.bodyCompact01.line-height}", + "cds-g100": "{carbon.typography.bodyCompact01.line-height}" + }, "key": "{typography.body-100.line-height}" }, "name": "token-typography-body-100-line-height", @@ -8161,65 +9294,107 @@ ] }, { - "key": "{typography.code-100.font-family}", + "key": "{typography.code-300.font-family}", "$type": "font-family", "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "hds": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.code}", - "key": "{typography.code-100.font-family}" + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-300.font-family}" }, - "name": "token-typography-code-100-font-family", + "name": "token-typography-code-300-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "font-family" ] }, { - "key": "{typography.code-100.font-size}", + "key": "{typography.code-300.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "1rem", "unit": "px", - "comment": "13px/0.8125rem", + "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "13", + "$value": "16", "unit": "px", - "comment": "13px/0.8125rem", - "key": "{typography.code-100.font-size}" + "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-300.font-size}" }, - "name": "token-typography-code-100-font-size", + "name": "token-typography-code-300-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "font-size" ] }, { - "key": "{typography.code-100.line-height}", + "key": "{typography.code-300.line-height}", "$type": "number", - "$value": 1.23, - "comment": "16px", + "$value": 1.25, + "comment": "20px", + "$modes": { + "hds": 1.25, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.23, - "comment": "16px", - "key": "{typography.code-100.line-height}" + "$value": 1.25, + "comment": "20px", + "$modes": { + "hds": 1.25, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-300.line-height}" }, - "name": "token-typography-code-100-line-height", + "name": "token-typography-code-300-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "line-height" ] }, @@ -8227,9 +9402,23 @@ "key": "{typography.code-200.font-family}", "$type": "font-family", "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "hds": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.code}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, "key": "{typography.code-200.font-family}" }, "name": "token-typography-code-200-font-family", @@ -8248,11 +9437,25 @@ "$value": "0.875rem", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", "$value": "14", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, "key": "{typography.code-200.font-size}" }, "name": "token-typography-code-200-font-size", @@ -8270,10 +9473,24 @@ "$type": "number", "$value": 1.125, "comment": "18px", + "$modes": { + "hds": 1.125, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", "$value": 1.125, "comment": "18px", + "$modes": { + "hds": 1.125, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, "key": "{typography.code-200.line-height}" }, "name": "token-typography-code-200-line-height", @@ -8287,65 +9504,107 @@ ] }, { - "key": "{typography.code-300.font-family}", + "key": "{typography.code-100.font-family}", "$type": "font-family", "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "hds": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.code}", - "key": "{typography.code-300.font-family}" + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-100.font-family}" }, - "name": "token-typography-code-300-font-family", + "name": "token-typography-code-100-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "font-family" ] }, { - "key": "{typography.code-300.font-size}", + "key": "{typography.code-100.font-size}", "$type": "font-size", - "$value": "1rem", + "$value": "0.8125rem", "unit": "px", - "comment": "16px/1rem", + "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "16", + "$value": "13", "unit": "px", - "comment": "16px/1rem", - "key": "{typography.code-300.font-size}" + "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-100.font-size}" }, - "name": "token-typography-code-300-font-size", + "name": "token-typography-code-100-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "font-size" ] }, { - "key": "{typography.code-300.line-height}", + "key": "{typography.code-100.line-height}", "$type": "number", - "$value": 1.25, - "comment": "20px", + "$value": 1.23, + "comment": "16px", + "$modes": { + "hds": 1.23, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, "original": { "$type": "number", - "$value": 1.25, - "comment": "20px", - "key": "{typography.code-300.line-height}" + "$value": 1.23, + "comment": "16px", + "$modes": { + "hds": 1.23, + "cds-g0": "{carbon.typography.code01.line-height}", + "cds-g10": "{carbon.typography.code01.line-height}", + "cds-g90": "{carbon.typography.code01.line-height}", + "cds-g100": "{carbon.typography.code01.line-height}" + }, + "key": "{typography.code-100.line-height}" }, - "name": "token-typography-code-300-line-height", + "name": "token-typography-code-100-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "line-height" ] } diff --git a/packages/tokens/dist/docs/products/tokens.json b/packages/tokens/dist/docs/products/tokens.json index 3295ee1ec3b..60f19ee2535 100644 --- a/packages/tokens/dist/docs/products/tokens.json +++ b/packages/tokens/dist/docs/products/tokens.json @@ -990,10 +990,24 @@ "$type": "color", "$value": "#656a7633", "group": "semantic", + "$modes": { + "hds": "#656a7633", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, "original": { "$type": "color", "$value": "{color.palette.alpha-200}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-200}", + "cds-g0": "{carbon.themes.white.borderSubtle03}", + "cds-g10": "{carbon.themes.g10.borderSubtle03}", + "cds-g90": "{carbon.themes.g90.borderSubtle03}", + "cds-g100": "{carbon.themes.g100.borderSubtle03}" + }, "key": "{color.border.primary}" }, "name": "token-color-border-primary", @@ -1011,10 +1025,24 @@ "$type": "color", "$value": "#656a761a", "group": "semantic", + "$modes": { + "hds": "#656a761a", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, "original": { "$type": "color", "$value": "{color.palette.alpha-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-100}", + "cds-g0": "{carbon.themes.white.borderSubtle00}", + "cds-g10": "{carbon.themes.g10.borderSubtle00}", + "cds-g90": "{carbon.themes.g90.borderSubtle00}", + "cds-g100": "{carbon.themes.g100.borderSubtle00}" + }, "key": "{color.border.faint}" }, "name": "token-color-border-faint", @@ -1032,10 +1060,24 @@ "$type": "color", "$value": "#3b3d4566", "group": "semantic", + "$modes": { + "hds": "#3b3d4566", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, "original": { "$type": "color", "$value": "{color.palette.alpha-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-300}", + "cds-g0": "{carbon.themes.white.borderSubtle01}", + "cds-g10": "{carbon.themes.g10.borderSubtle01}", + "cds-g90": "{carbon.themes.g90.borderSubtle01}", + "cds-g100": "{carbon.themes.g100.borderSubtle01}" + }, "key": "{color.border.strong}" }, "name": "token-color-border-strong", @@ -1053,10 +1095,24 @@ "$type": "color", "$value": "#cce3fe", "group": "semantic", + "$modes": { + "hds": "#cce3fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, "original": { "$type": "color", "$value": "{color.palette.blue-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-100}", + "cds-g0": "{carbon.color.blue.60}", + "cds-g10": "{carbon.color.blue.60}", + "cds-g90": "{carbon.color.blue.50}", + "cds-g100": "{carbon.color.blue.50}" + }, "key": "{color.border.action}" }, "name": "token-color-border-action", @@ -1074,10 +1130,24 @@ "$type": "color", "$value": "#ead2fe", "group": "semantic", + "$modes": { + "hds": "#ead2fe", + "cds-g0": "#be95ff", + "cds-g10": "#be95ff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, "original": { "$type": "color", "$value": "{color.palette.purple-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-100}", + "cds-g0": "{carbon.color.purple.40}", + "cds-g10": "{carbon.color.purple.40}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, "key": "{color.border.highlight}" }, "name": "token-color-border-highlight", @@ -1095,10 +1165,24 @@ "$type": "color", "$value": "#cceeda", "group": "semantic", + "$modes": { + "hds": "#cceeda", + "cds-g0": "#42be65", + "cds-g10": "#42be65", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, "original": { "$type": "color", "$value": "{color.palette.green-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-100}", + "cds-g0": "{carbon.color.green.40}", + "cds-g10": "{carbon.color.green.40}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, "key": "{color.border.success}" }, "name": "token-color-border-success", @@ -1116,10 +1200,24 @@ "$type": "color", "$value": "#fbeabf", "group": "semantic", + "$modes": { + "hds": "#fbeabf", + "cds-g0": "#ff832b", + "cds-g10": "#ff832b", + "cds-g90": "#eb6200", + "cds-g100": "#eb6200" + }, "original": { "$type": "color", "$value": "{color.palette.amber-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.orange.40}", + "cds-g10": "{carbon.color.orange.40}", + "cds-g90": "{carbon.color.orange.50}", + "cds-g100": "{carbon.color.orange.50}" + }, "key": "{color.border.warning}" }, "name": "token-color-border-warning", @@ -1137,10 +1235,24 @@ "$type": "color", "$value": "#fbd4d4", "group": "semantic", + "$modes": { + "hds": "#fbd4d4", + "cds-g0": "#ff8389", + "cds-g10": "#ff8389", + "cds-g90": "#fa4d56", + "cds-g100": "#fa4d56" + }, "original": { "$type": "color", "$value": "{color.palette.red-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-100}", + "cds-g0": "{carbon.color.red.40}", + "cds-g10": "{carbon.color.red.40}", + "cds-g90": "{carbon.color.red.50}", + "cds-g100": "{carbon.color.red.50}" + }, "key": "{color.border.critical}" }, "name": "token-color-border-critical", @@ -1158,10 +1270,24 @@ "$type": "color", "$value": "#0c56e9", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", "$value": "{color.palette.blue-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, "key": "{color.focus.action.internal}" }, "name": "token-color-focus-action-internal", @@ -1181,11 +1307,25 @@ "$value": "#5990ff", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, "original": { "$type": "color", "$value": "#5990ff", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, "key": "{color.focus.action.external}" }, "name": "token-color-focus-action-external", @@ -1204,10 +1344,24 @@ "$type": "color", "$value": "#c00005", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", "$value": "{color.palette.red-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, "key": "{color.focus.critical.internal}" }, "name": "token-color-focus-critical-internal", @@ -1227,11 +1381,25 @@ "$value": "#dd7578", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, "original": { "$type": "color", "$value": "#dd7578", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, "key": "{color.focus.critical.external}" }, "name": "token-color-focus-critical-external", @@ -1250,10 +1418,24 @@ "$type": "color", "$value": "#0c0c0e", "group": "semantic", + "$modes": { + "hds": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-700}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, "key": "{color.foreground.strong}" }, "name": "token-color-foreground-strong", @@ -1272,7 +1454,7 @@ "$value": "#3b3d45", "group": "semantic", "$modes": { - "hds": "#ffffff", + "hds": "#3b3d45", "cds-g0": "#161616", "cds-g10": "#161616", "cds-g90": "#f4f4f4", @@ -1283,7 +1465,7 @@ "$value": "{color.palette.neutral-600}", "group": "semantic", "$modes": { - "hds": "#ffffff", + "hds": "{color.palette.neutral-600}", "cds-g0": "{carbon.themes.white.textPrimary}", "cds-g10": "{carbon.themes.g10.textPrimary}", "cds-g90": "{carbon.themes.g90.textPrimary}", @@ -1306,10 +1488,24 @@ "$type": "color", "$value": "#656a76", "group": "semantic", + "$modes": { + "hds": "#656a76", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-500}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-500}", + "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.faint}" }, "name": "token-color-foreground-faint", @@ -1327,10 +1523,24 @@ "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#8c909c", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-0}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, "key": "{color.foreground.high-contrast}" }, "name": "token-color-foreground-high-contrast", @@ -1348,10 +1558,24 @@ "$type": "color", "$value": "#8c909c", "group": "semantic", + "$modes": { + "hds": "#8c909c", + "cds-g0": "rgba(22, 22, 22, 0.25)", + "cds-g10": "rgba(22, 22, 22, 0.25)", + "cds-g90": "rgba(244, 244, 244, 0.25)", + "cds-g100": "rgba(244, 244, 244, 0.25)" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-400}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textDisabled}", + "cds-g10": "{carbon.themes.g10.textDisabled}", + "cds-g90": "{carbon.themes.g90.textDisabled}", + "cds-g100": "{carbon.themes.g100.textDisabled}" + }, "key": "{color.foreground.disabled}" }, "name": "token-color-foreground-disabled", @@ -1369,10 +1593,24 @@ "$type": "color", "$value": "#1060ff", "group": "semantic", + "$modes": { + "hds": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#78a9ff", + "cds-g100": "#78a9ff" + }, "original": { "$type": "color", "$value": "{color.palette.blue-200}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.white.linkPrimary}", + "cds-g10": "{carbon.themes.g10.linkPrimary}", + "cds-g90": "{carbon.themes.g90.linkPrimary}", + "cds-g100": "{carbon.themes.g100.linkPrimary}" + }, "key": "{color.foreground.action}" }, "name": "token-color-foreground-action", @@ -1390,10 +1628,24 @@ "$type": "color", "$value": "#0c56e9", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, "original": { "$type": "color", "$value": "{color.palette.blue-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, "key": "{color.foreground.action-hover}" }, "name": "token-color-foreground-action-hover", @@ -1411,10 +1663,24 @@ "$type": "color", "$value": "#0046d1", "group": "semantic", + "$modes": { + "hds": "#0046d1", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, "original": { "$type": "color", "$value": "{color.palette.blue-400}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, "key": "{color.foreground.action-active}" }, "name": "token-color-foreground-action-active", @@ -1432,10 +1698,24 @@ "$type": "color", "$value": "#a737ff", "group": "semantic", + "$modes": { + "hds": "#a737ff", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, "original": { "$type": "color", "$value": "{color.palette.purple-200}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, "key": "{color.foreground.highlight}" }, "name": "token-color-foreground-highlight", @@ -1453,10 +1733,24 @@ "$type": "color", "$value": "#911ced", "group": "semantic", + "$modes": { + "hds": "#911ced", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#d4bbff", + "cds-g100": "#d4bbff" + }, "original": { "$type": "color", "$value": "{color.palette.purple-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-300}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.30}", + "cds-g100": "{carbon.color.purple.30}" + }, "key": "{color.foreground.highlight-on-surface}" }, "name": "token-color-foreground-highlight-on-surface", @@ -1474,10 +1768,24 @@ "$type": "color", "$value": "#42215b", "group": "semantic", + "$modes": { + "hds": "#42215b", + "cds-g0": "#491d8b", + "cds-g10": "#491d8b", + "cds-g90": "#e8daff", + "cds-g100": "#d4bbff" + }, "original": { "$type": "color", "$value": "{color.palette.purple-500}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-500}", + "cds-g0": "{carbon.color.purple.80}", + "cds-g10": "{carbon.color.purple.80}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.30}" + }, "key": "{color.foreground.highlight-high-contrast}" }, "name": "token-color-foreground-highlight-high-contrast", @@ -1495,10 +1803,24 @@ "$type": "color", "$value": "#008a22", "group": "semantic", + "$modes": { + "hds": "#008a22", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#42be65", + "cds-g100": "#42be65" + }, "original": { "$type": "color", "$value": "{color.palette.green-200}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-200}", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.40}", + "cds-g100": "{carbon.color.green.40}" + }, "key": "{color.foreground.success}" }, "name": "token-color-foreground-success", @@ -1516,10 +1838,24 @@ "$type": "color", "$value": "#00781e", "group": "semantic", + "$modes": { + "hds": "#00781e", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#6fdc8c", + "cds-g100": "#6fdc8c" + }, "original": { "$type": "color", "$value": "{color.palette.green-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-300}", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.30}", + "cds-g100": "{carbon.color.green.30}" + }, "key": "{color.foreground.success-on-surface}" }, "name": "token-color-foreground-success-on-surface", @@ -1537,10 +1873,24 @@ "$type": "color", "$value": "#054220", "group": "semantic", + "$modes": { + "hds": "#054220", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, "original": { "$type": "color", "$value": "{color.palette.green-500}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-500}", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, "key": "{color.foreground.success-high-contrast}" }, "name": "token-color-foreground-success-high-contrast", @@ -1558,10 +1908,24 @@ "$type": "color", "$value": "#bb5a00", "group": "semantic", + "$modes": { + "hds": "#bb5a00", + "cds-g0": "#ba4e00", + "cds-g10": "#ba4e00", + "cds-g90": "#ff832b", + "cds-g100": "#ff832b" + }, "original": { "$type": "color", "$value": "{color.palette.amber-200}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.orange.60}", + "cds-g10": "{carbon.color.orange.60}", + "cds-g90": "{carbon.color.orange.40}", + "cds-g100": "{carbon.color.orange.40}" + }, "key": "{color.foreground.warning}" }, "name": "token-color-foreground-warning", @@ -1579,10 +1943,24 @@ "$type": "color", "$value": "#9e4b00", "group": "semantic", + "$modes": { + "hds": "#9e4b00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffb784", + "cds-g100": "#ffb784" + }, "original": { "$type": "color", "$value": "{color.palette.amber-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-300}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.30}", + "cds-g100": "{carbon.color.orange.30}" + }, "key": "{color.foreground.warning-on-surface}" }, "name": "token-color-foreground-warning-on-surface", @@ -1600,10 +1978,24 @@ "$type": "color", "$value": "#542800", "group": "semantic", + "$modes": { + "hds": "#542800", + "cds-g0": "#5e2900", + "cds-g10": "#5e2900", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, "original": { "$type": "color", "$value": "{color.palette.amber-500}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-500}", + "cds-g0": "{carbon.color.orange.80}", + "cds-g10": "{carbon.color.orange.80}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, "key": "{color.foreground.warning-high-contrast}" }, "name": "token-color-foreground-warning-high-contrast", @@ -1621,10 +2013,24 @@ "$type": "color", "$value": "#e52228", "group": "semantic", + "$modes": { + "hds": "#e52228", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#ff8389", + "cds-g100": "#ff8389" + }, "original": { "$type": "color", "$value": "{color.palette.red-200}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-200}", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.40}", + "cds-g100": "{carbon.color.red.40}" + }, "key": "{color.foreground.critical}" }, "name": "token-color-foreground-critical", @@ -1642,10 +2048,24 @@ "$type": "color", "$value": "#c00005", "group": "semantic", + "$modes": { + "hds": "#c00005", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffb3b8", + "cds-g100": "#ffb3b8" + }, "original": { "$type": "color", "$value": "{color.palette.red-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-300}", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.30}", + "cds-g100": "{carbon.color.red.30}" + }, "key": "{color.foreground.critical-on-surface}" }, "name": "token-color-foreground-critical-on-surface", @@ -1663,10 +2083,24 @@ "$type": "color", "$value": "#51130a", "group": "semantic", + "$modes": { + "hds": "#51130a", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, "original": { "$type": "color", "$value": "{color.palette.red-500}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-500}", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, "key": "{color.foreground.critical-high-contrast}" }, "name": "token-color-foreground-critical-high-contrast", @@ -1684,10 +2118,24 @@ "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-0}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, "key": "{color.page.primary}" }, "name": "token-color-page-primary", @@ -1705,10 +2153,24 @@ "$type": "color", "$value": "#fafafa", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, "key": "{color.page.faint}" }, "name": "token-color-page-faint", @@ -1726,10 +2188,24 @@ "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-0}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.primary}" }, "name": "token-color-surface-primary", @@ -1747,10 +2223,24 @@ "$type": "color", "$value": "#fafafa", "group": "semantic", + "$modes": { + "hds": "#fafafa", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.faint}" }, "name": "token-color-surface-faint", @@ -1768,10 +2258,24 @@ "$type": "color", "$value": "#f1f2f3", "group": "semantic", + "$modes": { + "hds": "#f1f2f3", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.strong}" }, "name": "token-color-surface-strong", @@ -1789,10 +2293,24 @@ "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-0}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.interactive}" }, "name": "token-color-surface-interactive", @@ -1810,10 +2328,24 @@ "$type": "color", "$value": "#f1f2f3", "group": "semantic", + "$modes": { + "hds": "#f1f2f3", + "cds-g0": "#e8e8e8", + "cds-g10": "#e8e8e8", + "cds-g90": "#474747", + "cds-g100": "#333333" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerHover01}", + "cds-g10": "{carbon.themes.g10.layerHover01}", + "cds-g90": "{carbon.themes.g90.layerHover01}", + "cds-g100": "{carbon.themes.g100.layerHover01}" + }, "key": "{color.surface.interactive-hover}" }, "name": "token-color-surface-interactive-hover", @@ -1831,10 +2363,24 @@ "$type": "color", "$value": "#dedfe3", "group": "semantic", + "$modes": { + "hds": "#dedfe3", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-200}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.white.layerActive01}", + "cds-g10": "{carbon.themes.g10.layerActive01}", + "cds-g90": "{carbon.themes.g90.layerActive01}", + "cds-g100": "{carbon.themes.g100.layerActive01}" + }, "key": "{color.surface.interactive-active}" }, "name": "token-color-surface-interactive-active", @@ -1852,10 +2398,24 @@ "$type": "color", "$value": "#fafafa", "group": "semantic", + "$modes": { + "hds": "#fafafa", + "cds-g0": "#FF0000", + "cds-g10": "#FF0000", + "cds-g90": "#FF0000", + "cds-g100": "#FF0000" + }, "original": { "$type": "color", "$value": "{color.palette.neutral-50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-50}", + "cds-g0": "#FF0000", + "cds-g10": "#FF0000", + "cds-g90": "#FF0000", + "cds-g100": "#FF0000" + }, "key": "{color.surface.interactive-disabled}" }, "name": "token-color-surface-interactive-disabled", @@ -1873,10 +2433,24 @@ "$type": "color", "$value": "#f2f8ff", "group": "semantic", + "$modes": { + "hds": "#f2f8ff", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, "original": { "$type": "color", "$value": "{color.palette.blue-50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-50}", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.70}", + "cds-g100": "{carbon.color.blue.70}" + }, "key": "{color.surface.action}" }, "name": "token-color-surface-action", @@ -1894,10 +2468,24 @@ "$type": "color", "$value": "#f9f2ff", "group": "semantic", + "$modes": { + "hds": "#f9f2ff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, "original": { "$type": "color", "$value": "{color.palette.purple-50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-50}", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, "key": "{color.surface.highlight}" }, "name": "token-color-surface-highlight", @@ -1915,10 +2503,24 @@ "$type": "color", "$value": "#f2fbf6", "group": "semantic", + "$modes": { + "hds": "#f2fbf6", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, "original": { "$type": "color", "$value": "{color.palette.green-50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-50}", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, "key": "{color.surface.success}" }, "name": "token-color-surface-success", @@ -1936,10 +2538,24 @@ "$type": "color", "$value": "#fff9e8", "group": "semantic", + "$modes": { + "hds": "#fff9e8", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, "original": { "$type": "color", "$value": "{color.palette.amber-50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-50}", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, "key": "{color.surface.warning}" }, "name": "token-color-surface-warning", @@ -1957,10 +2573,24 @@ "$type": "color", "$value": "#fff5f5", "group": "semantic", + "$modes": { + "hds": "#fff5f5", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, "original": { "$type": "color", "$value": "{color.palette.red-50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-50}", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, "key": "{color.surface.critical}" }, "name": "token-color-surface-critical", @@ -7411,14 +8041,23 @@ "key": "{typography.font-stack.display}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.display.macOS}", - "{typography.font-stack.sans.display.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.display.emoji}" - ], + "$value": "{typography.font-stack.sans.display.combined}", + "$modes": { + "hds": "{typography.font-stack.sans.display.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.font-stack.display}" }, "name": "token-typography-font-stack-display", @@ -7435,14 +8074,23 @@ "key": "{typography.font-stack.text}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.text.macOS}", - "{typography.font-stack.sans.text.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.text.emoji}" - ], + "$value": "{typography.font-stack.sans.text.combined}", + "$modes": { + "hds": "{typography.font-stack.sans.text.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.font-stack.text}" }, "name": "token-typography-font-stack-text", @@ -7459,13 +8107,23 @@ "key": "{typography.font-stack.code}", "$type": "font-family", "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "hds": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.monospace.code.macOS}", - "{typography.font-stack.monospace.code.windows}", - "monospace" - ], + "$value": "{typography.font-stack.monospace.code.combined}", + "$modes": { + "hds": "{typography.font-stack.monospace.code.combined}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, "key": "{typography.font-stack.code}" }, "name": "token-typography-font-stack-code", @@ -7614,9 +8272,23 @@ "key": "{typography.display-500.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.display}", + "$modes": { + "hds": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-500.font-family}" }, "name": "token-typography-display-500-font-family", @@ -7635,11 +8307,25 @@ "$value": "1.875rem", "unit": "px", "comment": "30px/1.875rem", + "$modes": { + "hds": "30", + "cds-g0": "2rem", + "cds-g10": "2rem", + "cds-g90": "2rem", + "cds-g100": "2rem" + }, "original": { "$type": "font-size", "$value": "30", "unit": "px", "comment": "30px/1.875rem", + "$modes": { + "hds": "30", + "cds-g0": "{carbon.typography.heading05.font-size}", + "cds-g10": "{carbon.typography.heading05.font-size}", + "cds-g90": "{carbon.typography.heading05.font-size}", + "cds-g100": "{carbon.typography.heading05.font-size}" + }, "key": "{typography.display-500.font-size}" }, "name": "token-typography-display-500-font-size", @@ -7657,10 +8343,24 @@ "$type": "number", "$value": 1.2666, "comment": "38px", + "$modes": { + "hds": 1.2666, + "cds-g0": 1.25, + "cds-g10": 1.25, + "cds-g90": 1.25, + "cds-g100": 1.25 + }, "original": { "$type": "number", "$value": 1.2666, "comment": "38px", + "$modes": { + "hds": 1.2666, + "cds-g0": "{carbon.typography.heading05.line-height}", + "cds-g10": "{carbon.typography.heading05.line-height}", + "cds-g90": "{carbon.typography.heading05.line-height}", + "cds-g100": "{carbon.typography.heading05.line-height}" + }, "key": "{typography.display-500.line-height}" }, "name": "token-typography-display-500-line-height", @@ -7674,14 +8374,65 @@ ] }, { - "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}" - }, + "key": "{typography.display-500.letter-spacing}", + "$type": "letter-spacing", + "$value": "-0.5px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading05.letter-spacing}", + "cds-g10": "{carbon.typography.heading05.letter-spacing}", + "cds-g90": "{carbon.typography.heading05.letter-spacing}", + "cds-g100": "{carbon.typography.heading05.letter-spacing}" + }, + "key": "{typography.display-500.letter-spacing}" + }, + "name": "token-typography-display-500-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "letter-spacing" + ] + }, + { + "key": "{typography.display-400.font-family}", + "$type": "font-family", + "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "$modes": { + "hds": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-400.font-family}" + }, "name": "token-typography-display-400-font-family", "attributes": { "category": "typography" @@ -7698,11 +8449,25 @@ "$value": "1.5rem", "unit": "px", "comment": "24px/1.5rem", + "$modes": { + "hds": "24", + "cds-g0": "1.75rem", + "cds-g10": "1.75rem", + "cds-g90": "1.75rem", + "cds-g100": "1.75rem" + }, "original": { "$type": "font-size", "$value": "24", "unit": "px", "comment": "24px/1.5rem", + "$modes": { + "hds": "24", + "cds-g0": "{carbon.typography.heading04.font-size}", + "cds-g10": "{carbon.typography.heading04.font-size}", + "cds-g90": "{carbon.typography.heading04.font-size}", + "cds-g100": "{carbon.typography.heading04.font-size}" + }, "key": "{typography.display-400.font-size}" }, "name": "token-typography-display-400-font-size", @@ -7720,10 +8485,24 @@ "$type": "number", "$value": 1.3333, "comment": "32px", + "$modes": { + "hds": 1.3333, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, "original": { "$type": "number", "$value": 1.3333, "comment": "32px", + "$modes": { + "hds": 1.3333, + "cds-g0": "{carbon.typography.heading04.line-height}", + "cds-g10": "{carbon.typography.heading04.line-height}", + "cds-g90": "{carbon.typography.heading04.line-height}", + "cds-g100": "{carbon.typography.heading04.line-height}" + }, "key": "{typography.display-400.line-height}" }, "name": "token-typography-display-400-line-height", @@ -7736,13 +8515,64 @@ "line-height" ] }, + { + "key": "{typography.display-400.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": 0, + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "{carbon.typography.heading04.letter-spacing}", + "cds-g10": "{carbon.typography.heading04.letter-spacing}", + "cds-g90": "{carbon.typography.heading04.letter-spacing}", + "cds-g100": "{carbon.typography.heading04.letter-spacing}" + }, + "key": "{typography.display-400.letter-spacing}" + }, + "name": "token-typography-display-400-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "letter-spacing" + ] + }, { "key": "{typography.display-300.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.text}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-300.font-family}" }, "name": "token-typography-display-300-font-family", @@ -7761,11 +8591,25 @@ "$value": "1.125rem", "unit": "px", "comment": "18px/1.125rem", + "$modes": { + "hds": "18", + "cds-g0": "1.25rem", + "cds-g10": "1.25rem", + "cds-g90": "1.25rem", + "cds-g100": "1.25rem" + }, "original": { "$type": "font-size", "$value": "18", "unit": "px", "comment": "18px/1.125rem", + "$modes": { + "hds": "18", + "cds-g0": "{carbon.typography.heading03.font-size}", + "cds-g10": "{carbon.typography.heading03.font-size}", + "cds-g90": "{carbon.typography.heading03.font-size}", + "cds-g100": "{carbon.typography.heading03.font-size}" + }, "key": "{typography.display-300.font-size}" }, "name": "token-typography-display-300-font-size", @@ -7783,10 +8627,24 @@ "$type": "number", "$value": 1.3333, "comment": "24px", + "$modes": { + "hds": 1.3333, + "cds-g0": 1.4, + "cds-g10": 1.4, + "cds-g90": 1.4, + "cds-g100": 1.4 + }, "original": { "$type": "number", "$value": 1.3333, "comment": "24px", + "$modes": { + "hds": 1.3333, + "cds-g0": "{carbon.typography.heading03.line-height}", + "cds-g10": "{carbon.typography.heading03.line-height}", + "cds-g90": "{carbon.typography.heading03.line-height}", + "cds-g100": "{carbon.typography.heading03.line-height}" + }, "key": "{typography.display-300.line-height}" }, "name": "token-typography-display-300-line-height", @@ -7805,11 +8663,25 @@ "$value": "-0.5px", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, "original": { "$type": "letter-spacing", "$value": -0.5, "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading03.letter-spacing}", + "cds-g10": "{carbon.typography.heading03.letter-spacing}", + "cds-g90": "{carbon.typography.heading03.letter-spacing}", + "cds-g100": "{carbon.typography.heading03.letter-spacing}" + }, "key": "{typography.display-300.letter-spacing}" }, "name": "token-typography-display-300-letter-spacing", @@ -7826,9 +8698,23 @@ "key": "{typography.display-200.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$value": "{typography.font-stack.text}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-200.font-family}" }, "name": "token-typography-display-200-font-family", @@ -7847,11 +8733,25 @@ "$value": "1rem", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, "original": { "$type": "font-size", "$value": "16", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.heading02.font-size}", + "cds-g10": "{carbon.typography.heading02.font-size}", + "cds-g90": "{carbon.typography.heading02.font-size}", + "cds-g100": "{carbon.typography.heading02.font-size}" + }, "key": "{typography.display-200.font-size}" }, "name": "token-typography-display-200-font-size", @@ -7869,10 +8769,24 @@ "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "hds": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, "original": { "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "hds": 1.5, + "cds-g0": "{carbon.typography.heading02.line-height}", + "cds-g10": "{carbon.typography.heading02.line-height}", + "cds-g90": "{carbon.typography.heading02.line-height}", + "cds-g100": "{carbon.typography.heading02.line-height}" + }, "key": "{typography.display-200.line-height}" }, "name": "token-typography-display-200-line-height", @@ -7891,11 +8805,25 @@ "$value": "-0.5px", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, "original": { "$type": "letter-spacing", "$value": -0.5, "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading02.letter-spacing}", + "cds-g10": "{carbon.typography.heading02.letter-spacing}", + "cds-g90": "{carbon.typography.heading02.letter-spacing}", + "cds-g100": "{carbon.typography.heading02.letter-spacing}" + }, "key": "{typography.display-200.letter-spacing}" }, "name": "token-typography-display-200-letter-spacing", @@ -7912,9 +8840,23 @@ "key": "{typography.display-100.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.text}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-100.font-family}" }, "name": "token-typography-display-100-font-family", @@ -7933,11 +8875,25 @@ "$value": "0.8125rem", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", "$value": "13", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.heading01.font-size}", + "cds-g10": "{carbon.typography.heading01.font-size}", + "cds-g90": "{carbon.typography.heading01.font-size}", + "cds-g100": "{carbon.typography.heading01.font-size}" + }, "key": "{typography.display-100.font-size}" }, "name": "token-typography-display-100-font-size", @@ -7955,10 +8911,24 @@ "$type": "number", "$value": 1.3846, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", "$value": 1.3846, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": "{carbon.typography.heading01.line-height}", + "cds-g10": "{carbon.typography.heading01.line-height}", + "cds-g90": "{carbon.typography.heading01.line-height}", + "cds-g100": "{carbon.typography.heading01.line-height}" + }, "key": "{typography.display-100.line-height}" }, "name": "token-typography-display-100-line-height", @@ -7971,13 +8941,64 @@ "line-height" ] }, + { + "key": "{typography.display-100.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "0.16px", + "cds-g10": "0.16px", + "cds-g90": "0.16px", + "cds-g100": "0.16px" + }, + "original": { + "$type": "letter-spacing", + "$value": 0, + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "{carbon.typography.heading01.letter-spacing}", + "cds-g10": "{carbon.typography.heading01.letter-spacing}", + "cds-g90": "{carbon.typography.heading01.letter-spacing}", + "cds-g100": "{carbon.typography.heading01.letter-spacing}" + }, + "key": "{typography.display-100.letter-spacing}" + }, + "name": "token-typography-display-100-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "letter-spacing" + ] + }, { "key": "{typography.body-300.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.text}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-300.font-family}" }, "name": "token-typography-body-300-font-family", @@ -7996,11 +9017,25 @@ "$value": "1rem", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, "original": { "$type": "font-size", "$value": "16", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.body02.font-size}", + "cds-g10": "{carbon.typography.body02.font-size}", + "cds-g90": "{carbon.typography.body02.font-size}", + "cds-g100": "{carbon.typography.body02.font-size}" + }, "key": "{typography.body-300.font-size}" }, "name": "token-typography-body-300-font-size", @@ -8018,10 +9053,24 @@ "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "hds": 1.4286, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, "original": { "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "hds": 1.4286, + "cds-g0": "{carbon.typography.body02.line-height}", + "cds-g10": "{carbon.typography.body02.line-height}", + "cds-g90": "{carbon.typography.body02.line-height}", + "cds-g100": "{carbon.typography.body02.line-height}" + }, "key": "{typography.body-300.line-height}" }, "name": "token-typography-body-300-line-height", @@ -8038,9 +9087,23 @@ "key": "{typography.body-200.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.text}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-200.font-family}" }, "name": "token-typography-body-200-font-family", @@ -8059,11 +9122,25 @@ "$value": "0.875rem", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", "$value": "14", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "{carbon.typography.body01.font-size}", + "cds-g10": "{carbon.typography.body01.font-size}", + "cds-g90": "{carbon.typography.body01.font-size}", + "cds-g100": "{carbon.typography.body01.font-size}" + }, "key": "{typography.body-200.font-size}" }, "name": "token-typography-body-200-font-size", @@ -8081,10 +9158,24 @@ "$type": "number", "$value": 1.4286, "comment": "20px", + "$modes": { + "hds": 1.4286, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", "$value": 1.4286, "comment": "20px", + "$modes": { + "hds": 1.4286, + "cds-g0": "{carbon.typography.body01.line-height}", + "cds-g10": "{carbon.typography.body01.line-height}", + "cds-g90": "{carbon.typography.body01.line-height}", + "cds-g100": "{carbon.typography.body01.line-height}" + }, "key": "{typography.body-200.line-height}" }, "name": "token-typography-body-200-line-height", @@ -8101,9 +9192,23 @@ "key": "{typography.body-100.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.text}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-100.font-family}" }, "name": "token-typography-body-100-font-family", @@ -8122,11 +9227,25 @@ "$value": "0.8125rem", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", "$value": "13", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.bodyCompact01.font-size}", + "cds-g10": "{carbon.typography.bodyCompact01.font-size}", + "cds-g90": "{carbon.typography.bodyCompact01.font-size}", + "cds-g100": "{carbon.typography.bodyCompact01.font-size}" + }, "key": "{typography.body-100.font-size}" }, "name": "token-typography-body-100-font-size", @@ -8144,10 +9263,24 @@ "$type": "number", "$value": 1.3846, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, "original": { "$type": "number", "$value": 1.3846, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": "{carbon.typography.bodyCompact01.line-height}", + "cds-g10": "{carbon.typography.bodyCompact01.line-height}", + "cds-g90": "{carbon.typography.bodyCompact01.line-height}", + "cds-g100": "{carbon.typography.bodyCompact01.line-height}" + }, "key": "{typography.body-100.line-height}" }, "name": "token-typography-body-100-line-height", @@ -8161,65 +9294,107 @@ ] }, { - "key": "{typography.code-100.font-family}", + "key": "{typography.code-300.font-family}", "$type": "font-family", "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "hds": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.code}", - "key": "{typography.code-100.font-family}" + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-300.font-family}" }, - "name": "token-typography-code-100-font-family", + "name": "token-typography-code-300-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "font-family" ] }, { - "key": "{typography.code-100.font-size}", + "key": "{typography.code-300.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "1rem", "unit": "px", - "comment": "13px/0.8125rem", + "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "13", + "$value": "16", "unit": "px", - "comment": "13px/0.8125rem", - "key": "{typography.code-100.font-size}" + "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-300.font-size}" }, - "name": "token-typography-code-100-font-size", + "name": "token-typography-code-300-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "font-size" ] }, { - "key": "{typography.code-100.line-height}", + "key": "{typography.code-300.line-height}", "$type": "number", - "$value": 1.23, - "comment": "16px", + "$value": 1.25, + "comment": "20px", + "$modes": { + "hds": 1.25, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", - "$value": 1.23, - "comment": "16px", - "key": "{typography.code-100.line-height}" + "$value": 1.25, + "comment": "20px", + "$modes": { + "hds": 1.25, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-300.line-height}" }, - "name": "token-typography-code-100-line-height", + "name": "token-typography-code-300-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "line-height" ] }, @@ -8227,9 +9402,23 @@ "key": "{typography.code-200.font-family}", "$type": "font-family", "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "hds": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.code}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, "key": "{typography.code-200.font-family}" }, "name": "token-typography-code-200-font-family", @@ -8248,11 +9437,25 @@ "$value": "0.875rem", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", "$value": "14", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, "key": "{typography.code-200.font-size}" }, "name": "token-typography-code-200-font-size", @@ -8270,10 +9473,24 @@ "$type": "number", "$value": 1.125, "comment": "18px", + "$modes": { + "hds": 1.125, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "original": { "$type": "number", "$value": 1.125, "comment": "18px", + "$modes": { + "hds": 1.125, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, "key": "{typography.code-200.line-height}" }, "name": "token-typography-code-200-line-height", @@ -8287,65 +9504,107 @@ ] }, { - "key": "{typography.code-300.font-family}", + "key": "{typography.code-100.font-family}", "$type": "font-family", "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "hds": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "original": { "$type": "font-family", "$value": "{typography.font-stack.code}", - "key": "{typography.code-300.font-family}" + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-100.font-family}" }, - "name": "token-typography-code-300-font-family", + "name": "token-typography-code-100-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "font-family" ] }, { - "key": "{typography.code-300.font-size}", + "key": "{typography.code-100.font-size}", "$type": "font-size", - "$value": "1rem", + "$value": "0.8125rem", "unit": "px", - "comment": "16px/1rem", + "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "original": { "$type": "font-size", - "$value": "16", + "$value": "13", "unit": "px", - "comment": "16px/1rem", - "key": "{typography.code-300.font-size}" + "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-100.font-size}" }, - "name": "token-typography-code-300-font-size", + "name": "token-typography-code-100-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "font-size" ] }, { - "key": "{typography.code-300.line-height}", + "key": "{typography.code-100.line-height}", "$type": "number", - "$value": 1.25, - "comment": "20px", + "$value": 1.23, + "comment": "16px", + "$modes": { + "hds": 1.23, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, "original": { "$type": "number", - "$value": 1.25, - "comment": "20px", - "key": "{typography.code-300.line-height}" + "$value": 1.23, + "comment": "16px", + "$modes": { + "hds": 1.23, + "cds-g0": "{carbon.typography.code01.line-height}", + "cds-g10": "{carbon.typography.code01.line-height}", + "cds-g90": "{carbon.typography.code01.line-height}", + "cds-g100": "{carbon.typography.code01.line-height}" + }, + "key": "{typography.code-100.line-height}" }, - "name": "token-typography-code-300-line-height", + "name": "token-typography-code-100-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "line-height" ] } diff --git a/packages/tokens/dist/marketing/css/helpers/typography.css b/packages/tokens/dist/marketing/css/helpers/typography.css index c0913ef1a67..63dd3021863 100644 --- a/packages/tokens/dist/marketing/css/helpers/typography.css +++ b/packages/tokens/dist/marketing/css/helpers/typography.css @@ -17,6 +17,6 @@ .hds-typography-body-300 { font-family: var(--token-typography-body-300-font-family); font-size: var(--token-typography-body-300-font-size); line-height: var(--token-typography-body-300-line-height); margin: 0; padding: 0; } .hds-typography-body-200 { font-family: var(--token-typography-body-200-font-family); font-size: var(--token-typography-body-200-font-size); line-height: var(--token-typography-body-200-line-height); margin: 0; padding: 0; } .hds-typography-body-100 { font-family: var(--token-typography-body-100-font-family); font-size: var(--token-typography-body-100-font-size); line-height: var(--token-typography-body-100-line-height); margin: 0; padding: 0; } -.hds-typography-code-100 { font-family: var(--token-typography-code-100-font-family); font-size: var(--token-typography-code-100-font-size); line-height: var(--token-typography-code-100-line-height); margin: 0; padding: 0; } -.hds-typography-code-200 { font-family: var(--token-typography-code-200-font-family); font-size: var(--token-typography-code-200-font-size); line-height: var(--token-typography-code-200-line-height); margin: 0; padding: 0; } .hds-typography-code-300 { font-family: var(--token-typography-code-300-font-family); font-size: var(--token-typography-code-300-font-size); line-height: var(--token-typography-code-300-line-height); margin: 0; padding: 0; } +.hds-typography-code-200 { font-family: var(--token-typography-code-200-font-family); font-size: var(--token-typography-code-200-font-size); line-height: var(--token-typography-code-200-line-height); margin: 0; padding: 0; } +.hds-typography-code-100 { font-family: var(--token-typography-code-100-font-family); font-size: var(--token-typography-code-100-font-size); line-height: var(--token-typography-code-100-line-height); margin: 0; padding: 0; } diff --git a/packages/tokens/dist/marketing/css/tokens.css b/packages/tokens/dist/marketing/css/tokens.css index 4a887e3ae51..5c95d396a24 100644 --- a/packages/tokens/dist/marketing/css/tokens.css +++ b/packages/tokens/dist/marketing/css/tokens.css @@ -356,9 +356,11 @@ --token-typography-display-500-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-display-500-font-size: 1.875rem; /** 30px/1.875rem */ --token-typography-display-500-line-height: 1.2666; /** 38px */ + --token-typography-display-500-letter-spacing: -0.5px; /** this is `tracking` */ --token-typography-display-400-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-display-400-font-size: 1.5rem; /** 24px/1.5rem */ --token-typography-display-400-line-height: 1.3333; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ --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 */ @@ -370,6 +372,7 @@ --token-typography-display-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-display-100-font-size: 0.8125rem; /** 13px/0.8125rem */ --token-typography-display-100-line-height: 1.3846; /** 18px */ + --token-typography-display-100-letter-spacing: 0px; /** this is `tracking` */ --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 */ @@ -379,13 +382,13 @@ --token-typography-body-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-body-100-font-size: 0.8125rem; /** 13px/0.8125rem */ --token-typography-body-100-line-height: 1.3846; /** 18px */ - --token-typography-code-100-font-family: ui-monospace, Menlo, Consolas, monospace; - --token-typography-code-100-font-size: 0.8125rem; /** 13px/0.8125rem */ - --token-typography-code-100-line-height: 1.23; /** 16px */ - --token-typography-code-200-font-family: ui-monospace, Menlo, Consolas, monospace; - --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ - --token-typography-code-200-line-height: 1.125; /** 18px */ --token-typography-code-300-font-family: ui-monospace, Menlo, Consolas, monospace; --token-typography-code-300-font-size: 1rem; /** 16px/1rem */ --token-typography-code-300-line-height: 1.25; /** 20px */ + --token-typography-code-200-font-family: ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.125; /** 18px */ + --token-typography-code-100-font-family: ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-100-font-size: 0.8125rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.23; /** 16px */ } diff --git a/packages/tokens/dist/marketing/tokens.json b/packages/tokens/dist/marketing/tokens.json index da71fd43c38..1661de37f13 100644 --- a/packages/tokens/dist/marketing/tokens.json +++ b/packages/tokens/dist/marketing/tokens.json @@ -1090,12 +1090,26 @@ "$type": "color", "$value": "#656a7633", "group": "semantic", + "$modes": { + "hds": "#656a7633", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, "filePath": "src/global/color/semantic-border.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.alpha-200}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-200}", + "cds-g0": "{carbon.themes.white.borderSubtle03}", + "cds-g10": "{carbon.themes.g10.borderSubtle03}", + "cds-g90": "{carbon.themes.g90.borderSubtle03}", + "cds-g100": "{carbon.themes.g100.borderSubtle03}" + }, "key": "{color.border.primary}" }, "name": "token-color-border-primary", @@ -1113,12 +1127,26 @@ "$type": "color", "$value": "#656a761a", "group": "semantic", + "$modes": { + "hds": "#656a761a", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, "filePath": "src/global/color/semantic-border.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.alpha-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-100}", + "cds-g0": "{carbon.themes.white.borderSubtle00}", + "cds-g10": "{carbon.themes.g10.borderSubtle00}", + "cds-g90": "{carbon.themes.g90.borderSubtle00}", + "cds-g100": "{carbon.themes.g100.borderSubtle00}" + }, "key": "{color.border.faint}" }, "name": "token-color-border-faint", @@ -1136,12 +1164,26 @@ "$type": "color", "$value": "#3b3d4566", "group": "semantic", + "$modes": { + "hds": "#3b3d4566", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, "filePath": "src/global/color/semantic-border.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.alpha-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-300}", + "cds-g0": "{carbon.themes.white.borderSubtle01}", + "cds-g10": "{carbon.themes.g10.borderSubtle01}", + "cds-g90": "{carbon.themes.g90.borderSubtle01}", + "cds-g100": "{carbon.themes.g100.borderSubtle01}" + }, "key": "{color.border.strong}" }, "name": "token-color-border-strong", @@ -1159,12 +1201,26 @@ "$type": "color", "$value": "#cce3fe", "group": "semantic", + "$modes": { + "hds": "#cce3fe", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, "filePath": "src/global/color/semantic-border.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.blue-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-100}", + "cds-g0": "{carbon.color.blue.60}", + "cds-g10": "{carbon.color.blue.60}", + "cds-g90": "{carbon.color.blue.50}", + "cds-g100": "{carbon.color.blue.50}" + }, "key": "{color.border.action}" }, "name": "token-color-border-action", @@ -1182,12 +1238,26 @@ "$type": "color", "$value": "#ead2fe", "group": "semantic", + "$modes": { + "hds": "#ead2fe", + "cds-g0": "#be95ff", + "cds-g10": "#be95ff", + "cds-g90": "#a56eff", + "cds-g100": "#a56eff" + }, "filePath": "src/global/color/semantic-border.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.purple-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-100}", + "cds-g0": "{carbon.color.purple.40}", + "cds-g10": "{carbon.color.purple.40}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + }, "key": "{color.border.highlight}" }, "name": "token-color-border-highlight", @@ -1205,12 +1275,26 @@ "$type": "color", "$value": "#cceeda", "group": "semantic", + "$modes": { + "hds": "#cceeda", + "cds-g0": "#42be65", + "cds-g10": "#42be65", + "cds-g90": "#24a148", + "cds-g100": "#24a148" + }, "filePath": "src/global/color/semantic-border.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.green-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-100}", + "cds-g0": "{carbon.color.green.40}", + "cds-g10": "{carbon.color.green.40}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + }, "key": "{color.border.success}" }, "name": "token-color-border-success", @@ -1228,12 +1312,26 @@ "$type": "color", "$value": "#fbeabf", "group": "semantic", + "$modes": { + "hds": "#fbeabf", + "cds-g0": "#ff832b", + "cds-g10": "#ff832b", + "cds-g90": "#eb6200", + "cds-g100": "#eb6200" + }, "filePath": "src/global/color/semantic-border.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.amber-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.orange.40}", + "cds-g10": "{carbon.color.orange.40}", + "cds-g90": "{carbon.color.orange.50}", + "cds-g100": "{carbon.color.orange.50}" + }, "key": "{color.border.warning}" }, "name": "token-color-border-warning", @@ -1251,12 +1349,26 @@ "$type": "color", "$value": "#fbd4d4", "group": "semantic", + "$modes": { + "hds": "#fbd4d4", + "cds-g0": "#ff8389", + "cds-g10": "#ff8389", + "cds-g90": "#fa4d56", + "cds-g100": "#fa4d56" + }, "filePath": "src/global/color/semantic-border.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.red-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-100}", + "cds-g0": "{carbon.color.red.40}", + "cds-g10": "{carbon.color.red.40}", + "cds-g90": "{carbon.color.red.50}", + "cds-g100": "{carbon.color.red.50}" + }, "key": "{color.border.critical}" }, "name": "token-color-border-critical", @@ -1277,12 +1389,26 @@ "$type": "color", "$value": "#0c56e9", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "filePath": "src/global/color/semantic-focus.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.blue-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, "key": "{color.focus.action.internal}" }, "name": "token-color-focus-action-internal", @@ -1302,6 +1428,13 @@ "$value": "#5990ff", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, "filePath": "src/global/color/semantic-focus.json", "isSource": true, "original": { @@ -1309,6 +1442,13 @@ "$value": "#5990ff", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, "key": "{color.focus.action.external}" }, "name": "token-color-focus-action-external", @@ -1329,12 +1469,26 @@ "$type": "color", "$value": "#c00005", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "filePath": "src/global/color/semantic-focus.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.red-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + }, "key": "{color.focus.critical.internal}" }, "name": "token-color-focus-critical-internal", @@ -1354,6 +1508,13 @@ "$value": "#dd7578", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#ffffff", + "cds-g100": "#ffffff" + }, "filePath": "src/global/color/semantic-focus.json", "isSource": true, "original": { @@ -1361,6 +1522,13 @@ "$value": "#dd7578", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + }, "key": "{color.focus.critical.external}" }, "name": "token-color-focus-critical-external", @@ -1382,12 +1550,26 @@ "$type": "color", "$value": "#0c0c0e", "group": "semantic", + "$modes": { + "hds": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.neutral-700}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, "key": "{color.foreground.strong}" }, "name": "token-color-foreground-strong", @@ -1406,7 +1588,7 @@ "$value": "#3b3d45", "group": "semantic", "$modes": { - "hds": "#ffffff", + "hds": "#3b3d45", "cds-g0": "#161616", "cds-g10": "#161616", "cds-g90": "#f4f4f4", @@ -1419,7 +1601,7 @@ "$value": "{color.palette.neutral-600}", "group": "semantic", "$modes": { - "hds": "#ffffff", + "hds": "{color.palette.neutral-600}", "cds-g0": "{carbon.themes.white.textPrimary}", "cds-g10": "{carbon.themes.g10.textPrimary}", "cds-g90": "{carbon.themes.g90.textPrimary}", @@ -1442,12 +1624,26 @@ "$type": "color", "$value": "#656a76", "group": "semantic", + "$modes": { + "hds": "#656a76", + "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-500}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-500}", + "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.faint}" }, "name": "token-color-foreground-faint", @@ -1465,12 +1661,26 @@ "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#8c909c", + "cds-g0": "#ffffff", + "cds-g10": "#ffffff", + "cds-g90": "#161616", + "cds-g100": "#161616" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.neutral-0}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + }, "key": "{color.foreground.high-contrast}" }, "name": "token-color-foreground-high-contrast", @@ -1488,12 +1698,26 @@ "$type": "color", "$value": "#8c909c", "group": "semantic", + "$modes": { + "hds": "#8c909c", + "cds-g0": "rgba(22, 22, 22, 0.25)", + "cds-g10": "rgba(22, 22, 22, 0.25)", + "cds-g90": "rgba(244, 244, 244, 0.25)", + "cds-g100": "rgba(244, 244, 244, 0.25)" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.neutral-400}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textDisabled}", + "cds-g10": "{carbon.themes.g10.textDisabled}", + "cds-g90": "{carbon.themes.g90.textDisabled}", + "cds-g100": "{carbon.themes.g100.textDisabled}" + }, "key": "{color.foreground.disabled}" }, "name": "token-color-foreground-disabled", @@ -1511,12 +1735,26 @@ "$type": "color", "$value": "#1060ff", "group": "semantic", + "$modes": { + "hds": "#1060ff", + "cds-g0": "#0f62fe", + "cds-g10": "#0f62fe", + "cds-g90": "#78a9ff", + "cds-g100": "#78a9ff" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.blue-200}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.white.linkPrimary}", + "cds-g10": "{carbon.themes.g10.linkPrimary}", + "cds-g90": "{carbon.themes.g90.linkPrimary}", + "cds-g100": "{carbon.themes.g100.linkPrimary}" + }, "key": "{color.foreground.action}" }, "name": "token-color-foreground-action", @@ -1534,12 +1772,26 @@ "$type": "color", "$value": "#0c56e9", "group": "semantic", + "$modes": { + "hds": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.blue-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, "key": "{color.foreground.action-hover}" }, "name": "token-color-foreground-action-hover", @@ -1557,12 +1809,26 @@ "$type": "color", "$value": "#0046d1", "group": "semantic", + "$modes": { + "hds": "#0046d1", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#a6c8ff", + "cds-g100": "#a6c8ff" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.blue-400}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + }, "key": "{color.foreground.action-active}" }, "name": "token-color-foreground-action-active", @@ -1580,12 +1846,26 @@ "$type": "color", "$value": "#a737ff", "group": "semantic", + "$modes": { + "hds": "#a737ff", + "cds-g0": "#8a3ffc", + "cds-g10": "#8a3ffc", + "cds-g90": "#be95ff", + "cds-g100": "#be95ff" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.purple-200}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + }, "key": "{color.foreground.highlight}" }, "name": "token-color-foreground-highlight", @@ -1603,12 +1883,26 @@ "$type": "color", "$value": "#911ced", "group": "semantic", + "$modes": { + "hds": "#911ced", + "cds-g0": "#6929c4", + "cds-g10": "#6929c4", + "cds-g90": "#d4bbff", + "cds-g100": "#d4bbff" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.purple-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-300}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.30}", + "cds-g100": "{carbon.color.purple.30}" + }, "key": "{color.foreground.highlight-on-surface}" }, "name": "token-color-foreground-highlight-on-surface", @@ -1626,12 +1920,26 @@ "$type": "color", "$value": "#42215b", "group": "semantic", + "$modes": { + "hds": "#42215b", + "cds-g0": "#491d8b", + "cds-g10": "#491d8b", + "cds-g90": "#e8daff", + "cds-g100": "#d4bbff" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.purple-500}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-500}", + "cds-g0": "{carbon.color.purple.80}", + "cds-g10": "{carbon.color.purple.80}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.30}" + }, "key": "{color.foreground.highlight-high-contrast}" }, "name": "token-color-foreground-highlight-high-contrast", @@ -1649,12 +1957,26 @@ "$type": "color", "$value": "#008a22", "group": "semantic", + "$modes": { + "hds": "#008a22", + "cds-g0": "#198038", + "cds-g10": "#198038", + "cds-g90": "#42be65", + "cds-g100": "#42be65" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.green-200}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-200}", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.40}", + "cds-g100": "{carbon.color.green.40}" + }, "key": "{color.foreground.success}" }, "name": "token-color-foreground-success", @@ -1672,12 +1994,26 @@ "$type": "color", "$value": "#00781e", "group": "semantic", + "$modes": { + "hds": "#00781e", + "cds-g0": "#0e6027", + "cds-g10": "#0e6027", + "cds-g90": "#6fdc8c", + "cds-g100": "#6fdc8c" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.green-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-300}", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.30}", + "cds-g100": "{carbon.color.green.30}" + }, "key": "{color.foreground.success-on-surface}" }, "name": "token-color-foreground-success-on-surface", @@ -1695,12 +2031,26 @@ "$type": "color", "$value": "#054220", "group": "semantic", + "$modes": { + "hds": "#054220", + "cds-g0": "#044317", + "cds-g10": "#044317", + "cds-g90": "#a7f0ba", + "cds-g100": "#a7f0ba" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.green-500}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-500}", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + }, "key": "{color.foreground.success-high-contrast}" }, "name": "token-color-foreground-success-high-contrast", @@ -1718,12 +2068,26 @@ "$type": "color", "$value": "#bb5a00", "group": "semantic", + "$modes": { + "hds": "#bb5a00", + "cds-g0": "#ba4e00", + "cds-g10": "#ba4e00", + "cds-g90": "#ff832b", + "cds-g100": "#ff832b" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.amber-200}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.orange.60}", + "cds-g10": "{carbon.color.orange.60}", + "cds-g90": "{carbon.color.orange.40}", + "cds-g100": "{carbon.color.orange.40}" + }, "key": "{color.foreground.warning}" }, "name": "token-color-foreground-warning", @@ -1741,12 +2105,26 @@ "$type": "color", "$value": "#9e4b00", "group": "semantic", + "$modes": { + "hds": "#9e4b00", + "cds-g0": "#8a3800", + "cds-g10": "#8a3800", + "cds-g90": "#ffb784", + "cds-g100": "#ffb784" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.amber-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-300}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.30}", + "cds-g100": "{carbon.color.orange.30}" + }, "key": "{color.foreground.warning-on-surface}" }, "name": "token-color-foreground-warning-on-surface", @@ -1764,12 +2142,26 @@ "$type": "color", "$value": "#542800", "group": "semantic", + "$modes": { + "hds": "#542800", + "cds-g0": "#5e2900", + "cds-g10": "#5e2900", + "cds-g90": "#ffd9be", + "cds-g100": "#ffd9be" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.amber-500}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-500}", + "cds-g0": "{carbon.color.orange.80}", + "cds-g10": "{carbon.color.orange.80}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + }, "key": "{color.foreground.warning-high-contrast}" }, "name": "token-color-foreground-warning-high-contrast", @@ -1787,12 +2179,26 @@ "$type": "color", "$value": "#e52228", "group": "semantic", + "$modes": { + "hds": "#e52228", + "cds-g0": "#da1e28", + "cds-g10": "#da1e28", + "cds-g90": "#ff8389", + "cds-g100": "#ff8389" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.red-200}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-200}", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.40}", + "cds-g100": "{carbon.color.red.40}" + }, "key": "{color.foreground.critical}" }, "name": "token-color-foreground-critical", @@ -1810,12 +2216,26 @@ "$type": "color", "$value": "#c00005", "group": "semantic", + "$modes": { + "hds": "#c00005", + "cds-g0": "#a2191f", + "cds-g10": "#a2191f", + "cds-g90": "#ffb3b8", + "cds-g100": "#ffb3b8" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.red-300}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-300}", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.30}", + "cds-g100": "{carbon.color.red.30}" + }, "key": "{color.foreground.critical-on-surface}" }, "name": "token-color-foreground-critical-on-surface", @@ -1833,12 +2253,26 @@ "$type": "color", "$value": "#51130a", "group": "semantic", + "$modes": { + "hds": "#51130a", + "cds-g0": "#750e13", + "cds-g10": "#750e13", + "cds-g90": "#ffd7d9", + "cds-g100": "#ffd7d9" + }, "filePath": "src/global/color/semantic-foreground.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.red-500}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-500}", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + }, "key": "{color.foreground.critical-high-contrast}" }, "name": "token-color-foreground-critical-high-contrast", @@ -1858,12 +2292,26 @@ "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, "filePath": "src/global/color/semantic-page.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.neutral-0}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, "key": "{color.page.primary}" }, "name": "token-color-page-primary", @@ -1881,12 +2329,26 @@ "$type": "color", "$value": "#fafafa", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#262626", + "cds-g100": "#161616" + }, "filePath": "src/global/color/semantic-page.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.neutral-50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + }, "key": "{color.page.faint}" }, "name": "token-color-page-faint", @@ -1906,12 +2368,26 @@ "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "filePath": "src/global/color/semantic-surface.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.neutral-0}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.primary}" }, "name": "token-color-surface-primary", @@ -1929,12 +2405,26 @@ "$type": "color", "$value": "#fafafa", "group": "semantic", + "$modes": { + "hds": "#fafafa", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "filePath": "src/global/color/semantic-surface.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.neutral-50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.faint}" }, "name": "token-color-surface-faint", @@ -1952,12 +2442,26 @@ "$type": "color", "$value": "#f1f2f3", "group": "semantic", + "$modes": { + "hds": "#f1f2f3", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "filePath": "src/global/color/semantic-surface.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.neutral-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.strong}" }, "name": "token-color-surface-strong", @@ -1975,12 +2479,26 @@ "$type": "color", "$value": "#ffffff", "group": "semantic", + "$modes": { + "hds": "#ffffff", + "cds-g0": "#f4f4f4", + "cds-g10": "#ffffff", + "cds-g90": "#393939", + "cds-g100": "#262626" + }, "filePath": "src/global/color/semantic-surface.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.neutral-0}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + }, "key": "{color.surface.interactive}" }, "name": "token-color-surface-interactive", @@ -1998,12 +2516,26 @@ "$type": "color", "$value": "#f1f2f3", "group": "semantic", + "$modes": { + "hds": "#f1f2f3", + "cds-g0": "#e8e8e8", + "cds-g10": "#e8e8e8", + "cds-g90": "#474747", + "cds-g100": "#333333" + }, "filePath": "src/global/color/semantic-surface.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.neutral-100}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerHover01}", + "cds-g10": "{carbon.themes.g10.layerHover01}", + "cds-g90": "{carbon.themes.g90.layerHover01}", + "cds-g100": "{carbon.themes.g100.layerHover01}" + }, "key": "{color.surface.interactive-hover}" }, "name": "token-color-surface-interactive-hover", @@ -2021,12 +2553,26 @@ "$type": "color", "$value": "#dedfe3", "group": "semantic", + "$modes": { + "hds": "#dedfe3", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, "filePath": "src/global/color/semantic-surface.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.neutral-200}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.white.layerActive01}", + "cds-g10": "{carbon.themes.g10.layerActive01}", + "cds-g90": "{carbon.themes.g90.layerActive01}", + "cds-g100": "{carbon.themes.g100.layerActive01}" + }, "key": "{color.surface.interactive-active}" }, "name": "token-color-surface-interactive-active", @@ -2044,12 +2590,26 @@ "$type": "color", "$value": "#fafafa", "group": "semantic", + "$modes": { + "hds": "#fafafa", + "cds-g0": "#FF0000", + "cds-g10": "#FF0000", + "cds-g90": "#FF0000", + "cds-g100": "#FF0000" + }, "filePath": "src/global/color/semantic-surface.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.neutral-50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-50}", + "cds-g0": "#FF0000", + "cds-g10": "#FF0000", + "cds-g90": "#FF0000", + "cds-g100": "#FF0000" + }, "key": "{color.surface.interactive-disabled}" }, "name": "token-color-surface-interactive-disabled", @@ -2067,12 +2627,26 @@ "$type": "color", "$value": "#f2f8ff", "group": "semantic", + "$modes": { + "hds": "#f2f8ff", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, "filePath": "src/global/color/semantic-surface.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.blue-50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-50}", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.70}", + "cds-g100": "{carbon.color.blue.70}" + }, "key": "{color.surface.action}" }, "name": "token-color-surface-action", @@ -2090,12 +2664,26 @@ "$type": "color", "$value": "#f9f2ff", "group": "semantic", + "$modes": { + "hds": "#f9f2ff", + "cds-g0": "#e8daff", + "cds-g10": "#e8daff", + "cds-g90": "#6929c4", + "cds-g100": "#6929c4" + }, "filePath": "src/global/color/semantic-surface.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.purple-50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-50}", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + }, "key": "{color.surface.highlight}" }, "name": "token-color-surface-highlight", @@ -2113,12 +2701,26 @@ "$type": "color", "$value": "#f2fbf6", "group": "semantic", + "$modes": { + "hds": "#f2fbf6", + "cds-g0": "#a7f0ba", + "cds-g10": "#a7f0ba", + "cds-g90": "#0e6027", + "cds-g100": "#0e6027" + }, "filePath": "src/global/color/semantic-surface.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.green-50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.green-50}", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + }, "key": "{color.surface.success}" }, "name": "token-color-surface-success", @@ -2136,12 +2738,26 @@ "$type": "color", "$value": "#fff9e8", "group": "semantic", + "$modes": { + "hds": "#fff9e8", + "cds-g0": "#ffd9be", + "cds-g10": "#ffd9be", + "cds-g90": "#8a3800", + "cds-g100": "#8a3800" + }, "filePath": "src/global/color/semantic-surface.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.amber-50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-50}", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + }, "key": "{color.surface.warning}" }, "name": "token-color-surface-warning", @@ -2159,12 +2775,26 @@ "$type": "color", "$value": "#fff5f5", "group": "semantic", + "$modes": { + "hds": "#fff5f5", + "cds-g0": "#ffd7d9", + "cds-g10": "#ffd7d9", + "cds-g90": "#a2191f", + "cds-g100": "#a2191f" + }, "filePath": "src/global/color/semantic-surface.json", "isSource": true, "original": { "$type": "color", "$value": "{color.palette.red-50}", "group": "semantic", + "$modes": { + "hds": "{color.palette.red-50}", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + }, "key": "{color.surface.critical}" }, "name": "token-color-surface-critical", @@ -8433,16 +9063,25 @@ "key": "{typography.font-stack.display}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.display.macOS}", - "{typography.font-stack.sans.display.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.display.emoji}" - ], + "$value": "{typography.font-stack.sans.display.combined}", + "$modes": { + "hds": "{typography.font-stack.sans.display.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.font-stack.display}" }, "name": "token-typography-font-stack-display", @@ -8459,16 +9098,25 @@ "key": "{typography.font-stack.text}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.text.macOS}", - "{typography.font-stack.sans.text.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.text.emoji}" - ], + "$value": "{typography.font-stack.sans.text.combined}", + "$modes": { + "hds": "{typography.font-stack.sans.text.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.font-stack.text}" }, "name": "token-typography-font-stack-text", @@ -8485,15 +9133,25 @@ "key": "{typography.font-stack.code}", "$type": "font-family", "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "hds": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-family", - "$value": [ - "{typography.font-stack.monospace.code.macOS}", - "{typography.font-stack.monospace.code.windows}", - "monospace" - ], + "$value": "{typography.font-stack.monospace.code.combined}", + "$modes": { + "hds": "{typography.font-stack.monospace.code.combined}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, "key": "{typography.font-stack.code}" }, "name": "token-typography-font-stack-code", @@ -8654,11 +9312,25 @@ "key": "{typography.display-500.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-family", "$value": "{typography.font-stack.display}", + "$modes": { + "hds": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-500.font-family}" }, "name": "token-typography-display-500-font-family", @@ -8677,6 +9349,13 @@ "$value": "1.875rem", "unit": "px", "comment": "30px/1.875rem", + "$modes": { + "hds": "30", + "cds-g0": "2rem", + "cds-g10": "2rem", + "cds-g90": "2rem", + "cds-g100": "2rem" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { @@ -8684,6 +9363,13 @@ "$value": "30", "unit": "px", "comment": "30px/1.875rem", + "$modes": { + "hds": "30", + "cds-g0": "{carbon.typography.heading05.font-size}", + "cds-g10": "{carbon.typography.heading05.font-size}", + "cds-g90": "{carbon.typography.heading05.font-size}", + "cds-g100": "{carbon.typography.heading05.font-size}" + }, "key": "{typography.display-500.font-size}" }, "name": "token-typography-display-500-font-size", @@ -8701,12 +9387,26 @@ "$type": "number", "$value": 1.2666, "comment": "38px", + "$modes": { + "hds": 1.2666, + "cds-g0": 1.25, + "cds-g10": 1.25, + "cds-g90": 1.25, + "cds-g100": 1.25 + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "number", "$value": 1.2666, "comment": "38px", + "$modes": { + "hds": 1.2666, + "cds-g0": "{carbon.typography.heading05.line-height}", + "cds-g10": "{carbon.typography.heading05.line-height}", + "cds-g90": "{carbon.typography.heading05.line-height}", + "cds-g100": "{carbon.typography.heading05.line-height}" + }, "key": "{typography.display-500.line-height}" }, "name": "token-typography-display-500-line-height", @@ -8718,21 +9418,74 @@ "display-500", "line-height" ] - } - }, - "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", + }, + "letter-spacing": { + "key": "{typography.display-500.letter-spacing}", + "$type": "letter-spacing", + "$value": "-0.5px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { - "$type": "font-family", - "$value": "{typography.font-stack.display}", - "key": "{typography.display-400.font-family}" - }, - "name": "token-typography-display-400-font-family", + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading05.letter-spacing}", + "cds-g10": "{carbon.typography.heading05.letter-spacing}", + "cds-g90": "{carbon.typography.heading05.letter-spacing}", + "cds-g100": "{carbon.typography.heading05.letter-spacing}" + }, + "key": "{typography.display-500.letter-spacing}" + }, + "name": "token-typography-display-500-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "letter-spacing" + ] + } + }, + "display-400": { + "font-family": { + "key": "{typography.display-400.font-family}", + "$type": "font-family", + "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "filePath": "src/products/shared/typography.json", + "isSource": true, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.display}", + "$modes": { + "hds": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.display-400.font-family}" + }, + "name": "token-typography-display-400-font-family", "attributes": { "category": "typography" }, @@ -8748,6 +9501,13 @@ "$value": "1.5rem", "unit": "px", "comment": "24px/1.5rem", + "$modes": { + "hds": "24", + "cds-g0": "1.75rem", + "cds-g10": "1.75rem", + "cds-g90": "1.75rem", + "cds-g100": "1.75rem" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { @@ -8755,6 +9515,13 @@ "$value": "24", "unit": "px", "comment": "24px/1.5rem", + "$modes": { + "hds": "24", + "cds-g0": "{carbon.typography.heading04.font-size}", + "cds-g10": "{carbon.typography.heading04.font-size}", + "cds-g90": "{carbon.typography.heading04.font-size}", + "cds-g100": "{carbon.typography.heading04.font-size}" + }, "key": "{typography.display-400.font-size}" }, "name": "token-typography-display-400-font-size", @@ -8772,12 +9539,26 @@ "$type": "number", "$value": 1.3333, "comment": "32px", + "$modes": { + "hds": 1.3333, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "number", "$value": 1.3333, "comment": "32px", + "$modes": { + "hds": 1.3333, + "cds-g0": "{carbon.typography.heading04.line-height}", + "cds-g10": "{carbon.typography.heading04.line-height}", + "cds-g90": "{carbon.typography.heading04.line-height}", + "cds-g100": "{carbon.typography.heading04.line-height}" + }, "key": "{typography.display-400.line-height}" }, "name": "token-typography-display-400-line-height", @@ -8789,6 +9570,45 @@ "display-400", "line-height" ] + }, + "letter-spacing": { + "key": "{typography.display-400.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "filePath": "src/products/shared/typography.json", + "isSource": true, + "original": { + "$type": "letter-spacing", + "$value": 0, + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "{carbon.typography.heading04.letter-spacing}", + "cds-g10": "{carbon.typography.heading04.letter-spacing}", + "cds-g90": "{carbon.typography.heading04.letter-spacing}", + "cds-g100": "{carbon.typography.heading04.letter-spacing}" + }, + "key": "{typography.display-400.letter-spacing}" + }, + "name": "token-typography-display-400-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "letter-spacing" + ] } }, "display-300": { @@ -8796,11 +9616,25 @@ "key": "{typography.display-300.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-family", "$value": "{typography.font-stack.text}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-300.font-family}" }, "name": "token-typography-display-300-font-family", @@ -8819,6 +9653,13 @@ "$value": "1.125rem", "unit": "px", "comment": "18px/1.125rem", + "$modes": { + "hds": "18", + "cds-g0": "1.25rem", + "cds-g10": "1.25rem", + "cds-g90": "1.25rem", + "cds-g100": "1.25rem" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { @@ -8826,6 +9667,13 @@ "$value": "18", "unit": "px", "comment": "18px/1.125rem", + "$modes": { + "hds": "18", + "cds-g0": "{carbon.typography.heading03.font-size}", + "cds-g10": "{carbon.typography.heading03.font-size}", + "cds-g90": "{carbon.typography.heading03.font-size}", + "cds-g100": "{carbon.typography.heading03.font-size}" + }, "key": "{typography.display-300.font-size}" }, "name": "token-typography-display-300-font-size", @@ -8843,12 +9691,26 @@ "$type": "number", "$value": 1.3333, "comment": "24px", + "$modes": { + "hds": 1.3333, + "cds-g0": 1.4, + "cds-g10": 1.4, + "cds-g90": 1.4, + "cds-g100": 1.4 + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "number", "$value": 1.3333, "comment": "24px", + "$modes": { + "hds": 1.3333, + "cds-g0": "{carbon.typography.heading03.line-height}", + "cds-g10": "{carbon.typography.heading03.line-height}", + "cds-g90": "{carbon.typography.heading03.line-height}", + "cds-g100": "{carbon.typography.heading03.line-height}" + }, "key": "{typography.display-300.line-height}" }, "name": "token-typography-display-300-line-height", @@ -8867,6 +9729,13 @@ "$value": "-0.5px", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { @@ -8874,6 +9743,13 @@ "$value": -0.5, "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading03.letter-spacing}", + "cds-g10": "{carbon.typography.heading03.letter-spacing}", + "cds-g90": "{carbon.typography.heading03.letter-spacing}", + "cds-g100": "{carbon.typography.heading03.letter-spacing}" + }, "key": "{typography.display-300.letter-spacing}" }, "name": "token-typography-display-300-letter-spacing", @@ -8892,11 +9768,25 @@ "key": "{typography.display-200.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$value": "{typography.font-stack.text}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-200.font-family}" }, "name": "token-typography-display-200-font-family", @@ -8915,6 +9805,13 @@ "$value": "1rem", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { @@ -8922,6 +9819,13 @@ "$value": "16", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.heading02.font-size}", + "cds-g10": "{carbon.typography.heading02.font-size}", + "cds-g90": "{carbon.typography.heading02.font-size}", + "cds-g100": "{carbon.typography.heading02.font-size}" + }, "key": "{typography.display-200.font-size}" }, "name": "token-typography-display-200-font-size", @@ -8939,12 +9843,26 @@ "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "hds": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "hds": 1.5, + "cds-g0": "{carbon.typography.heading02.line-height}", + "cds-g10": "{carbon.typography.heading02.line-height}", + "cds-g90": "{carbon.typography.heading02.line-height}", + "cds-g100": "{carbon.typography.heading02.line-height}" + }, "key": "{typography.display-200.line-height}" }, "name": "token-typography-display-200-line-height", @@ -8963,6 +9881,13 @@ "$value": "-0.5px", "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { @@ -8970,6 +9895,13 @@ "$value": -0.5, "unit": "px", "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading02.letter-spacing}", + "cds-g10": "{carbon.typography.heading02.letter-spacing}", + "cds-g90": "{carbon.typography.heading02.letter-spacing}", + "cds-g100": "{carbon.typography.heading02.letter-spacing}" + }, "key": "{typography.display-200.letter-spacing}" }, "name": "token-typography-display-200-letter-spacing", @@ -8988,11 +9920,25 @@ "key": "{typography.display-100.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-family", "$value": "{typography.font-stack.text}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.display-100.font-family}" }, "name": "token-typography-display-100-font-family", @@ -9011,6 +9957,13 @@ "$value": "0.8125rem", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { @@ -9018,6 +9971,13 @@ "$value": "13", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.heading01.font-size}", + "cds-g10": "{carbon.typography.heading01.font-size}", + "cds-g90": "{carbon.typography.heading01.font-size}", + "cds-g100": "{carbon.typography.heading01.font-size}" + }, "key": "{typography.display-100.font-size}" }, "name": "token-typography-display-100-font-size", @@ -9035,12 +9995,26 @@ "$type": "number", "$value": 1.3846, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "number", "$value": 1.3846, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": "{carbon.typography.heading01.line-height}", + "cds-g10": "{carbon.typography.heading01.line-height}", + "cds-g90": "{carbon.typography.heading01.line-height}", + "cds-g100": "{carbon.typography.heading01.line-height}" + }, "key": "{typography.display-100.line-height}" }, "name": "token-typography-display-100-line-height", @@ -9052,6 +10026,45 @@ "display-100", "line-height" ] + }, + "letter-spacing": { + "key": "{typography.display-100.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "0.16px", + "cds-g10": "0.16px", + "cds-g90": "0.16px", + "cds-g100": "0.16px" + }, + "filePath": "src/products/shared/typography.json", + "isSource": true, + "original": { + "$type": "letter-spacing", + "$value": 0, + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "{carbon.typography.heading01.letter-spacing}", + "cds-g10": "{carbon.typography.heading01.letter-spacing}", + "cds-g90": "{carbon.typography.heading01.letter-spacing}", + "cds-g100": "{carbon.typography.heading01.letter-spacing}" + }, + "key": "{typography.display-100.letter-spacing}" + }, + "name": "token-typography-display-100-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "letter-spacing" + ] } }, "body-300": { @@ -9059,11 +10072,25 @@ "key": "{typography.body-300.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-family", "$value": "{typography.font-stack.text}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-300.font-family}" }, "name": "token-typography-body-300-font-family", @@ -9082,6 +10109,13 @@ "$value": "1rem", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { @@ -9089,6 +10123,13 @@ "$value": "16", "unit": "px", "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.body02.font-size}", + "cds-g10": "{carbon.typography.body02.font-size}", + "cds-g90": "{carbon.typography.body02.font-size}", + "cds-g100": "{carbon.typography.body02.font-size}" + }, "key": "{typography.body-300.font-size}" }, "name": "token-typography-body-300-font-size", @@ -9106,12 +10147,26 @@ "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "hds": 1.4286, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "number", "$value": 1.5, "comment": "24px", + "$modes": { + "hds": 1.4286, + "cds-g0": "{carbon.typography.body02.line-height}", + "cds-g10": "{carbon.typography.body02.line-height}", + "cds-g90": "{carbon.typography.body02.line-height}", + "cds-g100": "{carbon.typography.body02.line-height}" + }, "key": "{typography.body-300.line-height}" }, "name": "token-typography-body-300-line-height", @@ -9130,11 +10185,25 @@ "key": "{typography.body-200.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-family", "$value": "{typography.font-stack.text}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-200.font-family}" }, "name": "token-typography-body-200-font-family", @@ -9153,6 +10222,13 @@ "$value": "0.875rem", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { @@ -9160,6 +10236,13 @@ "$value": "14", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "{carbon.typography.body01.font-size}", + "cds-g10": "{carbon.typography.body01.font-size}", + "cds-g90": "{carbon.typography.body01.font-size}", + "cds-g100": "{carbon.typography.body01.font-size}" + }, "key": "{typography.body-200.font-size}" }, "name": "token-typography-body-200-font-size", @@ -9177,12 +10260,26 @@ "$type": "number", "$value": 1.4286, "comment": "20px", + "$modes": { + "hds": 1.4286, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "number", "$value": 1.4286, "comment": "20px", + "$modes": { + "hds": 1.4286, + "cds-g0": "{carbon.typography.body01.line-height}", + "cds-g10": "{carbon.typography.body01.line-height}", + "cds-g90": "{carbon.typography.body01.line-height}", + "cds-g100": "{carbon.typography.body01.line-height}" + }, "key": "{typography.body-200.line-height}" }, "name": "token-typography-body-200-line-height", @@ -9201,11 +10298,25 @@ "key": "{typography.body-100.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "hds": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-family", "$value": "{typography.font-stack.text}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, "key": "{typography.body-100.font-family}" }, "name": "token-typography-body-100-font-family", @@ -9224,6 +10335,13 @@ "$value": "0.8125rem", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { @@ -9231,6 +10349,13 @@ "$value": "13", "unit": "px", "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.bodyCompact01.font-size}", + "cds-g10": "{carbon.typography.bodyCompact01.font-size}", + "cds-g90": "{carbon.typography.bodyCompact01.font-size}", + "cds-g100": "{carbon.typography.bodyCompact01.font-size}" + }, "key": "{typography.body-100.font-size}" }, "name": "token-typography-body-100-font-size", @@ -9248,12 +10373,26 @@ "$type": "number", "$value": 1.3846, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "number", "$value": 1.3846, "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": "{carbon.typography.bodyCompact01.line-height}", + "cds-g10": "{carbon.typography.bodyCompact01.line-height}", + "cds-g90": "{carbon.typography.bodyCompact01.line-height}", + "cds-g100": "{carbon.typography.bodyCompact01.line-height}" + }, "key": "{typography.body-100.line-height}" }, "name": "token-typography-body-100-line-height", @@ -9267,73 +10406,115 @@ ] } }, - "code-100": { + "code-300": { "font-family": { - "key": "{typography.code-100.font-family}", + "key": "{typography.code-300.font-family}", "$type": "font-family", "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "hds": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-family", "$value": "{typography.font-stack.code}", - "key": "{typography.code-100.font-family}" + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-300.font-family}" }, - "name": "token-typography-code-100-font-family", + "name": "token-typography-code-300-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "font-family" ] }, "font-size": { - "key": "{typography.code-100.font-size}", + "key": "{typography.code-300.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "1rem", "unit": "px", - "comment": "13px/0.8125rem", + "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-size", - "$value": "13", + "$value": "16", "unit": "px", - "comment": "13px/0.8125rem", - "key": "{typography.code-100.font-size}" + "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-300.font-size}" }, - "name": "token-typography-code-100-font-size", + "name": "token-typography-code-300-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "font-size" ] }, "line-height": { - "key": "{typography.code-100.line-height}", + "key": "{typography.code-300.line-height}", "$type": "number", - "$value": 1.23, - "comment": "16px", + "$value": 1.25, + "comment": "20px", + "$modes": { + "hds": 1.25, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "number", - "$value": 1.23, - "comment": "16px", - "key": "{typography.code-100.line-height}" + "$value": 1.25, + "comment": "20px", + "$modes": { + "hds": 1.25, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-300.line-height}" }, - "name": "token-typography-code-100-line-height", + "name": "token-typography-code-300-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "code-300", "line-height" ] } @@ -9343,11 +10524,25 @@ "key": "{typography.code-200.font-family}", "$type": "font-family", "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "hds": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-family", "$value": "{typography.font-stack.code}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, "key": "{typography.code-200.font-family}" }, "name": "token-typography-code-200-font-family", @@ -9366,6 +10561,13 @@ "$value": "0.875rem", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { @@ -9373,6 +10575,13 @@ "$value": "14", "unit": "px", "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, "key": "{typography.code-200.font-size}" }, "name": "token-typography-code-200-font-size", @@ -9390,12 +10599,26 @@ "$type": "number", "$value": 1.125, "comment": "18px", + "$modes": { + "hds": 1.125, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "number", "$value": 1.125, "comment": "18px", + "$modes": { + "hds": 1.125, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, "key": "{typography.code-200.line-height}" }, "name": "token-typography-code-200-line-height", @@ -9409,73 +10632,115 @@ ] } }, - "code-300": { + "code-100": { "font-family": { - "key": "{typography.code-300.font-family}", + "key": "{typography.code-100.font-family}", "$type": "font-family", "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "hds": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-family", "$value": "{typography.font-stack.code}", - "key": "{typography.code-300.font-family}" + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-100.font-family}" }, - "name": "token-typography-code-300-font-family", + "name": "token-typography-code-100-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "font-family" ] }, "font-size": { - "key": "{typography.code-300.font-size}", + "key": "{typography.code-100.font-size}", "$type": "font-size", - "$value": "1rem", + "$value": "0.8125rem", "unit": "px", - "comment": "16px/1rem", + "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "font-size", - "$value": "16", + "$value": "13", "unit": "px", - "comment": "16px/1rem", - "key": "{typography.code-300.font-size}" + "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-100.font-size}" }, - "name": "token-typography-code-300-font-size", + "name": "token-typography-code-100-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "font-size" ] }, "line-height": { - "key": "{typography.code-300.line-height}", + "key": "{typography.code-100.line-height}", "$type": "number", - "$value": 1.25, - "comment": "20px", + "$value": 1.23, + "comment": "16px", + "$modes": { + "hds": 1.23, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, "filePath": "src/products/shared/typography.json", "isSource": true, "original": { "$type": "number", - "$value": 1.25, - "comment": "20px", - "key": "{typography.code-300.line-height}" + "$value": 1.23, + "comment": "16px", + "$modes": { + "hds": 1.23, + "cds-g0": "{carbon.typography.code01.line-height}", + "cds-g10": "{carbon.typography.code01.line-height}", + "cds-g90": "{carbon.typography.code01.line-height}", + "cds-g100": "{carbon.typography.code01.line-height}" + }, + "key": "{typography.code-100.line-height}" }, - "name": "token-typography-code-300-line-height", + "name": "token-typography-code-100-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "code-100", "line-height" ] } diff --git a/packages/tokens/dist/products/css/helpers/typography.css b/packages/tokens/dist/products/css/helpers/typography.css index c0913ef1a67..63dd3021863 100644 --- a/packages/tokens/dist/products/css/helpers/typography.css +++ b/packages/tokens/dist/products/css/helpers/typography.css @@ -17,6 +17,6 @@ .hds-typography-body-300 { font-family: var(--token-typography-body-300-font-family); font-size: var(--token-typography-body-300-font-size); line-height: var(--token-typography-body-300-line-height); margin: 0; padding: 0; } .hds-typography-body-200 { font-family: var(--token-typography-body-200-font-family); font-size: var(--token-typography-body-200-font-size); line-height: var(--token-typography-body-200-line-height); margin: 0; padding: 0; } .hds-typography-body-100 { font-family: var(--token-typography-body-100-font-family); font-size: var(--token-typography-body-100-font-size); line-height: var(--token-typography-body-100-line-height); margin: 0; padding: 0; } -.hds-typography-code-100 { font-family: var(--token-typography-code-100-font-family); font-size: var(--token-typography-code-100-font-size); line-height: var(--token-typography-code-100-line-height); margin: 0; padding: 0; } -.hds-typography-code-200 { font-family: var(--token-typography-code-200-font-family); font-size: var(--token-typography-code-200-font-size); line-height: var(--token-typography-code-200-line-height); margin: 0; padding: 0; } .hds-typography-code-300 { font-family: var(--token-typography-code-300-font-family); font-size: var(--token-typography-code-300-font-size); line-height: var(--token-typography-code-300-line-height); margin: 0; padding: 0; } +.hds-typography-code-200 { font-family: var(--token-typography-code-200-font-family); font-size: var(--token-typography-code-200-font-size); line-height: var(--token-typography-code-200-line-height); margin: 0; padding: 0; } +.hds-typography-code-100 { font-family: var(--token-typography-code-100-font-family); font-size: var(--token-typography-code-100-font-size); line-height: var(--token-typography-code-100-line-height); margin: 0; padding: 0; } diff --git a/packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-combined-strategies/tokens.css index 10d25272e3a..a8ce4c5aae2 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 @@ -6,32 +6,369 @@ .hds-theme-hds, [data-hds-theme="hds"] { --token-color-palette-neutral-0: #ffffff; - --token-color-foreground-primary: #ffffff; + --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: #0c56e9; + --token-color-focus-critical-external: #5990ff; /** 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: #8c909c; + --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: #ffffff; + --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-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-500-letter-spacing: -0.5px; /** this is `tracking` */ + --token-typography-display-400-font-family: + -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, + Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-display-400-font-size: 1.5rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.3333; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --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-display-100-letter-spacing: 0px; /** this is `tracking` */ + --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.4286; /** 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-300-font-family: + ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.25; /** 20px */ + --token-typography-code-200-font-family: + ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.125; /** 18px */ + --token-typography-code-100-font-family: + ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-100-font-size: 0.8125rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.23; /** 16px */ } @media (prefers-color-scheme: light) { :root:not([class*="hds-theme-"]):not([data-hds-theme]) { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #c6c6c6; + --token-color-border-faint: #e0e0e0; + --token-color-border-strong: #c6c6c6; + --token-color-border-action: #0f62fe; + --token-color-border-highlight: #be95ff; + --token-color-border-success: #42be65; + --token-color-border-warning: #ff832b; + --token-color-border-critical: #ff8389; + --token-color-focus-action-internal: #ffffff; + --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #ffffff; + --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #161616; --token-color-foreground-primary: #161616; + --token-color-foreground-faint: #161616; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: rgba(22, 22, 22, 0.25); + --token-color-foreground-action: #0f62fe; + --token-color-foreground-action-hover: #0043ce; + --token-color-foreground-action-active: #0043ce; + --token-color-foreground-highlight: #8a3ffc; + --token-color-foreground-highlight-on-surface: #6929c4; + --token-color-foreground-highlight-high-contrast: #491d8b; + --token-color-foreground-success: #198038; + --token-color-foreground-success-on-surface: #0e6027; + --token-color-foreground-success-high-contrast: #044317; + --token-color-foreground-warning: #ba4e00; + --token-color-foreground-warning-on-surface: #8a3800; + --token-color-foreground-warning-high-contrast: #5e2900; + --token-color-foreground-critical: #da1e28; + --token-color-foreground-critical-on-surface: #a2191f; + --token-color-foreground-critical-high-contrast: #750e13; + --token-color-page-primary: #ffffff; + --token-color-page-faint: #ffffff; + --token-color-surface-primary: #f4f4f4; + --token-color-surface-faint: #f4f4f4; + --token-color-surface-strong: #f4f4f4; + --token-color-surface-interactive: #f4f4f4; + --token-color-surface-interactive-hover: #e8e8e8; + --token-color-surface-interactive-active: #c6c6c6; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #d0e2ff; + --token-color-surface-highlight: #e8daff; + --token-color-surface-success: #a7f0ba; + --token-color-surface-warning: #ffd9be; + --token-color-surface-critical: #ffd7d9; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } } @media (prefers-color-scheme: dark) { :root:not([class*="hds-theme-"]):not([data-hds-theme]) { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #6f6f6f; + --token-color-border-faint: #393939; + --token-color-border-strong: #525252; + --token-color-border-action: #4589ff; + --token-color-border-highlight: #a56eff; + --token-color-border-success: #24a148; + --token-color-border-warning: #eb6200; + --token-color-border-critical: #fa4d56; + --token-color-focus-action-internal: #161616; + --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #161616; + --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #f4f4f4; --token-color-foreground-primary: #f4f4f4; + --token-color-foreground-faint: #f4f4f4; + --token-color-foreground-high-contrast: #161616; + --token-color-foreground-disabled: rgba(244, 244, 244, 0.25); + --token-color-foreground-action: #78a9ff; + --token-color-foreground-action-hover: #a6c8ff; + --token-color-foreground-action-active: #a6c8ff; + --token-color-foreground-highlight: #be95ff; + --token-color-foreground-highlight-on-surface: #d4bbff; + --token-color-foreground-highlight-high-contrast: #d4bbff; + --token-color-foreground-success: #42be65; + --token-color-foreground-success-on-surface: #6fdc8c; + --token-color-foreground-success-high-contrast: #a7f0ba; + --token-color-foreground-warning: #ff832b; + --token-color-foreground-warning-on-surface: #ffb784; + --token-color-foreground-warning-high-contrast: #ffd9be; + --token-color-foreground-critical: #ff8389; + --token-color-foreground-critical-on-surface: #ffb3b8; + --token-color-foreground-critical-high-contrast: #ffd7d9; + --token-color-page-primary: #161616; + --token-color-page-faint: #161616; + --token-color-surface-primary: #262626; + --token-color-surface-faint: #262626; + --token-color-surface-strong: #262626; + --token-color-surface-interactive: #262626; + --token-color-surface-interactive-hover: #333333; + --token-color-surface-interactive-active: #525252; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #0043ce; + --token-color-surface-highlight: #6929c4; + --token-color-surface-success: #0e6027; + --token-color-surface-warning: #8a3800; + --token-color-surface-critical: #a2191f; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } } @@ -40,31 +377,373 @@ [data-hds-theme="light"], [data-hds-theme="cds-g0"] { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #c6c6c6; + --token-color-border-faint: #e0e0e0; + --token-color-border-strong: #c6c6c6; + --token-color-border-action: #0f62fe; + --token-color-border-highlight: #be95ff; + --token-color-border-success: #42be65; + --token-color-border-warning: #ff832b; + --token-color-border-critical: #ff8389; + --token-color-focus-action-internal: #ffffff; + --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #ffffff; + --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #161616; --token-color-foreground-primary: #161616; + --token-color-foreground-faint: #161616; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: rgba(22, 22, 22, 0.25); + --token-color-foreground-action: #0f62fe; + --token-color-foreground-action-hover: #0043ce; + --token-color-foreground-action-active: #0043ce; + --token-color-foreground-highlight: #8a3ffc; + --token-color-foreground-highlight-on-surface: #6929c4; + --token-color-foreground-highlight-high-contrast: #491d8b; + --token-color-foreground-success: #198038; + --token-color-foreground-success-on-surface: #0e6027; + --token-color-foreground-success-high-contrast: #044317; + --token-color-foreground-warning: #ba4e00; + --token-color-foreground-warning-on-surface: #8a3800; + --token-color-foreground-warning-high-contrast: #5e2900; + --token-color-foreground-critical: #da1e28; + --token-color-foreground-critical-on-surface: #a2191f; + --token-color-foreground-critical-high-contrast: #750e13; + --token-color-page-primary: #ffffff; + --token-color-page-faint: #ffffff; + --token-color-surface-primary: #f4f4f4; + --token-color-surface-faint: #f4f4f4; + --token-color-surface-strong: #f4f4f4; + --token-color-surface-interactive: #f4f4f4; + --token-color-surface-interactive-hover: #e8e8e8; + --token-color-surface-interactive-active: #c6c6c6; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #d0e2ff; + --token-color-surface-highlight: #e8daff; + --token-color-surface-success: #a7f0ba; + --token-color-surface-warning: #ffd9be; + --token-color-surface-critical: #ffd7d9; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } .hds-theme-cds-g10, [data-hds-theme="cds-g10"] { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #e0e0e0; + --token-color-border-faint: #c6c6c6; + --token-color-border-strong: #e0e0e0; + --token-color-border-action: #0f62fe; + --token-color-border-highlight: #be95ff; + --token-color-border-success: #42be65; + --token-color-border-warning: #ff832b; + --token-color-border-critical: #ff8389; + --token-color-focus-action-internal: #ffffff; + --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #ffffff; + --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #161616; --token-color-foreground-primary: #161616; + --token-color-foreground-faint: #161616; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: rgba(22, 22, 22, 0.25); + --token-color-foreground-action: #0f62fe; + --token-color-foreground-action-hover: #0043ce; + --token-color-foreground-action-active: #0043ce; + --token-color-foreground-highlight: #8a3ffc; + --token-color-foreground-highlight-on-surface: #6929c4; + --token-color-foreground-highlight-high-contrast: #491d8b; + --token-color-foreground-success: #198038; + --token-color-foreground-success-on-surface: #0e6027; + --token-color-foreground-success-high-contrast: #044317; + --token-color-foreground-warning: #ba4e00; + --token-color-foreground-warning-on-surface: #8a3800; + --token-color-foreground-warning-high-contrast: #5e2900; + --token-color-foreground-critical: #da1e28; + --token-color-foreground-critical-on-surface: #a2191f; + --token-color-foreground-critical-high-contrast: #750e13; + --token-color-page-primary: #f4f4f4; + --token-color-page-faint: #f4f4f4; + --token-color-surface-primary: #ffffff; + --token-color-surface-faint: #ffffff; + --token-color-surface-strong: #ffffff; + --token-color-surface-interactive: #ffffff; + --token-color-surface-interactive-hover: #e8e8e8; + --token-color-surface-interactive-active: #c6c6c6; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #d0e2ff; + --token-color-surface-highlight: #e8daff; + --token-color-surface-success: #a7f0ba; + --token-color-surface-warning: #ffd9be; + --token-color-surface-critical: #ffd7d9; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } .hds-theme-cds-g90, [data-hds-theme="cds-g90"] { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #8d8d8d; + --token-color-border-faint: #525252; + --token-color-border-strong: #6f6f6f; + --token-color-border-action: #4589ff; + --token-color-border-highlight: #a56eff; + --token-color-border-success: #24a148; + --token-color-border-warning: #eb6200; + --token-color-border-critical: #fa4d56; + --token-color-focus-action-internal: #161616; + --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #161616; + --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #f4f4f4; --token-color-foreground-primary: #f4f4f4; + --token-color-foreground-faint: #f4f4f4; + --token-color-foreground-high-contrast: #161616; + --token-color-foreground-disabled: rgba(244, 244, 244, 0.25); + --token-color-foreground-action: #78a9ff; + --token-color-foreground-action-hover: #a6c8ff; + --token-color-foreground-action-active: #a6c8ff; + --token-color-foreground-highlight: #be95ff; + --token-color-foreground-highlight-on-surface: #d4bbff; + --token-color-foreground-highlight-high-contrast: #e8daff; + --token-color-foreground-success: #42be65; + --token-color-foreground-success-on-surface: #6fdc8c; + --token-color-foreground-success-high-contrast: #a7f0ba; + --token-color-foreground-warning: #ff832b; + --token-color-foreground-warning-on-surface: #ffb784; + --token-color-foreground-warning-high-contrast: #ffd9be; + --token-color-foreground-critical: #ff8389; + --token-color-foreground-critical-on-surface: #ffb3b8; + --token-color-foreground-critical-high-contrast: #ffd7d9; + --token-color-page-primary: #262626; + --token-color-page-faint: #262626; + --token-color-surface-primary: #393939; + --token-color-surface-faint: #393939; + --token-color-surface-strong: #393939; + --token-color-surface-interactive: #393939; + --token-color-surface-interactive-hover: #474747; + --token-color-surface-interactive-active: #6f6f6f; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #0043ce; + --token-color-surface-highlight: #6929c4; + --token-color-surface-success: #0e6027; + --token-color-surface-warning: #8a3800; + --token-color-surface-critical: #a2191f; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } .hds-theme-dark, @@ -72,11 +751,125 @@ [data-hds-theme="dark"], [data-hds-theme="cds-g100"] { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #6f6f6f; + --token-color-border-faint: #393939; + --token-color-border-strong: #525252; + --token-color-border-action: #4589ff; + --token-color-border-highlight: #a56eff; + --token-color-border-success: #24a148; + --token-color-border-warning: #eb6200; + --token-color-border-critical: #fa4d56; + --token-color-focus-action-internal: #161616; + --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #161616; + --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #f4f4f4; --token-color-foreground-primary: #f4f4f4; + --token-color-foreground-faint: #f4f4f4; + --token-color-foreground-high-contrast: #161616; + --token-color-foreground-disabled: rgba(244, 244, 244, 0.25); + --token-color-foreground-action: #78a9ff; + --token-color-foreground-action-hover: #a6c8ff; + --token-color-foreground-action-active: #a6c8ff; + --token-color-foreground-highlight: #be95ff; + --token-color-foreground-highlight-on-surface: #d4bbff; + --token-color-foreground-highlight-high-contrast: #d4bbff; + --token-color-foreground-success: #42be65; + --token-color-foreground-success-on-surface: #6fdc8c; + --token-color-foreground-success-high-contrast: #a7f0ba; + --token-color-foreground-warning: #ff832b; + --token-color-foreground-warning-on-surface: #ffb784; + --token-color-foreground-warning-high-contrast: #ffd9be; + --token-color-foreground-critical: #ff8389; + --token-color-foreground-critical-on-surface: #ffb3b8; + --token-color-foreground-critical-high-contrast: #ffd7d9; + --token-color-page-primary: #161616; + --token-color-page-faint: #161616; + --token-color-surface-primary: #262626; + --token-color-surface-faint: #262626; + --token-color-surface-strong: #262626; + --token-color-surface-interactive: #262626; + --token-color-surface-interactive-hover: #333333; + --token-color-surface-interactive-active: #525252; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #0043ce; + --token-color-surface-highlight: #6929c4; + --token-color-surface-success: #0e6027; + --token-color-surface-warning: #8a3800; + --token-color-surface-critical: #a2191f; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } :root { @@ -125,51 +918,6 @@ --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; @@ -284,7 +1032,7 @@ --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; + inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff; --token-app-header-height: 60px; --token-app-header-home-link-size: 36px; --token-app-header-logo-size: 28px; @@ -344,14 +1092,14 @@ --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-foreground-color: #8c909c; --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-foreground-color: #3b3d45; --token-form-control-readonly-surface-color: #f1f2f3; --token-form-control-readonly-border-color: #656a761a; --token-form-control-disabled-foreground-color: #8c909c; @@ -454,65 +1202,4 @@ --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 bf19944a35b..fd8f6783450 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 @@ -6,11 +6,120 @@ .hds-theme-hds, [data-hds-theme="hds"] { --token-color-palette-neutral-0: #ffffff; - --token-color-foreground-primary: #ffffff; + --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: #0c56e9; + --token-color-focus-critical-external: #5990ff; /** 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: #8c909c; + --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: #ffffff; + --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-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-500-letter-spacing: -0.5px; /** this is `tracking` */ + --token-typography-display-400-font-family: + -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, + Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-display-400-font-size: 1.5rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.3333; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --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-display-100-letter-spacing: 0px; /** this is `tracking` */ + --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.4286; /** 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-300-font-family: + ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.25; /** 20px */ + --token-typography-code-200-font-family: + ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.125; /** 18px */ + --token-typography-code-100-font-family: + ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-100-font-size: 0.8125rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.23; /** 16px */ } .hds-theme-light, @@ -18,31 +127,373 @@ [data-hds-theme="light"], [data-hds-theme="cds-g0"] { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #c6c6c6; + --token-color-border-faint: #e0e0e0; + --token-color-border-strong: #c6c6c6; + --token-color-border-action: #0f62fe; + --token-color-border-highlight: #be95ff; + --token-color-border-success: #42be65; + --token-color-border-warning: #ff832b; + --token-color-border-critical: #ff8389; + --token-color-focus-action-internal: #ffffff; + --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #ffffff; + --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #161616; --token-color-foreground-primary: #161616; + --token-color-foreground-faint: #161616; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: rgba(22, 22, 22, 0.25); + --token-color-foreground-action: #0f62fe; + --token-color-foreground-action-hover: #0043ce; + --token-color-foreground-action-active: #0043ce; + --token-color-foreground-highlight: #8a3ffc; + --token-color-foreground-highlight-on-surface: #6929c4; + --token-color-foreground-highlight-high-contrast: #491d8b; + --token-color-foreground-success: #198038; + --token-color-foreground-success-on-surface: #0e6027; + --token-color-foreground-success-high-contrast: #044317; + --token-color-foreground-warning: #ba4e00; + --token-color-foreground-warning-on-surface: #8a3800; + --token-color-foreground-warning-high-contrast: #5e2900; + --token-color-foreground-critical: #da1e28; + --token-color-foreground-critical-on-surface: #a2191f; + --token-color-foreground-critical-high-contrast: #750e13; + --token-color-page-primary: #ffffff; + --token-color-page-faint: #ffffff; + --token-color-surface-primary: #f4f4f4; + --token-color-surface-faint: #f4f4f4; + --token-color-surface-strong: #f4f4f4; + --token-color-surface-interactive: #f4f4f4; + --token-color-surface-interactive-hover: #e8e8e8; + --token-color-surface-interactive-active: #c6c6c6; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #d0e2ff; + --token-color-surface-highlight: #e8daff; + --token-color-surface-success: #a7f0ba; + --token-color-surface-warning: #ffd9be; + --token-color-surface-critical: #ffd7d9; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } .hds-theme-cds-g10, [data-hds-theme="cds-g10"] { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #e0e0e0; + --token-color-border-faint: #c6c6c6; + --token-color-border-strong: #e0e0e0; + --token-color-border-action: #0f62fe; + --token-color-border-highlight: #be95ff; + --token-color-border-success: #42be65; + --token-color-border-warning: #ff832b; + --token-color-border-critical: #ff8389; + --token-color-focus-action-internal: #ffffff; + --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #ffffff; + --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #161616; --token-color-foreground-primary: #161616; + --token-color-foreground-faint: #161616; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: rgba(22, 22, 22, 0.25); + --token-color-foreground-action: #0f62fe; + --token-color-foreground-action-hover: #0043ce; + --token-color-foreground-action-active: #0043ce; + --token-color-foreground-highlight: #8a3ffc; + --token-color-foreground-highlight-on-surface: #6929c4; + --token-color-foreground-highlight-high-contrast: #491d8b; + --token-color-foreground-success: #198038; + --token-color-foreground-success-on-surface: #0e6027; + --token-color-foreground-success-high-contrast: #044317; + --token-color-foreground-warning: #ba4e00; + --token-color-foreground-warning-on-surface: #8a3800; + --token-color-foreground-warning-high-contrast: #5e2900; + --token-color-foreground-critical: #da1e28; + --token-color-foreground-critical-on-surface: #a2191f; + --token-color-foreground-critical-high-contrast: #750e13; + --token-color-page-primary: #f4f4f4; + --token-color-page-faint: #f4f4f4; + --token-color-surface-primary: #ffffff; + --token-color-surface-faint: #ffffff; + --token-color-surface-strong: #ffffff; + --token-color-surface-interactive: #ffffff; + --token-color-surface-interactive-hover: #e8e8e8; + --token-color-surface-interactive-active: #c6c6c6; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #d0e2ff; + --token-color-surface-highlight: #e8daff; + --token-color-surface-success: #a7f0ba; + --token-color-surface-warning: #ffd9be; + --token-color-surface-critical: #ffd7d9; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } .hds-theme-cds-g90, [data-hds-theme="cds-g90"] { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #8d8d8d; + --token-color-border-faint: #525252; + --token-color-border-strong: #6f6f6f; + --token-color-border-action: #4589ff; + --token-color-border-highlight: #a56eff; + --token-color-border-success: #24a148; + --token-color-border-warning: #eb6200; + --token-color-border-critical: #fa4d56; + --token-color-focus-action-internal: #161616; + --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #161616; + --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #f4f4f4; --token-color-foreground-primary: #f4f4f4; + --token-color-foreground-faint: #f4f4f4; + --token-color-foreground-high-contrast: #161616; + --token-color-foreground-disabled: rgba(244, 244, 244, 0.25); + --token-color-foreground-action: #78a9ff; + --token-color-foreground-action-hover: #a6c8ff; + --token-color-foreground-action-active: #a6c8ff; + --token-color-foreground-highlight: #be95ff; + --token-color-foreground-highlight-on-surface: #d4bbff; + --token-color-foreground-highlight-high-contrast: #e8daff; + --token-color-foreground-success: #42be65; + --token-color-foreground-success-on-surface: #6fdc8c; + --token-color-foreground-success-high-contrast: #a7f0ba; + --token-color-foreground-warning: #ff832b; + --token-color-foreground-warning-on-surface: #ffb784; + --token-color-foreground-warning-high-contrast: #ffd9be; + --token-color-foreground-critical: #ff8389; + --token-color-foreground-critical-on-surface: #ffb3b8; + --token-color-foreground-critical-high-contrast: #ffd7d9; + --token-color-page-primary: #262626; + --token-color-page-faint: #262626; + --token-color-surface-primary: #393939; + --token-color-surface-faint: #393939; + --token-color-surface-strong: #393939; + --token-color-surface-interactive: #393939; + --token-color-surface-interactive-hover: #474747; + --token-color-surface-interactive-active: #6f6f6f; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #0043ce; + --token-color-surface-highlight: #6929c4; + --token-color-surface-success: #0e6027; + --token-color-surface-warning: #8a3800; + --token-color-surface-critical: #a2191f; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } .hds-theme-dark, @@ -50,11 +501,125 @@ [data-hds-theme="dark"], [data-hds-theme="cds-g100"] { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #6f6f6f; + --token-color-border-faint: #393939; + --token-color-border-strong: #525252; + --token-color-border-action: #4589ff; + --token-color-border-highlight: #a56eff; + --token-color-border-success: #24a148; + --token-color-border-warning: #eb6200; + --token-color-border-critical: #fa4d56; + --token-color-focus-action-internal: #161616; + --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #161616; + --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #f4f4f4; --token-color-foreground-primary: #f4f4f4; + --token-color-foreground-faint: #f4f4f4; + --token-color-foreground-high-contrast: #161616; + --token-color-foreground-disabled: rgba(244, 244, 244, 0.25); + --token-color-foreground-action: #78a9ff; + --token-color-foreground-action-hover: #a6c8ff; + --token-color-foreground-action-active: #a6c8ff; + --token-color-foreground-highlight: #be95ff; + --token-color-foreground-highlight-on-surface: #d4bbff; + --token-color-foreground-highlight-high-contrast: #d4bbff; + --token-color-foreground-success: #42be65; + --token-color-foreground-success-on-surface: #6fdc8c; + --token-color-foreground-success-high-contrast: #a7f0ba; + --token-color-foreground-warning: #ff832b; + --token-color-foreground-warning-on-surface: #ffb784; + --token-color-foreground-warning-high-contrast: #ffd9be; + --token-color-foreground-critical: #ff8389; + --token-color-foreground-critical-on-surface: #ffb3b8; + --token-color-foreground-critical-high-contrast: #ffd7d9; + --token-color-page-primary: #161616; + --token-color-page-faint: #161616; + --token-color-surface-primary: #262626; + --token-color-surface-faint: #262626; + --token-color-surface-strong: #262626; + --token-color-surface-interactive: #262626; + --token-color-surface-interactive-hover: #333333; + --token-color-surface-interactive-active: #525252; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #0043ce; + --token-color-surface-highlight: #6929c4; + --token-color-surface-success: #0e6027; + --token-color-surface-warning: #8a3800; + --token-color-surface-critical: #a2191f; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } :root { @@ -103,51 +668,6 @@ --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; @@ -262,7 +782,7 @@ --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; + inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff; --token-app-header-height: 60px; --token-app-header-home-link-size: 36px; --token-app-header-logo-size: 28px; @@ -322,14 +842,14 @@ --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-foreground-color: #8c909c; --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-foreground-color: #3b3d45; --token-form-control-readonly-surface-color: #f1f2f3; --token-form-control-readonly-border-color: #656a761a; --token-form-control-disabled-foreground-color: #8c909c; @@ -432,65 +952,4 @@ --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 ea15c4eb802..de81d5a03b0 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 @@ -5,22 +5,250 @@ @media (prefers-color-scheme: light) { :root { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #c6c6c6; + --token-color-border-faint: #e0e0e0; + --token-color-border-strong: #c6c6c6; + --token-color-border-action: #0f62fe; + --token-color-border-highlight: #be95ff; + --token-color-border-success: #42be65; + --token-color-border-warning: #ff832b; + --token-color-border-critical: #ff8389; + --token-color-focus-action-internal: #ffffff; + --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #ffffff; + --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #161616; --token-color-foreground-primary: #161616; + --token-color-foreground-faint: #161616; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: rgba(22, 22, 22, 0.25); + --token-color-foreground-action: #0f62fe; + --token-color-foreground-action-hover: #0043ce; + --token-color-foreground-action-active: #0043ce; + --token-color-foreground-highlight: #8a3ffc; + --token-color-foreground-highlight-on-surface: #6929c4; + --token-color-foreground-highlight-high-contrast: #491d8b; + --token-color-foreground-success: #198038; + --token-color-foreground-success-on-surface: #0e6027; + --token-color-foreground-success-high-contrast: #044317; + --token-color-foreground-warning: #ba4e00; + --token-color-foreground-warning-on-surface: #8a3800; + --token-color-foreground-warning-high-contrast: #5e2900; + --token-color-foreground-critical: #da1e28; + --token-color-foreground-critical-on-surface: #a2191f; + --token-color-foreground-critical-high-contrast: #750e13; + --token-color-page-primary: #ffffff; + --token-color-page-faint: #ffffff; + --token-color-surface-primary: #f4f4f4; + --token-color-surface-faint: #f4f4f4; + --token-color-surface-strong: #f4f4f4; + --token-color-surface-interactive: #f4f4f4; + --token-color-surface-interactive-hover: #e8e8e8; + --token-color-surface-interactive-active: #c6c6c6; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #d0e2ff; + --token-color-surface-highlight: #e8daff; + --token-color-surface-success: #a7f0ba; + --token-color-surface-warning: #ffd9be; + --token-color-surface-critical: #ffd7d9; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } } @media (prefers-color-scheme: dark) { :root { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #6f6f6f; + --token-color-border-faint: #393939; + --token-color-border-strong: #525252; + --token-color-border-action: #4589ff; + --token-color-border-highlight: #a56eff; + --token-color-border-success: #24a148; + --token-color-border-warning: #eb6200; + --token-color-border-critical: #fa4d56; + --token-color-focus-action-internal: #161616; + --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #161616; + --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #f4f4f4; --token-color-foreground-primary: #f4f4f4; + --token-color-foreground-faint: #f4f4f4; + --token-color-foreground-high-contrast: #161616; + --token-color-foreground-disabled: rgba(244, 244, 244, 0.25); + --token-color-foreground-action: #78a9ff; + --token-color-foreground-action-hover: #a6c8ff; + --token-color-foreground-action-active: #a6c8ff; + --token-color-foreground-highlight: #be95ff; + --token-color-foreground-highlight-on-surface: #d4bbff; + --token-color-foreground-highlight-high-contrast: #d4bbff; + --token-color-foreground-success: #42be65; + --token-color-foreground-success-on-surface: #6fdc8c; + --token-color-foreground-success-high-contrast: #a7f0ba; + --token-color-foreground-warning: #ff832b; + --token-color-foreground-warning-on-surface: #ffb784; + --token-color-foreground-warning-high-contrast: #ffd9be; + --token-color-foreground-critical: #ff8389; + --token-color-foreground-critical-on-surface: #ffb3b8; + --token-color-foreground-critical-high-contrast: #ffd7d9; + --token-color-page-primary: #161616; + --token-color-page-faint: #161616; + --token-color-surface-primary: #262626; + --token-color-surface-faint: #262626; + --token-color-surface-strong: #262626; + --token-color-surface-interactive: #262626; + --token-color-surface-interactive-hover: #333333; + --token-color-surface-interactive-active: #525252; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #0043ce; + --token-color-surface-highlight: #6929c4; + --token-color-surface-success: #0e6027; + --token-color-surface-warning: #8a3800; + --token-color-surface-critical: #a2191f; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } } @@ -70,51 +298,6 @@ --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; @@ -229,7 +412,7 @@ --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; + inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff; --token-app-header-height: 60px; --token-app-header-home-link-size: 36px; --token-app-header-logo-size: 28px; @@ -289,14 +472,14 @@ --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-foreground-color: #8c909c; --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-foreground-color: #3b3d45; --token-form-control-readonly-surface-color: #f1f2f3; --token-form-control-readonly-border-color: #656a761a; --token-form-control-disabled-foreground-color: #8c909c; @@ -399,65 +582,4 @@ --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-g0/common-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g0/common-tokens.css index 68a70888748..42f1043deb8 100644 --- 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 @@ -48,51 +48,6 @@ --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; @@ -192,8 +147,8 @@ --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-focus-ring-action-box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe; + --token-focus-ring-critical-box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe; --token-app-header-height: 60px; --token-app-header-home-link-size: 36px; --token-app-header-logo-size: 28px; @@ -221,10 +176,10 @@ --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-label-color: #161616; + --token-form-legend-color: #161616; + --token-form-helper-text-color: #161616; + --token-form-indicator-optional-color: #161616; --token-form-error-color: #c00005; --token-form-error-icon-size: 14px; --token-form-checkbox-size: 16px; @@ -235,10 +190,10 @@ --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-foreground-value-color: #161616; + --token-form-control-base-foreground-placeholder-color: #161616; + --token-form-control-base-surface-color-default: #f4f4f4; + --token-form-control-base-surface-color-hover: #e8e8e8; --token-form-control-base-border-color-default: #8c909c; --token-form-control-base-border-color-hover: #656a76; --token-form-control-checked-foreground-color: #ffffff; @@ -249,11 +204,11 @@ --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-readonly-surface-color: #f4f4f4; + --token-form-control-readonly-border-color: #e0e0e0; + --token-form-control-disabled-foreground-color: rgba(22, 22, 22, 0.25); + --token-form-control-disabled-surface-color: #ff0000; + --token-form-control-disabled-border-color: #c6c6c6; --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; @@ -282,7 +237,7 @@ --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-base-surface-color-default: #f4f4f4; /** 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; @@ -344,42 +299,4 @@ --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 index 7d64c22dd81..7b4fa2b06aa 100644 --- 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 @@ -4,9 +4,95 @@ :root { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #c6c6c6; + --token-color-border-faint: #e0e0e0; + --token-color-border-strong: #c6c6c6; + --token-color-border-action: #0f62fe; + --token-color-border-highlight: #be95ff; + --token-color-border-success: #42be65; + --token-color-border-warning: #ff832b; + --token-color-border-critical: #ff8389; + --token-color-focus-action-internal: #ffffff; + --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #ffffff; + --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #161616; --token-color-foreground-primary: #161616; + --token-color-foreground-faint: #161616; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: rgba(22, 22, 22, 0.25); + --token-color-foreground-action: #0f62fe; + --token-color-foreground-action-hover: #0043ce; + --token-color-foreground-action-active: #0043ce; + --token-color-foreground-highlight: #8a3ffc; + --token-color-foreground-highlight-on-surface: #6929c4; + --token-color-foreground-highlight-high-contrast: #491d8b; + --token-color-foreground-success: #198038; + --token-color-foreground-success-on-surface: #0e6027; + --token-color-foreground-success-high-contrast: #044317; + --token-color-foreground-warning: #ba4e00; + --token-color-foreground-warning-on-surface: #8a3800; + --token-color-foreground-warning-high-contrast: #5e2900; + --token-color-foreground-critical: #da1e28; + --token-color-foreground-critical-on-surface: #a2191f; + --token-color-foreground-critical-high-contrast: #750e13; + --token-color-page-primary: #ffffff; + --token-color-page-faint: #ffffff; + --token-color-surface-primary: #f4f4f4; + --token-color-surface-faint: #f4f4f4; + --token-color-surface-strong: #f4f4f4; + --token-color-surface-interactive: #f4f4f4; + --token-color-surface-interactive-hover: #e8e8e8; + --token-color-surface-interactive-active: #c6c6c6; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #d0e2ff; + --token-color-surface-highlight: #e8daff; + --token-color-surface-success: #a7f0ba; + --token-color-surface-warning: #ffd9be; + --token-color-surface-critical: #ffd7d9; + --token-typography-font-stack-display: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-font-stack-text: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-font-stack-code: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; + --token-typography-display-500-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } 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 index 68a70888748..8a48214e7f1 100644 --- 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 @@ -48,51 +48,6 @@ --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; @@ -192,8 +147,8 @@ --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-focus-ring-action-box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe; + --token-focus-ring-critical-box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 3px #0f62fe; --token-app-header-height: 60px; --token-app-header-home-link-size: 36px; --token-app-header-logo-size: 28px; @@ -221,10 +176,10 @@ --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-label-color: #161616; + --token-form-legend-color: #161616; + --token-form-helper-text-color: #161616; + --token-form-indicator-optional-color: #161616; --token-form-error-color: #c00005; --token-form-error-icon-size: 14px; --token-form-checkbox-size: 16px; @@ -235,10 +190,10 @@ --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-foreground-value-color: #161616; + --token-form-control-base-foreground-placeholder-color: #161616; --token-form-control-base-surface-color-default: #ffffff; - --token-form-control-base-surface-color-hover: #f1f2f3; + --token-form-control-base-surface-color-hover: #e8e8e8; --token-form-control-base-border-color-default: #8c909c; --token-form-control-base-border-color-hover: #656a76; --token-form-control-checked-foreground-color: #ffffff; @@ -249,11 +204,11 @@ --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-readonly-surface-color: #ffffff; + --token-form-control-readonly-border-color: #c6c6c6; + --token-form-control-disabled-foreground-color: rgba(22, 22, 22, 0.25); + --token-form-control-disabled-surface-color: #ff0000; + --token-form-control-disabled-border-color: #e0e0e0; --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; @@ -282,7 +237,7 @@ --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-base-surface-color-default: #ffffff; /** 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; @@ -344,42 +299,4 @@ --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 index 7d64c22dd81..2e5a5f895da 100644 --- 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 @@ -4,9 +4,95 @@ :root { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #e0e0e0; + --token-color-border-faint: #c6c6c6; + --token-color-border-strong: #e0e0e0; + --token-color-border-action: #0f62fe; + --token-color-border-highlight: #be95ff; + --token-color-border-success: #42be65; + --token-color-border-warning: #ff832b; + --token-color-border-critical: #ff8389; + --token-color-focus-action-internal: #ffffff; + --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #ffffff; + --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #161616; --token-color-foreground-primary: #161616; + --token-color-foreground-faint: #161616; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: rgba(22, 22, 22, 0.25); + --token-color-foreground-action: #0f62fe; + --token-color-foreground-action-hover: #0043ce; + --token-color-foreground-action-active: #0043ce; + --token-color-foreground-highlight: #8a3ffc; + --token-color-foreground-highlight-on-surface: #6929c4; + --token-color-foreground-highlight-high-contrast: #491d8b; + --token-color-foreground-success: #198038; + --token-color-foreground-success-on-surface: #0e6027; + --token-color-foreground-success-high-contrast: #044317; + --token-color-foreground-warning: #ba4e00; + --token-color-foreground-warning-on-surface: #8a3800; + --token-color-foreground-warning-high-contrast: #5e2900; + --token-color-foreground-critical: #da1e28; + --token-color-foreground-critical-on-surface: #a2191f; + --token-color-foreground-critical-high-contrast: #750e13; + --token-color-page-primary: #f4f4f4; + --token-color-page-faint: #f4f4f4; + --token-color-surface-primary: #ffffff; + --token-color-surface-faint: #ffffff; + --token-color-surface-strong: #ffffff; + --token-color-surface-interactive: #ffffff; + --token-color-surface-interactive-hover: #e8e8e8; + --token-color-surface-interactive-active: #c6c6c6; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #d0e2ff; + --token-color-surface-highlight: #e8daff; + --token-color-surface-success: #a7f0ba; + --token-color-surface-warning: #ffd9be; + --token-color-surface-critical: #ffd7d9; + --token-typography-font-stack-display: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-font-stack-text: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-font-stack-code: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; + --token-typography-display-500-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } 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 index 30bc0f275e4..e091f3742a1 100644 --- 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 @@ -48,51 +48,6 @@ --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; @@ -192,8 +147,8 @@ --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-focus-ring-action-box-shadow: inset 0 0 0 1px #161616, 0 0 0 3px #ffffff; + --token-focus-ring-critical-box-shadow: inset 0 0 0 1px #161616, 0 0 0 3px #ffffff; --token-app-header-height: 60px; --token-app-header-home-link-size: 36px; --token-app-header-logo-size: 28px; @@ -221,10 +176,10 @@ --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-label-color: #f4f4f4; + --token-form-legend-color: #f4f4f4; + --token-form-helper-text-color: #f4f4f4; + --token-form-indicator-optional-color: #f4f4f4; --token-form-error-color: #c00005; --token-form-error-icon-size: 14px; --token-form-checkbox-size: 16px; @@ -235,13 +190,13 @@ --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-foreground-value-color: #f4f4f4; + --token-form-control-base-foreground-placeholder-color: #f4f4f4; + --token-form-control-base-surface-color-default: #262626; + --token-form-control-base-surface-color-hover: #333333; --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-foreground-color: #161616; --token-form-control-checked-surface-color-default: #1060ff; --token-form-control-checked-surface-color-hover: #0c56e9; --token-form-control-checked-border-color-default: #0c56e9; @@ -249,11 +204,11 @@ --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-readonly-surface-color: #262626; + --token-form-control-readonly-border-color: #393939; + --token-form-control-disabled-foreground-color: rgba(244, 244, 244, 0.25); + --token-form-control-disabled-surface-color: #ff0000; + --token-form-control-disabled-border-color: #6f6f6f; --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; @@ -282,7 +237,7 @@ --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-base-surface-color-default: #262626; /** 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; @@ -344,42 +299,4 @@ --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 index 37475826396..54c9f5c6134 100644 --- 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 @@ -4,9 +4,95 @@ :root { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #6f6f6f; + --token-color-border-faint: #393939; + --token-color-border-strong: #525252; + --token-color-border-action: #4589ff; + --token-color-border-highlight: #a56eff; + --token-color-border-success: #24a148; + --token-color-border-warning: #eb6200; + --token-color-border-critical: #fa4d56; + --token-color-focus-action-internal: #161616; + --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #161616; + --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #f4f4f4; --token-color-foreground-primary: #f4f4f4; + --token-color-foreground-faint: #f4f4f4; + --token-color-foreground-high-contrast: #161616; + --token-color-foreground-disabled: rgba(244, 244, 244, 0.25); + --token-color-foreground-action: #78a9ff; + --token-color-foreground-action-hover: #a6c8ff; + --token-color-foreground-action-active: #a6c8ff; + --token-color-foreground-highlight: #be95ff; + --token-color-foreground-highlight-on-surface: #d4bbff; + --token-color-foreground-highlight-high-contrast: #d4bbff; + --token-color-foreground-success: #42be65; + --token-color-foreground-success-on-surface: #6fdc8c; + --token-color-foreground-success-high-contrast: #a7f0ba; + --token-color-foreground-warning: #ff832b; + --token-color-foreground-warning-on-surface: #ffb784; + --token-color-foreground-warning-high-contrast: #ffd9be; + --token-color-foreground-critical: #ff8389; + --token-color-foreground-critical-on-surface: #ffb3b8; + --token-color-foreground-critical-high-contrast: #ffd7d9; + --token-color-page-primary: #161616; + --token-color-page-faint: #161616; + --token-color-surface-primary: #262626; + --token-color-surface-faint: #262626; + --token-color-surface-strong: #262626; + --token-color-surface-interactive: #262626; + --token-color-surface-interactive-hover: #333333; + --token-color-surface-interactive-active: #525252; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #0043ce; + --token-color-surface-highlight: #6929c4; + --token-color-surface-success: #0e6027; + --token-color-surface-warning: #8a3800; + --token-color-surface-critical: #a2191f; + --token-typography-font-stack-display: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-font-stack-text: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-font-stack-code: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; + --token-typography-display-500-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } 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 index 30bc0f275e4..e0849cd0465 100644 --- 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 @@ -48,51 +48,6 @@ --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; @@ -192,8 +147,8 @@ --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-focus-ring-action-box-shadow: inset 0 0 0 1px #161616, 0 0 0 3px #ffffff; + --token-focus-ring-critical-box-shadow: inset 0 0 0 1px #161616, 0 0 0 3px #ffffff; --token-app-header-height: 60px; --token-app-header-home-link-size: 36px; --token-app-header-logo-size: 28px; @@ -221,10 +176,10 @@ --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-label-color: #f4f4f4; + --token-form-legend-color: #f4f4f4; + --token-form-helper-text-color: #f4f4f4; + --token-form-indicator-optional-color: #f4f4f4; --token-form-error-color: #c00005; --token-form-error-icon-size: 14px; --token-form-checkbox-size: 16px; @@ -235,13 +190,13 @@ --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-foreground-value-color: #f4f4f4; + --token-form-control-base-foreground-placeholder-color: #f4f4f4; + --token-form-control-base-surface-color-default: #393939; + --token-form-control-base-surface-color-hover: #474747; --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-foreground-color: #161616; --token-form-control-checked-surface-color-default: #1060ff; --token-form-control-checked-surface-color-hover: #0c56e9; --token-form-control-checked-border-color-default: #0c56e9; @@ -249,11 +204,11 @@ --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-readonly-surface-color: #393939; + --token-form-control-readonly-border-color: #525252; + --token-form-control-disabled-foreground-color: rgba(244, 244, 244, 0.25); + --token-form-control-disabled-surface-color: #ff0000; + --token-form-control-disabled-border-color: #8d8d8d; --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; @@ -282,7 +237,7 @@ --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-base-surface-color-default: #393939; /** 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; @@ -344,42 +299,4 @@ --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 index 37475826396..9ca7618e4ec 100644 --- 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 @@ -4,9 +4,95 @@ :root { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #8d8d8d; + --token-color-border-faint: #525252; + --token-color-border-strong: #6f6f6f; + --token-color-border-action: #4589ff; + --token-color-border-highlight: #a56eff; + --token-color-border-success: #24a148; + --token-color-border-warning: #eb6200; + --token-color-border-critical: #fa4d56; + --token-color-focus-action-internal: #161616; + --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #161616; + --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #f4f4f4; --token-color-foreground-primary: #f4f4f4; + --token-color-foreground-faint: #f4f4f4; + --token-color-foreground-high-contrast: #161616; + --token-color-foreground-disabled: rgba(244, 244, 244, 0.25); + --token-color-foreground-action: #78a9ff; + --token-color-foreground-action-hover: #a6c8ff; + --token-color-foreground-action-active: #a6c8ff; + --token-color-foreground-highlight: #be95ff; + --token-color-foreground-highlight-on-surface: #d4bbff; + --token-color-foreground-highlight-high-contrast: #e8daff; + --token-color-foreground-success: #42be65; + --token-color-foreground-success-on-surface: #6fdc8c; + --token-color-foreground-success-high-contrast: #a7f0ba; + --token-color-foreground-warning: #ff832b; + --token-color-foreground-warning-on-surface: #ffb784; + --token-color-foreground-warning-high-contrast: #ffd9be; + --token-color-foreground-critical: #ff8389; + --token-color-foreground-critical-on-surface: #ffb3b8; + --token-color-foreground-critical-high-contrast: #ffd7d9; + --token-color-page-primary: #262626; + --token-color-page-faint: #262626; + --token-color-surface-primary: #393939; + --token-color-surface-faint: #393939; + --token-color-surface-strong: #393939; + --token-color-surface-interactive: #393939; + --token-color-surface-interactive-hover: #474747; + --token-color-surface-interactive-active: #6f6f6f; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #0043ce; + --token-color-surface-highlight: #6929c4; + --token-color-surface-success: #0e6027; + --token-color-surface-warning: #8a3800; + --token-color-surface-critical: #a2191f; + --token-typography-font-stack-display: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-font-stack-text: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-font-stack-code: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; + --token-typography-display-500-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } 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 b1d45ed0a2f..71fefbd0e79 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 @@ -48,51 +48,6 @@ --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; @@ -193,7 +148,7 @@ --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-focus-ring-critical-box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff; --token-app-header-height: 60px; --token-app-header-home-link-size: 36px; --token-app-header-logo-size: 28px; @@ -241,14 +196,14 @@ --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-foreground-color: #8c909c; --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-foreground-color: #3b3d45; --token-form-control-readonly-surface-color: #f1f2f3; --token-form-control-readonly-border-color: #656a761a; --token-form-control-disabled-foreground-color: #8c909c; @@ -344,42 +299,4 @@ --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 3353619544d..d6e8cec03d0 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 @@ -4,9 +4,95 @@ :root { --token-color-palette-neutral-0: #ffffff; - --token-color-foreground-primary: #ffffff; + --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: #0c56e9; + --token-color-focus-critical-external: #5990ff; /** 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: #8c909c; + --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: #ffffff; + --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-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-500-letter-spacing: -0.5px; /** this is `tracking` */ + --token-typography-display-400-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-display-400-font-size: 1.5rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.3333; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --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-display-100-letter-spacing: 0px; /** this is `tracking` */ + --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.4286; /** 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-300-font-family: ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.25; /** 20px */ + --token-typography-code-200-font-family: ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.125; /** 18px */ + --token-typography-code-100-font-family: ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-100-font-size: 0.8125rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.23; /** 16px */ } diff --git a/packages/tokens/dist/products/css/themed-tokens/with-scss-mixins/tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-scss-mixins/tokens.css index d11eabad25c..fa8e642f7cf 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 @@ -5,55 +5,621 @@ @mixin hds-theme-hds() { :root { --token-color-palette-neutral-0: #ffffff; - --token-color-foreground-primary: #ffffff; + --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: #0c56e9; + --token-color-focus-critical-external: #5990ff; /** 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: #8c909c; + --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: #ffffff; + --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-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-500-letter-spacing: -0.5px; /** this is `tracking` */ + --token-typography-display-400-font-family: + -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, + Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-display-400-font-size: 1.5rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.3333; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --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-display-100-letter-spacing: 0px; /** this is `tracking` */ + --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.4286; /** 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-300-font-family: + ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.25; /** 20px */ + --token-typography-code-200-font-family: + ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.125; /** 18px */ + --token-typography-code-100-font-family: + ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-100-font-size: 0.8125rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.23; /** 16px */ } } @mixin hds-theme-cds0() { :root { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #c6c6c6; + --token-color-border-faint: #e0e0e0; + --token-color-border-strong: #c6c6c6; + --token-color-border-action: #0f62fe; + --token-color-border-highlight: #be95ff; + --token-color-border-success: #42be65; + --token-color-border-warning: #ff832b; + --token-color-border-critical: #ff8389; + --token-color-focus-action-internal: #ffffff; + --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #ffffff; + --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #161616; --token-color-foreground-primary: #161616; + --token-color-foreground-faint: #161616; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: rgba(22, 22, 22, 0.25); + --token-color-foreground-action: #0f62fe; + --token-color-foreground-action-hover: #0043ce; + --token-color-foreground-action-active: #0043ce; + --token-color-foreground-highlight: #8a3ffc; + --token-color-foreground-highlight-on-surface: #6929c4; + --token-color-foreground-highlight-high-contrast: #491d8b; + --token-color-foreground-success: #198038; + --token-color-foreground-success-on-surface: #0e6027; + --token-color-foreground-success-high-contrast: #044317; + --token-color-foreground-warning: #ba4e00; + --token-color-foreground-warning-on-surface: #8a3800; + --token-color-foreground-warning-high-contrast: #5e2900; + --token-color-foreground-critical: #da1e28; + --token-color-foreground-critical-on-surface: #a2191f; + --token-color-foreground-critical-high-contrast: #750e13; + --token-color-page-primary: #ffffff; + --token-color-page-faint: #ffffff; + --token-color-surface-primary: #f4f4f4; + --token-color-surface-faint: #f4f4f4; + --token-color-surface-strong: #f4f4f4; + --token-color-surface-interactive: #f4f4f4; + --token-color-surface-interactive-hover: #e8e8e8; + --token-color-surface-interactive-active: #c6c6c6; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #d0e2ff; + --token-color-surface-highlight: #e8daff; + --token-color-surface-success: #a7f0ba; + --token-color-surface-warning: #ffd9be; + --token-color-surface-critical: #ffd7d9; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } } @mixin hds-theme-cds10() { :root { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #e0e0e0; + --token-color-border-faint: #c6c6c6; + --token-color-border-strong: #e0e0e0; + --token-color-border-action: #0f62fe; + --token-color-border-highlight: #be95ff; + --token-color-border-success: #42be65; + --token-color-border-warning: #ff832b; + --token-color-border-critical: #ff8389; + --token-color-focus-action-internal: #ffffff; + --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #ffffff; + --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #161616; --token-color-foreground-primary: #161616; + --token-color-foreground-faint: #161616; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: rgba(22, 22, 22, 0.25); + --token-color-foreground-action: #0f62fe; + --token-color-foreground-action-hover: #0043ce; + --token-color-foreground-action-active: #0043ce; + --token-color-foreground-highlight: #8a3ffc; + --token-color-foreground-highlight-on-surface: #6929c4; + --token-color-foreground-highlight-high-contrast: #491d8b; + --token-color-foreground-success: #198038; + --token-color-foreground-success-on-surface: #0e6027; + --token-color-foreground-success-high-contrast: #044317; + --token-color-foreground-warning: #ba4e00; + --token-color-foreground-warning-on-surface: #8a3800; + --token-color-foreground-warning-high-contrast: #5e2900; + --token-color-foreground-critical: #da1e28; + --token-color-foreground-critical-on-surface: #a2191f; + --token-color-foreground-critical-high-contrast: #750e13; + --token-color-page-primary: #f4f4f4; + --token-color-page-faint: #f4f4f4; + --token-color-surface-primary: #ffffff; + --token-color-surface-faint: #ffffff; + --token-color-surface-strong: #ffffff; + --token-color-surface-interactive: #ffffff; + --token-color-surface-interactive-hover: #e8e8e8; + --token-color-surface-interactive-active: #c6c6c6; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #d0e2ff; + --token-color-surface-highlight: #e8daff; + --token-color-surface-success: #a7f0ba; + --token-color-surface-warning: #ffd9be; + --token-color-surface-critical: #ffd7d9; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } } @mixin hds-theme-cds90() { :root { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #8d8d8d; + --token-color-border-faint: #525252; + --token-color-border-strong: #6f6f6f; + --token-color-border-action: #4589ff; + --token-color-border-highlight: #a56eff; + --token-color-border-success: #24a148; + --token-color-border-warning: #eb6200; + --token-color-border-critical: #fa4d56; + --token-color-focus-action-internal: #161616; + --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #161616; + --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #f4f4f4; --token-color-foreground-primary: #f4f4f4; + --token-color-foreground-faint: #f4f4f4; + --token-color-foreground-high-contrast: #161616; + --token-color-foreground-disabled: rgba(244, 244, 244, 0.25); + --token-color-foreground-action: #78a9ff; + --token-color-foreground-action-hover: #a6c8ff; + --token-color-foreground-action-active: #a6c8ff; + --token-color-foreground-highlight: #be95ff; + --token-color-foreground-highlight-on-surface: #d4bbff; + --token-color-foreground-highlight-high-contrast: #e8daff; + --token-color-foreground-success: #42be65; + --token-color-foreground-success-on-surface: #6fdc8c; + --token-color-foreground-success-high-contrast: #a7f0ba; + --token-color-foreground-warning: #ff832b; + --token-color-foreground-warning-on-surface: #ffb784; + --token-color-foreground-warning-high-contrast: #ffd9be; + --token-color-foreground-critical: #ff8389; + --token-color-foreground-critical-on-surface: #ffb3b8; + --token-color-foreground-critical-high-contrast: #ffd7d9; + --token-color-page-primary: #262626; + --token-color-page-faint: #262626; + --token-color-surface-primary: #393939; + --token-color-surface-faint: #393939; + --token-color-surface-strong: #393939; + --token-color-surface-interactive: #393939; + --token-color-surface-interactive-hover: #474747; + --token-color-surface-interactive-active: #6f6f6f; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #0043ce; + --token-color-surface-highlight: #6929c4; + --token-color-surface-success: #0e6027; + --token-color-surface-warning: #8a3800; + --token-color-surface-critical: #a2191f; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } } @mixin hds-theme-cds100() { :root { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #6f6f6f; + --token-color-border-faint: #393939; + --token-color-border-strong: #525252; + --token-color-border-action: #4589ff; + --token-color-border-highlight: #a56eff; + --token-color-border-success: #24a148; + --token-color-border-warning: #eb6200; + --token-color-border-critical: #fa4d56; + --token-color-focus-action-internal: #161616; + --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #161616; + --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #f4f4f4; --token-color-foreground-primary: #f4f4f4; + --token-color-foreground-faint: #f4f4f4; + --token-color-foreground-high-contrast: #161616; + --token-color-foreground-disabled: rgba(244, 244, 244, 0.25); + --token-color-foreground-action: #78a9ff; + --token-color-foreground-action-hover: #a6c8ff; + --token-color-foreground-action-active: #a6c8ff; + --token-color-foreground-highlight: #be95ff; + --token-color-foreground-highlight-on-surface: #d4bbff; + --token-color-foreground-highlight-high-contrast: #d4bbff; + --token-color-foreground-success: #42be65; + --token-color-foreground-success-on-surface: #6fdc8c; + --token-color-foreground-success-high-contrast: #a7f0ba; + --token-color-foreground-warning: #ff832b; + --token-color-foreground-warning-on-surface: #ffb784; + --token-color-foreground-warning-high-contrast: #ffd9be; + --token-color-foreground-critical: #ff8389; + --token-color-foreground-critical-on-surface: #ffb3b8; + --token-color-foreground-critical-high-contrast: #ffd7d9; + --token-color-page-primary: #161616; + --token-color-page-faint: #161616; + --token-color-surface-primary: #262626; + --token-color-surface-faint: #262626; + --token-color-surface-strong: #262626; + --token-color-surface-interactive: #262626; + --token-color-surface-interactive-hover: #333333; + --token-color-surface-interactive-active: #525252; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #0043ce; + --token-color-surface-highlight: #6929c4; + --token-color-surface-success: #0e6027; + --token-color-surface-warning: #8a3800; + --token-color-surface-critical: #a2191f; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } } @@ -104,51 +670,6 @@ --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; @@ -266,7 +787,7 @@ --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; + inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff; --token-app-header-height: 60px; --token-app-header-home-link-size: 36px; --token-app-header-logo-size: 28px; @@ -328,14 +849,14 @@ --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-foreground-color: #8c909c; --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-foreground-color: #3b3d45; --token-form-control-readonly-surface-color: #f1f2f3; --token-form-control-readonly-border-color: #656a761a; --token-form-control-disabled-foreground-color: #8c909c; @@ -440,67 +961,5 @@ --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/tokens.css b/packages/tokens/dist/products/css/tokens.css index 4a887e3ae51..5c95d396a24 100644 --- a/packages/tokens/dist/products/css/tokens.css +++ b/packages/tokens/dist/products/css/tokens.css @@ -356,9 +356,11 @@ --token-typography-display-500-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-display-500-font-size: 1.875rem; /** 30px/1.875rem */ --token-typography-display-500-line-height: 1.2666; /** 38px */ + --token-typography-display-500-letter-spacing: -0.5px; /** this is `tracking` */ --token-typography-display-400-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-display-400-font-size: 1.5rem; /** 24px/1.5rem */ --token-typography-display-400-line-height: 1.3333; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ --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 */ @@ -370,6 +372,7 @@ --token-typography-display-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-display-100-font-size: 0.8125rem; /** 13px/0.8125rem */ --token-typography-display-100-line-height: 1.3846; /** 18px */ + --token-typography-display-100-letter-spacing: 0px; /** this is `tracking` */ --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 */ @@ -379,13 +382,13 @@ --token-typography-body-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-body-100-font-size: 0.8125rem; /** 13px/0.8125rem */ --token-typography-body-100-line-height: 1.3846; /** 18px */ - --token-typography-code-100-font-family: ui-monospace, Menlo, Consolas, monospace; - --token-typography-code-100-font-size: 0.8125rem; /** 13px/0.8125rem */ - --token-typography-code-100-line-height: 1.23; /** 16px */ - --token-typography-code-200-font-family: ui-monospace, Menlo, Consolas, monospace; - --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ - --token-typography-code-200-line-height: 1.125; /** 18px */ --token-typography-code-300-font-family: ui-monospace, Menlo, Consolas, monospace; --token-typography-code-300-font-size: 1rem; /** 16px/1rem */ --token-typography-code-300-line-height: 1.25; /** 20px */ + --token-typography-code-200-font-family: ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.125; /** 18px */ + --token-typography-code-100-font-family: ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-100-font-size: 0.8125rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.23; /** 16px */ } diff --git a/packages/tokens/package.json b/packages/tokens/package.json index febd7214d48..d543483a107 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -21,7 +21,8 @@ "typecheck": "pnpm tsc --noEmit", "lint": "pnpm eslint --quiet --ext .js,.ts", "extract-carbon-tokens": "tsx ./scripts/extract-carbon-tokens", - "build": "tsx ./scripts/build" + "build": "tsx ./scripts/build", + "postbuild": "cp -R dist/products/css/themed-tokens/with-prefers-color-scheme/*.css ../../showcase/public/assets/styles/@hashicorp/themed-tokens/with-prefers-color-scheme && cp -R dist/products/css/themed-tokens/with-css-selectors/*.css ../../showcase/public/assets/styles/@hashicorp/themed-tokens/with-css-selectors && cp -R dist/products/css/themed-tokens/with-combined-strategies/*.css ../../showcase/public/assets/styles/@hashicorp/themed-tokens/with-combined-strategies" }, "devDependencies": { "@carbon/colors": "^11.39.0", diff --git a/packages/tokens/src/global/color/semantic-border.json b/packages/tokens/src/global/color/semantic-border.json index a5f10222f1c..b4bed1b126b 100644 --- a/packages/tokens/src/global/color/semantic-border.json +++ b/packages/tokens/src/global/color/semantic-border.json @@ -4,42 +4,98 @@ "primary": { "$type": "color", "$value": "{color.palette.alpha-200}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-200}", + "cds-g0": "{carbon.themes.white.borderSubtle03}", + "cds-g10": "{carbon.themes.g10.borderSubtle03}", + "cds-g90": "{carbon.themes.g90.borderSubtle03}", + "cds-g100": "{carbon.themes.g100.borderSubtle03}" + } }, "faint": { "$type": "color", "$value": "{color.palette.alpha-100}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-100}", + "cds-g0": "{carbon.themes.white.borderSubtle00}", + "cds-g10": "{carbon.themes.g10.borderSubtle00}", + "cds-g90": "{carbon.themes.g90.borderSubtle00}", + "cds-g100": "{carbon.themes.g100.borderSubtle00}" + } }, "strong": { "$type": "color", "$value": "{color.palette.alpha-300}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.alpha-300}", + "cds-g0": "{carbon.themes.white.borderSubtle01}", + "cds-g10": "{carbon.themes.g10.borderSubtle01}", + "cds-g90": "{carbon.themes.g90.borderSubtle01}", + "cds-g100": "{carbon.themes.g100.borderSubtle01}" + } }, "action": { "$type": "color", "$value": "{color.palette.blue-100}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-100}", + "cds-g0": "{carbon.color.blue.60}", + "cds-g10": "{carbon.color.blue.60}", + "cds-g90": "{carbon.color.blue.50}", + "cds-g100": "{carbon.color.blue.50}" + } }, "highlight": { "$type": "color", "$value": "{color.palette.purple-100}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-100}", + "cds-g0": "{carbon.color.purple.40}", + "cds-g10": "{carbon.color.purple.40}", + "cds-g90": "{carbon.color.purple.50}", + "cds-g100": "{carbon.color.purple.50}" + } }, "success": { "$type": "color", "$value": "{color.palette.green-100}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.green-100}", + "cds-g0": "{carbon.color.green.40}", + "cds-g10": "{carbon.color.green.40}", + "cds-g90": "{carbon.color.green.50}", + "cds-g100": "{carbon.color.green.50}" + } }, "warning": { "$type": "color", "$value": "{color.palette.amber-100}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-100}", + "cds-g0": "{carbon.color.orange.40}", + "cds-g10": "{carbon.color.orange.40}", + "cds-g90": "{carbon.color.orange.50}", + "cds-g100": "{carbon.color.orange.50}" + } }, "critical": { "$type": "color", "$value": "{color.palette.red-100}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.red-100}", + "cds-g0": "{carbon.color.red.40}", + "cds-g10": "{carbon.color.red.40}", + "cds-g90": "{carbon.color.red.50}", + "cds-g100": "{carbon.color.red.50}" + } } } } diff --git a/packages/tokens/src/global/color/semantic-focus.json b/packages/tokens/src/global/color/semantic-focus.json index 8e6da27e069..caee5ea8fbf 100644 --- a/packages/tokens/src/global/color/semantic-focus.json +++ b/packages/tokens/src/global/color/semantic-focus.json @@ -5,26 +5,54 @@ "internal": { "$type": "color", "$value": "{color.palette.blue-300}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + } }, "external": { "$type": "color", "$value": "#5990ff", "group": "semantic", - "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose" + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + } } }, "critical": { "internal": { "$type": "color", "$value": "{color.palette.red-300}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.focusInset}", + "cds-g10": "{carbon.themes.g10.focusInset}", + "cds-g90": "{carbon.themes.g90.focusInset}", + "cds-g100": "{carbon.themes.g100.focusInset}" + } }, "external": { "$type": "color", "$value": "#dd7578", "group": "semantic", - "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose" + "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", + "$modes": { + "hds": "#5990ff", + "cds-g0": "{carbon.themes.white.focus}", + "cds-g10": "{carbon.themes.g10.focus}", + "cds-g90": "{carbon.themes.g90.focus}", + "cds-g100": "{carbon.themes.g100.focus}" + } } } } diff --git a/packages/tokens/src/global/color/semantic-foreground.json b/packages/tokens/src/global/color/semantic-foreground.json index 5b14889b034..e8bb6b9aa26 100644 --- a/packages/tokens/src/global/color/semantic-foreground.json +++ b/packages/tokens/src/global/color/semantic-foreground.json @@ -4,14 +4,21 @@ "strong": { "$type": "color", "$value": "{color.palette.neutral-700}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-700}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + } }, "primary": { "$type": "color", "$value": "{color.palette.neutral-600}", "group": "semantic", "$modes": { - "hds": "#ffffff", + "hds": "{color.palette.neutral-600}", "cds-g0": "{carbon.themes.white.textPrimary}", "cds-g10": "{carbon.themes.g10.textPrimary}", "cds-g90": "{carbon.themes.g90.textPrimary}", @@ -21,92 +28,218 @@ "faint": { "$type": "color", "$value": "{color.palette.neutral-500}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-500}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + } }, "high-contrast": { "$type": "color", "$value": "{color.palette.neutral-0}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textInverse}", + "cds-g10": "{carbon.themes.g10.textInverse}", + "cds-g90": "{carbon.themes.g90.textInverse}", + "cds-g100": "{carbon.themes.g100.textInverse}" + } }, "disabled": { "$type": "color", "$value": "{color.palette.neutral-400}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-400}", + "cds-g0": "{carbon.themes.white.textDisabled}", + "cds-g10": "{carbon.themes.g10.textDisabled}", + "cds-g90": "{carbon.themes.g90.textDisabled}", + "cds-g100": "{carbon.themes.g100.textDisabled}" + } }, "action": { "$type": "color", "$value": "{color.palette.blue-200}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-200}", + "cds-g0": "{carbon.themes.white.linkPrimary}", + "cds-g10": "{carbon.themes.g10.linkPrimary}", + "cds-g90": "{carbon.themes.g90.linkPrimary}", + "cds-g100": "{carbon.themes.g100.linkPrimary}" + } }, "action-hover": { "$type": "color", "$value": "{color.palette.blue-300}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-300}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + } }, "action-active": { "$type": "color", "$value": "{color.palette.blue-400}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-400}", + "cds-g0": "{carbon.themes.white.linkPrimaryHover}", + "cds-g10": "{carbon.themes.g10.linkPrimaryHover}", + "cds-g90": "{carbon.themes.g90.linkPrimaryHover}", + "cds-g100": "{carbon.themes.g100.linkPrimaryHover}" + } }, "highlight": { "$type": "color", "$value": "{color.palette.purple-200}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-200}", + "cds-g0": "{carbon.color.purple.60}", + "cds-g10": "{carbon.color.purple.60}", + "cds-g90": "{carbon.color.purple.40}", + "cds-g100": "{carbon.color.purple.40}" + } }, "highlight-on-surface": { "$type": "color", "$value": "{color.palette.purple-300}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-300}", + "cds-g0": "{carbon.color.purple.70}", + "cds-g10": "{carbon.color.purple.70}", + "cds-g90": "{carbon.color.purple.30}", + "cds-g100": "{carbon.color.purple.30}" + } }, "highlight-high-contrast": { "$type": "color", "$value": "{color.palette.purple-500}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-500}", + "cds-g0": "{carbon.color.purple.80}", + "cds-g10": "{carbon.color.purple.80}", + "cds-g90": "{carbon.color.purple.20}", + "cds-g100": "{carbon.color.purple.30}" + } }, "success": { "$type": "color", "$value": "{color.palette.green-200}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.green-200}", + "cds-g0": "{carbon.color.green.60}", + "cds-g10": "{carbon.color.green.60}", + "cds-g90": "{carbon.color.green.40}", + "cds-g100": "{carbon.color.green.40}" + } }, "success-on-surface": { "$type": "color", "$value": "{color.palette.green-300}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.green-300}", + "cds-g0": "{carbon.color.green.70}", + "cds-g10": "{carbon.color.green.70}", + "cds-g90": "{carbon.color.green.30}", + "cds-g100": "{carbon.color.green.30}" + } }, "success-high-contrast": { "$type": "color", "$value": "{color.palette.green-500}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.green-500}", + "cds-g0": "{carbon.color.green.80}", + "cds-g10": "{carbon.color.green.80}", + "cds-g90": "{carbon.color.green.20}", + "cds-g100": "{carbon.color.green.20}" + } }, "warning": { "$type": "color", "$value": "{color.palette.amber-200}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-200}", + "cds-g0": "{carbon.color.orange.60}", + "cds-g10": "{carbon.color.orange.60}", + "cds-g90": "{carbon.color.orange.40}", + "cds-g100": "{carbon.color.orange.40}" + } }, "warning-on-surface": { "$type": "color", "$value": "{color.palette.amber-300}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-300}", + "cds-g0": "{carbon.color.orange.70}", + "cds-g10": "{carbon.color.orange.70}", + "cds-g90": "{carbon.color.orange.30}", + "cds-g100": "{carbon.color.orange.30}" + } }, "warning-high-contrast": { "$type": "color", "$value": "{color.palette.amber-500}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-500}", + "cds-g0": "{carbon.color.orange.80}", + "cds-g10": "{carbon.color.orange.80}", + "cds-g90": "{carbon.color.orange.20}", + "cds-g100": "{carbon.color.orange.20}" + } }, "critical": { "$type": "color", "$value": "{color.palette.red-200}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.red-200}", + "cds-g0": "{carbon.color.red.60}", + "cds-g10": "{carbon.color.red.60}", + "cds-g90": "{carbon.color.red.40}", + "cds-g100": "{carbon.color.red.40}" + } }, "critical-on-surface": { "$type": "color", "$value": "{color.palette.red-300}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.red-300}", + "cds-g0": "{carbon.color.red.70}", + "cds-g10": "{carbon.color.red.70}", + "cds-g90": "{carbon.color.red.30}", + "cds-g100": "{carbon.color.red.30}" + } }, "critical-high-contrast": { "$type": "color", "$value": "{color.palette.red-500}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.red-500}", + "cds-g0": "{carbon.color.red.80}", + "cds-g10": "{carbon.color.red.80}", + "cds-g90": "{carbon.color.red.20}", + "cds-g100": "{carbon.color.red.20}" + } } } } diff --git a/packages/tokens/src/global/color/semantic-page.json b/packages/tokens/src/global/color/semantic-page.json index 5e356eacec2..4541988d69a 100644 --- a/packages/tokens/src/global/color/semantic-page.json +++ b/packages/tokens/src/global/color/semantic-page.json @@ -4,12 +4,26 @@ "primary": { "$type": "color", "$value": "{color.palette.neutral-0}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + } }, "faint": { "$type": "color", "$value": "{color.palette.neutral-50}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.background}", + "cds-g10": "{carbon.themes.g10.background}", + "cds-g90": "{carbon.themes.g90.background}", + "cds-g100": "{carbon.themes.g100.background}" + } } } } diff --git a/packages/tokens/src/global/color/semantic-surface.json b/packages/tokens/src/global/color/semantic-surface.json index 725b0c7ff76..e1c904f4c9b 100644 --- a/packages/tokens/src/global/color/semantic-surface.json +++ b/packages/tokens/src/global/color/semantic-surface.json @@ -4,62 +4,146 @@ "primary": { "$type": "color", "$value": "{color.palette.neutral-0}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + } }, "faint": { "$type": "color", "$value": "{color.palette.neutral-50}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-50}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + } }, "strong": { "$type": "color", "$value": "{color.palette.neutral-100}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + } }, "interactive": { "$type": "color", "$value": "{color.palette.neutral-0}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-0}", + "cds-g0": "{carbon.themes.white.layer01}", + "cds-g10": "{carbon.themes.g10.layer01}", + "cds-g90": "{carbon.themes.g90.layer01}", + "cds-g100": "{carbon.themes.g100.layer01}" + } }, "interactive-hover": { "$type": "color", "$value": "{color.palette.neutral-100}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-100}", + "cds-g0": "{carbon.themes.white.layerHover01}", + "cds-g10": "{carbon.themes.g10.layerHover01}", + "cds-g90": "{carbon.themes.g90.layerHover01}", + "cds-g100": "{carbon.themes.g100.layerHover01}" + } }, "interactive-active": { "$type": "color", "$value": "{color.palette.neutral-200}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-200}", + "cds-g0": "{carbon.themes.white.layerActive01}", + "cds-g10": "{carbon.themes.g10.layerActive01}", + "cds-g90": "{carbon.themes.g90.layerActive01}", + "cds-g100": "{carbon.themes.g100.layerActive01}" + } }, "interactive-disabled": { "$type": "color", "$value": "{color.palette.neutral-50}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.neutral-50}", + "cds-g0": "#FF0000", + "cds-g10": "#FF0000", + "cds-g90": "#FF0000", + "cds-g100": "#FF0000" + } }, "action": { "$type": "color", "$value": "{color.palette.blue-50}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.blue-50}", + "cds-g0": "{carbon.color.blue.20}", + "cds-g10": "{carbon.color.blue.20}", + "cds-g90": "{carbon.color.blue.70}", + "cds-g100": "{carbon.color.blue.70}" + } }, "highlight": { "$type": "color", "$value": "{color.palette.purple-50}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.purple-50}", + "cds-g0": "{carbon.color.purple.20}", + "cds-g10": "{carbon.color.purple.20}", + "cds-g90": "{carbon.color.purple.70}", + "cds-g100": "{carbon.color.purple.70}" + } }, "success": { "$type": "color", "$value": "{color.palette.green-50}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.green-50}", + "cds-g0": "{carbon.color.green.20}", + "cds-g10": "{carbon.color.green.20}", + "cds-g90": "{carbon.color.green.70}", + "cds-g100": "{carbon.color.green.70}" + } }, "warning": { "$type": "color", "$value": "{color.palette.amber-50}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.amber-50}", + "cds-g0": "{carbon.color.orange.20}", + "cds-g10": "{carbon.color.orange.20}", + "cds-g90": "{carbon.color.orange.70}", + "cds-g100": "{carbon.color.orange.70}" + } }, "critical": { "$type": "color", "$value": "{color.palette.red-50}", - "group": "semantic" + "group": "semantic", + "$modes": { + "hds": "{color.palette.red-50}", + "cds-g0": "{carbon.color.red.20}", + "cds-g10": "{carbon.color.red.20}", + "cds-g90": "{carbon.color.red.70}", + "cds-g100": "{carbon.color.red.70}" + } } } } diff --git a/packages/tokens/src/products/shared/typography.json b/packages/tokens/src/products/shared/typography.json index 7a4fd516caa..12c0e87db6d 100644 --- a/packages/tokens/src/products/shared/typography.json +++ b/packages/tokens/src/products/shared/typography.json @@ -9,16 +9,6 @@ "-apple-system", "BlinkMacSystemFont" ], - "$modes": { - "hds": [ - "-apple-system", - "BlinkMacSystemFont" - ], - "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" }, "windows": { @@ -45,6 +35,16 @@ "Segoe UI Symbol" ], "private": "true" + }, + "combined": { + "$type": "font-family", + "$value": [ + "{typography.font-stack.sans.display.macOS}", + "{typography.font-stack.sans.display.windows}", + "{typography.font-stack.sans.display.sans}", + "{typography.font-stack.sans.display.emoji}" + ], + "private": "true" } }, "text": { @@ -54,16 +54,6 @@ "-apple-system", "BlinkMacSystemFont" ], - "$modes": { - "hds": [ - "-apple-system", - "BlinkMacSystemFont" - ], - "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" }, "windows": { @@ -73,6 +63,15 @@ ], "private": "true" }, + "sans": { + "$type": "font-family", + "$value": [ + "Helvetica", + "Arial", + "sans-serif" + ], + "private": "true" + }, "emoji": { "$type": "font-family", "$value": [ @@ -81,6 +80,16 @@ "Segoe UI Symbol" ], "private": "true" + }, + "combined": { + "$type": "font-family", + "$value": [ + "{typography.font-stack.sans.text.macOS}", + "{typography.font-stack.sans.text.windows}", + "{typography.font-stack.sans.text.sans}", + "{typography.font-stack.sans.text.emoji}" + ], + "private": "true" } } }, @@ -92,16 +101,6 @@ "ui-monospace", "Menlo" ], - "$modes": { - "hds": [ - "ui-monospace", - "Menlo" - ], - "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" }, "windows": { @@ -110,34 +109,50 @@ "Consolas" ], "private": "true" + }, + "combined": { + "$type": "font-family", + "$value": [ + "{typography.font-stack.monospace.code.macOS}", + "{typography.font-stack.monospace.code.windows}", + "monospace" + ], + "private": "true" } } }, "display": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.display.macOS}", - "{typography.font-stack.sans.display.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.display.emoji}" - ] + "$value": "{typography.font-stack.sans.display.combined}", + "$modes": { + "hds": "{typography.font-stack.sans.display.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + } }, "text": { "$type": "font-family", - "$value": [ - "{typography.font-stack.sans.text.macOS}", - "{typography.font-stack.sans.text.windows}", - "{typography.font-stack.sans.display.sans}", - "{typography.font-stack.sans.text.emoji}" - ] + "$value": "{typography.font-stack.sans.text.combined}", + "$modes": { + "hds": "{typography.font-stack.sans.text.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + } }, "code": { "$type": "font-family", - "$value": [ - "{typography.font-stack.monospace.code.macOS}", - "{typography.font-stack.monospace.code.windows}", - "monospace" - ] + "$value": "{typography.font-stack.monospace.code.combined}", + "$modes": { + "hds": "{typography.font-stack.monospace.code.combined}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + } } }, "font-weight": { @@ -189,200 +204,484 @@ "display-500": { "font-family": { "$type": "font-family", - "$value": "{typography.font-stack.display}" + "$value": "{typography.font-stack.display}", + "$modes": { + "hds": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + } }, "font-size": { "$type": "font-size", "$value": "30", "unit": "px", - "comment": "30px/1.875rem" + "comment": "30px/1.875rem", + "$modes": { + "hds": "30", + "cds-g0": "{carbon.typography.heading05.font-size}", + "cds-g10": "{carbon.typography.heading05.font-size}", + "cds-g90": "{carbon.typography.heading05.font-size}", + "cds-g100": "{carbon.typography.heading05.font-size}" + } }, "line-height": { "$type": "number", "$value": 1.2666, - "comment": "38px" + "comment": "38px", + "$modes": { + "hds": 1.2666, + "cds-g0": "{carbon.typography.heading05.line-height}", + "cds-g10": "{carbon.typography.heading05.line-height}", + "cds-g90": "{carbon.typography.heading05.line-height}", + "cds-g100": "{carbon.typography.heading05.line-height}" + } + }, + "letter-spacing": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading05.letter-spacing}", + "cds-g10": "{carbon.typography.heading05.letter-spacing}", + "cds-g90": "{carbon.typography.heading05.letter-spacing}", + "cds-g100": "{carbon.typography.heading05.letter-spacing}" + } } }, "display-400": { "font-family": { "$type": "font-family", - "$value": "{typography.font-stack.display}" + "$value": "{typography.font-stack.display}", + "$modes": { + "hds": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + } }, "font-size": { "$type": "font-size", "$value": "24", "unit": "px", - "comment": "24px/1.5rem" + "comment": "24px/1.5rem", + "$modes": { + "hds": "24", + "cds-g0": "{carbon.typography.heading04.font-size}", + "cds-g10": "{carbon.typography.heading04.font-size}", + "cds-g90": "{carbon.typography.heading04.font-size}", + "cds-g100": "{carbon.typography.heading04.font-size}" + } }, "line-height": { "$type": "number", "$value": 1.3333, - "comment": "32px" + "comment": "32px", + "$modes": { + "hds": 1.3333, + "cds-g0": "{carbon.typography.heading04.line-height}", + "cds-g10": "{carbon.typography.heading04.line-height}", + "cds-g90": "{carbon.typography.heading04.line-height}", + "cds-g100": "{carbon.typography.heading04.line-height}" + } + }, + "letter-spacing": { + "$type": "letter-spacing", + "$value": 0, + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "{carbon.typography.heading04.letter-spacing}", + "cds-g10": "{carbon.typography.heading04.letter-spacing}", + "cds-g90": "{carbon.typography.heading04.letter-spacing}", + "cds-g100": "{carbon.typography.heading04.letter-spacing}" + } } }, "display-300": { "font-family": { "$type": "font-family", - "$value": "{typography.font-stack.text}" + "$value": "{typography.font-stack.text}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + } }, "font-size": { "$type": "font-size", "$value": "18", "unit": "px", - "comment": "18px/1.125rem" + "comment": "18px/1.125rem", + "$modes": { + "hds": "18", + "cds-g0": "{carbon.typography.heading03.font-size}", + "cds-g10": "{carbon.typography.heading03.font-size}", + "cds-g90": "{carbon.typography.heading03.font-size}", + "cds-g100": "{carbon.typography.heading03.font-size}" + } }, "line-height": { "$type": "number", "$value": 1.3333, - "comment": "24px" + "comment": "24px", + "$modes": { + "hds": 1.3333, + "cds-g0": "{carbon.typography.heading03.line-height}", + "cds-g10": "{carbon.typography.heading03.line-height}", + "cds-g90": "{carbon.typography.heading03.line-height}", + "cds-g100": "{carbon.typography.heading03.line-height}" + } }, "letter-spacing": { "$type": "letter-spacing", "$value": -0.5, "unit": "px", - "comment": "this is `tracking`" + "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading03.letter-spacing}", + "cds-g10": "{carbon.typography.heading03.letter-spacing}", + "cds-g90": "{carbon.typography.heading03.letter-spacing}", + "cds-g100": "{carbon.typography.heading03.letter-spacing}" + } } }, "display-200": { "font-family": { "$type": "font-family", - "$value": "{typography.font-stack.display}" + "$value": "{typography.font-stack.text}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + } }, "font-size": { "$type": "font-size", "$value": "16", "unit": "px", - "comment": "16px/1rem" + "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.heading02.font-size}", + "cds-g10": "{carbon.typography.heading02.font-size}", + "cds-g90": "{carbon.typography.heading02.font-size}", + "cds-g100": "{carbon.typography.heading02.font-size}" + } }, "line-height": { "$type": "number", "$value": 1.5, - "comment": "24px" + "comment": "24px", + "$modes": { + "hds": 1.5, + "cds-g0": "{carbon.typography.heading02.line-height}", + "cds-g10": "{carbon.typography.heading02.line-height}", + "cds-g90": "{carbon.typography.heading02.line-height}", + "cds-g100": "{carbon.typography.heading02.line-height}" + } }, "letter-spacing": { "$type": "letter-spacing", "$value": -0.5, "unit": "px", - "comment": "this is `tracking`" + "comment": "this is `tracking`", + "$modes": { + "hds": -0.5, + "cds-g0": "{carbon.typography.heading02.letter-spacing}", + "cds-g10": "{carbon.typography.heading02.letter-spacing}", + "cds-g90": "{carbon.typography.heading02.letter-spacing}", + "cds-g100": "{carbon.typography.heading02.letter-spacing}" + } } }, "display-100": { "font-family": { "$type": "font-family", - "$value": "{typography.font-stack.text}" + "$value": "{typography.font-stack.text}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + } }, "font-size": { "$type": "font-size", "$value": "13", "unit": "px", - "comment": "13px/0.8125rem" + "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.heading01.font-size}", + "cds-g10": "{carbon.typography.heading01.font-size}", + "cds-g90": "{carbon.typography.heading01.font-size}", + "cds-g100": "{carbon.typography.heading01.font-size}" + } }, "line-height": { "$type": "number", "$value": 1.3846, - "comment": "18px" + "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": "{carbon.typography.heading01.line-height}", + "cds-g10": "{carbon.typography.heading01.line-height}", + "cds-g90": "{carbon.typography.heading01.line-height}", + "cds-g100": "{carbon.typography.heading01.line-height}" + } + }, + "letter-spacing": { + "$type": "letter-spacing", + "$value": 0, + "unit": "px", + "comment": "this is `tracking`", + "$modes": { + "hds": 0, + "cds-g0": "{carbon.typography.heading01.letter-spacing}", + "cds-g10": "{carbon.typography.heading01.letter-spacing}", + "cds-g90": "{carbon.typography.heading01.letter-spacing}", + "cds-g100": "{carbon.typography.heading01.letter-spacing}" + } } }, "body-300": { "font-family": { "$type": "font-family", - "$value": "{typography.font-stack.text}" + "$value": "{typography.font-stack.text}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + } }, "font-size": { "$type": "font-size", "$value": "16", "unit": "px", - "comment": "16px/1rem" + "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.body02.font-size}", + "cds-g10": "{carbon.typography.body02.font-size}", + "cds-g90": "{carbon.typography.body02.font-size}", + "cds-g100": "{carbon.typography.body02.font-size}" + } }, "line-height": { "$type": "number", "$value": 1.5, - "comment": "24px" + "comment": "24px", + "$modes": { + "hds": 1.4286, + "cds-g0": "{carbon.typography.body02.line-height}", + "cds-g10": "{carbon.typography.body02.line-height}", + "cds-g90": "{carbon.typography.body02.line-height}", + "cds-g100": "{carbon.typography.body02.line-height}" + } } }, "body-200": { "font-family": { "$type": "font-family", - "$value": "{typography.font-stack.text}" + "$value": "{typography.font-stack.text}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + } }, "font-size": { "$type": "font-size", "$value": "14", "unit": "px", - "comment": "14px/0.875rem" + "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "{carbon.typography.body01.font-size}", + "cds-g10": "{carbon.typography.body01.font-size}", + "cds-g90": "{carbon.typography.body01.font-size}", + "cds-g100": "{carbon.typography.body01.font-size}" + } }, "line-height": { "$type": "number", "$value": 1.4286, - "comment": "20px" + "comment": "20px", + "$modes": { + "hds": 1.4286, + "cds-g0": "{carbon.typography.body01.line-height}", + "cds-g10": "{carbon.typography.body01.line-height}", + "cds-g90": "{carbon.typography.body01.line-height}", + "cds-g100": "{carbon.typography.body01.line-height}" + } } }, "body-100": { "font-family": { "$type": "font-family", - "$value": "{typography.font-stack.text}" + "$value": "{typography.font-stack.text}", + "$modes": { + "hds": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + } }, "font-size": { "$type": "font-size", "$value": "13", "unit": "px", - "comment": "13px/0.8125rem" + "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.bodyCompact01.font-size}", + "cds-g10": "{carbon.typography.bodyCompact01.font-size}", + "cds-g90": "{carbon.typography.bodyCompact01.font-size}", + "cds-g100": "{carbon.typography.bodyCompact01.font-size}" + } }, "line-height": { "$type": "number", "$value": 1.3846, - "comment": "18px" + "comment": "18px", + "$modes": { + "hds": 1.3846, + "cds-g0": "{carbon.typography.bodyCompact01.line-height}", + "cds-g10": "{carbon.typography.bodyCompact01.line-height}", + "cds-g90": "{carbon.typography.bodyCompact01.line-height}", + "cds-g100": "{carbon.typography.bodyCompact01.line-height}" + } } }, - "code-100": { + "code-300": { "font-family": { "$type": "font-family", - "$value": "{typography.font-stack.code}" + "$value": "{typography.font-stack.code}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + } }, "font-size": { "$type": "font-size", - "$value": "13", + "$value": "16", "unit": "px", - "comment": "13px/0.8125rem" + "comment": "16px/1rem", + "$modes": { + "hds": "16", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + } }, "line-height": { "$type": "number", - "$value": 1.23, - "comment": "16px" + "$value": 1.25, + "comment": "20px", + "$modes": { + "hds": 1.25, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + } } }, "code-200": { "font-family": { "$type": "font-family", - "$value": "{typography.font-stack.code}" + "$value": "{typography.font-stack.code}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + } }, "font-size": { "$type": "font-size", "$value": "14", "unit": "px", - "comment": "14px/0.875rem" + "comment": "14px/0.875rem", + "$modes": { + "hds": "14", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + } }, "line-height": { "$type": "number", "$value": 1.125, - "comment": "18px" + "comment": "18px", + "$modes": { + "hds": 1.125, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + } } }, - "code-300": { + "code-100": { "font-family": { "$type": "font-family", - "$value": "{typography.font-stack.code}" + "$value": "{typography.font-stack.code}", + "$modes": { + "hds": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + } }, "font-size": { "$type": "font-size", - "$value": "16", + "$value": "13", "unit": "px", - "comment": "16px/1rem" + "comment": "13px/0.8125rem", + "$modes": { + "hds": "13", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + } }, "line-height": { "$type": "number", - "$value": 1.25, - "comment": "20px" + "$value": 1.23, + "comment": "16px", + "$modes": { + "hds": 1.23, + "cds-g0": "{carbon.typography.code01.line-height}", + "cds-g10": "{carbon.typography.code01.line-height}", + "cds-g90": "{carbon.typography.code01.line-height}", + "cds-g100": "{carbon.typography.code01.line-height}" + } } } } diff --git a/showcase/public/assets/styles/@hashicorp/design-system-components-common.css b/showcase/public/assets/styles/@hashicorp/design-system-components-common.css index f993eecdc63..9fa57c1f70f 100644 --- a/showcase/public/assets/styles/@hashicorp/design-system-components-common.css +++ b/showcase/public/assets/styles/@hashicorp/design-system-components-common.css @@ -256,19 +256,19 @@ } .hds-font-weight-regular { - font-weight: 400; + font-weight: var(--token-typography-font-weight-regular); } .hds-font-weight-medium { - font-weight: 500; + font-weight: var(--token-typography-font-weight-medium); } .hds-font-weight-semibold { - font-weight: 600; + font-weight: var(--token-typography-font-weight-semibold); } .hds-font-weight-bold { - font-weight: 700; + font-weight: var(--token-typography-font-weight-bold); } .hds-typography-display-500 { @@ -335,10 +335,10 @@ padding: 0; } -.hds-typography-code-100 { - font-family: var(--token-typography-code-100-font-family); - font-size: var(--token-typography-code-100-font-size); - line-height: var(--token-typography-code-100-line-height); +.hds-typography-code-300 { + font-family: var(--token-typography-code-300-font-family); + font-size: var(--token-typography-code-300-font-size); + line-height: var(--token-typography-code-300-line-height); margin: 0; padding: 0; } @@ -351,10 +351,10 @@ padding: 0; } -.hds-typography-code-300 { - font-family: var(--token-typography-code-300-font-family); - font-size: var(--token-typography-code-300-font-size); - line-height: var(--token-typography-code-300-line-height); +.hds-typography-code-100 { + font-family: var(--token-typography-code-100-font-family); + font-size: var(--token-typography-code-100-font-size); + line-height: var(--token-typography-code-100-line-height); margin: 0; padding: 0; } @@ -1511,8 +1511,10 @@ .hds-app-footer__copyright { display: flex; + flex-wrap: wrap; gap: 6px; align-items: center; + justify-content: center; color: var(--app-footer-copyright-text-color); } .hds-app-footer__copyright .hds-icon { @@ -4967,6 +4969,7 @@ button.hds-button[href]::after { * SPDX-License-Identifier: MPL-2.0 */ .hds-form-file-input { + width: 100%; margin: -4px 0 -4px -4px; padding: 3px 0 3px 3px; color: var(--token-color-foreground-primary); diff --git a/showcase/public/assets/styles/@hashicorp/design-system-components.css b/showcase/public/assets/styles/@hashicorp/design-system-components.css index 1170c2639a3..f77d3256449 100644 --- a/showcase/public/assets/styles/@hashicorp/design-system-components.css +++ b/showcase/public/assets/styles/@hashicorp/design-system-components.css @@ -360,9 +360,11 @@ --token-typography-display-500-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-display-500-font-size: 1.875rem; /** 30px/1.875rem */ --token-typography-display-500-line-height: 1.2666; /** 38px */ + --token-typography-display-500-letter-spacing: -0.5px; /** this is `tracking` */ --token-typography-display-400-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-display-400-font-size: 1.5rem; /** 24px/1.5rem */ --token-typography-display-400-line-height: 1.3333; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ --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 */ @@ -374,6 +376,7 @@ --token-typography-display-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-display-100-font-size: 0.8125rem; /** 13px/0.8125rem */ --token-typography-display-100-line-height: 1.3846; /** 18px */ + --token-typography-display-100-letter-spacing: 0px; /** this is `tracking` */ --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 */ @@ -383,17 +386,21 @@ --token-typography-body-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --token-typography-body-100-font-size: 0.8125rem; /** 13px/0.8125rem */ --token-typography-body-100-line-height: 1.3846; /** 18px */ - --token-typography-code-100-font-family: ui-monospace, Menlo, Consolas, monospace; - --token-typography-code-100-font-size: 0.8125rem; /** 13px/0.8125rem */ - --token-typography-code-100-line-height: 1.23; /** 16px */ - --token-typography-code-200-font-family: ui-monospace, Menlo, Consolas, monospace; - --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ - --token-typography-code-200-line-height: 1.125; /** 18px */ --token-typography-code-300-font-family: ui-monospace, Menlo, Consolas, monospace; --token-typography-code-300-font-size: 1rem; /** 16px/1rem */ --token-typography-code-300-line-height: 1.25; /** 20px */ + --token-typography-code-200-font-family: ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.125; /** 18px */ + --token-typography-code-100-font-family: ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-100-font-size: 0.8125rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.23; /** 16px */ } +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ /** * Do not edit directly, this file was auto-generated. */ @@ -647,19 +654,19 @@ } .hds-font-weight-regular { - font-weight: 400; + font-weight: var(--token-typography-font-weight-regular); } .hds-font-weight-medium { - font-weight: 500; + font-weight: var(--token-typography-font-weight-medium); } .hds-font-weight-semibold { - font-weight: 600; + font-weight: var(--token-typography-font-weight-semibold); } .hds-font-weight-bold { - font-weight: 700; + font-weight: var(--token-typography-font-weight-bold); } .hds-typography-display-500 { @@ -726,10 +733,10 @@ padding: 0; } -.hds-typography-code-100 { - font-family: var(--token-typography-code-100-font-family); - font-size: var(--token-typography-code-100-font-size); - line-height: var(--token-typography-code-100-line-height); +.hds-typography-code-300 { + font-family: var(--token-typography-code-300-font-family); + font-size: var(--token-typography-code-300-font-size); + line-height: var(--token-typography-code-300-line-height); margin: 0; padding: 0; } @@ -742,10 +749,10 @@ padding: 0; } -.hds-typography-code-300 { - font-family: var(--token-typography-code-300-font-family); - font-size: var(--token-typography-code-300-font-size); - line-height: var(--token-typography-code-300-line-height); +.hds-typography-code-100 { + font-family: var(--token-typography-code-100-font-family); + font-size: var(--token-typography-code-100-font-size); + line-height: var(--token-typography-code-100-line-height); margin: 0; padding: 0; } @@ -1902,8 +1909,10 @@ .hds-app-footer__copyright { display: flex; + flex-wrap: wrap; gap: 6px; align-items: center; + justify-content: center; color: var(--app-footer-copyright-text-color); } .hds-app-footer__copyright .hds-icon { @@ -5358,6 +5367,7 @@ button.hds-button[href]::after { * SPDX-License-Identifier: MPL-2.0 */ .hds-form-file-input { + width: 100%; margin: -4px 0 -4px -4px; padding: 3px 0 3px 3px; color: var(--token-color-foreground-primary); diff --git a/showcase/public/assets/styles/@hashicorp/themed-tokens/with-combined-strategies/tokens.css b/showcase/public/assets/styles/@hashicorp/themed-tokens/with-combined-strategies/tokens.css index 3f677760a23..1615c8e18b1 100644 --- a/showcase/public/assets/styles/@hashicorp/themed-tokens/with-combined-strategies/tokens.css +++ b/showcase/public/assets/styles/@hashicorp/themed-tokens/with-combined-strategies/tokens.css @@ -2,52 +2,372 @@ * Do not edit directly, this file was auto-generated. */ +.hds-theme-hds, :root { --token-color-palette-neutral-0: #ffffff; - --token-color-foreground-primary: #ffffff; + --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: #0c56e9; + --token-color-focus-critical-external: #5990ff; /** 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: #8c909c; + --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: #ffffff; + --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-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; - /* added these to test theming in the showcase */ - --token-color-foreground-strong: #0c0c0e; - --token-color-foreground-primary: #3b3d45; - --token-color-surface-strong: #f1f2f3; - --token-color-surface-primary: #ffffff; - --token-color-surface-faint: #ffffff; + --token-typography-display-500-font-family: + -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, + Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-display-500-font-size: 1.875rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.2666; /** 38px */ + --token-typography-display-500-letter-spacing: -0.5px; /** this is `tracking` */ + --token-typography-display-400-font-family: + -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, + Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-display-400-font-size: 1.5rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.3333; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --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-display-100-letter-spacing: 0px; /** this is `tracking` */ + --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.4286; /** 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-300-font-family: + ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.25; /** 20px */ + --token-typography-code-200-font-family: + ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.125; /** 18px */ + --token-typography-code-100-font-family: + ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-100-font-size: 0.8125rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.23; /** 16px */ } -@media (prefers-color-scheme: dark) { - :root:not([class*="hds-theme-"], [data-hds-theme]) { +@media (prefers-color-scheme: light) { + :root:not([class*="hds-theme-"]):not([data-hds-theme]) { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #c6c6c6; + --token-color-border-faint: #e0e0e0; + --token-color-border-strong: #c6c6c6; + --token-color-border-action: #0f62fe; + --token-color-border-highlight: #be95ff; + --token-color-border-success: #42be65; + --token-color-border-warning: #ff832b; + --token-color-border-critical: #ff8389; + --token-color-focus-action-internal: #ffffff; + --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #ffffff; + --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #161616; --token-color-foreground-primary: #161616; + --token-color-foreground-faint: #161616; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: rgba(22, 22, 22, 0.25); + --token-color-foreground-action: #0f62fe; + --token-color-foreground-action-hover: #0043ce; + --token-color-foreground-action-active: #0043ce; + --token-color-foreground-highlight: #8a3ffc; + --token-color-foreground-highlight-on-surface: #6929c4; + --token-color-foreground-highlight-high-contrast: #491d8b; + --token-color-foreground-success: #198038; + --token-color-foreground-success-on-surface: #0e6027; + --token-color-foreground-success-high-contrast: #044317; + --token-color-foreground-warning: #ba4e00; + --token-color-foreground-warning-on-surface: #8a3800; + --token-color-foreground-warning-high-contrast: #5e2900; + --token-color-foreground-critical: #da1e28; + --token-color-foreground-critical-on-surface: #a2191f; + --token-color-foreground-critical-high-contrast: #750e13; + --token-color-page-primary: #ffffff; + --token-color-page-faint: #ffffff; + --token-color-surface-primary: #f4f4f4; + --token-color-surface-faint: #f4f4f4; + --token-color-surface-strong: #f4f4f4; + --token-color-surface-interactive: #f4f4f4; + --token-color-surface-interactive-hover: #e8e8e8; + --token-color-surface-interactive-active: #c6c6c6; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #d0e2ff; + --token-color-surface-highlight: #e8daff; + --token-color-surface-success: #a7f0ba; + --token-color-surface-warning: #ffd9be; + --token-color-surface-critical: #ffd7d9; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; - /* added these to test theming in the showcase */ - --token-color-foreground-strong: #ffffff; - --token-color-foreground-primary: #f1f2f3; - --token-color-surface-strong: #3b3d45; - --token-color-surface-primary: #0c0c0e; - --token-color-surface-faint: #0c0c0e; + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } } -@media (prefers-color-scheme: light) { - :root:not([class*="hds-theme-"], [data-hds-theme]) { +@media (prefers-color-scheme: dark) { + :root:not([class*="hds-theme-"]):not([data-hds-theme]) { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #6f6f6f; + --token-color-border-faint: #393939; + --token-color-border-strong: #525252; + --token-color-border-action: #4589ff; + --token-color-border-highlight: #a56eff; + --token-color-border-success: #24a148; + --token-color-border-warning: #eb6200; + --token-color-border-critical: #fa4d56; + --token-color-focus-action-internal: #161616; + --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #161616; + --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #f4f4f4; --token-color-foreground-primary: #f4f4f4; + --token-color-foreground-faint: #f4f4f4; + --token-color-foreground-high-contrast: #161616; + --token-color-foreground-disabled: rgba(244, 244, 244, 0.25); + --token-color-foreground-action: #78a9ff; + --token-color-foreground-action-hover: #a6c8ff; + --token-color-foreground-action-active: #a6c8ff; + --token-color-foreground-highlight: #be95ff; + --token-color-foreground-highlight-on-surface: #d4bbff; + --token-color-foreground-highlight-high-contrast: #d4bbff; + --token-color-foreground-success: #42be65; + --token-color-foreground-success-on-surface: #6fdc8c; + --token-color-foreground-success-high-contrast: #a7f0ba; + --token-color-foreground-warning: #ff832b; + --token-color-foreground-warning-on-surface: #ffb784; + --token-color-foreground-warning-high-contrast: #ffd9be; + --token-color-foreground-critical: #ff8389; + --token-color-foreground-critical-on-surface: #ffb3b8; + --token-color-foreground-critical-high-contrast: #ffd7d9; + --token-color-page-primary: #161616; + --token-color-page-faint: #161616; + --token-color-surface-primary: #262626; + --token-color-surface-faint: #262626; + --token-color-surface-strong: #262626; + --token-color-surface-interactive: #262626; + --token-color-surface-interactive-hover: #333333; + --token-color-surface-interactive-active: #525252; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #0043ce; + --token-color-surface-highlight: #6929c4; + --token-color-surface-success: #0e6027; + --token-color-surface-warning: #8a3800; + --token-color-surface-critical: #a2191f; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; - /* added these to test theming in the showcase */ - --token-color-foreground-strong: #0c0c0e; - --token-color-foreground-primary: #3b3d45; - --token-color-surface-strong: #f1f2f3; - --token-color-surface-primary: #ffffff; - --token-color-surface-faint: #ffffff; + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } } @@ -56,49 +376,373 @@ [data-hds-theme="light"], [data-hds-theme="cds-g0"] { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #c6c6c6; + --token-color-border-faint: #e0e0e0; + --token-color-border-strong: #c6c6c6; + --token-color-border-action: #0f62fe; + --token-color-border-highlight: #be95ff; + --token-color-border-success: #42be65; + --token-color-border-warning: #ff832b; + --token-color-border-critical: #ff8389; + --token-color-focus-action-internal: #ffffff; + --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #ffffff; + --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #161616; --token-color-foreground-primary: #161616; + --token-color-foreground-faint: #161616; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: rgba(22, 22, 22, 0.25); + --token-color-foreground-action: #0f62fe; + --token-color-foreground-action-hover: #0043ce; + --token-color-foreground-action-active: #0043ce; + --token-color-foreground-highlight: #8a3ffc; + --token-color-foreground-highlight-on-surface: #6929c4; + --token-color-foreground-highlight-high-contrast: #491d8b; + --token-color-foreground-success: #198038; + --token-color-foreground-success-on-surface: #0e6027; + --token-color-foreground-success-high-contrast: #044317; + --token-color-foreground-warning: #ba4e00; + --token-color-foreground-warning-on-surface: #8a3800; + --token-color-foreground-warning-high-contrast: #5e2900; + --token-color-foreground-critical: #da1e28; + --token-color-foreground-critical-on-surface: #a2191f; + --token-color-foreground-critical-high-contrast: #750e13; + --token-color-page-primary: #ffffff; + --token-color-page-faint: #ffffff; + --token-color-surface-primary: #f4f4f4; + --token-color-surface-faint: #f4f4f4; + --token-color-surface-strong: #f4f4f4; + --token-color-surface-interactive: #f4f4f4; + --token-color-surface-interactive-hover: #e8e8e8; + --token-color-surface-interactive-active: #c6c6c6; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #d0e2ff; + --token-color-surface-highlight: #e8daff; + --token-color-surface-success: #a7f0ba; + --token-color-surface-warning: #ffd9be; + --token-color-surface-critical: #ffd7d9; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; - /* added these to test theming in the showcase */ - --token-color-foreground-strong: #0c0c0e; - --token-color-foreground-primary: #3b3d45; - --token-color-surface-strong: #f1f2f3; - --token-color-surface-primary: #ffffff; - --token-color-surface-faint: #ffffff; + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } .hds-theme-cds-g10, [data-hds-theme="cds-g10"] { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #e0e0e0; + --token-color-border-faint: #c6c6c6; + --token-color-border-strong: #e0e0e0; + --token-color-border-action: #0f62fe; + --token-color-border-highlight: #be95ff; + --token-color-border-success: #42be65; + --token-color-border-warning: #ff832b; + --token-color-border-critical: #ff8389; + --token-color-focus-action-internal: #ffffff; + --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #ffffff; + --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #161616; --token-color-foreground-primary: #161616; + --token-color-foreground-faint: #161616; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: rgba(22, 22, 22, 0.25); + --token-color-foreground-action: #0f62fe; + --token-color-foreground-action-hover: #0043ce; + --token-color-foreground-action-active: #0043ce; + --token-color-foreground-highlight: #8a3ffc; + --token-color-foreground-highlight-on-surface: #6929c4; + --token-color-foreground-highlight-high-contrast: #491d8b; + --token-color-foreground-success: #198038; + --token-color-foreground-success-on-surface: #0e6027; + --token-color-foreground-success-high-contrast: #044317; + --token-color-foreground-warning: #ba4e00; + --token-color-foreground-warning-on-surface: #8a3800; + --token-color-foreground-warning-high-contrast: #5e2900; + --token-color-foreground-critical: #da1e28; + --token-color-foreground-critical-on-surface: #a2191f; + --token-color-foreground-critical-high-contrast: #750e13; + --token-color-page-primary: #f4f4f4; + --token-color-page-faint: #f4f4f4; + --token-color-surface-primary: #ffffff; + --token-color-surface-faint: #ffffff; + --token-color-surface-strong: #ffffff; + --token-color-surface-interactive: #ffffff; + --token-color-surface-interactive-hover: #e8e8e8; + --token-color-surface-interactive-active: #c6c6c6; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #d0e2ff; + --token-color-surface-highlight: #e8daff; + --token-color-surface-success: #a7f0ba; + --token-color-surface-warning: #ffd9be; + --token-color-surface-critical: #ffd7d9; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; - /* added these to test theming in the showcase */ - --token-color-foreground-strong: #1c1c1e; - --token-color-foreground-primary: #4b4d45; - --token-color-surface-strong: #d1d2d3; - --token-color-surface-primary: #dddddd; - --token-color-surface-faint: #dddddd; + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } .hds-theme-cds-g90, [data-hds-theme="cds-g90"] { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #8d8d8d; + --token-color-border-faint: #525252; + --token-color-border-strong: #6f6f6f; + --token-color-border-action: #4589ff; + --token-color-border-highlight: #a56eff; + --token-color-border-success: #24a148; + --token-color-border-warning: #eb6200; + --token-color-border-critical: #fa4d56; + --token-color-focus-action-internal: #161616; + --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #161616; + --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #f4f4f4; --token-color-foreground-primary: #f4f4f4; + --token-color-foreground-faint: #f4f4f4; + --token-color-foreground-high-contrast: #161616; + --token-color-foreground-disabled: rgba(244, 244, 244, 0.25); + --token-color-foreground-action: #78a9ff; + --token-color-foreground-action-hover: #a6c8ff; + --token-color-foreground-action-active: #a6c8ff; + --token-color-foreground-highlight: #be95ff; + --token-color-foreground-highlight-on-surface: #d4bbff; + --token-color-foreground-highlight-high-contrast: #e8daff; + --token-color-foreground-success: #42be65; + --token-color-foreground-success-on-surface: #6fdc8c; + --token-color-foreground-success-high-contrast: #a7f0ba; + --token-color-foreground-warning: #ff832b; + --token-color-foreground-warning-on-surface: #ffb784; + --token-color-foreground-warning-high-contrast: #ffd9be; + --token-color-foreground-critical: #ff8389; + --token-color-foreground-critical-on-surface: #ffb3b8; + --token-color-foreground-critical-high-contrast: #ffd7d9; + --token-color-page-primary: #262626; + --token-color-page-faint: #262626; + --token-color-surface-primary: #393939; + --token-color-surface-faint: #393939; + --token-color-surface-strong: #393939; + --token-color-surface-interactive: #393939; + --token-color-surface-interactive-hover: #474747; + --token-color-surface-interactive-active: #6f6f6f; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #0043ce; + --token-color-surface-highlight: #6929c4; + --token-color-surface-success: #0e6027; + --token-color-surface-warning: #8a3800; + --token-color-surface-critical: #a2191f; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; - /* added these to test theming in the showcase */ - --token-color-foreground-strong: #dddddd; - --token-color-foreground-primary: #d1d2d3; - --token-color-surface-strong: #4b4d45; - --token-color-surface-primary: #1c1c1e; - --token-color-surface-faint: #1c1c1e; + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } .hds-theme-dark, @@ -106,17 +750,125 @@ [data-hds-theme="dark"], [data-hds-theme="cds-g100"] { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #6f6f6f; + --token-color-border-faint: #393939; + --token-color-border-strong: #525252; + --token-color-border-action: #4589ff; + --token-color-border-highlight: #a56eff; + --token-color-border-success: #24a148; + --token-color-border-warning: #eb6200; + --token-color-border-critical: #fa4d56; + --token-color-focus-action-internal: #161616; + --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #161616; + --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #f4f4f4; --token-color-foreground-primary: #f4f4f4; + --token-color-foreground-faint: #f4f4f4; + --token-color-foreground-high-contrast: #161616; + --token-color-foreground-disabled: rgba(244, 244, 244, 0.25); + --token-color-foreground-action: #78a9ff; + --token-color-foreground-action-hover: #a6c8ff; + --token-color-foreground-action-active: #a6c8ff; + --token-color-foreground-highlight: #be95ff; + --token-color-foreground-highlight-on-surface: #d4bbff; + --token-color-foreground-highlight-high-contrast: #d4bbff; + --token-color-foreground-success: #42be65; + --token-color-foreground-success-on-surface: #6fdc8c; + --token-color-foreground-success-high-contrast: #a7f0ba; + --token-color-foreground-warning: #ff832b; + --token-color-foreground-warning-on-surface: #ffb784; + --token-color-foreground-warning-high-contrast: #ffd9be; + --token-color-foreground-critical: #ff8389; + --token-color-foreground-critical-on-surface: #ffb3b8; + --token-color-foreground-critical-high-contrast: #ffd7d9; + --token-color-page-primary: #161616; + --token-color-page-faint: #161616; + --token-color-surface-primary: #262626; + --token-color-surface-faint: #262626; + --token-color-surface-strong: #262626; + --token-color-surface-interactive: #262626; + --token-color-surface-interactive-hover: #333333; + --token-color-surface-interactive-active: #525252; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #0043ce; + --token-color-surface-highlight: #6929c4; + --token-color-surface-success: #0e6027; + --token-color-surface-warning: #8a3800; + --token-color-surface-critical: #a2191f; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; - /* added these to test theming in the showcase */ - --token-color-foreground-strong: #ffffff; - --token-color-foreground-primary: #f1f2f3; - --token-color-surface-strong: #3b3d45; - --token-color-surface-primary: #0c0c0e; - --token-color-surface-faint: #0c0c0e; + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } :root { @@ -165,51 +917,6 @@ --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; @@ -324,7 +1031,7 @@ --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; + inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff; --token-app-header-height: 60px; --token-app-header-home-link-size: 36px; --token-app-header-logo-size: 28px; @@ -384,14 +1091,14 @@ --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-foreground-color: #8c909c; --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-foreground-color: #3b3d45; --token-form-control-readonly-surface-color: #f1f2f3; --token-form-control-readonly-border-color: #656a761a; --token-form-control-disabled-foreground-color: #8c909c; @@ -494,65 +1201,4 @@ --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/showcase/public/assets/styles/@hashicorp/themed-tokens/with-css-selectors/tokens.css b/showcase/public/assets/styles/@hashicorp/themed-tokens/with-css-selectors/tokens.css index 1876d5d1e1c..ce0f5dca9c3 100644 --- a/showcase/public/assets/styles/@hashicorp/themed-tokens/with-css-selectors/tokens.css +++ b/showcase/public/assets/styles/@hashicorp/themed-tokens/with-css-selectors/tokens.css @@ -2,82 +2,623 @@ * Do not edit directly, this file was auto-generated. */ +.hds-theme-hds, :root { --token-color-palette-neutral-0: #ffffff; + --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: #0c56e9; + --token-color-focus-critical-external: #5990ff; /** 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: #8c909c; + --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: #ffffff; + --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-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; - /* added these to test theming in the showcase */ - --token-color-foreground-strong: #0c0c0e; - --token-color-foreground-primary: #3b3d45; - --token-color-surface-strong: #f1f2f3; - --token-color-surface-primary: #ffffff; - --token-color-surface-faint: #ffffff; + --token-typography-display-500-font-family: + -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, + Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-display-500-font-size: 1.875rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.2666; /** 38px */ + --token-typography-display-500-letter-spacing: -0.5px; /** this is `tracking` */ + --token-typography-display-400-font-family: + -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, + Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-display-400-font-size: 1.5rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.3333; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --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-display-100-letter-spacing: 0px; /** this is `tracking` */ + --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.4286; /** 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-300-font-family: + ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.25; /** 20px */ + --token-typography-code-200-font-family: + ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.125; /** 18px */ + --token-typography-code-100-font-family: + ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-100-font-size: 0.8125rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.23; /** 16px */ } .hds-theme-light, .hds-theme-cds-g0, -[data-hds-theme="cds-g0"], -[data-hds-theme="light"] { +[data-hds-theme="light"], +[data-hds-theme="cds-g0"] { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #c6c6c6; + --token-color-border-faint: #e0e0e0; + --token-color-border-strong: #c6c6c6; + --token-color-border-action: #0f62fe; + --token-color-border-highlight: #be95ff; + --token-color-border-success: #42be65; + --token-color-border-warning: #ff832b; + --token-color-border-critical: #ff8389; + --token-color-focus-action-internal: #ffffff; + --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #ffffff; + --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #161616; + --token-color-foreground-primary: #161616; + --token-color-foreground-faint: #161616; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: rgba(22, 22, 22, 0.25); + --token-color-foreground-action: #0f62fe; + --token-color-foreground-action-hover: #0043ce; + --token-color-foreground-action-active: #0043ce; + --token-color-foreground-highlight: #8a3ffc; + --token-color-foreground-highlight-on-surface: #6929c4; + --token-color-foreground-highlight-high-contrast: #491d8b; + --token-color-foreground-success: #198038; + --token-color-foreground-success-on-surface: #0e6027; + --token-color-foreground-success-high-contrast: #044317; + --token-color-foreground-warning: #ba4e00; + --token-color-foreground-warning-on-surface: #8a3800; + --token-color-foreground-warning-high-contrast: #5e2900; + --token-color-foreground-critical: #da1e28; + --token-color-foreground-critical-on-surface: #a2191f; + --token-color-foreground-critical-high-contrast: #750e13; + --token-color-page-primary: #ffffff; + --token-color-page-faint: #ffffff; + --token-color-surface-primary: #f4f4f4; + --token-color-surface-faint: #f4f4f4; + --token-color-surface-strong: #f4f4f4; + --token-color-surface-interactive: #f4f4f4; + --token-color-surface-interactive-hover: #e8e8e8; + --token-color-surface-interactive-active: #c6c6c6; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #d0e2ff; + --token-color-surface-highlight: #e8daff; + --token-color-surface-success: #a7f0ba; + --token-color-surface-warning: #ffd9be; + --token-color-surface-critical: #ffd7d9; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; - /* added these to test theming in the showcase */ - --token-color-foreground-strong: #0c0c0e; - --token-color-foreground-primary: #3b3d45; - --token-color-surface-strong: #f1f2f3; - --token-color-surface-primary: #ffffff; - --token-color-surface-faint: #ffffff; + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } .hds-theme-cds-g10, [data-hds-theme="cds-g10"] { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #e0e0e0; + --token-color-border-faint: #c6c6c6; + --token-color-border-strong: #e0e0e0; + --token-color-border-action: #0f62fe; + --token-color-border-highlight: #be95ff; + --token-color-border-success: #42be65; + --token-color-border-warning: #ff832b; + --token-color-border-critical: #ff8389; + --token-color-focus-action-internal: #ffffff; + --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #ffffff; + --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #161616; + --token-color-foreground-primary: #161616; + --token-color-foreground-faint: #161616; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: rgba(22, 22, 22, 0.25); + --token-color-foreground-action: #0f62fe; + --token-color-foreground-action-hover: #0043ce; + --token-color-foreground-action-active: #0043ce; + --token-color-foreground-highlight: #8a3ffc; + --token-color-foreground-highlight-on-surface: #6929c4; + --token-color-foreground-highlight-high-contrast: #491d8b; + --token-color-foreground-success: #198038; + --token-color-foreground-success-on-surface: #0e6027; + --token-color-foreground-success-high-contrast: #044317; + --token-color-foreground-warning: #ba4e00; + --token-color-foreground-warning-on-surface: #8a3800; + --token-color-foreground-warning-high-contrast: #5e2900; + --token-color-foreground-critical: #da1e28; + --token-color-foreground-critical-on-surface: #a2191f; + --token-color-foreground-critical-high-contrast: #750e13; + --token-color-page-primary: #f4f4f4; + --token-color-page-faint: #f4f4f4; + --token-color-surface-primary: #ffffff; + --token-color-surface-faint: #ffffff; + --token-color-surface-strong: #ffffff; + --token-color-surface-interactive: #ffffff; + --token-color-surface-interactive-hover: #e8e8e8; + --token-color-surface-interactive-active: #c6c6c6; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #d0e2ff; + --token-color-surface-highlight: #e8daff; + --token-color-surface-success: #a7f0ba; + --token-color-surface-warning: #ffd9be; + --token-color-surface-critical: #ffd7d9; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; - /* added these to test theming in the showcase */ - --token-color-foreground-strong: #1c1c1e; - --token-color-foreground-primary: #4b4d45; - --token-color-surface-strong: #d1d2d3; - --token-color-surface-primary: #dddddd; - --token-color-surface-faint: #dddddd; + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } .hds-theme-cds-g90, [data-hds-theme="cds-g90"] { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #8d8d8d; + --token-color-border-faint: #525252; + --token-color-border-strong: #6f6f6f; + --token-color-border-action: #4589ff; + --token-color-border-highlight: #a56eff; + --token-color-border-success: #24a148; + --token-color-border-warning: #eb6200; + --token-color-border-critical: #fa4d56; + --token-color-focus-action-internal: #161616; + --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #161616; + --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #f4f4f4; + --token-color-foreground-primary: #f4f4f4; + --token-color-foreground-faint: #f4f4f4; + --token-color-foreground-high-contrast: #161616; + --token-color-foreground-disabled: rgba(244, 244, 244, 0.25); + --token-color-foreground-action: #78a9ff; + --token-color-foreground-action-hover: #a6c8ff; + --token-color-foreground-action-active: #a6c8ff; + --token-color-foreground-highlight: #be95ff; + --token-color-foreground-highlight-on-surface: #d4bbff; + --token-color-foreground-highlight-high-contrast: #e8daff; + --token-color-foreground-success: #42be65; + --token-color-foreground-success-on-surface: #6fdc8c; + --token-color-foreground-success-high-contrast: #a7f0ba; + --token-color-foreground-warning: #ff832b; + --token-color-foreground-warning-on-surface: #ffb784; + --token-color-foreground-warning-high-contrast: #ffd9be; + --token-color-foreground-critical: #ff8389; + --token-color-foreground-critical-on-surface: #ffb3b8; + --token-color-foreground-critical-high-contrast: #ffd7d9; + --token-color-page-primary: #262626; + --token-color-page-faint: #262626; + --token-color-surface-primary: #393939; + --token-color-surface-faint: #393939; + --token-color-surface-strong: #393939; + --token-color-surface-interactive: #393939; + --token-color-surface-interactive-hover: #474747; + --token-color-surface-interactive-active: #6f6f6f; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #0043ce; + --token-color-surface-highlight: #6929c4; + --token-color-surface-success: #0e6027; + --token-color-surface-warning: #8a3800; + --token-color-surface-critical: #a2191f; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; - /* added these to test theming in the showcase */ - --token-color-foreground-strong: #dddddd; - --token-color-foreground-primary: #d1d2d3; - --token-color-surface-strong: #4b4d45; - --token-color-surface-primary: #1c1c1e; - --token-color-surface-faint: #1c1c1e; + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } .hds-theme-dark, .hds-theme-cds-g100, -[data-hds-theme="cds-g100"], -[data-hds-theme="dark"] { +[data-hds-theme="dark"], +[data-hds-theme="cds-g100"] { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #6f6f6f; + --token-color-border-faint: #393939; + --token-color-border-strong: #525252; + --token-color-border-action: #4589ff; + --token-color-border-highlight: #a56eff; + --token-color-border-success: #24a148; + --token-color-border-warning: #eb6200; + --token-color-border-critical: #fa4d56; + --token-color-focus-action-internal: #161616; + --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #161616; + --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #f4f4f4; + --token-color-foreground-primary: #f4f4f4; + --token-color-foreground-faint: #f4f4f4; + --token-color-foreground-high-contrast: #161616; + --token-color-foreground-disabled: rgba(244, 244, 244, 0.25); + --token-color-foreground-action: #78a9ff; + --token-color-foreground-action-hover: #a6c8ff; + --token-color-foreground-action-active: #a6c8ff; + --token-color-foreground-highlight: #be95ff; + --token-color-foreground-highlight-on-surface: #d4bbff; + --token-color-foreground-highlight-high-contrast: #d4bbff; + --token-color-foreground-success: #42be65; + --token-color-foreground-success-on-surface: #6fdc8c; + --token-color-foreground-success-high-contrast: #a7f0ba; + --token-color-foreground-warning: #ff832b; + --token-color-foreground-warning-on-surface: #ffb784; + --token-color-foreground-warning-high-contrast: #ffd9be; + --token-color-foreground-critical: #ff8389; + --token-color-foreground-critical-on-surface: #ffb3b8; + --token-color-foreground-critical-high-contrast: #ffd7d9; + --token-color-page-primary: #161616; + --token-color-page-faint: #161616; + --token-color-surface-primary: #262626; + --token-color-surface-faint: #262626; + --token-color-surface-strong: #262626; + --token-color-surface-interactive: #262626; + --token-color-surface-interactive-hover: #333333; + --token-color-surface-interactive-active: #525252; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #0043ce; + --token-color-surface-highlight: #6929c4; + --token-color-surface-success: #0e6027; + --token-color-surface-warning: #8a3800; + --token-color-surface-critical: #a2191f; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; - /* added these to test theming in the showcase */ - --token-color-foreground-strong: #ffffff; - --token-color-foreground-primary: #f1f2f3; - --token-color-surface-strong: #3b3d45; - --token-color-surface-primary: #0c0c0e; - --token-color-surface-faint: #0c0c0e; + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } :root { @@ -126,51 +667,6 @@ --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; @@ -285,7 +781,7 @@ --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; + inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff; --token-app-header-height: 60px; --token-app-header-home-link-size: 36px; --token-app-header-logo-size: 28px; @@ -345,14 +841,14 @@ --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-foreground-color: #8c909c; --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-foreground-color: #3b3d45; --token-form-control-readonly-surface-color: #f1f2f3; --token-form-control-readonly-border-color: #656a761a; --token-form-control-disabled-foreground-color: #8c909c; @@ -455,65 +951,4 @@ --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/showcase/public/assets/styles/@hashicorp/themed-tokens/with-prefers-color-scheme/tokens.css b/showcase/public/assets/styles/@hashicorp/themed-tokens/with-prefers-color-scheme/tokens.css index f29f04cfc39..de81d5a03b0 100644 --- a/showcase/public/assets/styles/@hashicorp/themed-tokens/with-prefers-color-scheme/tokens.css +++ b/showcase/public/assets/styles/@hashicorp/themed-tokens/with-prefers-color-scheme/tokens.css @@ -5,33 +5,250 @@ @media (prefers-color-scheme: light) { :root { --token-color-palette-neutral-0: #ffffff; - --token-color-foreground-primary: #f4f4f4; + --token-color-border-primary: #c6c6c6; + --token-color-border-faint: #e0e0e0; + --token-color-border-strong: #c6c6c6; + --token-color-border-action: #0f62fe; + --token-color-border-highlight: #be95ff; + --token-color-border-success: #42be65; + --token-color-border-warning: #ff832b; + --token-color-border-critical: #ff8389; + --token-color-focus-action-internal: #ffffff; + --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #ffffff; + --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #161616; + --token-color-foreground-primary: #161616; + --token-color-foreground-faint: #161616; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: rgba(22, 22, 22, 0.25); + --token-color-foreground-action: #0f62fe; + --token-color-foreground-action-hover: #0043ce; + --token-color-foreground-action-active: #0043ce; + --token-color-foreground-highlight: #8a3ffc; + --token-color-foreground-highlight-on-surface: #6929c4; + --token-color-foreground-highlight-high-contrast: #491d8b; + --token-color-foreground-success: #198038; + --token-color-foreground-success-on-surface: #0e6027; + --token-color-foreground-success-high-contrast: #044317; + --token-color-foreground-warning: #ba4e00; + --token-color-foreground-warning-on-surface: #8a3800; + --token-color-foreground-warning-high-contrast: #5e2900; + --token-color-foreground-critical: #da1e28; + --token-color-foreground-critical-on-surface: #a2191f; + --token-color-foreground-critical-high-contrast: #750e13; + --token-color-page-primary: #ffffff; + --token-color-page-faint: #ffffff; + --token-color-surface-primary: #f4f4f4; + --token-color-surface-faint: #f4f4f4; + --token-color-surface-strong: #f4f4f4; + --token-color-surface-interactive: #f4f4f4; + --token-color-surface-interactive-hover: #e8e8e8; + --token-color-surface-interactive-active: #c6c6c6; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #d0e2ff; + --token-color-surface-highlight: #e8daff; + --token-color-surface-success: #a7f0ba; + --token-color-surface-warning: #ffd9be; + --token-color-surface-critical: #ffd7d9; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; - /* added these to test theming in the showcase */ - --token-color-foreground-strong: #0c0c0e; - --token-color-foreground-primary: #3b3d45; - --token-color-surface-strong: #f1f2f3; - --token-color-surface-primary: #ffffff; - --token-color-surface-faint: #ffffff; + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } } @media (prefers-color-scheme: dark) { :root { --token-color-palette-neutral-0: #ffffff; + --token-color-border-primary: #6f6f6f; + --token-color-border-faint: #393939; + --token-color-border-strong: #525252; + --token-color-border-action: #4589ff; + --token-color-border-highlight: #a56eff; + --token-color-border-success: #24a148; + --token-color-border-warning: #eb6200; + --token-color-border-critical: #fa4d56; + --token-color-focus-action-internal: #161616; + --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #161616; + --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #f4f4f4; + --token-color-foreground-primary: #f4f4f4; + --token-color-foreground-faint: #f4f4f4; + --token-color-foreground-high-contrast: #161616; + --token-color-foreground-disabled: rgba(244, 244, 244, 0.25); + --token-color-foreground-action: #78a9ff; + --token-color-foreground-action-hover: #a6c8ff; + --token-color-foreground-action-active: #a6c8ff; + --token-color-foreground-highlight: #be95ff; + --token-color-foreground-highlight-on-surface: #d4bbff; + --token-color-foreground-highlight-high-contrast: #d4bbff; + --token-color-foreground-success: #42be65; + --token-color-foreground-success-on-surface: #6fdc8c; + --token-color-foreground-success-high-contrast: #a7f0ba; + --token-color-foreground-warning: #ff832b; + --token-color-foreground-warning-on-surface: #ffb784; + --token-color-foreground-warning-high-contrast: #ffd9be; + --token-color-foreground-critical: #ff8389; + --token-color-foreground-critical-on-surface: #ffb3b8; + --token-color-foreground-critical-high-contrast: #ffd7d9; + --token-color-page-primary: #161616; + --token-color-page-faint: #161616; + --token-color-surface-primary: #262626; + --token-color-surface-faint: #262626; + --token-color-surface-strong: #262626; + --token-color-surface-interactive: #262626; + --token-color-surface-interactive-hover: #333333; + --token-color-surface-interactive-active: #525252; + --token-color-surface-interactive-disabled: #ff0000; + --token-color-surface-action: #0043ce; + --token-color-surface-highlight: #6929c4; + --token-color-surface-success: #0e6027; + --token-color-surface-warning: #8a3800; + --token-color-surface-critical: #a2191f; + --token-typography-font-stack-display: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-text: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-font-stack-code: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; --token-typography-font-weight-regular: 400; --token-typography-font-weight-medium: 400; --token-typography-font-weight-semibold: 600; --token-typography-font-weight-bold: 600; - /* added these to test theming in the showcase */ - --token-color-foreground-strong: #ffffff; - --token-color-foreground-primary: #f1f2f3; - --token-color-surface-strong: #3b3d45; - --token-color-surface-primary: #0c0c0e; - --token-color-surface-faint: #0c0c0e; + --token-typography-display-500-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */ + --token-typography-display-500-line-height: 1.25; /** 38px */ + --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-400-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */ + --token-typography-display-400-line-height: 1.28572; /** 32px */ + --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */ + --token-typography-display-300-line-height: 1.4; /** 24px */ + --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-200-font-size: 1rem; /** 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /** 24px */ + --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */ + --token-typography-display-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.42857; /** 18px */ + --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */ + --token-typography-body-300-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-300-font-size: 1rem; /** 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /** 24px */ + --token-typography-body-200-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-body-200-line-height: 1.42857; /** 20px */ + --token-typography-body-100-font-family: + "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, + ".SFNSText-Regular", sans-serif; + --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.28572; /** 18px */ + --token-typography-code-300-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */ + --token-typography-code-300-line-height: 1.42857; /** 20px */ + --token-typography-code-200-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */ + --token-typography-code-200-line-height: 1.42857; /** 18px */ + --token-typography-code-100-font-family: + "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + Courier, monospace; + --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.33333; /** 16px */ } } @@ -81,51 +298,6 @@ --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; @@ -240,7 +412,7 @@ --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; + inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff; --token-app-header-height: 60px; --token-app-header-home-link-size: 36px; --token-app-header-logo-size: 28px; @@ -300,14 +472,14 @@ --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-foreground-color: #8c909c; --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-foreground-color: #3b3d45; --token-form-control-readonly-surface-color: #f1f2f3; --token-form-control-readonly-border-color: #656a761a; --token-form-control-disabled-foreground-color: #8c909c; @@ -410,65 +582,4 @@ --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 */ }